@charset "UTF-8";

/* reset */
html, body, div, p, span, a, h1, h2, h3, h4, h5, h6, input, label { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; border: 0 none; outline: none; width: 100%; height: auto; }
img.on { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .3s ease; }
a { display: block; color: inherit; text-decoration: none; cursor: pointer; }
input {-webkit-appearance: none;}
body { background-color: black; }

/* lang */
body.kr .en { display: none !important; }
body.en .kr { display: none !important; }

/* wrap */
.wrap { position: relative; width: 100%; height: 100vh; }

/* header */
.header { position: fixed; display: flex; justify-content: space-between; align-items: center; top: 0; left: 0; width: 100%; height: 60px; padding: 0 30px; background-color: #0b0a0b; z-index: 100; }
.header .btn-menu-wrap { height: 31px; margin-left: 24px; }
.header .btn-menu-wrap a { width: auto; height: 100%; }
.header .right-wrap { position: relative; display: flex; justify-content: flex-end; align-items: center; }
/* sns */
.header .sns-wrap { display: flex; justify-content: center; align-items: center; height: 22px; }
.header .sns-wrap a { position: relative; margin: 0 17px; }
.header .sns-wrap a img { width: auto; height: 100%; transition: opacity .3s ease; }
.header .sns-wrap a:hover img { opacity: 0; }
.header .sns-wrap a:hover img.on { opacity: 1; }
.header .lang-wrap { position: relative; margin: 0 13px 0 5px; width: 76px; }
.header .lang-wrap a img { transition: opacity .3s ease; }
.header .lang-wrap a:hover img { opacity: 0; }
.header .lang-wrap a:hover img.on { opacity: 1; }
.header .lang-wrap a.btn-lang { position: relative; width: 51px; margin: 0 11px 0 14px; }
.header .lang-wrap .lang-list { position: absolute; top: 0; left: 0; width: 100%; height: 17px; overflow: hidden; transition: height .5s ease; z-index: 10; }
.header .lang-wrap .lang-list:before { content: ''; display: block; width: 100%; height: 36px; background-color: transparent; }
.header .lang-wrap .lang-list:hover { height: 130px; }
.header .lang-wrap .lang-list:hover+a.btn-lang img { opacity: 0; }
.header .lang-wrap .lang-list:hover+a.btn-lang img.on { opacity: 1; }
.header .lang-wrap .lang-list a { position: relative; width: 100%; height: 47px; padding: 18px 23px 14px; background-color: #0b0a0b; }
.header .lang-wrap .lang-list a:last-child { padding: 14px 23px 18px; }
.header .lang-wrap .lang-list a img { width: auto; height: 15px; }
.header .lang-wrap .lang-list a img.on { top: 18px; left: 23px; }
.header .lang-wrap .lang-list a:last-child img.on { top: 14px; }

/* gnb */
.gnb-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 200; visibility: hidden; transition: visibility .5s ease; }
.gnb-wrap .dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0; transition: opacity .5s ease; }
.gnb-wrap .btn-close { position: absolute; top: -60px; left: 428px; width: 46px; height: 46px; transition: top .5s ease; }
.gnb { position: absolute; top: 0; left: -420px; width: 417px; height: 100%; padding-right: 13px; background: url(../../img/gnb-bg.png) 0 0 repeat-y; transition: left .5s ease; }
.gnb { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.gnb .title { width: 325px; margin-bottom: 17px; }
.gnb .title img { width: 100%; height: auto; }
.gnb .menu { position: relative; margin-bottom: 12px; padding-left: 10px; }
.gnb .menu img { width: 197px; height: auto; }
.gnb .menu .on { left: 10px; }
.gnb .menu:hover .on,
.gnb .menu.active .on { opacity: 1; }
.gnb-wrap.opened { visibility: visible; }
.gnb-wrap.opened .dim { opacity: .8; }
.gnb-wrap.opened .btn-close { top: 8px; }
.gnb-wrap.opened .gnb { left: 0; }

/* snb */
.snb-wrap { position: fixed; top: 60px; right: 0; width: 0; height: calc(100vh - 60px); z-index: 60; }
.snb { position: absolute; top: 50%; right: 0; margin-right: 42px; width: 24vh; min-width: 179px; height: 74vh; min-height: 550px; background: url(../../img/snb-bg.png) 0 0 no-repeat; background-size: 100% 100%; transform: translateY(-50%); transition: left .5s ease; }
.snb { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.snb .menu { position: relative; margin-left: 5%; margin-bottom: 4.8%; width: 78.8%; }
.snb .menu:first-child { margin-top: 28%; }
.snb .menu img { width: 100%; height: auto; }
.snb .menu:hover img.on,
.snb .menu.active img.on { opacity: 1; }

/* section */
.fullpage { z-index: 50; }
.section { background-size: cover; background-position: 50% 50%; }
.section .inner { position: relative; width: 100%; height: 100vh; min-height: 720px; padding-top: 60px; }
.section .content-wrap { position: absolute; top: calc(50% + 60px); left: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); z-index: 70; }

/* home */
.section.home .content-wrap { top: 58.6275%; width: 87.3148vh; min-width: 681px; height: 63.7963vh; min-height: 498px; }
.section.home .content { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.section.home .content .title { margin-bottom: 9.4380%; }
.section.home .content .slogan { position: relative; width: 59.8091%; height: 0; padding-bottom: 7.4231%; }
.section.home .content a.btn-register { position: relative; margin: 1.8028% 0 5.0901%; width: 64.6872%; }
.section.home .content a.btn-register:hover .on { opacity: 1; }
.section.home .content .arrow-down { width: 6.6808%; animation: bounce 1s ease-in-out infinite; }

.floating-banner { position: fixed; width: 15.3704vh; min-width: 110px; top: 18.3333vh; left: 39px; z-index: 100; }
.floating-banner a { position: absolute; top: 10%; left: 7%; width: 93%; height: 90%; }
.floating-banner a.btn-close { top: -2%; left: auto; right: -2%; width: 15%; height: 11%; }

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(30%); }
    100% { transform: translateY(0); }
}

/* glitch */
.slogan img { position: absolute; transition: clip .1s ease; }

/* video */
.section.home .home-video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.section.home .home-video { width: 100%; height: 100%; object-fit: cover; opacity: .5; }

/* register */
.section.register { background-image: url(../../img/register-bg.jpg); }
.section.register .content-wrap { top: calc(51.3889% + 60px); width: 88.7963vh; min-width: 98px; height: 65.9259vh; min-height: 62px; background: url(../../img/register-board.png) 50% 50% no-repeat; background-size: 100% 100%; }
.section.register .content-wrap .btn-register { position: absolute; top: 64.0449%; left: 50%; width: 64.1293%; transform: translateX(-50%); }
.section.register .content a.btn-register:hover .on { opacity: 1; }
body.en .section.register .content-wrap { background-image: url(../../img/en/register-board.png); }

/* reward */
.section.reward .inner:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 720px; background-image: url(../../img/reward-bg.jpg); background-size: auto 100%; background-position: 50% 50%; z-index: 0; }
.section.reward .content-wrap { top: 52.5000%; width: 94.8148vh; min-width: 682px; height: 34.2593vh; min-height: 246px; }
.section.reward .reward-wrap { display: flex; justify-content: space-between; width: 100%; }
.section.reward .reward-wrap div[class^='reward'] { position: relative; width: 19.7266%; }
.section.reward .reward-wrap div[class^='reward'].active .on { opacity: 1; }
body.en .section.reward .inner:before { background-image: url(../../img/en/reward-bg.jpg); }

/* character */
.section.character .inner:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 720px; background-image: url(../../img/character-bg.jpg); background-size: auto 100%; background-position: 50% 50%; z-index: 0; }
.section.character .content-wrap { top: 63.4259%; width: 70.9259vh; min-width: 510px; height: 33.7963vh; min-height: 243px; }
.section.character .character-form { position: relative; width: 98.8251%; }
.section.character .character-form form { position: absolute; top: 0; left: 0; width: 100%; }
.section.character .character-form .server-wrap { display: flex; justify-content: space-between; width: 58.3884%; margin-left: 32.8930%; padding-top: 3.5667%; }
.section.character .character-form .server-wrap input { display: none; }
.section.character .character-form .server-wrap label { display: block; position: relative; width: 19.2308%; cursor: pointer; }
.section.character .character-form .server-wrap input:checked + label img.on { opacity: 1; }
.section.character .character-form .name-wrap { position: relative; margin-left: 33.0251%; margin-top: 4.2272%; width: 58.6526%; height: 0; padding-bottom: 3.6988%; }
.section.character .character-form .name-wrap input { position: absolute; top: 3.5714%; left: 0; display: block; border: 0 none; width: 63.5135%; height: 92.8571%; padding: 2px 3px; outline: none; text-align: center; background: url(../../img/character-form-text-bg.png) 0 0 no-repeat; background-size: 100% 100%; }
.section.character .character-form .name-wrap .btn-confirm { position: absolute; top: 0; left: 64.6396%; width: 35.3604%; }
.section.character .character-form .name-wrap .btn-confirm:hover .on { opacity: 1; }
.section.character .btn-character-select { position: absolute; bottom: 0; left: 50%; width: 71.1488%; transform: translateX(-50%); }
.section.character .btn-character-select:hover .on { opacity: 1; }
body.en .section.character .inner:before { background-image: url(../../img/en/character-bg.jpg); }
body.en .section.character .btn-character-select { width: 83.8120%; }
body.en .section.character .character-form .server-wrap label:nth-child(4) { width: 29.6380%; }

/* event */
.section.event { background-image: url(../../img/event-bg.jpg); }
.section.event .content-wrap { top: calc(46.0185% + 60px); width: 107.2222vh; min-width: 771px; height: 55.3704vh; min-height: 398px; }
.section.event .title { position: absolute; top: 0; left: 50%; width: 65.5440%; transform: translateX(-50%); }
.section.event .content { position: relative; display: flex; justify-content: space-between; align-items: flex-end; width: 100%; height: 100%; }
.section.event .content .community-wrap { position: relative; width: 48.1865%; }
.section.event .content .invitation-wrap { position: relative; width: 48.1865%; }
.section.event .content a img { width: 100%; height: auto; transition: opacity .3s ease; }
.section.event .content a:hover img.on { opacity: 1; }
.section.event .content a { position: absolute; bottom: 7.8390%; width: 40.0722%; }
.section.event .content a.btn-info { top: 16.5254%; bottom: auto; left: auto; right: 5.9567%; width: 9.0253%; height: 10.5932%; background-color: red; opacity: 0; }
.section.event .content a.btn-youtube { left: 8.1227%; }
.section.event .content a.btn-facebook { left: 51.9856%; }
.section.event .content a.btn-invitation { left: 8.3032%; width: 84.2960%; }
body.en .section.event .title { width: 46.4594%; }

/* introduction */
.section.introduction { background-image: url(../../img/introduction-bg.jpg); }
.section.introduction .content-wrap { top: calc(47.7778% + 60px); width: 92.4074vh; min-width: 665px; height: 58.1481vh; min-height: 419px; }
.section.introduction .content-wrap:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/introduction-content-bg.png) 0 0 no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 100; }
.section.introduction .swiper-container { position: relative; margin-top: 10.7197%; }
body.en .section.introduction .content-wrap:before { background-image: url(../../img/en/introduction-content-bg.png); }

/* media */
.section.media { background-image: url(../../img/media-bg.jpg); }
.section.media .content-wrap { top: calc(47.7778% + 60px); width: 92.4074vh; min-width: 665px; height: 59.2593vh; min-height: 427px; }
.section.media .content-wrap:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/media-content-bg.png) 0 0 no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 100; }
.section.media .swiper-container { position: relative; margin-top: 11.9538%; }
body.en .section.media .content-wrap:before { background-image: url(../../img/en/media-content-bg.png); }
.swiper-container .tab-wrap { position: absolute; width: 25.0501%; top: -9%; left: 7.8156% }
.swiper-container .tab-wrap a { position: relative; float: left; width: 47.2000%; }
.swiper-container .tab-wrap a.active { z-index: 10; }
.swiper-container .tab-wrap a.active .on { opacity: 1; }
.swiper-container .tab-wrap a.tab-image { margin-left: -0.4vw; }
.video-wrap { position: relative; width: 100%; height: 0; padding-bottom: 56%; }
.video-wrap.youtube { position: absolute; z-index: 10; display: none; }
.video-wrap iframe { position: absolute; width: 100%; height: 100%; }
.swiper-slide .video-wrap:before { content: ''; position: absolute; display: block; top: 50%; left: 50%; width: 6vw; height: 6vw; border-radius: 5vw; background-color: rgba(0,0,0,.5); transform: translate(-50%,-50%); }
.swiper-slide .video-wrap:after { content: ''; position: absolute; display: block; top: 50%; left: 50%; width: 0; height: 0; margin-left: .9vw; transform: translate(-50%,-50%); border: 1.3vw solid transparent; border-left-width: 2vw; border-left-color: white; }

.swiper-image-wrap { display: none; }

/* slider */
.swiper { position: relative; width: 83.9679%; height: 0; padding-bottom: 53.2946%; overflow: auto; overflow-x: hidden; }
.swiper .slide-wrap .swiper-slide { position: relative; }
.swiper .slide-wrap .swiper-slide iframe { width: 100%; height: 100%; }*/
.swiper-pagination { bottom: -50px; }
.swiper-pagination span { position: relative; width: 1.6%; height: 0; padding-bottom: 1.6%; background-size: 100% 100%; background-repeat: no-repeat; background-color: transparent; opacity: 1; }
.swiper-pagination-bullet { background-image: url(../../img/slider-btn-dot.png); }
.swiper-pagination-bullet-active { background-image: url(../../img/slider-btn-dot-on.png); }
.swiper-button-prev { top: 44%; }
.swiper-button-next { top: 44%; }
.swiper-button-prev:after { display: none; }
.swiper-button-next:after { display: none; }

/* youtube player */
#mediaPlayer { position: absolute; top: 0; left: 0; height: 100%; display: flex; transition: margin-left .5s ease; border-left: 1px solid #564e46; border-right: 1px solid #564e46; }

/* popup */
.popup-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; visibility: hidden; transition: visibility .5s ease; }
.popup-wrap .dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0; transition: opacity .5s ease; z-index: -1; }
.popup-wrap .popup { position: absolute; top: calc(calc(100% + 60px) * 0.5); left: 50%; transform: translate(-50%,-50%); width: 53.1481vh; min-width: 383px; visibility: hidden; opacity: 0; transition: visibility .5s ease, opacity .5s ease; }
.popup-wrap .popup.show { visibility: visible; opacity: 1; }
.popup-wrap .popup a { position: absolute; }
/*.popup-wrap .popup a { background-color: rgba(255,0,0,.5); }*/
.popup-wrap .popup a.btn-ok { left: 24.416%; width: 50.8711%; height: 23.8049%; bottom: 19%; }
.popup-wrap .popup a.btn-close { top: -38px; right: 0; width: 30px; }
.popup-wrap .popup .msg-wrap {
    position: absolute; top: 14%; left: 5%; width: 90%; height: 43%;
    display: flex; justify-content: center; align-items: center;
    font-size: 15px; font-weight: 900; text-align: center; color: #261b12;
}
.popup-wrap .popup.need-login a.btn-ok { left: 9.9699%; top: 56.7255%; width: 39.2854%; height: 23.8049%; }
.popup-wrap .popup.need-login a.btn-cancel { left: 50.5561%; top: 56.7255%; width: 39.2854%; height: 23.8049%; }
.popup-wrap .popup.nickname-confirm { width: 56.9444vh; min-width: 409px; }
.popup-wrap .popup.nickname-confirm a.btn-ok { left: 11.8699%; top: 73.9255%; width: 36.5854%; height: 14.1049%; }
.popup-wrap .popup.nickname-confirm a.btn-cancel { left: 49.7561%; top: 73.9255%; width: 36.5854%; height: 14.1049%; }
.popup-wrap .popup.nickname-confirm .info-wrap {
    position: absolute; top: 29.3264%; left: 11.8699%; width: 74.4715%;
    display: flex; justify-content: center; align-items: center;
}
.popup-wrap .popup.nickname-confirm .info-wrap div { position: relative; font-family: 'Noto Sans KR', sans-serif; font-weight: 900; color: #e9d6a0; font-size: 16px; }
.popup-wrap .popup.nickname-confirm .info-wrap div.info-server { flex-shrink: 1; box-sizing: content-box; padding-right: 14px; margin-right: 10px; }
.popup-wrap .popup.nickname-confirm .info-wrap div.info-server:after { content: ''; display: block; position: absolute; top: 5px; right: 0; width: 4px; height: 18px; background-color: #463528; }
.popup-wrap .popup.event-1 { width: 83.3333vh; min-width: 600px; }
.popup-wrap .popup.event-2 { width: 83.3333vh; min-width: 600px; }
.popup-wrap .popup.copy-link .msg-wrap input { background: none; border: 0 none; outline: none; text-align: center; font-family: 'Noto Sans KR', sans-serif; font-weight: 900; font-size: 15px; text-align: center; color: #261b12; pointer-events: none; }
.popup-wrap .popup.copy-link a.btn-copy { left: 24.416%; width: 50.8711%; height: 23.8049%; bottom: 19%; }

.popup-wrap .popup.type2 a.btn-ok { left: 10.016%; width: 39.2711%; height: 23.8049%; bottom: 19.4%; }
.popup-wrap .popup.type2 a.btn-cancel { left: 50.516%; width: 39.2711%; height: 23.8049%; bottom: 19.4%; }

/* popup opened */
.popup-wrap.opened { visibility: visible; }
.popup-wrap.opened .dim { opacity: .8; }

@media all and (min-height: 720px) {
    .popup-wrap .popup a.btn-close { top: -5.1852vh; width: 4.2593vh; }
    .popup-wrap .popup .msg-wrap { font-size: 2.1vh; }
    .popup-wrap .popup.nickname-confirm .info-wrap div { font-size: 2.4vh; }
    .popup-wrap .popup.nickname-confirm .info-wrap div.info-server { padding-right: 1.5vh; margin-right: 1vh }
    .popup-wrap .popup.nickname-confirm .info-wrap div.info-server:after { width: 0.5vh; height: 2.8vh; }
    .popup-wrap .popup.copy-link .msg-wrap input { font-size: 2.1vh; }
}