@charset "UTF-8";
a { text-decoration: none; }

html { height: 100%; }

body { height: 100%; margin: 0; padding: 0; font-size: 14px; font-family: "Droid Sans", sans-serif; color: #b1b1b1; background: url("../img/nshop/bnspreorder/bgPattern.jpg") repeat; }

div#containerWrap, div#sticky-footer-wrapper { position: relative; min-height: 100%; /* Firefox */ min-height: -moz-calc(100% - 111px); /* WebKit */ min-height: -webkit-calc(100% - 111px); /* Opera */ min-height: -o-calc(100% - 111px); /* Standard */ min-height: calc(100% - 111px); }

#gnb-footer { position: relative; margin-top: 0px !important; clear: both; }

@-webkit-keyframes rotatet45deg { 0% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0); }
  100% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(45deg); } }
@-webkit-keyframes rotatet-45deg { 0% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0); }
  100% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(45deg); } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
.contain-bg { padding-top: 160px; max-width: 1920px; position: relative; margin: 0 auto; background: url("../img/nshop/bnspreorder/bgHeader.jpg") no-repeat center -33px; }

.page-content { position: relative; }

.title-section { width: 1053px; margin: -5px auto 0; padding-bottom: 17px; text-align: center; }
.title-section h1 { margin: 0; color: #fff; font-weight: normal; font-size: 100px; font-family: "BakaExpertRegular", serif; }
.title-section h1 span { margin-bottom: 5px; font-family: "Droid Serif"; display: block; color: #ede3d5; font-size: 28px; font-style: italic; }
.title-section .desc { margin: 0; line-height: 24px; font-size: 15px; color: #ede3d5; }
.title-section .desc a { color: #b75334; text-decoration: underline; }
.title-section .desc a:hover { color: #e26414; }

.pack-title { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url("../img/nshop/bnspreorder/v2/packTitle.png") no-repeat; width: 1053px; height: 555px; margin: -39px auto 0; padding-top: 87px; }
.pack-title .pack { position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; width: 300px; height: 435px; margin: 0; text-align: center; }
.pack-title .pack h2, .pack-title .pack .price, .pack-title .pack .buynow, .pack-title .pack .purchased { position: relative; z-index: 2; }
.pack-title .pack.initiate-pack { margin: 0 22px 0 33px; }
.pack-title .pack.disciple-pack { margin: 0 22px 0 22px; }
.pack-title .pack.master-pack { margin: 0 0 0 22px; }
.pack-title .pack h2 { margin: 33px 0 0 0; color: #252525; font-size: 31px; font-family: "Droid Serif"; font-weight: bold; }
.pack-title .pack .price { height: 40px; margin: 10px auto 14px; color: #ede3d5; font-size: 22px; font-weight: bold; }
.pack-title .pack .original { display: block; padding-top: 2px; text-align: center; color: #ede3d5; font-size: 15px; font-weight: normal; font-family: 'Droid Sans'; }
.pack-title.buynow-box .pack:after { content: ""; background: url("../img/nshop/bnspreorder/v2/packTitle.png") no-repeat; opacity: 0; top: 0; left: 0; bottom: 0; right: 0; position: absolute; -moz-transition: opacity, ease-out 0.5s; -o-transition: opacity, ease-out 0.5s; -webkit-transition: opacity, ease-out 0.5s; transition: opacity, ease-out 0.5s; }
.pack-title.buynow-box .pack:hover:after { opacity: 1; }
.pack-title.buynow-box .pack.initiate-pack:after { background-position: -33px -632px; }
.pack-title.buynow-box .pack.disciple-pack:after { background-position: -377px -632px; }
.pack-title.buynow-box .pack.master-pack:after { background-position: -721px -632px; }

.pack-list { color: #b1b1b1; padding-bottom: 20px; }
.pack-list table { width: 988px; margin: -30px auto 0; border-collapse: collapse; table-layout: fixed; }
.pack-list table thead { display: none; }
.pack-list table tbody td { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; padding: 26px 50px 26px 70px; background-color: transparent; -moz-transition: background-color, ease-out 0.2s; -o-transition: background-color, ease-out 0.2s; -webkit-transition: background-color, ease-out 0.2s; transition: background-color, ease-out 0.2s; background-image: url("../img/nshop/bnspreorder/line.png"); background-repeat: no-repeat; background-position: 0 bottom; font-size: 16px; line-height: 24px; color: #b1b1b1; }
.pack-list table tbody td.blank { width: 44px; padding: 0; }
.pack-list table tbody td.initiate { width: 300px; }
.pack-list table tbody td.disciple { width: 300px; background-position: 50% bottom; }
.pack-list table tbody td.master { width: 300px; background-position: right bottom; }
.pack-list table tbody td.over { background-color: rgba(0, 0, 0, 0.2); }
.pack-list table tbody td.over.disciple { background-color: rgba(0, 0, 0, 0.2); }
.pack-list table tbody td.over.master { background-color: rgba(0, 0, 0, 0.2); }
.pack-list table tbody td.initiate:before, .pack-list table tbody td.disciple:before, .pack-list table tbody td.master:before { content: ''; display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; position: absolute; top: 50%; left: 0; margin-top: -32px; width: 65px; height: 65px; background: url("../img/nshop/bnspreorder/icon.png") no-repeat 0 0; }
.pack-list table tbody td.unavailable { padding: 0; }
.pack-list table tbody td.unavailable span.text { display: block; background: url("../img/nshop/bnspreorder/unavailable.png") no-repeat 135px 50%; text-indent: -99999px; overflow: hidden; font-size: 0; }
.pack-list table tbody .item1 td { padding-top: 70px; }
.pack-list table tbody .item1 td.initiate:before { margin-top: -14px; background-position: -0px -0px; }
.pack-list table tbody .item1 td.disciple:before { margin-top: -14px; background-position: -65px -0px; }
.pack-list table tbody .item1 td.master:before { margin-top: -14px; background-position: -130px -0px; }
.pack-list table tbody .item2 td.initiate:before { background-position: -0px -65px; }
.pack-list table tbody .item2 td.disciple:before { background-position: -65px -65px; }
.pack-list table tbody .item2 td.master:before { background-position: -130px -65px; }
.pack-list table tbody .item3 td.initiate:before { background-position: -0px -130px; }
.pack-list table tbody .item3 td.disciple:before { background-position: -65px -130px; }
.pack-list table tbody .item3 td.master:before { background-position: -130px -130px; }
.pack-list table tbody .item4 td.initiate:before { background-position: -0px -195px; }
.pack-list table tbody .item4 td.disciple:before { background-position: -65px -195px; }
.pack-list table tbody .item4 td.master:before { background-position: -130px -195px; }
.pack-list table tbody .item5 td.initiate:before { background-position: -0px -260px; }
.pack-list table tbody .item5 td.disciple:before { background-position: -65px -260px; }
.pack-list table tbody .item5 td.master:before { background-position: -130px -260px; }
.pack-list table tbody .item6 td.initiate:before { background-position: -0px -325px; }
.pack-list table tbody .item6 td.disciple:before { background-position: -65px -325px; }
.pack-list table tbody .item6 td.master:before { background-position: -130px -325px; }
.pack-list table tbody .item7 td.initiate:before { background-position: -0px -390px; }
.pack-list table tbody .item7 td.disciple:before { background-position: -65px -390px; }
.pack-list table tbody .item7 td.master:before { background-position: -130px -390px; }
.pack-list table tbody .item8 td.initiate:before { background-position: -0px -455px; }
.pack-list table tbody .item8 td.disciple:before { background-position: -65px -455px; }
.pack-list table tbody .item8 td.master:before { background-position: -130px -455px; }
.pack-list table tbody .item9 td.initiate:before { background-position: -0px -520px; }
.pack-list table tbody .item9 td.disciple:before { background-position: -65px -520px; }
.pack-list table tbody .item9 td.master:before { background-position: -130px -520px; }
.pack-list table tbody .item10 td.initiate:before { background-position: -0px -585px; }
.pack-list table tbody .item10 td.disciple:before { background-position: -65px -585px; }
.pack-list table tbody .item10 td.master:before { background-position: -130px -585px; }
.pack-list table tbody .item11 td.initiate:before { background-position: -0px -650px; }
.pack-list table tbody .item11 td.disciple:before { background-position: -65px -650px; }
.pack-list table tbody .item11 td.master:before { background-position: -130px -650px; }
.pack-list table tbody .item12 td.initiate:before { background-position: -0px -715px; }
.pack-list table tbody .item12 td.disciple:before { background-position: -65px -715px; }
.pack-list table tbody .item12 td.master:before { background-position: -130px -715px; }
.pack-list table tbody .item13 td.initiate:before { background-position: -0px -780px; }
.pack-list table tbody .item13 td.disciple:before { background-position: -65px -780px; }
.pack-list table tbody .item13 td.master:before { background-position: -130px -780px; }
.pack-list table tfoot td { padding: 37px 0 65px; text-align: center; background-color: transparent; -moz-transition: background-color, ease-out 0.5s; -o-transition: background-color, ease-out 0.5s; -webkit-transition: background-color, ease-out 0.5s; transition: background-color, ease-out 0.5s; }
.pack-list table tfoot td.over { background-color: rgba(0, 0, 0, 0.2); }

.faq-section { position: relative; margin: 0 auto; padding-bottom: 300px; background: #95816a; font-family: "Droid Serif"; }
.faq-section .wrap-box { padding-top: 121px; min-height: 660px; background: url("../img/nshop/bnspreorder/bgFaqTop.jpg") no-repeat top center; }
.faq-section .faq-content:before { content: ''; display: block; width: 284px; height: 543px; position: absolute; top: 170px; background: url("../img/nshop/bnspreorder/faqChar.png") no-repeat 0 0; }
@media screen and (max-width: 1550px) { .faq-section .faq-content:before { left: 0; }
  .faq-section .faq-content .list { margin-left: 284px; margin-right: 41px; min-width: 600px; } }
@media screen and (min-width: 1551px) { .faq-section .faq-content { max-width: 925px; width: 100%; margin: 0 auto; padding: 0 42px; }
  .faq-section .faq-content:before { margin-left: -314px; } }
.faq-section h1 { margin: 0 0 50px; font-size: 40px; color: #30261a; text-align: center; }
.faq-section .category { margin: 40px 10px 10px; font-size: 25px; color: #30261a; }
.faq-section .item-q-a { position: relative; padding: 14px 0; border-bottom: 1px solid #725f47; }
.faq-section .item-q-a p { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin: 0; }
.faq-section .item-q-a .qtn { padding: 0 22px 0 55px; font-size: 17px; color: #413628; cursor: pointer; }
.faq-section .item-q-a .qtn .ico { position: absolute; left: 23px; top: 16px; }
.faq-section .item-q-a .qtn .ico:before { content: ""; font-size: 18px; font-family: FontAwesome; font-weight: bold; color: #413628; }
.faq-section .item-q-a .ans { display: block; height: 0; font-size: 15px; color: #110b03; overflow: hidden; padding: 0 22px 0 53px; line-height: 24px; }
.faq-section .item-q-a .ans a { color: #110b03; text-decoration: underline; }
.faq-section .item-q-a .ans a:hover { color: #110b03; }
.faq-section .item-q-a:hover .qtn { color: #110b03; }
.faq-section .item-q-a:hover .qtn .ico { color: #110b03; }
.faq-section .item-q-a.act .qtn { color: #110b03; }
.faq-section .item-q-a.act .qtn .ico { color: #110b03; }
.faq-section .item-q-a.act .ans { color: #110b03; }

.tooltipIcon { position: absolute; top: 50%; left: 270px; margin-top: -10px; cursor: pointer; }
.tooltipIcon:before { content: ""; font-size: 18px; font-family: FontAwesome; font-weight: bold; color: #515151; }
.tooltipIcon:hover:before { content: ""; font-size: 18px; font-family: FontAwesome; font-weight: bold; color: #ffffff; }

.tooltipText { display: none; position: relative; width: 320px; text-align: left; margin: 90px 0 0 -268px; background-color: #e1e1e1; }
.tooltipText dl { width: 100%; margin: 0; }
.tooltipText dl dt { background: url("../img/nshop/bnspreorder/tooltipTop.jpg") no-repeat; font-size: 16px; color: #333; padding: 23px 35px 13px; font-weight: bold; }
.tooltipText dl dd { margin: 0; padding: 0 35px 32px; background: url("../img/nshop/bnspreorder/tooltipBtm.jpg") no-repeat 0 bottom; color: #666; font-size: 14px; line-height: 20px; }
.tooltipText:not([data-name='item12-master']):not([data-name='item13-master']):before { position: absolute; right: 25px; top: -12px; content: ""; font-size: 33px; font-family: FontAwesome; font-weight: bold; color: #e1e1e1; }

/* tooltip content img */
div[data-name='item12-master'] { margin-top: -435px; }
div[data-name='item12-master'] dd { height: 386px; }
div[data-name='item12-master']:after { position: absolute; right: 25px; bottom: -12px; content: ""; font-size: 33px; font-family: FontAwesome; font-weight: bold; color: #e1e1e1; }

div[data-name='item12-master'] .image { width: 252px; height: 284px; margin: 10px auto 0; background: url("../img/nshop/bnspreorder/itemWeapon.png") no-repeat; }

div[data-name='item13-master'] { margin-top: -495px; }
div[data-name='item13-master'] dd { height: 446px; }
div[data-name='item13-master']:after { position: absolute; right: 25px; bottom: -12px; content: ""; font-size: 33px; font-family: FontAwesome; font-weight: bold; color: #e1e1e1; }

div[data-name='item13-master'] .image { width: 270px; height: 336px; margin: 25px auto 30px; background: url("../img/nshop/bnspreorder/itemCostume.png") no-repeat; }

/* button */
.buynow { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 258px; height: 44px; margin: 0 auto; padding: 10px 0 0 0; font-weight: bold; position: relative; background: url("../img/nshop/bnspreorder/v2/buynow.png") no-repeat; text-transform: uppercase; color: #FFF; font-size: 17px; }
.buynow span { top: 10px; left: 0; bottom: 0; right: 0; position: absolute; z-index: 2; }
.buynow:before { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 258px; height: 44px; margin: 0 auto; padding: 10px 0 0 0; font-weight: bold; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; content: ""; background: url("../img/nshop/bnspreorder/v2/buynow.png") no-repeat 0 -62px; opacity: 0; -moz-transition: opacity, ease-out 0.5s; -o-transition: opacity, ease-out 0.5s; -webkit-transition: opacity, ease-out 0.5s; transition: opacity, ease-out 0.5s; }
.buynow:hover:before { opacity: 1; }
.buynow.disable { background-position: 0 -120px !important; color: rgba(255, 255, 255, 0.1); }
.buynow.disable:before { background: none; }

.purchased { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 258px; height: 44px; margin: 0 auto; padding: 10px 0 0 0; font-weight: bold; text-transform: uppercase; color: #e26414; font-size: 20px; }
.purchased:before { content: ""; font-size: 20px; font-family: FontAwesome; font-weight: bold; color: #e26414; padding-right: 4px; }

.pack-title .purchased { color: #252525; }
.pack-title .purchased:before { content: ""; font-size: 20px; font-family: FontAwesome; font-weight: bold; color: #252525; }
.pack-title .buynow.disable { color: rgba(255, 255, 255, 0.3); }

.btn-scroll-top { color: #413628; font-size: 13px; font-family: "Droid Sans", sans-serif; float: right; margin: 21px 0 0 0; }
@media screen and (max-width: 1550px) { .btn-scroll-top { margin-right: 41px; } }
.btn-scroll-top span { text-decoration: underline; }
.btn-scroll-top:before { content: ""; font-size: 20px; font-family: FontAwesome; font-weight: bold; color: #413628; margin-right: 7px; vertical-align: middle; }
.btn-scroll-top:hover { color: #110b03; }
.btn-scroll-top:hover:before { content: ""; font-size: 20px; font-family: FontAwesome; font-weight: bold; color: #110b03; }