@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');

* {
  -webkit-text-size-adjust: none;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #000000;
  position: initial;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  border: none;
}

a {
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

a:hover {
  text-decoration: none;
}

button {
  outline: 0;
  border: 0;
}

#content * {
  font-family: 'Noto Sans TC', sans-serif;
  box-sizing: border-box;
}

#content {
  position: relative;
}

#content #headArea {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 1040px;
  background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/bg_header.jpg) center no-repeat;
}

#content #headArea .inner {
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
  height: 100%;
}

#content #headArea .fixObj {
  white-space: normal;
  text-indent: 0;
}

#content #headArea .fixObj .bnsLogo {
  margin-left: -560px;
  top: 50px;
  width: auto;
}

#content #headArea .fixObj .bnsLogo a {
  margin-top: 0;
  /*filter: drop-shadow(0px 0px 20px #e67daf);*/
  background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/logo_bnsneo.webp);
  width: 260px;
  height: 80px;
}

#content #topBtn {
  display: none;
  width: 45px;
  height: 45px;
  color: #fff;
  font-size: 10px;
  text-align: center;
  text-decoration: none;
  line-height: 20px;
  padding-top: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.6);
}

#content #topBtn:before {
  content: '\25B2';
  width: 100%;
  text-align: center;
  font-size: 12px;
  position: absolute;
  top: 5px;
  left: 0;
}

#content #topBtn:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

#content #att .list li {
  list-style: decimal;
  margin-left: 1em;
}

#content .sct i {
  font-style: normal;
}

#headArea .inner>a,
.sct a[class*="btn"] {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

#headArea .inner>a:hover,
.sct a:hover {
  -webkit-filter: contrast(120%);
  filter: contrast(120%);
}

.banner {
  display: none;
  width: 280px;
  height: 180px;
  position: fixed;
  bottom: 10rem;
  right: 2rem;
  background: none no-repeat 50% 0;
  background-size: cover;
  animation: fadeDiscolour 4s ease-in-out infinite, vertical 1.6s ease-in-out infinite alternate;
  z-index: 100;
}

@media screen and (max-width: 1500px) {
  .banner {
    right: 0;
  }
}

.mob #content {
  margin-top: 71px;
}

.mob #content #headArea {
  background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/m/bg_header.jpg) no-repeat 50% 0;
  background-size: cover;
  height: 470px;
}

.mob #content #headArea .inner {
  width: 100%;
  max-width: 375px;
}

.mob #content #headArea .fixObj .bnsLogo {
  top: 5px;
  margin-left: -190px;
}

.mob #content #headArea .fixObj .bnsLogo a {
  width: 130px;
  height: 40px;
  margin-top: 10px;
  background-size: cover;
}

.mob #content #headArea .snsList {
  width: 127px;
  top: 10px;
  right: 10px;
}

.mob #content #headArea .snsList li {
  font-size: 0.8rem;
}

.mob #content #headArea .snsList li:not(.fbShare) {
  float: right;
}

.mob #content #headArea .snsList li a {
  padding: 0;
  min-width: 90px;
}

.mob #content #headArea .snsList li a.facebook {
  min-width: auto;
  margin-left: 0px;
}

/* section tab */
#section-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-indent: -99999px;
  position: absolute;
  top: 765px;
  left: 50%;
  transform: translateX(-50%)
}

#section-tab .tab_item a {
  display: block;
  width: 457px;
  height: 190px;
  background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/tab01.png) no-repeat top center;
  background-size: contain;
  cursor: pointer;
  transition: .3s;
  filter: brightness(0.7);
}

#section-tab .tab_item a:hover {
  scale: .98
}

#section-tab .tab_item.active a {
  filter: brightness(1);
}

#section-tab .tab_item .btn_level {
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/tab02.png)
}

#section-tab .tab_item.active .btn_level {
  filter: brightness(1)
}

#section-tab .tab_item.close .btn_level:hover {
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/tab_close.png);
  cursor: not-allowed
}

.mob #section-tab {
  top: 390px;
  gap: 10px;
}

.mob #section-tab li a {
  width: 170px;
  height: 71px;
}

#content #sct1 {
  background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/bg_section1.jpg) top center no-repeat;
  height: 310px;
}

#content #sct2 {
  background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/bg_section2.jpg) top center no-repeat;
  height: 1210px;
  position: relative;
}

.use-mobile,
.mob .use-pc {
  display: none;
}

.use-pc,
.mob .use-mobile {
  display: block;
}

.mob #content #sct1 {
  height: 170px;
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/m/bg_section1.jpg),
    url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/m/bg_section1-bk.jpg);
  background-size: 375px 100%, 1280px 100%;
}

.mob #content #sct2 {
  height: 600px;
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/m/bg_section2.jpg),
    url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/m/bg_section2-bk.jpg);
  background-size: 375px 100%, 1280px 100%;
}

#sct2 .table_box {
  width: 1100px;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  position: absolute;
  transform: translateX(-50%);
  top: 29px;
  left: 50%;
  text-align: center;
  border-collapse: separate;
  border-spacing: 5px;
}

.table_box thead tr {
  height: 68px;
  font-weight: 500;
}

.table_box tbody tr {
  height: 100px;
}

.table_box tbody tr:nth-child(1),
.table_box tbody tr:nth-child(2),
.table_box tbody tr:nth-child(6),
.table_box tbody tr:nth-child(7),
.table_box tbody tr:nth-child(8) {
  height: 142px;
}

.table_box td:nth-child(1) {
  width: 340px;
}

.table_box td:nth-child(2) {
  width: 470px;
}

.table_box td:nth-child(3) {
  width: 291px;
  padding-top: 5px;
}

#sct2 .area-reward.lock{
  -webkit-filter:grayscale(1);filter:grayscale(1);pointer-events:none;
}
#sct2 .table_box a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding-bottom: 8px;
  width: 251px;
  height: 76px;
  background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/btn_login.png) no-repeat top center;
  background-size: contain;
  color: #fff;
  font-family: "Noto Serif TC";
  font-weight: bold;
  font-size: 28px;
  filter: drop-shadow(0px 14px 20px rgba(0, 0, 0, .65));
}

#sct2 .table_box .btn-link-login {
  text-shadow: 1px 1px 10px #7d3302, -1px -1px 10px #7d3302;
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/btn_login.png);
}

#sct2 .table_box .btn-link-reward {
  text-shadow: 1px 1px 10px #02027d, -1px -1px 10px #02027d;
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/btn_reward.png);
}

#sct2 .table_box .btn-link-reward.lock {
  filter: grayscale(1);
}

#sct2 .table_box .btn-link-uncompleted {
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/btn_uncompleted.png);
  cursor: not-allowed;
}

#sct2 .table_box .btn-link-end,
#sct2 .table_box .btn-link-not {
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/btn_end.png);
  cursor: not-allowed;
}

#sct2 .table_box .btn-link-receive {
  text-shadow: 1px 1px 10px #7d3302, -1px -1px 10px #7d3302;
  background-image: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/btn_receive.png);
  cursor: not-allowed;
}

.mob #sct2 .table_box {
  width: 370px;
  font-size: 12px;
  top: 3px;
  border-spacing: 2px;
}

.mob #sct2 .table_box a {
  width: 90px;
  height: 27px;
  font-size: 12px;
  padding-bottom: 3px;
}

.mob .table_box td:nth-child(1) {
  width: 200px;
}

.mob .table_box td:nth-child(2) {
  width: 530px;
}

.mob .table_box td:nth-child(3) {
  width: 98px;
}

.mob .table_box thead tr {
  height: 48px;
}

.mob .table_box tbody tr {
  height: 50px;
}

.mob .table_box tbody tr:nth-child(1),
.mob .table_box tbody tr:nth-child(2),
.mob .table_box tbody tr:nth-child(6),
.mob .table_box tbody tr:nth-child(7),
.mob .table_box tbody tr:nth-child(8) {
  height: 71px;
}

.mob #content .sct .inner {
  width: 100%;
  padding: 0 1rem;
  max-width: 370px;
}

@media screen and (max-width: 320px) {
  .mob #content .sct .inner {
    max-width: auto;
    padding: 0 0.5rem;
  }
}

#content #att {
  background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/level/bg_caution.jpg) 50% 0 repeat-x;
  height: 620px;
  margin: 0 auto;
}

#content #att .inner {
  width: 1000px;
  padding: 120px 0 20px 0;
}

#content #att dt {
  font-size: 30px;
  font-weight: 500;
  color: #b2a5b0;
  /* background: url(//image.tw.ncsoft.com/bns/pc/event/2506/preorderwarlock/caution.webp) 50% 0 no-repeat; */
  /* text-indent: 101%; */
  overflow: hidden;
  white-space: nowrap;
  text-shadow: none;
  margin-bottom: 1em;
}

#content #att dd ul {
  position: relative;
}

#content #att dd li {
  color: #ffffff;
  font-size: 16px;
  list-style: decimal;
  margin-left: 1em;
  margin-bottom: 0.5em;
  font-weight: 400;
  letter-spacing: -1px;
  /*list-style:none;*/
  text-align: justify;
  font-family: 'Noto Sans TC', sans-serif;
}

#content #att p {
  color: #fff;
}

.mob #content #bodyArea #att {
  height: auto;
  background-image: none;
  background-color: #1e0a29;
}

.mob #content #bodyArea #att .inner {
  width: 80%;
  margin: 0 auto;
  padding: 2rem 0.5rem 2rem;
}

@media screen and (max-width: 767px) {
  .mob #content #bodyArea #att .inner {
    width: 100%;
    max-width: 320px;
  }
}

.mob #content #att dt {
  font-size: 24px;
  margin-bottom: 0.5em;
}

.mob #content #att p {
  font-size: 0.75rem;
}

.mob #content #bodyArea #att li {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: -0px;
  margin-bottom: 5px;
}

.mob #content #att .sct__chara {
  display: none;
}

.br-m,
.mob .br-pc {
  display: none;
}

.br-pc,
.mob .br-m {
  display: block;
}

#content a:hover {
  filter: contrast(120%) brightness(110%);
}

/* ColcoBox */
#colorbox,
#cboxOverlay,
#cboxWrapper {
  max-width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 10002;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

#colorbox {
  outline: 0;
}

#colorbox #cboxWrapper {
  max-width: none;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

#colorbox #cboxWrapper #cboxMiddleLeft,
#colorbox #cboxWrapper #cboxBottomLeft {
  clear: left;
}

#colorbox #cboxWrapper #cboxContent {
  position: relative;
  overflow: visible;
}

#colorbox #cboxWrapper #cboxContent #cboxLoadedContent {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

#colorbox #cboxWrapper #cboxContent #cboxTitle {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  font-size: 1.2rem
}

#colorbox #cboxWrapper #cboxContent #cboxCurrent {
  top: -22px;
  right: 205px;
  position: absolute;
  text-indent: -9999px;
}

#colorbox #cboxWrapper #cboxContent #cboxLoadingOverlay,
#colorbox #cboxWrapper #cboxContent #cboxLoadingGraphic {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

#colorbox #cboxWrapper #cboxContent #cboxPrevious,
#colorbox #cboxWrapper #cboxContent #cboxNext,
#colorbox #cboxWrapper #cboxContent #cboxClose,
#colorbox #cboxWrapper #cboxContent #cboxSlideshow {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-indent: -9999px;
  position: absolute;
  top: -20px;
  background: none;
}

#colorbox #cboxWrapper #cboxContent #cboxPrevious:active,
#colorbox #cboxWrapper #cboxContent #cboxNext:active,
#colorbox #cboxWrapper #cboxContent #cboxClose:active,
#colorbox #cboxWrapper #cboxContent #cboxSlideshow:active {
  outline: 0;
}

#colorbox #cboxWrapper #cboxContent .cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: 100%;
  -ms-interpolation-mode: bicubic;
}

#colorbox #cboxWrapper #cboxContent .cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: #000000;
}

#colorbox #cboxWrapper #cboxContent #cboxError {
  padding: 50px;
  border: 1px solid #cccccc;
}

#colorbox #cboxWrapper #cboxContent #cboxClose {
  top: -36px;
  right: -36px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: block;
}

#colorbox #cboxWrapper #cboxContent #cboxClose::before,
#colorbox #cboxWrapper #cboxContent #cboxClose::after {
  content: "";
  width: 36px;
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: -18px;
}

#colorbox #cboxWrapper #cboxContent #cboxClose::after {
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.mob #colorbox #cboxWrapper #cboxContent #cboxClose {
  top: -24px;
  right: -24px;
  width: 24px;
  height: 24px;
}

.mob #colorbox #cboxWrapper #cboxContent #cboxClose::before,
.mob #colorbox #cboxWrapper #cboxContent #cboxClose::after {
  background: #ffffff;
  width: 24px;
  margin-left: -12px;
}

/* modal */
body #modal-wrap {
  box-shadow: none;
}

body #modal-contents {
  background: none;
}

/* GNG */
.mob #nctGnb .ncGnb div.wrap {
  width: 100%;
  min-width: inherit;
  max-width: inherit;
  height: auto;
  margin: 0 auto;
  background: #fff;
  position: relative;
}

.mob #nctGnb .ncGnb div.wrap .gnbLeft {
  display: flex;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}

.mob #nctGnb .ncGnb div.wrap .gnbLeft .btnList,
.mob #nctGnb .ncGnb div.wrap .gnbLeft .btnList.on {
  border: none;
  padding: 10px 45px 0 24px;
  left: 0;
}

.mob #nctGnb .ncGnb div.wrap .gnbMenu {
  position: static;
}

.mob #nctGnb .ncGnb div.wrap .gnbMenu .menu {
  min-width: 100%;
  height: 30px;
  border-top: 1px solid transparent;
  box-sizing: content-box;
}

.mob:has(#nctGnb .gnbMenu > div.myInfo) #content {
  margin-top: 110px;
}

.mob #nctGnb .ncGnb div.wrap .gnbMenu:has(> div.myInfo) .menu {
  border-top: 1px solid #eeeeee;
}

.mob #nctGnb .ncGnb div.wrap .gnbMenu .menu ul {
  display: flex;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

.mob #nctGnb .ncGnb div.wrap .gnbMenu .menu ul li {
  height: 30px;
  /*width: 25%;*/
  text-align: center;
  border-left: 1px solid #ececec;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0%;
}

/*.mob #nctGnb .ncGnb div.wrap .gnbMenu .menu ul li + li a {
  border-left: 1px solid #ececec;
}*/
.mob #nctGnb .ncGnb div.wrap .gnbMenu .menu ul li a {
  height: 30px;
  display: flex;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  padding: 0;
}

.mob #nctGnb .gnb-games {
  border-top: 1px solid #eeeeee;
  padding: 10px;
  box-sizing: border-box;
}

.mob #nctGnb .gnb-games div.list-container {
  min-width: 100%;
  max-width: 100%;
  padding: 0;
}

.mob #nctGnb .gnb-games div.list-container div.pc,
.mob #nctGnb .gnb-games div.list-container div.mobile {
  float: none;
  padding: 0;
}

.mob #nctGnb .gnb-games div.list-container div.pc .title,
.mob #nctGnb .gnb-games div.list-container div.mobile .title {
  padding-left: 10px;
}

.mob #nctGnb .gnb-games div.list-container div.mobile {
  border-top: 1px solid #eeeeee;
  margin-top: 15px;
  padding-top: 15px;
}

.mob #nctGnb .gnb-games div.list-container div.pc ul,
.mob #nctGnb .gnb-games div.list-container div.mobile ul,
.mob #nctGnb .gnb-games div.list-container div.mobile ul {
  display: flex;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

.mob #nctGnb .gnb-games div.list-container div.pc ul:after,
.mob #nctGnb .gnb-games div.list-container div.mobile ul:after,
.mob #nctGnb .gnb-games div.list-container div.mobile ul:after {
  display: none;
}

.mob #nctGnb .gnb-games div.list-container div.pc ul li:first-child,
.mob #nctGnb .gnb-games div.list-container div.mobile ul li:first-child,
.mob #nctGnb .gnb-games div.list-container div.mobile ul li:first-child {
  margin-left: 0;
}

body.mob #nctFooter {
  position: relative;
  z-index: 2;
  background: #FFF;
  padding-right: 10px;
  padding-left: 10px;
  height: auto;
}

body.mob #nctFooter .ncFooter {
  min-width: 100%;
  text-align: center;
}

body.mob #nctFooter .ncFooter .footerMenu {
  position: static;
  top: auto;
  left: auto;
}

#nctGnb .gnbMenu .myInfo .myMenu {
  box-sizing: content-box;
}

@media screen and (max-width:1099px) {
  body {
    width: max-content;
    width: -webkit-max-content;
    width: -moz-max-content;
    max-width: 1100px;
  }

  body.mob {
    width: auto;
    min-width: auto;
    max-width: none;
  }
}