@charset "UTF-8";

/* content */
body{height: 28.7rem;background-image: url(../ossweb-img/main/bg1.jpg),url(../ossweb-img/main/bg2.jpg),url(../ossweb-img/main/bg3.jpg);background-size: 100% 8.9rem,100% 9.1rem,100% auto;background-repeat: no-repeat,no-repeat;background-position: 0 0.7rem,0 9.6rem,0 18.7rem;}

/* cbl */
.cbl{background: url(../ossweb-img/main/cbl.png) no-repeat;background-size: 100% 100%;width: 2.62rem;height: 4.98rem;position: fixed;top: 1rem;right: .5rem;z-index: 10;display: none;transform: scale(0.8);}

/* module1 */
.module1{height: 8.9rem;position: relative;}

.module1 .arrow{width: .66rem;height: 1.08rem;background: url(../ossweb-img/main/arrow.png) no-repeat;background-size: 100% 100%;position: absolute;bottom: 0.2rem;left: 50%;transform: translateX(-50%);animation: move 1.5s infinite ease;}

/* module2 */
.module2,.module3{padding: 0.7rem 1.5rem 0;position: relative;}

.title{width: 4.37rem;height: .43rem;}

.title.title1{background: url(../ossweb-img/main/title1.png) no-repeat;background-size: 4.37rem .43rem;}

.title.title2{background: url(../ossweb-img/main/title2.png) no-repeat;background-size: 4.09rem .43rem;position: relative;top: 1rem;}

.video-container{width: 9.8rem;height: 5.66rem;background: url(../ossweb-img/main/video-bg.png) no-repeat;background-size: 100% 100%;margin: 0.7rem auto .35rem;position: relative;}

.video-container video{width: 9.5rem;height: 5.34rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

.video-container .btn-playVideo{width: 9.5rem;height: 5.34rem;background: url(../ossweb-img/main/video-mc.jpg) no-repeat;background-size: 100% 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;cursor: pointer;}

.video-container .btn-playVideo:hover{filter: brightness(1.2);}

.module2 .tips{width: 7.24rem;height: .87rem;background: url(../ossweb-img/main/tips.png) no-repeat;background-size: 100% 100%;margin: 0 auto;}

/* module3 */
.swiper-contanier{width: 11.56rem;height: 9.7rem;margin: 0 auto;overflow: hidden;position: relative;left: -.4rem;}

.swiper-slide img{width: 11.56rem;height: 10.44rem;cursor: pointer;}

.swiper-slide img:hover{filter: brightness(1.35);}

.swiper-button-prev,.swiper-button-next{width: 1.07rem;height: .8rem;background: url(../ossweb-img/main/swiper-button.png) no-repeat;background-size: 100% 100%;position: absolute;top:50%;}

.swiper-button-prev{left: 4rem;animation: move2 1.5s infinite ease;}

.swiper-button-next{transform: rotate(180deg);right: 4rem;animation: move3 1.5s infinite ease;}

@keyframes move {
    0%{transform: translateY(0);}
    50%{transform: translateY(-.1rem);}
    100%{transform: translateY(0);}
}

@keyframes move2 {
    0%{transform: translateX(0);}
    50%{transform: translateX(-.1rem);}
    100%{transform: translateX(0);}
}

@keyframes move3 {
    0%{transform: translateX(0) rotate(180deg);}
    50%{transform: translateX(.1rem) rotate(180deg);}
    100%{transform: translateX(0) rotate(180deg);}
}