@charset "utf-8";
@import "common.css";
@import "page.css";
@import "hdp.css";
@import "login.css";
@import "nav.css";
@import "/font/iconfont.css";
@import "/cart/css/cart.css";
@font-face {
    font-family: "SourceHanSansCN-Light";
    src: url("/font/SourceHanSansCN-Light.otf");
}
@font-face {
    font-family: "SourceHanSansCN-Normal";
    src: url("/font/SourceHanSansCN-Normal.otf");
}
@font-face {
    font-family: "SourceHanSansCN-Regular";
    src: url("/font/SourceHanSansCN-Regular.otf");
}
body{font-size:14px; font-family:Arial, Helvetica, sans-serif;  color:#333;}
*{margin:0px;padding:0px;list-style: none; outline:none}
img{border:0px; max-width: 100%;}
a{text-decoration:none;color:#333;}
a:hover{color:#e60012}
i{ font-style: normal; }
em{ font-style:normal;}
.clear{clear:both;}
.l{float:left;}
.r{float:right;}
.layui-layer-setwin .layui-layer-close2 {
    right: -6px!important;
    top: -6px!important;
}

.bak{-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s;transition: all 1s;  display: block; }
.bak:hover {-webkit-transform:scale(1.08); -moz-transform:scale(1.08);-o-transform:scale(1.08);transform:scale(1.08);}
.pic{ overflow: hidden; margin: auto; position: relative;}
.pic span{background-size: cover; background-repeat: no-repeat;background-position: center; display: block;}
.pic span img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
.w1200{ width: 1200px; margin: auto; }
.content{ margin:20px auto; }
.middle{ margin: 0px auto; width:1670px; max-width:96%;}

.hdianceng{ height:138px; width:100%;}
.bighead{ display:block; width:100%; height:138px; position:fixed; left:0px; top:0px; z-index:999}
div.head{ width:100%;height:100%; background:#FFF;-webkit-box-shadow: 0 0px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 0px 5px rgba(0,0,0,0.2); -o-box-shadow: 0 0px 5px rgba(0,0,0,0.2);box-shadow: 0px 0px 5px rgba(0,0,0,0.2);}
div.head img.logo{ float:left; height:76px; margin-top:31px;}
div.head img.logo2{ display: none; }
div.head div.wapdh{ display:none}
/*div.head ul.nav{ float:right; }
div.head ul.nav li a{}
div.head ul.nav li.yi{ float:left;  text-align:center; position:relative;}
div.head ul.nav li.yi a.ayi{ font-size:16px; display:block;height:100%;line-height:138px; width:140px;}
div.head ul.nav li.yi:hover a.ayi,div.head ul.nav li.yi.hover a.ayi{}
div.head ul.nav li.yi ul.ernav{ position:absolute; left:0px; top:138px; width:100%; display:none!important;background:#FFF}
div.head ul.nav li.yi ul.ernav li.er{ width:100%; height:40px; line-height:40px; position:relative;}
div.head ul.nav li.yi ul.ernav li.er a.aer{ width:100%; height:100%; display:block; border-bottom:1px dashed #eee; text-align:center;}
div.head ul.nav li.yi ul.ernav li.er:hover a.aer{ color:#e60012}
div.head ul.nav li.yi ul.ernav li.er ul.sannav{ position:absolute; top:0px; left:100%; display:none; width:100%; background:#FFF}
div.head ul.nav li.yi ul.ernav li.er ul.sannav li.san{ width:100%; height:24px; line-height:24px;}
div.head ul.nav li.yi ul.ernav li.er ul.sannav li.san a.asan{ width:100%; height:100%; display:block; border-bottom:1px dashed #333; text-align:center}
div.head ul.nav li.yi ul.ernav li.er ul.sannav li.san:hover a.asan{ background:#000; color:#FFF}
div.head ul.nav li.yi ul.ernav li.er:hover ul.sannav{ display:block;}
div.head ul.nav li a.you{ position:relative;}
div.head ul.nav li a.you span{ position:absolute; right:5px; line-height:24px;}
div.head ul.nav li a.ayi span{ display:none}*/


.nav{  float: right; padding-top:44px; margin-right: 20px;}
.nav li{ float: left; text-align: center; position: relative; z-index: 999;  }
.nav li a.yi{ display: block; padding: 0 30px; font-size: 16px; }
.nav li:first-child a{ }
.nav li a.yi{text-transform:uppercase;   height: 52px; line-height: 52px;}
.nav li a.yi:hover,.nav li a.on{ background: #666; color: #fff; }


.nav li .sub-box1{ position:absolute;text-transform:none; top:52px; left: 0; border-top: #666 2px solid;  width:170px;  height: 0px; display: block; z-index: -1;opacity:0; visibility: hidden; }
.nav li:hover .sub-box1{  height: auto; z-index: 1;opacity: 1;transition-delay: 0s;visibility: visible;text-align: left;  }
.nav li .sub-box { background:#fff;   -webkit-box-shadow: 0 0px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 0px 5px rgba(0,0,0,0.2); -o-box-shadow: 0 0px 5px rgba(0,0,0,0.2);box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
.nav li .sub-box dl{padding-top: 20px; padding-bottom:20px;}
.nav li .sub-box dl dd{position: relative;  }
.nav li .sub-box dl dd a{ display: block; margin: auto; font-size: 16px; padding:8px 15px; line-height: 1;   }
.nav li .sub-box dl dd a:hover{ background: #efefef; color: #333; }

.nav li .sub-box dl dd .level-two{position: absolute; left: 170px; top: -22px;  display: none; border-top: #666 2px solid;  width:170px;   background:#fff; padding: 15px 0;  -webkit-box-shadow: 0 0px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 0px 5px rgba(0,0,0,0.2); -o-box-shadow: 0 0px 5px rgba(0,0,0,0.2);box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
.nav li .sub-box dl dd:hover .level-two{ display: block;}

.bighead.fix .nav{ padding-top: 21px; }
.bighead.fix .nav li .sub-box1{ top: 40px; }
.bighead.fix .nav li a.yi{ height: 40px; line-height: 40px; }


div.head .hsou{ float:right; border:1px solid #cccccc; width:327px; margin-top:44px; position:relative}
div.head .hsou input{ float:right; height:50px; border:none; line-height:50px; width:100%; text-indent:14px;}
div.head .hsou a{ position:absolute; line-height:50px; right:10px; color:#ccc; font-size:18px;}




div.head.fix {
    height: 80px;
    line-height: 80px; position:fixed; left:0px; top:0px; background:#FFF;
}
div.head.fix ul.nav li.yi ul.ernav {

    top: 80px;

}
div.head.fix ul.nav li.yi a.ayi{

    height: 80px;
    line-height: 80px;

}
div.head.fix img.logo {

    margin-top: 20px;

}
.pc{ display:block;}
.wap{ display:none;}
.pro_nav{ background:#FFF; display:block; position:absolute; top:40px; width:300px; padding:20px; left:50%; margin-left:-160px; text-align:center; font-size:0px; display:none}
div.nav li:hover .pro_nav{ display:block;}
.pro_nav ul{ display:inline-block; width:50%; float:left;}
.pro_nav ul a{ text-indent:13px; text-align:left; display:block; font-size:14px; float:none; width:100%; height:35px; line-height:35px;}
.pro_nav ul a:hover{background: #efefef; color: #333;}
.pro_nav ul a.at{ font-weight:bold; font-size:16px;}

.indexpro{ text-align:center; padding:0px 0px 50px 0px;}
.indexpro .prolist{ padding-top:75px;}
.indexpro p.pat{font-weight: 300;
    font-size: 26px;
    letter-spacing: 1.3px;
    text-align: center;text-transform:uppercase;  }
.indexpro .sannav{margin:40px 0px 26px 0px; text-align:center; font-size:0px;}
.indexpro .sannav a{ display:inline-block; padding: 0 10px; height:38px; margin:5px; text-align:center; border:1px solid #cccccc; font-size:15px; line-height:38px;}
.indexpro .sannav a:hover{ background: #666; color: #fff; }
.indexpro ul{}
.indexpro ul li{ width:22.75%; width: 18.5%;  float:left; margin-right:3%; margin-right: 1.875%; margin-bottom:3%; margin-bottom:1.875%; background:#f4f4f4;}
.indexpro ul li.z{ margin-right:0px;}
.indexpro ul li .pic{ display:block; width:100%;}
.indexpro ul li .pic span{ padding-bottom:100%}
.indexpro ul li .picat{ display:block;
display: flex;
    height: 70px;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    color: #707070;
    width: 100%;
    transition: all .5s ease;
    font-weight: 500;
    padding: 0 20px;
    box-sizing: border-box;
    text-transform: uppercase;
}
.animates{transition:All 0.2s linear;
-webkit-transition:All 0.2s linear;
-moz-transition:All 0.2s linear;
-o-transition:All 0.2s linear; }
.indexpro ul li:hover .picat{ background:#B0B3B3; color:#FFF;}
.si{ margin:30px auto 60px auto; background: #eee; padding: 60px 0px;}
.si li{ float:left; width:24.25%; text-align:center; margin-left: 1%;}
.si li:first-child{ margin-left: 0; }
.si li .con{ margin:auto; background: #fff; padding: 20px 0; text-align: center; min-height: 175px; }
.si li .pics{ display:block;  margin:auto;}
.si li .pics img{ width:40px;  display:block; margin:auto;}
.si li .txt{  width: 90%; margin: auto;}
.si li .txt span{ display: block; font-size:18px;  margin:15px auto;}
.si li .txt p{ line-height: 1.5;}
.si li img{transition: 0.8s;}
.si li:hover img{transform: rotateY(360deg);}


.idea{ padding-bottom:95px;}
.idea .idtitle{text-align: center;
    font-weight:normal;
    font-size: 26px;
    letter-spacing: 1.3px;
    margin-bottom: 60px; display:block; text-align:center; width:100% }
.idea .pic{
    position:relative;
	display:block;
	width:100%;
	}
.idea .pic .info{
    position: absolute;
    top: 0;
    left: 20px;
	z-index:9
	}
.idea .pic .info p{
	font-size: 21px;
    font-weight: 300;
    padding-top: 130px;
    padding-left: 30px;
    letter-spacing: 4px;
    position: relative;
    margin-bottom: 10px;
	}
    .idea .pic .info p img{ height: 20px; }
.idea .pic .info p:before {
    background:#B0B3B3;
    content: "";
    width: 12px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.idea .pic:before {
    content: "";
    z-index: 0;
    background: url(/images/mask.png);
    position: absolute;
    width: 100%;
    padding-bottom:366px; z-index:9;
    left: 0;
    top: 0;
    background-size: cover;
}


.idea .pic .info dd{ font-size:42px; font-weight:normal; color:#666;font-family: Roboto;}
.idea .pic .info dd em{ font-weight:bold}
.idea .pic span{ /*padding-bottom:21.9%*/ height:366px;}
.idea .pi{ padding-top:35px;}
.idea .pi em{font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;}
.idea .pi span{ display:block;font-size: 18px;
    line-height: 32px;
    width: 85%;
    color: hsl(0deg 0% 0%/50%); padding-top:20px;
     }
.idea a.discover{height: 70px;
    display: inline-flex;
    background:#B0B3B3;
    color: #fff !important;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    margin-top: auto;
    font-weight: 700;
    width: max-content; font-size:15px; margin-top:39px;}
h3.lower-title {}
.blog{ padding-bottom:80px;}
.blog li{ float:left; margin-right:1.8%; height:502px;border:1px solid #eae7e5; margin-left:-2px; overflow:hidden}
.blog li.z{ margin-right:0px;}
.blog li.lt{ width:25%; background:#b0b3b3; position:relative;}
.blog li.lt dl{ display:block; border:1px solid #f7f8f8; z-index:1; left:50%; top:50%; margin-top:-213px; margin-left:-175px; width:350px; position:absolute; height:426px;transform: rotate(19deg) scale(1.1);transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;}
.blog li.lt:hover dl{transform:rotate(19deg) scale(1.2);
            -webkit-transform:rotate(19deg) scale(1.2);
            -moz-transform:rotate(19deg) scale(1.2);
            -o-transform:rotate(19deg) scale(1.2);
            -ms-transform:rotate(19deg) scale(1.2); }
.blog li.lt i{ display:block; font-size:42px; color:#FFF; font-weight:700; margin:auto; width:203px; text-align:center; padding-top:80px; max-width:90%;text-transform:uppercase; }
.blog li.lt p{
    max-width:90%;
	margin:auto;
	width:310px;
	color: #fff;
    text-align: center;
    letter-spacing: 2px;
    line-height: 24px;
    margin: 20px auto 0px auto;
	height:144px;
}
.blog li.lt a{ position:relative; color:#b0b3b3; font-weight:bold; z-index:2; width:235px; text-align:center; line-height:72px; height:72px; background:#FFF; display:block; margin:auto;}
.blog li.lt a:hover{ background: #999; color: #fff; }
.blog li.list_li{ width:23.2%;}
.blog li.list_li a{ display:block; width:100%;}
.blog li.list_li a .pic span{ padding-bottom:71.2%;}
.blog li.list_li a .at{ display:block; font-weight:400px; font-size:20px; margin:auto; width:330px; max-width:90%; padding-top:20px; line-height:30px; min-height:120px; margin-bottom:12px; display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.blog li.list_li a .readm{ display:block; font-weight:700px; font-size:18px;  color:#B3B6B6;margin:auto; width:330px; max-width:90%;}
.blog li.list_li a:hover .readm{ color: #E60012; }
.blog li.list_li a:hover .at{ color: #666; }

.left_nav{ float:left; width:17%; margin-bottom: 30px;}
.left_nav .n_dh{}
.left_nav .n_dh li{ border-bottom:1px solid #c0c0c0;  position:relative}
.left_nav .n_dh li span{ display:block; position:absolute; right:6px; height:70px; line-height:70px; top:0px;}
.left_nav .n_dh li.on span{transform: rotate(180deg)}
.left_nav .n_dh li a.at{ display:block; width:100%; height:70px; line-height:70px; font-size:15px; text-transform:uppercase; }
.left_nav .n_dh li:hover,.left_nav .n_dh li.act{}
.left_nav .n_dh li:hover a.at,.left_nav .n_dh li.act a.at{ }
.left_nav .n_dh li dl{ width:100%; /* display:none;*/}
.left_nav .n_dh li dl a{ display:block; height:40px; line-height:40px; width:100%; text-indent:14px;}
.left_nav .n_dh li dl a:hover,.left_nav .n_dh li dl a.act{ color:#E60012}
.rright{ float:right; width:79%;}
.routecj p.pp{ display:block}
.routecj p.pw{ display:none}
.product_list li{ float:left; width:25%; text-align:center; margin-bottom:25px;}
.product_list li.z{}
.product_list li a{ margin:auto; width:90%; display: block;}
.product_list li .pic span{ padding-bottom:100%;}
.product_list li .text{font-size: 14px;
    text-align: center;
    line-height: 26px; height:60px; display:flex; width:100%; display: flex;align-items: center;justify-content: center;}
.product_list li a.readmore{ background:#f4f4f4; height:65px; line-height:65px; text-align:center;margin:auto; width:237px; max-width:90%; display:block;  font-size:16px;}
.product_list li:hover a.readmore{ color:#FFF; background:#b0b3b3}

.routecj{ height:40px; background:#F4F4F4; line-height:40px; margin-bottom:25px;}


.liuyan_con{ margin: 20px auto; }
.liuyan_left{ float: left; width: 45%; }
.liuyan_right{ float: right; width: 50%; background: url(../images/ly.png) no-repeat top;  height: 479px; background-size: contain; }
.ly_text{ width: 280px; margin: 40px 0px 0px 100px; color: #999; font-size: 16px; line-height: 200%; }
.liuyan_left input[type="text"]{ background: none;  border:none; width: 100%; outline:none;}
.liuyan_left textarea{ background: none; border:none;  outline:none;}
.liuyan_left p{ margin: 20px auto; }
.liuyan_left p input[type="text"]{ border-bottom: #d7d7d7 1px solid; border: #d7d7d7 1px solid; line-height: 45px; text-indent: 20px;}

.liuyan_left dd{ margin: 10px auto; border: #d7d7d7 1px solid; }
.liuyan_left dd textarea{height: 100px; margin: 10px auto; width: 97%; margin-left: 1.5%;}
.liuyan_left p input::-webkit-input-placeholder{color: #999;  } /*?使用webkit内核的浏览器 */
.liuyan_left p input:-moz-placeholder{color: #999; } /*?Firefox版本4-18 */
.liuyan_left p input::-moz-placeholder{color: #999; } /*?Firefox版本19+ */
.liuyan_left p input:-ms-input-placeholder{color: #999; }
.liuyan_left textarea::-webkit-input-placeholder{color: #999; font-family: "Arial"; padding-left: 10px; }

.liuyan_left p input[type="submit"]{ border:none; width: 100px; line-height: 35px; background: #d51b12; color: #fff; text-align: center; }

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

.liuyan_left{ width: 40%; }
.liuyan_right{ width: 55%; }
.ly_text{ margin-left: 55px; }

}

@media only screen and (max-width: 768px) {
.liuyan_right{ background-size:100% auto;  background-position: top;  }
.ly_text{ width: 50%; }
.liuyan_left p{ margin: 0px auto 10px auto; }
}


@media only screen and (max-width: 600px) {
.liuyan_right{  display: none; }
.liuyan_left{ float: none; width: 95%; margin: auto; }
.liuyan_left p input[type="text"]{ line-height: 40px; }
}



.foot1{ background:#f4f4f4; padding:59px 0px 45px 0px;}
img.flogo{ float:left; max-width:256px;}
.foot1 ul{ float:right; }
.foot1 ul li{ float:left; width:460px; }
.foot1 ul li a{ display:block;line-height:26px;}
.foot1 ul li a.at{ font-size:20px; margin-bottom:10px;}
.foot1 .fr{ float:right; width:313px;}
.foot1 .fr p{line-height:26px;}
.foot1 .fr p i{font-size:20px; display:block; margin-bottom:10px;}
.foot1 .fr ul{ float:left; font-size:0px;}
.foot1 .fr ul a{ display:block; float:left; width:50px; height:50px; line-height:50px; text-align:center; font-size:25px; border-radius:100%; background:#FFF; margin:20px 6px 0px 0px; position:relative;  overflow:hidden}
.foot1 .fr ul a img{ position:absolute; width:150px; left:50%; margin-left:-75px; height:150px;  bottom:50px; padding-bottom:10px; max-width:inherit}
.foot1 .fr ul a:hover{ background:#000000; color:#FFF; overflow:visible}
.foot1 .fr ul a:hover {}


.foot2{ text-align:center; padding:17px 0px; background:#272c31}
.foot2 i{ display:inline-block; color:#FFF; margin:0px 13px;}