@charset "utf-8";



@import url(https://cdn.jsdelivr.net/npm/typeface-nanum-square@1.1.0/nanumsquare.css);



html {

  font-size: 16px;

}

.non_pointer{
  pointer-events: none;
}


body {

  margin: 0;

  padding: 0;

  font-family: "微軟正黑體", Nanum Barun Gothic, sans-serif;

  background: #000;

  color: #3e3e3e;

  font-weight: 400;

  line-height: 24px;

  overflow-x: hidden;

}



img {

  max-width: 100%;

  height: auto;

}



li,

ol,

ul {

  list-style: none;

}



a:hover,

a:focus,

a:active,

a:visited {

  text-decoration: none;

}



::-webkit-scrollbar {

  width: 8px;

  height: 8px

}



::-webkit-scrollbar-button {

  display: none

}



::-webkit-scrollbar-track {

  margin: -1px 0;

  border-left: 1px solid #bdbdbd;

  background: #e0e0e0

}



::-webkit-scrollbar-thumb {

  border: 1px solid #9e9e9e;

  border-right: 0;

  background: #bdbdbd

}



#scene {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;



  overflow: hidden;

}



.story-wrap #scene {

  height: calc(100vh + 92px);

  margin-top: 92px;

}



#gotop {

  position: fixed;

  z-index: 80;

  right: 30px;

  bottom: 30px;

  width: 60px;

  height: 60px;

  cursor: pointer;

  display: none;

}



.modal-dialog {

  top: 50%;

}



.modal.in .modal-dialog,

.modal.fade .modal-dialog {

  -webkit-transform: translate(0, -50%);

  -ms-transform: translate(0, -50%);

  -o-transform: translate(0, -50%);

  transform: translate(0, -50%);

}



.navbar-nav li a,

.navbar-toggle .icon-bar,

.btn-bd-box ul>li>a,

.introduce-btn a:before,

.introduce-btn a:after,

.sidebar,

.sideBtn ul>li>a,

.newbie a {

  -moz-transition: all 0.15s ease-in-out;

  -webkit-transition: all 0.15s ease-in-out;

  transition: all 0.15s ease-in-out;

}



.item {

  -webkit-transition: all .3s;

  transition: all .3s;

}



.sideBtn {

  display: none;

}



/* navbar */



/* ANIMATED X */



.navbar-toggle.x .icon-bar:nth-of-type(1) {

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

  -webkit-transform-origin: 10% 10%;

  -ms-transform-origin: 10% 10%;

  transform-origin: 10% 10%;

}



.navbar-toggle.x .icon-bar:nth-of-type(2) {

  opacity: 0;

  filter: alpha(opacity=0);

}



.navbar-toggle.x .icon-bar:nth-of-type(3) {

  -webkit-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  transform: rotate(-45deg);

  -webkit-transform-origin: 10% 90%;

  -ms-transform-origin: 10% 90%;

  transform-origin: 10% 90%;

}



/* ANIMATED X COLLAPSED */



.sidebar {

  display: none;

}



/* audio play */

.jp-play {

  position: absolute;

  z-index: 5;

  display: block;

  text-indent: -99999em;

  background: transparent url(../images/f04e71c025631ee84fc7434fc7121b70.png) no-repeat -64px 0;

  border: none;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.jp-play:focus {

  outline: none;

}



.jp-play:hover {

  background-position: -64px -40px;

}



.jp-state-playing .jp-play {

  background-position: -104px 0;

}



.jp-state-playing .jp-play:hover {

  background-position: -104px -40px;

}



/* audio play */

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) {

  -webkit-transform: rotate(0);

  -ms-transform: rotate(0);

  transform: rotate(0);

}



.navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) {

  opacity: 1;

  filter: alpha(opacity=100);

}



.navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) {

  -webkit-transform: rotate(0);

  -ms-transform: rotate(0);

  transform: rotate(0);

}



/* END ANIMATED X */



.dropdown-submenu {

  position: relative;



}



.dropdown-submenu .dropdown-menu {

  /* display: none; */

  top: 0;

  left: 100%;

  margin-top: -1px;

}



.dropdown-menu {

  /* display: block !important;

  visibility: hidden; */

  border-radius: 0;

  background-color: #2d2b36;

  width: 100%;

  min-width: 90px;

  border: none;

  /* -webkit-transform: translateY(-10px);

  transform: translateY(-10px); 

  opacity: 0;*/

  margin: 0;

  padding: 0;

}



.dropdown-menu>li>a:focus,

.dropdown-menu>li>a:hover,

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,

.nav .open>a,

.nav .open>a:focus,

.nav .open>a:hover {

  background-color: #3c3a44;

  color: #1d87ff;

}



.navbar-inverse {

  background-color: #33313e !important;

  border: none;

}



.navbar-inverse .navbar-nav>.open>a,

.navbar-inverse .navbar-nav>.open>a:focus,

.navbar-inverse .navbar-nav>.open>a:hover {

  background-color: #33313e;

}



.navbar {

  /* border-bottom: 1px solid #474456; */

  min-height: 88px;

  padding-top: 0;

  padding-bottom: 0;

  margin: 0;

}



.navbar>.container-fluid .navbar-brand {

  margin-left: 30px;

  margin-right: 30px;

  padding: 5px 0 0;

}



.navbar-inverse .navbar-toggle:focus,

.navbar-inverse .navbar-toggle:hover {

  background-color: #2a2833;

}



.nav-link {

  padding: 2rem 0 !important;

}



.navbar-right {

  margin-right: 0;

}



.navbar-brand {

  padding: 0;

  height: auto;

}



.navbar_basic li {

  width: 160px;

  text-align: center;

}



.navbar_basic li>a {

  color: #c8c8c8;

  font-size: 16px;

  padding: 36px 0;

}



.navbar_basic>li>a:after {

  display: block;

  opacity: 0;

  position: absolute;

  top: 19px;

  left: 50%;

  margin-left: -5px;

  width: 10px;

  height: 10px;

  background: url(../images/f04e71c025631ee84fc7434fc7121b70.png) no-repeat 0 0;

  content: "";

  transition: opacity .3s;

  border: none;

}



.navbar_basic>li>a:hover:after,

.open .dropdown-toggle:after,

.dropdown:hover>.dropdown-toggle:after,

.navbar-inverse .navbar-nav>.active .dropdown-toggle:after {

  opacity: 1;

}



.navbar-inverse .navbar-nav>.active>a {

  background: transparent;

}



.dropdown:hover>.dropdown-toggle {

  color: #fff;

}



.navbar-nav .dropdown-menu>li>a,

.navbar-nav .open .dropdown-menu>li>a {

  padding: 20px 0;

}



.navbar-btn {

  margin-top: 25px;

  margin-bottom: 0;

}



.navbar-btn li {

  width: 40px;

  height: 40px;

  margin: 0 3px;

  overflow: hidden;

  text-indent: -10000em;

  background: transparent url(../images/f04e71c025631ee84fc7434fc7121b70.png) no-repeat;

}



.navbar-btn li:first-child {

  background-position: -24px 0;

}



.navbar-btn li:hover:first-child {

  background-position-y: -40px;

}



.navbar-btn li:nth-child(2) {

  background: transparent;

}



.navbar-btn li:nth-child(3) {

  background-position: -184px 0;

}



.navbar-btn li:hover:nth-child(3) {

  background-position: -184px -40px;

}



.navbar-btn li:last-child {

  background-position: -224px 0;

}



.navbar-btn li:hover:last-child {

  background-position: -224px -40px;

}



.navbar-btn li a {

  display: block;

  width: 100%;

  height: 100%;

  padding: 0;

}



.navbar-toggle {

  margin: 0;

  padding: 23px 19px;

  border: none;

  border-radius: 0;

}



.newbie {

  position: fixed;

  right: 10px;

  top: 102px;

}



.newbie a {

  width: 120px;

  height: auto;

  display: block;

  opacity: .8;

}



.newbie a:hover {

  opacity: 1;

}



ul.mobile-icon {

  padding: 0;

  margin: 0;

  display: none;

  float: right;

}



ul.mobile-icon li {

  float: left;

  display: block;

  position: relative;

  width: 60px;

  text-align: center;

}



ul.mobile-icon li:before {

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  width: 1px;

  height: 100%;

  overflow: hidden;

  background: #474456;

  content: "";

}



ul.mobile-icon li a {

  display: inline-block;

  padding: 16px;

}



ul.mobile-icon li:nth-child(3) a {

  padding: 9px;

}



.btn-bd-box {

  margin-left: 20px;

}



.btn-bd-box ul {

  padding: 0;

  margin: 0;

}



.btn-bd-box ul>li {

  display: block;

  float: left;

  margin-right: 1px;

}



.btn-bd-box ul>li:last-child {

  margin-right: 0;

}



.btn-bd-box ul>li>a {

  vertical-align: middle;

  background: #c52624;

  color: #fff;

  display: inline-block;

  padding: 34px 50px;

  font-size: 18px;

}



.btn-bd-box ul>li>a:hover,

.btn-bd-box ul>li>a:focus {

  background: #ff3664;

  color: #fff;

}



/* navbar */
.navbar-brand>img{
  max-height: 90px;
}


/* section0 */

#section0 {}



.s0 {

  background: url(../images/-c06_-_56cb-833_-7a4c.jpg) no-repeat center 0;

  height: calc(100vh - 90px);

  text-align: center;

  position: relative;

  background-size: cover;

  margin: 90px 0 0;

  overflow: hidden;

}



.sub {

  width: 100%;

  height: 100%;

}



.char-sub1 {

  background: transparent url(../images/-c06_-_56cc-5553-6514.png) no-repeat top;

  position: absolute;

  top: 0;

  left: 50%;

  margin-left: -926px;

  width: 405px;

  height: 395px;

}



.char-sub2 {

  position: absolute;

  top: 0;

  left: 50%;

  margin-left: 520px;

  width: 433px;

  height: 583px;

  background: url(../images/-c06_-_56cc-50e8-be0b.png) no-repeat 0 0;

}



.char-sub3 {

  position: absolute;

  bottom: -250px;

  left: 0px;

  margin-left: 0px;

  width: 1250px;

  height: 1650px;

  background: url(../images/-c06_-_56cc-90f9-73c2.png) no-repeat 0 0%;

  background-size: contain;

}



.char-sub4 {

  position: absolute;

  top: -50px;

  right: -3%;

  margin-left: 0px;

  width: 1230px;
  max-width: 70vw;
  height: 1086px;

  background: url(../images/-c06_-_56cc-af06-589f.png) no-repeat 100% 0%;
  background-size: 100%;

}



.char-sub5 {

  position: absolute;

  top: 0px;

  left: 0%;

  margin-left: 0px;

  width: 1920px;
  max-width: 100vw;
  height: 1080px;

  background: url(../images/-c06_-_56cc-fcbc-07ea.png) no-repeat 0 0;

  background-size: 100% auto;

}



.char-sub6 {

  position: absolute;

  top: 20px;

  left: 50%;

  margin-left: 175px;

  width: 332px;

  height: 258px;

  background: url(../images/-c06_-_56cc-0724-aa9_.png) no-repeat 0 0;

  background-size: 100% auto;

}



.char-main {

  opacity: 1;

  position: absolute;

  bottom: -100px;

  left: calc(50% - 275px);
  

  margin-left: 0px;

  width: 550px;

  height: 480px;

  background: url(../images/-c06_-_56cc-a411-92e4.png) no-repeat 50% 0;

  background-size: cover;



}

.char-main-txt{
  transform: scale(3);
  opacity: 0;
  animation: main_scale 0.4s ease-in-out 2.5s 1 forwards;
  
}
@keyframes main_scale{
  0%{
    transform: scale(6);
    opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}


.char-main-deco1 {

  position: absolute;

  top: -60px;

  left: calc(50% - 500px);

  

  width: 868px;

  height: 774px;

  background: url(../images/-c06_-_56cc-607a-e76c.png) no-repeat 0 0;

  background-size: 100% auto;

  transition-delay: 1.5s;

  transition-duration: 1s;

  -webkit-animation: opacity 3s cubic-bezier(.4, 0, 1, 1) 2.75s infinite;

  animation: opacity 3s cubic-bezier(.4, 0, 1, 1) 2.75s infinite;

  opacity: 0;



}

@keyframes flicker{
  0%{
    opacity: 0.3;
  }
  50%{
    opacity: 1; 
  }
  100%{
    opacity: 0.3;
  }
}

@keyframes move_top{
  0%{
    transform: translateY(-20px);
  }
  50%{
    transform: translateY(0px);
  }
  100%{
    transform: translateY(-20px);
  }
}





.char-main-deco2 {

  position: absolute;

  top: 0px;

  left: 0%;

  width: 100vw;

  height: 100vh;

  background: #fff;

  background-size: 100%;

  opacity: 0;
  
  animation: main_shine 0.6s ease-in-out 1.8s 1 forwards;
  
}
@keyframes main_shine{
  0%{
    opacity: 0;
  }
  40%{
    opacity: 0.9;
  }
  60%{
    opacity: 0;
  }

  100%{

    opacity: 0;
  }
}

.char-main-deco3 {

  position: absolute;

  top: -38px;

  left: 10%;

  margin-left: -110px;

  width: 360px;

  height: 460px;

  background: url(../images/-c06_-_56cc-006e-0376.png) no-repeat 0 0;

  background-size: 100% auto;

  transition-delay: .75s;

  transition-duration: 1s;

  opacity: 0;
  animation: flicker 6s ease-in-out 0.8s infinite;

}



.bg-deco-light {

  position: absolute;

  top: 0;

  left: 0;

  width: 105%;

  height: 100%;

  background: url(../images/-c06_-_56cb-9695-b2c0.png) no-repeat 0 0;

  background-size: cover;

  transition-delay: 2.5s;

  transition-duration: 1s;

  -webkit-animation: opacity 5s cubic-bezier(.4, 0, 1, 1) 3s infinite;

  animation: opacity 5s cubic-bezier(.4, 0, 1, 1) 3s infinite;

  opacity: 0;


}

.bg-feather {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../images/-c06_-_56cc-f247-9af_.png) no-repeat 0 0;

  background-size: cover;

  animation: flicker 5s ease-in-out 0.8s infinite;

}



.char-main-deco1.goAnimation,

.char-main-deco3.goAnimation,

.bg-deco-light.goAnimation {

  opacity: 1;

}



.logo {

  position: absolute;

  bottom: -120px;

  left: 0;

  right: 0;

}



.logo-deco1 {

  top: 68px;

  margin-left: -294px;

  width: 75px;

  height: 79px;

  background: url(../images/-c06_-_56cl-6691-3e0_.png) no-repeat 0 0

}



.logo-deco1,

.logo-deco2 
{

  position: absolute;

  left: 50%;

  -webkit-animation: SideWay 2.5s ease-in-out infinite alternate;

  animation: SideWay 2.5s ease-in-out infinite alternate

}



.logo-deco2 {

  top: 47px;

  margin-left: 207px;

  width: 96px;

  height: 63px;

  background: url(../images/-c06_-_56cl-a492-8cfe.png) no-repeat 0 0

}



.logo-deco3 {

  position: absolute;

  top: 208px;

  left: 50%;

  margin-left: 74px;

  width: 61px;

  height: 53px;

  background: url(../images/-c06_-_56cl-a29b-333_.png) no-repeat 0 0;

  -webkit-animation: SideWay 2.5s ease-in-out .1s infinite alternate;

  animation: SideWay 2.5s ease-in-out .1s infinite alternate

}



.logo-deco4 {

  top: 220px;

  margin-left: -219px;

  width: 42px;

  height: 35px;

  background: url(../images/-c06_-_56cl-4637-a876.png) no-repeat 0 0

}



.logo-deco4,

.logo-deco5 {

  position: absolute;

  left: 50%;

  -webkit-animation: SideWay2 2.5s ease-in-out .2s infinite alternate;

  animation: SideWay2 2.5s ease-in-out .2s infinite alternate

}



.logo-deco5 {

  top: 55px;

  margin-left: 135px;

  width: 73px;

  height: 50px;

  background: url(../images/-c06_-_56cl-ea01-f040.png) no-repeat 0 0

}



.subtit {

  position: absolute;

  bottom: 0px;

  left: 0;

  right: 0;

  width: 100%;

  max-width: 437px;

  margin: 0 auto;

}


.sub.play>button{
  position: absolute;
  width: 255px;
  height: 255px;
  left: 50vw;
  top: 37vh;
  transform: translateX(-50%);
  background: url('../images/-c06_-_56cb-6812-18ae.png');
  border: none;
  
}
  
.sub.play>button.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{
  outline: none;
  
}
.sub.play>button.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{
  background-color: unset;
}

.sub.play>button.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover{
  background-color: unset;
  border: none;
  color: unset;
  outline-offset: unset;
  box-shadow: none;
}


.modal-dialog{
  width: 1280px;
  height: 720px;
}
.modal-header{
  padding: 0px;
  border: none;
  width: 100%;
}
.modal-content{
  width: 100%;
  height:100%;
}
.modal-body{
  width:100%;
  height: 100%;
}
.modal-body iframe{
  width: 100%;
  height: 100%;
}




/* section0 */



/* section1 */

.s1 {

  padding: 150px 0;

  height: 100%;

  background: url(../images/-c06_-_56cb-4c91-_bbb.jpg) no-repeat center 0;

  background-size: cover;

  text-align: center;

  overflow: hidden;

}



.item {

  text-align: center;

  display: inline-block;

  overflow: hidden;

  width: 100%;

  height: 2.601rem;

  text-indent: -9999em;

  background-position: 0 0;

  background-repeat: no-repeat;

  background-size: 100% auto;

}



.item:hover {

  background-position: 0 0;

  background-repeat: no-repeat;

  background-size: 100% auto;

}



.item-1 {

  background-image: url(../images/item-1.png);

}



.item-1:hover {

  background-image: url(../images/item-1-hover.png);

}



.item-2 {

  background-image: url(../images/item-2.png);

}



.item-2:hover {

  background-image: url(../images/item-2-hover.png);

}



.item-3 {

  background-image: url(../images/item-3.png);

}



.item-3:hover {

  background-image: url(../images/item-3-hover.png);

}



.item-4 {

  background-image: url(../images/item-4.png);

}



.item-4:hover {

  background-image: url(../images/item-4-hover.png);

}



/* section1 */



/* section2 */



.item img:last-child {

  display: none;

}



.item:hover img:last-child {

  display: block;

  -webkit-animation: fadeIn .3s ease-in-out;

  -moz-animation: fadeIn .3s ease-in-out;

}



.item:hover img:first-child {

  display: none;



}



.item-btn {

  position: absolute;

  right: 0;

  bottom: 0;

  width: 216px;

  height: 77px;

  background: url(../images/c2906c2dc2975d205f57605a141c7307.png) no-repeat 0 0;

  text-indent: -9999px;

  background-size: 100% auto;

}



a.item .item-btn:after {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 243px;

  height: 100%;

  content: "";

  background: url(../images/c42afbf8d73adf35f04fbcf3317a30b5.png) no-repeat -32px 0;

  transition: all .3s;

  background-size: 100% auto;

}



.item-btn:hover:after {}



/* section3 */



footer {

  position: relative;

  overflow: hidden;

  width: 100%;

  z-index: 70;

}



.copyright {

  background-color: #23222b;

  text-align: center;

  padding: 20px 15px;

}
.particles{
  position: absolute;
  top: 0px;
}



@media (max-width: 1600px) {

  .navbar_basic li {

    width: 120px;

  }



  .btn-bd-box ul>li>a {

    padding: 34px 20px;

  }



  .navbar>.container-fluid .navbar-brand {

    margin-right: 5px;

    margin-left: 0;

  }



  .btn-bd-box {

    margin-left: 10px;

  }


  .modal-dialog{
    width: 1200px;
    height: 570px;
  }
}



@media (max-width: 1200px) {

  .btn-bd-box {

    margin-left: 0;

  }



  .navbar_basic li {

    width: 90px;

  }



  .navbar-btn li {

    margin: 0 1px;

  }



  .btn-bd-box ul>li>a {

    padding: 34px 15px;

  }



  .navbar>.container-fluid .navbar-brand {

    margin-right: 0;

  }
  .char-main-deco3{
    display: none;
  }
  .char-sub5{
    top: 150px;
  }
  .modal-dialog{
    width: 1000px;
  }

  .char-sub4{
    background: url(../images/-c06_-_56cc-af06-589f.png) no-repeat;
    background-position: 0% 100%;
    background-size: 100% auto;
    height: 80vh;
    max-width: unset;
    width: 900px;
    right: -45%;
    bottom: 0px;
    top: unset;
    
  }
  .char-sub3{
    background: url(../images/-c06_-_56cc-90f9-73c2.png) no-repeat;
    background-position: 100% 0%;
    background-size: contain;
    height: 87vh;
    width: 780px;
    bottom: 0px;
    left: -30%;
    top: unset;
    
  }
  .char-main-deco1{
    top: unset;
    bottom: 5vh;
  }
      
    
  


}



@media (max-width: 1000px) {



  .navbar-fixed-bottom .navbar-collapse,

  .navbar-fixed-top .navbar-collapse {

    max-height: 441px;

  }



  .movie-btn:hover {

    background-position-y: -1.6rem;

  }



  .s0 {

    height: calc(100vh - 58px);

    margin-top: 58px;

  }



  .system-btn {

    margin: 0.62rem auto;

    width: 4.54rem;

    height: 0.94rem;

  }



  .system-btn:after {

    width: 4.91rem;

    background-position: -0.46rem 0;

  }



  ul.mobile-icon,

  .navbar-toggle {

    display: block;

  }



  .navbar_basic li {

    width: 100%;

  }



  .btn-bd-box {

    margin-left: 10px;

  }



  .dropdown-submenu .dropdown-menu {

    display: block;

  }



  .dropdown-toggle::after {

    top: 5px;

  }



  /* hamburger */

  /* .dropdown:hover .dropdown-menu,   */

  .navbar-btn,

  .sub1,

  .sub2,
  .sub5 {

    display: none !important;

  }



  .open>.dropdown-menu {

    display: block !important;

  }



  .navbar-nav .open .dropdown-menu {

    background-color: #2d2b36;

  }



  .navbar>.container-fluid .navbar-brand {

    width: 123px;

    margin-left: 15px;

    margin-right: 0;

    padding: 0;

  }



  .navbar {

    min-height: 60px;

  }



  .navbar-header {

    float: none;

  }



  .navbar-left,

  .navbar-right {

    float: none !important;

  }



  .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }



  .navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }



  .navbar-collapse.collapse {

    display: none !important;

  }



  .navbar-nav {

    float: none !important;

    margin-top: 7.5px;

  }



  .navbar-nav>li {

    float: none;

  }



  .navbar-nav>li>a {

    padding-top: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid #474456;

  }



  .navbar_basic>li>a:after {

    top: 6px;

  }



  .item-btn {

    width: 2.16rem;

    height: 0.77rem;

  }



  a.item .item-btn:after {

    width: 2.43rem;

    background-position: -0.32rem 0;

  }



  .collapse.in {

    display: block !important;

  }



  /* hamburger */



  .btn-bd-box ul>li>a {

    display: none !important;

  }



  .story-wrap #scene {

    margin-top: 60px;

    height: calc(100vh + 60px);

  }
  .modal-dialog{
    width: 768px;
    height: 450px;
  }

}



@media (max-width: 991px) {

  .item {

    height: 6.129rem;

  }

}



@media (max-width: 767px) {

  .char-main {

    width: 70vw;

    height: auto;

    margin-left: -3rem;

    top: 60vh;
    left: 54%;
    
    background-size: 100%;
  }



  .char-sub5 {

    width: 5.96rem;

    height: 10.1rem;

    margin-left: -5.98rem;

    top: 0;

  }



  .char-sub6 {

    width: 3.32rem;

    height: 2.58rem;

    margin-left: 1rem;

    top: 0.2rem;

  }
  



  

  

  .char-main-deco3 {

    

    display: none;

  }
  .char-main-deco1{
    width: 7.47rem;
    height: 10.07rem;
    margin-left: -3rem;
    top: 15%;
    left: 10%;

  }



  .bg-feather {

    background-position: 8% 0;

    background-size: cover;

  }



  .logo {

    bottom: unset;
    width: 80vw;
    left: 10vw;
    top: 58vh;

  }
  .sub.play>button{
    top: 50vh;
    bottom: 0rem;
  }


  .subtit {

    bottom: 1.15rem;

  }



  .s1 {

    padding: 1rem 0;

  }



  .subtit,

  .decobox {

    display: none;

  }
  .modal-dialog{
    width: 100vw;
    height: 32vh;
  }
  .modal-dialog{
    margin: 0px auto;
  }

}



@media (max-width: 480px) {



  /* sidebar */

  .sidebar {

    position: fixed;

    display: block;

    right: -80px;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    z-index: 95;

    width: 80px;

    height: auto;

    background: #ff005a;

  }



  .sidebar.show {

    right: 0;

  }



  .sidebar a {

    display: inline-block;

    padding: 5px;

  }



  .copyright {

    padding: 10px 15px;

  }



  .side-btn {

    position: absolute;

    top: 0;

    width: 35px;

    height: 100%;

    background: #ff005a;

    z-index: 999;

    left: -35px;

    border: none;

    border-right: 1px solid #ff5a95;

    cursor: pointer;

    display: block;

    outline: none;

    padding: 0;

    text-align: center;

  }



  .side-btn i {

    display: block;

    padding: 5px;

    margin: 0 auto;

    -webkit-transform: rotateY(0deg);

    -ms-transform: rotateY(0deg);

    transform: rotateY(0deg);

    -moz-transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

  }



  .sidebar.show .side-btn i {

    -webkit-transform: rotateY(180deg);

    -ms-transform: rotateY(180deg);

    transform: rotateY(180deg);

  }



  /* sidebar */



  .sideBtn {

    position: fixed;

    right: 5px;

    bottom: 5px;

    z-index: 999;

    display: block;

  }



  .sideBtn ul {

    margin: 0;

    padding: 0;

  }



  .sideBtn ul>li {

    /* float: left; */

    display: block;

  }



  .sideBtn ul>li:first-child {

    margin-bottom: 5px;

  }



  .sideBtn ul>li>a {

    display: inline-block;

    color: #fff;

    width: 80px;

    height: auto;

    text-align: center;

    line-height: 1.2;

    opacity: .85;

  }



  .sideBtn ul>li>a:hover {

    opacity: 1;

  }



  #gotop,

  .newbie {

    display: none !important;

  }



  .nopadding {

    padding: 0;

  }



  .navbar>.container-fluid .navbar-brand {

    margin-left: 5px;

  }
  .char-sub4{
    width: 700px;
    right: -81%;
    
    
  }
  .char-sub3{
    width: 730px;
    height: 90vh;
    left: -85%;  
  }

}



@media (max-width: 320px) {

  .navbar>.container-fluid .navbar-brand {

    width: 102px;

  }



  .navbar {

    min-height: 50px;

  }



  .navbar-toggle {

    padding: 18px 14px;

  }



  ul.mobile-icon li {

    width: 50px;

  }



  ul.mobile-icon li a {

    padding: 11px;

  }



  .s0 {

    height: calc(100vh - 48px);

    margin-top: 48px;

  }

}



.landscape {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  overflow: auto;

  background: #33313e;

  display: none;

  z-index: 9999;

}



.landscape span {

  position: absolute;

  right: 0;

  top: 50%;

  margin: 0;

  width: 100%;

  text-align: center;

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

}



.landscape span>p {

  color: #ccc;

  margin: 0;

  font-size: 16px;

}



@media only screen and (orientation: landscape) and (max-device-width: 850px) {

  .landscape {

    display: block

  }

}