body {

}

.f-oasis_purple{
  color: #7E39E9;
}
.f-oasis_green{
  color: #4DF6A9;
}
.bg-oasis_purple{
  background: #7E39E9;
}

.f-md-oasis_purple{
  color: #7E39E9;
}
@media only screen and (max-width: 769px) {
  .f-fff{
    color: #FFFFFF;
  }
}

@media only screen and (min-width: 769px) {
  #header .menu {
    width: 29%;
    padding: 0px 15px;
    right: 0;
    left: unset;
  }
  #header .menu .bar {
    display: block;
  }
  #header .menu .logo {
    width: 100%;
    flex-shrink: 1;
  }
  #header .menu .items {
    display: none;
  }
  #header_menu{
    left: unset;
  }
}

.wrapper{
  height:100%;
}
.pc_wrapper{
  position: fixed;
  width: 71%;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}
.mobile_wrapper{
  position: relative;
  width: 100%;

}

@media only screen and (min-width: 769px) {
  .mobile_wrapper{
    padding-left: 71%;
  }
}
@media only screen and (max-width: 768px) {
  .pc_wrapper{
    display: none;
  }
}


.dont-drink{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.dont-drink img{
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .dont-drink{
    position: fixed;
    z-index: 10;
  }

}

.target{
  width: 100%;
  height: 100%;
  margin-top: 0vh;
  position: absolute;
  left:0;
  top:0;
}
.target-1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.target-2{
  display: flex;
  align-items: center;
  justify-content: center;
}
.target-2 img{
  width: 150%;
}


.right-marquee{
  width: 70px;
  height:100%;
  position: absolute;
  top:0px;
  right:0px;
  background-image:url(https://assets.niusnews.com/mall/oasis/txt2.png);
  background-size: 16px;
  background-repeat:repeat-y;
  background-position: top 0% left 25px;
  animation:marquee-top 15s linear infinite;
}
@keyframes marquee-top {
  100% {
    background-position: top -740px left 25px;
  }
}




.change-image {
  padding-top: 60%;
  width: 70%;
  margin: auto;
  overflow: hidden;
  position: relative;
  z-index: 1;
  clip-path: polygon(78% 0, 100% 31%, 89% 90%, 23% 100%, 10% 94%, 0 47%, 12% 17%);

}


.change-image-inner div {
  display: block;
  position: relative;
  height: 100%
}

@media only screen and (max-width: 1000px) {


  .change-image {
    height: 75vh
  }
}

@media only screen and (max-height: 580px) {


  .change-image {
    height: 435px;
  }
}

@media only screen and (max-width: 760px) {


  .change-image {
    border-radius: 0 0 14.4927536232vw 0;
    height: 50vh;
    max-height: 90vw;
    width: 90vw;
    margin: -30px -10% -40px;
  }
}


.change-image-inner {
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  will-change: transform;
  z-index: 1;
  opacity: 0;
  -webkit-transform: translate(0, 0) translate3d(0, 0, 0);
  transform: translate(0, 0) translate3d(0, 0, 0);
  -webkit-transition: transform 0s linear;
  transition: transform 0s linear
}


.change-image-inner img {
  overflow: hidden;
  backface-visibility: hidden;
  object-position: center 20%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  width: 100%;
  height: 100%;
  will-change: transform;
  -webkit-transform: translate(0, 0) scale(1) translate3d(0, 0, 0);
  transform: translate(0, 0) scale(1) translate3d(0, 0, 0);
  -webkit-transition: transform 0s linear;
  transition: transform 0s linear
}


.change-image-inner.js-top-main-fadeout {
  -webkit-transform: translate(-102%, 0) translate3d(0, 0, 0);
  transform: translate(-102%, 0) translate3d(0, 0, 0);
  -webkit-transition: transform 2s cubic-bezier(0.45, 0.2, 0.1, 1);
  transition: transform 2s cubic-bezier(0.45, 0.2, 0.1, 1)
}

.change-image-inner.js-top-main-fadeout img {
  -webkit-transform: translate(102%, 0) scale(1.3) translate3d(0, 0, 0);
  transform: translate(102%, 0) scale(1.3) translate3d(0, 0, 0);
  -webkit-transition: transform 2s cubic-bezier(0.45, 0.2, 0.1, 1);
  transition: transform 2s cubic-bezier(0.45, 0.2, 0.1, 1)
}




.bg-little{
  height: calc(70vw * 0.6);
  width: 70%;
  top: calc(50vh - 21vw);
  left: 15%;
  margin: auto;
  position: absolute;
}

.animate-little{
  position: absolute;
  z-index: 1;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.animate-little1{
  width: 142px;
  height: 142px;
  left: -6%;
  top: 16%;
  animation-name: little1;
  background-image:url("https://assets.niusnews.com/mall/oasis/little1-1.png");
}
@keyframes little1{
  50%{
    background-image:url("https://assets.niusnews.com/mall/oasis/little1-1.png");
  }
  100%{
    background-image:url("https://assets.niusnews.com/mall/oasis/little1-2.png");
  }
}
.animate-little2{
  width: 185px;
  height: 210px;
  right: -9%;
  top: 15%;
  animation-name: little2;
  background-image:url("https://assets.niusnews.com/mall/oasis/little2-1.png");
}
@keyframes little2{
  50%{
    background-image:url("https://assets.niusnews.com/mall/oasis/little2-1.png");
  }
  100%{
    background-image:url("https://assets.niusnews.com/mall/oasis/little2-2.png");
  }
}
.animate-little3{
  width: 135px;
  height: 148px;
  left: -10%;
  bottom: 12%;
  animation-name: little3;
  background-image:url("https://assets.niusnews.com/mall/oasis/little3-1.png");
}
@keyframes little3{
  50%{
    background-image:url("https://assets.niusnews.com/mall/oasis/little3-1.png");
  }
  100%{
    background-image:url("https://assets.niusnews.com/mall/oasis/little3-2.png");
  }
}
.animate-little4{
  width: 140px;
  height: 140px;
  right: 0%;
  bottom: 14%;
  animation-name: little4;
  background-image:url("https://assets.niusnews.com/mall/oasis/little4-1.png");
}
@keyframes little4{
  50%{
    background-image:url("https://assets.niusnews.com/mall/oasis/little4-1.png");
  }
  100%{
    background-image:url("https://assets.niusnews.com/mall/oasis/little4-2.png");
  }
}
@media only screen and (max-width: 768px) {

  .bg-little{
    position: absolute;
    height: 50vh;
    max-height: 90vw;
    width: 90vw;
    margin: 0 -10vw;
    top: 70px;
  }
  .animate-little1{
    width: 20vw;
    height: calc(20vw * 142 / 142);
    left: -3%;
    top: 16%;
  }
  .animate-little2{
    width: 20vw;
    height: calc(20vw * 210 / 185);
    right: -4%;
    top: 14%;
  }
  .animate-little3{
    width: 20vw;
    height: calc(20vw * 148 / 135);
    left: 1%;
    bottom: 0%;
  }
  .animate-little4{
    width: 20vw;
    height: calc(20vw * 140 / 140);
    right: 0%;
    bottom: 2%;
  }

}



.top_background{
  background-color: #FFEA00;
}


@media only screen and (max-width: 768px) {
  .top_background{
    background: url("https://assets.niusnews.com/mall/oasis/m_bg.png") center / cover no-repeat;
    background-color: #7E39E4;
  }
}



.pass_btn{
  background: #7E39E9;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  width: 187px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

@media only screen and (max-width: 320px) {
  .pass_btn{
    width: 150px;
  }
}

.icon-remove{
  position: relative;
  animation: remove .4s ease 0s infinite alternate;
  height: 70px;
}
@keyframes remove{
  0%    {top: 0px;}
  100%  {top: 10px;}
}

.H4-title{
  position: relative;
  margin-bottom: calc(1rem + 10px + 8px);
}
.H4-title::after{
  content: '';
  position: absolute;
  bottom: -10px;
  width: 100px;
  height: 2px;
  background: #7E39E4;
  left: calc(50% - 50px);
}

.H4-title.f-fff::after{
  background: #FFFFFF;
}
.H4-title.f-oasis_green::after{
  background: #4DF6A9;
}
.H4-title2{
  margin-bottom: 40px;
}

.H4-title2::after{
  width: 100%;
  left: 0;
  height: 1px;
  bottom: -20px;
}



.panel-video{
  background-color:transparent;
  max-width:100%;
  width: 980px;
  display:none;
  box-shadow:none;
  overflow:visible;
}
.panel-video .button-close{
  position: absolute;
  font-size:24px;
  color:#fff;
  cursor: pointer;
  top:-30px;
  right:30px;
}
.video-container{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-mask{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.3);
}





.marquee-store{
  height: 100px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.marquee-store > div{
  position: absolute;
  width: 100px;
  animation: marquee-store 30s linear infinite;
  display: flex;
}
.marquee-store > div img{
  width: 95px;
  height: 95px;
  margin: 2.5px;
}
@keyframes marquee-store {
  0% { left: 0; }
  100% { left: calc(-100px * 15); }
}



.bgSwiper{
  height: 700px;
}
.bgSwiper .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bgSwiper_absolute{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 1;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
}



.card{
}
.card-faq{
  margin:15px 0px;
  border-radius:5px;
  position: relative;
}
.card-faq::before{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #7E39E4;
  position: absolute;
  bottom: 0;
  left: 0;
}

.card-faq:after{
  content:'+';
  position: absolute;
  font-size:28px;
  color:#7E39E4;
  top:7px;
  right:20px;
  transition: all .3s;
  font-weight: 600;
}

.card-faq.on:after{
  transform: rotate(45deg);
  transform-origin:center center;
}
.question{
  padding:15px 30px 22px;
  font-size:16px;
  font-weight:600;
  cursor: pointer;
  color: #7E39E4;
}
.answer{
  font-size:13px;
  cursor: pointer;
  display: none;
  position: relative;
  color: #000;
}
.answer div{
  margin: 12px auto 40px;
}