@charset "utf-8";
/* CSS Document */

#service{ margin:0 auto;padding:120px 0;}
#service>.title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 30px; color: #333; text-align:center;font-weight: 600;}
#service>.title:after{position:absolute;z-index:3;left:50%;bottom:-10px; margin-left:-25px; width:50px;height:2px; background:#026ab5;content:'';}
#service>.container{width:86%; max-width:1300px;margin:0 auto;padding:40px 0;}
#service>.container>.text{text-align:left;}
#service>.container>.text p{font-size:16px;color: #666;line-height: 26px;margin-top:10px;}

#service>.container>.hotline{ padding:120px 0;}
#service>.container>.hotline>.tel{width:auto;}
#service>.container>.hotline>.tel>h3{display:block; font-size:16px; font-weight:normal; color:#666;}
#service>.container>.hotline>.tel>h2 { display:block; color:#026ab5;font-size: 40px;margin-top:10px;align-items: center;text-align: center;}
#service>.container>.hotline>.tel>h2 img{display:inline-block; height:50px; width:auto;margin-right:10px;}
#service>.container>.hotline>.content{ text-align:right;}
#service>.container>.hotline>.content>.item{display:inline-block;margin-left:40px;}
#service>.container>.hotline>.content>.item>.icon{ width:98px;height:98px; line-height:98px; margin:0 auto; text-align:center; border:3px solid #026ab5; border-radius:100%;}
#service>.container>.hotline>.content>.item>.icon img{width:40px;height:auto;}
#service>.container>.hotline>.content>.item>.text{ text-align:center;padding:10px;font-size:16px; color:#666; margin:0 auto;}
#service>.container>.hotline>.content>.item>.text>span{display:block;font-size:14px;}

#service>.container>.project{margin:0 auto;padding:40px 0;}
#service>.container>.project>ul{margin:0 auto;}
#service>.container>.project>ul>li{display:block;float:left; border:1px solid #ddd;box-sizing:border-box;padding:50px 0; width:18.4%; margin-bottom:2%; margin-right:2%; background:rgba(255,255,255,.6); transition:all .35s;}
#service>.container>.project>ul>li:nth-child(5n){margin-right:0 !important;}
#service>.container>.project>ul>li>.icon{ position:relative; width:50px;height:50px; line-height:50px; margin:0 auto;overflow:hidden;}
#service>.container>.project>ul>li>.icon>img{position:absolute;z-index:1;left:0;top:0; width:100%;height:auto;}
#service>.container>.project>ul>li>.text{font-size:16px;padding:20px; text-align:center;margin:0 auto;}
#service>.container>.project>ul>li:hover{background:#026ab5; border:1px solid #026ab5;}
#service>.container>.project>ul>li:hover .icon>img{top:-50px;}
#service>.container>.project>ul>li:hover .text{color:#fff;}



@media only screen and (max-width: 1080px){
  #service>.container>.hotline>.tel{float:none; width:100%; text-align:center;}
  #service>.container>.hotline>.content{ text-align:center;padding:30px 0;}
  #service>.container>.hotline>.content>.item{margin:0; width:33.33%; float:left;}
  #service>.container>.project>ul>li{width:48%; margin-bottom:2%; margin-right:0 !important;}
  #service>.container>.project>ul>li:nth-child(even){float:right;}
}

@media only screen and (max-width: 640px){
  #service{ padding:60px 0;}
  #service>.title{ font-size: 20px;}
  #service>.container>.hotline{ padding:60px 0;}
  #service>.container>.hotline>.tel>h3{font-size:14px;}
  #service>.container>.hotline>.tel>h2 { font-size:28px;}
  #service>.container>.hotline>.tel>h2 img{height:30px;}
  #service>.container>.hotline>.content>.item>.icon{ width:60px;height:60px; line-height:60px;}
  #service>.container>.hotline>.content>.item>.text{ font-size:14px;}
  #service>.container>.hotline>.content>.item>.text>span{font-size:12px;}


}