﻿html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{margin:0;padding:0;font-family:"微軟正黑體",Nanum Barun Gothic,sans-serif;background:#000;color:#000;font-size:16px;font-weight:400;line-height:24px}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:""}a:hover,a:focus,a:active,a:visited,button:focus{text-decoration:none;outline:none}table{border-collapse:collapse;border-spacing:0}img{max-width:100%;height:auto}button,a,a.active,a.nav-link.active,.nav-tabs .nav-link{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}::-webkit-scrollbar{display:none}::-webkit-scrollbar-button{display:none}@keyframes char1-swing-data-v-1a95a69e{0%{rotate:2deg}to{rotate:-2deg}}@keyframes blinking-data-v-1a95a69e{0%{opacity:1}to{opacity:.3}}@keyframes floating-data-v-1a95a69e{0%{transform:translateY(0)}to{transform:translateY(-10px)}}body{background:#474456;overflow-x:hidden}@media only screen and (max-width: 480px){body img{max-width:98%}}.sideBtn{display:none;margin:0;padding:0}@media only screen and (max-width: 480px){.sideBtn{display:block;position:fixed;right:5px;bottom:4vh;z-index:999}}.sideBtn a{display:inline-block;background-color:#ffdd6b !important;width:100px;height:50px;color:#fff;font-size:20px;text-align:center;line-height:50px;margin:4px;opacity:.85;border-radius:7px;border:2px solid #fff !important}#main main{position:relative;background:url(../images/mainBg.jpg) no-repeat center center/cover;width:100vw;min-height:100vh;overflow:hidden}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#main main{background:url(../images/mainBg.webp) no-repeat center center/cover}}@media only screen and (max-width: 800px){#main main{background:url(../images/mainBg_mo.jpg) no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#main main{background:url(../images/mainBg_mo.webp) no-repeat center center/cover}}}#main main .mainChar::before{content:"";width:100%;height:100%;background:url(../images/mainChar_hover.png) no-repeat center center/contain;position:absolute;inset:0;opacity:0;z-index:0}@media only screen and (max-width: 800px){#main main .mainChar::before{display:none}}#main main .mainChar:hover::before{opacity:1;z-index:1;transition:.6s opacity}@media only screen and (max-width: 800px){#main main .mainChar{position:absolute;height:100%;background:url(../images/mainChar.png) no-repeat center top/cover}#main main .mainChar img{display:none}}#main main .mainTitle{position:absolute;left:50%;transform:translateX(-50%);bottom:4%;z-index:9}@media only screen and (max-width: 1200px){#main main .mainTitle{left:16%;transform:translateX(0);bottom:10%}}@media only screen and (max-width: 800px){#main main .mainTitle{left:10vw;transform:translateX(0);bottom:0}#main main .mainTitle img{max-width:80vw}}#main section{position:relative;width:100vw;background:url(../images/mainBg2.jpg) no-repeat center center/cover;overflow:hidden;text-align:center}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#main section{background:url(../images/mainBg2.webp) no-repeat center center/cover}}#main section .listfour{display:flex;flex-wrap:wrap;justify-content:center}#main section .listfour a{position:relative;display:block;margin:1vw}#main section .listfour a:hover{transform:scale(1.1);transition:.6s transform}#story{background:url(../images/storyBg.jpg) no-repeat center center/cover;text-align:center;min-height:100vh}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#story{background:url(../images/storyBg.webp) no-repeat center center/cover}}@media only screen and (max-width: 480px){#story{background:url(../images/storyBg_mo.jpg) no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#story{background:url(../images/storyBg_mo.webp) no-repeat center center/cover}}}#story::before{content:"";width:667px;height:80%;background:url(../images/storyDeco1.png) no-repeat center top/cover;position:absolute;left:4%;bottom:0;z-index:1}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#story::before{background:url(../images/storyDeco1.webp) no-repeat center top/cover}}@media only screen and (max-width: 1440px){#story::before{display:none}}#story .story{position:relative;display:inline-block;padding:1% 0}@media only screen and (max-width: 480px){#story .story{background:url(../images/storyIframe.png) no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#story .story{background:url(../images/storyIframe.webp) no-repeat center center/cover}}#story .story>picture img{opacity:0}}#story .story::before{content:"";width:840px;height:903px;background:url(../images/storyDeco.png) no-repeat center center/contain;position:absolute;top:-4%;right:2%;pointer-events:none}#story .story>div{position:absolute;color:#000;top:40%;max-width:600px;text-align:center;left:50%;transform:translate(-50%, -50%);padding:0 4%}@media only screen and (max-width: 800px){#story .story>div{top:50%}}@media only screen and (max-width: 480px){#story .story>div{max-width:100%;left:unset;transform:translate(0, -50%);padding:0 14%}}#story .story p{line-height:2rem;margin:1rem auto;color:#220f4f;font-size:18px}@media only screen and (max-width: 767px){#story .story p{font-size:16px}}@media only screen and (max-width: 480px){#story .story p{font-size:14px;line-height:20px}}.ctnTwo{display:flex;flex-wrap:wrap;justify-content:center}.ctnTwo h3{margin-right:60px}@media only screen and (max-width: 800px){.ctnTwo h3{margin:20px auto 20px 20px;width:50%}}.ctnTwo .map{position:relative;max-width:1014px;display:flex;flex-wrap:wrap;justify-content:space-between;text-align:left}@media only screen and (max-width: 1440px){.ctnTwo .map{max-width:90vw;justify-content:center}}.ctnTwo .map h4{margin:0 0 4% 0}.ctnTwo .map h4 span{color:#fff}.ctnTwo .map .pic-modal{width:100%;position:relative}.ctnTwo .map>div{width:48%;margin:4vh 0}@media only screen and (max-width: 800px){.ctnTwo .map>div{width:98%}}#map1{background:url("../images/mapBg1.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#map1{background:url("../images/mapBg1.webp") no-repeat center center/cover}}@media only screen and (max-width: 480px){#map1{background:url("../images/mapBg1_mo.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#map1{background:url("../images/mapBg1_mo.webp") no-repeat center center/cover}}}#map2{background:url("../images/mapBg2.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#map2{background:url("../images/mapBg2.webp") no-repeat center center/cover}}@media only screen and (max-width: 480px){#map2{background:url("../images/mapBg2_mo.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#map2{background:url("../images/mapBg2_mo.webp") no-repeat center center/cover}}}#map3{background:url("../images/mapBg3.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#map3{background:url("../images/mapBg3.webp") no-repeat center center/cover}}@media only screen and (max-width: 480px){#map3{background:url("../images/mapBg3_mo.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#map3{background:url("../images/mapBg3_mo.webp") no-repeat center center/cover}}}#map4{background:url("../images/mapBg4.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#map4{background:url("../images/mapBg4.webp") no-repeat center center/cover}}@media only screen and (max-width: 480px){#map4{background:url("../images/mapBg4_mo.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#map4{background:url("../images/mapBg4_mo.webp") no-repeat center center/cover}}}.popbtn{position:relative}.popbtn .look{position:absolute;right:2%;bottom:4%;cursor:pointer;opacity:.6}.popbtn .look:hover{opacity:1}#map4 .map{max-width:502px;flex-direction:column;justify-content:flex-start;margin-right:1%}@media only screen and (max-width: 1440px){#map4 .map{justify-content:flex-start}}#map4 .map>div{width:100%}.ctnBoss{display:flex;flex-wrap:wrap;justify-content:center}.ctnBoss .boss{width:20%;text-align:left;margin-top:20vh}@media only screen and (max-width: 1200px){.ctnBoss .boss{width:90%;margin-top:4vh}}.ctnBoss .boss h4{margin-bottom:40px}.ctnBoss .boss h4,.ctnBoss .boss p{color:#fff;font-size:16px}.ctnBoss .boss p{margin-bottom:35px}@media only screen and (max-width: 1200px){.ctnBoss .boss p{margin-bottom:2%}}.ctnBoss .boss p:last-child{margin-bottom:0}#boss{background:url(../images/bossBg.jpg) no-repeat center center/cover;overflow:hidden}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#boss{background:url(../images/bossBg.webp) no-repeat center center/cover}}@media only screen and (max-width: 480px){#boss{background:url(../images/bossBg_mo.jpg) no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#boss{background:url(../images/bossBg_mo.webp) no-repeat center center/cover}}}#boss1 .ctnBoss{flex-wrap:nowrap;margin-right:-30%}@media only screen and (max-width: 1200px){#boss1 .ctnBoss{flex-wrap:wrap;margin-right:unset}}#boss1 .ctnBoss .boss{margin-right:-4%;z-index:1}@media only screen and (max-width: 1200px){#boss1 .ctnBoss .boss{margin-right:unset}}#boss3 .ctnBoss .boss{margin-right:-20%}@media only screen and (max-width: 1200px){#boss3 .ctnBoss .boss{margin-right:0}}#boss4 .ctnBoss{margin-right:-10%}@media only screen and (max-width: 1440px){#boss4 .ctnBoss{margin-right:unset}}#boss4 .ctnBoss .boss{margin-right:-10%}@media only screen and (max-width: 1440px){#boss4 .ctnBoss .boss{width:90%;margin-right:unset}}.monsTwo{color:#fff;display:flex;justify-content:center;align-items:center;margin:1vw 0;flex-wrap:wrap}.monsTwo:nth-of-type(even){flex-direction:row-reverse}@media only screen and (max-width: 1200px){.monsTwo:nth-of-type(even){flex-direction:row}}.monsTwo .monster{width:29.5%;margin:0 2vw;text-align:left}@media only screen and (max-width: 1200px){.monsTwo .monster{width:90%}}.monsTwo .monster strong{font-weight:bold}.monsTwo .monster p{color:#fff}#monster{background:url(../images/monsterBg.jpg) no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#monster{background:url(../images/monsterBg.webp) no-repeat center center/cover}}@media only screen and (max-width: 480px){#monster{background:url(../images/monsterBg_mo.jpg) no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#monster{background:url(../images/monsterBg_mo.webp) no-repeat center center/cover}}}.ctnNPC{display:flex;flex-wrap:wrap;justify-content:center}.ctnNPC>picture img{margin-top:16vh}.ctnNPC .npc{width:20%;text-align:left;margin:20vh 0 0 2%}@media only screen and (max-width: 1440px){.ctnNPC .npc{width:90%}}@media only screen and (max-width: 1200px){.ctnNPC .npc{margin-top:2vh}}#npc{background:url(../images/npcBg.jpg) no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#npc{background:url(../images/npcBg.webp) no-repeat center center/cover}}@media only screen and (max-width: 480px){#npc{background:url(../images/npcBg_mo.jpg) no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#npc{background:url(../images/npcBg_mo.webp) no-repeat center center/cover}}}#system1{background:url("../images/systemBg1.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#system1{background:url("../images/systemBg1.webp") no-repeat center center/cover}}#system2{background:url("../images/systemBg2.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#system2{background:url("../images/systemBg2.webp") no-repeat center center/cover}}#system3{background:url("../images/systemBg3.jpg") no-repeat center center/cover}@supports(background-image: url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")){#system3{background:url("../images/systemBg3.webp") no-repeat center center/cover}}#system #innerSystem{width:100%;position:absolute;top:20vh;display:flex;justify-content:center;list-style:none;border:none;padding:0}@media only screen and (max-width: 1200px){#system #innerSystem{top:14vh}}@media only screen and (max-width: 480px){#system #innerSystem{top:70px}}#system #innerSystem li{margin:0 1%}#system #innerSystem li a{display:block;width:16vw;background-color:#fff;color:#362997;font-size:1.6rem;font-weight:bold;line-height:6vh;border:solid 6px #362997;border-radius:20px;filter:drop-shadow(0 2px 4px #170535)}@media only screen and (max-width: 1200px){#system #innerSystem li a{font-size:1.2rem}}@media only screen and (max-width: 800px){#system #innerSystem li a{width:20vw;font-size:1rem;line-height:4vh}}@media only screen and (max-width: 480px){#system #innerSystem li a{width:30vw;font-size:14px}}#system #innerSystem li:nth-of-type(1) a:hover,#system #innerSystem li:nth-of-type(1) a.active{color:#590944;border:solid 6px #ff24c5}#system #innerSystem li:nth-of-type(2) a:hover,#system #innerSystem li:nth-of-type(2) a.active{color:#1a095a;border:solid 6px #00f7ff}#system #innerSystem li:nth-of-type(3) a:hover,#system #innerSystem li:nth-of-type(3) a.active{color:#162807;border:solid 6px #c3ff90}#system h6{max-width:260px;display:block;background-color:#fff;font-size:1.4rem;line-height:50px;border-radius:100px;margin:4% auto 2%}#system p.note{font-weight:bold}#system ul{list-style:disc;list-style-position:inside;margin:0 auto 2%}@media only screen and (max-width: 480px){#system ul{padding:0 24px}}#system ul li{margin-bottom:1vh}#system1 h6{color:#590944;border:solid 6px #ff24c5}#system1 p.note{color:#e79ee3}#system1 ul{color:#f7d0ed}#system1 ul li::marker{color:#ff24c5}#system2 h6{color:#1a095a;border:solid 6px #00f7ff}#system2 p.note{color:#fff}#system2 ul{color:#d8d3eb}#system2 ul li::marker{color:#00f7ff}#system3 h6{color:#162807;border:solid 6px #c3ff90}#system3 p.note{color:#95a08b}.mainChar{position:relative;width:100%;max-width:2560px;aspect-ratio:2560/1400;margin:0 auto;overflow:hidden}.mainChar svg{position:absolute;width:100%;height:100%;display:block;inset:0}@media only screen and (max-width: 800px){.mainChar svg{display:none}}.mainChar .maskCircle{filter:url("#displacementFilter")}.mainChar .blackChar{filter:drop-shadow(0 0 40px rgba(255, 214, 255, 0.3137254902));animation:maskOpacy 2s ease-in infinite 2s alternate backwards}@keyframes maskOpacy{0%{opacity:1}100%{opacity:.2}}@media only screen and (max-width: 480px){h1 img{max-width:90vw}}h2{position:relative;width:20%;text-align:left;color:#fff;margin:6vh 0 2vh 0;display:flex;align-items:center}@media only screen and (max-width: 480px){h2{width:60%}}h2 span:first-of-type{width:70px;height:1px;background:#fff}h2 span:last-of-type{border:solid 1px #fff;font-size:18px;line-height:22px;text-align:center;padding:10px}h4{font-size:18px;font-weight:bold;line-height:20px;margin:4% 0;color:#000}@media only screen and (max-width: 1440px){h4{margin:1% 0}}h4 span{display:inline-block;background-color:#ffdd6b;padding:.4% 1%;margin-right:1%;white-space:nowrap}h6{font-size:20px;font-weight:bold;margin:6vh 0 2vh 0}p{font-size:1rem;margin-bottom:2vh}.tab-pane{display:none}.tab-pane.active{display:block}button,a,.modal-modal{background-color:rgba(0,0,0,0);border:none;cursor:pointer}button.close{width:54px;height:54px;background:url("//landing.mangot5.com/template/la/event/nav/images/close.png") no-repeat 0 0/contain;overflow:hidden;text-indent:-10000em;cursor:pointer;border:0;opacity:1;position:absolute;right:1rem;top:-54px;z-index:999}.modal-dialog{width:100%;max-width:1400px;margin:8vh auto 0 auto;text-align:center;pointer-events:auto}@media only screen and (max-width: 480px){.modal-dialog{margin:40% auto}}.modal-dialog iframe{max-width:100%}@media only screen and (max-width: 350px){.modal-dialog iframe{max-height:60vh}}#myTabContent{position:relative;overflow:hidden}#myTabContent>div{position:relative;padding-top:88px}@media only screen and (max-width: 480px){#myTabContent>div{padding-top:58px}}#myTabContent>div main,#myTabContent>div section{min-height:100vh;padding:1% 0 80px}@media only screen and (max-width: 480px){#myTabContent>div main,#myTabContent>div section{padding-bottom:200px}}#myTabContent>div main{padding-top:1px}.introduce-menu{position:fixed;right:4%;bottom:10%;z-index:99}@media only screen and (max-width: 1440px){.introduce-menu{left:unset;right:2%;bottom:20%}}.introduce-menu::before{content:"";display:block;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #fff rgba(0,0,0,0);border-style:solid;border-width:0px 70px 30px 70px}.introduce-menu::after{content:"";display:block;border-color:#fff rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:30px 70px 0px 70px}.introduce-menu .nav{background-color:#fff;padding:4% 1% 4% 44px;display:block;text-align:left;font-size:14px;border:none}.introduce-menu .nav .nav-item{position:relative;display:list-item;list-style:disc;color:#848484;line-height:40px;text-indent:-4px}.introduce-menu .nav .nav-item::marker{color:#455ecd}.introduce-menu .nav .nav-item a{display:inline-block;padding:0;color:#808285}.introduce-menu .nav .nav-item a span{position:absolute;width:20px;left:-36%;border-right:solid 1px #848484}.introduce-menu .nav .nav-item a.active,.introduce-menu .nav .nav-item a:hover{color:#000}.introduce-menu .nav .nav-item a.active span,.introduce-menu .nav .nav-item a:hover span{color:#455ecd;border-right-color:#455ecd}.introduce-btn{position:fixed;z-index:999;right:2%;bottom:48%;width:60px;height:60px;border-radius:50%;background-color:rgba(0,0,0,.7);display:none}.introduce-btn a{display:block;position:absolute;top:0;right:0;width:100%;height:100%;overflow:hidden;text-indent:-10000em;transition:.6s all;-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg)}.introduce-btn a::before,.introduce-btn a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;overflow:hidden;background:#fff}.introduce-btn a::before{width:25px;height:2px}.introduce-btn a::after{width:2px;height:25px}.introduce-btn a.active{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.landscape{position:fixed;top:0;left:0;bottom:0;right:0;overflow:auto;background:#33313e;display:none;z-index:999}@media only screen and (orientation: landscape)and (max-device-width: 850px){.landscape{display:block}}.landscape span{position:absolute;right:0;top:50%;margin:0;width:100%;text-align:center;-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.landscape span>p{color:#ccc;margin:0;font-size:16px}#nav-main #expend #myTab li.nav-item a{background-color:rgba(0,0,0,0)}#nav-main #expend #myTab li.nav-item a:hover,#nav-main #expend #myTab li.nav-item a[aria-expanded=true]{color:#ffdd6b;border:none}#nav-main #expend #myTab .dropdown-menu .dropdown-item:hover a.nav-link{color:#ffdd6b}#GAinfor li{background-color:#ffdd6b;margin:0 .5px}#GAinfor li a{color:#000}#GAinfor li:hover{background-color:#e944b5;transition:.4s}#GAinfor li:hover a{color:#fff}#laFooter{background:none;padding:10px 0;margin:0 auto;position:absolute;left:0;right:0;bottom:0;z-index:1}#laFooter .container{padding:0}#laFooter .container ul.copyright{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;list-style-type:none;font-size:12px;line-height:18px;color:#fff;margin:0;padding:0}#laFooter .container ul.copyright li{margin:4px 0;padding-left:8px;list-style:none}#laFooter .container ul.copyright li img{display:inline-block;max-height:50px;vertical-align:inherit}#laFooter .container ul.copyright li:last-child{display:flex;align-items:center}#laFooter .container ul.copyright li:last-child img{margin-right:5px}