@charset "UTF-8";a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,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}q:after,q:before{content:'';content:none}a:active,a:focus,a:hover,a:visited,button:focus{text-decoration:none;outline:0}table{border-collapse:collapse;border-spacing:0}img{max-width:100%;height:auto}a,button{border:none!important;background-color:transparent!important}::-webkit-scrollbar{display:none}::-webkit-scrollbar-button{display:none}body{background:#474456}.sideBtn{display:none;margin:0;padding:0}@media only screen and (max-width:480px){.sideBtn{display:block;position:fixed;right:5px;bottom:6vh;z-index:999}}.sideBtn a{display:inline-block;background-color:#0484ff!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 #1862ea!important}#main main{position:relative;width:100vw;height:120vh;background:url(../images/karim_bg1.jpg) no-repeat center center;background-size:cover;overflow:hidden}@media only screen and (max-width:1200px){#main main{height:100vh}}#main main #scene{position:absolute;width:100vw;height:120vh}@media only screen and (max-width:1200px){#main main #scene{height:100vh}}#main main #scene .role1,#main main #scene .role2,#main main #scene .role3,#main main #scene .role4{position:absolute;background-size:contain}#main main #scene .role1{background:url(../images/karim_role1.png) no-repeat center center;width:537px;height:445px;left:6vw}@media only screen and (max-width:1200px){#main main #scene .role1{left:1vw}}@media only screen and (max-width:480px){#main main #scene .role1{display:none}}#main main #scene .role2{background:url(../images/karim_role2.png) no-repeat center center;width:328px;height:292px;top:2vw;right:16vw}@media only screen and (max-width:1200px){#main main #scene .role2{right:1vw}}@media only screen and (max-width:480px){#main main #scene .role2{display:none}}#main main #scene .role3{background:url(../images/karim_role3.png) no-repeat 36% center;background-size:130vw;width:100vw;height:120vh;max-width:2941px;max-height:1907px;top:-6vh}@media only screen and (max-width:1200px){#main main #scene .role3{height:100vh;background-size:200vw;background-position-x:44%}}@media only screen and (max-width:480px){#main main #scene .role3{background-size:140vh;background-position-y:0}}#main main #scene .role4{background:url(../images/karim_role4.png) no-repeat center top;background-size:120vw;width:100vw;height:120vh;bottom:-20vh}@media only screen and (max-width:1200px){#main main #scene .role4{height:100vh;background-size:200vw}}@media only screen and (max-width:480px){#main main #scene .role4{background-size:140vh}}#main main .logo{position:absolute;left:50%;bottom:20vh;transform:translateX(-50%);text-align:center}@media only screen and (max-width:480px){#main main .logo{left:auto;transform:translateX(0)}}#main section{position:relative;width:100vw;background:url(../images/karim_bg2.png) no-repeat center top;background-size:cover;overflow:hidden;text-align:center;margin-top:-24vh}#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.list1{background:url(../images/karim_l11.png) no-repeat center top;background-size:contain}#main section .listfour a:hover.list2{background:url(../images/karim_l22.png) no-repeat center top;background-size:contain}#main section .listfour a:hover.list3{background:url(../images/karim_l33.png) no-repeat center top;background-size:contain}#main section .listfour a:hover.list4{background:url(../images/karim_l44.png) no-repeat center top;background-size:contain}#main section .listfour a:hover img{opacity:0}#story{background:url(../images/karim_bg3.jpg) no-repeat center center;text-align:center}.story{position:relative;padding:1% 0 10% 0}@media only screen and (max-width:480px){.story{background:url(../images/karim_sbg.png) no-repeat center center;background-size:cover;padding:20% 8vw}.story>img{display:none}}.story>div{position:absolute;color:#000;top:20%;max-width:400px;text-align:center;left:50%;transform:translateX(-50%)}@media only screen and (max-width:480px){.story>div{position:relative;max-width:100%;top:10%;left:auto;transform:translateX(0);font-size:20px}}.ctnTwo{display:flex;flex-wrap:wrap;justify-content:center}.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:800px){.ctnTwo .map{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/karim_mbg1.jpg) no-repeat center center}#map1 h4>span{background-color:#17a3f7}#map2{background:url(../images/karim_mbg2.jpg) no-repeat center center}#map2 h4>span{background-color:#f959f9}#map3{background:url(../images/karim_mbg3.jpg) no-repeat center center}#map3 h4{color:#fff}#map3 h4>span{background-color:#df6c18}#map3 p{color:#fff}#map1,#map2,#map3{background-size:cover!important}.popbtn{position:relative}.popbtn .look{position:absolute;right:2%;bottom:4%;cursor:pointer;opacity:.5}.popbtn .look:hover{opacity:1}.ctnBoss{display:flex;flex-wrap:wrap;justify-content:flex-end}@media only screen and (max-width:1200px){.ctnBoss{justify-content:center}}.ctnBoss .boss{width:20%;text-align:left;margin-top:4vh}@media only screen and (max-width:1440px){.ctnBoss .boss{width:90%}}.ctnBoss .boss em{font:revert}#boss{background:url(../images/karim_bbg.jpg) no-repeat center center;background-size:cover}.monsTwo{display:flex;justify-content:center;align-items:center;margin:1vw 0;flex-wrap:wrap}.monsTwo:nth-of-type(odd){flex-direction:row-reverse}@media only screen and (max-width:1200px){.monsTwo:nth-of-type(odd){flex-direction:row}}.monsTwo .monster{width:20%;margin:0 2vw;text-align:left}@media only screen and (max-width:1200px){.monsTwo .monster{width:90%}}#monster{background:url(../images/karim_mobg.jpg) no-repeat center center;background-size:cover}@media only screen and (max-width:480px){#monster{background:url(../images/karim_mobg_phone.jpg) no-repeat center center}}.ctnNPC{display:flex;flex-wrap:wrap;justify-content:flex-end}@media only screen and (max-width:1440px){.ctnNPC{justify-content:center}}.ctnNPC .npc{width:20%;text-align:left;margin-top:4vh}@media only screen and (max-width:1440px){.ctnNPC .npc{width:90%}}.ctnNPC .npc em{font:revert}#npc{background:url(../images/karim_nbg.jpg) no-repeat center center;background-size:cover}#system1,#system2{background:url(../images/karim_sbg.jpg) no-repeat center center;background-size:cover;min-height:2000px;color:#fff}@media only screen and (max-width:480px){#system1,#system2{background:url(../images/karim_sbg_phone.jpg) no-repeat center center}}#system1 .note,#system2 .note{color:#6e4587}#system1 ol,#system2 ol{display:inline-block;text-align:left;counter-reset:num;list-style-position:outside;margin:0 auto 8vh auto;color:#000}@media only screen and (max-width:480px){#system1 ol,#system2 ol{padding:0 24px}}#system1 ol>li,#system2 ol>li{margin-bottom:2vh}#system1 ol>li::before,#system2 ol>li::before{counter-increment:num;content:counter(num) ") ";margin-left:-18px}#system1 ol>li>ul,#system2 ol>li>ul{padding-left:6px}#system1 ol>li>ul li::before,#system2 ol>li>ul li::before{content:" - "}#system1 ol>li>ul li>ul li::before,#system2 ol>li>ul li>ul li::before{content:"："}h1{margin:6% 0 2% 0}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}h3{margin-right:1%}h3 img:first-of-type{margin-bottom:6%}h4{font-size:18px;font-weight:700;line-height:20px;margin:4% 0;color:#000}h4 span{display:inline-block;background-color:#0484ff;padding:.4% 1%;margin-right:1%;white-space:nowrap}h6{font-size:20px;font-weight:700;margin:6vh 0 2vh 0}p{font-size:1rem;margin-bottom:2vh}.tab-pane{display:none}.tab-pane.active{display:block}.modal-modal,a,button{background-color:transparent;border:none;cursor:pointer}button.close{width:54px;height:54px;background:url(https://landing.mangot5.com/template/la/event/nav/images/close.png) no-repeat 0 0;background-size:contain;overflow:hidden;text-indent:-10000em;cursor:pointer;border:0;opacity:1;position:absolute;right:0;top:-54px;z-index:999}.modal-dialog{width:100%;max-width:1400px;margin:10% auto;text-align:center}@media only screen and (max-width:480px){.modal-dialog{margin:40% auto}}#myTabContent>div,#myTabContent>section{min-height:100vh;background-size:cover}main,section{padding:90px 0 1vh 0}.introduce-menu{position:fixed;bottom:10%;left:6%;z-index:999}.introduce-menu::before{content:"";display:block;border-color:transparent transparent #fff transparent;border-style:solid;border-width:0 70px 30px 70px}.introduce-menu::after{content:"";display:block;border-color:#fff transparent transparent transparent;border-style:solid;border-width:30px 70px 0 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:#0484ff}.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:#0484ff}.introduce-menu .nav .nav-item a.active span,.introduce-menu .nav .nav-item a:hover span{border-right-color:#0484ff}.introduce-btn{position:fixed;z-index:999;left:2%;bottom:2%;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;transform:rotate(135deg)}.introduce-btn a::after,.introduce-btn a::before{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{transform:rotate(0)}#nav-main{padding:0;height:88px;background-color:#33313e;border-bottom:2px solid #474456;box-sizing:border-box}@media only screen and (max-width:800px){#nav-main{height:auto}#nav-main>a img{width:30vw}}#nav-main #expend{justify-content:space-between}#nav-main #expend #myTab{border:none}#nav-main #expend #myTab li.nav-item{position:relative}@media only screen and (max-width:800px){#nav-main #expend #myTab li.nav-item{border-top:solid 1px #474456}}#nav-main #expend #myTab li.nav-item a{color:#c8c8c8;display:block;width:8vw;text-align:center;line-height:88px;font-size:16px;padding:0}@media only screen and (max-width:800px){#nav-main #expend #myTab li.nav-item a{width:auto}}#nav-main #expend #myTab li.nav-item a:hover,#nav-main #expend #myTab li.nav-item a[aria-expanded=true]{color:#0484ff}#nav-main #expend #myTab li.nav-item:hover::after{content:"";display:block;position:absolute;top:19px;left:50%;margin-left:-5px;width:10px;height:10px;background:url(https://landing.mangot5.com/template/la/event/nav/images/navbar-icon.png) no-repeat 0 0;transition:opacity .3s;border:none}#nav-main #expend #myTab li.nav-item:hover .dropdown-menu{display:block}#nav-main #expend #myTab .dropdown-toggle::after{content:none}#nav-main #expend #myTab .dropdown-menu{background-color:#33313e;padding:0;min-width:auto;border-radius:unset;border:none}#nav-main #expend #myTab .dropdown-menu .dropdown-item{padding:0;transition:.4s}@media only screen and (max-width:800px){#nav-main #expend #myTab .dropdown-menu .dropdown-item{border-top:solid 1px #808285;background-color:#474456}}#nav-main #expend #myTab .dropdown-menu .dropdown-item:hover{background-color:#474456}#nav-main #expend #myTab .dropdown-menu .dropdown-item:hover a{color:#0484ff}#mobile{display:none}@media only screen and (max-width:800px){#mobile{display:flex;max-height:90px}}#mobile button{display:block;width:60px}#mobile button .icon-bar{display:block;width:22px;height:2px;border-radius:1px;background-color:#fff;margin:4px auto;transform-origin:0;transform:rotate(0);transition:.4s}#mobile button[aria-expanded=true] .icon-bar:first-of-type{transform-origin:10% 10%;transform:rotate(45deg)}#mobile button[aria-expanded=true] .icon-bar:last-of-type{transform-origin:10% 90%;transform:rotate(-45deg)}#mobile button[aria-expanded=true] .icon-bar:nth-of-type(2){opacity:0}#mobile .mobile-icon{display:none}#mobile .mobile-icon li{position:relative}#mobile .mobile-icon li::before{content:"";display:block;position:absolute;top:0;right:0;width:1px;height:100%;overflow:hidden;background:#474456}#mobile .mobile-icon li a{display:block;width:16vw;text-align:center;padding:20% 10%}#linkicon{margin:0 1vw 0 auto}@media only screen and (max-width:800px){#linkicon{display:none}}#linkicon a,#linkicon button{display:block;width:40px;height:40px;margin:0 3px;overflow:hidden;background:transparent url(https://landing.mangot5.com/template/la/event/nav/images/navbar-icon.png) no-repeat -104px 0}#linkicon a:hover,#linkicon button:hover{background-position-y:-40px}#linkicon a.home,#linkicon button.home{background-position:-24px 0}#linkicon a.home:hover,#linkicon button.home:hover{background-position-y:-40px}#linkicon a.fb,#linkicon button.fb{background-position:-184px 0}#linkicon a.fb:hover,#linkicon button.fb:hover{background-position-y:-40px}#linkicon a.gamer,#linkicon button.gamer{background-position:-224px 0}#linkicon a.gamer:hover,#linkicon button.gamer:hover{background-position-y:-40px}#linkicon .jp-state-playing .jp-play{background-position:-64px 0}#linkicon .jp-state-playing .jp-play:hover{background-position-y:-40px}@media only screen and (max-width:480px){#GAinfor{display:none}}#GAinfor li{background-color:#0484ff;margin:0 .5px}#GAinfor li:hover{background-color:#1862ea;transition:.4s}#GAinfor li a{color:#fff;display:block;min-width:10vw;line-height:88px;text-align:center;font-size:18px}#laFooter{background:0 0;padding:10px 0;margin:0 auto}#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{max-height:50px;vertical-align:inherit;display:inline-block}#laFooter .container ul.copyright li:last-child{display:flex;align-items:center}#laFooter .container ul.copyright li:last-child img{margin-right:5px}.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;transform:translateY(-50%)}.landscape span>p{color:#ccc;margin:0;font-size:16px}