@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:623px;margin:130px auto 0;} .section07 .inner .title-area {margin:0 auto 30px;position:relative;} .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%;} .section08 .fp-tableCell .inner {display:unset;} /* 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 { overflow-y: overlay; height: 100%; float:none; padding:0 50px 80px;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;} .add-link {display:inline-block;position:relative;width:250px;height:15px;background: url('../images/common/lnb_line.png') no-repeat 50% top;background-size:100% auto; margin-top: 20px;padding-top: 30px;} .add-link a {position:relative;display: block;margin-bottom:1rem;} .add-link a em {display:inline-block; font-family:'Noto Sans KR', sans-serif;font-size:24px;color:#333;vertical-align:middle; margin-right:10px;} .add-link a::after {content:""; display:inline-block; width:16px;height:16px;background:url('../images/common/ico_new_window.png') no-repeat 50% 50%;background-size:100% auto;text-indent:-9999em; vertical-align:middle; margin-top:2px;} .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:30px;width:200%;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;} .util-links a.btn-beginner {position:relative;text-shadow:unset; width:201px;height:42px;background:url('../images/ko/btn_top_guide.png') no-repeat 50% 50%;background-size:100% auto;text-indent:-9999em; display:inline-block; vertical-align:middle;} .util-links a.btn-beginner:before {display: none;} .util-links a.btn-beginner:hover:after {display: none;} .util-links a.btn-beginner em {display: none;font-size:0;} .util-links a.btn-beginner .inner-lines {position:absolute; top:5%; left:1%; display:inline-block; width:98%;height:89%;} .util-links a.btn-beginner .inner-lines span.line-top {position:absolute; top:0; left:0; display:inline-block; width:100%;height:3px;background-color:#00e6ff;} .util-links a.btn-beginner .inner-lines span.line-right {position:absolute; top:0; right:0; display:inline-block; width:3px;height:100%;background-color:#00e6ff;} .util-links a.btn-beginner .inner-lines span.line-bottom {position:absolute; bottom:0; right:0; display:inline-block; width:100%;height:3px;background-color:#00e6ff;} .util-links a.btn-beginner .inner-lines span.line-left {position:absolute; bottom:0; left:0; display:inline-block; width:3px;height:100%;background-color:#00e6ff;} .util-links a.btn-beginner:hover {background-image:url('../images/ko/btn_top_guide_on.png');} .mobile .util-links a.btn-beginner:hover {background-image:url('../images/ko/btn_top_guide.png');} :lang(en) .util-links a.btn-beginner {width:254px;height:42px;background-image:url('../images/en/btn_top_guide.png');} :lang(en) .util-links a.btn-beginner:hover {background-image:url('../images/en/btn_top_guide_on.png');} :lang(en) .mobile .util-links a.btn-beginner:hover {background-image:url('../images/en/btn_top_guide.png');} :lang(zh-TW) .util-links a.btn-beginner {width:162px;height:42px;background-image:url('../images/tw/btn_top_guide.png');} :lang(zh-TW) .util-links a.btn-beginner:hover {background-image:url('../images/tw/btn_top_guide_on.png');} :lang(zh-TW) .mobile .util-links a.btn-beginner:hover {background-image:url('../images/tw/btn_top_guide.png');} :lang(ja) .util-links a.btn-beginner {width:201px;height:42px;background-image:url('../images/ja/btn_top_guide.png');} :lang(ja) .util-links a.btn-beginner:hover {background-image:url('../images/ja/btn_top_guide_on.png');} :lang(ja) .mobile .util-links a.btn-beginner:hover {background-image:url('../images/ja/btn_top_guide.png');} /* section1 - home */v .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;} .section01 video {min-width:160%;} .mobile video {width:100%;height:100%;} /* .mobile .section01 video {height:135%;} */ /* .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;} */ .video-cover::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:1;} .bi {display:flex;position:relative;z-index:2; align-items: center; justify-content: center; margin: 0 auto; text-align: center;} .bi img {max-width: 100%;} .bi-ap {display:inline-block;position:relative;z-index:2;} /* :lang(en) .bi {background-image:url('../images/en/bi.png');} :lang(zh-TW) .bi {background-image:url('../images/tw/bi.png');} :lang(ja) .bi {background-image:url('../images/ja/bi.png');} :lang(en) .bi-ap {background-image:url('../images/en/bi_ap.png'); background-position:50% 90%;} :lang(zh-TW) .bi-ap {background-image:url('../images/tw/bi_ap.png'); background-position:50% 80%;} :lang(ja) .bi-ap {background-image:url('../images/ja/bi_ap.png'); background-position:50% 85%;} */ .app-download {opacity: 0; display:flex;flex-wrap: wrap;justify-content: center;position: relative;z-index: 10; gap:20px;margin:52px auto 26px;} .app-download .more-btns {position: relative;} .app-download .more-btns .btn-more {display:block;position: relative;z-index:10;;width:71px;height:71px;background:url('../images/common/ico_moreApp.png') no-repeat 0 0;background-size:100% auto;text-indent:-9999em;} .app-download .more-btns .btn-more.open {background-position-y: 100%;} @media (hover: hover) { .app-download .more-btns .btn-more:hover { background-position-y:100%; } } .app-download .more-btns .btns { display: none; position:absolute; bottom:92px; right:0; z-index: 1; width: 490px; padding:20px; border:1px solid #1f456e; background-color: rgba(18,52,89,.95); box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.25); text-align: left; } .app-download .more-btns .btns:after { display: block; content:""; display: block; position:absolute; bottom:-16px; right: 20px; width: 20px; height: 16px; margin-left:-10px; background:url('../images/common/ico_edgeApp.png') no-repeat 0 0;background-size:100% auto; } .app-download .more-btns .btns a {display: inline-block;margin-top:20px;} .app-download .more-btns .btns a:nth-child(odd) {margin-left:0;} .app-download .more-btns .btns a:nth-child(1), .app-download .more-btns .btns a:nth-child(2) {margin-top:0;} .app-download .more-btns .btns a + a {margin-left:18px;} .app-download a {display:block;width:213px;height:71px;background:url('../images/common/btn_app.png') no-repeat 0 0;background-size:100% auto;text-indent:-9999em;} .app-download .btn-apple,aside .app-download .ico-appstore {background-position-y: 0;} .app-download .btn-google,aside .app-download .ico-googleplay {background-position-y: calc(100% / 6 * 1);} .app-download .btn-apk,aside .app-download .ico-apk {background-position-y: calc(100% / 6 * 2);} .app-download .btn-fbg,aside .app-download .ico-fbg {background-position-y: calc(100% / 6 * 3);} .app-download .btn-myCard,aside .app-download .ico-myCard {background-position-y: calc(100% / 6 * 4);} .app-download .btn-amazone,aside .app-download .ico-amazone {background-position-y: calc(100% / 6 * 5);} .app-download .btn-appGallery,aside .app-download .ico-appGallery {background-position-y: 100%;} aside .app-download {opacity: 1;;justify-content: flex-start; max-width: 273px;margin:100px auto 50px; gap: 0;} aside .app-download a {width:auto;height:auto;background:none;margin:3.5px 7px;text-indent:0;} :lang(ko) .app-download {justify-content: center;} /* :lang(ja) aside .app-download a {background: none;} */ .ios .app-download .btn-appGallery {display:none !important;} .ios .app-download a:only-child {} .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.btn-stove span {display:block; font-size:12px; color:#fff; text-align: center;margin:3px 0 0 -5px;letter-spacing:0;} .share-btns a.btn-stove span.k-ls {letter-spacing:-0.6px;} :lang(en) .share-btns a.btn-stove span.k-ls {letter-spacing:0;} :lang(zh-TW) .share-btns a.btn-stove span.k-ls {letter-spacing:0;} :lang(ja) .share-btns a.btn-stove span.k-ls {letter-spacing:0;} .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:38%;transform:translateX(-102px);} 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:hover span {opacity:0;} .mobile .share-btns a:hover span {opacity:1;} .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;} .ap-floating {position:fixed;right:8px;top:11%; width:240px;height:233px;} .ap-floating .fl-cont {position:absolute;top:0;left:0;display:block;width:213px;height:235px;background:url('../images/ko/ap_floating.png') no-repeat -9999em 0;background-size:100% auto; padding-top:38px;z-index:20;} .ap-floating .fl-cont .txtArea {width:120px;height:60px; margin:0 auto; display:flex; align-items:center; justify-content: center; flex-direction:column; color:#fff;} .ap-floating .fl-cont .txtArea em.fl-dday {font-size:26px;font-weight:800;letter-spacing:0;} .ap-floating .fl-cont .txtArea em.fl-date {font-size:16px;font-weight:300;letter-spacing:0;} .ap-floating .btn-close-ap {position:absolute;top:10px;right:30px; display:block;width:22px;height:22px;background:url('../images/common/ap_close.png') no-repeat 50% 50%;background-size:100% auto;text-indent:-9999em;z-index:30;} .ap-floating .eff {position:absolute;top:-2.5%;left:-7%;display:block;width:240px;height:233px;background:url('../images/common/ap_effect.png') no-repeat 50% 50%;background-size:100% auto;z-index:10;} .ap-floating.ing .fl-cont .txtArea em {display:none;} aside .share-btns .collabor_floating {position:absolute;top:-170px;left:50%;width:120px;height:136px;margin-left:-64px;background:url('../images/common/collabor_floating.png') no-repeat 0;text-indent: -9999em;} :lang(en) aside .share-btns .collabor_floating {background-position-x: 33.3333%;} :lang(ja) aside .share-btns .collabor_floating {background-position-x: 66.6666%;} :lang(zh-TW) aside .share-btns .collabor_floating {background-position-x: 100%;} :lang(ko) .ap-floating .fl-cont {background-image:url('../images/ko/ap_floating.png'); background-position:0 0;} :lang(en) .ap-floating .fl-cont {background-image:url('../images/en/ap_floating.png'); background-position:0 0;} :lang(en) .ap-floating .fl-cont .txtArea em.fl-dday {font-size:24px;} /* :lang(en) .ap-floating .fl-cont .txtArea .fl-dday i {padding-left:0.5rem;} */ :lang(zh-TW) .ap-floating .fl-cont {background-image:url('../images/tw/ap_floating.png'); background-position:0 0;} :lang(ja) .ap-floating .fl-cont {background-image:url('../images/ja/ap_floating.png'); background-position:0 0;} :lang(ko) .ap-floating.ing .fl-cont {background-image:url('../images/ko/ap_floating_ing.png');} :lang(en) .ap-floating.ing .fl-cont {background-image:url('../images/en/ap_floating_ing.png');} :lang(zh-TW) .ap-floating.ing .fl-cont {background-image:url('../images/tw/ap_floating_ing.png');} :lang(ja) .ap-floating.ing .fl-cont {background-image:url('../images/ja/ap_floating_ing.png');} .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;} } .section07 .ico-scroll {margin-top:60px;} /* 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');} :lang(ja) .section02 .tit {height:86px;background-image:url('../images/ja/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');} :lang(ja) .section03 .tit {height:143px;background-image:url('../images/ja/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');} :lang(ja) .section04 .tit {height:83px;background-image:url('../images/ja/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');} :lang(ja) .section05 .tit {height:88px;background-image:url('../images/ja/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');} :lang(ja) .section06 .tit {height:83px;background-image:url('../images/ja/tit_section06.png');} /* section7 - content */ .section07 .title-area {padding:0 0 0px;} .section07 .tit {height:77px;background:url('../images/ko/tit_section07.png') no-repeat 50% 100%;} .section07 .tit2 {height:32px;background:url('../images/ko/tit_section07_2.png') no-repeat 50% 100%;position:relative;background-size: contain;text-indent:-9999em;margin-bottom:20px;} .section07 .btn {margin:36px 0 0;} .section07 .pr-bg {position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/common/bg_section07_1.jpg') 50% 50%/cover;} .section07 .slide-main {min-width:960px;margin:30px auto 0;} .section07 .cate-tabs {position:absolute; bottom:-85px;right:0px; z-index:10;} .section07 .cate-tabs a, .section07 .cate-tabs span {color:rgba(255,255,255,0.5);font-size:17px;display:inline-block;vertical-align:middle;} .section07 .cate-tabs a.on {color:rgba(255,255,255,1)} .section07 .cate-tabs span {font-size:11px;margin:0 10px;} :lang(en) .section07 .tit {background-image:url('../images/en/tit_section07.png');} :lang(en) .section07 .tit2 {height:29px;background-image:url('../images/en/tit_section07_2.png')} :lang(en) .ost-list .thumb-info .song-btn a.m-start {padding:0 5px;font-size:13px;} :lang(zh-TW) .section07 .tit {height:65px;background-image:url('../images/tw/tit_section07.png');margin-bottom:40px;} :lang(zh-TW) .section07 .cate-tabs {bottom:-40px;} :lang(zh-TW) .section07 .tit2 {height:35px;background-image:url('../images/tw/tit_section07_2.png')} :lang(zh-TW) .ost-list .thumb-info .song-btn a.m-start {padding:0 5px;font-size:13px;} :lang(ja) .section07 .inner .title-area,:lang(ja) .section08 .inner .title-area {width:100%;} :lang(ja) .section07 .tit {background-image:url('../images/ja/tit_section07.png');background-size:auto 100%} :lang(ja) .section07 .tit2 {height:35px;background-image:url('../images/ja/tit_section07_2.png')} :lang(ja) .cate-tabs {left:50%;right:auto;width:100%;max-width: 623px;margin:0 auto;transform: translateX(-50%);text-align: right;} .section08 .title-area {padding:0 0 20px;} .section08 .btn-default {position:absolute;top:-10px;right:0;padding:10px 20px;font-size:16px;margin:0!important;} /* .section08 .slide-sub {width: 950px;height: 356px;display: block;margin: 0 auto;position: relative; background:rgb(69,59,157); background:linear-gradient(to bottom, rgb(69,59,157) 0%,rgb(186,122,201) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#443b9d', endColorstr='#b776c6',GradientType=1 ); } .section08 .slide-sub .song-tit {text-align:center;color:#fff;padding:25px 0;font-weight:500;} .section08 .btn {margin:36px 0 0;} */ .section08 .slide-sub {width: 715px;display: block;margin: 0 auto;position: relative;min-width:715px;} .section08 .slide-sub .song-tit {text-align:left;color:#0856ab;padding:0 0 20px;font-weight:500;letter-spacing:0;} .section08 .btn {margin:80px 0 0;} .section08 .tit {height:72px;background:url('../images/ko/tit_section08.png') no-repeat 50% 100%;} .section08 .pr-bg {position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/common/bg_section08_1.jpg') 50% 50%/cover;} .section08 .pr-char1 {position:absolute;bottom:0;left:50%;width:972px;height:618px;margin-left:-850px;background:url('../images/common/bg_section08_char1.png') no-repeat 50% 100%;} .section08 .pr-char2 {position:absolute;bottom:0;left:50%;width:497px;height:577px;margin-left:150px;background:url('../images/common/bg_section08_char2.png') no-repeat 50% 100%;} .section08 .pr-obj {position:absolute;top:50%;left:50%;width:2560px;height:994px;margin-left:-1280px;margin-top:-547px;background:url('../images/common/bg_section08_obj.png') no-repeat 50% 50%;background-size:auto;} :lang(en) .section08 .tit {height:59px;background-image:url('../images/en/tit_section08.png');} :lang(zh-TW) .section08 .tit {height:65px;background-image:url('../images/tw/tit_section08.png');} :lang(zh-TW) .section08 .title-area {padding:0 0 30px;} :lang(ja) .section08 .tit {background-image:url('../images/ja/tit_section08.png');background-size:auto 100%} /* 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 .inner {display: flex;align-items: center;justify-content: space-between;max-width:960px;margin: 0 auto;} #footer .logo {display:inline-block;width:144px;height:36px;background:url('../images/common/ico_footer.png') no-repeat 0 50%;background-size: 100% auto;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:0;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:185px;} :lang(zh-TW) #footer .copyright {height:auto;} :lang(zh-TW) .game-rating {width:960px;margin:20px auto;text-align:left;} :lang(zh-TW) .game-rating > .ico-gameRating {display:inline-block;margin-right:14px;vertical-align:top;} :lang(zh-TW) .game-rating > .ico-gameRating-15 {display:inline-block;margin-right:14px;vertical-align:top;} :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) aside .app-download a {background:none !important;} */ .lnb-wrap .lnb li.skip {display:none !important;} .lnb-wrap .lnb li[data-skip="skip"] {display:none !important;} .section.skip{overflow:hidden;height:0 !important;} /* 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);} .popup-apkInfo {width:680px;padding:50px;background-color:#fff;text-align:center;} .popup-apkInfo .pop-inner {text-align:left;} .popup-apkInfo .pop-inner h1 {font-size:30px;color:#000;margin-bottom:30px;} .popup-apkInfo .pop-inner li {font-size:24px;font-weight:400;color:#000;letter-spacing:0;line-height:1.4em;} .popup-apkInfo .pop-inner li em {color:#ff5000;} .popup-apkInfo .pop-inner p {font-size:24px; color:#ff5000;margin:40px 0;line-height:1.4em;} /* 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:url('../images/common/ico_apple.png') no-repeat 0 0;background-size:100% auto;} .ico-googleplay {width:54px;height:54px;background:url('../images/common/ico_google.png') no-repeat 0 0;background-size:100% auto;} .ico-gameRating {width:50px;height:50px;background:url('../images/common/ico_gameRating.png') no-repeat 0 0;background-size:100% auto;} .ico-gameRating-15 {width:50px;height:50px;background:url('../images/common/ico_gameRating.png') no-repeat 0 0;background-size:100% auto;} .ico-apk {width:54px;height:54px;background:url('../images/common/ico_apk.png') no-repeat 0 0;background-size:100% auto;} .ico-fbg {width:54px;height:54px;background:url('../images/common/ico_fbg.png') no-repeat 0 0;background-size:100% auto;} .ico-myCard {width:54px;height:54px;background:url('../images/common/ico_myCard.png') no-repeat 0 0;background-size:100% auto;} .ico-amazone {width:54px;height:54px;background:url('../images/common/ico_amazone.png') no-repeat 0 0;background-size:100% auto;} .ico-appGallery {width:54px;height:54px;background:url('../images/common/ico_appGallery.png') no-repeat 0 0;background-size:100% auto;} /* .ico-gameRating-15 {width:50px;height:50px;background:url('../images/common/ico_gameRating_15.png') no-repeat 0 0;background-size:100% auto;} */ .btn-ost .ico {display:inline-block;vertical-align:middle;transition:opacity 0.3s ease;} .ico-ostevt {width:69px;height:51px;background:url('../images/ko/ico_share_ost.png') no-repeat 0 0 !important;background-size:100% auto;} .icoOst {display:inline-block;background:url('../images/common/ico_ost.png') no-repeat;text-indent:-9999em;margin-right:8px;} .ico-ost-video {width:19px;height:19px;background-position:0 0;} .ico-ost-music {width:19px;height:19px;background-position:0 0%;} .ico-ost-info {width:19px;height:19px;background-position:0 66.6666%;} .ico-ost-play {width:19px;height:19px;background-position:0 100%;} /* 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);} .btn-default-small {padding:15px 40px;background:#2ad4a4;font-size:20px;letter-spacing:0; color:#fff;border:2px solid #2ad4a4;transition:border 0.5s ease, color 0.3s ease;} .btn-default-small::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-small:hover {border-color:#284b71;color:#284b71;} .pc .btn-default-small:hover::before {transform:translate(-50%,-50%) rotate(45deg);} .btn-coversong {width:501px;height:154px;background:url('../images/ko/btn_coversong.png') no-repeat 0 0;background-size:100% auto;text-indent:-9999em;} :lang(en) .btn-coversong {background-image:url('../images/en/btn_coversong.png');} :lang(zh-TW) .btn-coversong {background-image:url('../images/tw/btn_coversong.png');} :lang(ja) .btn-coversong {background-image:url('../images/ja/btn_coversong.png');} :lang(en) .ico-ostevt {background-image:url('../images/en/ico_share_ost.png') !important;} :lang(zh-TW) .ico-ostevt {background-image:url('../images/tw/ico_share_ost.png') !important;} :lang(ja) .ico-ostevt {background-image:url('../images/ja/ico_share_ost.png') !important;} /** * 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 ); } .section07 .swiper-pagination-bullet.swiper-pagination-bullet-active { background:rgb(39,106,226); background:linear-gradient(to right, rgb(39,106,226) 0%,rgb(237,90,235) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#276ae2', endColorstr='#ed5aeb',GradientType=1 ); } .section08 .swiper-pagination-bullet.swiper-pagination-bullet-active { background:rgb(39,106,226); background:linear-gradient(to right, rgb(39,106,226) 0%,rgb(237,90,235) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#276ae2', endColorstr='#ed5aeb',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;} .section07 .slide-wrap + .swiper-pagination {bottom:-15px;} .section08 .slide-wrap + .swiper-pagination {bottom:-28px;} .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;} .ost-list a {width:100%;height:100%;} .ost-list .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;} .ost-list .thumb {display:block;overflow:hidden;position:relative;width:100%;height:100%;background:#000;} .ost-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 .5s ease;} .ost-list .swiper-slide .thumb:hover em {transform:scale(1.05);} .ost-list .swiper-slide-active .thumb em {opacity:1;} .ost-list .swiper-slide .sideBox {opacity:0; visibility:hidden; transition:all .5s ease;} .ost-list .swiper-slide-active .sideBox {display:block; opacity:1; visibility:visible;} .ost-list .swiper-slide .thumb-info {opacity:0; visibility:hidden; transition:all .5s ease;} .ost-list .swiper-slide-active .thumb-info {opacity:1; visibility:visible;} .ost-list .thumb-info {position:absolute;bottom:0;left:0;padding:0 30px;display:flex;align-items:center;justify-content:space-between; width:100%;height:92px;background:rgba(0,0,0,0.75);text-align:left;color:#fff;} .ost-list .thumb-info .song-desc{max-width:280px; word-break: break-all;} .ost-list .thumb-info .song-tit{font-size:20px;font-weight:500;line-height:22px;} .ost-list .thumb-info .singer{font-size:15px;font-weight:500;display:block;margin-top:5px;} .ost-list .thumb-info .song-btn {height:35px;display:inline-block;margin:0 2px;background-color:#2ad4a4;width:8rem;height:2rem;position:relative;} .ost-list .thumb-info .song-btn a.m-start {position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center; width:100%;height:100%;padding:0 18px;color:#fff;font-size:15px;font-weight:400;transition:all .1s;} .ost-list .thumb-info .song-btn.noneAudio {background-color:#516962;} .ost-list .thumb-info .song-btn a.m-start.hide {opacity:0;visibility:hidden;} .pc .ost-list .thumb-info .song-btn a.m-start:hover {color:#284b71;} .pc .ost-list .thumb-info .song-btn a.m-start:hover .icoOst{background-position-x:100%;} .ost-list .thumb-info .song-btn.noneAudio a.m-start:hover {color:#fff;} .ost-list .thumb-info .song-btn.noneAudio a.m-start:hover .icoOst{background-position-x:0;} .music-player {display:flex;align-items:center;justify-content:center; width:100%;height:100%;background-color:#2ad4a4;padding:0 18px;color:#fff;font-size:15px;font-weight:400;opacity:0;visibility:hidden;} .music-player .icoOst {background-position:0 100%; cursor: pointer;} .music-player .icoOst.on {background-position-x:100%;} .music-player .audio-st {display:inline-block;} .music-player.show {opacity:1;visibility:visible;} .music-player .progress-box {display:block;background: #fff;width:60px;height:2px; margin-top:4px;} .music-player .progress-box .progress-bar {width:0;height: 100%;background: #284b71;} .music-player .play-time {font-size:11px;color:#284b71;font-family:'Dotum';font-weight:bold;letter-spacing:0;margin-top:2px;} .ost-list .song-details {position:absolute;top:0;left:0;padding:30px;display:none;width:100%;height:318px;background:rgba(0,0,0,0.9);text-align:left;color:#fff;} .ost-list .song-details.show {display:block;} .ost-list .song-details .details-tit {font-size:22px;font-weight:500;letter-spacing:0;} .ost-list .song-details .c-wrap {display:flex;align-items:flex-start;justify-content:left; width:100%;height:95%;font-size:11.5px;padding-top:20px;line-height:1.5em;letter-spacing:0;font-weight:300;} .ost-list .song-details .c-wrap .left-c {width:50%;} .ost-list .song-details .c-wrap .right-c {width:50%;} .ost-list .song-details .close-details {position:absolute;top:32px;right:30px;width:26px;height:26px;background:url('../images/common/ost_close.png') no-repeat 0 0;background-size:100% auto;text-indent:-9999em;} .ost-list .sideBox {width:623px; margin:30px auto 0;} .ost-list .sideBox .sideMov {display:inline-block;} .ost-list .sideBox .sideMov+div {margin-left:28px;} .ost-list .sideBox .sideMov .sideThumb {display:block;overflow:hidden;position:relative;width:296px;height:166px; float:left;cursor: pointer;background:#000;} .ost-list .sideBox .sideMov .sideThumb::after {content:"";position:absolute;top:50%;left:50%;width:30px;height:41px;background:url('../images/common/btn_video.png') no-repeat 0 0;background-size:100% auto;text-indent:-9999em;margin:-20px 0 0 -10px;} .ost-list .sideBox .sideMov .sideThumb em {display:block;width:100%;height:100%;opacity:.6;background-repeat:no-repeat;background-position:center;background-size:cover;transform:scale(1.02);transition:all .3s ease;} .ost-list .sideBox .sideMov .sideThumb:hover em {transform:scale(1.05);} .ost-list .sideBox .sideMov .sideThumb:hover em {opacity:1;} .ost-list .sideBox .sideMov .side-thumb-info {display:flex;float: right;align-items:center;justify-content:space-between;width:502px;height:110px;background: #fff;text-align:left;color:#284b71;padding:0 30px;} .ost-list .sideBox .sideMov .side-thumb-info .song-tit{font-size:21px;font-weight:500;line-height:22px;} .ost-list .sideBox .sideMov .side-thumb-info .singer{font-size:17px;font-weight:500;display:block;margin-top:5px;} .ost-list .sideBox .sideMov .side-thumb-info .song-btn {height:35px;display:inline-block;margin:14px 0 0 0;} .ost-list .sideBox .sideMov .side-thumb-info .song-btn a {display:flex;align-items:center;justify-content:center; width:100%;height:100%;background-color:#2ad4a4;padding:0 18px;color:#fff;font-size:15px;font-weight:500;} .pc .ost-list .sideBox .sideMov .side-thumb-info .song-btn a:hover {color:#284b71;} .pc .ost-list .sideBox .sideMov .side-thumb-info .song-btn a:hover .icoOst{background-position-x:100%;} .subOst-list a {width:100%;height:100%;} .subOst-list .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;} .subOst-list .thumb {display:block;overflow:hidden;position:relative;width:296px;height:100%;background:#000;float:left;} .subOst-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 .2s ease;} .subOst-list .swiper-slide:hover .thumb em {transform:scale(1.05);} .subOst-list .swiper-slide-active .thumb em {opacity:1;} .subOst-list .thumb-info {display:flex;float: right;align-items:center;justify-content:flex-start;width: 404px;height:166px;background: #fff;text-align:left;color:#284b71;} .subOst-list .thumb-info .song-info {padding:0 30px;width:100%;} .subOst-list .thumb-info .song-tit{font-size:21px;font-weight:500;line-height:22px;} .subOst-list .thumb-info .singer{font-size:17px;font-weight:500;display:block;margin-top:5px;} .subOst-list .thumb-info .song-btn {height:35px;display:inline-block;margin:14px 0 0 0;} .subOst-list .thumb-info .song-btn a {display:flex;align-items:center;justify-content:center; width:100%;height:100%;background-color:#2ad4a4;padding:0 18px;color:#fff;font-size:15px;font-weight:500;} .cover-list a {width:100%;height:100%;} .cover-list .thumb {display:block;overflow:hidden;position:relative;width:225px;height:126px;background:#000;cursor: pointer;} .cover-list .thumb em {display:block;width:100%;height:100%;opacity:.6;background-repeat:no-repeat;background-position:center;background-size:cover;transform:scale(1.02);transition:all .3s ease;} .cover-list .swiper-slide .thumb:hover em {transform:scale(1.05);} .cover-list .swiper-slide .thumb:hover em {opacity:1;} .cover-list .thumb-info {position:relative;overflow:hidden; display:flex;align-items:center;justify-content:flex-start;width:225px;height:80px;background: #fff;text-align:left;color:#284b71;} .cover-list .thumb-info::before {content:"";position:absolute;top:-15px;left:-15px;width:31px;height:31px;background:#284b71; transform:rotate(45deg);} .cover-list .thumb-info::after {content:"";position:absolute;bottom:-15px;right:-15px;width:31px;height:31px;background:#284b71; transform:rotate(45deg);} .cover-list .no1 .thumb-info::before, .cover-list .no1 .thumb-info::after {background:#ffda48;} .cover-list .no2 .thumb-info::before, .cover-list .no2 .thumb-info::after {background:#d9d9d8;} .cover-list .no3 .thumb-info::before, .cover-list .no3 .thumb-info::after {background:#f5cdc4;} .cover-list .thumb-info .award-info {padding:0 30px;width:100%;} .cover-list .thumb-info .award-tit{font-size:17px;font-weight:500;line-height:22px;display:block;} .cover-list .thumb-info .user-name{font-size:15px;font-weight:400;} .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;} .slide-ost {width:724px; padding:70px 50px 35px; margin:0 auto; background: linear-gradient(0deg, rgba(115,147,227,0.7), rgba(32,67,141,0.8));} .slide-ost .swiper-wrapper {display:flex;position:relative;} .slide-ost .swiper-slide {width:624px;height:318px;transition:all 0.3s ease;} .slide-ost .swiper-slide-active .thumb {box-shadow:0px 4px 13px rgba(0,0,0,.8);} .slide-ost .ost-list {padding:10px 0 280px;} .slide-ost .ost-list a .thumb-tit {display:none;} .slide-ost + .swiper-pagination {width:100%;} .slide-ost + .swiper-pagination .swiper-button-prev, .slide-ost + .swiper-pagination .swiper-button-next {position:relative;width:60px;height:99px;background-size:100% auto;background-position:50% 0; display:inline-block;top:unset;transform:unset;} .slide-ost + .swiper-pagination .swiper-button-prev {background-image:url('../images/common/btn_prev_new.png');position: absolute;top:-440px;left: 50%;margin-left: -450px;} .slide-ost + .swiper-pagination .swiper-button-next {background-image:url('../images/common/btn_next_new.png');position: absolute;top:-440px;left: 50%;margin-left: 390px;} .slide-ost + .swiper-pagination .page {display:inline-block;vertical-align:middle;margin:0 10px;} .slide-cover {width:715px;margin:0 auto;} .slide-cover .swiper-wrapper {display:flex;position:relative;justify-content:center;} .slide-cover .swiper-slide {width:225px !important;height:206px;transition:all 0.3s ease;} .slide-cover .cover-list {padding:0px 0;} .slide-cover .cover-list a .thumb-tit {display:none;} .slide-cover + .swiper-pagination {width:100%;} .slide-cover + .swiper-pagination .swiper-button-prev, .slide-cover + .swiper-pagination .swiper-button-next {position:relative;width:35px;height:42px;background-size:100% auto;background-position:50% 0; display:inline-block;top:unset;transform:unset;} .slide-cover + .swiper-pagination .swiper-button-prev {background-image:url('../images/common/btn_prev3.png');} .slide-cover + .swiper-pagination .swiper-button-next {background-image:url('../images/common/btn_next3.png');} .slide-cover + .swiper-pagination .page {display:inline-block;vertical-align:middle;margin:0 10px;} [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);} :lang(ja) #footer {height:140px;} .footer-menu {display:none;max-width:960px;margin:0 auto;padding:1rem 0;text-align: left;} :lang(ja) .footer-menu {display:block;} .footer-menu ul {display:flex;flex-wrap: wrap;} .footer-menu li + li {margin-left:.875rem;} .footer-menu a {color:#fff;font-size:.75rem;} .footer-menu a:before {content:"";display:inline-block;width:3px;height:3px;margin-right:4px;background-color:#fff;border-radius:2px;vertical-align: middle;} .footer-menu a:hover {text-decoration: underline;} @media screen and (max-width:2560px) { .section02 .pr-cloud1, .section02 .pr-cloud2 {background-size:auto;} } @media screen and (max-width:960px) { /* .app-download {max-width: 18rem;} */ #footer {height:auto;padding:1.1875rem 0;} #footer .inner {padding:0 1rem;} #footer .logo, #footer .logo-sgp, #footer .logo-superCreative {display:none;} #footer .copyright {display:block;margin:0;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;} .popup-apkInfo {width:21rem;padding:2rem;background-color:#fff;text-align:center;} .popup-apkInfo .pop-inner {text-align:left;} .popup-apkInfo .pop-inner h1 {font-size:1.3rem;color:#000;margin-bottom:1.2rem;} .popup-apkInfo .pop-inner li {font-size:0.9rem;font-weight:400;color:#000;letter-spacing:0;line-height:1.4em;} .popup-apkInfo .pop-inner li em {color:#ff5000;} .popup-apkInfo .pop-inner p {font-size:0.9rem; color:#ff5000;margin:1.5rem 0;line-height:1.4em;word-break:break-all;} .btn-default-small {padding:0.625rem 1.25rem;font-size:0.75rem;} .btn-default-small::before {width:14px;height:14px;} :lang(zh-TW) #footer {height:auto;} :lang(zh-TW) .game-rating {width:100%;padding:0 1rem;margin-top:1rem;text-align:left;} :lang(zh-TW) .game-rating > ul li {font-size:0.375rem;} } @media screen and (max-width:768px) { .ico {background-size:8.0625rem auto;} .share-btns a.btn-stove {margin-top:1.4rem; margin-right:-0.4rem; margin-left:0.2rem;} :lang(en) .share-btns a.btn-stove {margin-top:2rem;} :lang(zh-TW) .share-btns a.btn-stove {margin-top:1.3rem;} :lang(ja) .share-btns a.btn-stove {margin-top:2rem; margin-right:-1.1rem; } .share-btns a.btn-stove span {margin:0.4rem 0 0 0;} .share-btns a.btn-stove span.k-ls {font-size:0.6rem;} .bi {max-width:90%;} /* .bi-ap {width:23.59375rem;height:18.4375rem;} */ .bi-ap {width:19.59375rem;height:11.4375rem; margin-top:4rem;} .lnb-wrap {left:-11.75rem;width:11.75rem;} .lnb-wrap .lnb-area { overflow-y: overlay; height: 100%; float:none; padding:0 1.625rem 3rem; } .fp-viewing-home .lnb-wrap .lnb-area { height: calc(100% - 3rem); } .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;} .add-link {width:10.6rem;height:3rem;margin:1.4rem 0 0 -1.1rem;padding-top:1.2rem;} .add-link a em {font-size:0.8rem;margin-right:0.3rem} .add-link a::after {width:0.7rem; height:0.7rem;} .util-links {top:.875rem;left:125%;} .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 {margin-top:0.4rem;} .app-download .more-btns {position: static;} .app-download .more-btns .btn-more {width:2.25rem;height:2.25rem;} .app-download .more-btns .btns { bottom:2.95rem; right: auto; left:50%; width: 15.625rem; transform: translateX(-50%); padding:.625rem; } .app-download .more-btns .btns:after { bottom: -0.5rem; right: 3.75rem; width: .625rem; height: .5rem; margin-left:-0.3125rem; } .app-download .more-btns .btns a {margin-top:.625rem;} .app-download .more-btns .btns a:nth-child(odd) {margin-left:0;} .app-download .more-btns .btns a:nth-child(1), .app-download .more-btns .btns a:nth-child(2) {margin-top:0;} .app-download .more-btns .btns a + a {margin-left:0.5625rem;} .app-download a {width:6.6875rem;height:2.25rem;} .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 {opacity:1;margin:3.125rem auto 1.5625rem;gap:0;} 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 a {width:100%;height:2.25rem;background:#000 url('../images/common/btn_app.png') no-repeat 50% 0/ 80% auto;} aside .app-download a em {display: none;} /* 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% 0;} aside .app-download .ico-googleplay {background-position:50% calc(100% / 5 * 1);} aside .app-download .ico-apk {background-position:50% calc(100% / 5 * 2);} aside .app-download .ico-fbg {background-position:50% calc(100% / 5 * 3);;} aside .app-download .ico-myCard {background-position:50% calc(100% / 5 * 4);;} aside .app-download .ico-amazone {background-position:50% 100%;} */ :lang(ja) aside .app-download a {background-image:url('../images/ja/btn_app.png');} :lang(zh-TW) aside .app-download a {background-image: url('../images/tw/btn_app.png');} :lang(zh-TW) .app-download a {background-image:url('../images/tw/btn_app.png');} :lang(zh-TW) .app-download .btn-amazone,:lang(zh-TW) .app-download .btn-myCard {background-image:url('../images/common/btn_app.png');} .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;} .ico-ostevt {background-size:100% auto !important;width:2rem;height:1.6rem;} /* .share-btns .btn-instagram,.share-btns .btn-bahamute, .scroll aside .share-btns .btn-instagram,.scroll aside .share-btns .btn-bahamute {display:none;} */ .util-links a.btn-beginner {width:7.730769230769231rem; height:1.6153846153846154rem;} .util-links a.btn-beginner .inner-lines {top:8%;left:1%;width:99%;height:87%;} .util-links a.btn-beginner .inner-lines span.line-top {height:0.1rem} :lang(en) .util-links a.btn-beginner {width:6.769231rem; height:1.4rem;} :lang(zh-TW) .util-links a.btn-beginner {width:6.230769230769231rem; height:1.6153846153846154rem;} :lang(ja) .util-links a.btn-beginner {width:6.230769230769231rem; height:1.6153846153846154rem;} .ap-floating {top:11%; right:0; width:9.23076923076923rem;height:8.961538461538462rem;} .ap-floating .fl-cont {width:8.192307692307692rem;height:9.038461538461538rem;padding-top:1.35rem;} .ap-floating .fl-cont .txtArea {width:4.615384615384615rem;height:2.3076923076923075rem; } .ap-floating .fl-cont .txtArea em.fl-dday {font-size:1rem;} .ap-floating .fl-cont .txtArea em.fl-date {font-size:0.6153846153846154rem;} .ap-floating .btn-close-ap {top:0.2rem;right:1.4rem; width:0.8461538461538461rem;height:0.8461538461538461rem;} .ap-floating .eff {top:-2.5%;left:-7%;display:block;width:9.23076923076923rem;height:8.961538461538462rem;} .section01 .inner .share-area .share-btns {display:inline-flex;justify-content: center;align-items: center;} .section01 .inner .share-area .share-btns a {order:2;} .section01 .inner .share-area .share-btns .btn-stove {margin-top:1rem;} :lang(en) .section01 .inner .share-area .share-btns .btn-stove {margin-top:1.75rem;} :lang(ja) .section01 .inner .share-area .share-btns .btn-stove {margin-top:1.75rem;} .section01 .inner .share-area .share-btns .collabor_floating { order:1;display: block; width:4rem;height:3.5rem; margin:0;margin-top:1rem; background:url('../images/common/collabor_floating_m.png') no-repeat 0 0;background-size: auto 100%;text-indent: -9999em; } :lang(ko) .section01 .inner .share-area .share-btns .collabor_floating {} :lang(en) .section01 .inner .share-area .share-btns .collabor_floating {margin-top:1.75rem;background-position-x: 33.3333%;} :lang(ja) .section01 .inner .share-area .share-btns .collabor_floating {margin-top:1.75rem;background-position-x: 66.6666%;} :lang(zh-TW) .section01 .inner .share-area .share-btns .collabor_floating {background-position-x: 100%;} .section07 .slide-wrap + .swiper-pagination {bottom:0;} .section07 .cate-tabs {bottom:-1.9rem;} .share-btns a:hover .ico {opacity:1;} .share-btns a i {display:none;} .slide-ost + .swiper-pagination .swiper-button-prev, .slide-ost + .swiper-pagination .swiper-button-next {width: 1.6666666666666667rem;height: 2.75rem;background-size:100% auto;} .slide-ost + .swiper-pagination .swiper-button-prev {top: -15rem;left: 50%;margin-left:-11.6rem;} .slide-ost + .swiper-pagination .swiper-button-next {top: -15rem;left: 50%;margin-left:9.9rem;} .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;} .aside .share-btns{display:none;} .btn-menu {width:42px;height:42px;margin-left:2px;} .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);} .app-download {width:auto;max-width:17.5rem;gap:.625rem;} /* .app-download a {margin:.125rem;} */ :lang(en) aside .app-download {width:auto;} :lang(en) aside .app-download a {margin:2px 0 0;} :lang(en) .ios .app-download .btn-amazone,:lang(en) .ios .app-download .btn-myCard {display:none !important;} :lang(zh-TW) .app-download:not(aside .app-download) {width:auto;} :lang(zh-TW) .ios .app-download,:lang(ja) .ios .app-download {justify-content: center;} /* :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;} */ :lang(zh-TW) .ios .app-download .btn-amazone,:lang(zh-TW) .ios .app-download .btn-myCard {display:none !important;} :lang(ko) .ios .app-download .btn-amazone,:lang(ko) .ios .app-download .btn-myCard {display:none !important;} :lang(ja) .ios .app-download .btn-amazone,:lang(ja) .ios .app-download .btn-myCard {display:none !important;} :lang(ja) #footer {height:auto;} .footer-menu {padding:.5rem .5rem 0;} .footer-menu ul {justify-content: space-around;} .footer-menu li + li {margin-left:.5rem;} .footer-menu a {font-size:.625rem;} .footer-menu a:before {width:3px;height:3px;margin-right:4px;} /* .footer-menu li:nth-of-type(3) {width:100%;margin-left:0;margin-top:.125rem;text-align: center;} */ } @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;} .app-download .more-btns .btns {width: 15.625rem;} .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);} .section07 .tit {height:2.6rem;} .section07 .tit2 {height:1.5625rem;} .section07 .slide-main {margin:2rem auto 0; min-width:0;} .section07 .inner .title-area {margin-bottom:0;} .section07 .ico-scroll {margin-top:4.8125rem;} .section07 .cate-tabs {position:relative;} .section07 .cate-tabs a, .section07 .cate-tabs span {font-size:0.85rem;} .section08 .tit {height:2.4rem;} .section08 .slide-sub {width:15.9375rem;min-width:0;} .section08 .fp-tableCell .inner {display:table-cell;padding-bottom: 3rem} .section08 .title-area {padding:0 0 0.6rem;} .section08 .btn {margin:2rem 0 5rem;} .section08 .slide-wrap + .swiper-pagination {bottom:0;} .section08 .inner .title-area {margin:0 auto !important;} .section08 .slide-sub .song-tit {font-size:1rem;text-align:center;padding:0 0 4rem;} .section08 .btn-default {top:2.125rem;font-size:0.9rem;padding:0.4rem 1rem;} .section08 .pr-char1 {bottom:2rem;width:37.38461538461539rem;height:23.76923076923077rem;margin-left:-29rem; background-size:100% auto;} .section08 .pr-char2 {bottom:2rem;width:19.115384615384617rem;height:22.192307692307693rem;margin-left:3rem; background-size:100% auto;} .section08 .slide-wrap {margin-bottom:0;} .btn-coversong {width:20.875rem;height:6.416666666666667rem;} .btn-default {padding:0.625rem 1.25rem;font-size:0.75rem;} .btn-default::before {width:14px;height:14px;} .slide-wrap {margin-bottom:1.125rem;} .section07 .slide-wrap {margin-bottom:0.5rem !important;} .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;} .ost-list .sideBox {width:17.46875rem;margin-top:2rem;} .ost-list .sideBox .sideMov .sideThumb {width:8.25rem;height:5.1875rem;} .ost-list .sideBox .sideMov+div {margin-left:0.7rem;} .ost-list .sideBox .sideMov .sideThumb::after {width:0.9375rem;height:1.4rem;margin:-0.7rem 0 0 -0.4rem;} .ost-list .thumb-info {padding:0 0.6rem; height:3rem;} .ost-list .thumb-info .song-desc {max-width:7rem;} .ost-list .thumb-info .song-tit {font-size:0.5rem;letter-spacing:0;} .ost-list .thumb-info .song-btn {height:1.5rem;margin:0;width:5rem} .ost-list .thumb-info .song-btn a {font-size:0.5rem;padding:0 0.3rem;} .ost-list .thumb-info .song-btn a.m-start {padding:0;font-size:0.4rem;} .ico-ost-music {width:0.95rem; height:0.95rem; background-size:2.55rem auto;margin-right:0.3rem;} .music-player {padding:0;} .music-player .play-time {font-size:0.5rem;letter-spacing:-0.04rem;} .music-player .progress-box {width:3rem;} .ico-ost-play {width:0.95rem; height:0.95rem; background-size:2.55rem auto;margin-right:0.3rem;} .slide-ost {width:18.8rem;padding:1.8rem 0.6rem 0.7rem;} .slide-ost .ost-list {padding:1rem 0 10.5rem;} .slide-ost .swiper-wrapper {margin-left:0;} .slide-ost .swiper-slide {width:18.46875rem;height:9.9375rem;} .slide-ost .swiper-slide-active {width:18.46875rem;height:9.9375rem;} .slide-subOst {bottom:3.75rem;width:24.75rem;margin-left:-12.375rem;} .slide-subOst .swiper-wrapper {margin-left:-0.875rem;} .slide-subOst .swiper-slide {width:7rem;height:3.9375rem;margin:0 0.4375rem;} .slide-subOst .swiper-slide-active {width:8.8125rem;height:4.9375rem;} .slide-cover {width:15.9375rem;} .slide-cover .swiper-wrapper {justify-content:unset;} .slide-cover .swiper-slide {width:15.9375rem !important; height:12.875rem; text-align: center;} .slide-cover .swiper-slide-active {width:15.9375rem !important;height:12.875rem;} .slide-cover + .swiper-pagination .swiper-button-prev, .slide-cover + .swiper-pagination .swiper-button-next {position:absolute;width:1.4230769230769231rem;height:2.3846153846153846rem;background-size:100% auto;background-position:50% 0; display:inline-block;top:unset;transform:unset;} .slide-cover + .swiper-pagination .swiper-button-prev {bottom:8rem; left:-2.5rem;background-image:url('../images/common/btn_prev4.png');} .slide-cover + .swiper-pagination .swiper-button-next {bottom:8rem; right:-2.5rem;background-image:url('../images/common/btn_next4.png');} .slide-cover + .swiper-pagination .page {display:inline-block;vertical-align:middle;margin:0 10px;} .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;} .ost-list a .thumb-tit {height:1.6875rem;padding:0 0.625rem;font-size:0.6875rem;line-height:1.6875rem;letter-spacing:0;} .subOst-list a .thumb-tit {height:1.6875rem;padding:0 0.625rem;font-size:0.6875rem;line-height:1.6875rem;letter-spacing:0;} .cover-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;} .slide-subOst .subOst-list {height:4.9375rem !important;} .cover-list .thumb {width:15.9375rem ;height:7.875rem;} .cover-list .thumb-info {width:15.9375rem;height:5rem;} [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 > .ico-gameRating-15 {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(en) .section07 .tit {height:2.6rem;} :lang(en) .section07 .tit2 {height:1.3625rem;} :lang(en) .section08 .tit {height:2.2rem;} :lang(en) .ost-list .thumb-info .song-btn a.m-start {padding:0;font-size:0.4rem;} :lang(en) .ico-ost-music {margin-right:0.1rem;} :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;} :lang(zh-TW) .section07 .tit {height:2.6rem; margin-bottom:0;} :lang(zh-TW) .section07 .cate-tabs {bottom:-2rem;} :lang(zh-TW) .section07 .tit2 {height:1.48rem;} :lang(zh-TW) .section08 .tit {height:2.2rem;} :lang(zh-TW) .section08 .title-area {padding:0 0 1rem;} :lang(zh-TW) .ost-list .thumb-info .song-btn a.m-start {padding:0;font-size:0.4rem;} :lang(zh-TW) .ico-ost-music {margin-right:0.1rem;} :lang(ja) .section02 .tit {height:2.59375rem;} :lang(ja) .section03 .tit {height:5rem;} :lang(ja) .section04 .tit {height:3.5rem;} :lang(ja) .section05 .tit {height:2.875rem;} :lang(ja) .section06 .tit {height:2.75rem;} :lang(ja) .section07 .tit {height:5.1875rem; margin-bottom:0;background-image:url('../images/ja/tit_section07_m.png');} :lang(ja) .section07 .slide-main {margin-top:0;} :lang(ja) .section07 .cate-tabs {bottom:-2rem;text-align: center;} :lang(ja) .section07 .tit2 {height:1.48rem;} :lang(ja) .section08 .tit {height:4.25rem; background-image:url('../images/ja/tit_section08_m.png');} :lang(ja) .section08 .title-area {padding:0 0 1rem;} :lang(ja) .section08 .btn {margin-top:1rem;} :lang(ja) .section08 .btn-default {top: 2rem;} :lang(ja) .ost-list .thumb-info .song-btn a.m-start {padding:0;font-size:0.4rem;} :lang(ja) .ico-ost-music {margin-right:0.1rem;} :lang(ja) .popup-regulations li {text-indent: -0.625rem;} } @media screen and (max-height:634px) { :lang(ja) .section08 .title-area {padding: 0 0 0.5rem;} :lang(ja) .section08 .slide-sub .song-tit {padding: 0px 0px 2.6rem;} :lang(ja) .section08 .btn-default {top: 1.5rem} :lang(ja) .section08 .btn-coversong {margin-top:.5rem} :lang(ja) #footer {padding: .5rem 0;} :lang(ja) #footer .copyright {margin: 0 0 0.25rem;} :lang(ja) .footer-menu {padding: 0.25rem 0.5rem 0;} } @media screen and (max-width:375px) { body {font-size:14px;} .app-download {max-width:14rem;} .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;} #footer .game-rating > .ico-gameRating-15 {width:1.5625rem;height:1.5625rem;vertical-align:top;} :lang(en) .section02 .tit {height:1.8875rem;} :lang(en) .section06 .tit {height:2.25rem;} .section07 .ico-scroll {margin-top:1rem;} .section08 .btn {margin:1rem 0 2rem;} :lang(zh-TW) .section07 .tit {height:2.2rem;} :lang(zh-TW) .section08 .fp-tableCell .inner {display:block; padding-top:4rem;} :lang(zh-TW) .section08 .tit {height:1.8rem;} :lang(zh-TW) .section08 .title-area {padding:0 0 0.4rem;} :lang(zh-TW) .section08 .btn-default {top:2rem;} :lang(zh-TW) .slide-wrap {margin-bottom:0.5rem;} :lang(zh-TW) #footer {padding:1rem 0 3rem;} .section08 .slide-sub .song-tit {padding:0 0 3.4rem;} .btn-coversong {width:16.875rem;height:5.816667rem;} .util-links a + a { margin-left: 0.5rem; } } @media screen and (max-width:360px) { html {font-size:15px;} .slide-ost + .swiper-pagination .swiper-button-prev {margin-left: -11.5rem;} .slide-ost + .swiper-pagination .swiper-button-next {margin-left: 9.8rem;} } @media screen and (max-width:320px) { html {font-size:12px;} .slide-ost {width: 22rem;} .slide-ost + .swiper-pagination .swiper-button-prev {margin-left: -13.2rem;} .slide-ost + .swiper-pagination .swiper-button-next {margin-left: 11.2rem;} .slide-cover {width: 16rem} .slide-cover .swiper-slide {width:16rem !important;} .slide-cover + .swiper-pagination .swiper-button-prev {left: -1.5rem;} .slide-cover + .swiper-pagination .swiper-button-next {right: -1.5rem;} } @media screen and (max-width:280px) { .popup-apkInfo {width:96%;} }