@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: 187px; max-width: 1920px; position: relative; margin: 0 auto; background: url("../img/nshop/bnsStarterpack/bgHeader.jpg") no-repeat center -33px; }

.page-content { position: relative; }

.cotent-wrap { width: 952px; margin: 0 auto; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.title-section { margin: -5px auto 0; padding-bottom: 17px; text-align: center; }
.title-section h1 { margin: 0 0 15px; color: #fff; font-weight: normal; font-family: "BakaExpertRegular", serif; }
.title-section h1 .en { font-size: 90px; }
.title-section h1 .en span { font-family: "Droid Serif"; display: block; color: #ffffff; font-size: 33px; font-style: italic; line-height: 33px; margin-bottom: -3px; }
.title-section h1 .de { font-size: 80px; }
.title-section h1 .fr { font-size: 80px; }
.title-section .desc { margin: 0; line-height: 28px; font-size: 18px; color: #ffffff; }
.title-section .questions { margin: 7px 0 108px; line-height: 24px; font-size: 15px; color: #ffffff; }
.title-section .questions a { color: #b75334; text-decoration: underline; }
.title-section .questions a:hover { color: #e26414; }
.title-section .nav-secondary { min-width: 952px; font-size: 15px; color: #b1b1b1; }
.title-section .nav-secondary a { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding: 0 40px; height: 45px; color: #b1b1b1; -moz-transition: background 0.5s ease-out; -o-transition: background 0.5s ease-out; -webkit-transition: background 0.5s ease-out; transition: background 0.5s ease-out; }
.title-section .nav-secondary a:before { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; content: ""; margin-right: 14px; background: url("../img/nshop/bnsStarterpack/icon-bundle.png") no-repeat; }
.title-section .nav-secondary a:hover { color: #FFF; }
.title-section .nav-secondary a:hover:before { background: url("../img/nshop/bnsStarterpack/icon-bundle-over.png") no-repeat; }
.title-section .nav-secondary a.btn-student { border-right: 1px solid #282828; }
.title-section .nav-secondary a.btn-student:before { width: 54px; height: 60px; }
.title-section .nav-secondary a.btn-duelist:before { width: 54px; height: 60px; background-position: -69px 0; }
.title-section .nav-secondary.is-active { z-index: 1100; position: fixed; top: 0; left: 0; width: 100%; height: 50px; padding-top: 15px; background-color: rgba(0, 0, 0, 0.8); }
.title-section .nav-secondary.is-active.is-up { display: none; }
.title-section .nav-secondary.is-active a.btn-student:before { width: 37px; height: 40px; background-size: 85px  40px; }
.title-section .nav-secondary.is-active a.btn-duelist:before { width: 37px; height: 40px; background-size: 85px  40px; background-position: -49px 0; }

.bundle-section.studentBundle { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url("../img/nshop/bnsStarterpack/bgBundle1.jpg") no-repeat 50% 0; }
.bundle-section.studentBundle .cotent-wrap { height: 982px; background: url("../img/nshop/bnsStarterpack/bgBundle1.jpg") no-repeat 50% 0; }
.bundle-section.duelistBundle { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url("../img/nshop/bnsStarterpack/bgBundle2.jpg") no-repeat 50% 0; }
.bundle-section.duelistBundle .cotent-wrap { height: 1064px; background: url("../img/nshop/bnsStarterpack/bgBundle2.jpg") no-repeat 50% 0; }
.bundle-section .move-group2 { width: 465px; margin-top: 10px; border-top: 1px solid #1d1c1d; }
.bundle-section .bundle-title-wrap { width: 477px; margin-bottom: 24px; margin: 212px 0 0 0; }
.bundle-section .bundle-title-wrap .pack { margin: 0 0 8px; color: #b1b1b1; font-size: 15px; font-family: "Droid Serif"; }
.bundle-section .bundle-title-wrap h2 { margin: 0 0 6px 0; font-size: 50px; color: #fff; font-family: "Droid Serif"; font-weight: normal; }
.bundle-section .bundle-title-wrap .desc { margin: 0 0 15px; width: 395px; font-size: 15px; color: #b1b1b1; line-height: 22px; }
.bundle-section .bundle-ncoin-wrap { width: 477px; padding: 0 0 57px; }
.bundle-section .bundle-ncoin-wrap .amount { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin: 0 55px 22px 0; font-size: 50px; color: #b1b1b1; }
.bundle-section .bundle-ncoin-wrap .amount:before { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; content: ''; width: 46px; height: 56px; margin: -8px 17px 0 0; background: url("../img/nshop/bnsStarterpack/icon-ncoin.png") no-repeat; }
.bundle-section .bundle-ncoin-wrap .buyNcoin { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin: 0 0 18px; font-size: 15px; color: #b75334; text-decoration: underline; }
.bundle-section .bundle-ncoin-wrap .buyNcoin:hover { color: #e26414; }
.bundle-section .bundle-item-detail { margin: 27px 0 0 0; padding: 0; list-style: none; }
.bundle-section .bundle-item-detail li { position: relative; padding: 0; color: #b1b1b1; font-size: 15px; padding: 0 0 1px; }
.bundle-section .bundle-item-detail li:before { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; content: ''; width: 42px; height: 42px; margin: -2px 5px 0 6px; background: url("../img/nshop/bnsStarterpack/icon-item.png") no-repeat; }
.bundle-section .bundle-item-detail li.item-student1:before { background-position: 0 -0px; }
.bundle-section .bundle-item-detail li.item-duelist1:before { background-position: -132px -0px; }
.bundle-section .bundle-item-detail li.item-student2:before { background-position: 0 -42px; }
.bundle-section .bundle-item-detail li.item-duelist2:before { background-position: -132px -42px; }
.bundle-section .bundle-item-detail li.item-student3:before { background-position: 0 -84px; }
.bundle-section .bundle-item-detail li.item-duelist3:before { background-position: -132px -84px; }
.bundle-section .bundle-item-detail li.item-student4:before { background-position: 0 -126px; }
.bundle-section .bundle-item-detail li.item-duelist4:before { background-position: -132px -126px; }
.bundle-section .bundle-item-detail li.item-student5:before { background-position: 0 -168px; }
.bundle-section .bundle-item-detail li.item-duelist5:before { background-position: -132px -168px; }

.buyNCoin-section { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url("../img/nshop/bnsStarterpack/bgNCoin.jpg") no-repeat 50% 0; }
.buyNCoin-section .cotent-wrap { height: 400px; background: url("../img/nshop/bnsStarterpack/bgNCoin.jpg") no-repeat 50% 0; padding-left: 420px; }
.buyNCoin-section h2 { margin: 0; color: #FFF; font-size: 40px; font-family: "Droid Serif"; margin-top: 140px; font-weight: bold; }
.buyNCoin-section p { margin: 14px 0 16px; color: #bbecfa; font-size: 20px; }

.faq-section { position: relative; margin: 0 auto; padding-bottom: 300px; background: #95816a; font-family: "Droid Serif"; min-width: 952px; }
.faq-section .wrap-box { padding-top: 121px; min-height: 660px; background: url("../img/nshop/bnsStarterpack/bgFaqTop.jpg") no-repeat top center; }
.faq-section .faq-content:before { content: ''; display: block; width: 321px; height: 511px; position: absolute; top: 170px; background: url("../img/nshop/bnsStarterpack/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: 356px; 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: -386px; } }
.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%; right: 0; 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: 21px 0 0 43px; background-color: #e1e1e1; }
.tooltipText dl { width: 100%; margin: 0; position: relative; }
.tooltipText dl dt { background: url("../img/nshop/bnsStarterpack/tooltipTop.jpg") no-repeat; font-size: 16px; color: #333; padding: 23px 35px 6px 92px; font-weight: bold; }
.tooltipText dl dt:before { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; position: absolute; top: 19px; left: 12px; content: ''; width: 64px; height: 64px; background: url("../img/nshop/bnsStarterpack/icon-item.png") no-repeat; }
.tooltipText dl dd { margin: 0; padding: 0 35px 32px 90px; background: url("../img/nshop/bnsStarterpack/tooltipBtm.jpg") no-repeat 0 bottom; color: #666; font-size: 14px; line-height: 20px; }
.tooltipText:before { position: absolute; left: -8px; top: 17px; z-index: 2; content: ""; font-size: 27px; font-family: FontAwesome; font-weight: bold; color: #e1e1e1; }

/* tooltip content img */
div[data-name='item-student1'] dl dt:before { background-position: -42px -0px; }

div[data-name='item-duelist1'] dl dt:before { background-position: -174px -0px; }

div[data-name='item-student2'] dl dt:before { background-position: -42px -64px; }

div[data-name='item-duelist2'] dl dt:before { background-position: -174px -64px; }

div[data-name='item-student3'] dl dt:before { background-position: -42px -128px; }

div[data-name='item-duelist3'] dl dt:before { background-position: -174px -128px; }

div[data-name='item-student4'] dl dt:before { background-position: -42px -192px; }

div[data-name='item-duelist4'] dl dt:before { background-position: -174px -192px; }

div[data-name='item-student5'] dl dt:before { background-position: -42px -256px; }

div[data-name='item-duelist5'] dl dt:before { background-position: -174px -256px; }

/* button */
.buyNCoin-btn { 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: 268px; height: 45px; margin: 0 auto; padding: 10px 0 0 0; font-weight: bold; background: url("../img/nshop/bnsStarterpack/bg-button.png") no-repeat right -56px; color: #FFF; font-size: 18px; text-align: center; -moz-transition: all, ease-out 0.5s; -o-transition: all, ease-out 0.5s; -webkit-transition: all, ease-out 0.5s; transition: all, ease-out 0.5s; cursor: pointer; padding-right: 38px; }
.buyNCoin-btn:hover { background: url("../img/nshop/bnsStarterpack/bg-button-over.png") no-repeat right -56px; }

a.purchaseNow-btn { 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: 228px; height: 45px; margin: 0 auto; padding: 10px 0 0 0; font-weight: bold; background: url("../img/nshop/bnsStarterpack/bg-button.png") no-repeat; color: #FFF; font-size: 17px; text-align: center; -moz-transition: all, ease-out 0.5s; -o-transition: all, ease-out 0.5s; -webkit-transition: all, ease-out 0.5s; transition: all, ease-out 0.5s; cursor: pointer; padding-top: 11px; padding-right: 25px; }
a.purchaseNow-btn:hover { background: url("../img/nshop/bnsStarterpack/bg-button-over.png") no-repeat; }

span.purchaseNow-btn { 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: 228px; height: 45px; margin: 0 auto; padding: 10px 0 0 0; font-weight: bold; background: url("../img/nshop/bnsStarterpack/bg-button-disabled.png") no-repeat; color: rgba(255, 255, 255, 0.1); font-size: 17px; text-align: center; padding-top: 11px; padding-right: 25px; }

.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; }

.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; }

.is-ready-show { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }

html:lang(en_US) .studentBundle .move-group2 ul { width: 341px; }
html:lang(en_US) .duelistBundle .move-group2 ul { width: 376px; }

html:lang(en_GB) .studentBundle .move-group2 ul { width: 341px; }
html:lang(en_GB) .duelistBundle .move-group2 ul { width: 376px; }

html:lang(de_DE) .studentBundle .move-group2 ul { width: 380px; }
html:lang(de_DE) .duelistBundle .move-group2 { width: 474px; }
html:lang(de_DE) .duelistBundle .move-group2 ul { width: 474px; }
html:lang(de_DE) span.purchaseNow-btn { padding-top: 10px; }
html:lang(de_DE) a.purchaseNow-btn { padding-top: 10px; }

html:lang(fr_FR) .studentBundle .move-group2 ul { width: 437px; }
html:lang(fr_FR) .duelistBundle .move-group2 ul { width: 449px; }
html:lang(fr_FR) span.purchaseNow-btn { font-size: 14px; }
html:lang(fr_FR) a.purchaseNow-btn { font-size: 14px; }
