* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%; height: 100%; text-align: center;}
section{width: 10rem;min-height: 14.88rem; max-height: 16.226666rem;height: 100%; position: relative; margin: auto;}
.swiper-wrapper {
}
section>.swiper-container {
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
min-height: 14.88rem;
}
.swiper-slide {
position: relative;
background-size:100% auto;
overflow:hidden;
text-align:center;
}
.swiper-slide img{
max-width:100%;
}
.loadingSection{}
.loadingSection .per{position: absolute; left: 50%; width: 3rem; margin-left: -1.5rem; top: 43%; font-size: 30px;}
.loadingSection .note{position: absolute; left: 50%; width: 3rem; margin-left: -1.5rem; top: 49%; font-size: 14px;}
@-webkit-keyframes arrawShake{
0%{transform: translateY(0px); }
10%{transform: translateY(-5px) ;}
20%{transform: translateY(0px) ;}
30%{transform: translateY(-5px) ;}
40%{transform: translateY(0px) ;}
}
.arrawBox{width: 0.693333rem; height: 0.28rem; position: absolute; left: 50%; margin-left: -0.333333rem; bottom: 0.493333rem; opacity: 0;}
.arrawDown{width: 0.693333rem; height: 0.28rem; position: absolute; background: url(../images/arrawDown.png); background-size: 100% 100%;
-webkit-animation: arrawShake 2000ms infinite;
}
.arrawDownBl{width: 0.693333rem; height: 0.28rem; position: absolute; background: url(../images/arrawDownBlack.png); background-size: 100% 100%;
-webkit-animation: arrawShake 2000ms infinite;
}
.skip{width: 1rem; height: 1rem; position: absolute; background: url(../images/skip.png); background-size: 100% 100%; right: 0.186666rem; top: 0.36rem;}
.swiper-slide-active .arrawBox{-webkit-animation: tagFadeIn 1000ms 1500ms forwards;}
.swiper-slide-active .div1{-webkit-animation: boxT1Ani 1000ms forwards;opacity: 0;}
.swiper-slide-active .div2{-webkit-animation: boxT3Ani 1000ms 500ms forwards;opacity: 0;}
@-webkit-keyframes boxT1Ani{
0%{transform: rotateX(-40deg) rotateY(-200deg) rotateZ(0deg) translateX(250px) translateY(-300px) translateZ(201px); opacity: 0; }
99%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
100%{opacity: 1;}
}
@-webkit-keyframes boxT2Ani{
0%{transform: translateX(0px) translateY(0px) translateZ(201px) rotateX(40deg) rotateY(-120deg) rotateZ(0deg) ; opacity: 0; }
99%{transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 1;}
100%{opacity: 1;}
}
@-webkit-keyframes boxT3Ani{
0%{transform: translateX(200px) translateY(-200px) translateZ(201px) rotateX(40deg) rotateY(-120deg) rotateZ(0deg) ; opacity: 0; }
99%{transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 1;}
100%{opacity: 1;}
}
@-webkit-keyframes boxT4Ani{
0%{transform: rotateX(-40deg) rotateY(-200deg) rotateZ(0deg) translateX(250px) translateY(0px) translateZ(201px); opacity: 0; }
99%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1; }
100%{opacity: 1;}
}
@-webkit-keyframes boxT5Ani{
0%{transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg) translateX(0px) translateY(-50px) translateZ(201px); opacity: 0; }
99%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1; }
100%{opacity: 1;}
}
@-webkit-keyframes boxT6Ani{
0%{transform: translateX(0px) translateY(-100px) translateZ(201px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 0; }
50%{transform: translateX(0px) translateY(0px) translateZ(-10px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 0.8; }
99%{transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 1;}
100%{opacity: 1;}
}
@-webkit-keyframes boxT7Ani{
0%{-webkit-transform: translateX(0px) translateY(50px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 0; }
99%{-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 1;}
100%{opacity: 1;}
}
.sectionBg1{width: 100%; height: 100%; background: url(../images/sectionBg1.jpg); background-size: 100% auto; background-position: bottom center;}
.section1T1{width: 2.506666rem; height: 1.2rem; position: absolute; left: 1.986666rem; bottom: 3.986666rem; background: url(../images/section1_T1.png); background-size: 100% 100%;opacity: 0;}
.section1T2{width: 3.72rem; height: 0.626666rem; position: absolute; left: 4.52rem; bottom: 4.093333rem; background: url(../images/section1_T2.png); background-size: 100% 100%;opacity: 0;}
.section1T3{width: 5.28rem; height: 0.76rem; position: absolute; left: 1.16rem; bottom: 3.133333rem; background: url(../images/section1_T3.png); background-size: 100% 100%;opacity: 0;}
.section1T4{width: 4.133333rem; height: 1.32rem; position: absolute; left: 5.08rem; bottom: 1.906666rem; background: url(../images/section1_T4.png); background-size: 100% 100%;opacity: 0;}
.swiper-slide-active .section1T1{-webkit-animation: boxT7Ani 1000ms forwards;opacity: 0;}
.swiper-slide-active .section1T2{-webkit-animation: boxT7Ani 1000ms 500ms forwards;opacity: 0;}
.swiper-slide-active .section1T3{-webkit-animation: boxT7Ani 1500ms 1000ms forwards;opacity: 0;}
.swiper-slide-active .section1T4{-webkit-animation: boxT7Ani 1500ms 1500ms forwards;opacity: 0;}
.sectionBg2{width: 100%; height: 100%; background: url(../images/sectionBg2.jpg); background-size: 100% auto; background-position: bottom center;}
.section2T1{width: 2.093333rem; height: 0.986666rem; position: absolute; left: 2.4rem; bottom: 4.12rem; background: url(../images/section2_T1.png); background-size: 100% 100%;opacity: 0;}
.section2T2{width: 4.333333rem; height: 0.64rem; position: absolute; left: 4.586666rem; bottom: 4.12rem; background: url(../images/section2_T2.png); background-size: 100% 100%;opacity: 0;}
.section2T3{width: 4.6rem; height: 0.773333rem; position: absolute; left: 1.013333rem; bottom: 3.173333rem; background: url(../images/section2_T3.png); background-size: 100% 100%;opacity: 0;}
.section2T4{width: 4.2rem; height: 1.306666rem; position: absolute; left: 4.88rem; bottom: 1.84rem; background: url(../images/section2_T4.png); background-size: 100% 100%;opacity: 0;}
.swiper-slide-active .section2T1{-webkit-animation: boxT7Ani 1000ms forwards;opacity: 0;}
.swiper-slide-active .section2T2{-webkit-animation: boxT7Ani 1000ms 500ms forwards;opacity: 0;}
.swiper-slide-active .section2T3{-webkit-animation: boxT7Ani 1500ms 1000ms forwards;opacity: 0;}
.swiper-slide-active .section2T4{-webkit-animation: boxT7Ani 1500ms 1500ms forwards;opacity: 0;}
.sectionBg3{width: 100%; height: 100%; background: url(../images/sectionBg3.jpg); background-size: 100% auto; background-position: bottom center;}
.section3T1{width: 2.213333rem; height: 1.04rem; position: absolute; left: 2.133333rem; bottom: 4.106666rem; background: url(../images/section3_T1.png); background-size: 100% 100%;opacity: 0;}
.section3T2{width: 4.72rem; height: 0.68rem; position: absolute; left: 4.413333rem; bottom: 3.56rem; background: url(../images/section3_T2.png); background-size: 100% 100%;opacity: 0;}
.section3T3{width: 1.56rem; height: 0.813333rem; position: absolute; left: 1.52rem; bottom: 2.386666rem; background: url(../images/section3_T3.png); background-size: 100% 100%;opacity: 0;}
.section3T4{width: 5.693333rem; height: 1.426666rem; position: absolute; left: 3.24rem; bottom: 1.906666rem; background: url(../images/section3_T4.png); background-size: 100% 100%;opacity: 0;}
.swiper-slide-active .section3T1{-webkit-animation: boxT7Ani 1200ms forwards;opacity: 0;}
.swiper-slide-active .section3T2{-webkit-animation: boxT7Ani 1000ms 500ms forwards;opacity: 0;}
.swiper-slide-active .section3T3{-webkit-animation: boxT7Ani 1500ms 1000ms forwards;opacity: 0;}
.swiper-slide-active .section3T4{-webkit-animation: boxT7Ani 1000ms 1500ms forwards;opacity: 0;}
/* 场景4使用居中定位 */
.sectionBg4{width: 100%; height: 100%;background: -webkit-linear-gradient(#C6E4FE, #FFF);}
.section4T1{width: 5.92rem; height: 0.626666rem; position: absolute; left: 50%; top: 50%; margin-left: -2.96rem; margin-top: -4.2rem; background: url(../images/section4_T1.png); background-size: 100% 100%;opacity: 0;}
.section4T2{width: 5.853333rem; height: 0.626666rem; position: absolute; left: 50%; top: 50%; margin-left: -2.946666rem; margin-top: -3.266666rem; background: url(../images/section4_T2.png); background-size: 100% 100%;opacity: 0;}
.section4T3{width: 1.133333rem; height: 0.093333rem; position: absolute; left: 50%; top: 50%; margin-left: -0.56rem; margin-top: -1.133333rem; background: url(../images/section4_T3.png); background-size: 100% 100%;opacity: 0;}
.section4T4{width: 3.04rem; height: 0.613333rem; position: absolute; left: 50%; top: 50%; margin-left: -1.533333rem; margin-top: 1.4rem; background: url(../images/section4_T4.png); background-size: 100% 100%;opacity: 0;}
.section4T5{width: 2.506666rem; height: 1.2rem; position: absolute; left: 50%; top: 50%; margin-left: -1.253333rem; margin-top: 2.266666rem; background: url(../images/section4_T5.png); background-size: 100% 100%;opacity: 0;}
.swiper-slide-active .section4T1{-webkit-animation: boxT7Ani 1000ms forwards;opacity: 0;}
.swiper-slide-active .section4T2{-webkit-animation: boxT7Ani 1000ms 300ms forwards;opacity: 0;}
.swiper-slide-active .section4T3{-webkit-animation: boxT7Ani 800ms 600ms forwards;opacity: 0;}
.swiper-slide-active .section4T4{-webkit-animation: boxT7Ani 800ms 900ms forwards;opacity: 0;}
.swiper-slide-active .section4T5{-webkit-animation: boxT7Ani 800ms 1600ms forwards;opacity: 0;}
.sectionBg5{width: 100%; height: 100%;background: -webkit-linear-gradient(#C6E4FE, #FFF);}
.section5T0{width: 6.866666rem; height: 4.573333rem; position: absolute; left: 50%; top: 50%; margin-left:-3.32rem; margin-top: -5.146666rem; background: url(../images/section5_T0.png); background-size: 100% 100%;opacity: 0;}
.section5T1{width: 6.36rem; height: 0.64rem; position: absolute; left: 50%; top: 50%; margin-left: -3.146666rem; margin-top: -0.36rem; background: url(../images/section5_T1.png); background-size: 100% 100%;opacity: 0;}
.section5T2{width: 3.613333rem; height: 0.893333rem; position: absolute; left: 50%; top: 50%; margin-left: -1.786666rem; margin-top: 0.44rem; background: url(../images/section5_T2.png); background-size: 100% 100%;opacity: 0;}
.section5T3{width: 6.426666rem; height: 1.08rem; position: absolute; left: 50%; top: 50%; margin-left: -3.213333rem; margin-top: 3.12rem; background: url(../images/section5_T3.png); background-size: 100% 100%;opacity: 0;}
.section5T4{width: 4.4rem; height: 0.48rem; position: absolute; left: 50%; top: 50%; margin-left: -2.2rem; margin-top: 4.453333rem; background: url(../images/section5_T4.png); background-size: 100% 100%;opacity: 0;}
.swiper-slide-active .section5T0{-webkit-animation: boxT7Ani 1000ms 300ms forwards;opacity: 0;}
.swiper-slide-active .section5T1{-webkit-animation: boxT7Ani 1000ms 300ms forwards;opacity: 0;}
.swiper-slide-active .section5T2{-webkit-animation: boxT7Ani 1000ms 600ms forwards;opacity: 0;}
.swiper-slide-active .section5T3{-webkit-animation: boxT7Ani 800ms 900ms forwards;opacity: 0;}
.swiper-slide-active .section5T4{-webkit-animation: boxT7Ani 1000ms 1000ms forwards;opacity: 0;}
.mainSec{width: 100%; height: 100%; background: #e6e6e7; z-index: 0;}
.mainBg{width: 16rem; height: 100% ;background:url(../images/homeBg.gif); background-size: 100% auto; background-position: bottom center; text-align: center; color: #FFF; overflow: hidden;
transform: translate3d(-1rem, 0px, 0px);
}
.mainBg .mask{width: 7.653333rem; height: 3.826666rem;position: absolute; background: url(../images/mask.gif); background-size:100% 100% ;left: 50%; margin-left: -3.573333rem; bottom: -0.333333rem;}
.mainBg .mask2{width: 15.093333rem; height: 10.706666rem; position: absolute; background: url(../images/mask2.gif); background-size:100% 100% ;left: 50%; margin-left: -7.093333rem; bottom: 2.426666rem;}
.blueTop{width: 16rem;transform: translate3d(-1rem, 0px, 0px); height: 3.266666rem; position: absolute; background: url(../images/homeBg2.png) repeat-x; background-size:100% 100% ; top: 0;}
.cloud{width: 11.52rem; height: 3.533333rem; position: absolute; left: 50%; margin-left: -5.693333rem; bottom: 13.106666rem; background: url(../images/cloud.png); background-size:100% 100% ;}
.sectionHomeT1{width: 6.426666rem; height: 1.08rem; position: absolute; left: 50%; top: 1.44rem; margin-left: -3.16rem; background: url(../images/homeT1.png); background-size: 100% 100%;opacity: 0; z-index: 1;}
.sectionHomeT2{width: 4.4rem; height: 0.48rem; position: absolute; left: 50%; top: 2.773333rem; margin-left: -2.146666rem; background: url(../images/homeT2.png); background-size: 100% 100%;opacity: 0; z-index: 1;}
.sectionHomeT3{width: 6.453333rem; height: 1.053333rem; position: absolute; left: 50%; top: 3.533333rem; margin-left: -3.24rem; background: url(../images/homeT3.png); background-size: 100% 100%;opacity: 0; z-index: 1;}
.sectionHomeT4{
line-height: 0.986666rem; font-size: 18px; background: #F39800; color: #FFF;text-align: center; border-radius: 0.16rem;
width: 4.44rem; height: 0.986666rem; position: absolute; left: 50%; bottom: 0.48rem; margin-left: -4.56rem; opacity: 0; z-index: 1;}
.sectionHomeT5{width: 4.44rem; height: 0.986666rem; position: absolute; left: 50%; bottom: 0.48rem; margin-left: 0.08rem;background: #FFF100; line-height: 0.986666rem; font-size: 18px; color: #794B18;text-align: center; border-radius: 0.16rem;opacity: 0; z-index: 1;}
.swiper-slide-active .sectionHomeT1{-webkit-animation: boxT7Ani 1000ms 300ms forwards;opacity: 0;}
.swiper-slide-active .sectionHomeT2{-webkit-animation: boxT7Ani 1000ms 600ms forwards;opacity: 0;}
.swiper-slide-active .sectionHomeT3{-webkit-animation: boxT7Ani 800ms 900ms forwards;opacity: 0;}
.swiper-slide-active .sectionHomeT4{-webkit-animation: boxT7Ani 800ms 1200ms forwards;opacity: 0;}
.swiper-slide-active .sectionHomeT5{-webkit-animation: boxT7Ani 800ms 1500ms forwards;opacity: 0;}
.tagBox{width: 0.546666rem; height: 1rem; position: absolute; z-index: 1; background: url(../images/tagShadow.png) no-repeat; background-size: 100% auto; background-position: bottom;}
.tagBox .tag{ width:0.546666rem; height: 0.853333rem; position: absolute; background: url(../images/tag.png); background-size: 100% 100%;}
.secFadeIn{-webkit-animation: tagFadeIn 800ms forwards;opacity: 0;}
@-webkit-keyframes tagShake{
0%{transform: translateY(0px); }
3%{transform: translateY(-10px) ;}
6%{transform: translateY(0px) ;}
9%{transform: translateY(-10px) ;}
12%{transform: translateY(0px) ;}
}
@-webkit-keyframes tagFadeIn{
0%{opacity: 0;}
100%{opacity: 1;}
}
.tagBox.tg1{left: 50%; margin-left:-1.333333rem; bottom:2.56rem;}
.tagBox.tg2{left: 50%; margin-left:-3.053333rem; bottom:4.773333rem;}
.tagBox.tg3{left: 50%; margin-left:-6.013333rem; bottom: 6.186666rem;}
.tagBox.tg4{left: 50%; margin-left:-2.613333rem; bottom: 10.546666rem;}
.tagBox.tg5{left: 50%; margin-left:1.613333rem; bottom: 6.64rem;}
.tagBox.tg6{left: 50%; margin-left:4.266666rem; bottom: 6.48rem;}
.tagBox.tg7{left: 50%; margin-left:1.346666rem; bottom: 2.186666rem;}
.tagBox.tg8{left: 50%; margin-left:-5.346666rem; bottom: 1.68rem;}
.tagBox.tg9{left: 50%; margin-left:-5.653333rem; bottom: 11.36rem;}
.tagBox.tg10{left: 50%; margin-left:-0.533333rem; bottom: 6.48rem;}
.tagBox.tg11{left: 50%; margin-left:1rem; bottom: 9.093333rem;}
.tagBox.tg12{left: 50%; margin-left:4.56rem; bottom: 10.813333rem;}
/*
.swiper-slide-active .swiper-slide .tagBox {-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg1{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg2{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg3{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg4{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg5{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg6{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg7{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg8{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg9{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg10{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
.swiper-slide-active .swiper-slide .tg11{-webkit-animation: tagFadeIn 1500ms forwards;opacity: 0;}
*/
.tagBox.tg1 .tag{-webkit-animation: tagShake 9000ms ease-in-out 500ms infinite;}
.tagBox.tg2 .tag{-webkit-animation: tagShake 9000ms ease-in-out 1500ms infinite;}
.tagBox.tg3 .tag{-webkit-animation: tagShake 9000ms ease-in-out 2500ms infinite;top: -0.3rem;}
.tagBox.tg4 .tag{-webkit-animation: tagShake 9000ms ease-in-out 3500ms infinite;}
.tagBox.tg5 .tag{-webkit-animation: tagShake 9000ms ease-in-out 4500ms infinite;}
.tagBox.tg6 .tag{-webkit-animation: tagShake 9000ms ease-in-out 5500ms infinite;}
.tagBox.tg7 .tag{-webkit-animation: tagShake 9000ms ease-in-out 6000ms infinite;}
.tagBox.tg8 .tag{-webkit-animation: tagShake 9000ms ease-in-out 6500ms infinite;}
.tagBox.tg9 .tag{-webkit-animation: tagShake 9000ms ease-in-out 7000ms infinite;}
.tagBox.tg10 .tag{-webkit-animation: tagShake 9000ms ease-in-out 7500ms infinite;}
.tagBox.tg11 .tag{-webkit-animation: tagShake 9000ms ease-in-out 8000ms infinite;}
.tagBox.tg12 .tag{-webkit-animation: tagShake 9000ms ease-in-out 2500ms infinite;}
.carPos1{left: 50%; margin-left: -5.826666rem; bottom:3.96rem ;position: absolute;-webkit-animation: carRun 10000ms linear infinite;}
.carPos2{left: 50%; margin-left: -5.826666rem; bottom:3.96rem ;position: absolute;-webkit-animation: carRun 10000ms linear 1500ms infinite;}
.carPos3{left: 50%; margin-left: -5.826666rem; bottom:3.96rem ;position: absolute;-webkit-animation: carRun 10000ms linear 2500ms infinite;}
.car{width: 0.666666rem; height: 0.546666rem; zoom: 1;}
.car1{background: url(../images/car1.png); background-size: 200% 100%; background-position: 100% 0; -webkit-animation:carBg 10000ms step-start infinite;}
.car2{background: url(../images/car2.png); background-size: 200% 100%; background-position: 100% 0; -webkit-animation:carBg 10000ms step-start 1500ms infinite;}
.car3{background: url(../images/car3.png); background-size: 200% 100%; background-position: 100% 0; -webkit-animation:carBg 10000ms step-start 2500ms infinite;}
@-webkit-keyframes carRun{
0%{left: 50%; margin-left: -8.32rem; bottom:4.026666rem;}
10%{left: 50%; margin-left: -4.586666rem; bottom:1.773333rem;}
16%{left: 50%; margin-left: -3.466666rem; bottom:2.493333rem;}
23%{left: 50%; margin-left: -2.426666rem; bottom:2.026666rem;}
38%{left: 50%; margin-left: -0.186666rem; bottom:3.4rem;}
44%{left: 50%; margin-left: 0.653333rem; bottom:2.933333rem;}
54%{left: 50%; margin-left: 1.64rem; bottom:3.746666rem;}
68%{left: 50%; margin-left: 4.44rem; bottom:2.426666rem;}
100%{left: 50%; margin-left: 0.503333rem; bottom:-0.306666rem;}
}
@-webkit-keyframes carBg{
0%{background-position: 100% 0;}
10%{background-position: 200% 0;}
16%{background-position: 100% 0;}
23%{background-position: 200% 0;}
38%{background-position: 100% 0;}
44%{background-position: 200% 0;}
54%{background-position: 100% 0;}
68%{background-position: 200% 0;}
100%{background-position: 100% 0;}
}
/* popups */
.md-modal {position: fixed;top: 50%;left: 50%;max-width: 10rem;min-width: 4.266666rem;height: auto;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;background: rgba(0,0,0,0.6);-webkit-transition: all 0.3s;}
.md-show ~ .md-overlay {opacity: 1;visibility: visible;}
/* Content styles */
.md-content {position: relative;border-radius: 0.133333rem;border: 1px solid #0090FF; box-shadow: 0 0 0.2rem rgba(0,0,0,1); margin: 0 auto;
}
.md-effect-3 .md-content {-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;}
.popUp{background: -webkit-linear-gradient(#94D3FF, #FFF); width: 9.08rem; height: 13rem; padding: 0.2rem; text-align: left;}
.popUp .md-close{ width: 0.786666rem; height: 0.786666rem; position: absolute; display: block; right: -0.3rem; top:-0.3rem; background:url(../images/closeBtn.png); background-size: 100% 100%;z-index: 1;}
.popUp .popUpTitle{line-height: 0.866666rem; padding: 1rem 0; text-align: center; position: relative; font-size: 24px; font-weight: bold; color: #023D6F;}
.popUp .swiper-container { width: calc(100% - 0.4rem); top: 0.3rem; bottom: 0.2rem;position: absolute;}
.popUp .swiper-slide{ width: 8.6rem;}
.popUp .swiper-scrollbar {border-radius: 0.133333rem;position: relative;-ms-touch-action: none;}
.popUp .swiper-container-vertical > .swiper-scrollbar {width: 0.266666rem !important;position: absolute;right: 0.1rem;z-index: 150;background: transparent;}
.popUp .swiper-scrollbar-drag {height: 100% ;width: 11px;position: relative;background: rgba(0,71,157,0.4);border-radius: 10px;left: 0;top: 0;}
.popUp .swiper-scrollbar-cursor-drag {cursor: move;}
.popLongTxt{}
.popNormalTxt {padding: 0 0.4rem; font-size: 18px; line-height: 28px; color: #023d6f; position: relative; text-align: justify;}
.popNormalTxt>img.fullImg{width: 100%; height: auto;}/* margin-bottom: 1.066666rem; */
.popCode{width:2.733333rem; height: 3.426666rem;left: 50%; margin-left: -1.35rem; position: inherit; margin-top: 0.4rem;}
.popNormalTxt p{ text-align: justify; margin-top:0.1rem;}
.popNormalTxt p.tip{color: #3294e6;}
.popNormalTxt p.blod{font-weight: bold;}
.popNormalTxt p.red{color: #B20000;}
.popBtn{ width: 4.293333rem; height: 0.986666rem; position: absolute; left: 50%; margin-left: -2.213333rem; bottom: 0.906666rem; background: #FFF100; line-height: 0.986666rem; font-size: 18px; color: #794B18;
text-align: center; border-radius: 0.16rem; margin-bottom: 1.2rem;
}
.popNormalTxt .popBtn{position:inherit; bottom: 0; margin-top:1.066666rem;}
.popNormalTxt .cell{-webkit-box-flex: 1; width: 100%; padding: 0.133333rem; margin-bottom: 1.2rem;}
.popNormalTxt .cell .btn{width: 100%; height: 0.986666rem;background: #FFF100; line-height: 0.986666rem; font-size: 18px; color: #794B18;text-align: center; border-radius: 0.16rem;}
.popNormalTxt .cell .btn.deepYellow{background: #F39800; color: #FFF;}
.withTip{ width: calc(100% - 1.333333rem); padding-left: 1.333333rem; font-size: 14px; background: url(../images/tipBg.png) no-repeat; background-size: 0.92rem 0.946666rem; line-height: 18px; margin: 0.266666rem 0;}
.tipBox{width: 3.453333rem; height: 3.48rem; position: absolute; left: 50%; margin-left: -3.533333rem; bottom:5.826666rem; background: url(../images/tipBoxBg.png); background-size: 100% 100%; opacity: 0;-webkit-transition:all 1500ms;}
.tipBox .hand{ width:1.426666rem; height: 1.533333rem; position: absolute; left: 1.26rem; top: 1.133333rem; background: url(../images/tipHand.png); background-size: 100% 100%;
-webkit-animation: handShake 4000ms ease-in-out infinite;
}
@-webkit-keyframes handShake{
0%{left: 1.26rem}
15%{left: 2.153333rem;}
40%{left: 0.5rem;}
55%{left: 1.26rem}
}
.clickTipBox{width:3.453333rem; height: 3.48rem; position: absolute;left: 50%; margin-left:0.08rem; bottom: 5.826666rem; background: url(../images/clickTipBg.png); background-size: 100% 100%; opacity: 0; -webkit-transition:all 1500ms;}
.clickTip{width:1.426666rem; height: 1.533333rem; position: absolute;left: 1.16rem; top: 1.133333rem; background: url(../images/tipHand.png); background-size: 100% 100%; -webkit-transform-origin-y: 100%;
-webkit-animation: clickShake 2000ms ease-in-out infinite;
}
.clickTipBox2{width:1.426666rem; height: 1.533333rem; position: absolute;left:50%;margin-left: 1.0rem; bottom:7.8rem; opacity: 0; -webkit-transition:all 1500ms;}
.clickTipBox2 .clickTip{left: 0;top: 0;}
@-webkit-keyframes clickShake{
0%{-webkit-transform: scaleY(1); }
5%{-webkit-transform: scaleY(0.92);}
10%{-webkit-transform: scaleY(1);}
15%{-webkit-transform: scaleY(0.92);}
20%{-webkit-transform: scaleY(1);}
}
.swiper-slide-active .swiper-slide .clickTipBox{opacity: 1;}
.swiper-slide-active .swiper-slide .tipBox{opacity: 1;}