@media screen and (max-width: 812px) {
html, body {
    min-width: 310px !important;
}
#contentArea,
#content {height: 100%;}
#content .bnsLogo {
    left: 0;
}
#ncjSnsHolder {
    display: none;
}
#sp_msg {
    display: none;
}

/**********
nav
**********/
.sp_menu_bg_open #sp_menu_bg:before {
    content: " ";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    -webkit-background: rgba(0,0,0,0.6);
    -moz-background: rgba(0,0,0,0.6);
    z-index: 998;
}
#headArea #spNav,
#headArea #spNav i {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
#headArea #spNav {
  position: relative;
  width: 30px;
  height: 26px;
  z-index: 9999;
  right: 10px;
}
#headArea #spNav i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
#headArea #spNav i:nth-of-type(1) {
  top: 0;
}
#headArea #spNav i:nth-of-type(2) {
  top: 12px;
}
#headArea #spNav i:nth-of-type(3) {
  bottom: 0;
}
#headArea #spNav.active i:nth-of-type(1) {
  -webkit-transform: translateY(13px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
}
#headArea #spNav.active i:nth-of-type(2) {
  opacity: 0;
}
#headArea #spNav.active i:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}
#content #nav {
  width: 100%;
  height: auto;
  top: 52px;
  background: rgba(0,0,0,.8);
  /*display: block;*/
  display: none;
}
#nav li {
  margin: 0;
}
#nav li a {
  width: 100%;
  height: 50px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
#nav li a .nav_txt,
#nav li a:hover .nav_txt,
#nav li.active a .nav_txt,
#nav li.active a:hover .nav_txt {
  width: 100%;
  height: 30px;
  position: static;
}
#nav .nav1 a .nav_txt,
#nav .nav1 a:hover .nav_txt {
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/common/sp_nav1_on.png) no-repeat left center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#nav .nav2 a .nav_txt,
#nav .nav2 a:hover .nav_txt {
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/common/sp_nav2_on.png) no-repeat left center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#nav .nav3 a .nav_txt,
#nav .nav3 a:hover .nav_txt {
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/common/sp_nav3_on.png) no-repeat left center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#nav .nav4 a .nav_txt,
#nav .nav4 a:hover .nav_txt {
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/common/sp_nav4_on.png) no-repeat left center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#nav .nav1.active a .nav_txt,
#nav .nav1.active a:hover .nav_txt {
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/common/sp_nav1_off.png) no-repeat left center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#nav .nav2.active a .nav_txt,
#nav .nav2.active a:hover .nav_txt {
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/common/sp_nav2_off.png) no-repeat left center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#nav .nav3.active a .nav_txt,
#nav .nav3.active a:hover .nav_txt {
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/common/sp_nav3_off.png) no-repeat left center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#nav .nav4.active a .nav_txt,
#nav .nav4.active a:hover .nav_txt {
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/common/sp_nav4_off.png) no-repeat left center;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#nav li a .nav_icon {
  display: none;
}

/**********
cont 共通
**********/
#content #headArea {
  height: 52px;
}
#content .bnsLogo,
#content .bnsLogo a {
    width: 80px;
    height: 42px;
    margin: 0;
}
/*#fullpage .section .anime {
  width: 100%;
  overflow: hidden;
}*/
#fullpage .section .cont_wrap {
    max-width: 500px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20%;
}
#fullpage .section .cont_tit {
    width: 100%;
    height: 0;
    padding-top: 17%;
}
#fullpage .section .cont_txt {
    width: 100%;
    height: 0;
    margin-top: -2%;
}
#fullpage .section .btn {
  width: 50%;
  height: 0;
  padding-top: 15%;
}
#fullpage .popup .close {
  width: 20px;
  height: 20px;
  top: 51px;
  right: 15px;
}
#fullpage .section .spTxt {
  width: 100% !important;
  height: auto !important;
  color: #FFF;
  font-size: 10px;
  text-indent: 0;
  background: none !important;
}
#fullpage .section .spTxt .spBlock {
  display: block;
}


/**********
main
**********/
#fullpage .section.main .cont_wrap {
  top: 10%;
}
#fullpage .section.main .ttl {
  width: 100%;
  height: 0;
  padding-top: 36%;
}
#fullpage .section.main .subTtl {
  margin-top: -18%;
  width: 45%;
  height: 0;
  padding-top: 46%;
}
#fullpage .section.main .date {
  margin-top: -5%;
  width: 100%;
  height: 0;
  padding-top: 10%;
}
#fullpage .section.main .anime .chara1 {
  width: 63%;
  height: 0;
  padding-top: 103%;
  margin-top: -44%;
  margin-left: -15%;
}
#fullpage .section.main .anime .chara2 {
  width: 110%;
  height: 0;
  padding-top: 125%;
  margin-top: -65%;
  margin-left: -64%;
}
#fullpage .section.main .anime .bg {
  width: 250%;
  height: 0;
  padding-top: 114%;
  margin-top: 10%;
}


/**********
dungeon
**********/
#fullpage .section.dungeon .area {
  width: 75%;
  height: 0;
  padding-top: 45%;
  background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/dungeon/area_sp.png) no-repeat center;
  -webkit-background-size: contain;
       -o-background-size: contain;
          background-size: contain;
  margin-left: -8%;
}
#fullpage .section.dungeon .subTtl {
  width: 65%;
  height: 0;
  padding-top: 5%;
  margin-top: 1%;
}
#fullpage .section.dungeon .ttl {
  width: 60%;
  height: 0;
  padding-top: 17%;
  margin-top: 3%;
}
#fullpage .section.dungeon .lines {
  width: 70%;
  height: 0;
  padding-top: 6%;
  margin-top: 4.5%;
}
#fullpage .section.dungeon .txt {
  text-align: left;
  margin-top: 6%;
}
#fullpage .section .btn {
  margin-top: 7%;
}
#fullpage .section.dungeon .anime .chara1 {
  width: 170%;
  height: 0;
  padding-top: 135%;
  margin-top: -77%;
  margin-left: -50%;
}
#fullpage .section.dungeon .popup .cont_wrap .pop_ttl {
  width: 60%;
  height: 0;
  padding-top: 26%;
}
#fullpage .section.dungeon .popup .cont_wrap table {
  display: none;
}
#fullpage .section.dungeon .popup .cont_wrap .spTbl {
  display: block;
  width: 100%;
  height: 0;
  margin-top: 50%;
  padding-top: 62%;
  background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/dungeon/pop_tbl_sp.png) no-repeat center;
  -webkit-background-size: contain;
       -o-background-size: contain;
          background-size: contain;
}
#fullpage .section.dungeon .popup .anime .chara1 {
  width: 60%;
  max-width: 305px;
  height: 0;
  padding-top: 115%;
  margin-left: -32%;
  margin-top: -50%;
}
#fullpage .section.dungeon .popup .anime .chara2 {
  width: 69%;
  max-width: 355px;
  height: 0;
  padding-top: 120%;
  margin-left: -62%;
  margin-top: -58%;
}
#fullpage .section.dungeon .popup .anime .chara3{
  width: 62%;
  max-width: 320px;
  height: 0;
  padding-top: 113%;
  margin-left: -14%;
  margin-top: -46%;
}
#fullpage .section.dungeon .popup .anime .chara4 {
  width: 70%;
  max-width: 355px;
  height: 0;
  padding-top: 121%;
  margin-left: -2%;
  margin-top: -57%;
}
#dungeon_popup .anime .name1,
#dungeon_popup .anime .name2 {
  width: 40%;
  height: 0;
  padding-top: 27%;
  margin-top: 1%;
}
#dungeon_popup .anime .name1 {
  margin-left: -30%;
}
#dungeon_popup .anime .name2 {
  margin-left: 30%;
  margin-top: 0%;
}


/**********
fishing
**********/
#fullpage .section.fishing .fp-controlArrow {
  width: 20px;
  height: 43px;
  top: auto;
  bottom: 20px;
  z-index: 12;
}
#fullpage .section.fishing .fp-controlArrow.fp-prev {
  left: 10px;
  -webkit-transform: translateY(0%);
     -moz-transform: translateY(0%);
      -ms-transform: translateY(0%);
       -o-transform: translateY(0%);
          transform: translateY(0%);
}
#fullpage .section.fishing .fp-controlArrow.fp-next {
  right: 10px;
  -webkit-transform: translateY(0%) rotate(180deg);
     -moz-transform: translateY(0%) rotate(180deg);
      -ms-transform: translateY(0%) rotate(180deg);
       -o-transform: translateY(0%) rotate(180deg);
          transform: translateY(0%) rotate(180deg);
}
#fullpage .section.fishing .fp-slidesNav {
  width: 100%;
  top: auto;
  bottom: 10px;
  right: 0;
  -webkit-transform: translateY(0%);
     -moz-transform: translateY(0%);
      -ms-transform: translateY(0%);
       -o-transform: translateY(0%);
          transform: translateY(0%);
}
#fullpage .section.fishing .fp-slidesNav ul {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}
#fullpage .section.fishing .fp-slidesNav li a {
  margin: 0;
  width: 60px;
  height: 20px;
}
#fullpage .section.fishing .fp-slidesNav li a span,
#fullpage .section.fishing .fp-slidesNav li a.active span {
  display: none;
}
#fullpage .section.fishing .fp-slidesNav li a.active,
#fullpage .section.fishing .fp-slidesNav li a.active:before {
  width: 60px;
  height: 60px;
}
#fullpage .section.fishing .slide1 .ttl {
  width: 55%;
  height: 0;
  padding-top: 26%;
  margin-left: -2.5%;
}
#fullpage .section.fishing .slide1 .lines {
  width: 60%;
  height: 0;
  padding-top: 18%;
  background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/fishing/slide1_lines_sp.png) no-repeat center;
  -webkit-background-size: contain;
       -o-background-size: contain;
          background-size: contain;
}
#fullpage .section.fishing .slide1 .txt {
  text-align: left;
  margin-top: 6%;
}
#fullpage .section.fishing .slide1 .anime .chara1 {
  width: 95%;
  max-width: 550px;
  height: 0;
  padding-top: 120%;
  margin-left: -24%;
  margin-top: -63%;
}
#fullpage .section.fishing .slide1 .anime .chara1_bg {
  width: 95%;
  max-width: 550px;
  height: 0;
  padding-top: 120%;
  margin-left: -24%;
  margin-top: -63%;
}
#fullpage .section.fishing .slide2 .ttl {
  width: 85%;
  height: 0;
  padding-top: 20%;
}
#fullpage .section.fishing .slide2 table {
  display: none;
}
#fullpage .section.fishing .slide2 .spTbl {
  display: block;
  width: 100%;
  height: 0;
  margin-top: 2.5%;
  margin-left: 0;
  padding-top: 89%;
  background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/fishing/slide2_tbl_sp.png) no-repeat center;
  -webkit-background-size: contain;
       -o-background-size: contain;
          background-size: contain;
}
#fullpage .section.fishing .slide2 .anime .chara1 {
  display: none;
}
#fullpage .section.fishing .slide3 .cont_wrap:before,
#fullpage .section.fishing .slide3 .cont_wrap:after {
  height: 130px;
}
#fullpage .section.fishing .slide3 .cont_wrap:after {
    height: 200px;
}
#fullpage .section.fishing .slide3 .ttl {
  width: 60%;
  height: 0;
  padding-top: 20%;
}
#fullpage .section.fishing .slide3 .txt {
  margin-top: 0;
}
#fullpage .section.fishing .slide3 .txt i,
#fullpage .section.fishing .slide3 .cap.spTxt ,
#fullpage .section.fishing .slide2 .cap.spTxt {
  font-style: normal;
  color: #9DD084;
}
#fullpage .section.fishing .slide2 .cap.spTxt,
#fullpage .section.fishing .slide3 .cap.spTxt,
#fullpage .section.renewal .popup .cont_wrap .cap {
  text-indent: -1em;
  padding-left: 1em;
  text-align: left;
  margin: 0 0;
}
#fullpage .section.fishing .slide2 .cap.spTxt {
  margin-top: 10px;
}
#fullpage .section.fishing .slide3 .ss_list1,
#fullpage .section.fishing .slide3 .cont_2col {
  display: block;
  margin-top: 5%;
}
#fullpage .section.fishing .slide3 .ss_list1 li {
  width: 82%;
  height: 0;
  padding-top: 65%;
  margin: auto;
}
#fullpage .section.fishing .slide3 .ss_list2 .ss2 {
  width: 100%;
  height: 0;
  padding-top: 51%;
}
#fullpage .section.fishing .slide3 .ss_list2,
#fullpage .section.fishing .slide3 .cont_2col {
  margin-top: 13%;
}
#fullpage .section.fishing .slide3 .cont_2col .ss_list3 .ss3 {
  width: 100%;
  height: 0;
  padding-top: 44%;
}
#fullpage .section.fishing .slide3 .cont_2col table {
    display: none;
}
#fullpage .section.fishing .slide3 .cont_2col .spTbl {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 55%;
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/fishing/slide3_tbl.png) no-repeat center;
    -webkit-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    margin-top: 13%;
}
#fullpage .section.fishing .slide4 .ttl {
  width: 58%;
  height: 0;
  padding-top: 23%;
}
#fullpage .section.fishing .slide4 .txt {
  margin-top: 0;
}
#fullpage .section.fishing .slide4 .ss_list {
  margin-top: 5%;
  padding-bottom: 8%;
}
#fullpage .section.fishing .slide4 .ss_list .ss1 {
  width: 85%;
  height: 0;
  padding-top: 74%;
}
#fullpage .section.fishing .slide4 .ss_list .ss_cap1,
#fullpage .section.fishing .slide4 .ss_list .ss_cap2 {
  display: none;
}


/**********
renewal
**********/
#fullpage .section.renewal .ttl {
  width: 45%;
  height: 0;
  padding-top: 24%;
}
#fullpage .section.renewal .lines {
  width: 55%;
  height: 0;
  padding-top: 14%;
  margin-top: 5%;
}
#fullpage .renewal .fp-tableCell{
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
#fullpage .section.renewal .anime,
#fullpage .section.renewal .anime .map,
#fullpage .section.renewal .anime .map_area_list {
  width: 100%;
}
#fullpage .section.renewal .anime .map {
  margin-top: 38%;
}
#fullpage .section.renewal .anime .map .map_bg {
  display: block;
  width: 90%;
  height: 0;
  padding-top: 93%;
  margin-left: auto;
  margin-right: auto;
}
#fullpage .section.renewal .map_area_list {
  margin-left: 38%;
  margin-top: 24%;
}
#fullpage .section.renewal .map_area_list .map_area {
  width: 45%;
  margin-left:0;
  margin-top: 0;
}
#fullpage .section.renewal .map_area_list .map_area i {
  width: 100%;
  height: 0;
  padding-top: 61%;
}
#fullpage .section.renewal .chara1 {
  width: 90%;
  height: 0;
  padding-top: 90%;
  max-width: 470px;
  margin-left:-21%;
  margin-top: -60%;
  background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/renewal/chara1.png) no-repeat left bottom;
  -webkit-background-size: contain;
       -o-background-size: contain;
          background-size: contain;
  z-index: 2;
}
#fullpage .section.renewal.active.fp-completely .chara1 {
    -webkit-animation: slideDown .35s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.8s both,
                        vertical 1s ease-in-out infinite 1.8s alternate;
    animation: slideDown .35s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.8s both,
                        vertical 1s ease-in-out infinite 1.8s alternate;
}
#fullpage .section.renewal .popup .cont_wrap .pop_ttl {
  width: 60%;
  height: 0;
  padding-top: 19%;
}
#fullpage .section.renewal .popup .cont_wrap table {
  display: none;
}
#fullpage .section.renewal .popup .cont_wrap .spTbl {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 60%;
    background: url(https://static.ncsoft.jp/images/event/bns/update/1903/img/renewal/pop_tbl_sp.png) no-repeat center;
    -webkit-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    margin-top: 5%;
}
#fullpage .section.renewal .popup .cont_wrap .cap {
  text-indent: -1em;
  color: #FACD89;
  margin-top: 5%;
}

#loading,
#loading #gauge,
#loading #gauge:before {
    width: 180px;
    height: 82px;
}

}

@media only screen and (min-aspect-ratio: 13/9) {
#sp_msg {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
    width: 100%;
    height: 100%;
    background: #000;
}
#sp_msg .sp_msg_cont i {
    display: block;
    width: 102px;
    height: 90px;
    background: url("https://static.ncsoft.jp/images/event/bns/update/1812/img/common/message_landscape_icon.jpg") no-repeat 50% 0;
    background-size: cover;
    margin: 0 auto 20px auto;
}
#sp_msg .sp_msg_cont p {
    text-align: center;
    color: #999;
}
}