@charset "utf-8";
/*------------------------------------------------------------------------------------------------------------------------------------------
	File :style.css
	Company : Smilegate Megaport
 	CSS 적용순서 :아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 :Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 :display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc
--------------------------------------------------------------------------------------------------------------------------------------------*/

/* layout */
.section {overflow:hidden;position:relative;text-align:center;}
.section .parallax {overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;}
.section .inner .title-area {width:720px;margin:0 auto;}
.section .inner .tit {position:relative;background-size:contain;text-indent:-9999em;}
aside {position:fixed;left:0;top:0;z-index:100;width:100%;height:0;}

/* fullpage reset */
.fp-tableCell {display:table;table-layout:fixed;width:100%;height:100%;}
.fp-tableCell .inner {overflow:hidden;display:table-cell;vertical-align:middle;width:100%;height:100%;}

/* lnb */
.lnb-wrap {position:relative;left:-377px;top:0;width:377px;height:100vh;background:rgba(255,255,255,.97);transition:all 0.3s ease;}
.lnb-wrap.open {left:0;}
.lnb-wrap .lnb-area {float:right;padding:0 50px;text-align:center;}
.lnb-wrap .lnb {padding-top:100px;}
.lnb-wrap .lnb li + li {margin-top:30px;} 
.lnb-wrap .lnb li a {position:relative;font-family:'Noto Serif KR', sans-serif;font-size:24px;color:#333;vertical-align:middle;}
.lnb-wrap .lnb li.active a {color:#1ea9e2;}
.lnb-wrap .lnb li.active a::before,
.lnb-wrap .lnb li.active a::after {content:"";position:absolute;left:-60px;top:50%;width:50px;height:27px;background:url('../images/common/ico_spr.png') no-repeat -159px -64px;transform:translate(0,-50%);}
.lnb-wrap .lnb li.active a::after {left:auto;right:-60px;transform:translate(0,-50%) rotateY(-180deg);}
:lang(zh-TW) .lnb-wrap .lnb li a {font-family:'Noto Serif JP','Noto Serif KR', sans-serif;}

.btn-menu {position:absolute;left:100%;top:0;width:84px;height:84px;z-index:10000;}
.btn-menu .ico {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.open .btn-menu {background:rgba(19,17,27,.5);}
.btn-menu-open {margin-left:9px;top:9px;}
.btn-menu-open, .open .btn-menu-close {display:block;}
.btn-menu-close, .open .btn-menu-open {display:none;}

.util-links {position:absolute;left:125%;top:36px;width:150%;z-index:10000;}
.util-links a {position:relative;color:#fff;font-size:24px;font-weight:500;text-shadow: 0.125rem 0.125rem 0.188rem rgba(0,0,0,0.2);}
.util-links a + a {margin-left:38px;}
.util-links a:hover:after {content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:2px;background: #fff;}
.util-links a:before {content:"";display:inline-block;width:34px;height:24px;background: url(../images/common/ico_util.png) no-repeat 0 50%;vertical-align: inherit;}
.util-links .btn-coupon:before {background-position:0 0;}
.util-links .btn-db:before {background-position:105% 0;}



/* section1 - home */
.section01 {background:url('../images/common/bg_section01.jpg') 50% 50%/cover;}
header .inner {position:relative;z-index:2;}
video {position:absolute;top:50%;left:50%;width:auto;height:auto;min-width:100%;min-height:100%;transform:translate(-50%,-50%);-o-object-fit:cover;object-fit:cover;}
.mobile video {width:100%;height:100%;}
.video-cover::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/common/video_cover.png') repeat-x 50% 50%/auto 100%;z-index:1;}
.bi {display:inline-block;position:relative;width:604px;height:430px;background:url('../images/ko/bi_604x430.png') no-repeat 50% 50%;background-size:100% auto;text-indent:-9999em;z-index:2;}
:lang(en) .bi {background-image:url('../images/en/bi.png');}
:lang(zh-TW) .bi {background-image:url('../images/tw/bi.png');}
.app-download {margin:52px auto 26px;}
.app-download a {display:inline-block;width:213px;height:71px;margin:0 8px;background:url('../images/common/btn_app.png') no-repeat -9999em 0;background-size:100% auto;text-indent:-9999em;}
.app-download .btn-apple {background-position:0 0;}
.app-download .btn-google {background-position:0 100%;}
aside .app-download {margin:100px auto 50px;}
aside .app-download a {width:auto;height:auto;background:none;text-indent:0;}
aside .app-download a + a {margin:0 2px;}

.share-area {display:none;}
.share-btns {margin:0 auto;transition:all 0.3s ease;text-align:center;}
.share-btns a {overflow: visible;display:inline-block;position:relative;min-width:100%;opacity:1;margin:0 auto;}
.share-btns a .ico {display:inline-block;background-image:url('../images/common/ico_share.png');vertical-align:middle;transition:opacity 0.3s ease;}
.share-btns a + a {margin-left:30px;}
.share-btns a:hover,
.mobile .share-btns a {opacity:1;}
aside .share-btns {position:fixed;left:100%;top:50%;transform:translate(-102px,-50%);}
aside .share-btns a {clear:both;}
aside .share-btns a + a {margin-top:30px;margin-left:0;}
.share-btns a:hover .ico {opacity:0;}
.share-btns a i {opacity:0;position:absolute;top:50%;right:0;transform:translateY(-55%);font-size:24px;color:#fff;font-weight:500;white-space: nowrap;transition:opacity 0.3s ease;}
.share-btns a:hover i {opacity:1;}

.ico-scroll {display:inline-block;position:relative;margin-top:90px;font-size:20px;}
.ico-scroll::before {content:"";position:absolute;left:50%;top:15px;width:17px;height:24px;background:url('../images/common/ico_spr.png') no-repeat -63px -66px;transform:translate(-50%,0);-webkit-animation:scrollPos 1.5s .25s ease-in-out infinite;animation:scrollPos 1.5s .25s ease-in-out infinite;}
.ico-scroll::after {content:"";position:absolute;left:50%;top:30px;width:41px;height:25px;background:url('../images/common/ico_spr.png') no-repeat -11px -66px;transform:translate(-50%,0);-webkit-animation:scrollPos 1.5s 0s ease-in-out infinite;animation:scrollPos 1.5s 0s ease-in-out infinite;}
@-webkit-keyframes scrollPos {
	0% {transform:translate(-50%,0);opacity:0;}
	80% {transform:translate(-50%,30px);opacity:1;}
	100% {transform:translate(-50%,30px);opacity:0;}
}
@keyframes scrollPos {
	0% {transform:translate(-50%,0);opacity:0;}
	80% {transform:translate(-50%,30px);opacity:1;}
	100% {transform:translate(-50%,30px);opacity:0;}
}

/* section2 - world */
.section02 .title-area {padding:0 0 508px 78px;text-align:left;}
.section02 .tit {height:87px;margin-bottom:48px;background:url('../images/ko/tit_section02.png') no-repeat 0 100%;}
.section02 .pr-bg {position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/common/bg_section02_1.jpg') 50% 50%/cover;}
.section02 .pr-char {position:absolute;bottom:0;left:50%;width:1623px;height:867px;margin-left:-150px;background:url('../images/common/bg_section02_char.png') no-repeat 50% 100%;background-size:auto 100%;transform:translate(-50%,0);}
.section02 .pr-cloud1 {position:absolute;bottom:0;left:0;width:100%;height:100%;background:url('../images/common/bg_section02_cloud1.png') no-repeat 50% 100%;background-size:contain;}
.section02 .pr-cloud2 {position:absolute;bottom:0;left:0;width:100%;height:100%;background:url('../images/common/bg_section02_cloud2.png') no-repeat 50% 100%;background-size:contain;}
:lang(en) .section02 .tit {background-image:url('../images/en/tit_section02.png');}
:lang(zh-TW) .section02 .tit {height:83px;background-image:url('../images/tw/tit_section02.png');}

/* section3 - characters */
.section03 {background:url('../images/common/bg_section03.jpg') 50% 50%/cover;}
.section03 .inner {padding-bottom:100px;vertical-align:bottom;}
.section03 .tit {height:143px;margin-bottom:280px;background:url('../images/ko/tit_section03.png') no-repeat 50% 100%;}
:lang(en) .section03 .tit {height:145px;background-image:url('../images/en/tit_section03.png');}
:lang(zh-TW) .section03 .tit {height:142px;background-image:url('../images/tw/tit_section03.png');}

/* section4 - patch notes */
.section04 .title-area {padding:0 21px;}
.section04 .tit {height:86px;margin-bottom:87px;background:url('../images/ko/tit_section04.png') no-repeat 100% 100%;}
.section04 .pr-bg {position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/common/bg_section04_1.jpg') 50% 50%/cover;}
.section04 .pr-char {position:absolute;bottom:0;left:50%;width:795px;height:809px;margin-left:-450px;background:url('../images/common/bg_section04_char.png') no-repeat 50% 0;background-size:auto;transform:translate(-50%,0);}
:lang(en) .section04 .tit {height:87px;background-image:url('../images/en/tit_section04.png');}
:lang(zh-TW) .section04 .tit {height:83px;background-image:url('../images/tw/tit_section04.png');}

/* section5 - animation */
.section05 {background:#000;}
.section05 .inner {padding-bottom:100px;vertical-align:bottom;}
.section05 .tit {height:91px;margin-bottom:280px;background:url('../images/ko/tit_section05.png') no-repeat 50% 100%;}
:lang(en) .section05 .tit {height:93px;background-image:url('../images/en/tit_section05.png');}
:lang(zh-TW) .section05 .inner {padding-bottom:200px;}
:lang(zh-TW) .section05 .tit {height:40px;background-image:url('../images/tw/tit_section05.png');}

/* section6 - content */
.section06 .title-area {padding:0 0 500px;}
.section06 .tit {height:86px;background:url('../images/ko/tit_section06.png') no-repeat 50% 100%;}
.section06 .btn {margin:36px 0 0;}
.section06 .pr-bg {position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/common/bg_section06_1.jpg') 50% 50%/cover;}
.section06 .pr-char1 {position:absolute;bottom:0;left:50%;width:695px;height:830px;margin-left:-817px;background:url('../images/common/bg_section06_char1.png') no-repeat 50% 100%;}
.section06 .pr-char2 {position:absolute;bottom:0;left:50%;width:558px;height:824px;margin-left:94px;background:url('../images/common/bg_section06_char2.png') no-repeat 50% 100%;}
.section06 .pr-ring {position:absolute;bottom:0;left:0;width:100%;height:100%;background:url('../images/common/bg_section06_ring.png') no-repeat 50% 100%;background-size:auto;}
.section06 .pr-obj {position:absolute;top:50%;left:50%;width:2560px;height:994px;margin-left:-1280px;margin-top:-497px;background:url('../images/common/bg_section06_obj.png') no-repeat 50% 50%;background-size:auto;}
:lang(en) .section06 .tit {height:88px;background-image:url('../images/en/tit_section06.png');}

/* footer */
#footer {position:absolute;left:0;bottom:-100px;width:100%;height:100px;padding:30px 0;text-align:center;z-index:200;background:#284b71;transition:all 0.2s ease;}
#footer > span {display:inline-block;height:36px;background:url('../images/common/ico_footer.png') no-repeat 0 50%;text-indent:-9999em;vertical-align:middle;}
#footer > .logo-sgp {width:125px;}
#footer > .logo-superCreative {width:146px;margin-left:14px;background-position:-139px 50%;}
#footer > .copyright {height:auto;margin-left:12px;background:none;color:rgba(255,255,255,1);font-weight:200;font-size:12px;text-indent:0;letter-spacing:0;}
.select-lang {display:inline-block;position:relative;width:141px;margin-left:15px;padding-right:40px;}
.select-lang > button {position:relative;z-index:1;width:100%;height:40px;background:#3e5d7f;border:1px solid #1c344d;color:#fff;}
.select-lang > button::before {position:absolute;left:calc(100% + 1px);top:0;width:40px;height:100%;background:#3e5d7f;outline:1px solid #1c344d;color:#fff;content:'';}
.select-lang > button::after {position:absolute;left:calc(100% + 15px);top:50%;width:9px;height:5px;margin-top:-2px;background:url('../images/common/ico_spr.png') no-repeat -145px -64px;content:'';}
.select-lang > button.open::after {transform:rotate(-180deg);}
.select-lang > ul {display:none;position:absolute;left:0;bottom:calc(100% - 1px);width:100%;padding-right:40px;}
.select-lang > ul li + li {margin-top:-1px;}
.select-lang > ul li a {display:inline-block;width:100%;height:40px;background:#fff;border:1px solid #1c344d;line-height:38px;color:#1c344d;}
.select-lang > ul li.current {display:none;}
:lang(zh-TW) #footer {height:170px;}
:lang(zh-TW) #footer > .copyright {height:auto;}
:lang(zh-TW) .game-rating {width:960px;margin:30px auto 0;padding-left:306px;text-align:left;}
:lang(zh-TW) .game-rating > .ico-gameRating {display:inline-block;margin-right:14px;vertical-align:middle;}
:lang(zh-TW) .game-rating > ul {display:inline-block;vertical-align:middle;text-align:left;}
:lang(zh-TW) .game-rating > ul li {letter-spacing:0;font-weight:200;font-size:12px;color:#eceff2;}
:lang(zh-TW) .game-rating > ul li + li {margin-top:6px;}
:lang(zh-TW) .app-download a {background-image:url('../images/tw/btn_app.png');}
:lang(zh-TW) aside .app-download a {background:none;}

/* popup */
.dimmed {overflow:hidden !important;}
div.dimmed {display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.75);z-index:999;}
.lnb-open div.dimmed {background-color:transparent;z-index:10;}

.popup {display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;}
.popup:focus {outline:0;}
.popup .btn-close {position:absolute;left:50%;top:calc(100% + 10px);padding:6px;background-color:rgba(19,17,27,.5);transform:translate(-50%,0);border:2px solid #8f9595;}

.popup-youtube {width:720px;height:413px;margin-top:-100px;border:8px solid #13111b;background-color:#13111b;}
.popup-youtube[aria-hidden=false] {display:block;}
.popup-youtube .frame {width:100%;height:100%;}
.popup-youtube .frame iframe {width:100%;height:100%;}
.popup-youtube .btn-close {top:-8px;left:auto;right:-84px;transform: translateX(0);}

/* icon */
.ico {display:inline-block;background:url('../images/common/ico_spr.png') no-repeat;text-indent:-9999em;}
.ico-stove {width:34px;height:43px;background-position:0 0;}
.ico-twitter {width:47px;height:41px;background-position:0 -50px;}
.ico-facebook {width:24px;height:50px;background-position:0 -100px;}
.ico-youtube {width:49px;height:36px;background-position:0 -150px;}
.ico-bahamute {width:61px;height:50px;background-position:0 -200px;}
.ico-instagram {width:50px;height:50px;background-position:0 -250px;}
.ico-taptap {width:76px;height:46px;background-position:0 -300px;}
.ico-bar {width:44px;height:32px;background-position:-145px -10px;}
.ico-close {width:50px;height:50px;background-position:-209px 0px;}
.ico-appstore {width:54px;height:54px;background-position:-5px -4px;}
.ico-googleplay {width:54px;height:54px;background-position:-66px -4px;}
.ico-gameRating {width:50px;height:50px;background:url('../images/common/ico_gameRating.png') no-repeat 0 0;background-size:100% auto;}

/* visual */
.visual-diamond {position:fixed;left:50%;top:50%;width:0;height:0;border:4px solid #fff;transform:translate(-50%,-50%) rotate(-45deg);opacity:0;}
.visual-epic {position:absolute;top:-80px;left:10%;width:724px;height:312px;background:url('../images/common/visual_epic.png') no-repeat 50% 50%;background-size:auto 100%;}
.visual-seven {position:absolute;bottom:-178px;left:50%;width:1148px;height:349px;background:url('../images/common/visual_seven.png') no-repeat 50% 50%;background-size:auto 100%;}
.visual-square {position:absolute;left:50%;transform:rotate(-45deg);border:3px solid #fff;}
.visual-square1 {margin-left:-25.71875%;top:35%;width:68px;height:68px;}
.visual-square2 {margin-left:-15.625%;bottom:223px;width:100px;height:100px;}
.visual-square3 {margin-left:22.6%;top:50%;width:115px;height:115px;}
.visual-square4 {margin-left:-16.2109375%;top:160px;width:65px;height:65px;background:rgba(255,255,255,.3);border:0;}

/* button */
.btn {display:inline-block;overflow:hidden;position:relative;}
.btn-default {padding:17px 36px 19px;background:#2ad4a4;font-size:24px;color:#fff;border:2px solid #2ad4a4;transition:border 0.5s ease, color 0.3s ease;}
.btn-default::before {content:"";position:absolute;left:100%;top:100%;width:28px;height:28px;background:#284b71;transform:rotate(45deg);transition:all 0.5s ease;}
.pc .btn-default:hover {border-color:#284b71;color:#284b71;}
.pc .btn-default:hover::before {transform:translate(-50%,-50%) rotate(45deg);}


/**
 * Swiper 4.1.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2018 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 11, 2018
 */
.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-invisible-blank-slide{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s top,.2s -webkit-transform;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s left,.2s -webkit-transform;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s right,.2s -webkit-transform;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}
.swiper-container-autoheight .swiper-wrapper {align-items:center;-webkit-align-items:center;}
.swiper-pagination {position:absolute;bottom:10px;left:0;width:100%;text-align:center;line-height:0;}
.swiper-pagination-bullet {display:inline-block;width:12px;height:12px;background-color:#b1b1b1;border-radius:100%;opacity:1;transition:all 0.3s ease;transform-origin:50% 50%;}
.swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:10px;}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
	width:22px;border-radius:6px;
	background:rgb(63,241,192);
	background:linear-gradient(to right, rgb(63,241,192) 0%,rgb(69,223,251) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ff1c0', endColorstr='#45dffb',GradientType=1 );
}
.swiper-button-prev,.swiper-button-next {position:absolute;top:50%;transform:translate(0,-50%);width:17px;height:27px;margin:0;background:url('../images/common/ico_spr.png') no-repeat;}
.swiper-button-prev {left:0;background-position:-89px -64px;}
.swiper-button-next {right:0;background-position:-121px -64px;}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {opacity:0;}
.mobile .swiper-pagination .swiper-button-prev,
.mobile .swiper-pagination .swiper-button-next {display:none;}

/* banner slide */
.banner-wrap {transition:all 0.2s ease;}
.banner-wrap a {display:inline-block;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:auto 100%;text-indent:-9999em;}
[data-swiper-id="top"] {left:0;top:0;width:100%;height:80px;}
[data-swiper-id="top"] .swiper-pagination {left:50%;top:50%;bottom:auto;width:auto;margin-left:175px;transform:translateY(-50%);}
[data-swiper-id="top"] .swiper-pagination-bullet {background-color:#1c344f;}
.scroll [data-swiper-id="top"] {margin-top:-80px;}
[data-swiper-id="lnb"] {overflow:visible;position:relative;width:274px;height:99px;}
[data-swiper-id="lnb"] .swiper-wrapper {overflow:hidden;}
[data-swiper-id="lnb"] .swiper-pagination {bottom:-32px;}

/* content slide */
.slide-wrap {margin-bottom:36px;}
.slide-wrap + .swiper-pagination {position:relative;bottom:auto;display:inline-block;padding:0 47px;width:auto;font-size:0;}
.slide-wrap + .swiper-pagination .swiper-pagination-bullet {width:16px;height:16px;background-color:#fff;}
.slide-wrap + .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:20px;}
.slide-wrap + .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width:34px;border-radius:17px;}
.vod-list a {width:100%;height:100%;}
.vod-list a .thumb-tit {overflow:hidden;text-overflow:ellipsis;display:block;height:55px;padding:0 20px;background:#fff;color:#284b71;font-size:22px;font-weight:500;text-align:left;line-height:55px;}
.vod-list .thumb {display:block;overflow:hidden;position:relative;width:100%;height:100%;background:#000;}
.vod-list .thumb em {display:block;opacity:.5;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transform:scale(1.02);transition:transform 1s ease;}
.vod-list .thumb:hover em {transform:scale(1.05);}
.vod-list .swiper-slide-active .thumb em {opacity:1;}

.slide-center {position:absolute;left:50%;bottom:120px;width:792px;margin-left:-396px;}
.slide-center .swiper-wrapper {display:flex;position:relative;margin-left:-28px;}
.slide-center .swiper-slide {width:226px;height:126px;margin:0 15px;transition:all 0.3s ease;}
.slide-center .swiper-slide-active {width:282px;height:158px;}
.slide-center .vod-list {height:158px !important;}
.slide-center .vod-list a .thumb-tit {display:none;}
.slide-center + .swiper-pagination {width:100%;}
.slide-center + .swiper-pagination .swiper-button-prev,
.slide-center + .swiper-pagination .swiper-button-next {position:absolute;top:-116px;width:87px;height:126px;background-size:100% auto;background-position:50% 0;}
.slide-center + .swiper-pagination .swiper-button-prev {left:50%;margin-left:-483px;background-image:url('../images/common/btn_prev.png');}
.slide-center + .swiper-pagination .swiper-button-next {right:50%;margin-right:-483px;background-image:url('../images/common/btn_next.png');}
:lang(zh-TW) .section05 .slide-center {bottom:220px;}

[data-swiper-id="patchnotes"] {width:700px;}
[data-swiper-id="patchnotes"] .vod-list .thumb {height:393px;}
[data-swiper-id="content"] {position:absolute;left:50%;bottom:142px;width:1168px;margin-bottom:0;padding-top:130px;transform:translate(-50%,0);}
[data-swiper-id="content"] .swiper-wrapper {align-items:flex-start;}
[data-swiper-id="content"] .swiper-slide {width:356px;margin:0 25px;transition:all .1s ease;transform-origin:50% top;}
[data-swiper-id="content"] .swiper-slide.swiper-slide-active {margin-top:-130px;box-shadow:0 30px 60px rgba(30,63,113,.5);}
[data-swiper-id="content"] .vod-list .thumb {height:200px;}
[data-swiper-id="content"] .vod-list .swiper-slide-active .thumb-tit {background:#1ec898;color:#fff;}
[data-swiper-id="content"] + .swiper-pagination {position:absolute;left:50%;bottom:214px;transform:translate(-50%,0);}


@media screen and (max-width:2560px) {
	.section02 .pr-cloud1, .section02 .pr-cloud2 {background-size:auto;}
}

@media screen and (max-width:960px) {
	#footer {height:auto;padding:1.1875rem 0;}
	#footer > .logo-sgp,
	#footer > .logo-superCreative {display:none;}
	#footer > .copyright {display:block;margin:0 0 0.75rem;font-weight:200;font-size:0.5625rem;}
	.select-lang {width:4.375rem;margin-left:0;padding-right:1.25rem;}
	.select-lang > button {height:1.25rem;font-size:0.5625rem;}
	.select-lang > button::before {width:1.1875rem;}
	.select-lang > button::after {left:calc(100% + 0.375rem);transform:scale(.5);}
	.select-lang > button.open::after {transform:scale(.5) rotate(-180deg);}
	.select-lang > ul {padding-right:1.25rem;}
	.select-lang > ul li,
	.select-lang > ul li a {height:1.25rem;line-height:1.125rem;}
	.select-lang > ul li a {font-weight:200;font-size:0.5625rem;}

	:lang(zh-TW) #footer {height:auto;padding-bottom:3.75rem;}
	:lang(zh-TW) .select-lang {position:absolute;left:50%;bottom:1.25rem;transform:translate(-50%,0);}
	:lang(zh-TW) .game-rating {width:100%;margin-top:1.25rem;padding-left:0;text-align:center;}
	:lang(zh-TW) .game-rating > ul li {font-size:0.375rem;}
}

@media screen and (max-width:768px) {
	.ico {background-size:8.0625rem auto;}

	.bi {width:23.59375rem;height:17.4375rem;}
	.lnb-wrap {left:-11.75rem;width:11.75rem;}
	.lnb-wrap .lnb-area {float:none;padding:0 1.625rem;}
	.lnb-wrap .lnb {padding-top:3.125rem;}
	.lnb-wrap .lnb li a {font-size:0.8125rem;}
	.lnb-wrap .lnb li + li {margin-top:0.625rem;}
	.lnb-wrap .lnb li.active a::before,
	.lnb-wrap .lnb li.active a::after {left:-1.875rem;width:1.5625rem;height:0.875rem;background-position:-5rem -2rem;background-size:8.0625rem auto;}
	.lnb-wrap .lnb li.active a::after {left:auto;right:-1.875rem;}
	.util-links {top:.875rem;left:130%;}
	.util-links a {font-size:.75rem;}
	.util-links a + a {margin-left: .625rem;}
	.util-links a:before {width: 1.0625rem;height: .75rem;background-size:auto .75rem;}
	.util-links .btn-db:before {margin-right:.125rem;}
	.util-links a:hover:after {display:none;}

	.app-download {margin-top:1.5625rem;}
	.app-download a {width:8.359375rem;height:2.8125rem;}
	.app-download .ico {width:1.75rem;height:1.75rem;}
	.app-download .ico-appstore {background-position:-0.125rem -0.125rem;}
	.app-download .ico-googleplay {background-position:-2.0625rem -0.125rem;}
	aside .app-download {margin:3.125rem auto 1.5625rem;}
	aside .app-download a {display:block;width:100%;margin:0;background-color:#000;}
	aside .app-download a + a {margin:2px 0 0 0;}
	aside .app-download .ico {width:100%;height:2.25rem;background-image:url('../images/common/btn_app_m.png');}
	aside .app-download .ico-appstore {background-position:50% 100%;}
	aside .app-download .ico-googleplay {background-position:50% 0;}

	.banner-wrap .swiper-pagination-bullet {width:6px;height:6px;}
	.banner-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {width:12px;}
	.swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:5px;}

	[data-swiper-id="top"] {height:2.5rem;}
	.scroll [data-swiper-id="top"] {margin-top:-2.5rem;}
	[data-swiper-id="top"] .swiper-pagination {margin-left:5.4375rem;}
	[data-swiper-id="lnb"] .swiper-pagination {bottom:-1rem;}
	[data-swiper-id="lnb"] {width:100%;height:3.125rem;}

	.scroll aside .share-btns {top:0.9375rem;transform:translateX(-3.1875rem);}
	.scroll aside .share-btns a {display:block;}
	aside .share-btns a + a {margin-top:0.8125rem;}
	.share-area {display:block;}
	.share-btns a {min-width:1.4375rem;}
	.share-btns a + a {margin-left:1.0625rem;}
	.share-btns a .ico {background-size:2.5rem auto;}
	
	/*
	.share-btns .btn-instagram,.share-btns .btn-bahamute,
	.scroll aside .share-btns .btn-instagram,.scroll aside .share-btns .btn-bahamute {display:none;}
	*/

	.share-btns a:hover .ico {opacity:1;}
	.share-btns a i {display:none;}

	.ico-stove {width:0.9375rem;height:1.25rem;background-position:0 0;}
	.ico-twitter {width:1.375rem;height:1.1875rem;background-position:0 -1.5625rem;}
	.ico-facebook {width:0.625rem;height:1.4375rem;background-position:0 -3.125rem;}
	.ico-youtube {width:1.4375rem;height:1rem;background-position:0 -4.6875rem;}
	.ico-bahamute {width:1.8125rem;height:1.5625rem;background-position:0 -6.25rem;}
	.ico-instagram {width:1.4375rem;height:1.4375rem;background-position:0 -7.8125rem;}
	.ico-taptap {width:2.25rem;height:1.3125rem;background-position:0 -9.375rem;}

	.fp-viewing-0 aside .share-btns{display:none;}
	
	.btn-menu {width:42px;height:42px;}
	.btn-menu-open {top:0.25rem;}

	.ico-bar {width:1.375rem;height:1rem;background-position:-4.5rem -0.3125rem;}
	.ico-close {width:1.5rem;height:1.5rem;background-position:-6.5rem 0;}
	.ico-scroll {margin-top:2.8125rem;transform:scale(0.8);}

	.section .inner .title-area {width:100%;}

	.popup-youtube {width:100%;height:12.938rem;margin-top:-3.125rem;border:0.25rem solid #13111b;}
	.popup-youtube[aria-hidden=false] {display:block;}
	.popup-youtube .frame {width:100%;height:100%;}
	.popup-youtube .frame iframe {width:100%;height:100%;}
	.popup-youtube .btn-close {left:50%;top:calc(100% + 10px);width:2.5rem;height:2.5rem;transform:translate(-50%,0);}

	:lang(zh-TW) aside .app-download a {background:none;}
	:lang(zh-TW) aside .app-download .ico {height:2.7rem;background-image:url('../images/tw/btn_app_m.png');background-size:100% auto;}

}

@media screen and (max-width:640px) {
	.popup-promotion .frame {width:90vw;}
	.popup-promotion .frame img {width:100%;}
	[data-swiper-id="patchnotes"] {width:calc(100% - 30px);}
}

@media screen and (max-width:480px) {
	.bi {width:18.875rem;height:13.4375rem;}

	.visual-square {transform:scale(.3) rotate(-45deg);}
	.visual-epic {top:-2.5rem;width:22.625rem;height:9.75rem;}
	.visual-seven {bottom:-5.5625rem;width:36.9375rem;height:10.9375rem;}

	.section02 .title-area {padding:0 1.25rem 19.5625rem;}
	.section02 .tit {height:2.6875rem;margin-bottom:1.5rem;}
	.section02 .pr-char {height:27.125rem;margin-left:-2.1875rem;}
	.section03 .inner,
	.section05 .inner {padding-bottom:3.125rem;}
	.section03 .tit {height:4.5rem;margin-bottom:8.75rem;}
	.section04 .title-area {padding:0 30px;}
	.section04 .tit {height:2.75rem;margin-bottom:3rem;background-position:74% 100%;}
	.section04 .pr-char {height:82.5vh;margin-left:-10.875rem;background-size:auto 100%;background-position:50% 100%;}
	.section05 .tit {height:2.875rem;margin-bottom:8.75rem;}
	.section06 .title-area {padding-bottom:15.625rem;}
	.section06 .tit {height:2.6875rem;}
	.section06 .btn {margin:1.125rem auto 5rem;}
	.section06 .pr-ring {height:14.6875rem;background-size:auto 100%;}
	.section06 .pr-char1 {bottom:0;height:25.9375rem;margin-left:-10rem;background-size:auto 100%;transform:translate(-50%, 0);}
	.section06 .pr-char2 {bottom:0;height:25.75rem;margin-left:7.25rem;background-size:auto 100%;transform:translate(-50%, 0);}

	.btn-default {padding:0.625rem 1.25rem;font-size:0.75rem;}
	.btn-default::before {width:14px;height:14px;}

	.slide-wrap {margin-bottom:1.125rem;}
	.slide-center {bottom:3.75rem;width:24.75rem;margin-left:-12.375rem;}
	.slide-center .swiper-wrapper {margin-left:-0.875rem;}
	.slide-center .swiper-slide {width:7rem;height:3.9375rem;margin:0 0.4375rem;}
	.slide-center .swiper-slide-active {width:8.8125rem;height:4.9375rem;}
	.slide-wrap + .swiper-pagination {padding:0 1.4375rem;}
	.slide-wrap + .swiper-pagination .swiper-pagination-bullet {width:8px;height:8px;}
	.slide-wrap + .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:10px;}
	.slide-wrap + .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width:18px;}
	.swiper-button-prev, .swiper-button-next {width:8px;height:14px;background-size:8.0625rem auto;}
	.swiper-button-prev {left:0;background-position:-2.8125rem -2rem;}
	.swiper-button-next {right:0;background-position:-3.8125rem -2rem;}
	.vod-list a .thumb-tit {height:1.6875rem;padding:0 0.625rem;font-size:0.6875rem;line-height:1.6875rem;letter-spacing:0;}
	.slide-center .vod-list {height:4.9375rem !important;}
	
	[data-swiper-id="patchnotes"] .swiper-slide .thumb {height:14.25rem;}
	[data-swiper-id="content"] {bottom:5.4375rem;padding-top:5rem;}
	[data-swiper-id="content"] .swiper-slide {width:13.25rem;margin:0 0.4375rem;}
	[data-swiper-id="content"] .swiper-slide .thumb {height:7.5rem;}
	[data-swiper-id="content"] .swiper-slide.swiper-slide-active {margin-top:-5rem;box-shadow:0 0.9375rem 1.875rem rgba(30,63,113,.5);}
	[data-swiper-id="content"] + .swiper-pagination {bottom:9.375rem;}
	
	#footer > .copyright em {display:block;}
	#footer .game-rating > .ico-gameRating {width:2rem;height:2rem;margin-right:0;}
	#footer .game-rating > ul li {letter-spacing:-1px;}
	#footer .game-rating > ul li + li {margin-top:0;}
		
	:lang(en) .section03 .tit {height:4.53125rem;}
	:lang(en) .section04 .tit {height:4.25rem;margin-bottom:1.125rem;background-image:url('../images/en/tit_section04_m.png');}
	:lang(en) .section05 .tit {height:2.90625rem;}
	:lang(en) .section06 .tit {height:2.75rem;}
	:lang(zh-TW) .section02 .tit {height:2.59375rem;}
	:lang(zh-TW) .section03 .tit {height:4.4375rem;}
	:lang(zh-TW) .section04 .tit {height:2.59375rem;}
	:lang(zh-TW) .section05 .tit {height:1.25rem;}
}

@media screen and (max-width:320px) {
	body {font-size:14px;}
	.app-download a {width:6.6875rem;height:2.25rem;}
	.section04 .title-area {padding-top:5.125rem;}
	.section04 .pr-char {height:77vh;margin-left:-8.875rem;}
	.section06 .title-area {padding-bottom:18.625rem;}
	.section06 .pr-char1, .section06 .pr-char2 {bottom:0.95rem;}
	[data-swiper-id="patchnotes"] .swiper-slide .thumb {height:12.25rem;}

	#footer .game-rating > .ico-gameRating {width:1.5625rem;height:1.5625rem;vertical-align:top;}
	
	:lang(en) .section02 .tit {height:1.8875rem;}
	:lang(en) .section06 .tit {height:2.25rem;}
}