body,div,h1,h2,h3,h4,h5,h6,dl,dd,dt,p,a,form,select,input,ul,ol,li{font-weight:normal;font-family:'Microsoft YaHei', sans-serif;}
a{text-decoration:none;}
a:hover{text-decoration:none;}

.wrap{
    margin:0 auto;
    max-width:750px;
    min-width:320px;
    width:100%;
    overflow:hidden;
}
.main{
    margin:0 auto;
    width:92%;
}
.header{
    top:0;
    width:100%;
    max-width:750px;
    min-width:320px;
    z-index:9999;
    position:absolute;
}
.header .top{
    height:0.9rem;
    background:#171819;
}
.logo{
    float:left;
    margin-top:0.23rem;
    width:1.52rem;
    height:0.45rem;
}
.logo-text{
    float:left;
    margin-top:0.17rem;
    margin-left:0.14rem;
    padding-left:0.15rem;
    font-size:0.2rem;
    color:#ffffff;
    line-height:0.275rem;
    border-left:1px solid #ffffff;
}
.phone{
    padding-left:0.56rem;
    float:right;
    display:block;
    color:#ffffff;
    font-size:0.24rem;
    line-height:0.9rem;
    background:url("../img/phone.png") no-repeat left center;
    background-size:0.43rem 0.43rem;
}
.header .bottom{
    width:90%;
    height:0.75rem;
    margin: 0 auto;
}
.nav li{
    float:left;
    width:33.33%;
    line-height:0.65rem;
}
.nav li a{
    color:#ffffff;
    font-size:0.24rem;
}
.nav li.li1{
    text-indent:0.5rem;
}
.nav li.li2{
    text-indent:0.6rem;
}
.nav li.li3{
    text-align:right;
}
.banner{
    margin-top:0.9rem;
    width:100%;
    height: 5.03rem;
    overflow:hidden;
    background: url(../img/banner1.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.banner .b1{position: absolute;left: 0;top: 0;}
.banner .move1{animation: roll 4s infinite linear;transform-origin: center;}
.banner .move2{animation: roll2 4s infinite linear;transform-origin: bottom;}

@keyframes roll{
	0%{
		transform: scaleX(1);
	}
	50%{
		transform: scaleX(0.2);
	}
	100%{
		transform: scaleX(1);
	}
}

@keyframes roll2{
	0%{
		transform:  scaleY(1);
	}
	50%{
		transform:  scaleY(0.2);
	}
	100%{
		transform:  scaleY(1);
	}
}




.title{
    padding:0.68rem 0 0.6rem;
    text-align:center;
}
.title h2{
    font-size:0.48rem;
    line-height:0.58rem;
    text-align:center;
}
.title.c2 h2{
    color:#ffffff;
}
.title h2 span{
    color:#3e71cc;
    font-weight:bold;
}
.title.c2 h3{
    font-size:0.3rem;
    line-height:0.57rem;
    color:#6099ff;
}
.p1 ul{
    margin:0 auto;
    width:95%
}
.p1 ul li{
    float:left;
    margin:0 2% 0.18rem;
    width:46%;
    position:relative;
}
.p1 ul li .info{
    top:0.4rem;
    width:100%;
    position:absolute;
}
.p1 ul li .info img{
    margin:0 auto;
    width:0.86rem;
    height:0.86rem;
    display:block;
}
.p1 ul li .info h2{
    margin:0.2rem 0 0.1rem;
    font-size:0.3rem;
    font-weight:bold;
    line-height:0.36rem;
    color:#ffffff;
    text-align:center;
}
.p1 ul li .info p{
    font-size:0.24rem;
    line-height:0.24rem;
    color:#ffffff;
    text-align:center;
}
.p1 ul li .info h3{
    margin:0.3rem 0 0.3rem;
    font-size:0.3rem;
    font-weight:bold;
    line-height:0.36rem;
    color:#ffffff;
    text-align:center;
}
.btn{
    margin:0.6rem auto;
    width:2.72rem;
    height:0.6rem;
    color:#ffffff;
    text-align:center;
    font-size:0.24rem;
    line-height:0.6rem;
    display:block;
    background:#3e71cc;
    border-radius:5px;
}

.p3 .main{
    padding:0.5rem 0 1rem;
}
.p3 .img{
    margin:0 auto;
    width:4.57rem;
    height:4.57rem;
    position:relative;
    background:url("../img/p3-img.png") no-repeat center;
    background-size:4.57rem;
}
.p3 .img h2{
    width:100%;
    font-size:0.3rem;
    line-height:0.3rem;
    position:absolute;
}
.p3 .img h2.c1{
    color:#3e71cc;
}
.p3 .img h2.c2{
    color:#f7bf01;
}
.p3 .img h2.h1{
    top:-0.47rem;
    left:1.75rem;
}
.p3 .img h2.h2{
    top:0.67rem;
    left:0.05rem;
}
.p3 .img h2.h3{
    top:2.27rem;
    left:-0.98rem;
}
.p3 .img h2.h4{
    top:3.77rem;
    left:0.3rem;
}
.p3 .img h2.h5{
    top:4.78rem;
    left:1.96rem;
}
.p3 .img h2.h6{
    top:3.57rem;
    left:3.4rem;
}
.p3 .img h2.h7{
    top:1.95rem;
    left:4.7rem;
}
.p3 .img h2.h8{
    top:0.55rem;
    left:2.9rem;
}
.p3 .img img{
    display:block;
    position:absolute;
}
.p3 .img img.i1{
    top:-0.07rem;
    left:1.82rem;
    width:0.56rem;
    height:0.57rem;
}
.p3 .img img.i2{
    top:0.87rem;
    left:-0.7rem;
    width:0.61rem;
    height:0.45rem;
}
.p3 .img img.i3{
    top:2.19rem;
    left:0;
    width:0.49rem;
    height:0.49rem;
}
.p3 .img img.i4{
    top:3.41rem;
    left:-0.32rem;
    width:0.42rem;
    height:0.51rem;
}
.p3 .img img.i5{
    top:4.16rem;
    left:2.13rem;
    width:0.53rem;
    height:0.51rem;
}
.p3 .img img.i6{
    top:3.22rem;
    left:4.66rem;
    width:0.45rem;
    height:0.45rem;
}
.p3 .img img.i7{
    top:1.91rem;
    left:4.18rem;
    width:0.43rem;
    height:0.43rem;
}
.p3 .img img.i8{
    top:0.73rem;
    left:4.52rem;
    width:0.48rem;
    height:0.48rem;
}
.p4{
    padding-bottom:0.4rem;
    background:url("../img/p4-bg.jpg") no-repeat center /cover;
}
#p4{
    background:url("../img/p4-title.png") no-repeat top;
    background-size:6.9rem 0.83rem;
}
#p4 .box h2{
    width:100%;
    height:0.83rem;
    font-size:0.36rem;
    text-align:center;
    line-height:0.66rem;
    color:#ffffff;
}
#p4 .box .ctn{
    margin-top:0.22rem;
    width:100%;
    height:6.31rem;
    position:relative;
    overflow:hidden;
    background:rgba(62,113,204,0.56);
    border-radius:4px;
}
#p4 .box .ctn img{
    margin:0 auto;
    width:80%;
    height:auto;
    display:block;
}
#p4 .box .ctn img.i1{
    margin-top:0.55rem;
}
#p4 .box .ctn img.i2{
    margin-top:0.4rem;
}
#p4 .box .ctn img.i3{
    margin-top:0.6rem;
}
#p4 .box .ctn img.i4{
    margin-top:0.44rem;
}
#p4 .box .ctn img.i5{
    margin-top:0.74rem;
}
#p4 .box .ctn h3{
    left:50%;
    padding:0.1rem;
    top:4.55rem;
    margin-left:-40%;
    width:80%;
    color:#ffffff;
    font-size:0.24rem;
    line-height:0.32rem;
    position:absolute;
    background:#3e71cc;
    border-radius:4px;
}
#p4 .sp2{
    bottom:0.1rem;
}

.p6{
    padding-bottom:0.7rem;
    background:#efefef;
}
.p6 ul li{
    margin:0 1.16666% 0.16rem;
    float:left;
    width:31%;
    position:relative;
}
.p6 ul li img{
    width:100%;
    height:auto;
    display:block;
}
.p6 ul li h2{
    bottom:0;
    left:0;
    width:100%;
    font-size:0.3rem;
    line-height:0.55rem;
    text-align:center;
    color:#ffffff;
    position:absolute;
    background:rgba(0,0,0,0.7);
}

.footer{
    padding:0.32rem 0.32rem 1.3rem;
    background:#2a2c32;
}
.footer{
    font-size:0.18rem;
    line-height:0.26rem;
    text-align:center;
    color:#eeeeee;
}


.p2 li{background: url(../img/shape.jpg) no-repeat;width: 1.57rem;height: 1.8rem;background-size: 100% 100%;overflow: hidden;text-align: center;margin-left: 0.22rem;float: left;}

.p2 li h3{width: 1.42rem;height: 0.4rem;line-height: 0.4rem;font-size: 0.28rem;color: #ff5151;margin: 0.54rem auto 0;background: #fff;}

.p2 li p{font-size: 0.18rem;color: #fff;padding-top: 0.1rem;}

.p2 h4{font-size: 0.36rem;color: #3e71cc;margin:0.5rem auto 0;width: 3rem;background: url(../img/cube.jpg) no-repeat left center;background-size: 0.2rem 0.2rem;padding-left: 0.4rem;}

.fl{float: left;}
.p2 img.fl{width: 1.39rem;height: 4.11rem;margin-top: 1.15rem;margin-left: 0.1rem;}
.p2 div.fl{width: 5.18rem;height: 5.18rem;position: relative;margin-top:0.5rem;margin-left: 0.74rem;}
.p2 div.fl img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}

.p2 .sec{width: 3.3rem;}
.p2 .table{background:url(../img/list.jpg) no-repeat;width: 7.1rem;margin: 0 auto;background-size: 100% 100%;height: 5.11rem;position: relative;}


.p2 .table .line{bottom: -0.03rem;width: 100%;position: absolute;left: 0;height: 4.16rem;}

.p2 .line div{width: 100%;height: 100%;background: url(../img/line.png) no-repeat;background-size: 100% 100%;transition: 0.8s;}

.p5{width: 100%;background: url(../img/bg.jpg) no-repeat;height: 6.28rem;background-size: 100% 100%;margin-top: 0.74rem;}
.p5 .title{color: #fff;}
#tab{width: 7.28rem;height: 4rem;}

.p5 .tab{width: 7.28rem;margin: 0 auto;overflow: hidden;}
.p5 .tab .swiper-slide div.clearfix{background: url(../img/tab.png) no-repeat;height: 3.19rem;width: 7.28rem;background-size: 100% 100%;color: #fff;}
.p5 .tab h3{font-size: 0.26rem;color: #3e71cc;padding: 0.24rem 0 0 0.94rem;}
.p5 .tab h4{font-size: 0.28rem;margin: 0.20rem 0 0 0.23rem;width: 2.46rem;text-align: center;}
.p5 .tab p{font-size: 0.22rem;margin: 0.35rem 0 0 0.22rem;line-height: 0.42rem;width: 2.46rem;text-align: center;}
.p5 .tab .linh{line-height: 0.36rem;;}
.p5 .tab div.fl{width: 3.04rem;}
.p5 .tab img{width: 4.16rem;margin-top: 0.2rem;height: 2.99rem;}
.p5 .tab-btn{bottom:0.35rem;}
.p5 .tab-btn span{width: 0.09rem;height: 0.09rem;}



@keyframes list5{
	from{
		transform: rotate(-335deg);
	}
	to{
		transform: rotate(0deg);
	}
}
@keyframes list4{
	from{
		transform: rotate(-274deg);
	}
	to{
		transform: rotate(0deg);
	}
}
@keyframes list1{
	from{
		transform: rotate(-35deg);
	}
	to{
		transform: rotate(0deg);
	}
}

@keyframes list2{
	from{
		transform: rotate(-162deg);
	}
	to{
		transform: rotate(0deg);
	}
}
@keyframes list3{
	from{
		transform: rotate(-228deg);
	}
	to{
		transform: rotate(0deg);
	}
}