@charset "utf-8";

.popuparea1{position:absolute;top:20%;display:flex;background:#fff;z-index:9;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;}
.popuparea1.on{left:0;z-index:20;transition:all 0.5s ease;-webkit-transition:all 0.5s ease;}
.popuparea1 > *{}
.popuparea1 > *.popuplayer{}
.popuparea1 > *.ctr1{position:relative;width:50px;background:#bf9364;cursor:pointer;}
.popuparea1 > *.ctr1 em{display:block;transform:rotate(90deg);margin-top:30px;font-family:"Poppins";font-weight:600;color:#fff;font-size:18px;}
.popuparea1 > *.ctr1 a{position:absolute;left:0px;bottom:0px;width:50px;font-size:0;line-height:0;}
.popuparea1 > *.ctr1 a::after{position:absolute;left:18px;bottom:14px;width:8px;height:8px;border-left:2px solid;border-bottom:2px  solid;border-color:#fff; -webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);content:"";transition:all 0.4s ease;-webkit-transition:all 0.4s ease;}
.popuparea1.on > *.ctr1 a::after{left:22px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}

.popuplayer > div > div{border-left:0px solid #000;box-sizing:border-box;}
.popuplayer > div > div:nth-of-type(1){border:none;}

.quick-right{position:fixed;right:0;top:0;width:100pxpx;height:100%;z-index:11;opacity:0;background:#7d1919;z-index:9999;}
.quick-right.on{animation:fadeInMove2 .6s  cubic-bezier(0.25, 0.1, 0.25, 1.0) both;animation-delay:.0s;}
.quick-right .arr1{position:absolute;right:9px;bottom:200px;color:#fff;transform:rotate(90deg);}
.quick-right .arr1::after{position:absolute;right:-130px;top:4px;width:116px;height:7px;background:url(/sub/img/ico-scroll.png) no-repeat center center;animation:lineani1 1s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;content:"";}
.quick-right .cont1{}
.quick-right .cont1 > ul{margin-top:20px;}
.quick-right .cont1 > ul > li{text-align:center;padding:15px 0;}
.quick-right .cont1 > ul > li span{display:block;color:#fff;font-weight:400;font-size:14px;}
.quick-right .cont1 > ul > li span::before{display:block;margin:0 auto;margin-bottom:8px;width:30px;height:30px;background:url(/sub/img/ico-quick.png) no-repeat left center;background-size:400% 100%;content:"";}
.quick-right .cont1 > ul > li:nth-child(2) span::before{background-position:33% center;}
.quick-right .cont1 > ul > li:nth-child(3) span::before{background-position:67% center;}
.quick-right .cont1 > ul > li:nth-child(4) span::before{background-position:100% center;}

@-webkit-keyframes textUp1 {
  from {opacity:0;transform:translate3d(0, 150%, 0);}
  to {opacity:1;transform:translate3d(0, 0, 0);}
}
@keyframes textUp1 {
  from {opacity:0;transform:translate3d(0, 10%, 0);}
  to {opacity:1;transform:translate3d(0, 0, 0);}
}

@-webkit-keyframes textDown1 {
  from {opacity:0;transform:translate3d(0, -20%, 0);}
  to {opacity:1;transform:translate3d(0, 0, 0);}
}
@keyframes textDown1 {
  from {opacity:0;transform:translate3d(0, -20%, 0);}
  to {opacity:1;transform:translate3d(0, 0, 0);}
}

@-webkit-keyframes textDown2 {
  from {opacity:.7;transform:translate3d(0, -4%, 0);}
  to {opacity:1;transform:translate3d(0, 0, 0);}
}
@keyframes textDown2 {
  from {opacity:.7;transform:translate3d(0, -4%, 0);}
  to {opacity:1;transform:translate3d(0, 0, 0);}
}

@-webkit-keyframes bounce1 {
 from {transform:translate3d(0, -2%, 0);}
  to {transform:translate3d(0, 0, 0);}
}
@keyframes bounce1 {
  from {transform:translate3d(0, -2%, 0);}
  to {transform:translate3d(0, 0, 0);}
}

@-webkit-keyframes afadeInDown{
0%{opacity:0;-webkit-transform:translate3d(0,-30%,0);transform:translate3d(0,-30%,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}
@keyframes fadeInDown1{
0%{opacity:0;-webkit-transform:translate3d(0,-30%,0);transform:translate3d(0,-30%,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}

@-webkit-keyframes drift {
from {-webkit-transform:scale(1.02,1.02);transform:scale(1.02,1.02);}
to {-webkit-transform:rotate(0.002deg) scale(1,1);transform:rotate(0.002deg) scale(1,1);}
}
@keyframes drift {
from {-webkit-transform:scale(1.02,1.02);transform:scale(1.02,1.02);}
to {-webkit-transform:rotate(0.002deg) scale(1,1);transform:rotate(0.002deg) scale(1,1);}
}
@-ms-keyframes drift {
from {-webkit-transform:scale(1.02,1.02);transform:scale(1.02,1.02);}
to {-webkit-transform:rotate(0.002deg) scale(1,1);transform:rotate(0.002deg) scale(1,1);}
}

@-webkit-keyframes fadeInMove1{
0%{opacity:0;-webkit-transform:translate3d(0,-30%,0);transform:translate3d(0,-30%,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}
@keyframes fadeInMove1{
0%{opacity:0;-webkit-transform:translate3d(-30%,-30%,0);transform:translate3d(-30%,-30%,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}

@-webkit-keyframes fadeInMove2{
0%{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}
@keyframes fadeInMove2{
0%{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}

@-webkit-keyframes fadeInMove3{
0%{opacity:0;-webkit-transform:translate3d(0,30%,0);transform:translate3d(0,30%,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}
@keyframes fadeInMove3{
0%{opacity:0;-webkit-transform:translate3d(0,30%,0);transform:translate3d(0,30%,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}

@-webkit-keyframes fadeInMove4{
0%{opacity:0;-webkit-transform:translate3d(30%,30%,0);transform:translate3d(30%,30%,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}
@keyframes fadeInMove4{
0%{opacity:0;-webkit-transform:translate3d(30%,30%,0);transform:translate3d(30%,30%,0)}
to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}

@-webkit-keyframes play-left{
  from{
-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)
  }
  to{
-webkit-transform:translate3d(-8%,0,0);transform:translate3d(-8%,0,0)
  }
}
@-webkit-keyframes play-right{
   from{
-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)
  }
  to{
  -webkit-transform:translate3d(8%,0,0);transform:translate3d(8%,0,0)
  }
}

@-webkit-keyframes lineani1{
0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
100%{opacity:0;-webkit-transform:translate3d(15px,0,0);transform:translate3d(15px,0,0)}
}
@keyframes lineani1{
0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
100%{opacity:0;-webkit-transform:translate3d(15px,0,0);transform:translate3d(15px,0,0)}
}

@keyframes topBubbles {
0% {
background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%
}
50% {
background-position:0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%
}
100% {
background-position:0% 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;
background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%
}
}
@keyframes bottomBubbles {
0% {
background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%
}
50% {
background-position:0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%
}
100% {
background-position:0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;
background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%
}
}

@-webkit-keyframes ratateLoop {
to{transform:rotate(1turn) }
}
@keyframes ratateLoop {
to{transform:rotate(1turn) }
}