/*@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');*/

/*#content * {font-family: 'Noto Sans TC', sans-serif;}*/
#content {font-size: 18px; line-height: 1.4; color: #fff; position: relative;}
#content #headArea {opacity: 0; position:relative; margin: 0 auto; width:100%; height: 150px; background: none; z-index: 1000;}
#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: 30px;left:0;margin-left:0;}
#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(150%);filter:contrast(150%);}


.mob #content {
  margin-top: 71px;
}
.mob #content #headArea .inner {
  width: 100%;
  /*max-width: 375px;*/
}
.mob #content #headArea .fixObj .bnsLogo {
  top: 0px;
  /*margin-left: -210px;*/
}
.mob #content #headArea .fixObj .bnsLogo a {
  width: 110px;
  height: 50px;
}
.mob #content #headArea .snsList {
  /*width: 100px;*/
  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: 63px;*/
  margin-left: 0px;
}
@media screen and (max-width: 320px) {
  .mob #content #headArea .inner {
    width: 100%;
    max-width: auto;
  }
}



*{-webkit-text-size-adjust:none;}
html,body{width:100%;height:100%;margin:0;padding:0;}
body{margin:0;padding:0;font-family:sans-serif;font-size:16px;line-height:1.5;background:#ffffff;position:relative;}

body {
    overflow: hidden;
    background: url("//image.tw.ncsoft.com/bns/pc/event/2111/anniversary7th/bg.jpg") no-repeat 50% 50%;
    background-size: cover;
}
body.end:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("//image.tw.ncsoft.com/bns/pc/event/2111/anniversary7th/bg6-light.jpg") no-repeat 50% 50%;
    background-size: cover;
    animation: fade 3s ease-in infinite;
    z-index: 0;
    opacity: 0;
}
body:after{
    content: '';
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: url("//image.tw.ncsoft.com/bns/pc/event/2111/anniversary7th/bg_mask.png") no-repeat 50% 50%;
    background-size: cover;
    pointer-events: none;
}

#contentArea {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.title {
    width: 1210px;
    height: 510px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -255px;
    margin-left: -605px;
    text-align: center;
    opacity: 0;
    font-size: 0;
    z-index: 1000;
    margin-top: -200px;
}
.title i{width:100%;height:100%;display:block;background:url(//image.tw.ncsoft.com/bns/pc/event/2111/anniversary7th/title.png) no-repeat center top / contain;-webkit-mask: url(//image.tw.ncsoft.com/bns/pc/event/2111/anniversary7th/title_mask.png) no-repeat center center / contain;mask: url(//image.tw.ncsoft.com/bns/pc/event/2111/anniversary7th/title_mask.png) no-repeat center center / contain;}
.title svg{position:absolute;top:0;left:0;display:block;width:100%;height:100%;mix-blend-mode:overlay;z-index:10;}

.mob .title {
    width: 320px;
    height: 135px;
    margin-top: -67.5px;
    margin-left: -160px;
    margin-top: -50px;
}

.bg {
    display: none;
    position: absolute;
    top: 40px;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    z-index: 10;
}

.zoomin {
    animation: zoomin 1.5s ease-in, light 1.5s ease-in infinite;
}
.zoomout {
    animation: zoomout 1.5s ease-in, light 1.5s ease-in infinite;
}

@keyframes fade {
    50% { opacity: 1; }
}

@keyframes zoomin {
    0% { transform: scale(1.5); }
    70%,100% { transform: scale(1); }
}
@keyframes zoomout {
    0% { transform: scale(1); }
    70%,100% { transform: scale(1.2); }
}
@keyframes light {
    70%, 90% { -webkit-filter:contrast(1);filter:contrast(1); }
    80% { -webkit-filter:contrast(1.5);filter:contrast(1.5); }
}

.swiperDiv {
    position: absolute;
    padding: 0 45px;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 6rem;
    opacity: 0;
    z-index: 1000;
    max-width: 90%;
    height: 140px;
}

.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-slide {
    font-size: 0;
    height: 140px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide img {
    max-width: 100%;
}
.swiper-button-next, .swiper-button-prev {
    width: 45px;
    height: 110px;
    margin-top: -55px;
}
.swiper-button-prev {
    left: 0;
    background: url("//image.tw.ncsoft.com/bns/pc/event/2111/anniversary7th/prev.png") no-repeat 50% 50%;
}
.swiper-button-next {
    right: 0;
    background: url("//image.tw.ncsoft.com/bns/pc/event/2111/anniversary7th/next.png") no-repeat 50% 50%;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 0;
    display: none;
    -webkit-filter: saturate(2);
    filter: saturate(2);
}
.mob .swiper-button-next, .mob .swiper-button-prev {
    width: 22.5px;
    height: 55px;
    margin-top: -27.5px;
    background-size: contain;
}

a,body{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
a:hover{-webkit-filter:contrast(1.5);filter:contrast(1.5);}

/***
loading
***/
#loadingBg {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    background: #000;
    z-index: 99998;
}
#loading,
#loading #gauge,
#loading #gauge:before {
    width: 210px;
    height: 92px;
}
#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    background: url(//image.tw.ncsoft.com/bns/pc/event/update/1903/img/common/loader_bns_off.png) no-repeat center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 99999;
}
#loading #gauge {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    overflow: hidden;
    transition: all .3s ease;
}
#loading #gauge:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(//image.tw.ncsoft.com/bns/pc/event/update/1903/img/common/loader_bns_on.png) no-repeat center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
}


/* GNG mobile */
.mob #nctGnb .ncGnb div.wrap {
  width: 100%;
  min-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;
}
.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;
}
.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;
}
body.mob #nctFooter .ncFooter {
  min-width: 100%;
  text-align: center;
}
body.mob #nctFooter .ncFooter .footerMenu {
  position: static;
  top: auto;
  left: auto;
}

@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;}
}