@font-face {
  font-family: 'iconfont';
  src: url('font/iconfont.eot');
  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('font/iconfont.woff') format('woff'),
  url('font/iconfont.ttf') format('truetype'),
  url('font/iconfont.svg#iconfont') format('svg');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}


*{margin: 0;padding: 0;}
html,body{
    height: 100%;
    width: 100%;
}

body { font-family:"Microsoft YaHei", "宋体", Arial, Helvetica, sans-serif; color:#454545; font-size: 14px; line-height: 200%; }
h1,h2,h3,h4,h5,h6{  color: #333}

a{text-decoration: none; color: #333; outline-style:none; bblr:expression(this.onFocus=this.blur()); transition: 0.6s;}
a:hover {color: #333; text-decoration: none;}


ul{list-style-type:none;}
strong{ font-size: 16px; }

.clear { clear: both; height: 0; overflow: hidden;}
.clear10 { clear: both; height: 10px; overflow: hidden;}
.clear15 { clear: both; height: 15px; overflow: hidden;}
.clear20 { clear: both; height: 20px; overflow: hidden;}
.clear50 { clear:both; height:50px; overflow: hidden;}

.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr16 { margin-right: 16px; }

.ptb0 {padding: 0 15px !important}

.bg-max { background-color: #F3F3F3; }
.bg-f3 { background-color: #F3F3F3; }


.left{float: left;}
.right{float: right;}
/*top*/
.top { color: #ddd; background: #000; height:36px; line-height: 36px; font-size: 12px;  display:none;}

.top strong{color: #B20000;font-weight: normal;}
.top .iconfont{ font-size:14px;}


.if_hide{display:;}

/*header*/
.header { background: #000; height:60px; line-height:60px; width:100%;   position: fixed; _position: absolute;  z-index:9;}
    
    

    .header a{ color:#EEE; }
    .header a:hover {color: #EEE;}

    .logo{ width:100px; height:60px; float: left; display:inline-block;  background:url(../img/logo.png) no-repeat 0 12px; padding-left: 45px; font-size:20px;}
    .logo:hover{  color:#EEE; }


    .nav { width: auto; height:60px; float:right; font-size: 16px; display: table;}
    .nav li{ width: auto; padding:0 10px;  text-align:center;display:inline-block; }
    .nav .current a{  color:#2BA6E0;  }

    /*边栏*/
    .rightNav { display: none; }
    .rightNav .iconfont{ font-size:24px; color: #999; font-weight: normal; }


    .bgDiv{
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: .5;
        position:fixed;
        display: none;
        z-index: 99;
        bottom: 0;
    }








/*box*/
.box { width: auto; min-width:300px; max-width:1200px; overflow: hidden; padding: 100px 15px; margin:0 auto} 

    .box-title { text-align: center; }
    .box-title h2 { font-size: 24px; }
    .box-title .line1 { border-bottom: 1px #ccc solid; width: 300px; position: relative; margin: 20px auto;}
    .box-title .line1 span { position: absolute; width: 30px; height: 5px; background: #2BA6E0; left: 140px; top: -2px;}
    .box-title p { width: auto; max-width: 800px; margin: 0 auto; color: #888}

    .box .content{ padding: 15px; display: block;}





/*banner*/


.banner { width:100%; height: auto; margin-top: 60px; position: relative; overflow: hidden; }

 .banner img{ width: 100%; margin: 0 auto;}



.banner .content{ position: absolute; top: 35%; left: 0; right: 0; margin: 0 auto; text-align: center; }
.banner .content h2 { 
    color:#fff;  font-size: 36px; 
    font-weight: bolder; line-height:120%; margin: 20px 0 25px 0;  padding: 0 15px; text-shadow: 1px 1px 0px rgba(80,80,80,.5);
}
.banner .content span { 
    color:#FFFF00; font-size: 48px; 
    font-weight: bolder; display: inline-block; text-shadow: 1px 1px 0px rgba(80,80,80,.5);
}
.banner .content a { display: inline-block; width: auto; padding: 5px 20px; font-size: 16px; background: #2BA6E0; color: #FFF;  border-radius: 5px; text-shadow: 1px 1px 0px rgba(80,80,80,.5);}
.banner .content a:hover {color: #2BA6E0; background: #FFF}



/*thinking*/
.thinking { width: 100%; display:table; font-size:0}
.thinking li { width: 33%; text-align: center; display:inline-block; vertical-align: top; border-radius:5px; cursor:pointer; font-size:14px;}
.thinking .icon { border: 1px #999 solid; background: #FFF; margin: 0 auto; border-radius: 100%; width: 100px; height: 100px; line-height: 100px; margin-bottom: 10px; color: #999}
.thinking .iconfont{ font-size:48px; }
.thinking li:hover .icon{  background: #2BA6E0; border: 1px #2BA6E0 solid; color: #FFF; transition: 1s;}
.thinking li:hover strong {  color: #2BA6E0; transition: 1s;}




/*service*/
.service { width: 100%; display: table; font-size:0;}
.service li { width: 25%; text-align: center; display:inline-block; vertical-align: top; border-radius:5px; cursor:pointer; font-size:14px;}
.service .icon {  border: 1px #999 solid; background: #FFF; margin: 0 auto; border-radius: 100%; width: 100px; height: 100px; line-height: 100px; margin-bottom: 10px; color: #999}
.service .iconfont{ font-size:48px; }
.service li:hover .icon{  background: #2BA6E0; border: 1px #2BA6E0 solid; color: #FFF; transition: 1s;}

.service li:hover strong {  color: #2BA6E0; transition: 1s;}








/*marketing*/

.marketing { width: 100%; display:table; font-size:0;}
.marketing div{  display:inline-block; vertical-align: top; font-size: 14px;}


.marketing strong{ font-size: 18px; color: #2BA6E0}

.marketing img{width:100%;}

.marketing_center { width: 535px;  }
.marketing_left { width: 300px; float: left; text-align: right; margin-right: 35px; }
.marketing_right { width: 300px; float: right; }








/*about*/
.about { width: 100%; display:table;}
.about .left,.about .right{ width: 50%; display:inline-block; vertical-align: middle;}
.about .left img{ width: auto; max-width: 100%;}
.about i{ color: #2BA6E0; font-style: inherit;}



.team { width: 100%; display: none; font-size:0; overflow: hidden;}
.team li{ width:25%; text-align: center;  overflow: hidden; display:inline-block; vertical-align: top; font-size: 14px;}  
.team-wrap { margin: 8px 5px 8px 15px; background: #FFF;}

.team-image { width: 100%; height: 100%; overflow: hidden; }
.team-image img{ cursor: pointer; transition: all 0.6s; width: 100%; }
.team-image img:hover{  transform: scale(1.2);  }

.team-introduction { background: #f5f5f5; color: #000; padding: 10px 15px; margin-top: 5px; }
.team-introduction h3 { color: #000; }
.team-say{  padding: 15px; }





/*case*/
.case { width: 100%; display:table; font-size:0 }
.case li { width: 25%; text-align: center; display:inline-block; vertical-align: top; cursor:pointer; font-size:14px;}
.case img{ width: auto; max-width: 100%; border: 5px solid #fff; border-radius: 5px;}



/*footer*/
.footer { background:#000;  color:#999; text-align: center; position: relative; }
    .footer .content{ height: auto; line-height:30px; width: auto; min-width:290px; max-width:1200px; overflow: hidden; padding: 30px 15px; margin:0 auto}

    .footer a{color:#888;}
    .footer .iconfont{  margin-right: 5px; vertical-align: middle;}
    .footer span{width: 10px; display:inline-block;}

    .support { width: 100%; display: table; font-size:0; padding: 0 0 15px 0; text-align: center; background:url(../img/support.jpg) no-repeat bottom center}
    .support li{width: 25%; font-size:14px; height: 36px; line-height: 36px; text-align: center; display:inline-block;cursor:pointer; }
    .support li .iconfont{ font-size:24px;  margin-right: 5px; vertical-align: middle;}

    .links { color: #666 }
    .links a{ color: #666 }

    .scroll-top { 
        position: absolute; right: 50%; top: 0;
        -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 
        transform: translateX(50%) translateY(-50%) rotate(45deg);
        display: inline-block; color: #fff; height: 20px; width: 20px; background-color: #000;
        text-align: center; -webkit-transition: .25s;transition: .25s;
    
    }
    .scroll-top:hover {  background-color: #2BA6E0; color: #fff; transition: 1s;}





@media screen and (min-width:768px) and (max-width: 1199px){
    
    .marketing_center { width: 100%;  }
    .marketing_left { width: 50%; margin-right: 0; text-align: center; }
    .marketing_right { width: 50%; text-align: center;}


    .about .left, .about .right{ width: 100%; }
    .about .left img{ width: 100%; margin: 0 auto}

}


@media screen and (min-width:640px) and (max-width: 767px){
    
    .service li, .case li, .team li { width: 50%; }

    .marketing_center { width: 100%;  }
    .marketing_left { width: 50%; margin-right: 0; text-align: center; }
    .marketing_right { width: 50%; text-align: center;}

    .about .left, .about .right{ width: 100%; }
    .about .left img{ width: 100%;}

    .if_hide{display: none;}
}




@media screen and (max-width:639px){


    
    .service li { width: 50%; }
    .team li { width: 100%; }

    .thinking .icon { border-radius: 100%; width: 50px; height: 50px; line-height: 50px; margin-bottom: 10px; color: #999}
    .thinking .iconfont{ font-size:24px; }
    .thinking strong { font-size: 14px }
    .thinking p{ display: none; }




    .case li { width: 50%;}


    .marketing_center { width: 100%;  }
    .marketing_left { width: 100%; text-align: center;}
    .marketing_right { width: 100%; text-align: center;}

    .about .left, .about .right{ width: 100%; }

    .if_hide{display: none;}

    
    body { position: absolute; right: 0; }
    .rightNav {display:inline; width: auto; height: 60px; text-anchor: right; position: absolute; right: 15px; top: 0; background: #000}
    .nav{  width: 120px; height: 100%; background-color: #000; position: fixed;  z-index: 999; top: 0; right: -120px;}
    .nav li{ width: 80px; height:60px; line-height: 60px; padding: 0; margin: 0 20px; display: block; border-bottom: 1px dotted #333;}
    
    .support li {  width: 50%;}
    .support li .iconfont{ margin-right: 0; display: block;}
    .footer span{width: 10px; display:block;}
    .links {display: none;}


    .suspension{ display: none; }


    .banner .content{ top: 15%; }
    .banner .content h2 { font-size: 24px; margin: 10px 0 15px 0;}
    .banner .content span { font-size: 30px; }


}












/*悬浮链接*/
.suspension{position:fixed;z-index:55;right:15px;bottom:85px;width:70px;height:240px;}
.suspension-box{position:relative;float:right;}
.suspension .a{display:block;width:44px;height:44px; border-radius: 100%; background-color:#212121;margin-bottom:4px;cursor:pointer;outline:none;}
.suspension .a.active,
.suspension .a:hover{background:#2BA6E0;}
.suspension .a .i{float:left;width:44px;height:44px;background-image:url(../img/kefu/side_icon.png);background-repeat:no-repeat;}



/* .suspension .a-service .i{background-position:0 0;} */
.suspension .a-service .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url(../img/kefu/suspension-bg.png);background-repeat:no-repeat;background-position:0 0;}
.suspension .a-service-phone .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url(../img/kefu/suspension-bg.png);background-repeat:no-repeat;background-position:-27px 0;}
.suspension .a-qrcode .i{background-position:-44px 0;}
.suspension .a-cart .i{background-position:-88px 0;}
.suspension .a-top .i{background-position:-132px 0;}
.suspension .a-top{display:none;}

.suspension .d{display:none;width: auto; min-width:223px; background:#fff;position:absolute;right:67px;min-height:60px;border:1px solid #E0E1E5;border-radius:3px;box-shadow:0px 2px 5px 0px rgba(161, 163, 175, 0.11);}
.suspension .d .arrow{position:absolute;width:8px;height:12px;background:url(../img/kefu/side_bg_arrow.png) no-repeat;right:-8px;top:31px;}
.suspension .d-service{top:-10px;}
.suspension .d-service-phone{top:34px; width: 273px;}
.suspension .d-qrcode{top:78px;}
.suspension .d .inner-box{padding:8px 22px 12px 22px;}


.suspension .d-service-item{padding:14px 0;}
.suspension .d-service .d-service-item{border-bottom:none;}
.suspension .d-service-item .circle{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#F1F1F3;display:block;float:left;}
.suspension .d-service-item .i-qq{width:44px;height:44px;background:url(../img/kefu/side_con_icon03.png) no-repeat center 15px;display:block;transition:all .2s;border-radius:50%;overflow:hidden;}
.suspension .d-service-item:hover .i-qq{background-position:center 3px;}
.suspension .d-service-item .i-tel{width:44px;height:44px;background:url(../img/kefu/side_con_icon02.png) no-repeat center center;display:block;}
.suspension .d-service-item h3{float:left;width:112px;line-height:44px;font-size:15px;margin-left:12px;}
.suspension .d-service-item .text{float:left;width:112px;line-height:22px;font-size:15px;margin-left:12px;}

.red{color:#2BA6E0; font-size: 24px; font-weight:both; width: 200px;}
.clearfix:after{content:"";display:block;clear:both;}


.suspension .d-service-item .text .number{font-family:Arial,"Microsoft Yahei","HanHei SC",PingHei,"PingFang SC","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;}
.suspension .d-service-intro{padding-top:10px;}
.suspension .d-service-intro p{float:left;line-height:27px;font-size:12px;width:50%;white-space:nowrap;color:#888;}
.suspension .d-service-intro i{background:url(../img/kefu/side_con_icon01.png) no-repeat center center;height:27px;width:14px;margin-right:5px;vertical-align:top;display:inline-block;}

.suspension .d-qrcode{text-align:center;}
.suspension .d-qrcode .inner-box{padding:20px 0 10px 0 ; }
.suspension .d-qrcode p{color:#999;}