div {
animation-delay:.5s;
-webkit-animation-delay:.5s; /* Safari 和 Chrome */
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
::-webkit-scrollbar{
    display:none;
}

@keyframes bounceInUp{
    0% {
        opacity: 0;
        scale: 0;
        -webkit-transform: translateY(5rem);
        -ms-transform: translateY(5rem);
        transform: translateY(5rem);
    }
    60% {
        scale: 0.25;
        opacity: .25;
        -webkit-transform: translateY(-0.3rem);
        -ms-transform: translateY(-0.3rem);
        transform: translateY(-0.3rem);
    }
    80% {
        opacity: .5;
        scale: .5;
        -webkit-transform: translateY(.1rem);
        -ms-transform: translateY(.1rem);
        transform: translateY(.1rem);
    }

    100% {
        opacity: 1;
        scale: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bounceInRight
{
    0% {
        opacity: 0;
        scale: 0;
        -webkit-transform: translateX(5rem);
        -ms-transform: translateX(5rem);
        transform: translateX(5rem);
    }
    60% {
        scale: 0.25;
        opacity: .25;
        -webkit-transform: translateX(-0.3rem);
        -ms-transform: translateX(-0.3rem);
        transform: translateX(-0.3rem);
    }
    80% {
        opacity: .5;
        scale: .5;
        -webkit-transform: translateX(.1rem);
        -ms-transform: translateX(.1rem);
        transform: translateX(.1rem);
    }

    100% {
        opacity: 1;
        scale: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

/* main 主体部分css */

main{
    overflow: hidden;
}

/* 轮播图 */
.video-wapper{
    /*height: 100%;*/
    height: 95%;
    box-sizing: border-box;
}
.blue-slide {
	background: #4390EE;
}
.red-slide {
	background: #CA4040;
}
.orange-slide {
	background: #FF8604;
}


.swiper-container{
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.swiper-wrapper{
    position: relative;
    width: 100%;
    box-sizing: content-box;
}

.swiper-container,.swiper-wrapper,.swiper-slide {
    height: 100%;
}

.swiper-slide {
	color: #fff;
	font-size: .36rem;
    text-align: center;
    position: relative;
    background-size: cover;

   background-repeat: no-repeat;
}

.swiper-slide .play{
    /* background-image: url('../imgs/icon_03.png');

    background-repeat: no-repeat; */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    width: 1rem;
    height:1rem;
    cursor: pointer;
    z-index: 100;
}
.swiper-slide .play img{
    width: 1rem;
    height:1rem;
    display: block;
}



.pagination {
    position: absolute;
    z-index: 20;

    width: 100%;
    /* background-color: #fff; */
    text-align: center;
  }
  .swiper-pagination-switch {
    display: inline-block;
    width: .5rem;
    height: .2rem;
    /* border-radius: .08rem; */
    background-color: transparent;
    position: relative;
    margin: 0 .05rem;
    opacity: 0.8;
    cursor: pointer;
  }
  .swiper-pagination-switch::after{
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    height: .02rem;
    top: .1rem;
    background-color: #fff;
  }
  .swiper-active-switch::after {
    background-color: #df0024;
  }


  #wrap {
	overflow:hidden;
    width:100%;
}
#main {
	top:0;
    position:relative;
    overflow: hidden;
}
.page {
	/*谨删*/
            width:100%;
	margin:0;
}

#pageUl {
	position:fixed;
	right:.1rem;
}

.introduction-wapper{

    padding: 1rem 0 1.87rem 0;
    /* background-image: url('../imgs/index/18.png'); */
    /* background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% -50%; */
}
.introduction{
    width: 8.8rem;
    margin: 0 auto;
    font-size: .2rem;
	font-weight: normal;
	font-stretch: normal;
    text-align: center;
    color: #333333;
    line-height: .4rem;

}

.introduction .title{
    margin: 0 auto;
	/*font-size: .48rem;*/
    margin-bottom: .1rem;
    color: #333333;
    position: relative;
    /*width: 3.03rem;*/
    font-size: .4rem;
    width: 3.35rem;
}

.introduction .title .tip{
    position: absolute;
    right: 0;
    top: -0.2rem;
    font-size: .23rem;
    color: #df0027;
    width: .39rem;
    border-radius: 50%;
	height: .39rem;
	background-color: #ffffff;
	border: solid .02rem #df0027;
}

.introduction-system{
    position: relative;
    left: -2rem;
    top:.8rem;
    text-align: left;

}

.introduction-system li{
    width: 5.7rem;
    padding-bottom: .15rem;
    margin-bottom: .34rem;
  border-bottom: .01rem solid #d0d0d0;
}

.introduction-system .system-title{
    font-size: .28rem;
    color: #333333;
    margin-bottom: .08rem;
}
.introduction-system .system-content{
	/* font-family: MicrosoftYaHei; */
    font-size: .18rem;
    line-height: .26rem;
	color: #666666;
}
.next-understand-us{
     width: 1.58rem;
	height: .32rem;
	background-color: #ffffff;
	border-radius: .05rem;
    border: solid .01rem #333333;
    font-size: .18rem;
    line-height: .32rem;
    text-align: center;
    margin: 0 auto;
    margin-top: .53rem;
    display: block;


}
.understand-us{
     display: block;
    width: 2.47rem;
    height: .4rem;
    background-color: #df0024;
    border: .01rem solid #df0024;
    text-align: center;
    line-height: .4rem;
    /* font-family: MicrosoftYaHei; */
    font-size: .16rem;
    margin-top: .27rem;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s linear;
}
.understand-us:hover{
    background-color: #ffeded;
    color: #df0024;
    transition: all 0.3s linear;
    border: .01rem solid #df0024;
}


.introduction-right{
    background-image: url('https://shijiaoke.oss-cn-beijing.aliyuncs.com/Yunan/module_animate_bgc20200612.png');
    background-size: cover;
    background-position: -1.38rem -0.06rem;
    background-repeat: no-repeat;
    width: 6.6rem;
    height: 5.35rem;
    position: absolute;
    top: 2.75rem;
    left: 50%;
    z-index: 100;
}
.introduction-right img{
    position: absolute;
    width: .396rem;
    height: .247rem;
    transform-origin: 0 0 0;
    transform: translate(.55rem,.62rem ) ;
    transition: transform 1s linear .7s;
    z-index: 1;
}

 .introduction-right .img-animate-1{
    transform: translate(.55rem, .62rem) scale(4);
    z-index: 1;
    transition: transform 1s linear 1.2s;
}

.introduction-right .img-animate-2{
    transform: translate(.75rem, .69rem) scale(5);
    z-index: 2;
    transition: transform .9s linear 1.1s;
}

.introduction-right .img-animate-3{
    transform: translate(1.01rem, .83rem) scale(6);
    z-index: 3;
    transition: transform .8s linear 1s;
}

.introduction-right .img-animate-4{
    transform: translate(   1.34rem,1.01rem) scale(7);
    z-index: 4;
    transition: transform .7s linear .9s;
}



.introduction-right .img-animate-5{
    transform: translate(1.78rem, 1.24rem) scale(8);
    z-index: 5;
    transition: transform .6s linear .8s;
}

.introduction-right .img-animate-6{
    transform: translate(2.34rem, 1.61rem) scale(9);
    z-index: 6;
    transition: transform .5s linear .7s;
}

.introduction-right .img-animate-7{
    transform: translate(3rem, 2rem) scale(10);
    z-index: 7;
    transition: transform .4s linear .6s;
}







.page3{
    position: relative;
}
.page3-content-wapper{
    position: absolute;
    font-size: .54rem;
	font-weight: normal;
	font-stretch: normal;
    margin-left: 1.31rem;
    margin-top: .91rem;
	letter-spacing: 0rem;
    color: #ffffff;
    z-index: 10;
}

.play{
    /* background-image: url('../imgs/icon.png');
    background-position: -0.9rem -1.2rem;
    background-repeat: no-repeat;

    width: .61rem;
    height: .61rem;
    cursor: pointer;
    margin-top: .27rem; */
}

video{
    display: block;
    object-fit: cover;
    /* width: 100%;
    height: 100%; */
}
#page4{
    position: relative;
}
/* 广告 */
.ad-wapper{

    width: 100%;
    padding: 1.68rem 0 1.5rem 0;
}
.ad-wapper .center{
    width: 12rem;
    margin: 0 auto;
    overflow: hidden;
}
.ad-wapper .left{
    float: left;
    width: 30%;
    margin-right: 2.37rem;
}
.ad-wapper .right{
    float: left;
    width: 50%;
}
.ad-wapper .title{
    /* font-family: MicrosoftYaHei-Bold; */
    font-size: .28rem;
    margin-bottom: .2rem;
	color: #333333;
}
.ad-wapper .chunk{
    margin-bottom: .4rem;

}

.ad-wapper .chunk-animate{
    animation: scaleChunk .8s linear  .3s;
    transform: scale(1);
}

@keyframes scaleChunk{
    0%{
        transform: scale(0);
    }
    25%{
        transform: scale(0.25);
    }
    50%{
        transform: scale(0.5);
    }
    75%{
        transform: scale(0.75);
    }
    100%{
        transform: scale(1);
    }
}

.ad-wapper .index{
    width: .5rem;
    display: inline-block;
    text-align: center;
	height: .5rem;
	background-color: #ffffff;
    border: solid .02rem #333333;
    border-radius: 50%;
    font-size: .28rem;
    color: #333333;
    line-height: .5rem;
    margin-right: .15rem;
}
.ad-wapper li{
    /* font-family: MicrosoftYaHei; */
	font-size: .18rem;

	color: #666666;
}
.show-wapper{
    width: 100%;
    padding-top: 1.45rem;

}
.show-container{
    width: 9.8rem;

    margin: 0 auto;
    height: 4.05rem;
}

.show-container li{
    float: left;
    cursor: pointer;
    text-align: center;
    width: 2.45rem;
    height: 4.05rem;

    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: relative;
}
.show-container li .item-wapper{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 1.17rem;
    box-sizing: border-box;
    transition: background-color .5s;
}
.show-container li:hover .item-wapper{
    background-color: rgba(223, 0, 36, 0.4);
    transition: background-color .5s;
}
.show-container li .bottom-wapper{
    width: 100%;
    height: 1.6rem;
    overflow: hidden;
}
.show-container li .bottom-container{
    transform: translateY(0rem);
    transition: transform .5s linear;
}
.show-container li:hover .bottom-container{
    transform: translateY(-0.7rem);
    transition: transform .5s linear;
}
.show-container  li  .icon{
    transform: translateY(0);
    transition: transform .5s ease-in-out;
}
.show-container  li:hover  .icon{
    transform: translateY(-0.1rem);
    transition: transform .5s ease-in-out;
}
.show-container .icon img{
    width: .61rem;
    height: .61rem;


}
.show-container .line{
    width: .5rem;
    height: .05rem;
    margin: 0 auto;
    margin-bottom: .47rem;
    margin-top: .43rem;
	background-color: #e8e8e8;
}
.show-container .text{
    text-align: center;
    font-size: .2rem;

	color: #ffffff;
}
.after-sales-wapper{
    width: 11.44rem;
    margin: 0 auto;
    padding-top: 1.67rem;
}
.after-sales-wapper .title{
    text-align: center;
	/* font-family: MicrosoftYaHei; */
	font-size: .48rem;
	font-weight: bold;
	color: #333333;
}
.sale-detail-wapper{
    overflow: hidden;
    margin-top: 1rem;
}
.sale-detail-wapper li{
    float: left;
    width: 2.67rem;
    height: 3.67rem;
    margin: 0 .07rem;
    border: solid .01rem #e8e8e8;
    border-top: .01rem solid #df0024;
    padding-top: .28rem;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}
.sale-detail-wapper li:hover::after ,
.sale-detail-wapper li:hover::before{
    height: 100%;
    transition: height .3s linear;
}

.sale-detail-wapper li:hover .left-bottom-border ,
.sale-detail-wapper li:hover .right-bottom-border{
    width: 50%;
    transition: width .3s linear .3s;
}
.sale-detail-wapper .wu::after ,
.sale-detail-wapper .update::after
{
    left: 0;
}

.sale-detail-wapper li::after{
    content: '';
    position: absolute;
    width: .01rem;
    height: 0;
    top: 0;
    left: -0.01rem;
    background-color: #df0024;
    transition: height .3s linear .3s;

}
.sale-detail-wapper li::before{
    content: '';
    position: absolute;
    width: .01rem;
    height: 0;
    top: 0;
    right: -0.01rem;
    background-color: #df0024;
    transition: height .3s linear .3s;
}

.sale-detail-wapper li .left-bottom-border{
    position: absolute;
    width: 0;
    height: .01rem;
    bottom: 0;
    left: 0;
    background-color: #df0024;
    transition: width .3s linear ;
}

.sale-detail-wapper li .right-bottom-border{
    position: absolute;
    width: 0;
    height: .01rem;
    bottom: 0;
    right: 0;
    background-color: #df0024;
    transition: width .3s linear ;
}


.sale-detail-wapper .shorthand{
        border-radius: 50%;
        /* font-family: MicrosoftYaHei; */
        font-size: .31rem;
        font-weight: bold;
        font-stretch: normal;
        line-height: .53rem;
        text-align: center;
        color: #ffffff;
        width: .53rem;
        margin: 0 auto;
        height: .53rem;
        background-color: #df0024;

}
.draw-title{
    /* font-family: MicrosoftYaHei; */
	font-size: .2rem;
	font-weight: bold;
	font-stretch: normal;
    text-align: center;
    color: #df0024;
    margin-top: .37rem;
}
.draw-content{
    /* font-family: MicrosoftYaHei; */
	font-size: .12rem;
	font-weight: bold;
    color: #999999;
    text-align: center;
    margin-top: .15rem;
}

.draw-content b{
    /* font-family: MicrosoftYaHei; */
	font-size: .15rem;
	font-weight: bold;
	letter-spacing: .01rem;
	color: #df0024;
}
.draw-icon{
    margin-top: .43rem;
    text-align: center;
}
.draw-icon img{
    width: 1.66rem;
    height:0.6rem;

}
.next-wapper{
    padding-top: 1rem;
    box-sizing: border-box;
    width: 100%;
    height: 8.1rem;
    background-image: url('https://shijiaoke.oss-cn-beijing.aliyuncs.com/Yunan/module_next-bgc20200611.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.next-wapper .title{
    /* font-family: MicrosoftYaHei; */
    width: 6rem;
    margin: 0 auto;
	font-size: .48rem;
	font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding-top: 1.2rem;
    margin-bottom: .26rem;
}
.next-logo-wapper{
    width: 4.52rem;
    margin: 0 auto;
    margin-top:.8rem ;
}
.next-logo-wapper img{
    margin-right:.24rem ;
    width: 1.99rem;
}
.copyright{
    position: static;
}