@charset "utf-8";

body{background:#000;}
/* .intro-wrap {background:url(../kr/images/intro-nek-bg.jpg) no-repeat 0 0;background-size:100% auto;} */
.btn-page-nav {display:flex; width:100%; height:48px; text-align:center; align-items:center; justify-content:center; font-size:16px; line-height:1.2; font-weight:500; color:#F2C140;background: rgba(0, 0, 0, 0.30); border: 1px solid #808080;   box-sizing:border-box; border-radius:56px; box-shadow: 0px 4px 8px 0px rgba(74, 58, 255, 0.08); }
.btn-page-nav.point {color:#000; background-color:#F2C140;border-color:#F2C140;}

.grid-layout {}
.grid-layout-inner {display:flex; margin:-5px -5px; flex-wrap:wrap;}
.grid-layout-cell {box-sizing:border-box; padding:5px 5px;}

/* 공통 > 아코디언 */
.accordion-cell + .accordion-cell {margin-top:16px;}
.accordion-cell.actived .accordion-header .btn-accordion-menu:after{transform:rotate(-180deg);}
.accordion-cell.actived .accordion-header .accordion-check:after {opacity:1;}
.accordion-content {display:none;}
.accordion-detail {padding:4px 0 0 30px;}
.accordion-detail .txt {font-size:14px; line-height:1.5; font-weight:400; color:rgba(255,255,255,0.80); white-space:pre-line;}
.accordion-detail .txt + .more {margin-top:4px;}
.accordion-detail .more {text-align:right;}
.accordion-detail .more > a,
.accordion-detail .more > button {display:inline-block; font-size:14px; line-height:2.14; font-weight:600; color:#fff; text-decoration: underline;}
.accordion-detail .txt .link {color:#fff; text-decoration: underline;}
.accordion-header {position:relative; min-height:30px; padding-right:30px;}
/*
.accordion-header .btn-accordion-menu {position:relative; padding:0 50px 0 30px; height:30px; display:flex; align-items:center; width:100%; font-size:16px; line-height:1.2; font-weight:600; color:#fff; box-sizing:border-box;}
*/
.accordion-header .btn-accordion-menu {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
.accordion-header .btn-accordion-menu:after {content:''; position:absolute; top:50%;right:0; display:inline-flex; width:21px; height:13px; margin-top:-7px; transition:transform 0.25s ease;background:url(../images/icons/icon-accordion-arrow.png) center center no-repeat; background-size:100% 100%;}
.accordion-header .accordion-check {position:relative;display:inline-flex; min-height:30px; align-items:center; z-index:5;}
.accordion-header .accordion-check .form-checkbox {line-height:1;}
.accordion-header .accordion-check .form-checkbox .form-check-icon {min-width:24px; min-height:24px;}
.accordion-header .accordion-check .form-checkbox .form-check-icon:before {top:0; width:24px; height:24px; border:1px solid #808080;background:rgba(0,0,0,0.3); border-radius:50%;}
.accordion-header .accordion-check .form-checkbox .form-check-icon:after {top:0; width:24px; height:24px; background:url(../images/icons/icon-checkbox-form-star.png) center center no-repeat; background-size:100% 100%;}
.accordion-header .accordion-check .form-checkbox .form-check-icon > em {padding-left:30px; font-size:16px; line-height:1.5; font-weight:600; color:#C9C9C9;}


/*----------------------------------------------------------------------
- 아이콘
-------------------------------------------------------------------------*/
.icon {display:inline-flex; align-items:center; justify-content:center; font-size:0; background-repeat:no-repeat; background-position:center center; background-size:100% auto;}
.icon-page-top {width:56px; height:56px; background-image:url(../images/icons/icon-page-top.png);}
.icon-header-home-on {width:56px; height:56px; background-image:url(../images/icons/icon-header-home-on.png);}
.icon-header-home-off {width:56px; height:56px; background-image:url(../images/icons/icon-header-home-off.png);}
.icon-header-global-on {width:56px; height:56px; background-image:url(../images/icons/icon-header-global-on.png);}
.icon-header-global-off {width:56px; height:56px; background-image:url(../images/icons/icon-header-global-off.png);}
.icon-header-discord-on {width:56px; height:56px; background-image:url(../images/icons/icon-header-discord-on.png);}
.icon-header-discord-off {width:56px; height:56px; background-image:url(../images/icons/icon-header-discord-off.png);}
.icon-header-navercafe-on {width:56px; height:56px; background-image:url(../images/icons/icon-header-navercafe-on.png);}
.icon-header-navercafe-off {width:56px; height:56px; background-image:url(../images/icons/icon-header-navercafe-off.png);}
.icon-skill-play {width:36px; height:36px; background-image:url(../images/icons/icon-skill-play.png);}
.icon-cartoon {width:30px; height:32px; background-image:url(../images/icons/icon-cartoon.png);}
.icon-cartoon-arrow {width:12px; height:12px; background-image:url(../images/icons/icon-cartoon-arrow.png);}

.icon-property-light {width:48px; height:48px; background-image:url(../images/icons/icon-property-light.png);}
.icon-property-darkness {width:48px; height:48px; background-image:url(../images/icons/icon-property-darkness.png);}
.icon-property-lighting {width:48px; height:48px; background-image:url(../images/icons/icon-property-lighting.png);}
.icon-property-land {width:48px; height:48px; background-image:url(../images/icons/icon-property-land.png);}
.icon-property-water {width:48px; height:48px; background-image:url(../images/icons/icon-property-water.png);}
.icon-property-posion {width:48px; height:48px; background-image:url(../images/icons/icon-property-posion.png);}
.icon-property-fire {width:48px; height:48px; background-image:url(../images/icons/icon-property-fire.png);}
.icon-property-blood {width:48px; height:48px; background-image:url(../images/icons/icon-property-blood.png);}
.icon-property-darkness-fire {width:48px; height:48px; background-image:url(../images/icons/icon-property-darkness-fire.png);}
.icon-property-water-light {width:48px; height:48px; background-image:url(../images/icons/icon-property-water-light.png);}

.icon-position-supporter {width:48px; height:48px; background-image:url(../images/icons/icon-position-supporter.png);}
.icon-position-healer {width:48px; height:48px; background-image:url(../images/icons/icon-position-healer.png);}
.icon-position-tanker {width:48px; height:48px; background-image:url(../images/icons/icon-position-tanker.png);}
.icon-position-dealer {width:48px; height:48px; background-image:url(../images/icons/icon-position-dealer.png);}
.icon-monster-boss {width:48px; height:48px; background-image:url(../images/icons/icon-monster-boss.png);}

.inner{ position: relative;width: 100%;max-width: 1280px;margin: 0 auto;padding-left: 24px;padding-right: 24px;}

/* 헤더 */
.header-wrap {position:absolute; top:0;left:0;width:100%;z-index:1500;}
.header-inner {position:relative; z-index:5; width:100%; max-width:1920px; margin:0 auto; box-sizing:border-box; padding:72px 80px 0 80px; display:flex; justify-content:space-between; align-items:center;}
.header-inner h1 {line-height:1;}
.header-inner .btn-header-logo {display:inline-flex; width:256px; height:72px;}
.btn-global-nav {display:inline-flex; position:relative; width:56px; height:56px; border:1px solid #808080; box-sizing:border-box; background:rgba(0,0,0,0.4); border-radius:50%;}
.btn-global-nav :before {content:''; position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:3px; border:1px solid #808080; border-radius:50%; opacity:0.5;}
.btn-global-nav .off {position:absolute; top:0;left:0;width:100%;height:100%;z-index:5;opacity:1;transition:opacity 0.2s ease;}
.btn-global-nav .on {position:absolute; top:0;left:0;width:100%;height:100%;z-index:7;opacity:0;transition:opacity 0.2s ease;}
.btn-global-nav:hover .off {opacity:0;}
.btn-global-nav:hover .on {opacity:1;}
.header-global-menu {display:inline-flex; gap:0 24px;}
.header-language-data {position:relative;}
.header-language-data.actived .header-language-list {transform:translate(-50% , 0px); visibility:visible; opacity:1; transition-delay:0s;}
.header-language-list {position:absolute; top:100%; left:50%; transform:translate(-50% , 20px); visibility:hidden; opacity:0; transition:visibility 0s 0.4s ease, transform 0.4s 0s var(--transition-easeOutQuart), opacity 0.4s 0s ease;}
.header-language-list > ul {position:relative; margin-top:26px; background:rgba(0,0,0,0.4); border:2px solid #808080; padding:7px 5px; border-radius:8px;}
.header-language-list > ul:before{content:'';position:absolute;bottom:100%; left:50%; transform:translate(-50% , 0%); width: 0;height: 0;border-width: 0 7px 15.6px 7px;border-color: transparent transparent rgba(0,0,0,1) transparent;border-style: solid; z-index:1;}
.header-language-list > ul:after{content:'';position:absolute;bottom:100%; left:50%; transform:translate(-50% , 0%); width: 0;height: 0;border-width: 0 9px 19.1px 9px;border-color: transparent transparent #777 transparent;border-style: solid; z-index:0;}
.header-language-list > ul > li {line-height:1;}
.header-language-list > ul > li + li {margin-top:6px;}
.header-language-list > ul > li > a {display:inline-flex; height:30px; width:110px; box-sizing:border-box; padding:0 10px; font-size:18px; align-items:center; color:#fff; font-weight:400; border-radius:5px;transition:background 0.2s ease, color 0.2s ease; white-space:nowrap;}
.header-language-list > ul > li > a:hover {background:#333;}
.header-language-list > ul > li > a.actived {color:#000; font-weight:700; background:#f2c140;}

/* 푸터 */
#footer {position:relative; z-index:100;}
.footer-wrap {position:relative; text-align:center;}
.footer-sns-menu {height:82px; border-bottom:1px solid #2B2B2B;}
.footer-sns-inner {position:relative; width:100%; height:82px;}
.footer-sns-inner:before {content:''; position:absolute;top:0;right:0;width:100%; height:100%; background:#141414;}
.footer-sns-list {position:relative; display:flex; align-items:center; justify-content:center; height:82px; z-index:5;}
.footer-sns-list > li {flex:0 0 auto; margin:0 14px;}
.footer-sns-list .btn-footer-sns {display:block; width:32px; height:32px; font-size:0; background-repeat:no-repeat; background-size:100% 100%; background-position:center center;}
.footer-sns-list .btn-footer-sns.discode {background-image:url(../images/icons/icon-sns-white-discode.png);}
.footer-sns-list .btn-footer-sns.naver {background-image:url(../images/icons/icon-sns-white-naver.png);}
.footer-sns-list .btn-footer-sns.youtube {background-image:url(../images/icons/icon-sns-white-youtube.png);}
.footer-sns-list .btn-footer-sns.twitter {background-image:url(../images/icons/icon-sns-white-twitter.png);}
.footer-sns-list .btn-footer-sns.facebook {background-image:url(../images/icons/icon-sns-white-facebook.png);}
.footer-sns-list .btn-footer-sns.instargram {background-image:url(../images/icons/icon-sns-white-instargram.png);}
.footer-sns-list .btn-footer-sns.bahamet {background-image:url(../images/icons/icon-sns-white-bahamet.png);}
.footer-data {padding:42px 0 80px 0; background:#141414;}
.footer-data .inner {max-width:1180px;}
.footer-language {position:absolute; top:0; right:24px; z-index:5;}
.footer-language .language-selected {position:relative; display:inline-block;}
.footer-language .language-selected select {position:absolute; top:0; left:0;width:100%;height:100%;opacity:0;z-index:15;}
.footer-language .language-selected .icons {flex:0 0 auto;}
.footer-language .language-selected .name {display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 15px; border:1px solid #4E4E4E; box-sizing:border-box;}
.footer-language .language-selected .name > em {display:block; flex:0 0 auto; font-size:14px; color:#ABABAB; min-width:60px; margin:0 10px; text-align:left;}
.footer-language .language-selected .name:before {content:''; display:block;width:24px;height:24px;background:url(../images/icons/icon-footer-language-global.png) center center no-repeat; background-size:100% auto;}
.footer-language .language-selected .name:after {content:''; display:block;width:16px;height:16px;background:url(../images/icons/icon-footer-language-arrow.png) center center no-repeat; background-size:100% auto;}
.footer-menu-list {display:flex; justify-content:center; flex-wrap:wrap; max-width:100%; margin:0 auto;}
.footer-menu-list > li {position:relative; padding:13px 20px; line-height:1;}
.footer-menu-list > li:before {content:'|'; position:absolute;top:0;left:-5px;width:10px;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;}
.footer-menu-list > li:first-child:before {display:none;}
.footer-menu-list > li > a {font-size:16px; line-height:1.5; color:rgba(255,255,255,0.5);}
.footer-menu-list > li > a > strong {font-weight:400; color:rgba(255,255,255,1);}
.footer-address {margin-top:22px;}
.footer-address address {display:flex; justify-content:center; flex-wrap:wrap; width:100%; max-width:980px; margin:0 auto; font-size:14px; color:rgba(255,255,255,0.3);}
.footer-address address > span {position:relative; display:block; padding:0 8px;}
.footer-address address > span:before {content:'|'; position:absolute;top:0;left:-5px;width:10px;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;}
.footer-address address > span:first-child:before,
.footer-address address > span:nth-child(5):before{opacity:0;}
.footer-address address > span a {display:inline-block;}
.footer-limit {margin-top:35px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;}
.footer-limit .footer-limit-img {margin-right:10px;}
.footer-limit-table {width:683px;}
.footer-limit-table table {width:100%; table-layout:fixed; word-break:break-all; text-align:left;}
.footer-limit-table table > tbody > tr > th,
.footer-limit-table table > tbody > tr > td {padding:2px; font-size:12px; line-height:1.5; color:#000; vertical-align:middle; text-align:center; border:1px solid #000; background:#FFFF00;}
.footer-limit-table table > tbody > tr > th {font-weight:600;}
.footer-logo {display:inline-block; width:457px; height:33px; font-size:0; margin-top:50px; background:url(../images/common/footer-logo.png?v=2025073102) center center no-repeat; background-size:100% auto;}
.footer-copy {font-size:12px; color:rgba(255,255,255,0.3); margin-top:18px;}
.footer-logo + .footer-copy {margin-top:35px;}

.effect-data {transform:translate(0% , 40px); opacity:0; transition:transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0.4s ease; will-change:transform;}
.effect-data.actived {transform:scale(1) translate(0% , 0%); opacity:1; transition-delay:0s;}

/*----------------------------------------------------------------------
- 레이어팝업
-------------------------------------------------------------------------*/
.pop-wrap {position:fixed; top:0; left:100%; width:100%; height:100%; z-index:9999; overflow:hidden; transition:left 0s 0.35s ease;}
.pop-wrap.actived {left:0;transition-delay:0s;}
.pop-wrap.actived .cover {opacity:1;}
.pop-wrap.actived .pop-basic-data {transform:scale(1); opacity:1; transition:transform 0.2s 0.05s cubic-bezier(0.250, 0.460, 0.450, 0.940), opacity 0.2s 0s ease;}
.pop-container {position:absolute;top:0;left:0;width:100%;height:100%; overflow-y:scroll;z-index:10;}
.pop-parents {position:relative; display:table; width:100%; height:100%;z-index:5;table-layout:fixed;}
.pop-children {display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; padding:24px;}
.pop-wrap .cover {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6); opacity:0; transition:opacity 0.2s 0s cubic-bezier(0.215, 0.610, 0.355, 1.000);}
.pop-basic-data {position:relative; display:inline-block; transform:scale(0.3); opacity:0; transition:transform 0.2s 0s cubic-bezier(0.250, 0.460, 0.450, 0.940), opacity 0.2s 0s ease; box-sizing:border-box;}


.pop-character-skill {position:relative; width:100%; max-width:960px; margin:0 auto; padding:0;}
.pop-character-skill .video-inner {border:1px solid #ffc445; box-sizing:border-box;}

/* 유튜브 팝업 */
.pop-youtube-view {width:100%;}
.pop-youtube-view .btn-pop-close {position:absolute;top:0;left:100%;width:60px;height:56px;font-size:0;background:url(../images/icons/icon-youtube-pop-close.png) center center no-repeat;background-size:100% 100%; z-index:15; margin-left:10px;}
.pop-youtube-outer {padding:0 30px;}
.pop-youtube-inner {max-width:1280px; margin:0 auto; position:relative;}

.pop-media-view {width:100%;}
.pop-media-view .btn-pop-close {position:absolute;top:0;left:100%;width:60px;height:56px;font-size:0;background:url(../images/icons/icon-youtube-pop-close.png) center center no-repeat;background-size:100% 100%; z-index:15; margin-left:10px;}
.pop-media-outer {padding:0 30px;}
.pop-media-inner {max-width:1280px; margin:0 auto; position:relative;}

.pop-cartoon {width:100%;}
.pop-cartoon-view {position:relative; max-width:636px; margin:0 auto;}
.pop-cartoon-view .btn-pop-close {position:absolute;top:0;left:100%;width:56px;height:56px;font-size:0;background:url(../images/icons/icon-pop-close2.png) center center no-repeat;background-size:100% 100%; z-index:15; margin-left:20px;}

/* 공통 > 팝업 > 쿠키팝업 */
.cookie-accept-wrap {position:fixed; bottom:0; right:0; z-index:2000; visibility:hidden; transform:translate(0% , 0%); transition:visibility 0s 0.4s ease, transform 0s 0.4s ease;}
.cookie-accept-wrap.actived {visibility:visible; transform:translate(0% , 0%); transition-delay:0s;}
.cookie-accept-wrap.actived .cookie-accept-outer {transform:translate(0% , 0%);}
.cookie-accept-outer {position:absolute;bottom:0;right:0;padding:32px; transform:translate(0% , 100%); transition:transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.cookie-accept-inner {width:468px; padding:40px 39px 32px 39px; border-radius: 0px 24px;border: 1px solid rgba(242, 193, 64, 0.80);background: rgba(0, 0, 0, 0.80); box-sizing:border-box;}
.cookie-accept-inner .item-title {display:flex; font-size:20px; line-height:1.4; font-weight:500;color:#fff; align-items:center;}
.cookie-accept-inner .item-title:before {content:''; flex:0 0 auto; display:block; margin-right:8px; width:20px; height:20px; background:url(../images/icons/icon-cookie.png) center center no-repeat; background-size:100% 100%;}
.cookie-accept-inner .item-desc {margin-top:16px; font-size:16px; font-weight:400; line-height:1.87; color:rgba(255,255,255,0.8);}
.cookie-accept-inner .item-more {margin-top:4px; text-align:right;}
.cookie-accept-inner .item-more > button {display:inline-block; font-size:16px; line-height:1.87; font-weight:400; color:#fff; text-decoration: underline;}
.cookie-accept-inner .item-btns {margin-top:16px;}
.cookie-accept-inner .item-btns .grid-layout-inner {margin:0 -8px;}
.cookie-accept-inner .item-btns .grid-layout-cell {width:50%; padding:0 8px;}
.cookie-accept-inner .item-btns .grid-layout-cell:nth-child(3) {width:100%; margin-top:24px;}
.cookie-accept-inner .item-btns .btn-continue {display:block; width:100%; text-align:center; font-size:16px; line-height:1.12; font-weight:400; color:#fff; text-decoration: underline;}

.cookie-detail-wrap {padding-top:60px; text-align:left; }
.cookie-detail-inner {position:relative; max-width:630px; padding:48px 40px 40px 40px; border-radius: 0px 24px;border: 1px solid rgba(242, 193, 64, 0.80);background: rgba(0, 0, 0, 0.80); box-sizing:border-box;}
.btn-cookie-pop-close {position:absolute; bottom:100%; right:0; display:block; font-size:0; width:55px;height:55px;background:url(../images/icons/icon-cookie-pop-close.png) center center no-repeat; background-size:23px auto; z-index:15;}
.cookie-detail-body {}
.cookie-detail-body .title {display:flex; font-size:22px; line-height:1.27; font-weight:600;color:#fff; align-items:center;}
.cookie-detail-body .title:before {content:''; flex:0 0 auto; display:block; margin-right:8px; width:20px; height:20px; background:url(../images/icons/icon-cookie.png) center center no-repeat; background-size:100% 100%;}
.cookie-detail-body .desc {margin-top:16px; font-size:16px; font-weight:400; line-height:1.5; color:rgba(255,255,255,0.8);}
.cookie-detail-body .accordion-list-wrap {margin-top:16px;}
.cookie-detail-ui {margin-top:32px;display:flex; align-items:center; justify-content:center; flex-direction:row-reverse; gap:0 16px;}
.cookie-detail-ui .btn-page-nav {width:186px;}

/*----------------------------------------------------------------------
- 컨텐츠
-------------------------------------------------------------------------*/
.page-ui {position:fixed; bottom:0; right:50%; margin-right:-763px; padding:40px 0;z-index:1500;}
.page-ui.actived .page-ui-cell{opacity:1;}
.page-ui-cell{opacity:0; transition:opacity 0.4s ease;}
.btn-page-top {display:inline-flex; font-size:0; position:relative; width:56px; height:56px; border:1px solid #808080; box-sizing:border-box; background:rgba(0,0,0,0.4); border-radius:50%;}
.btn-page-top > em {position:absolute;top:0;left:0;width:100%;height:100%;z-index:15;display:block;background:url(../images/icons/icon-page-top.png) center center no-repeat; background-size:100% 100%;}
.btn-page-top :before {content:''; position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:3px; border:1px solid #808080; border-radius:50%; opacity:0.5;}


/* 로딩바 */
.sk-circle {margin:0; width:40px;  height:40px;  position: relative; }  .sk-circle .sk-child {    width: 100%;    height: 100%;    position: absolute;    left: 0;    top: 0; }  .sk-circle .sk-child:before {    content: '';    display: block;    margin: 0 auto;    width: 15%;    height: 15%;    background-color: #fff;    border-radius: 100%;    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }  .sk-circle .sk-circle2 {    -webkit-transform: rotate(30deg);        -ms-transform: rotate(30deg);            transform: rotate(30deg); }  .sk-circle .sk-circle3 {    -webkit-transform: rotate(60deg);        -ms-transform: rotate(60deg);            transform: rotate(60deg); }  .sk-circle .sk-circle4 {    -webkit-transform: rotate(90deg);        -ms-transform: rotate(90deg);            transform: rotate(90deg); }  .sk-circle .sk-circle5 {    -webkit-transform: rotate(120deg);        -ms-transform: rotate(120deg);            transform: rotate(120deg); }  .sk-circle .sk-circle6 {    -webkit-transform: rotate(150deg);        -ms-transform: rotate(150deg);            transform: rotate(150deg); }  .sk-circle .sk-circle7 {    -webkit-transform: rotate(180deg);        -ms-transform: rotate(180deg);            transform: rotate(180deg); }  .sk-circle .sk-circle8 {    -webkit-transform: rotate(210deg);        -ms-transform: rotate(210deg);            transform: rotate(210deg); }  .sk-circle .sk-circle9 {    -webkit-transform: rotate(240deg);        -ms-transform: rotate(240deg);            transform: rotate(240deg); }  .sk-circle .sk-circle10 {    -webkit-transform: rotate(270deg);        -ms-transform: rotate(270deg);            transform: rotate(270deg); }  .sk-circle .sk-circle11 {    -webkit-transform: rotate(300deg);        -ms-transform: rotate(300deg);            transform: rotate(300deg); }  .sk-circle .sk-circle12 {    -webkit-transform: rotate(330deg);        -ms-transform: rotate(330deg);            transform: rotate(330deg); }  .sk-circle .sk-circle2:before {    -webkit-animation-delay: -1.1s;            animation-delay: -1.1s; }  .sk-circle .sk-circle3:before {    -webkit-animation-delay: -1s;            animation-delay: -1s; }  .sk-circle .sk-circle4:before {    -webkit-animation-delay: -0.9s;            animation-delay: -0.9s; }  .sk-circle .sk-circle5:before {    -webkit-animation-delay: -0.8s;            animation-delay: -0.8s; }  .sk-circle .sk-circle6:before {    -webkit-animation-delay: -0.7s;            animation-delay: -0.7s; }  .sk-circle .sk-circle7:before {    -webkit-animation-delay: -0.6s;            animation-delay: -0.6s; }  .sk-circle .sk-circle8:before {    -webkit-animation-delay: -0.5s;            animation-delay: -0.5s; }  .sk-circle .sk-circle9:before {    -webkit-animation-delay: -0.4s;            animation-delay: -0.4s; }  .sk-circle .sk-circle10:before {    -webkit-animation-delay: -0.3s;            animation-delay: -0.3s; }  .sk-circle .sk-circle11:before {    -webkit-animation-delay: -0.2s;            animation-delay: -0.2s; }  .sk-circle .sk-circle12:before {    -webkit-animation-delay: -0.1s;            animation-delay: -0.1s; }@-webkit-keyframes sk-circleBounceDelay {  0%, 80%, 100% {    -webkit-transform: scale(0);            transform: scale(0); }  40% {    -webkit-transform: scale(1);            transform: scale(1); } }@keyframes sk-circleBounceDelay {  0%, 80%, 100% {    -webkit-transform: scale(0);            transform: scale(0); }  40% {    -webkit-transform: scale(1);            transform: scale(1); } }

.page-loading {position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999; display:none;}
.page-loading .item {position:absolute;top:0;left:0;display:flex;width:100%;height:100%;align-items:center;justify-content:center; background:rgba(0,0,0,0.5);}
.page-loading .sk-circle {width:60px; height:60px;}
.page-loading.actived {display:block;}

/* swiper.js */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {bottom:auto;}

.swiper-pagination {position:relative; top:auto; bottom:auto; width:100%; display:flex; align-items:center; justify-content:center; text-align:center; transition:none;}
.swiper-pagination .swiper-pagination-bullet {position:relative;display:block; font-size:0; width:16px; height:16px; margin:0; border:none; transition:none; opacity:1; box-sizing:border-box; background:none;}
.swiper-pagination .swiper-pagination-bullet:before {content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:50%;background:url(../images/icons/icon-swiper-pagination-star-off.png) center center no-repeat; background-size:100% 100%; opacity:1; transition:opacity 0.2s ease;}
.swiper-pagination .swiper-pagination-bullet:after {content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:50%;background:url(../images/icons/icon-swiper-pagination-star-on.png) center center no-repeat; background-size:100% 100%; opacity:0; transition:opacity 0.2s ease;}
.swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:9px;}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {opacity:0;}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {opacity:1;}

.swiper-page {display:none; align-items:center; font-size:16px; line-height:1.5; height:32px; color:#808080; letter-spacing:0; white-space:nowrap;}
.swiper-page > em {font-size:18px; color:#f2c140; margin-right:3px; font-weight:400;}

.video-wrap {}
.video-wrap .video-outer {position:relative; padding-top:56.25%;}
.video-wrap .video-inner {position:absolute;top:0;left:0;width:100%;height:100%;background:#000;}
.video-wrap video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.video-wrap iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

body {overflow-y:scroll;}
.intro-wrap {width:100%; height:100vh; max-width:1920px; margin:0 auto; overflow:hidden;}

.intro-visual {position:relative; width:100%; height:auto;}
.intro-visual .desc {position:absolute; top:13.1vh; left:50%; margin-left:-12.7vw; width:23.5vw; z-index:5;}
.intro-visual .desc img {max-width:none; width:100%;}
.intro-visual .headline {position:absolute;top:0%;left:0; width:100%;height:100vh;z-index:5;margin:0;}
.intro-visual .headline .items {position:absolute;top:50%;left:0;margin-top:-28.125vw;}
.intro-visual .headline .obj {position:relative; display:inline-block; width:100%;}
.intro-visual .headline .obj img {max-width:none; width:100%;object-fit: contain;}
.intro-visual .headline .btns {position:absolute;top:59%;left:44%;width:7.65%;height:13.5%;z-index:15;border-radius: 50%;}
.intro-visual .headline .btns .btn-intro-play:before,
.intro-visual .headline .btns .btn-intro-play:after{display: none;}

.intro-visual .visual {position:relative; top:0;left:0;width:100%;height:100%;z-index:0;}
.intro-visual .visual .obj {position:relative; top:0;left:0;width:100%;height:100%;z-index:0;}
.intro-visual .visual img {position:relative; top:0;left:0;width:100%;height:100%;object-fit:cover;}

.intro-visual .visual .btns {position:absolute;top:63.5%;left:70.15%;width:6%;height:11%;z-index:15;}
.intro-visual .visual .btns button{display: block;width:100%;height:100%;border-radius: 50%;background-size:100%;}


.intro-visual .scroller {position:absolute; bottom:0; left:50%; z-index:150;}
.intro-visual .scroller .item-inner {position:absolute; bottom:0; left:0; display:inline-block; padding-bottom:25px; text-align:center; transform:translate(-50% , 0%);}
.intro-visual .scroller .item-inner:after {content:''; position:absolute; bottom:0; left:50%;width:1px;height:34px;background:#b2b2b2; opacity:0.22; }
.intro-visual .scroller .icons {position:relative; display:inline-block; width:20px; height:41px; background:url(../images/contents/intro-scroller-icons_type02.png) center center no-repeat;}
.intro-visual .scroller .icons:before {content:''; position:absolute; top:15px; left:50%;display:block;width:1px;height:9px; margin:0 0 0 -1px; background:#b2b2b2;}
.intro-visual .scroller .txt {font-size:10px; color:#808080; font-weight:400; line-height:1; padding:8px 0 7px 0; white-space:nowrap;}
.intro-visual .scroller .icons:before {animation:scroller 0.6s linear alternate infinite;}

.intro-visual-02 {position:relative; width:100%;}
.intro-visual .visual .obj {position:relative; top:0;left:0;width:100%;height:100%;z-index:0;}
.intro-visual .visual img {position:relative; top:0;left:0;width:100%;height:100%;object-fit:cover;}
/* .intro-visual .visual .btns {position:absolute;top:48.75%;left:48.75%;width:9.1146%;height:16.204%;z-index:15;}
.intro-visual .visual .btns button{display: block;width:100%;height:100%;border-radius: 50%;} */




#container.show .intro-wrap {height:auto;}


@media screen and (min-width:1025px) {
	
	.header-wrap {transform:translate(0px , -200px); transition:transform 0.6s var(--transition-easeOutQuart);}
	#header.actived .header-wrap {transform:translate(0px , 0px); transition-delay:0.8s;}

	.intro-visual .desc {transform:translate(-50px , 0); filter:blur(5px); opacity:0; transition:transform 0.6s var(--transition-easeOutQuart), opacity 0.6s ease, filter 0.6s ease;}
	.intro-visual .headline {transform:translate(100px , 0); filter:blur(10px); opacity:0; transition:transform 0.6s var(--transition-easeOutQuart), opacity 0.6s ease, filter 0.6s ease;}
	.intro-visual .scroller {transform:translate(0px , 0px); transition:transform 0.6s var(--transition-easeOutQuart);}
	.intro-visual .visual {transform:scale(1); opacity:1; transition:transform 1.6s var(--transition-easeInOutCirc), opacity 1.0s ease;}

	#container.actived .intro-visual .visual {transform:scale(1); opacity:1;}
	#container.actived .intro-visual .scroller {transform:translate(0px , 0px); transition-delay:0.8s;}
	#container.actived .intro-visual .desc {transform:translate(0px , 0px); filter:blur(0px); opacity:1; transition-delay:1s;}
	#container.actived .intro-visual .headline {transform:translate(0px , 0px); filter:blur(0px); opacity:1; transition-delay:1s;}



	@keyframes scroller {
		0%{
			transform:translateY(0%);
		}
		100%{
			transform:translateY(10px);
		}
	}
}

.intro-character {position:relative; overflow:hidden;}
.intro-character .character {position:relative; top:0; left:0; width:100%;height:100%; z-index:0;}
.intro-character .character .background {position:relative; top:0;left:0;width:100%;height:100%;z-index:0;}
.intro-character .character .background .obj {position:absolute; top:0;left:0;width:100%;height:100%;z-index:0;}
.intro-character .character .background img {position:relative; top:0;left:0;width:100%;height:100%;object-fit:cover;}
.intro-character .character .visual {position:absolute;top:0;left:0;width:100%;height:100%; z-index:2;}
.intro-character .character .visual .obj {position:absolute;top:0;left:0;width:100%;height:100%;}
.intro-character .character .visual .obj img {max-width:none; position:absolute;top:0%;left:0%;width:100%;height:100%;transform:translate(0% , 0%);}
.intro-character .character .bg {position:relative;top:0;left:0%;width:100%;height:100%; z-index:0; margin-left:-0px;}
.intro-character .character .bg .obj {position:relative;top:0;left:0;width:100%;height:100%;}
.intro-character .character .bg .obj img {position:relative; top:0;left:0;width:100%;height:100%;object-fit:cover;}
.intro-character .data-group {position:relative; margin-left:auto; width:55.56%;}
.intro-character .data-outer {position:relative; width:100%; padding:0 5px; box-sizing:border-box; background:none}
.intro-character .data-inner {padding:0; border-left:none; box-sizing:border-box;}
.intro-character .data-group .data-header {padding-left:23px;}
.intro-character .data-group .data-body {display:flex; margin-top:29px;}
.intro-character .data-group .detail-data,
.intro-character .data-group .detail-weapon {position:relative;flex:1;}
.intro-character .data-group .detail-data {padding-right:40px; border-right:1px solid rgba(255,196,69,0.1); z-index:5;}
.intro-character .data-group .detail-weapon {padding-left:40px;}
.intro-character .cate-data {position:relative; height:48px; display:flex; align-items:center; padding:0 53px; font-size:22px; font-weight:400; color:#fff; background: linear-gradient(90deg, rgba(49,40,54,1) 75%, rgba(49,40,54,0) 100%);}
.intro-character .cate-data .cate-mark {position:absolute; top:50%; left:0; width:56px; height:64px; margin:-32px 0 0 -21px;}
.intro-character .cate-data .cate-mark img {filter:drop-shadow(0px 0px 16px rgba(9,7,7,0.74));}
.intro-character .data-group .detail-data .detail-headline {}
.intro-character .data-group .detail-data .detail-headline:before {content:''; position:absolute; bottom:100%;left:0;display:block;width:100%;height:2px;background: linear-gradient(90deg, rgba(57,47,64,1) 75%, rgba(57,47,64,0) 100%);}
.intro-character .data-group .detail-data .detail-headline .item-info {position:absolute; top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:8px 14px; z-index:5;}
.intro-character .data-group .detail-data .detail-headline .item-visual {}
.intro-character .data-group .detail-data .detail-info {margin-top:25px;}
.intro-character .data-group .detail-weapon {padding-bottom:230px;}
.intro-character .data-group .detail-weapon .detail-headline .item-info {position:absolute; top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:0; z-index:5;}
.intro-character .data-group .detail-weapon .detail-headline .item-visual {position:relative;}
.intro-character .data-group .detail-weapon .detail-headline .item-visual .obj {position:relative; z-index:5;}
.intro-character .data-group .detail-weapon .detail-headline .item-visual .bg {position:absolute; top:50%; left:50%; display:block; width:100%; transform:translate(-50% , -35%); z-index:2; text-align:center; opacity:0.04;}
.intro-character .data-group .detail-weapon .detail-headline .item-visual:after {content:''; position:absolute;top:50%;left:50%;display:block;width:950px;height:950px;transform:translate(-50% , -35%); background: radial-gradient(circle, rgba(45,37,49,1) 0%, rgba(45,37,49,0) 50%); opacity:0.9;}
.intro-character .data-group .detail-weapon .detail-info {margin-top:-15px;}
.intro-character .detail-headline {position:relative;}
.intro-character .detail-headline .item-headline {font-size:26px; line-height:30px; color:#fff;}
.intro-character .detail-headline .item-name {font-size:46px; line-height:52px; font-weight:600; color:#c2aad0; margin-top:2px;}
.intro-character .detail-headline .item-grade {margin-top:5px;}
.intro-character .detail-headline .item-grade .grade-data {display:flex; align-items:center;}
.intro-character .detail-headline .item-grade .grade-unit {position:relative; display:inline-flex; width:18px;height:24px;background:url(../images/icons/icon-grade-star.png) center center no-repeat; background-size:100% 100%; }
.intro-character .detail-headline .item-property {position:absolute; bottom:0; left:0;display:inline-flex;padding:7px 12px; gap:0px 2px;}
.intro-character .detail-info {position:relative; z-index:15;}
.intro-character .detail-info .paragraph + .paragraph {margin-top:30px;}
.intro-character .detail-info .title + .desc {margin-top:4px;}
.intro-character .detail-info .title {font-size:22px; line-height:1.54; font-weight:600; color:#fff;}
.intro-character .detail-info .desc {font-size:18px; line-height:1.67; font-weight:400; color:#fff;}

.intro-character .data-group .data-ui {position:absolute; bottom:0; left:50%; display:flex; padding:45px 36px; gap:0 26px;z-index: 100;}
.intro-character .data-group .btn-data-ui  {padding:6px; border-radius:100px; border:none; white-space:nowrap;}
.intro-character .data-group .btn-data-ui > span {display:inline-flex; padding:0 31px 0 19px; align-items:center; font-size:18px; color:#fff; background:#000; border:none;; box-sizing:border-box; height:64px; border-radius:64px;}
.intro-character .data-group .btn-data-ui .icon {flex:0 0 auto;}
.intro-character .data-group .btn-character-skill .icon:first-child {margin-right:18px;}
.intro-character .data-group .btn-character-cartoon > span {padding:0 26px 0 21px;}
.intro-character .data-group .btn-character-cartoon .icon:first-child {margin-right:15px;}
.intro-character .data-group .btn-character-cartoon .icon:last-child {margin-left:4px;}

.intro-overview {position:relative;}
.intro-overview .data {padding:8.12% 0 0 0; text-align:center; position:absolute; top:0;left:0;width:100%;box-sizing:border-box; z-index:5;}
.intro-overview .headline img {width:44.84%;}
.intro-overview .obj-1 {margin-top:0.25%;}
.intro-overview .obj-1 img {width:100%;}
.intro-overview .obj-2 {margin-top:2.08%;}
.intro-overview .obj-2 img {width:62.5%;}


.intro-event {padding:0; background:none; background-size:cover; text-align:center;}
.intro-event .data {max-width:100%; padding:0; margin:0 auto;}
.intro-event .detail-view {position:relative; overflow:hidden; border-radius:0; margin-top:0;}
.intro-event .detail-view .item-visual {position:relative;width:100%;height:100%;margin:0; z-index:0;}
.intro-event .detail-view .item-visual:before {display: none;content:''; position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:5px;border:1px solid rgba(255,196,69,0.1); border-radius:0px 49px 0px 49px; z-index:1;}
.intro-event .detail-view .item-visual .obj {position:relative; top:0;left:0;width:100%;height:100%; z-index:0;}
.intro-event .detail-view .item-visual .obj img {position:relative;max-width:100%;height:100%;  object-fit:cover;}
.intro-event .detail-view .item-visual .note {position:absolute; bottom:0; right:0; text-align:right; padding:15px 19px; font-size:16px; line-height:1.5; color:#999; z-index:3; text-shadow:-1px -1px 0 rgba(27,26,32,0.3), 1px -1px 0 rgba(27,26,32,0.3), -1px 1px 0 rgba(27,26,32,0.3), 1px 1px 0 rgba(27,26,32,0.3);}
.intro-event .detail-view .item-data {position:relative; display:flex; flex-direction:column; min-height:850px; width:523px; background:rgba(20,20,20,0.89); z-index:5; text-align:left; padding:6px 0 6px 6px;}
.intro-event .detail-view .item-data:before {content:''; position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:auto;height:auto;margin:5px 0px 5px 5px;border:1px solid rgba(255,196,69,0.1); border-right-width:0px; border-radius:0px 0px 0px 49px; z-index:1;}
.intro-event .detail-view .item-header {position:relative; padding:19px 0 18px 29px;background: linear-gradient(90deg, rgba(29,29,33,1) 0%, rgba(29,29,33,0) 100%); z-index:1; flex:0 0 auto;}
.intro-event .detail-view .item-header:before {content:''; position:absolute; top:0;right:39px;z-index:0;width:132px;height:100%;background:url(../images/contents/intro-event-header-unit.png) center bottom no-repeat; opacity:0.03;}
.intro-event .detail-view .item-cate {position:relative;font-size:24px; color:#999; font-weight:400; line-height:28px; z-index:1;}
.intro-event .detail-view .item-title {position:relative;margin-top:3px; font-size:40px; color:#fff; font-weight:500; line-height:48px; z-index:1;}
.intro-event .detail-view .item-body {position:relative; z-index:1; flex:1; padding:24px 40px 24px 29px;}
.intro-event .detail-view .item-desc {font-size:18px; line-height:30px; color:#fff; font-weight:400;}
.intro-event .detail-view .item-footer {position:relative; z-index:1; flex:1; flex:0 0 auto; margin-top:auto; border-top:1px solid rgba(255,196,69,0.1); padding:17px 34px 36px 23px;}
.intro-event .detail-view .benefit-title {font-size:22px; font-weight:600; color:#fff; margin-bottom:7px;}
.intro-event .event-contents .detail-view .item-info-visual {margin-top:60px; padding-left:11px;}
.intro-event .event-season {margin-top:0;}
.intro-event .obj-season {padding:9.5% 0 0 0;}

.intro-update {padding:0; background:#ece3d2;}
.intro-update .title {text-align:center;}
.intro-update .title img{width:100%;}
.intro-update .desc {margin-top:176px; text-align:center; font-size:20px;line-height:30px;color:#644a2f; font-weight:400;}
.intro-update .desc em {font-weight:700;}
.intro-update .list {max-width:1518px; padding:0 30px; margin:59px auto 0 auto;}
.intro-update .list-items + .list-items {margin-top:72px;}
.intro-update .list-items .visual {margin-left:-17px;}
.intro-update .list-items .item-visual {border-radius:26px 26px 0px 0px; overflow:hidden;}
.intro-update .list-items .item-data {border-radius:0px 0px 0px 26px; background:rgba(100,74,47,0.6); position:relative; padding:54px 64px;}
.intro-update .list-items .item-data:before {content:''; position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:auto;height:auto;margin:6px;border:1px solid rgba(127,105,80,0.33); border-radius:0px 0px 0px 20px; z-index:1;}
.intro-update .list-items .item-title {position:absolute; top:0;left:0;display:inline-flex; align-items:center; padding:6px 40px 6px 70px; min-height:64px; box-sizing:border-box; background:#644a2f; border-radius:0px 32px 32px 0px; box-shadow:0px 2px 7px rgba(0,0,0,0.35); margin:-32px 0 0 -10px; z-index:15;}
.intro-update .list-items .item-title:before {content:'';position:absolute;top:22px;left:22px;display:block;width:20px;height:20px;background:url(../images/icons/icon-update-title-unit.png) center center no-repeat; background-size:100% 100%;}
.intro-update .list-items .item-title > em {font-size:40px; font-weight:500; color:#fff; line-height:1.2;}
.intro-update .list-items .item-desc {position:relative; font-size:22px; line-height:30px; color:#fff; font-weight:400; z-index:5;}
.intro-update .list-items .item-desc .paint {display:inline-block; background:#ece3d2; font-weight:700;color:#644a2f; line-height:1; vertical-align:baseline;}


@media screen and (min-width:1921px) {
	.intro-visual .desc {top:13.1vh;  margin-left:-246px; width:452px; z-index:5;}
	.intro-visual .headline { top:0; bottom:auto;margin-left:0px; width:100%; z-index:5;}
	.intro-character .character .visual .obj img {width:100%; }
}

@media screen and (max-width:1800px) {	
	.intro-character .data-group .data-ui {padding:45px 24px; gap:0 12px;}

}

@media screen and (max-width:1600px) {	
	.header-inner {padding:40px 30px 0 30px;}

	.intro-character .detail-headline .item-headline {font-size:18px; line-height:1.2;}
	.intro-character .detail-headline .item-name {font-size:32px; line-height:1.2; margin-top:0;}
	.intro-character .detail-headline .item-grade {margin-top:5px;}
	.intro-character .detail-headline .item-property .icon {width:36px; height:36px;}

	.intro-character .data-group .btn-data-ui  {padding:3px;}
	.intro-character .data-group .btn-data-ui > span {padding:0 15px 0 10px; font-size:14px; height:32px;}
	.intro-character .data-group .btn-character-skill .icon:first-child {margin-right:9px; width:18px; height:18px;}
	.intro-character .data-group .btn-character-cartoon > span {padding:0 13px 0 10px;}
	.intro-character .data-group .btn-character-cartoon .icon:first-child {margin-right:7px;  width:18px; height:18px;}
	.intro-character .data-group .btn-character-cartoon .icon:last-child {margin-left:2px; width:6px; height:6px;}

}

@media screen and (max-width:1580px) {	
	.page-ui {right:30px; margin:0;}
}
@media screen and (max-width:1500px) {	
	.pop-youtube-inner {max-width:1080px;}
	.pop-media-inner {max-width:1080px;}
}

@media screen and (max-width:1400px) {	
	.intro-character .data-inner {padding:40px 24px}
	.intro-character .data-group .detail-data {padding-right:24px;}
	.intro-character .data-group .detail-weapon {padding-left:24px; padding-bottom:150px;}

	.intro-character .detail-info .paragraph + .paragraph {margin-top:20px;}
	.intro-character .detail-info .title + .desc {margin-top:4px;}
	.intro-character .detail-info .title {font-size:18px; line-height:1.5;}
	.intro-character .detail-info .desc {font-size:14px; line-height:1.5; }

	.intro-character .data-group .detail-data .detail-headline .item-info {position:relative; top:auto;left:auto; width:auto; height:auto;}	
	.intro-character .data-group .detail-data .detail-headline .item-visual {position:absolute;top:0;left:0;width:100%;height:100%;}
	.intro-character .data-group .detail-data .detail-headline .item-visual img {position:absolute;top:0;left:0;width:100%;height:100%; object-fit:cover;}
	.intro-character .detail-headline .item-property {padding:0; position:relative; bottom:auto;left:auto;margin-top:32px;}

}

@media screen and (max-width:1366px) {	
	.intro-event .detail-view .item-data {min-height:0; width:420px;}
	.intro-event .event-season .detail-view .item-data {min-height:789px;}
}
@media screen and (max-width:1328px) {	
	.inner {box-sizing:border-box;}
}
@media screen and (max-width:1280px) {	
	.pop-youtube-inner {max-width:720px;}
	.pop-media-inner {max-width:720px;}

}

@media screen and (min-width:320px) and (max-width:1024px) {
	.header-wrap {transform:translate(0px , -200px); transition:transform 0.6s var(--transition-easeOutQuart);}
	#header.actived .header-wrap {transform:translate(0px , 0px); transition-delay:0.8s;}

	.intro-visual .desc {transform:translate(50px , 0); filter:blur(5px); opacity:0; transition:transform 0.6s var(--transition-easeOutQuart), opacity 0.6s ease, filter 0.6s ease;}
	.intro-visual .headline {transform:translate(0px , 10px); filter:blur(10px); opacity:0; transition:transform 0.6s var(--transition-easeOutQuart), opacity 0.6s ease, filter 0.6s ease;}
	.intro-visual .scroller {transform:translate(0px , 0px); transition:transform 0.6s var(--transition-easeOutQuart);}
	.intro-visual .visual {transform:scale(1); opacity:1; transition:transform 1.6s var(--transition-easeInOutCirc), opacity 1.0s ease;}

	#container.actived .intro-visual .visual {transform:scale(1); opacity:1;}
	#container.actived .intro-visual .scroller {transform:translate(0px , 0px); transition-delay:0.8s;}
	#container.actived .intro-visual .headline {transform:translate(0px , 0px); filter:blur(0px); opacity:1; transition-delay:1s;}
	#container.actived .intro-visual .desc {transform:translate(0px , 0px); filter:blur(0px); opacity:1; transition-delay:1s;}
}

@media screen and (max-width:1024px) {

	/* 공통 > 아코디언 */
	.accordion-cell + .accordion-cell {margin-top:12px;}
	.accordion-header .btn-accordion-menu {padding:0 30px; min-height:30px; height:auto; font-size:16px; line-height:1.87; text-align:left;}

	.inner{ padding-left: 20px;padding-right: 20px;}

	.page-ui {right:20px; bottom:20px; padding:0;}
	.page-ui.actived .page-ui-cell{opacity:1;}
	.page-ui-cell{opacity:0; transition:opacity 0.4s ease;}
	.btn-page-top {width:38px; height:38px;}
	.btn-page-top > em {}
	.btn-page-top :before {margin:2px;}

	
	.pop-youtube-outer {padding:0;}
	.pop-youtube-view .btn-pop-close {margin:0 -24px 0 0; left:auto; right:0; top:auto; bottom:100%;}
	
	.pop-media-outer {padding:0;}
	.pop-media-view .btn-pop-close {margin:0 -24px 0 0; left:auto; right:0; top:auto; bottom:100%;}

	.pop-cartoon-view {padding-top:54px;}
	.pop-cartoon-view .btn-pop-close {top:0; left:auto;right:0;width:39px;height:39px;margin-left:0px;}
	
	.cookie-accept-outer {padding:20px; width:100vw; box-sizing:border-box;}
	.cookie-accept-inner {width:100%; padding:24px 24px 16px 24px;}
	.cookie-accept-inner .item-title {font-size:16px; line-height:1.75;}
	.cookie-accept-inner .item-title:before {margin-right:6px; width:16px; height:16px;}
	.cookie-accept-inner .item-desc {margin-top:8px; font-size:14px; line-height:1.71;}
	.cookie-accept-inner .item-more {margin-top:0px;}
	.cookie-accept-inner .item-more > button {font-size:14px; line-height:1.71;}
	.cookie-accept-inner .item-btns {margin-top:16px;}
	.cookie-accept-inner .item-btns .grid-layout-inner {margin:0; display:block;}
	.cookie-accept-inner .item-btns .grid-layout-cell {width:100%; padding:0;}
	.cookie-accept-inner .item-btns .grid-layout-cell + .grid-layout-cell {margin-top:16px;}
	.cookie-accept-inner .item-btns .grid-layout-cell:nth-child(3) {margin-top:12px;}
	.cookie-accept-inner .item-btns .btn-continue {font-size:14px; line-height:1.71;}
	
	.cookie-detail-wrap {padding-top:47px; text-align:left; }
	.cookie-detail-inner {padding:24px;}
	.btn-cookie-pop-close {width:47px;height:47px;}
	.cookie-detail-body .title {font-size:16px; line-height:1.75;}
	.cookie-detail-body .title:before {margin-right:6px; width:16px; height:16px;}
	.cookie-detail-body .desc {margin-top:12px; font-size:14px; line-height:1.71;}
	.cookie-detail-body .accordion-list-wrap {margin-top:12px;}
	.cookie-detail-ui {margin-top:24px;display:block; gap:0;}
	.cookie-detail-ui .btn-page-nav {width:100%;}
	.cookie-detail-ui .btn-page-nav + .btn-page-nav {margin-top:16px;}

	/* 헤더 */
	.header-wrap:after {content:'';position:absolute; top:0;left:0;width:100%;height:100px;background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);}
	.header-inner {padding:31px 20px 0 20px;}
	.header-inner .btn-header-logo {width:110px; height:34px;}
	.btn-global-nav {width:38px; height:38px;}
	.header-language-list {position:absolute; top:100%; left:50%; transform:translate(-50% , 20px); visibility:hidden; opacity:0; transition:visibility 0s 0.4s ease, transform 0.4s 0s var(--transition-easeOutQuart), opacity 0.4s 0s ease;}
	.header-language-list > ul {margin-top:18px; background:rgba(0,0,0,0.4); border:1px solid #808080; padding:5px 3px; border-radius:5px;}
	.header-language-list > ul:before{border-width: 0 3.5px 9.5px 3.5px;}
	.header-language-list > ul:after{border-width: 0 4.5px 11.3px 4.5px;}

	.header-language-list > ul > li + li {margin-top:4px;}
	.header-language-list > ul > li > a {height:21px; width:77px; padding:0 8px; font-size:12px; background:#333;}

		
	/* 푸터 */
	.footer-wrap {}
	.footer-sns-menu {height:75px;}
	.footer-sns-inner {height:75px;}
	.footer-sns-list {height:75px;}
	.footer-data {padding:36px 0 64px 0;}
	.footer-language {position:relative; top:auto; right:auto;}
	.footer-menu {margin-top:28px;}
	.footer-menu-list {max-width:400px;}
	.footer-menu-list > li {padding:8px 20px;}
	.footer-menu-list > li:nth-child(1):before,
	.footer-menu-list > li:nth-child(4):before {display:none;}

	.footer-address {margin-top:28px;}
	.footer-address address {max-width:720px;}
	.footer-address address > span:first-child:before,
	.footer-address address > span:nth-child(5):before{opacity:1;}
	.footer-address address > span:nth-child(1):before,
	.footer-address address > span:nth-child(4):before,
	.footer-address address > span:nth-child(7):before{opacity:0;}	
	
	.footer-limit {margin-top:18px; display:block; width:100%;}
	.footer-limit .footer-limit-img {margin-right:0px; margin-bottom:18px;}
	.footer-limit-table {width:100%; max-width:583px; margin:0 auto;}


	.footer-sns-menu {height:58px;}
	.footer-sns-inner {height:58px;}
	.footer-sns-inner:before {width:100%; clip-path:none;}
	.footer-sns-list {height:58px;}	

	.footer-sns-list > li {margin:0 11px;}
	.footer-sns-list .btn-footer-sns {width:26px; height:26px;}
	.footer-data {padding:24px 0;}
	.footer-menu {margin-top:18px;}
	.footer-menu-list {max-width:320px;}
	.footer-menu-list > li {padding:0;}
	.footer-menu-list > li > a {display:block; padding:6px 16px; font-size:14px;}
	
	.footer-address {margin-top:24px;}
	.footer-address address {max-width:900px; font-size:12px; line-height:1.8;}
	.footer-address address > span {display:block; padding:0; width:100%;}
	.footer-address address > span:before {display:none;}
	.footer-limit {margin-top:35px;}
	.footer-limit .footer-limit-img {margin-bottom:10px;}
	.footer-limit .footer-limit-img img {width:128px;}
	.footer-limit-table {width:310px;}
	.footer-limit-table table > colgroup .col-1 {width:18%;}
	.footer-limit-table table > colgroup .col-3 {width:18%;}
	.footer-limit-table table > colgroup .col-2 {width:32%;}
	.footer-limit-table table > colgroup .col-4 {width:32%;}
	.footer-limit-table table > tbody > tr > th,
	.footer-limit-table table > tbody > tr > td {padding:1px 5px; font-size:7px;}
	.footer-limit-table table > tbody > tr > td {text-align:left;}
	.footer-limit-table table > tbody > tr > th {padding:1px 0;}
	.footer-logo {width:250px; height:19px; margin-top:24px; background:url(../images/common/footer-logo-m.png?v=2025073102) center center no-repeat; background-size:100% auto;}
	.footer-logo + .footer-copy {margin-top:24px;}
	.footer-copy {margin-top:24px;}
	
	.intro-visual {height:auto;}
	.intro-visual .visual .obj {position: relative;height:auto;}
	.intro-visual .visual img{position: relative;}
	.intro-visual .visual .btns {position: absolute;position: absolute;top:79.5%;left:73.5%;width:17%;height:8.5%;}
	.intro-visual .visual .btns button{display: block;position: absolute;top:0;left:0;width:100%;height:100%;background-size:100%;}
	.intro-visual .scroller .item-inner {padding-bottom:26px;}
	.intro-visual .scroller .item-inner:after {display:none;}
	.intro-visual .scroller .icons {width:33px; height:34px; background:url(../images/contents/intro-scroller-icons-m.png) center center no-repeat; background-size:100% 100%;}
	.intro-visual .scroller .icons:before {display:none;}
	.intro-visual .scroller .txt {display:none;}


	.intro-visual-02 {position:relative; width:100%;}
	.intro-visual-02 .bg {position: relative;width:100%;}
	.intro-visual-02 .obj img{width:100%;}

	.intro-visual-03 {position:relative; width:100%;}
	.intro-visual-03 .bg {position: relative;width:100%;}
	.intro-visual-03 .obj img{width:100%;}
	.intro-character {background:url(../images/contents/intro-aurora-event-bg-m.jpg) center bottom no-repeat; background-size:cover;}
	.intro-character .character {width:100%; height:100%; z-index:0;}
	.intro-character .character .background {position:absolute; top:0;left:0;width:100%;height:100%;z-index:0;}
	
	.intro-character .character .background .obj {position:relative; top:auto;left:auto;width:auto;height:auto; padding-top:0;}/*  padding-top:199.72%; */
	.intro-character .character .visual {position: relative;}
	.intro-character .character .visual .obj {position:relative; top:auto;left:auto;width:auto;height:auto; padding:99.35% 0 10% 0;}
	.intro-character .character .visual .obj img {position: relative;width:100%; height:auto;transform:translate(0% , 0%);}
	.intro-character .character .bg {position:relative;top:0;left:0;width:100%;height:100%; z-index:0; margin-left:0;}
	.intro-character .character .bg .obj {position:relative; top:auto;left:auto;width:auto;height:auto; padding-top:0;}
	.intro-character .data-group {position:relative; margin-top:100%; width:100%; padding:0 20px 77px 20px; box-sizing:border-box;}
	.intro-character .data-outer {padding:4px; box-sizing:border-box; border-radius:0px 0px 0px 24px;}
	.intro-character .data-inner {padding:15px 14px 99px 14px;  border-radius:0px 0px 0px 20px; border:1px solid rgba(255,196,69,0.1); box-sizing:border-box;}

	.intro-character .data-group .data-header {padding-left:11px;}
	.intro-character .data-group .data-body {display:block; margin-top:11px;}
	.intro-character .data-group .detail-data {padding-right:0; border:none;}
	.intro-character .data-group .detail-weapon {padding:0; margin-top:87px;  border-top:1px solid rgba(255,196,69,0.1);}
	.intro-character .cate-data {height:33px; padding:0 34px; font-size:16px;}
	.intro-character .cate-data .cate-mark {width:38px; height:43px; margin:-21px 0 0 -16px;}
	.intro-character .data-group .detail-data .detail-headline .item-info {position:absolute; top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:6px 8px; z-index:5;}
	.intro-character .data-group .detail-data .detail-headline .item-visual {position:relative; top:auto; left:auto; width:auto; height:auto;}
	.intro-character .data-group .detail-data .detail-headline .item-visual img {position:relative;top:auto;left:auto;width:auto;height:auto; object-fit:contain;}
	.intro-character .data-group .detail-data .detail-info {margin-top:13px;}
	.intro-character .detail-headline .item-headline {font-size:18px; line-height:20px;}
	.intro-character .detail-headline .item-name {font-size:32px; line-height:37px; margin-top:1px;}
	.intro-character .detail-headline .item-grade {margin-top:5px;}
	.intro-character .detail-headline .item-grade .grade-data {}
	.intro-character .detail-headline .item-grade .grade-unit {width:12px;height:16px;}
	.intro-character .detail-headline .item-property {padding:0; gap:0px 2px; margin:6px 0 0 -3px; position:relative; bottom:auto; left:auto;}
	.intro-character .detail-headline .item-property .icon {width:32px; height:32px;}
	.intro-character .detail-info .paragraph + .paragraph {margin-top:30px;}
	.intro-character .detail-info .title + .desc {margin-top:5px;}
	.intro-character .detail-info .title {font-size:16px; line-height:22px;}
	.intro-character .detail-info .desc {font-size:14px; line-height:20px; font-weight:300;}
	.intro-character .data-group .data-ui {position:absolute; bottom:100%; left:0; padding:0; gap:0 15px; margin-bottom:22px;}

	.intro-character .data-group .detail-weapon .detail-headline .item-info {position:relative; top:auto;left:auto;width:auto;height:auto; padding:0;}
	.intro-character .data-group .detail-weapon .detail-headline .item-visual {position:relative;}
	.intro-character .data-group .detail-weapon .detail-headline .item-visual .obj {position:relative; z-index:5;}
	.intro-character .data-group .detail-weapon .detail-headline .item-visual .obj img {max-width:none; width:100%;}
	.intro-character .data-group .detail-weapon .detail-headline .item-visual .bg {position:absolute; top:50%; left:50%; display:inline-block; width:240.78%; transform:translate(-50% , -50%); opacity:1;}
	.intro-character .data-group .detail-weapon .detail-headline .item-visual:after {display:none;}
	.intro-character .data-group .detail-weapon .detail-info {margin-top:13px;}
	.intro-character .data-group .btn-data-ui  {padding:3px;}
	.intro-character .data-group .btn-data-ui > span {padding:0; width:88px; height:36px; font-size:12px; justify-content:center;}
	.intro-character .data-group .btn-character-skill .icon:first-child {display:none;}
	.intro-character .data-group .btn-character-cartoon > span {padding:0;}
	.intro-character .data-group .btn-character-cartoon .icon:first-child {display:none;}
	.intro-character .data-group .btn-character-cartoon .icon:last-child {margin-left:3px;}


	.intro-overview .data {padding:13.5% 0 0 0;}
	.intro-overview .headline img {width:100%; max-width:none;}
	.intro-overview .obj-1 {margin-top:0%;}
	.intro-overview .obj-1 img {width:100%; max-width:none;}
	.intro-overview .obj-2 {margin-top:2.5%;}
	.intro-overview .obj-2 img {width:100%; max-width:none;}
	.intro-overview .background img {max-width:none; width:100%;}
	
	.intro-event {padding:0; background:url(../images/contents/intro-aurora-event-bg-m.jpg) center center no-repeat; background-size:cover;}
	.intro-event .title img {width:360px;}
	.intro-event .data {padding:0;}
	.intro-event .detail-view {border-radius:0px; margin-top:0;}
	.intro-event .detail-view .item-visual {position:relative; top:auto;left:auto;width:auto;height:auto; border-radius:0px; margin:0;overflow:hidden;}
	.intro-event .detail-view .item-visual:before {margin:4px 4px 0px 4px; border:1px solid rgba(255,196,69,0.1); border-bottom:none; border-radius:0px 20px 0px 0px; z-index:1;}
	.intro-event .detail-view .item-visual .obj {position:relative; top:auto;left:auto;width:100%;height:auto; z-index:0;}
	.intro-event .detail-view .item-visual .obj img {position:relative; top:auto;left:auto;height:auto;  object-fit:contain;width:100%; max-width:100%;}
	.intro-event .detail-view .item-visual .note {right:auto; left:0;text-align:left; padding:12px 17px; font-size:12px;}

	.intro-event .detail-view .item-data {display:block; min-height:0px; width:100%; padding:4px; box-sizing:border-box; border-radius:0px 0px 0px 24px;}
	.intro-event .detail-view .item-data:before {margin:4px; border:1px solid rgba(255,196,69,0.1); border-radius:0px 0px 0px 20px;}
	.intro-event .detail-view .item-header {padding:9px 0 10px 13px;}
	.intro-event .detail-view .item-header:before {right:15px;width:75px; background-size:100% auto; opacity:0.03;}
	.intro-event .detail-view .item-cate {font-size:16px; line-height:20px;}
	.intro-event .detail-view .item-title {margin-top:1px; font-size:22px; line-height:26px;}
	.intro-event .detail-view .item-body {padding:10px 13px;}
	.intro-event .detail-view .item-desc {font-size:14px; line-height:20px; font-weight:300;}
	.intro-event .detail-view .item-footer {margin-top:37px; padding:8px 12px 15px 12px;}
	.intro-event .detail-view .benefit-title {font-size:14px; line-height:20px; margin-bottom:6px;}
	.intro-event .event-contents .detail-view .item-info-visual {margin-top:68px; padding:0 0 69px 0;}
	.intro-event .event-season {margin-top:0;}
	.intro-event .event-season .detail-view .item-data {min-height:0;}
	.intro-event .event-season .benefit-visual img{width:202px;}
	.intro-event .event-contents .benefit-visual img{width:275px;}
	.intro-event .event-contents .detail-view .item-info-visual img{width:284px;}
	
	.intro-update {padding:0px;}
	.intro-update .desc {margin-top:50px; text-align:center; padding:0 50px; font-size:14px;line-height:18px;}
	.intro-update .list {padding:0; margin:47px auto 0 auto;}
	.intro-update .list-items + .list-items {margin-top:39px;}
	.intro-update .list-items .visual {margin-left:0;}
	.intro-update .list-items .visual img {width:100%; max-width:none;}


}




@media screen and (max-width:1024px) and (orientation:landscape) {
	.intro-visual {height:auto; padding-top:0;}
	.intro-visual .visual .obj {position: relative;height:auto;}
	.intro-visual .visual img {position: relative;height:auto;}
}




#deviceLandscape {position:fixed; top:0; right:0; bottom:0; left:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); z-index:999999999; touch-action:none;}
#deviceLandscape .view {display:flex; width:100%; align-items:center; justify-content:center; min-height:70px; box-sizing:border-box; background:rgba(0,0,0,0.7); padding:16px 32px;}
#deviceLandscape .view .icon {flex:0 0 auto; margin-right:12px;}
#deviceLandscape .view .txt {font-size:14px; line-height:1.5; color:#fff;}

@media (orientation: landscape) and (max-width:1023px) and (max-height:480px) {
	#deviceLandscape {display:flex;}
}