*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
-webkit-tap-highlight-color:transparent;
-webkit-text-size-adjust:none;
text-size-adjust:none}
body,html{
background:#33557a;
width:100%;
height:100%;
overflow:hidden}
body{
font-size:.32rem;
margin:0 auto;
color:#fff}
.hide{
display:none}
::-webkit-scrollbar{
width:.1777777778rem}
::-webkit-scrollbar-track{
border-radius:.0888888889rem;
background:#fffae0}
::-webkit-scrollbar-thumb{
border-radius:.0888888889rem;
background:#c46868}
video::-webkit-media-controls{
display:none!important}
video::-webkit-media-controls-panel{
display:none!important}
@media screen and (orientation:portrait){
#wrapper-rotate{
position:absolute;
top:50%;
left:50%;
width:100vmax!important;
height:100vmin!important;
-webkit-transform:translate(-50%,-50%) rotate(90deg);
-moz-transform:translate(-50%,-50%) rotate(90deg);
-ms-transform:translate(-50%,-50%) rotate(90deg);
transform:translate(-50%,-50%) rotate(90deg);
transform-origin:center center;
z-index:1}
#wrapper{
background:#5c280f;
position:relative!important;
top:auto!important;
left:auto!important;
width:100vmax!important;
height:100vmin!important;
-webkit-transform:none!important;
transform:none!important;
transform-origin:0 0!important}
.article-modal,.loading,.video-open{
position:absolute!important;
top:50%!important;
left:50%!important;
right:auto;
bottom:auto;
width:100vmax!important;
height:100vmin!important;
-webkit-transform:translate(-50%,-50%) rotate(90deg);
-moz-transform:translate(-50%,-50%) rotate(90deg);
-ms-transform:translate(-50%,-50%) rotate(90deg);
transform:translate(-50%,-50%) rotate(90deg);
transform-origin:center center}
}
@media screen and (orientation:landscape){
#wrapper{
position:absolute;
top:0;
left:0;
width:100vw!important;
height:100vh!important}
}
.pauseBtn,.playBtn{
width:.8888888889rem;
height:.8888888889rem;
position:fixed;
top:.3555555556rem;
right:.3555555556rem;
z-index:99}
.pauseBtn{
background:url(../images/i-pause.png) center/cover no-repeat}
.playBtn{
background:url(../images/i-play.png) center/cover no-repeat;
animation:musicRotate 2s linear infinite}
.article-modal,.loading,.video-open{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:999}
.loading{
background:url(../new/p0/p0_bg.jpg) center/cover no-repeat}
.loading .loading-title{
width:11.27rem;
position:absolute;
top:1.7777777778rem;
left:50%;
transform:translateX(-50%)}
.loading .loading-pre{
background:none;
width:100%;
height:.5333333333rem;
position:absolute;
top:5.7rem;
left:50%;
transform:translateX(-50%);
text-align:center;
color:#fff;
font-size:.32rem;
line-height:.5333333333rem;
font-weight:400;
text-shadow:0 .02rem .04rem rgba(0,0,0,.5)}
.loading .loading-bar-wrap{
width:4.8rem;
height:.14rem;
position:absolute;
top:6.35rem;
left:50%;
transform:translateX(-50%);
z-index:2;
-webkit-transition:opacity .3s ease-out;
transition:opacity .3s ease-out}
.loading .loading-bar-track{
width:100%;
height:100%;
background:rgba(255,255,255,.25);
border:1px solid rgba(255,255,255,.5);
border-radius:.1rem;
overflow:hidden;
box-shadow:0 .02rem .08rem rgba(0,0,0,.3)}
.loading .loading-bar-fill{
width:0%;
height:100%;
background:#ffffff;
border-radius:.1rem;
box-shadow:0 0 .08rem rgba(255,255,255,.9);
-webkit-transition:width .15s ease-out;
transition:width .15s ease-out}
.loading .i-start{
border:none;
background:url(../new/p0/p0_按钮.png) center/contain no-repeat;
height:1.6088888889rem;
width:5.6rem;
margin-left:-2.8rem;
position:absolute;
top:6.5777777778rem;
left:50%;
font-size:0;
color:#fff;
display:none;
cursor:pointer}
.loading .i-start.animate{
display:block;
animation:zoomIn2 1s linear infinite alternate}
.loading .loading-tips{
width:5rem;
height:auto;
position:absolute;
bottom:.4rem;
left:50%;
transform:translateX(-50%)}
.video-open{
background:url(../images/bg-loading.png) center/cover no-repeat;
display:none}
.video-open video{
width:auto;
height:10rem;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:1;
-webkit-transform:translate(-50%,-50%) translateZ(0);
transform:translate(-50%,-50%) translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(white,#000);
mask-image:radial-gradient(white,#000)}
.video-open button{
background:rgba(0,0,0,.45);
border:1.5px solid rgba(255,255,255,.7);
border-radius:.36rem;
text-align:center;
color:#fff;
font-weight:700;
width:auto;
min-width:2.4rem;
height:.72rem;
line-height:.7rem;
font-size:.34rem;
padding:0 .35rem;
box-shadow:0 .04rem .1rem rgba(0,0,0,.3);
position:absolute;
top:.4rem;
right:.4rem;
z-index:2;
cursor:pointer}
.article-modal{
background:rgba(0,0,0,.5);
display:none}
.article-modal .article-modal-content{
width:4.9422222222rem;
height:8.7822222222rem;
background:rgba(255,255,255,.25);
border-radius:.1955555556rem;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)}
.article-modal .i-close{
background:url(../images/i-close.png) center/cover no-repeat;
width:.5333333333rem;
height:.5333333333rem;
font-size:0;
position:absolute;
left:4.6311111111rem;
top:-.2666666667rem;
cursor:pointer}
.article-modal .article-iframe{
width:4.5422222222rem;
height:8.3111111111rem;
background-color:#fffae0;
border-radius:.1866666667rem;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)}
.article-modal iframe{
width:4.0355555556rem;
height:7.9111111111rem;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)}
#wrapper{
position:absolute;
z-index:1;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior:none;
scrollbar-width:none;
width:100vw;
height:100vh;
display:none}
#wrapper::-webkit-scrollbar{
display:none}
.scroll-tip{
position:absolute;
right:.45rem;
bottom:.4rem;
z-index:100;
display:-webkit-flex;
display:flex;
align-items:center;
-webkit-align-items:center;
padding:0;
background:none;
border:none;
color:#ffffff;
font-size:.38rem;
font-weight:400;
letter-spacing:.02rem;
line-height:1;
pointer-events:none;
text-shadow:0 .02rem .06rem rgba(0,0,0,.55);
opacity:0;
-webkit-transition:opacity .5s ease-out;
transition:opacity .5s ease-out}
.scroll-tip.show{
opacity:.85}
.scroll-tip .tip-text{
display:inline-block;
line-height:1;
vertical-align:middle}
.scroll-tip .tip-arrow{
display:-webkit-inline-flex;
display:inline-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
font-family:sans-serif;
font-size:.54rem;
font-weight:400;
line-height:1;
margin-left:.12rem;
position:relative;
top:-.03rem;
text-shadow:0 .02rem .06rem rgba(0,0,0,.5);
-webkit-animation:tipMoveRight 1.2s infinite;
animation:tipMoveRight 1.2s infinite}
@-webkit-keyframes tipMoveRight{
0%,100%{-webkit-transform:translateX(0);opacity:.4}
50%{-webkit-transform:translateX(.1rem);opacity:1}
}
@keyframes tipMoveRight{
0%,100%{transform:translateX(0);opacity:.4}
50%{transform:translateX(.1rem);opacity:1}
}
#scroller{
position:relative;
z-index:1;
width:388.8888888889rem;
height:10rem;
overflow:hidden}
.scroller-bg{
display:-webkit-flex;
display:flex;
width:388.8888888889rem;
height:10rem;
font-size:0;
line-height:0;
letter-spacing:-1em}
.scroller-bg .slice-item{
position:relative;
height:100%;
flex-shrink:0;
-webkit-flex-shrink:0;
margin-right:-1px;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform:translateZ(0);
transform:translateZ(0)}
.scroller-bg .slice-item:last-child{
margin-right:0!important;
-webkit-flex-grow:1!important;
flex-grow:1!important;
min-width:9.2rem!important}
.scroller-bg .slice-item .bg-img{
width:calc(100% + 1px);
height:100%;
display:block;
vertical-align:top;
border:none;
outline:none;
image-rendering:-webkit-optimize-contrast;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden}
.scroller-bg .slice-item .text-img{
position:absolute;
left:0;
top:0;
width:calc(100% + 1px);
height:100%;
z-index:2;
display:block;
vertical-align:top;
border:none;
outline:none;
opacity:0;
image-rendering:-webkit-optimize-contrast;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform:translate3d(0,0.5rem,0);
transform:translate3d(0,0.5rem,0);
-webkit-transition:opacity .8s cubic-bezier(.25,1,.5,1),-webkit-transform .8s cubic-bezier(.25,1,.5,1);
transition:opacity .8s cubic-bezier(.25,1,.5,1),transform .8s cubic-bezier(.25,1,.5,1);
will-change:opacity,transform}
.scroller-bg .slice-item .text-img.aos-animate{
opacity:1;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)}
.scroller-bg video{
width:auto;
height:10rem;
float:left;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(white,#000);
mask-image:radial-gradient(white,#000)}
.scroller-main{
width:388.8888888889rem;
height:10rem;
position:absolute;
left:0;
top:0;
z-index:5}
.scroller-main .abs{
position:absolute}
.scroller-main .video-full{
width:auto;
height:10rem;
display:block;
position:absolute;
top:0;
z-index:1;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(white,#000);
mask-image:radial-gradient(white,#000)}
.scroller-main .op{
height:10rem;
top:0;
z-index:2;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(white,#000);
mask-image:radial-gradient(white,#000)}
.scroller-main .mask{
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(white,#000);
mask-image:radial-gradient(white,#000);
z-index:9!important}
.scroller-main .main-item{
width:18.2044444444rem;
height:10rem;
position:relative;
float:left}
.scroller-main .sub-title{
color:#faf3a1;
font-family:stFont;
font-size:.48rem;
line-height:.6933333333rem;
text-indent:2em;
position:absolute;
text-align:justify}
.scroller-main .i-scroll{
background:url(../images/i-scroll-white.png) left center/3.9466666667rem .4088888889rem no-repeat;
width:4rem;
height:.4088888889rem;
font-size:0;
position:absolute;
animation:fadeIn 1s linear infinite alternate}
.scroller-main .video-item{
background:url(../images/i-list-video.png) .5777777778rem .4rem/5.9377777778rem 2.3644444444rem no-repeat;
width:7.1111111111rem;
height:3.1644444444rem;
position:absolute;
cursor:pointer}
.scroller-main .video-item h2{
font-family:stFont;
font-size:.4444444444rem;
line-height:.5955555556rem;
height:1.1911111111rem;
margin-top:.8888888889rem;
padding-left:2rem;
display:flex;
align-items:center}
.scroller-main .video-item h2 span{
width:4.0888888889rem;
display:-webkit-box;
text-overflow:ellipsis;
line-clamp:3;
-webkit-line-clamp:3;
/*! autoprefixer: off */-webkit-box-orient:vertical;
overflow:hidden}
.scroller-main .video-item p{
padding-left:1.7333333333rem;
font-size:.32rem;
text-indent:2em;
text-align:justify;
text-shadow:0 0 .24rem #000}
.scroller-main .video-item .img-thumb{
display:block;
height:3.1644444444rem;
width:1.7777777778rem;
object-fit:cover;
border:.0088888889rem solid #a07d3e;
border-radius:.4444444444rem 0 .4444444444rem 0;
position:absolute;
top:0;
left:0}
.scroller-main .video-item .i-video{
background:url(../images/i-video.png) center/cover no-repeat;
height:.8533333333rem;
margin-top:-.4266666667rem;
width:.8533333333rem;
position:absolute;
top:50%;
left:.4444444444rem}
.scroller-main .video-item .i-view-video{
background:url(../images/i-view-video.png) center/cover no-repeat;
width:1.7866666667rem;
height:.3555555556rem;
font-size:0;
position:absolute;
right:0;
bottom:.3555555556rem}
.scroller-main .video-main{
background:url(../images/i-bg.png) 0 0/15.8488888889rem 3.1288888889rem no-repeat;
width:15.8488888889rem;
height:3.1288888889rem}
.scroller-main .video-main .video-main-text{
font-family:stFont;
font-size:.48rem;
line-height:.6933333333rem;
width:7.7333333333rem;
text-align:justify;
text-indent:2em;
padding:.2666666667rem}
.scroller-main .video-main .video-main-list{
width:8.8888888889rem;
position:absolute;
top:-.5688888889rem;
left:7.9466666667rem}
.scroller-main .video-main .video-main-list li{
position:relative;
width:1.8666666667rem;
float:left;
margin-right:.32rem}
.scroller-main .video-main .video-main-list li::after{
background:url(../images/i-video.png) center/.8533333333rem no-repeat;
content:"";
width:.8533333333rem;
height:.8533333333rem;
position:absolute;
top:.7822222222rem;
margin-left:-.4266666667rem;
left:50%}
.scroller-main .video-main .video-main-list img{
width:1.5111111111rem;
height:2.6844444444rem;
display:block;
object-fit:cover;
border-radius:.6133333333rem 0 .6133333333rem 0;
margin:0 auto}
.scroller-main .video-main .video-main-list p{
background:#11438f;
border-radius:.1777777778rem;
width:1.8666666667rem;
height:2.1511111111rem;
padding-top:1.3333333333rem;
margin-top:-1.2444444444rem}
.scroller-main .video-main .video-main-list span{
display:-webkit-box;
text-overflow:ellipsis;
line-clamp:2;
-webkit-line-clamp:2;
/*! autoprefixer: off */-webkit-box-orient:vertical;
overflow:hidden;
text-align:center;
font-size:.2488888889rem;
line-height:.3555555556rem}
.scroller-main .video-list{
position:absolute}
.scroller-main .video-list li{
background:rgba(255,255,255,.1);
width:6.5244444444rem;
height:1.1022222222rem;
border-radius:.3377777778rem;
padding:.0888888889rem .4977777778rem;
margin-bottom:.4888888889rem;
display:table}
.scroller-main .video-list li:nth-child(2n){
background:rgba(255,255,255,.25);
margin-left:2.0888888889rem}
.scroller-main .video-list li p{
font-family:stFont;
font-size:.3377777778rem;
line-height:.4266666667rem;
padding-left:.4977777778rem;
display:table-cell;
vertical-align:middle;
cursor:pointer;
position:relative}
.scroller-main .video-list li p::after{
background:url(../images/i-point.png) 0 center/.2666666667rem no-repeat;
content:"";
width:.2666666667rem;
height:.2666666667rem;
position:absolute;
top:50%;
left:0;
margin-top:-.1333333333rem;
animation:fadeIn 1s linear infinite alternate}
.scroller-main .video-item{
bottom:.2666666667rem;
left:-2.1333333333rem;
z-index:3}
.scroller-main .video-single{
bottom:.8888888889rem;
left:.2666666667rem;
z-index:3}
.scroller-main .video-single::after{
background:url(../images/i-video.png) center/.8533333333rem no-repeat;
content:"";
width:.8533333333rem;
height:.8533333333rem;
position:absolute;
top:.96rem;
margin-left:-.4266666667rem;
left:50%}
.scroller-main .video-single img{
background:#fff;
width:1.5111111111rem;
height:2.6844444444rem;
display:block;
object-fit:cover;
border-radius:.6133333333rem 0 .6133333333rem 0;
margin:0 auto;
border:.0355555556rem solid #77888d}
.scroller-main .video-single p{
background:#11438f;
border-radius:.1777777778rem;
width:1.8666666667rem;
height:1.5111111111rem;
padding-top:1.3333333333rem;
margin-top:-1.2444444444rem;
font-size:0}
.scroller-main .m1 .gif1{
height:10rem;
top:0;
left:0}
.scroller-main .m1 .rain{
background:url(../images/gif01.gif) left top/auto 10rem repeat-x;
position:absolute;
width:20.4444444444rem;
height:10rem;
top:0;
left:0;
z-index:5;
opacity:.2}
.scroller-main .m1.animation .title1{
opacity:1;
animation:fadeInUp .7s ease-in-out both}
.scroller-main .m1.animation .title2{
opacity:1;
animation:zoomIn 1s ease-in-out .5s both}
.scroller-main .m1.animation .i-start{
opacity:1;
animation:fadeIn 1s ease-in-out 1.5s both}
.scroller-main .m1.animation .logo{
opacity:1;
animation:fadeIn 1s ease-in-out 2.2s both}
.scroller-main .m1 .main-opa{
width:18.2044444444rem;
height:10rem;
position:absolute;
left:0;
top:0;
z-index:4;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(white,#000);
mask-image:radial-gradient(white,#000)}
.scroller-main .m1 .title-center{
width:14.5955555556rem;
height:10rem;
position:absolute;
left:2.4622222222rem;
top:0;
z-index:5;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(white,#000);
mask-image:radial-gradient(white,#000)}
.scroller-main .m1 .title1{
width:8.5511111111rem;
margin-left:-4.2755555556rem;
left:50%;
top:2.0622222222rem;
opacity:0;
z-index:4}
.scroller-main .m1 .title2{
width:14.5955555556rem;
margin-left:-7.2977777778rem;
left:50%;
top:2.5511111111rem;
opacity:0;
z-index:4}
.scroller-main .m1 .i-start{
width:5.6rem;
margin-left:-2.8rem;
left:50%;
top:6.8444444444rem;
opacity:0;
z-index:4}
.scroller-main .m1 .logo{
width:5.0666666667rem;
margin-left:-2.5333333333rem;
left:50%;
top:8.8088888889rem;
opacity:0;
z-index:4}
.scroller-main .m1 .video01{
z-index:3}
.scroller-main .m2 .op01{
left:0;
z-index:4;
height:10rem}
.scroller-main .m2 .op02{
height:10rem;
left:8rem;
top:0;
z-index:4}
.scroller-main .m2 .video02{
left:0;
z-index:1}
.scroller-main .m2 .gif2{
top:0;
left:0;
z-index:1;
height:10rem}
.scroller-main .m2 .video03{
left:12rem}
.scroller-main .m2 .t1{
width:4.1422222222rem;
top:1.1288888889rem;
left:12.7377777778rem;
z-index:3}
.scroller-main .m2 .sub-title{
width:8.1955555556rem;
top:4.96rem;
left:12.7377777778rem;
z-index:3}
.scroller-main .m2 .i-scroll{
left:12.7377777778rem;
top:7.8666666667rem;
z-index:3}
.scroller-main .m3 .p-plan{
width:12.1422222222rem;
top:0;
right:0;
z-index:3}
.scroller-main .m4 .ani04{
z-index:3;
left:5.8666666667rem}
.scroller-main .m4 .op04{
height:10rem;
left:14.1333333333rem;
top:0;
z-index:2}
.scroller-main .m4 .i-hand{
width:6.6933333333rem;
left:15.9111111111rem;
bottom:0;
z-index:3}
.scroller-main .m4 .i-hand1{
width:2.5511111111rem;
top:4.8888888889rem;
left:11.9644444444rem;
z-index:3;
opacity:0;
animation:handAppear1 4s ease-in-out both infinite}
.scroller-main .m4 .i-hand2{
width:2.5511111111rem;
top:6.3111111111rem;
left:12.8rem;
z-index:3;
opacity:0;
animation:handAppear2 4s ease-in-out both infinite}
.scroller-main .m4 .i-hand3{
width:2.5511111111rem;
top:7.5733333333rem;
left:12.2222222222rem;
z-index:3;
opacity:0;
animation:handAppear3 4s ease-in-out both infinite}
.scroller-main .m4 .list-text{
background:url(../images/i-text.png) center/cover no-repeat;
width:7.76rem;
height:3.4666666667rem;
top:.8888888889rem;
left:1.9288888889rem;
position:relative;
cursor:pointer}
.scroller-main .m4 .list-text h2{
font-family:stFont;
font-size:.4444444444rem;
line-height:.5333333333rem;
padding:.0444444444rem 0 0 .1777777778rem}
.scroller-main .m4 .list-text p{
text-indent:2em;
font-size:.2666666667rem;
line-height:.6222222222rem;
padding:.2666666667rem 0 0 .1777777778rem;
text-align:justify}
.scroller-main .m4 .list-text .i-view{
width:1.84rem;
right:0;
bottom:.3288888889rem}
.scroller-main .m4 .i-scroll{
left:3.7333333333rem;
bottom:.1777777778rem}
.scroller-main .m4 .p1{
width:10.2844444444rem;
left:.8888888889rem;
bottom:0}
.scroller-main .m4 .i-text1{
width:15.3244444444rem;
height:4.1066666667rem;
padding:.2222222222rem 1.1555555556rem;
top:.8622222222rem;
left:0;
font-family:stFont;
font-size:.48rem;
line-height:.6933333333rem;
text-indent:2em;
text-align:justify;
z-index:3;
color:#faf3a1}
.scroller-main .m4 .p0{
width:12.1777777778rem;
top:3.0577777778rem;
left:.5333333333rem}
.scroller-main .m5{
font-family:stFont;
line-height:.3733333333rem;
text-align:center}
.scroller-main .m5 .video05{
left:3.5555555556rem}
.scroller-main .m5 .i-text{
background:url(../images/i-title.png) center/cover no-repeat;
width:9.6355555556rem;
height:1.2622222222rem;
padding:.2488888889rem 0;
top:.8888888889rem;
left:13.4577777778rem;
font-size:.3555555556rem}
.scroller-main .m6 .op06{
height:10rem;
left:1.9022222222rem;
top:0;
z-index:2}
.scroller-main .m6 .video-list{
top:3.3777777778rem;
left:4.2666666667rem;
z-index:3}
.scroller-main .m7 .t2{
width:7.2177777778rem;
top:1.1555555556rem;
left:-1.3866666667rem;
z-index:3}
.scroller-main .m7 .sub-title{
width:12.0177777778rem;
top:5.1555555556rem;
left:-1.3866666667rem;
z-index:3}
.scroller-main .m7 .i-scroll{
top:7.0222222222rem;
left:-1.3866666667rem;
z-index:3}
.scroller-main .m7 .op07{
height:10rem;
right:-3.68rem;
top:0;
z-index:2}
.scroller-main .m7 .video-item{
top:3.1111111111rem;
left:14.0266666667rem;
z-index:3}
.scroller-main .m8 .video08{
left:-4.4444444444rem}
.scroller-main .m8 .text{
font-family:stFont;
font-size:.48rem;
line-height:.6933333333rem;
width:11.2888888889rem;
position:absolute;
top:1.8666666667rem;
left:14.5777777778rem;
text-indent:2em;
text-align:justify;
z-index:3}
.scroller-main .m8 .i-scroll{
top:4.2666666667rem;
left:14.5777777778rem;
z-index:3}
.scroller-main .m9 .op09{
left:-4.2666666667rem;
z-index:2}
.scroller-main .m9 .video-item{
top:6.2933333333rem;
left:13.8933333333rem;
z-index:3}
.scroller-main .m11 .v1{
top:1.0222222222rem;
left:0;
z-index:3}
.scroller-main .m11 .v2{
top:4.4444444444rem;
left:2.96rem;
z-index:3}
.scroller-main .m11 .i-scroll{
top:8.16rem;
left:3.3422222222rem;
z-index:3}
.scroller-main .m12 .op12{
height:10rem;
left:-8.8711111111rem;
top:0;
z-index:2}
.scroller-main .m12 .t3{
width:4.4177777778rem;
top:1.1555555556rem;
left:-2.2755555556rem;
z-index:3}
.scroller-main .m12 .sub-title{
width:9.3333333333rem;
top:5.2088888889rem;
left:-2.2755555556rem;
z-index:3}
.scroller-main .m12 .i-scroll{
top:8.3377777778rem;
left:-2.2755555556rem;
z-index:3}
.scroller-main .m12 .p2{
position:absolute;
width:6.0888888889rem;
top:1.4044444444rem;
left:11.5377777778rem;
z-index:3}
.scroller-main .m13 .video13{
left:3.7333333333rem}
.scroller-main .m13 .op13{
width:auto;
height:10rem;
left:0;
top:0;
z-index:3}
.scroller-main .m13 .gif13{
display:block;
width:auto;
height:10rem;
left:1.5822222222rem;
top:0;
z-index:2}
.scroller-main .m13 .v1{
top:1.2rem;
left:3.3066666667rem;
z-index:3}
.scroller-main .m13 .v2{
top:5.1377777778rem;
left:2.0622222222rem;
z-index:3}
.scroller-main .m13 .i-scroll{
top:8.64rem;
left:4.3022222222rem;
z-index:3}
.scroller-main .m14 .op14{
width:auto;
height:10rem;
left:-.8888888889rem;
top:0;
z-index:3}
.scroller-main .m14 .p4{
position:absolute;
width:5.5555555556rem;
top:.8622222222rem;
left:-2.2222222222rem;
z-index:5}
.scroller-main .m14 .video-item{
top:5.5111111111rem;
left:9.1288888889rem}
.scroller-main .m15 .p5{
width:7.1377777778rem;
top:1.1733333333rem;
left:8.0444444444rem}
.scroller-main .m16 .p6{
width:4.3377777778rem;
top:1.2444444444rem;
left:6.4888888889rem}
.scroller-main .m16 .v1{
top:1.6444444444rem;
left:13.1822222222rem}
.scroller-main .m16 .v2{
top:5.3777777778rem;
left:14.96rem}
.scroller-main .m17 .t4{
width:4.1511111111rem;
top:1.1555555556rem;
left:4.8888888889rem}
.scroller-main .m17 .sub-title{
width:11.8577777778rem;
top:5.2177777778rem;
left:4.8888888889rem}
.scroller-main .m17 .i-scroll{
top:6.9333333333rem;
left:4.8888888889rem}
.scroller-main .m18 .video-list{
top:2.4rem;
left:2.2222222222rem}
.scroller-main .m18 .p7{
width:5.4044444444rem;
top:1.3866666667rem;
left:13.1377777778rem}
.scroller-main .m18 .p-child{
width:6.1155555556rem;
right:.8444444444rem;
bottom:0}
.scroller-main .m19 .video-main{
top:2.7555555556rem;
left:7.6088888889rem;
z-index:3}
.scroller-main .m19 .video-main .video-main-text{
width:9.2rem;
padding:.4444444444rem .2666666667rem}
.scroller-main .m19 .video-main .video-main-list{
left:9.4666666667rem}
.scroller-main .m19 .i-scroll{
left:7.6088888889rem;
top:7.1466666667rem;
z-index:3}
.scroller-main .m20 .video20{
left:-11.4666666667rem}
.scroller-main .m20 .video-main{
top:1.8666666667rem;
left:12.5333333333rem;
z-index:3}
.scroller-main .m20 .video-main .video-main-text{
width:9.6444444444rem;
padding:.1333333333rem .2666666667rem}
.scroller-main .m20 .video-main .video-main-list{
left:9.9111111111rem}
.scroller-main .m20 .i-scroll{
top:5.3688888889rem;
left:12.5333333333rem;
z-index:4}
.scroller-main .m21 .p8{
width:4.56rem;
top:4.1777777778rem;
left:11.0222222222rem}
.scroller-main .m22 .p9{
width:5.9822222222rem;
top:1.2rem;
left:3.5911111111rem}
.scroller-main .m22 .p-uncle{
width:8.2844444444rem;
top:1.6888888889rem;
left:-.5333333333rem}
.scroller-main .m22 .video-main{
top:3.52rem;
left:11.3155555556rem;
z-index:4}
.scroller-main .m22 .i-scroll{
top:7.0400000000rem;
left:10.8711111111rem}
.scroller-main .m23 .t5{
width:3.3511111111rem;
top:1.0933333333rem;
left:10.4888888889rem}
.scroller-main .m23 .sub-title{
width:10.6666666667rem;
left:10.4888888889rem;
top:4.7822222222rem;
text-indent:0}
.scroller-main .m23 .i-scroll{
top:8.5333333333rem;
left:10.4888888889rem}
.scroller-main .m24 .board{
background:rgba(255,255,255,.25);
width:8.8711111111rem;
height:8.6222222222rem;
border-radius:.6044444444rem .6044444444rem 0 0;
position:absolute;
bottom:0;
left:4.3555555556rem;
padding-top:.5333333333rem}
.scroller-main .m24 .i-board{
width:3.2888888889rem;
position:absolute;
top:-.7466666667rem;
right:.0888888889rem}
.scroller-main .m24 .board-main{
width:8.0711111111rem;
height:6.8444444444rem;
position:relative;
overflow-x:hidden;
margin:0 auto}
.scroller-main .m24 .board-item{
position:absolute;
height:.6222222222rem;
white-space:nowrap;
pointer-events:none}
.scroller-main .m24 .board-item.active{
top:2.6666666667rem;
animation:fadeInRight 4s linear forwards;
z-index:9}
.scroller-main .m24 .board-item.active span{
background-color:#c46868;
color:#fff}
.scroller-main .m24 .board-item.active::after{
content:"";
background:url(../images/i-down-active.png) center/cover no-repeat}
.scroller-main .m24 .board-item span{
background:#fff;
color:#707070;
white-space:nowrap;
height:.4977777778rem;
line-height:.4977777778rem;
border-radius:.2488888889rem;
font-size:.3555555556rem;
display:inline-block;
padding:0 .3111111111rem}
.scroller-main .m24 .board-item::after{
content:"";
background:url(../images/i-down.png) center/cover no-repeat;
width:.24rem;
height:.1244444444rem;
position:absolute;
right:.4444444444rem;
bottom:0}
.scroller-main .m24 .board-select{
background:#b49c3d;
display:flex;
justify-content:center;
align-items:center;
font-size:.3555555556rem;
border:.0088888889rem solid #fff;
width:6.4rem;
height:.6222222222rem;
margin:0 auto;
cursor:pointer}
.scroller-main .m24 .board-select img{
display:block;
width:.2844444444rem;
margin-right:.16rem}
.scroller-main .m24 .i-submit{
background:#b49f3d;
width:6.4rem;
height:.6222222222rem;
margin:.1422222222rem auto;
text-align:center;
font-size:.3555555556rem;
cursor:pointer}
.scroller-main .m24 .board-comment{
display:none;
width:7.9644444444rem;
margin-left:-3.9822222222rem;
left:50%;
top:0;
height:7.2888888889rem;
z-index:10;
background-color:#fffae0;
border-radius:.4533333333rem;
position:absolute;
padding-top:.2666666667rem}
.scroller-main .m24 .board-comment .board-comment-list{
margin:0 auto;
width:6.9422222222rem;
height:5.5111111111rem;
overflow-y:auto}
.scroller-main .m24 .board-comment .board-comment-list li{
width:6.5777777778rem;
height:.6044444444rem;
line-height:.6044444444rem;
background-color:#e4d693;
margin:0 auto .2666666667rem;
text-align:center;
color:#707070;
font-size:.3555555556rem}
.scroller-main .m24 .board-comment .board-comment-list li.active{
background-color:#c46868;
color:#fff}
.scroller-main .m24 .board-comment .board-comment-btns{
display:flex;
justify-content:space-around;
align-items:center;
font-size:.3555555556rem;
width:3.8666666667rem;
margin:.4177777778rem auto}
.scroller-main .m24 .board-comment .board-comment-btns button{
cursor:pointer}
.scroller-main .m24 .board-comment .i-sure-board{
width:1.6622222222rem;
height:.5955555556rem;
background-color:#c46868;
border:solid .0177777778rem #5c280f}
.scroller-main .m24 .board-comment .i-close-board{
width:1.6622222222rem;
height:.5955555556rem;
background-color:#bdbdbd;
border:solid .0177777778rem #bdbdbd}
@keyframes fadeIn{
from{
opacity:0}
to{
opacity:1}
}
@keyframes handAppear1{
0%,95%{
opacity:0}
10%{
opacity:1}
80%{
opacity:1}
90%{
opacity:0}
}
@keyframes handAppear2{
0%,10%{
opacity:0}
20%{
opacity:1}
80%{
opacity:1}
90%{
opacity:0}
}
@keyframes handAppear3{
0%,20%{
opacity:0}
30%{
opacity:1}
80%{
opacity:1}
90%{
opacity:0}
}
@keyframes fadeInUp{
from{
opacity:1;
transform:translateY(100%)}
to{
opacity:1;
transform:translateY(0)}
}
@keyframes fadeInRight{
from{
opacity:1;
transform:translateX(200%)}
to{
opacity:1;
transform:translateX(-200%)}
}
@keyframes fadeInZoom{
from{
opacity:0;
transform:translate(3.5555555556rem,2.6666666667rem)}
to{
opacity:1;
transform:translate(0,-.8888888889rem)}
}
@keyframes zoomIn{
from{
opacity:0;
transform:scale(0)}
to{
opacity:1;
transform:scale(1)}
}
@keyframes zoomIn2{
from{
transform:scale(.8)}
to{
transform:scale(1)}
}
@keyframes musicRotate{
0%{
transform:rotate(0)}
100%{
transform:rotate(360deg)}
}