@charset "utf-8";
html{color:#000;background:#FFF;overflow-y: scroll;}

html, body {
    width:100%;
    overflow-x: hidden;
}


body {
    margin: 0 auto;
    min-width: 1280px;
    position: relative;
    padding: 0;
    color: #1f1f1f;
    font-size: 14px;
    line-height: 1;
    background: #fff;
    overflow-y: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



a { text-decoration:none;cursor:pointer; color: inherit;}
a:focus{outline:0;}
li{list-style:none;}
.clear{ clear:both; height:0; line-height:0; font-size:0;}
.clearfix:after{ content:""; clear:both; height:0; visibility:hidden; display:block;}
.clearfix{*zoom:1}
p{ word-spacing:-1.5px;}
.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


@font-face {
    font-family: 'iconfont';
    src: url('./fonts/iconfont.ttf?t=1700707768545') format('truetype');
}


.w_1200 {width: 90%;max-width: 1200px;margin: 0 auto;}
.w_1400 {width: 90%;max-width: 1400px;margin: 0 auto;}
.w_1600 {width: 90%;max-width: 1600px;margin: 0 auto;}


.header{ float:left; position: fixed;width: 100%;left: 0;top: 0;z-index:999;background: rgba(20, 20, 20, 0.2);}
.navs{ width: 100%;}
.navs::after{content: "";display: block;clear: both;}
.navs .top{ width: 100%; float: left; position: relative; padding:0 5.2%;}
.header.on{ background:#fff; box-shadow:0 3px 6px rgba(0,0,0,0.1);}
.navs .top .logo{float: left;display: flex;align-items: center;height: 100px;}
.navs .top .logo img{ width: auto; height:80px;}
.navs .top .logo .show{ display:block;}
.navs .top .logo .hide{ display:none;}
.header.on .navs .top .logo .show{ display:none;}
.header.on .navs .top .logo .hide{ display:block;}
.navs .top .right{ float: right;}
.navs .top .menu{float: left; padding-right:20px; position:relative;}
.navs .top .menu:after{ float:right; width:1px; height:20px; content:''; position:absolute; right:0; top:40px; background:#fff;}
.header.on .navs .top .menu:after{ background:#333;}
.navs .top .menu .nli{ float: left; position: relative;padding:0 20px;}
.navs .top .menu .nli .nav a{ display: block;color:#fff; position: relative; line-height:100px; font-size:18px; padding:0 10px;}
.header.on .navs .top .menu .nli .nav a{ color:#333;}
.navs .top .menu .nli:last-child .nav a{ padding-right:0.25rem;}
.navs .top .menu .nli .nav a.xl:before{ float:right; width:5px; height:5px; content:''; position:absolute; right:0; top:50%; border-top:1px solid #fff; border-right:1px solid #fff; transform:translateY(-50%) rotate(135deg); -ms-transform:translateY(-50%) rotate(135deg);}
.header.on .navs .top .menu .nli .nav a.xl:before{ border-top:1px solid #333; border-right:1px solid #333; }
.navs .top .menu .nli .nav a:after{ float:left; width:0; height:2px; content:''; position:absolute; left:50%; bottom:0; background:#fff; opacity:0.6; z-index:3;-oz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transform:translateX(-50%);}
.header.on .navs .top .menu .nli .nav a:after{ background:#0c86e0; opacity:1;background-image: linear-gradient(right,#3d9de3 0%, #0c86e0 100%);}
.navs .top .menu .nli.on .nav a::after,
.navs .top .menu .nli:hover .nav a::after{ width:100%;}
.navs .top .menu .nli.on .nav a,
.navs .top .menu .nli:hover .nav a{ color: #fff;}
.navs .top .sub{display: none; min-width:100%;position: absolute; top:100%; left: 50%; background: #f6f7fb; z-index: 4; padding:0 10px;transform: translate(-50%,0);}
.navs .top .sub ul{ display:flex;flex-direction:column; }
.navs .top .sub .l2{ width: 100%;border-bottom:1px solid #e5e5e5;padding:10px 0;}
.navs .top .sub .l2 a{ display: block; white-space:nowrap; position:relative; color: #999999; font-size:16px;line-height:30px;text-align: center}
.navs .top .sub .l2 a{}
.navs .top .sub .l2 a:hover{ color: #0c86e0;}
.navs .top .sub .l2 a:hover:after{ background: #0c86e0;}
.navs .top .ssyy_box{float: right;}
.navs .top .ssyy_box .inputbox{float: left; margin:30px;position: relative;}

.navs .top .ssyy_box .inputbox .submit{ position:relative; z-index:6; width:40px; height:40px; float:left; background:url(../images/search.svg) center no-repeat; background-size:50% auto;}
.header.on .navs .top .ssyy_box .inputbox{ border-radius: 50%;
    background-image: -webkit-linear-gradient(right, #3d9de3 0%, #0c86e0 100%);
    background-image: linear-gradient(right,#3d9de3 0%, #0c86e0 100%);}

.soDown{display:none;float:left;width:100%;position:absolute;left:0;top:100%;z-index:10;background:rgba(255,255,255,0.9);box-shadow:0 3px 3px rgba(0,0,0,0.15);}
.search{ float:left; width:50%; margin:30px 25%; box-shadow:0 0 3px rgba(0,0,0,0.15); background: #fff; }
.search input{float: left; height: 40px; border: 0;}
.search .but{width:50px; height: 40px;background: url(../images/heaser_search.png) center no-repeat;background-size: 25px auto;}
.search .txt{width:-webkit-calc(100% - 50px); width:-moz-calc(100% - 50px); width:calc(100% - 50px); padding: 0 15px;color:#000; font-size:14px;}







.foot{padding: 4% 0 0;color: #1e1e1e;background: url(../images/footer_bg.jpg)  no-repeat center bottom;background-size: 100% 100%;}
.foot-nav{}
.foot-nav dl{float: left}
.foot-nav dl:nth-child(1){width:70%}
.foot-nav dl:nth-child(2){width:30%}
.foot-nav dt, .foot-nav dd{line-height: 1;}
.foot-nav dt{margin-bottom: 32px;font-size: 28px;}
.foot-nav dd{margin-bottom: 20px;font-size: 16px;color: #a0a0a0;line-height: 30px;}
.foot-nav a{display: block;line-height: 1;}
.foot-nav dd a{position: relative;display: inline-block;padding-bottom: 2px;font-size: 16px;line-height: 30px}
.foot-nav dd a::after{position: absolute;bottom: 0;left: 0;display: block;content: "";width: 0;height: 1px;background: #0c86e0;transition: all .3s;}
.foot-nav dd a:hover{color: #0c86e0}
.foot-nav dd a:hover::after{width: 100%}

.foot-bottom{padding: 34px 0;border-top: 1px solid #ddd;}
.foot-bottom p{font-size: 14px;color: #acabb0;}
.foot-bottom a:hover{color: #1e1e1e;}
.foot .df {
    display: flex;
    justify-content: space-between;
}















.floatFns {
    position: fixed;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}
.floatFns .kefu {
    margin-bottom: 10px;
    cursor:pointer;
}
.floatFns .kefu .box {
    width:45px;
    height:45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.floatFns .kefu.tel .box,.floatFns .kefu.tel .info {
    background: #0c86e0;
}
.floatFns .kefu.email .box,.floatFns .kefu.email .info {
    background: #f36d23;
}
.floatFns .kefu.weixin .box,.floatFns .kefu.weixin .info {
    background: #0b85ed;
}
.floatFns .kefu.top .box {
    background: #a7a7a7;
}
.floatFns .kefu.top {
    display: none;
}
.floatFns .kefu .box i{
    font-size: 24px;
    color:#fff;
}
.floatFns .kefu .info {
    position: absolute;
    right: 50px;
    top:50%;
    padding:10px;
    color:#fff;
    border-radius: 5px;
    transform: translateY(-50%) scale(0);
    transition: 0.5s;
    font-size: 18px;
    white-space: nowrap;
    min-width:100px;
}
.floatFns .kefu .info img{
    max-width: none;
    width:150px;
    height:150px;
}
.floatFns .kefu:hover .info {
    transform: translateY(-50%) scale(1);
}

.floatFns .kefu.tel i {
    animation: yyhh 1.5s linear infinite;
}
@keyframes yyhh {
    0%,90%,100% {
        transform: rotate(0) scale(1);
    }
    20%,40% {
        transform: rotate(-15deg) scale(1.1);
    }
    30%,50% {
        transform: rotate(15deg) scale(1.1);
    }
}