@charset "utf-8";
/*
 
 * 17素材vip建站专区模块代码
 * 详尽信息请看官网：http://www.17sucai.com/pins/vip
 *
 * Copyright , 温州易站网络科技有限公司版权所有
 *
 * 请尊重原创，未经允许请勿转载。
 * 在保留版权的前提下可应用于个人或商业用途
 
*/


.service-title{text-align: center;margin: 30px 0 0 0;}
.service-title h2{display: block;font-size: 36px;}
.service-title p{display: block;color: #888;font-size: 16px;}
.solution-box{margin: 30px 0 0 0;}
.solution-cut{margin: 0 auto;position: relative;}
.solution-swiper{width: 100%;overflow: hidden;}
.solution-box .fa{position: absolute;top: 40%;bottom: 0;width: 50px;cursor: pointer;border: none;font-size: 40px;padding: 0;transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box .fa:hover{color: #eb3d01;}
.solution-box .fa-back{right: 100%;}
.solution-box .fa-more{left: 100%;}
.solution-box ul{width: 10000%;}
.solution-box ul:after{display: block;clear: both;content: '';}
.solution-box ul li{width: .2%;float: left;text-align: center;color: #fff;position: relative;}
.solution-box ul li span{display: block;position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, .5);transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li:nth-child(2) span,
.solution-box ul li:nth-child(4) span{background: rgba(0, 0, 0, .75);transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li i{font-size: 50px;opacity: .85;position: absolute;width: 100%;left: 0;bottom: 53%;transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li hr{width: 30px;height: 2px;background: #fff;border: none;position: absolute;left: 50%;top: 50%;margin: 0 0 0 -15px;padding: 0;transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li h3{font-size: 24px;position: absolute;width: 100%;left: 0;top: 53%;transition: .3s;}
.solution-box ul li p{width: 80%;position: absolute;font-size: 16px;left: 10%;top: 70%;opacity: 0;transition: .3s;}
.solution-box ul li a{position: absolute;top: 85%;font-size: 16px;line-height: 32px;width: 120px;margin: 0 0 0 -60px;color: #fff;border: 2px solid #fff;opacity: 0;transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li a:hover{background: #fff;color: #373d41;}
.solution-box ul li img{display: block;width: 96%;}
.solution-box ul li:hover span{background: rgba(48, 113, 255, .85);}
.solution-box ul li:hover i{bottom: 63%;}
.solution-box ul li:hover hr{top: 40%;opacity: 0;}
.solution-box ul li:hover h3{top: 38%;}
.solution-box ul li:hover p{top: 50%;opacity: 1;}
.solution-box ul li:hover a{top: 75%;opacity: 1;}
/*响应式*/
@media(max-width:1680px){.solution-cut{width: 1480px;}.solution-box ul li i{font-size: 46px;}.solution-box ul li h3{font-size: 22px;}.solution-box ul li p{font-size: 14px;}.solution-box ul li a{font-size: 14px;line-height: 28px;width: 100px;margin: 0 0 0 -50px;}}
@media(max-width:1600px){.solution-cut{width: 1300px;}}
@media(max-width:1440px){.solution-cut{width: 1200px;}.solution-box ul li i{font-size: 40px;}.solution-box ul li h3{font-size: 18px;}.solution-box ul li p{font-size: 12px;}}
@media(max-width:767px){.solution-cut{width: 100%;padding: 0;}.solution-box ul li{width: 290px;}.solution-box .fa{display: none;}.solution-box .fa-back{left: 0;right: auto;}.solution-box .fa-more{left: auto;right: 0;}}
/*字体标*/
@font-face{font-family: "icon";src: url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ljb25mb250LmVvdD8%3D&b=29);src: url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ljb25mb250LmVvdD8%3D&b=29) format('embedded-opentype'), url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ljb25mb250LndvZmY%2F&b=29) format('woff'), url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ljb25mb250LnR0Zj8%3D&b=29) format('truetype'), url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ljb25mb250LnN2Zz8%3D&b=29) format('svg');}
.fa{font-family: "icon" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.fa-back:before{content: "\e697";}
.fa-more:before{content: "\e6a7";}


.fa-angle-left:before{content: "\e697";}
.fa-angle-right:before{content: "\e6a7";}
.fa-tel:before{content: "\e6a7";}
.fa-email:before{content: "\e6a7";}
.fa-wxbgongju:before{content: "\e61b";}
.fa-all:before{content: "\e696";}
.fa-security:before{content: "\e71c";}
.fa-huanhuobz:before{content: "\e67c";}
.fa-aniukefu2:before{content: "\e6ca";}
.fa-set1:before{content: "\e6dc";}
.fa-naozhong:before{content: "\e648";}
.fa-suo:before{content: "\e652";}


/*字体标*/
@font-face {
  font-family: "flaticon";
  src: url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ZsYXRpY29uLmVvdA%3D%3D&b=29);
  src: url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ZsYXRpY29uLmVvdD8%3D&b=29#iefix) format("embedded-opentype"),
       url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ZsYXRpY29uLndvZmYy&b=29) format("woff2"),
       url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ZsYXRpY29uLndvZmY%3D&b=29) format("woff"),
       url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ZsYXRpY29uLnR0Zg%3D%3D&b=29) format("truetype"),
       url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ZsYXRpY29uLnN2Zw%3D%3D&b=29#flaticon) format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "flaticon";
    src: url(browse.php?u=Oi8vd3d3LmxueGp4LmNuL3RlbXBsYXRlcy9jbl90aC9jc3MvY3NzL2ZsYXRpY29uLnN2Zw%3D%3D&b=29#flaticon) format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: flaticon;
  font-size: 20px;
  font-style: normal;
}
.flaticon-telephone:before { content: "\f13a";margin-right: 3% }


.flaticon-telephone:before { content: "\f13a"; }


.flaticon-email:before { content: "\f10c"; margin-right: 3%}
.flaticon-phone:before { content: "\f13a"; margin-right: 3%}