﻿
@import "font_1251510_ftd52n24jbq.css"; /*ico-xcx*/

.index-slogan {position: relative;background: rgba(162,156,156,0.3);}
.index-slogan ul li {float: left;width: 23%;padding:40px 1%;color: #222;font-size: 13px;}
.index-slogan ul li .ico{float: left;width:48px;margin-right: 13px;}
.index-slogan ul li h3 {font-size: 18px;}

.bxyyi {width: 100%;padding: 70px 0 100px ;background: #ecebeb;}
.bxyyiTitle {text-align: center;color: #222;font-size: 36px;border-bottom: 1px solid #b6b9bf;padding-bottom: 50px;}

.card-area .card-item {background:#fff;text-align: center;border: 1px solid #dbdbdd;float: left;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s, z-index 0s ease 0.12s;width: 22%;box-sizing: border-box;}
.card-area .card-item .card-title {background-color: #ebebec;padding: 40px 0 20px;font-size: 14px;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s, z-index 0s ease 0.12s;}
.card-area .card-item .card-title h1 {color: #373d41;font-size: 18px;font-weight: bold;margin: 10px 0;}
.card-area .card-item .card-title h1 a {color: #373d41;}
.card-area .card-item .card-title p{color: #949a9e;}
.card-area .card-item .card-title i {font-size: 40px;color: #666666;}

.card-area .card-item .content-first {color: #373d41;transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;z-index: 3;padding: 45px 0;font-size: 16px; line-height: 60px;}

.card-area .card-item .content-second {color: #a9b0b4;font-size: 14px;padding:25px 25px 20px;text-align: left;line-height: 2;display: none;transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0s;}
.card-area .card-item .content-second h1{color: #373d41;font-size: 18px;margin-bottom: 4px;}
.card-area .card-item .content-second .main-btn {background: #fff;border: 1px solid #00c1de;color: #00c1de;cursor: pointer;font-size: 14px !important;margin:20px 0 33px;transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s;padding: 0 20px;display: inline-block}

.card-area .card-item .content-second .other-info {border-top: 1px solid #ebebec;font-size: 12px;line-height: 22px;padding-top: 20px;}
.card-area .card-item .content-second .other-info li {height: 80px;float: left;width:48%;margin: 0 1% 10px}
.card-area .card-item .content-second .other-info li .more {color: #00c1de;}
.card-area .card-item .content-second .other-info .other-head {font-size: 14px;font-weight: normal;color: #373d41;}

.card-area .card-item.active {border: 1px solid #00c1de;box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);width: 34%;margin-top: -10px;z-index: 100;}
.card-area .card-item.active .card-title h1 a {color: #fff;}
.card-area .card-item.active .card-title {background: #00c1de;padding: 40px 0;}
.card-area .card-item.active .content-second {display: block;transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;}
.card-area .card-item.active .content-first {display: none;transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0s;}
.card-area .card-item.active .card-title h1, .card-area .card-item.active .card-title p {color: #fff;}
.card-area .card-item.active .card-title i {color: #ebebeb;}


.bxysi {width: 100%;padding: 90px 0;background: #222;text-align: center}
.bxysi1 {color: #5c5c5c;font-size: 30px;}
.bxysi2 {font-size: 36px;margin-bottom: 65px;color: #d2d1d1;}
.bxysi2 b {display: inline-block;position: relative;padding-bottom: 14px;background: url(../images/gang.html) no-repeat bottom center;line-height: 1.8}
.bxysi2 b:before{content: "";position: absolute;width: 100%;height: 1px ; background:#b6b9bf;left: 0;bottom:1px; }

.bxysiBox ul li {width:18%;float: left;margin:30px 1%;font-size: 16px;color: #fff;position: relative;}
.bxysiBox ul li b {display: block;font-size: 100px;line-height: 190px; margin-bottom: 5px;border-radius: 8px;background: #c70c1f;font-family: "Impact";color: #fff;}
.bxysiBox ul li span {display: block;position: absolute;top: 93px;left: 0;z-index: 1;width: 100%;height: 4px;background-color: #c70c1f;}


@media screen and  (max-width:1200px){
    .index-slogan ul li {width: 24%;padding:30px 0.5%;font-size: 12px;}
    .index-slogan ul li .ico{width:30px;margin-right: 13px;}
    .index-slogan ul li h3 {font-size: 15px;}

    .bxyyi {padding:30px 0 40px ;}
    .bxyyiTitle {font-size: 26px;padding-bottom: 40px;}
    .card-area .card-item {width: 22%;}
    .card-area .card-item .card-title {padding:30px 0 10px;font-size: 12px;;}
    .card-area .card-item .card-title h1 {font-size: 16px;}
    .card-area .card-item .card-title i {font-size:30px;}
    .card-area .card-item .content-first {padding:25px 0;font-size: 14px; line-height: 30px;}
    .card-area .card-item .content-second {font-size: 12px;padding:15px 10px 10px; line-height: 1.5}
    .card-area .card-item .content-second h1{font-size: 16px;}
    .card-area .card-item .content-second .main-btn {font-size: 12px !important;margin:10px 0 15px;padding: 0 20px;display: inline-block}
    .card-area .card-item .content-second .other-info li {height:auto;width:48%;margin: 0 1% 10px}
    .card-area .card-item .content-second .other-info .other-head {font-size: 13px;}
    .card-area .card-item.active .card-title {padding:20px 0;}
    .card-area .card-item.active .content-second p{display: none}


    .bxysi {padding:40px 0;}
    .bxysi1 {font-size:26px;}
    .bxysi2 {font-size: 30px;margin-bottom:35px;}
    .bxysiBox ul li {margin:30px 1%;font-size: 14px;}
    .bxysiBox ul li b {font-size:74px;line-height: 150px;}
    .bxysiBox ul li span {top:75px;}


}
@media screen and (min-width:320px) and (max-width:640px){
    .index-slogan ul li {width:46%;padding:15px 1%;margin: 5px 1%;text-align: center;background: #fff;}
    .index-slogan ul li .ico{width:30px;float: none;margin:0 auto 5px;}
    .index-slogan ul li h3 {font-size: 14px;}

    .bxyyi {padding:30px 0 40px ;}
    .bxyyiTitle {font-size:16px;padding-bottom:20px;}
    .card-area .card-item {width:50%;}
    .card-area .card-item .content-first {height: 150px;}
    .card-area .card-item .content-second {padding:5px 10px 0; height:195px;}
    .card-area .card-item .content-second .other-info li {line-height: 1.3}
    .card-area .card-item.active{width: 50%;margin: 0;}

    .bxysi {padding:20px 0;}
    .bxysi1 {font-size:16px;}
    .bxysi2 {font-size:20px;margin-bottom:15px;}
    .bxysiBox ul li {margin:10px 2%;font-size: 14px;width: 46%;}
    .bxysiBox ul li b {font-size:74px;line-height: 150px;}
    .bxysiBox ul li span {top:75px;}

}

.h_yong{padding: 60px 0 30px;}
.h_yong .headererss {position: relative;font-size: 28px;text-align: center; line-height: 3;}
.h_yong ul {overflow: hidden;padding: 15px;text-align: center}
.h_yong ul li {float: left;font-size: 14px;line-height: 2;color: #999;box-sizing: border-box;width:29.3%;margin: 10px 1%;padding: 0 1%;border: 1px solid transparent;}

.h_yong ul li.active, .h_yong ul li:hover {border: 1px solid #1c82ff;box-shadow: 0 0 30px #1c82ff;}
.h_yong ul li div.icon {margin: 40px 0;height: 60px;}
.h_yong ul li h3{font-size: 22px;margin-bottom: 15px;padding: 0 10px;color: #3B3B3B}
.h_yong ul li p{height:60px;overflow: hidden}

.h_yong ul li div.icon i{display: inline-block;width:51px;height:64px;background: url(../images/zs_main.png) -117px 0;}
.h_yong ul li div.icon .icon2{height:51px;background-position:-117px -64px;}
.h_yong ul li div.icon .icon3{height:57px;background-position:-117px -115px;}
.h_yong ul li div.icon .icon4{height:79px;background-position:-117px -172px;}
.h_yong ul li div.icon .icon5{width:64px;height:51px;background-position:-117px -251px;}
.h_yong ul li div.icon .icon6{height:48px;background-position:-117px -302px;}
.h_yong ul li:nth-child(1):hover .icon1{background-position:-181px 0;}
.h_yong ul li:nth-child(2):hover .icon2{background-position:-181px -64px;}
.h_yong ul li:nth-child(3):hover .icon3{background-position:-181px -115px;}
.h_yong ul li:nth-child(4):hover .icon4{background-position:-181px -172px;}
.h_yong ul li:nth-child(5):hover .icon5{background-position:-181px -251px;}
.h_yong ul li:nth-child(6):hover .icon6{background-position:-181px -302px;}


/* 案例 */
.h_pro_biao{margin-top:30px;color:#ffffff;font-size:14px;}
.h_pro_biao span{ font-size:32px;margin-bottom: 10px;}

.h_anli{ width:100%;background-color:#222;padding:30px 0;}
.h_anli ul li{ width:23%;float:left;text-align: center;margin:20px 1%;overflow:hidden;position:relative;}
.h_anli ul li .h_anlimin_leia_min{top: 0;transition: all 0.2s linear;position:relative;}
.h_anli ul li .h_anlimin_leia_min:hover {  top: -4px;  box-shadow: 0 15px 30px #e5e5e5;  transition: translate3d(0, -2px, 0);}
.h_anli ul li .img{height: 130px;overflow: hidden}
.h_anli ul li h3{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height:36px;line-height: 36px;border:1px #e5e5e5 solid;font-size: 18px; color: #ffffff; font-weight: bold;}
.h_anli ul li h3:hover {  top: -4px;  box-shadow: 0 15px 30px #e5e5e5;  transition: translate3d(0, -2px, 0);}

.h_anlimin_leia_min h2{position:absolute;width:239px;height:20px;left:0px;top:0px;background:#000;opacity:0.6;filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;display:none; text-align:center; padding:80px 20px 60px 20px; font-size:22px; overflow:hidden;}
.h_anlimin_leia_min:hover h2{display: block;width:239px;height:35px; color:#FFFFFF; overflow:hidden; padding:80px 20px 60px 20px;}


.inNews{padding: 80px 0 60px}
.inNewsT{text-align: center;color: #444444;}
.inNewsT h1{font-size: 24px; line-height: 3}
.inNewsT h2{font-size: 16px;}
.inNews ul li{float: left;width:32.6%;margin-top: 50px;margin-right: 1%;}
.inNews ul li:nth-child(3n){margin-right: 0}
.inNews ul li h1{color: #272727;font-size: 22px; line-height: 50px;}
.inNews ul li h1 a{float: right;font-size: 16px;}
.inNews ul li .mes-p1{background: #ffffff;margin-bottom: 10px;}
.inNews ul li .mes-p1 i{display: inline-block;width: 120px;height: 5px;background: #00bafe;}
.inNews ul li .img{width:100% ;overflow: hidden;margin-bottom: 9px;}
.inNews ul li .img img{width: 100%;transition: all 0.9s;}
.inNews ul li .img img:hover{transform: scale(1.2);}
.inNews  .inNewsList{background: #ffffff;height: 209px;overflow: hidden;padding:0 10px;}
.inNews  .inNewsList p{position:relative;line-height:30px;height: 30px;color: #666666;font-size: 16px;overflow: hidden;margin: 10px 0;text-indent: 15px;}
.inNews  .inNewsList p:before{content: "";position: absolute;top:50%;left:0;width: 4px;height: 4px;background: #d22d5a;}
.inNews  .inNewsList p span{float: right;font-size: 12px;}

.bxyliu {width: 100%;background: url(../images/bxyliu.html) no-repeat top center;padding: 70px 0;text-align: center;}
.bxyliu1 {color: #fff;font-size: 36px;}
.bxyliu1 b {background: url(../images/gang.html) no-repeat bottom center;position: relative;display: inline-block;line-height: 2}
.bxyliu1 b:before{position: absolute;content: "";width: 100%;height: 1px;background:#b6b9bf;bottom: 1px; }
.bxyliu2 {color: #6f6f6f;font-size: 14px;margin: 40px 0;}
.bxyliu3 ul li {width:21%;font-size: 14px;color: #fff;background: rgba(90,90,90,0.6);float: left;margin: 30px 2% 0;padding: 20px 0;text-align: center}
.bxyliu3 ul li img {width: 72px;margin-bottom: 15px;}
.bxyliu3 ul li p {color: #fff;height: 42px;overflow: hidden}
.bxyliu3 ul li:hover {background: rgba(199,12,31,0.6);}

#footer {border-top: 1px solid #e4e3e3;width:100%;position: fixed;bottom: 0;left: 0;background:#33aaff;z-index:999;text-align: center;display: none}
#footer ul li {float: left;width:25%; padding:5px 0; line-height: 26px;}
#footer ul li a {width: 100%;height: 100%;display: inline-block;color: #fff;}
#footer ul li .iconfont {font-size: 22px;}



@media screen and  (max-width:1200px){
    .h_yong{padding:30px 0 20px;}
    .h_yong .headererss {font-size: 20px;}
    .h_yong ul {padding: 15px 0;}
    .h_yong ul li {font-size: 14px;width:48%;margin: 10px 1%;padding: 0 1%;}

    .h_yong ul li div.icon {margin:20px 0;}
    .h_yong ul li h3{font-size: 18px;margin-bottom: 15px;padding: 0 10px;color: #3B3B3B}

    .h_pro_biao{margin-top:30px;font-size:14px;}
    .h_pro_biao span{ font-size:26px;margin-bottom: 10px;}

    .h_anli{padding:30px 0;}
    .h_anli ul li{ width:31.3%;margin:20px 1%;}
    .h_anli ul li h3{font-size: 14px;}

    .inNews{padding:50px 0 40px}
    .inNewsT h1{font-size:18px; line-height: 36px;}
    .inNews ul li{width:48%;margin-top:20px;}
    .inNews ul li:nth-child(3n){margin-right:1%}
    .inNews ul li h1{font-size:16px; line-height: 50px;}
    .inNews ul li h1 a{font-size: 12px;}

    .inNews ul li .mes-p1{background: #ffffff;margin-bottom: 10px;}
    .inNews ul li .mes-p1 i{width:50px;}
    .inNews  .inNewsList p{font-size: 14px;margin:0;}

    .bxyliu {padding:30px 0;}
    .bxyliu1 {font-size:26px;}
    .bxyliu2 {font-size: 14px;margin: 40px 0;}
    .bxyliu3 ul li {width:21%;font-size: 14px;margin: 30px 2% 0;}
    .bxyliu3 ul li img {width:60px;}
}
@media screen and (min-width:320px) and (max-width:640px){
    .h_yong{padding:30px 0 20px;}
    .h_yong .headererss {font-size:18px;}
    .h_yong ul li {font-size: 12px;}

    .h_yong ul li h3{font-size: 16px;margin-bottom:0;padding: 0;}
    .h_yong ul li p{height:52px;}

    .h_pro_biao{margin-top:0px;ont-size:12px;}
    .h_pro_biao span{ font-size:18px;margin-bottom: 10px;}

    .h_anli{padding:30px 0;}
    .h_anli ul li{ width:48%;margin:10px 1%;}
    .h_anli ul li h3{font-size: 12px;}
    .h_anli ul li .img{height:90px;overflow: hidden}

    .inNews{padding:30px 0}
    .inNewsT h1{font-size:16px;}
    .inNewsT h2{font-size: 14px;}
    .inNews ul li{width:96%;margin:10px auto;float: none}

    .bxyliu {padding:20px 0;}
    .bxyliu1 {font-size:16px;}
    .bxyliu2 {font-size: 12px;margin:20px 0;}
    .bxyliu3 ul li {width:46%;font-size: 12px;margin:10px 2% 0;}
    .bxyliu3 ul li img {width:60px;}

    #footer{display: block}
}

.footIndex{ padding: 20px 0;color: #939393; text-align: center}
.footIndex .beian{background: url(../images/gaba.html) no-repeat left center;padding-left: 30px;margin-bottom:10px;}
.footIndex ul li{display: inline-block;width: 125px;}

@keyframes my1 {
    0% {
        transform: translateX(0px);
    }
    100%{
        transform: translateX(275px);
    }
}

.feiruidr{    float: right;    padding: 5px;    border: 1px solid #fff;}
.feiruidr a{color:#fff;}
