@charset "utf-8";

/*通用样式*/

* {	margin: 0px;	padding: 0px;}

body{ padding:0; background:#fff;  color:#333; font-family:"Microsoft YaHei";  font-size:12px; line-height:24px; overflow-x:hidden  }

li{list-style-type:none;}

a{color:#000; text-decoration:none}

a:hover{ color:#3777de}

img{ border:0}

.l{ float:left}

.r{ float:right}

.c{ clear:both}

.fn{ font-weight:normal}

.blk img{ display:block}

.cfff{ color:#fff!important}

.p10-20{ padding:35px 25px 0 25px; }

.p15{ padding:15px;}

.f12{ font-size:12px}

.h40{ height:40px;}

.ml40{ margin-left:40px;}

.bor_ddd{ border:1px solid #e6ece9}

.bor_7fb{ border:1px solid #7fbfa3}

.bg_white{ background:#fff}

.p10{ padding:10px;}

.ti2em{ text-indent:2em}

em{ font-style:normal}

.c999{ color:#999}

.c666{ color:#666}

.f14{ font-size:14px;}

.f16{ font-size:16px;}

.f18{ font-size:18px;}

.f26{ font-size:26px;}

.f24{ font-size:24px;}

.f22{ font-size:22px;}

.h20{ height:20px;}

.h25{ height:25px;}

.h30{ height:30px;}

.h35{ height:35px;}

.h8{ height:8px; font-size:0; line-height:0; overflow:hidden}

.h10{ height:10px; font-size:0; line-height:0; overflow:hidden}

.h15{ height:15px; font-size:0; line-height:0; overflow:hidden}

.h5{ height:5px; font-size:0; line-height:0; overflow:hidden}

.red{ color:#fd2020}

.c333{ color:#333}

.bg_f5{ background:#f5f5f5}

.mb18{ margin-bottom:18px;}

.mb10{ margin-bottom:8px;}

.mt40{ margin-top:40px;}

.mt20{ margin-top:20px;}

.p30_34{ padding:30px 34px;}

.dash_line{ border-bottom:1px dotted #ccc; height:1px; line-height:0; font-size:0; overflow:hidden}

dl dt{ float:left}

dl dd{ float:right}

.c000{ color:#000}

















/*---头部------*/

.top{border-bottom:1px solid #eeeeee; padding:15px 0; font-size:14px; color:#666}

.top .login{ color:#ccc}

.top .login a{ color:#666; padding:0 20px;}

.mt10{ margin-top:10px}



.f20{ font-size:20px;}



/*---nav------*/

nav{ padding:30px 0; position:relative}

.menu{ height:65px; line-height:65px;  width:70%; position:absolute; right:0; top:20px }

.menu li{ font-size:16px; width:12.5%}

.menu li a{display:block; text-align:center; font-size:18px;}

.menu li a:hover,.nav li a.on{ color:#1ba2fb }

.menu li a span{ display:block; color:#999; font-size:12px}

.page_banner {
    width: 100%;
    max-width: 100%;
    height: 97px;
    background: url(../images/p_tit_bg.jpg) #0014a5 center;
    padding-top: 57px;
}

.page_tit {
    width: 400px;
    height: 40px;
    text-align: center;
    margin: 0 auto;
}

/* 强大功能 */

.titContent{ font-size:32px; line-height:35px; font-weight:normal; text-align:center; padding:78px 15px 50px 15px}

.titContent p{ font-size:14px; color:#b3b3b3; margin-top:15px;}

.functionList li{ float:left; text-align:center; padding:15px; box-sizing:border-box; font-size:14px; width:25%;}

.functionList li h6{ font-size:16px; color:#333; margin-bottom:12px; margin-top:10px; font-weight:normal}

.functionList li p{ height:80px; overflow:hidden; color:#999; }



/* 强大功能 */

.templet{ background:#030303 url(../images/bgHy.jpg) center bottom no-repeat }





/* APP客户端 */

.appFunc{  }

.appFunc dl{ float:left; box-sizing:border-box; margin:30px 0;  position:relative; width:33.333333%}

.appFunc dl dt{ width:44px;}

.appFunc dl dd{ position:absolute; padding-left:54px; padding-right:40px;box-sizing:border-box}

.appFunc dl:nth-child(3n) dd{ padding-right:0}

.appFunc dl dd h6{ font-size:18px; height:24px; font-weight:normal; overflow:hidden}

.appFunc dl dd p{ color:#999; font-size:14px;}



.DiyList li{ width:25%; box-sizing:border-box; padding:0 10px 60px 10px; float:left}

.DiyList li img{ width:100%; height:auto}



.bgf9{ background:#f9f9f9}



.userList{ padding:10px;}

.userList li{ width:25%; box-sizing:border-box; border:10px solid #fff;  float:left; position:relative}

.userList li img:nth-child(1){ width:100%; height:auto}

.userList li span{ display:block; width:100%; height:40px; line-height:40px; background:rgba(0,0,0,0.8); color:#fff; font-size:18px; text-align:center; overflow:hidden; position:absolute; bottom:0; left:0;transition:all 0.2s}

.userList li span i{ font-style:normal}

.userList li em{ display:none; position:absolute; left:0; top:0; width:80%; height:80%; padding:10%;transition:all 0.4s}

.userList li em img{ height:0; transition:all 0.4s;}



.userList li:hover span{ height:100%; text-indent:-99px; transition:all 0.2s }

.userList li:hover span i{ display:none}

.userList li:hover em{ display:block; transition:all 0.4s; }

.userList li:hover em img{ height:auto; transition:all 0.4s;}



.sList{ padding-bottom:40px;}

.sList li{ width:25%; margin:20px 0; box-sizing:border-box; padding:10px;  float:left;}

.sList li div{ text-align:center;  font-size:20px; line-height:1.2em;box-shadow: 0 0 20px #e9e9e9; background:#fff; padding:70px 0 35px 0; color:#676767}

.sList li div img{ width:80%; height:auto; display:block; margin:auto; margin-bottom:20px; max-width:170px; }



.slideGroup{ width:100%; text-align:left;  }

.slideGroup .parHd{ background:rgba(255,255,255,0.2);  }

.slideGroup .parHd ul{  }

.slideGroup .parHd ul li{ float:left; width:12.5%;  height:60px; line-height:60px; cursor:pointer; color:#fff; position:relative  }

.slideGroup .parHd ul li span{ display:block; text-align:center; padding-left:25px}

.slideGroup .parHd ul li span:before{ content:''; position:absolute; width:22px; height:22px; top:50%; margin-top:-11px; left:20%}

.slideGroup .parHd ul li:nth-child(1) span:before{ background:url(../images/hy01.png);}

.slideGroup .parHd ul li:nth-child(2) span:before{ background:url(../images/hy02.png);}

.slideGroup .parHd ul li:nth-child(3) span:before{ background:url(../images/hy03.png);}

.slideGroup .parHd ul li:nth-child(4) span:before{ background:url(../images/hy04.png);}

.slideGroup .parHd ul li:nth-child(5) span:before{ background:url(../images/hy05.png);}

.slideGroup .parHd ul li:nth-child(6) span:before{ background:url(../images/hy06.png);}

.slideGroup .parHd ul li:nth-child(7) span:before{ background:url(../images/hy07.png);}

.slideGroup .parHd ul li:nth-child(8) span:before{ background:url(../images/hy08.png);}



.slideGroup .parHd ul li:nth-child(even){ background:rgba(255,255,255,0.2); }

.slideGroup .parHd ul li.on{ height:60px;  background:#1ba2fb;  }

.slideGroup .slideBox{  zoom:1; padding:40px 10px 70px 10px; position:relative;   }

.slideGroup .sPrev,.slideGroup .sNext{ position:absolute; left:0px; top:0; display:block; width:48px; height:100%; background:url(../images/arrL.png) center center no-repeat; }

.slideGroup .sNext{ left:auto; right:0px; background:url(../images/arrR.png) center center no-repeat;  }

.slideGroup .parBd ul{ overflow:hidden; zoom:1; width:100%   }

.slideGroup .parBd ul li{ width:25%; float:left; _display:inline; overflow:hidden; text-align:center;  }

.slideGroup .parBd ul li .pic{ text-align:center; }

.slideGroup .parBd ul li .pic img{ display:block;  }

.slideGroup .parBd ul li .pic a:hover img{ border-color:#999;  }

.slideGroup .parBd ul li .title{ line-height:24px;   }











.zixun{ height:130px; line-height:130px; background:url(../images/zixun.jpg) center 0 no-repeat; text-align:center}

.zixun a{ display:block;font-size:20px; color:#fff}

.zixun a span{  display:inline-block; height:48px; line-height:48px; padding:0 45px; border-radius:3px; border:1px solid #fff; margin-left:190px; }



.newsList{ width:33.3%; float:left; box-sizing:border-box; padding:0 25px}

.titNews{ border-bottom:1px solid #e2e2e2; height:40px; line-height:40px; font-size:18px;}

.titNews img{ }

.newsList ul{ margin-top:20px;}

.newsList li{ height:40px; line-height:40px; overflow:hidden; font-size:14px; }

.newsList li a{ overflow:hidden; display:block; height:40px; line-height:40px;}

.newsList li a span{ float:right;color:#999}







.SmallPower{ display:none}

#closedMenu{ font-size:36px; position:relative; float:right; right:15px; top:15px; cursor:pointer; color:#888}

/*body{ overflow-x:hidden}*/

.header{ display:block}

.h45{height:45px;}

.h-wz{top:0px; left:0px;}

.h-bless{background:#fff; display:block; height:55px; line-height:55px; text-shadow:none; color:#000; border-top:none;width: 100%;z-index:300; position:fixed; border-bottom:1px solid #f5f5f5}

.h-bless .ui-title{text-align:right; font-weight:normal; font-size:16px; height:45px; line-height:45px; padding:0px 100px 0 50px; margin:0px; color:#fff}

.h-bless .h-icon{position:absolute;width:40px;height:46px;text-shadow:none; background:none; border:none; left:0px; top:0px;}

.h-bless .logoWap{margin:8px 0 0 15px}

.header .nav_icon,.header .header_index .nav_icon{ display:inline-block; width:40px; height:32px; position:absolute; right:15px; top:13px; background:url(../images/nav.png) no-repeat center; background-size:40px auto;}

.header.header_index .nav_icon{background:url(../images/newImg/nav_list_icon.png) no-repeat center; background-size:23px 15px;}

.navSmall{width:100%; display:table; }

.navSmall li{text-align:center; }

.navSmall li a{ display:block;font-size:15px; text-align:center; border-bottom:1px solid #eaeaea }

.navSmall li:hover a{ opacity:0.8}

.nav_cover{ position:fixed; width:100%; height:100%; top:55px; left:0; z-index:3; background:#f9f9f9; transition:all 0.2s; display:none }

.nav_cover em{display:block; width:100%; height:100%; z-index:3; position:relative;}





footer{ background:#222; color:#868b91; padding:50px 25px;}

footer a{ color:#868b91; display:inline-block; margin:0 20px 20px 0}

footer .layA{ width:50%; float:left}

footer .layB{ width:25%; float:left}

footer .layB dl{ display:block; float:left; position:relative}

footer .layB dt{ width:100px;}

footer .layB dd{ position:absolute; padding-left:110px; width:100%; text-align:center; padding-top:10px}

footer .layB dd img{ display:block; margin:auto; margin-bottom:8px}

footer .layA p{ display:inline-block}

footer .layA p:last-child{ margin-left:10px;}

.cpRight{ margin-top:40px; color:#fff; text-align:center; padding-bottom:10px;}



.kefu {z-index:999999;right:0;width:230px;position:fixed;}

.scrollTop{ display:inline-block; width:228px; padding:10px 0; border:1px solid #f2f2f2; background-color:#fff; border-radius:10px; text-align:center; margin-top:10px;}

.kefuInfo{width:208px; padding:20px 10px; border:1px solid #f2f2f2; background-color:#fff; border-radius:10px; text-align:center; line-height:30px; margin-bottom:10px;}

.infoName,.infoTel{ color:#18abfb; font-size:26px; font-weight:bold;}

.infoLine{display:block; width:32px; height:2px; overflow:hidden; background-color:#CCC; margin:8px auto 13px;}

.xcxImg img{ border-radius:12px; -webkit-border-radius:12px}





.t-con-new{overflow:hidden;margin:36px auto 0;width:100%; text-align:center}

.t-con-new-item{position:relative;float:left;margin-bottom:20px;width:16.6%;height:252px;cursor:pointer}

.t-con-new-item-bg{position:relative;display:block;overflow:hidden;margin:64px auto 30px;width:80px;height:80px;border-radius:10px;transition:margin .4s cubic-bezier(.4,0,.2,1) 0s}

.t-con-new-item-bg i{display:block;width:80px;height:80px;border-radius:10px}

.t-con-new-item-bg i{transition:margin .4s cubic-bezier(.4,0,.2,1) 0s}

.t-con-new-item-icon01{ background:url(../images/index.png)}

.t-con-new-item-icon02{ background:url(../images/index2.png)}

.t-con-new-item-icon03{ background:url(../images/index3.png)}

.t-con-new-item-icon04{ background:url(../images/index4.png)}

.t-con-new-item-icon05{ background:url(../images/index5.png)}

.t-con-new-item-icon06{ background:url(../images/index6.png)}

.t-con-new-item-icon07{ background:url(../images/index7.png)}

.t-con-new-item-icon08{ background:url(../images/index8.png)}

.t-con-new-item-icon09{ background:url(../images/index9.png)}

.t-con-new-item-icon10{ background:url(../images/index10.png)}

.t-con-new-item-icon11{ background:url(../images/index11.png)}

.t-con-new-item-icon12{ background:url(../images/index12.png)}

.t-con-new-item h3{color:#333;font-size:18px;line-height:18px; font-weight:normal;transition:all .4s cubic-bezier(.4,0,.2,1) 0s}

.t-con-new-item p{margin-top:12px;color:#fff;font-size:12px;line-height:20px;opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1) 0s}

.t-con-new-item-btn{display:none;margin:15px auto 0;width:80px;height:28px;border:1px solid #fff;border-radius:3px;color:#fff;font-size:15px;line-height:28px; font-style:normal}

.t-con-new-item:hover{transition:all .4s cubic-bezier(.4,0,.2,1) 0s}

.t-con-new-item:hover .t-con-new-item-bg{display:inline-block;margin:10px auto 6px;width:80px;height:80px;border-radius:10px;background-color:transparent;background-position:50%;background-repeat:no-repeat}

.t-con-new-item:hover h3{color:#fff;font-weight:700}

.t-con-new-item:hover p{opacity:1;transition:all .4s cubic-bezier(.4,0,.2,1) 0s}

.t-con-new-item:hover .t-con-new-item-btn{display:block;transition:all .4s cubic-bezier(.4,0,.2,1) 0s}

.t-con-new-item-bg{transition:margin .4s cubic-bezier(.4,0,.2,1) 0s}

.bg-12:hover,.t-con-new .bg-1 .t-con-new-item-bg,.t-con-new .bg-12 .t-con-new-item-bg,.t-con-new .bg-1:hover{background:-webkit-linear-gradient(#019bff,#9079ff);background:-o-linear-gradient(#019bff,#9079ff);background:-moz-linear-gradient(#019bff,#9079ff);background:linear-gradient(#019bff,#9079ff)}

.t-con-new .bg-11 .t-con-new-item-bg,.t-con-new .bg-11:hover,.t-con-new .bg-2 .t-con-new-item-bg,.t-con-new .bg-2:hover{background:-webkit-linear-gradient(#fd985b,#fd4e5a);background:-o-linear-gradient(#fd985b,#fd4e5a);background:-moz-linear-gradient(#fd985b,#fd4e5a);background:linear-gradient(#fd985b,#fd4e5a)}

.t-con-new .bg-10 .t-con-new-item-bg,.t-con-new .bg-10:hover,.t-con-new .bg-3 .t-con-new-item-bg,.t-con-new .bg-3:hover{background:-webkit-linear-gradient(#6986e7,#895ed9);background:-o-linear-gradient(#6986e7,#895ed9);background:-moz-linear-gradient(#6986e7,#895ed9);background:linear-gradient(#6986e7,#895ed9)}

.t-con-new .bg-4 .t-con-new-item-bg,.t-con-new .bg-4:hover,.t-con-new .bg-8 .t-con-new-item-bg,.t-con-new .bg-8:hover{background:-webkit-linear-gradient(#ffb104,#ff8252);background:-o-linear-gradient(#ffb104,#ff8252);background:-moz-linear-gradient(#ffb104,#ff8252);background:linear-gradient(#ffb104,#ff8252)}

.t-con-new .bg-5 .t-con-new-item-bg,.t-con-new .bg-5:hover,.t-con-new .bg-7 .t-con-new-item-bg,.t-con-new .bg-7:hover{background:-webkit-linear-gradient(#b34efe,#ff3d7f);background:-o-linear-gradient(#b34efe,#ff3d7f);background:-moz-linear-gradient(#b34efe,#ff3d7f);background:linear-gradient(#b34efe,#ff3d7f)}

.t-con-new .bg-6 .t-con-new-item-bg,.t-con-new .bg-6:hover,.t-con-new .bg-9 .t-con-new-item-bg,.t-con-new .bg-9:hover{background:-webkit-linear-gradient(#99cc34,#5fcc55);background:-o-linear-gradient(#99cc34,#5fcc55);background:-moz-linear-gradient(#99cc34,#5fcc55);background:linear-gradient(#99cc34,#5fcc55)}

.t-con-new a:hover .t-con-new-item-bg{background-image:none!important}









.container{width: 1170px;  margin:0 auto; box-sizing:border-box; overflow:hidden }



@media (max-width: 1440px) {

    .kefu{ display:none}

    /* .kefuInfo{ display:none}

     .xcxImg{ display:none}*/

}



@media (max-width: 1200px) {

    /*.container { width: 1170px; }*/

    .t-con-new-item{  width:16.6667%;}

    .appFunc{ padding:0 15px;}

    .appFunc dl{ width:33.3%;}

    .userList li{ width:25%}

    .bigPower{ display:none}

    .SmallPower{ display:block}

    #ups-banner { padding-top:50px;}



}

@media (max-width: 1024px) {

    .container {width: 1000px;  }

    .userList li{ width:25%}

    .DiyList li{ width:50%;}

    footer .layA{ width:100%; float:inherit; margin-bottom:20px;}

    footer .layB{ width:50%; float:left}



}

@media (max-width: 992px) {

    /* .container {width: 970px;  }*/

    .t-con-new-item{ width:25%; }

    .userList li{ width:33.33333%}

    .sList li{ width:50%;}

    .newsList{ width:100%}

    .DiyList li{ width:50%;}

    footer .layA{ width:100%; float:inherit;}

    footer .layB{ width:50%; float:left}

    .zixun{ line-height:40px;}

    .zixun a{ font-size:16px; padding-top:20px;}

    .zixun a span{ margin:0 auto; display:block; width:20%}

}

@media (max-width: 768px) {

    /*.container {width: 750px;}*/

    .t-con-new-item{ width:33.33333%; }



    .appFunc{ padding-left:25px;}

    .appFunc dl{ width:50%;}

    .sList li{ width:100%;}

    .userList li{ width:33.33333%}

    .DiyList li{ width:50%;}

    .titContent{ padding:40px 15px 30px 15px}

    .slideGroup .parHd ul li{ width:25%}



    .functionList li p{ height:100px;}

    footer .layA p{ display:block}

    footer .layA p:last-child{ margin-left:0;}

    footer .layA{ width:100%; float:inherit}

    footer .layB{ width:50%; float:left}



}

@media (max-width: 640px) {

    /*.container {width: 630px;}*/

    .sList li{ width:100%;}

    .t-con-new-item{ width:33.33333%; }

    .appFunc{ padding:0 10px 0 25px;}

    .appFunc dl{ width:100%; }

    .userList li{ width:50%}

    .DiyList li{ width:50%;}

    .functionList li p{ height:120px;}

    footer .layA p{ display:block}

    footer .layA p:last-child{ margin-left:0;}

    footer .layB{ width:100%;}

    footer .layB dl{ display:inline-block; float:inherit;}



}

@media (max-width: 414px) {

    /*.container {width: 390px;}*/

    .sList li{ width:100%;}

    .DiyList li{ width:50%;}

    .appFunc dl{ width:100%;}

    .userList li{ width:50%}

    .zixun{ line-height:40px;}

    .zixun a{ font-size:14px; padding-top:20px;}

    .zixun a span{ margin:0 auto; display:block; width:50%}

    footer .layA p{ display:block}

    footer .layA p:last-child{ margin-left:0;}

}

@media (max-width: 395px){

    .functionList li h6{ height:50px; line-height:26px; overflow:hidden}

}

@media (max-width: 375px) {

    /*.container {width: 355px;}*/



    .appFunc dl{ width:100%;}

    .slideGroup .parHd ul li{ width:33.3333%}



}

@media (max-width: 360px) {

    /*.container {width: 340px;}*/

    .appFunc dl{ width:100%;}

    .functionList li p{ height:120px;}



}



@media (max-width: 320px) {

    /*.container {width: 300px;}*/

    .t-con-new-item{ width:50%; }

    .appFunc dl{ width:100%;}

}



@media (max-width: 1280px) {

    .container { width: 100%; }

}