html, body {
        position: relative;
        height: 100%;
        width: 100%
        background: #f3f3f3;
        font-family: "Microsoft YaHei";
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }

    *{margin: 0;padding: 0;}
    ul,li{list-style: none;margin: 0;padding: 0;}
a{text-decoration: none;}



    .swiper-container {
        width: 100%;
        height: 100%;
    }
    /*全背景*/
    .swiper-slide {
       
        font-size: 18px;
        background: #f3f3f3;

        /* Center slide text vertically */
     
    }
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 110px;
    left: 0;
    width: 100%;
}
.swiper-pagination-bullet {
    width: 22px;
    height:22px;
    display: inline-block;
    border-radius: 11px;
    background: #3690D0;/*ee6412*/
    opacity: 1;
    color: #fff;
    font-size: 12px;
    letter-spacing:2px;  /* 字体间距 */
  
    overflow: hidden;
    transition: all 1s;
    position: relative;
   
}
.swiper-pagination-bullet font{
  opacity: 1;
  line-height: 22px;
  overflow: hidden;
  width: 100%;
  display: block;
  position: absolute;left: 0;top: 0;
  opacity: 0

}

.swiper-pagination-bullet-active {
   
    width: 80px;

}

.swiper-pagination-bullet-active  font{
  opacity: 1;

}


/*头部背景*/
.boxnone{ display: none; }
.nav{
    background: #fff;
    height:80px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    text-align: right;
    
    border-width: 0 0 1px 0;
    /*border-style: solid;背景底框不要实条*/
    box-shadow: 0px 1px 5px #717171;
}

/*头部字块，鼠标over、out效果*/
.nav ul { margin-right:5%}
.nav ul li{
    display: inline-block;
    padding: 0px 10px;
    height: 77px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    font-size:14px;  /* 字体大小 */
    letter-spacing:4px;  /* 字体间距 */


}

/*菜单文本框的hover 和 active效果*/
.nav ul li:hover , .nav ul li.active{
    
    border-width: 0 0 3px 0;
    border-style: solid;
    border-color: #e4392a;
    /*background: #519ed5;*/
    
    
}
/*导航字体a所有样式*/
.nav ul li a{
    color: #717171;
    display: inline-block;
}

.logo{
    position: absolute;
    left: 5%; top: 0;
    height: 80px;
}

.tuiguang{

    width: 1650px;
    color: #717171;
    font-size: 22px;
    text-align: left;
    margin: 50px auto 0 auto;
    letter-spacing:4px;  /* 字体间距 */

}

.tuiguang span{

padding: 0px 30px;  /* 类别之间的间距 */

}


.title1{
    position: absolute;
    z-index: 2;
    top: -20px;
    display: none;
     width: 100%;
    text-align: center;
    height:125px;
    padding-top: 93px;
    color: #717171;
    font-size: 20px;
    letter-spacing:4px;  /* 字体间距 */
}


#title1{
    background: url(../images/title1.png) no-repeat center top;

}

#title2{
    background: url(../images/title2.png) no-repeat center top;
 
}

#title3{
    background: url(../images/title3.png) no-repeat center top;
  
}

#title4{
    background: url(../images/title4.png) no-repeat center top;

}

#title5{
    background: url(../images/title5.png) no-repeat center top;
   
}



.q1{
    background: url(../images/banner1.jpg) no-repeat center center;
    background-size: cover
}
.q2{
    background: url(../images/banner2.jpg) no-repeat center center;
    background-size: cover
}
.q3{
    background: url(../images/banner3.jpg) no-repeat center center;
    background-size: cover
}



.cbox{
    width: 1650px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -825px;
    height: 844px;
    margin-top: -342px;
    background: rgba(0,0,0,.0);

}
.idea{
    width: 1200px;
    height: 844px;
    margin: 0 auto;
    background: url(../images/idea.png) no-repeat center center;
    position: relative;
}
.blue1{
       width: 88px;
    height: 16px;
    border-radius: 8px;
    position: absolute;
    left: 556px;
    top: 556px;
    display: block;
    

}
.blue2{
    width: 88px;
    height: 16px;
    border-radius: 8px;
    position: absolute;
    left: 556px;
    top: 576px;
    display: block;
   
}
.blue3{
    width: 76px;
    height:16px;
    border-radius: 8px;
    position: absolute;
    left: 562px;
    top: 596px;
    
}
.blue4{
    width: 43px;
    height:16px;
    border-radius: 8px;
    position: absolute;
    left: 576px;
    top: 615px;
   
}
.dh{}
.dh span{
    width: 0%;
    height:16px;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    background: #519ed5;

}

.dh.active span{
    width: 100%;
    transition: width 1s;
    
}


.g1{
    width: 100px;
    height: 16px;
    position: absolute;
   left: 396px;
    top: 306px;
    display: block;

    border-radius: 8px;
    transform:rotate(45deg);
    transform-origin:right bottom;
    

}
.g2{
    width: 100px;
    height: 16px;
    position: absolute;
    left: 605px;
    top: 306px;
    display: block;
  
    border-radius: 8px;
    transform: rotate(135deg);
    transform-origin: right bottom;
   
}
.g3{
    width: 100px;
    height: 16px;
    position: absolute;
    left: 496px;
    top: 250px;
    display: block;
   
    border-radius: 8px;
    transform: rotate(90deg);
    transform-origin: right bottom;
    
}
.g4{
    width: 100px;
    height: 16px;
    position: absolute;
    left: 367px;
    top: 393px;
    display: block;
   
    border-radius: 8px;
   
}
.gg{  text-align: right;}
.g5{
    width: 100px;
    height: 16px;
    position: absolute;
    left: 737px;
    top: 393px;
    display: block;
    border-radius: 8px;
    text-align: left;
   
}



.gg span{
    width: 0%;
    height:16px;
    border-radius: 8px;
    display:inline-block;
    
    background: #519ed5;

}

.gg.active span{
    width: 100%;
    transition: width 1s 1s;
    
}


.k1{
    position: absolute;
    left: 44px;
    top: 108px;
    display: none;
}
.k2{
    position: absolute;
    left: 780px;
    top: 128px;
     display: none;
}
.k3{
    position: absolute;
    left: -48px;
    top: 400px;
     display: none;
}
.k4{
    position: absolute;
    left: 838px;
    top: 374px;
     display: none;
}





.serve{
    width: 1650px;
    height: 844px;
    margin: 0 auto;
   
    position: relative;
}


.serve ul{
    padding-top: 110px;
   
}
.serve ul li{
    width: 200px;
    height: 200px;
    border: 1px solid #519ed5;
    float: left;
    margin: 45px 172px;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 25px #ccc;
    background: rgba(0,0,0,0.0);
    display: none;
}

.serve ul li p{
     width: 180px;
    height: 180px;
    border:1px solid #519ed5;
   
    border-radius: 100%;
    background-color:#519ed5;
     transition: all .3s;
     z-index: 12;
     position: absolute;
     left:10px;
     top:10px;

}


.serve ul li:hover span{
   
  display: block;
}

.serve ul li h2{
    display: block;
    position: absolute;
    bottom: -51px;
    width: 100%;
    text-align: center;
    color: #717171;
    font-size: 20px;
    letter-spacing:3px;  /* 字体间距 */
    font-weight:normal;  /* 字体不加粗 */
}

.serve ul li span{
    display: none;
    color: #fff;
    text-align: right;
    position: absolute;
    z-index: 2;
    width: 152px;
    height:55px;
    left: 172px;
    top: 31px;
    line-height: 32px;
    padding-right: 10px;
    box-sizing: border-box;
    letter-spacing:2px;  /* 字体间距 */
     transition: all .3s;
}
.serve ul li span:nth-child(1){
    background: url(../images/tag.png) no-repeat 2px 0;
}
.serve ul li span:nth-child(2){
    background: url(../images/tag.png) no-repeat 0px -56px;
    top: 81px;
}

.serve ul li span:nth-child(3){
    background: url(../images/tag.png) no-repeat 3px -110px;
    top: 131px;

}
.serve ul li span:hover{ color: #000 }



.i1{
    background: url(../images/i1.png) no-repeat center center;
    background-size: 100%;

}
.i1:hover{
     background:#f6f6f6 url(../images/i1-over.png) no-repeat center center;
    background-size:80%;
    border:1px solid #519ed5;
    transform: rotate(-10deg);
}

.i2{
    background: url(../images/i2.png) no-repeat center center;
    background-size: 100%;
}
.i2:hover{
     background:#f6f6f6 url(../images/i2-over.png) no-repeat center center;
    background-size:80%;
    border:1px solid #519ed5;
    transform: rotate(-10deg);
}
.i3{
    background: url(../images/i3.png) no-repeat center center;
    background-size: 100%
}
.i3:hover{
     background:#f6f6f6 url(../images/i3-over.png) no-repeat center center;
    background-size:80%;
    border:1px solid #519ed5;
    transform: rotate(-10deg);
}
.i4{
    background: url(../images/i4.png) no-repeat center center;
    background-size: 100%
}
.i4:hover{
     background:#f6f6f6 url(../images/i4-over.png) no-repeat center center;
    background-size:80%;
    border:1px solid #519ed5;
    transform: rotate(-10deg);
}
.i5{
    background: url(../images/i5.png) no-repeat center center;
    background-size: 100%
}
.i5:hover{
     background:#f6f6f6 url(../images/i5-over.png) no-repeat center center;
    background-size:80%;
    border:1px solid #519ed5;
    transform: rotate(-10deg);
}
.i6{
    background: url(../images/i6.png) no-repeat center center;
    background-size: 100%
}
.i6:hover{
     background:#f6f6f6 url(../images/i6-over.png) no-repeat center center;
    background-size:80%;
    border:1px solid #519ed5;
    transform: rotate(-10deg);
}






/*pinpai*/
.pinpai{
    width: 1650px;
    height: 844px;
    margin: 0 auto;
    
    position: relative;
}



.anli {
    width: 1200px;
    height: 844px;
    margin: 0 auto;
    position: relative;
}
.anlititle{
    position: absolute;
    left: -114px;
    top: 160px;
    display: block;
    width: 140px;
    color: #717171;
    font-size:22px;  /* 字体大小 */
    letter-spacing:4px;  /* 字体间距 */
}

/* "查看"按钮样式设置 */
.anmore{
    position: absolute;
    left: 495px;    /* 灰条x位置 */
    top: 514px;     /* 灰条y位置 */
    display: block;
    width: 190px;   /* 灰条宽 */
    font-size: 20px;
    color: #fff;
    background: #ccc;
    padding: 5px 19px;
    letter-spacing:4px;  /* 字体间距 */
    text-align:center;
}


.anli ul{
        padding-top: 100px;

}
.anli ul  li{
    width: 260px;
    height: 300px;
    float: left;
    border: 1px solid #c5c6c6;
    position: relative;
    overflow: hidden;
    margin: 61px 19px 100px 19px;
}

/* 具体案例标题字体样式设置 */
.anli ul  li p{
    display: block;
    position: absolute;
    top: 248px;
    height: 300px;
    /*background: rgba(0,0,0,.7);*/ /* 浮层统一背景 */
    font-size: 18px;
    letter-spacing:2px;  /* 字体间距 */
    transition: all .3s;

}
.anli ul li p span.gsm{
    display: block;
    height: 53px;
    text-align: center;
    line-height: 53px;
    color: #fff
    
}

/* 具体案例浮层字体样式设置 */
.anli ul li p span.jieshao{
    
    display: block;
    height: 53px;
    text-align: left;
    line-height: 28px;
    color: #fff;
    padding: 14px;
    font-size: 16px;
    letter-spacing:4px;  /* 字体间距 */
    font-weight:normal;  /* 字体不加粗 */
    
}

/* 具体案例浮层"详情"样式设置 */
.anli ul li p a.chakan{
    
    display: block;
    width: 100%;
    height: 53px;
    text-align: center;
    line-height:53px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    /*background: rgba(0,0,0,.7);*/
    
}


.listlogo{
    position: absolute;
    left: 0;
    top:0;
}

.anli ul  li:hover p{
    top: 0
}



.clear{clear: both;}

.kehulist{
    width: 100%;
    position: relative;
}

.kehutitle{
    position: absolute;
    left: -114px;
    top: 38px;
    display: block;
    width: 140px;
    color: #717171;
    font-size:22px;  /* 字体大小 */
    letter-spacing:4px;  /* 字体间距 */
}
.kehulist img{    
    margin-left: 15px;
    margin-right: 31px;}




.line{
    height: 1px;
    margin: 20px auto;
    border-bottom: 1px solid #ccc;
    width: 600px;


}


.about{
    width: 1650px;
    height: 844px;
    margin: 0 auto;
    
    position: relative;
}

.aboutlist{
width: 1146px;
margin: 0 auto;
    
}

/* “关于我们”6个模块的样式设置 */
.aboutlist li{
    width: 300px;
    height: 190px;
    background: #117739;
    color: #fff;
    float: left;
    margin: 30px 40px;
    line-height: 30px;
    border: 1px solid #117739;
    text-align: center;
    font-size:20px;  /* 字体大小 */
    letter-spacing:2px;  /* 字体间距 */
    display: none;
}
.line1{
    height: 40px;
    margin: 0px auto;
    border-bottom: 1px solid #ccc;
    width: 600px;
    line-height: 40px;
    padding-top: 170px;
}
.line2{
    height: 40px;
    margin: 0px auto;
    border-bottom: 1px solid #ccc;
    width: 600px;
    line-height: 40px;
    padding-top: 20px;
}


.footer{
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #00204f;
    color: #717171;
    z-index: 100;
    font-size:12px;  /* 字体大小 */
    letter-spacing:2px;  /* 字体间距 */
}


.aboutlist li.kk1{
     background:#117739 url(../images/ikingcontact1-out.jpg) no-repeat center center; cursor: pointer;
     transition: all .3s;
}

.aboutlist li.kk1:hover{
     background:#117739 url(../images/ikingcontact1-over.jpg) no-repeat center center;
}

.aboutlist li.kk2{
     background:#117739 url(../images/ikingcontact2-out.jpg) no-repeat center center; cursor: pointer;
     transition: all .3s;
}

.aboutlist li.kk2:hover{
     background:#117739 url(../images/ikingcontact2-over.jpg) no-repeat center center;
}

.aboutlist li.kk3{
     background:#117739 url(../images/tenmancontact1-out.jpg) no-repeat center center; cursor: pointer;
     transition: all .3s;
}

.aboutlist li.kk3:hover{
     background:#117739 url(../images/tenmancontact1-over.jpg) no-repeat center center;
}

.aboutlist li.kk4{
     background:#117739 url(../images/tenmancontact2-out.jpg) no-repeat center center; cursor: pointer;
     transition: all .3s;
}

.aboutlist li.kk4:hover{
     background:#117739 url(../images/tenmancontact2-over.jpg) no-repeat center center;
}

.aboutlist li.iking{
     background:#117739 url(../images/ikingcontact3-out.jpg) no-repeat center center; cursor: pointer;
     transition: all .3s;
}

.aboutlist li.iking:hover{
     background:#117739 url(../images/ikingcontact3-over.jpg) no-repeat center center;
}

.aboutlist li.tenman{
    background:#117739 url(../images/tenmancontact3-out.jpg) no-repeat center center; cursor: pointer;
    transition: all .3s;
}

.aboutlist li.tenman:hover{
    background:#117739 url(../images/tenmancontact3-over.jpg) no-repeat center center;
}

.aboutlist li a{
    display: block;
     width: 300px;
    height: 190px;
}

.content{
    width: 840px;
    margin: 0 auto
}

.tab{
    text-align: left;
    font-size:20px;  /* 字体大小 */
    letter-spacing:4px;  /* 字体间距 */

}
.tab a{
    display: inline-block;
    text-align: center;
    width:210px;
     height: 50px; 
     color: #fff; 
     background: #117739; 
     line-height: 50px;
     border-top: 2px solid #117739;
     margin-bottom: 50px
 }

.tab a.active{background: #f3f3f3; color: #117739}


.tabcontent{

    line-height: 35px;
    color: #717171;
    font-size:18px;  /* 字体大小 */
    letter-spacing:3px;  /* 字体间距 */

}
.text_blue{
    color: #117739;
    font-size:20px;  /* 字体大小 */
    letter-spacing:4px;  /* 字体间距 */
}