@charset "utf-8";

.ntitle{text-align:center;}
.ntitle small{display:block;font-size:14px;color:#777;margin-top:10px;}
.ntitle big{display:block;font-size:30px;}
.ntitle.w big,
.ntitle.w small{color:#fff;}

#service_one{width:100%;padding:80px 0;}
#service_one .list{ margin-top:20px}
#service_one .list ul li{ float:left; width:calc((100% - 30px) / 2); margin-right:30px; position:relative; margin-top:30px}
#service_one .list ul li:nth-child(2n){ margin-right:0}
#service_one .list ul li .img{ width:100%; min-height:200px}
#service_one .list ul li .img img{width:100%;height:100%;min-height:200px;object-fit:cover}
#service_one .list ul li .info{ position:absolute; left:30px; bottom:30px; color:#fff}
#service_one .list ul li .info big{ display:block; font-size:24px; position:relative}
#service_one .list ul li .info small{ display:block; font-size:14px; margin-top:10px}
#service_one .list ul li .info big:before{content:"";display:inline-block;width:20px;height:3px;background-color:#fff;position:absolute;top:-20px;left:0;}

#service_xm{width:100%;background:url(../img/service_xm_bg.jpg) no-repeat center center;background-size:cover; padding-bottom:80px}
#service_xm .wrap{position:relative;overflow:inherit}
#service_xm .title{color:#fff; padding-top:80px}
#service_xm .title h2{font-size:34px;font-weight:400;line-height:40px}
#service_xm .title p{font-size:18px;margin-top:20px}
#service_xm .text{margin-top:150px;color:#fff}
#service_xm .text en{font-size:12px}
#service_xm .text h2{font-size:34px;font-weight:400;line-height:40px}
#service_xm .list{margin-top:100px;position:relative;z-index:20}
#service_xm .list .item{float:left;width:calc((100% - 90px)/ 4);margin-right:30px;background:#fff;border-radius:2px;overflow:hidden;}
#service_xm .list .item:last-child{margin-right:0}
#service_xm .list .item .ititle{text-align:center;border-bottom:1px solid #eee;line-height:60px;font-size:18px;position:relative}
#service_xm .list .item .ititle span{position:relative;display:block;z-index:33}
#service_xm .list .item .ititle span:after{content:"";display:inline-block;width:30px;height:2px;background-color:#3c78d8;position:absolute;bottom:-1px;left:50%;margin-left:-15px}
#service_xm .list .item .ititle span:before{opacity:0;content:"";position:absolute;width:0;height:0;border-style:solid;border-width:8px 10px;border-color:#3c78d8 transparent transparent transparent;left:50%;transform:translateX(-50%);bottom:-15px}
#service_xm .list .item .ititle i{font-size:14px;margin-right:5px}
#service_xm .list .item .ititle em{background:#3c78d8;position:absolute;left:0;top:0;width:0;height:60px;display:block;z-index:11}
#service_xm .list .item:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px)}
#service_xm .list .item:hover .ititle em{width:100%}
#service_xm .list .item:hover .ititle span{color:#fff}
#service_xm .list .item:hover .ititle span:after{opacity:0}
#service_xm .list .item:hover .ititle span:before{opacity:1}
#service_xm .list .item .ilist{padding:30px}
#service_xm .list .item .ilist a{float:left;text-align:center;border:1px solid #eee;margin:5px 8px;padding:0 10px}
#service_xm .list .item .ilist a:hover{ background:#3c78d8; border:1px solid #3c78d8; color:#fff}
#service_xm .r_pic{width:850px;height:642px;background:url(../img/p3_computer_bg.png) no-repeat;position:absolute;top:50px;right:-76px;z-index:10}
#service_xm .r_pic span{display:block;background-repeat:no-repeat;position:absolute}
#service_xm .r_pic .img01{width:443px;height:367px;background-image:url(../img/p3_partimg01.png);top:47px;left:194px;z-index:9}
#service_xm .r_pic .img02{width:402px;height:234px;background-image:url(../img/p3_partimg02.png);top:84px;left:24px;z-index:8}
#service_xm .r_pic .img03{width:169px;height:220px;background-image:url(../img/p3_partimg03.png);top:255px;right:68px;z-index:8}
#service_xm .r_pic .img04{width:131px;height:82px;background-image:url(../img/p3_partimg04.png);top:436px;right:212px;z-index:7}
#service_xm .r_pic .img05{width:420px;height:262px;background-image:url(../img/p3_partimg05.png);top:272px;right:212px;z-index:6}
#service_xm .r_pic .img06{width:169px;height:350px;background-image:url(../img/p3_partimg06.png);top:0;left:169px;z-index:5}
#service_xm .r_pic .img07{width:138px;height:144px;background-image:url(../img/p3_partimg07.png);top:62px;left:90px;z-index:4}
#service_xm .r_pic span{opacity:0}
#service_xm .r_pic .img01{-webkit-transform:translateX(-60px);-moz-transform:translateX(-60px);-ms-transform:translateX(-60px);transform:translateX(-60px)}
#service_xm .r_pic .img02{-webkit-transform:translateX(-50px);-moz-transform:translateX(-50px);-ms-transform:translateX(-50px);transform:translateX(-50px)}
#service_xm .r_pic .img04{-webkit-transform:translateX(-80px);-moz-transform:translateX(-80px);-ms-transform:translateX(-80px);transform:translateX(-80px)}
#service_xm .r_pic .img05{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}
#service_xm .r_pic .img03{-webkit-transform:translate(40px,40px);-moz-transform:translate(40px,40px);-ms-transform:translate(40px,40px);transform:translate(40px,40px)}
#service_xm .r_pic .img06,
#service_xm .r_pic .img07{-webkit-transform:translate(-40px,-40px);-moz-transform:translate(-40px,-40px);-ms-transform:translate(-40px,-40px);transform:translate(-40px,-40px)}
#service_xm .r_pic.active .img01,
#service_xm .r_pic.active .img02,
#service_xm .r_pic.active .img04,
#service_xm .r_pic.active .img05{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:all .8s ease-out 1.2s;-moz-transition:all .8s ease-out 1.2s;transition:all .8s ease-out 1.2s}
#service_xm .r_pic.active .img03,
#service_xm .r_pic.active .img06,
#service_xm .r_pic.active .img07{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all .8s linear .5s;-moz-transition:all .8s linear .5s;transition:all .8s linear .5s}

#service_zz{ width:100%; padding:80px 0}
#service_zz .list{ margin-top:30px;}
#service_zz .list ul li{ background:#fff; border:1px solid #E8EDF2; float:left; width:calc((100% - 120px) / 5); margin-right:30px; padding:20px 10px; margin-top:20px; border-radius:3px; position:relative; overflow:hidden}
#service_zz .list ul li:nth-child(5n){ margin-right:0}
#service_zz .list ul li .icon{ text-align:center;}
#service_zz .list ul li .icon i{ font-size:30px; border:1px solid #eee; height:70px; width:70px; text-align:center; line-height:70px; border-radius:100%; color:#3c78d8}
#service_zz .list ul li .icon i{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#service_zz .list ul li .info { text-align:center; margin-top:20px}
#service_zz .list ul li .info h2{ font-size:16px; font-weight:normal}
#service_zz .list ul li .info p{ font-size:14px; color:#999;}
#service_zz .list ul li .info p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;}
#service_zz .list ul li .info .price{ margin-top:10px}
#service_zz .list ul li .info .price span:nth-child(1){ color:#f60; font-size:20px; font-family:Lato}
#service_zz .list ul li .info .price span:nth-child(2){ font-size:12px; margin-left:5px; color:#666}
#service_zz .list ul li .info .price span i{ font-size:14px;}
#service_zz .list ul li .info .view{ margin-top:10px}
#service_zz .list ul li .info .view span{ border:1px solid #eee; padding:3px 20px; display:inline-block}
#service_zz .list ul li:hover {z-index: 1; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.06); }
#service_zz .list ul li:hover .icon i{ color:#fff; background:#3c78d8; border:1px solid #3c78d8}
#service_zz .list ul li em{ display:none}

#w_video{position:relative;overflow:hidden;width:100%;height:450px;}
#w_video .text{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex; background:url(../img/pat.png) rgba(9,50,66,.5);justify-content:center;align-items:center; width:100%; height:100%}
#w_video .text .txt{overflow:hidden;margin:0 auto;text-align:center;}
#w_video .text .txt .t{ display:block;color:#fff;font-size:42px; line-height:42px; font-weight:700;}
#w_video .text .txt p{ display:block;color:#fff;font-size:18px; margin-top:20px}
#w_video .video video{position:absolute;top:0;left:0;width:100%;object-fit:fill;}

#service_ys{ width:100%; padding:80px 0;}
#service_ys .list{ margin-top:50px;}
#service_ys .list ul li{ float:left;border:1px solid #E8EDF2; width:calc((100% - 90px) / 4); margin-right:30px; padding:30px; text-align:center;}
#service_ys .list ul li:last-child{ margin-right:0}
#service_ys .list ul li .icon{ text-align:center;}
#service_ys .list ul li .icon i{ font-size:30px; border:1px solid #3c78d8; height:70px; width:70px; text-align:center; line-height:70px; border-radius:100%;color:#fff; background:#3c78d8}
#service_ys .list ul li .icon i{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#service_ys .list ul li  h2{ font-size:16px; font-weight:normal; margin-top:20px}
#service_ys .list ul li  p{ color:#999; line-height:24px}
#service_ys .list ul li:hover {z-index: 1; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.06); }
#service_ys .list ul li:hover .icon i{ background:#fff;color:#3c78d8; border:1px solid #eee}

#service_bz{width:100%;padding:80px 0; background:#f8f9fc}
#service_bz .list{margin-top:50px}
#service_bz .list ul li{float:left;width:calc((100% - 150px)/ 6);margin-right:30px;position:relative}
#service_bz .list ul li:last-child{margin-right:0}
#service_bz .list ul li .img img{width:100%}
#service_bz .list ul li span{position:absolute;left:20px;top:20px;color:#fff;font-size:18px;width:40px;line-height:22px;padding-bottom:5px}
#service_bz .list ul li span:after{content:"";display:inline-block;width:10px;height:1px;background-color:#fff;position:absolute;top:60px;left:2px}
#service_bz .list ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px)}


@media (max-width:1100px){
	#service_xm .list .item .ilist{padding:20px 10px;}
	#service_xm .list .item .ilist a{margin:5px 5px;padding:0 5px}
}
@media (max-width:800px){
	.ntitle small{font-size:.24rem;margin-top:.1rem;}
	.ntitle big{font-size:.4rem;}	
	#service_one{width:100%;padding:.8rem 0;}
	
	

#service_one .list{ margin-top:.2rem}
#service_one .list ul li{ float:left; width:100%; margin-right:0;margin-top:.3rem}
#service_one .list ul li .img{ width:100%; min-height:3rem}
#service_one .list ul li .img img{min-height:3rem;}
#service_one .list ul li .info{ left:.3rem; bottom:.3rem;}
#service_one .list ul li .info big{ font-size:.26rem;}
#service_one .list ul li .info small{ font-size:.24rem; margin-top:.1rem}
#service_one .list ul li .info big:before{width:.3rem;height:.03rem;top:-.2rem;}
	
	#service_xm{padding:.8rem 0}
	#service_xm .title{color:#fff; padding-top:0}
	#service_xm .title h2{font-size:.46rem;}
	#service_xm .title p{font-size:.24rem;margin-top:.2rem}
	#service_xm .text{margin-top:1rem;color:#fff}
	#service_xm .text en{font-size:.2rem}
	#service_xm .text h2{font-size:.46rem;}
	#service_xm .list{margin-top:1rem;}
	#service_xm .list .item{width:48%;margin-right:0;margin-top:.3rem}
	#service_xm .list .item:nth-child(2n){ float:right}
	#service_xm .list .item .ititle{line-height:.9rem;font-size:.3rem;}
	#service_xm .list .item .ititle span:after{width:.3rem;height:.02rem;margin-left:-.15rem}
	#service_xm .list .item .ititle i{font-size:.2rem;margin-right:.05rem}
	#service_xm .list .item .ititle em{;height:.9rem;}
	#service_xm .list .item:hover .ititle em{width:100%}
	#service_xm .list .item:hover .ititle span{color:#fff}
	#service_xm .list .item:hover .ititle span:after{opacity:0}
	#service_xm .list .item:hover .ititle span:before{opacity:1}
	#service_xm .list .item .ilist{padding:.3rem .1rem}
	#service_xm .list .item .ilist a{margin:.05rem .08rem;padding:0 .1rem; line-height:.44rem}
	#service_xm .r_pic{ display:none}
	
	#service_zz{padding:.8rem 0}
	#service_zz .list{ margin-top:.3rem;}
	#service_zz .list ul li{width:48%; margin-right:0; padding:.3rem .2rem; margin-top:.2rem; }
	#service_zz .list ul li:nth-child(2n){ float:right}
	#service_zz .list ul li .icon i{ font-size:.4rem;height:1rem; width:1rem; line-height:1rem;}
	#service_zz .list ul li .info {margin-top:.2rem}
	#service_zz .list ul li .info h2{ font-size:.26rem;}
	#service_zz .list ul li .info p{ font-size:.24rem;}
	#service_zz .list ul li .info .price{ margin-top:.2rem}
	#service_zz .list ul li .info .price span:nth-child(1){ font-size:.3rem;}
	#service_zz .list ul li .info .price span:nth-child(2){ font-size:.24rem; margin-left:.05rem;}
	#service_zz .list ul li .info .price span i{ font-size:.24rem;}
	#service_zz .list ul li .info .view{ margin-top:.2rem}
	#service_zz .list ul li .info .view span{ padding:.05rem .15rem; font-size:.22rem}
	#service_zz .list ul li em{ display:none}
	
	#service_ys{padding:.8rem 0;}
	#service_ys .list{ margin-top:.3rem;}
	#service_ys .list ul li{ width:48%; margin-right:0; padding:.3rem; margin-top:.2rem}
	#service_ys .list ul li:nth-child(2n){ float:right}
	#service_ys .list ul li .icon i{ font-size:.4rem; height:1rem; width:1rem; line-height:1rem;}
	#service_ys .list ul li h2{ font-size:.26rem;margin-top:.2rem; line-height:.34rem}
	#service_ys .list ul li p{ color:#9FA3B3; line-height:.24rem; line-height:.34rem; margin-top:.1rem}
	
	#service_bz{padding:.8rem 0}
	#service_bz .list{margin-top:.3rem}
	#service_bz .list ul li{width:48%;margin-right:0; margin-top:.2rem}
	#service_bz .list ul li:nth-child(2n){ float:right}
	#service_bz .list ul li span{left:.2rem;top:.2rem;font-size:.26rem;width:.6rem;line-height:.34rem;padding-bottom:.5rem}
	#service_bz .list ul li span:after{width:.3rem;height:1px;top:.8rem;left:.02rem}
	#service_bz .list ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px)}
}



@media screen and (max-width: 768px){
	#w_video .text .txt {
		padding: 0 20px;
	}
	#w_video .text .txt .t {
		font-size: 24px;
	}
	#w_video .text .txt p {
		font-size: 16px;
	}
	#w_video {
		height: 220px;
	}
}