@charset "UTF-8";
/** @project: 201007_update @author: NCSOFT @update : 2020-10-14 10:34:45 */
* { margin: 0; padding: 0; }

html, body { min-width: 1100px; }

body { background: #102137; color: #5c79a2; margin: 0; padding: 0; font-family: "Malgun Gothic", "맑은고딕", Dotum, "돋움", Hevetica, AppleGothic, sans-serif; font-size: 12px; line-height: 1; }

button { outline: 0; background: none; border: 0; cursor: pointer; }

img { border: 0; }

ul, ol { list-style: none; }

table { border-spacing: 0; }

caption { height: 0; overflow: hidden; font-size: 0; }

a { color: #6096e3; }

a:hover { color: #6096e3; }

.gnbContainer { width: 1100px; }

.p-btn { display: block; overflow: hidden; text-indent: -999em; position: absolute; left: 50%; z-index: 10; }

.p-btn__detail { width: 284px; height: 66px; top: 848px; margin-left: -288px; }

/* .p-layer { @include hide-text; &__detail { width:1023px; height:604px; @include bg( $bg:"layer-detail.gif" ); } } */
#container strong { font-size: 0; }

#container table { font-size: 0; }

html, body, .container { height: 100%; }

.p-header { height: 100%; background-image: url("/promo/bns/history/2020/201007_update/img/bg-header.jpg"); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; text-align: left; text-indent: -9999em; white-space: nowrap; overflow: hidden; position: relative; }

.p-header__tit { position: absolute; top: 50%; left: 50%; width: 668px; height: 480px; margin-top: -240px; margin-left: -334px; margin-top: -541px; margin-left: -315px; z-index: 5; background-image: url("/promo/bns/history/2020/201007_update/img/main/tit.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-header__play { position: absolute; top: 50%; left: 50%; width: 153px; height: 159px; margin-top: -79.5px; margin-left: -76.5px; margin-top: -9px; margin-left: -63px; z-index: 10; background-image: url("/promo/bns/history/2020/201007_update/img/main/btn-play.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-header__btn { position: absolute; top: 50%; left: 50%; width: 625px; height: 179px; margin-top: -89.5px; margin-left: -312.5px; margin-top: 123px; margin-left: -304px; z-index: 10; background-image: url("/promo/bns/history/2020/201007_update/img/main/btn-link.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-header__btn a { float: left; width: 50%; height: 79px; margin-top: 100px; }

.p-header__scroll { position: absolute; top: 50%; left: 50%; width: 43px; height: 77px; margin-top: -38.5px; margin-left: -21.5px; margin-top: 343px; z-index: 10; background-image: url("/promo/bns/history/2020/201007_update/img/main/btn-scroll.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-header::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("/promo/bns/history/2020/201007_update/img/main/effect-y.png"); background-repeat: repeat-y; background-position: 50% 0; z-index: 1; }

.p-header::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background-image: url("/promo/bns/history/2020/201007_update/img/main/effect-x.png"); background-repeat: repeat-x; background-position: 50% 0; z-index: 1; }

.p-header__ch { /* &--behind{ @include position-abs($width:572px, $height:599px, $top:50%, $left:50%); @include bg($bg:'main/summon.png'); margin-left: -609px; margin-top: -241px; } */ }

.p-header__ch--back { position: absolute; top: 50%; left: 50%; width: 2209px; height: 833px; margin-top: -416.5px; margin-left: -1104.5px; margin-left: -920px; margin-top: -540px; background-image: url("/promo/bns/history/2020/201007_update/img/main/char1.png"); background-repeat: no-repeat; background-position: 50% 0; z-index: 1; -ms-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; }

.p-header__ch--front { position: absolute; top: 50%; left: 50%; width: 2209px; height: 833px; margin-top: -416.5px; margin-left: -1104.5px; background-image: url("/promo/bns/history/2020/201007_update/img/main/char2.png"); background-repeat: no-repeat; background-position: 50% 0; margin-left: -920px; margin-top: -540px; -ms-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; z-index: 2; }

.p-header__bottom { position: absolute; bottom: 10%; right: 34px; width: 336px; height: 45px; z-index: 100; background-image: url("/promo/bns/history/2020/201007_update/img/btn-footer.png"); background-repeat: no-repeat; background-position: 50% 50%; }

.p-header__bottom li > a { width: 106px; height: 45px; float: left; margin: 0 3px; }

canvas#canvas { display: block; position: absolute; top: 0; left: 0; z-index: 1; }

@media screen and (max-height: 936px) { .p-header__bottom { bottom: 10%; }
  .p-header__scroll { display: none; }
  .p-header__btn { display: none; }
  .p-header__tit { margin-top: -385px; }
  .p-header__play { margin-top: 147px; } }

.p-sec1-1 { position: relative; display: block; overflow: hidden; height: 680px; text-indent: -999em; background-image: url("/promo/bns/history/2020/201007_update/img/bg-sec1-con1.jpg"); background-repeat: no-repeat; background-position: 50% 0; /* &__tit{ @include position-abs($width:329px, $height:279px, $left:50%, $top:50%); @include bg($bg:'1-1/tit.png'); } */ }

.p-sec1-1__btn { position: absolute; top: 50%; left: 50%; width: 248px; height: 50px; margin-top: -25px; margin-left: -124px; margin-top: 60px; margin-left: -2px; }

.p-sec1-2 { position: relative; display: block; overflow: hidden; height: 950px; text-indent: -999em; background-image: url("/promo/bns/history/2020/201007_update/img/bg-sec1-con2.jpg"); background-repeat: no-repeat; background-position: 50% 0; /* &__tit{ @include position-abs($width:320px, $height:73px, $left:50%, $top:50%); @include bg($bg:'1-2/tit.png'); } &__card{ &-wrap{ @include position-abs($width:1214px, $height:694px, $left:50%, $top:50%); } width: 448px; height: 694px; float: left; &--1{ @include bg($bg:'1-2/card1.png'); } &--2{ @include bg($bg:'1-2/card2.png'); } &--3{ @include bg($bg:'1-2/card3.png'); } } */ }

.p-sec2-1 { position: relative; display: block; overflow: hidden; height: 1058px; text-indent: -999em; background-image: url("/promo/bns/history/2020/201007_update/img/bg-sec2-con1.jpg"); background-repeat: no-repeat; background-position: 50% 0; /* &__ch{ @include position-abs($width:449px, $height:935px, $left:50%, $top:50%); margin-left: 370px; @include bg($bg:'2-1/char.png'); } */ }

.p-gallery { position: absolute; top: 50%; left: 50%; width: 1000px; height: 513px; margin-top: -256.5px; margin-left: -500px; margin-top: -242px; text-indent: 0; }

.p-gallery__item { width: 1000px; height: 513px; }

.p-gallery__item--1 { background-image: url("/promo/bns/history/2020/201007_update/img/2-1/1.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-gallery__item--2 { background-image: url("/promo/bns/history/2020/201007_update/img/2-1/2.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-gallery__item--3 { background-image: url("/promo/bns/history/2020/201007_update/img/2-1/3.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-gallery__item--4 { background-image: url("/promo/bns/history/2020/201007_update/img/2-1/4.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-gallery .promokit-slide__pagination { bottom: -87px; }

.p-gallery .promokit-slide__pagination-bullet { width: 145px; height: 74px; background-image: url("/promo/bns/history/2020/201007_update/img/2-1/thumbnail.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-gallery .promokit-slide__pagination-bullet--1 { background-position-x: 0; }

.p-gallery .promokit-slide__pagination-bullet--2 { background-position-x: -145px; }

.p-gallery .promokit-slide__pagination-bullet--3 { background-position-x: -290px; }

.p-gallery .promokit-slide__pagination-bullet--4 { background-position-x: -435px; }

.p-gallery .promokit-slide__pagination-bullet--active { background-position-y: 100%; }

.p-sec2-2 { position: relative; display: block; overflow: hidden; height: 994px; text-indent: -999em; background-image: url("/promo/bns/history/2020/201007_update/img/bg-sec2-con2.jpg"); background-repeat: no-repeat; background-position: 50% 0; }

.p-remote { position: fixed; width: 177px; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); right: 34px; z-index: 100; }

.p-remote__item { width: 177px; height: 29px; background-image: url("/promo/bns/history/2020/201007_update/img/remote.png"); background-repeat: no-repeat; background-position: 50% 0; display: block; margin: 10px 0; text-align: left; text-indent: -9999em; white-space: nowrap; overflow: hidden; position: relative; }

.p-remote__item--active::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 177px; height: 29px; background-image: url("/promo/bns/history/2020/201007_update/img/remote.png"); background-repeat: no-repeat; background-position: 50% 0; }

.p-remote__item-main { background-position-y: 0; }

.p-remote__item-main::after { background-position-y: -29px; }

.p-remote__item-sec1 { background-position-y: -58px; margin-top: 13px; }

.p-remote__item-sec1::after { background-position-y: -87px; }

.p-remote__item-sec2 { background-position-y: -116px; }

.p-remote__item-sec2::after { background-position-y: -145px; }

.p-remote__item-update { background-position-y: -174px; margin-top: 15px; }

.p-remote__item-home { background-position-y: -203px; }

.p-nav { background-color: rgba(0, 0, 0, 0.5); position: fixed; width: 300px; height: 100%; left: 0; top: 56px; z-index: 100; }

.p-nav__toggle { width: 350px; height: 50px; background-image: url("/promo/bns/history/2020/201007_update/img/eventlist.jpg"); background-repeat: no-repeat; background-position: 50% 0; display: block; }

.p-nav-list__item { width: 300px; height: 80px; display: block; margin-bottom: 1px; position: relative; background-image: url("/promo/bns/history/2020/201007_update/img/nav.png"); background-repeat: no-repeat; background-position: 50% 0; background-position-x: 0; }

.p-nav-list__item::after { content: ''; position: absolute; top: 0; left: 0; width: 300px; height: 80px; background-image: url("/promo/bns/history/2020/201007_update/img/nav.png"); background-repeat: no-repeat; background-position: 50% 0; background-position-x: 100%; transition: all 0.7s; opacity: 0; }

.p-nav-list__item--1::after, .p-nav-list__item--1 { background-position-y: 0px; }

.p-nav-list__item--2::after, .p-nav-list__item--2 { background-position-y: -80px; }

.p-nav-list__item--3::after, .p-nav-list__item--3 { background-position-y: -160px; }

.p-nav-list__item--4::after, .p-nav-list__item--4 { background-position-y: -240px; }

.p-nav-list__item--5::after, .p-nav-list__item--5 { background-position-y: -320px; }

.p-nav-list__item--6::after, .p-nav-list__item--6 { background-position-y: -400px; }

.p-nav-list__item:hover::after { opacity: 1; }

.p-sec { background-size: cover; }

/*# sourceMappingURL=index.css.map */