@charset "utf-8";
@import "page.css";

#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(/theme/2020/static/images/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:#3c6ef0;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:#3c6ef0 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:#3c6ef0;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:#3c6ef0;border:1px solid #3c6ef0;color:#fff}
#service_xm .r_pic{width:850px;height:642px;background:url(/theme/2020/static/images/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(/theme/2020/static/images/p3_partimg01.png);top:47px;left:194px;z-index:9}
#service_xm .r_pic .img02{width:402px;height:234px;background-image:url(/theme/2020/static/images/p3_partimg02.png);top:84px;left:24px;z-index:8}
#service_xm .r_pic .img03{width:169px;height:220px;background-image:url(/theme/2020/static/images/p3_partimg03.png);top:255px;right:68px;z-index:8}
#service_xm .r_pic .img04{width:131px;height:82px;background-image:url(/theme/2020/static/images/p3_partimg04.png);top:436px;right:212px;z-index:7}
#service_xm .r_pic .img05{width:420px;height:262px;background-image:url(/theme/2020/static/images/p3_partimg05.png);top:272px;right:212px;z-index:6}
#service_xm .r_pic .img06{width:169px;height:350px;background-image:url(/theme/2020/static/images/p3_partimg06.png);top:0;left:169px;z-index:5}
#service_xm .r_pic .img07{width:138px;height:144px;background-image:url(/theme/2020/static/images/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 .wrap{overflow:inherit}
#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:#3c6ef0}
#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:18px;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:#3c6ef0;border:1px solid #3c6ef0}
#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(/theme/2020/static/images/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;height:70px;width:70px;text-align:center;line-height:70px;border-radius:100%;color:#fff;background:#e87676}
#service_ys .list ul li:nth-child(2) .icon i{background:#46b1d9}
#service_ys .list ul li:nth-child(3) .icon i{background:#e2b233}
#service_ys .list ul li:nth-child(4) .icon i{background:#e771b1}
#service_ys .list ul li:nth-child(5) .icon i{background:#ae82e3}
#service_ys .list ul li:nth-child(6) .icon i{background:#e87676}
#service_ys .list ul li:nth-child(7) .icon i{background:#e17ae2}
#service_ys .list ul li:nth-child(8) .icon i{background:#4fc9e2}
#service_ys .list ul li:nth-child(9) .icon i{background:#97d25c}
#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:18px;font-weight:normal;margin-top:30px}
#service_ys .list ul li  p{color:#999;line-height:24px;margin-top:10px}
#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:#3c6ef0;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){
	#service_one{width:100%;padding:.8rem 0;}
	#service_one .list{margin-top:.2rem}
	#service_one .list ul li{float: inherit;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:.28rem;}
	#service_one .list ul li .info small{font-size:.23rem;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:.23rem;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:100%;margin-right:0;margin-top:.3rem}
	#service_xm .list .item .ititle{line-height:.9rem;font-size:.28rem;}
	#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 .3rem}
	#service_xm .list .item .ilist a{margin:.05rem .1rem;padding:0 .2rem;line-height:.5rem}
	#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:.23rem;}
	#service_zz .list ul li .info .price{margin-top:.2rem}
	#service_zz .list ul li .info .price span:nth-child(1){font-size:.28rem;}
	#service_zz .list ul li .info .price span:nth-child(2){font-size:.23rem;margin-left:.05rem;}
	#service_zz .list ul li .info .price span i{font-size:.23rem;}
	#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}
	
	#w_video{height:4rem;}
	#w_video .text .txt .t{font-size:.36rem;line-height:.4rem;}
	#w_video .text .txt p{font-size:.23rem;margin-top:.2rem; padding:0 .3rem}
	
	#service_ys{padding:.8rem 0;}
	#service_ys .list{margin-top:.3rem;}
	#service_ys .list ul li{ float:inherit;width:100%;margin-right:0;padding:.3rem;margin-top:.2rem}
	#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:.36rem}
	#service_ys .list ul li p{color:#9FA3B3;line-height:.23rem;line-height:.36rem;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:.36rem;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)}
}