@charset "utf-8";
.banner_products{width:100%;height:351px;position:relative;margin-top: 138px;}
.banner_products ul{width:226px; height:345px; background:rgba(22,26,24,0.32); padding:6px 0 0 32px; position:absolute; left:50%; margin-left:-600px; top:0}
.banner_products ul li{ font-size:16px; line-height:34px; position:relative;}
.banner_products ul li a{color:#f4f4f4}
.banner_products ul li i{width:0; height:0; border-left:6px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; display:inline-block; position:absolute; right:44px; top:20px}
.banner_products ul li a:hover{color:#e70012; font-weight:bold}
.banner_products ul li a:hover i{ border-left:5px solid #e70012;}
.pro_new{ margin:20px auto;}
.pro_newl{width:941px; height:329px; float:left; background:url(../images/pro_new_05.jpg) no-repeat left; position:relative}
.pro_newl dd{width:449px; height:294px; position:absolute; right:0; top:0; background:#d62d16; padding:35px 0 0 35px}
.pro_newl dd:before{ content:""; border-right:27px solid #d62d16; border-top:23px solid transparent; border-bottom:23px solid transparent; position:absolute; top:139px; left:-27px;}
.pro_newl dd h3{  font-size:29px; text-transform:uppercase; color:#fff;}
.pro_newl dd h3 a{color:#fff}
.pro_newl dd ul{ margin:30px 0 0 10px}
.pro_newl dd ul li{ font-size:18px; line-height:50px;}
.pro_newl dd ul li a{color:#fff}
.pro_newl dd ul li a:hover{text-decoration:underline}
.pro_newl dd i{width:65px; height:2px; background:linear-gradient(to top,rgba(163,186,192,0.76),rgba(255,255,255,0.76)); display:block; position:absolute; transform:skew(-10deg,-40deg); right:0; top:26px}
.pro_newl dd i:nth-child(2){ right:23px; top:52px}
.pro_newr{width:235px; height:327px; background:#31333f; float:right;}
.pro_newr ul{}
.pro_newr ul li{ height:46px; padding:31px 0; text-transform:uppercase; font-size:16px; text-align:center; border-bottom:1px solid #54555f; line-height:23px; letter-spacing:-1px;}
.pro_newr ul li a{color:rgba(255,255,255,0.69)}
.pro_newr ul li i{width:46px; height:46px; display:block; float:left; background:url(../images/ico.png) no-repeat; margin-left:25px;transition:1s transform;-webkit-transform:1s transform;-moz-transform:1s transform;}
.pro_newr ul li:nth-child(1) i{ background-position:-20px -650px;}
.pro_newr ul li:nth-child(2) i{ background-position:-75px -650px;}
.pro_newr ul li:nth-child(3) i{ background-position:-130px -650px;}
.pro_newr ul li:hover i{ transform:rotate(360deg)}
.pro_newr ul li:hover a{text-decoration:underline; color:#fff;}

.pro_list{overflow: hidden;padding-bottom: 31px;}
.pro_list h3{height:38px; font-size:28px; line-height:45px; color:#323232; text-transform:uppercase}
.pro_list h3 i{width:81px; height:38px; line-height:38px; display:inline-block; text-align:center; color:#000000; font-size:31px; font-style:normal; margin-right:25px; position:relative}
.pro_list h3 i:after{content:""; border-left:18px solid transparent; border-top:18px solid #fff; position:absolute; right:0; top:0}
.pro_list h3 span{ float:right; font-size:15px; padding-right:25px; position:relative; cursor:pointer}
.pro_list h3 span a{color:#333;}
.pro_list h3 span:after{ content:""; border-left:6px solid #6e7174; border-top:5px solid transparent; border-bottom:5px solid transparent; position:absolute; top:18px; right:10px;}
.pro_list h3 span:hover a{color:#d62d16; text-decoration:underline}
.pro_list h3 span:hover:after{ content:""; border-left:6px solid #d62d16;}

.pro_list ul{ margin:30px auto}
.pro_list ul li{width:260px;height:219px; border:1px solid #e0e0e2; padding:10px; float:left; margin-right:19px;box-shadow:0 2px 4px 0px rgba(0,0,0,0.1),0 4px 8px 0px rgba(0,0,0,0.1),0 8px 16px 0px rgba(0,0,0,0.1);}



.pro_list ul li .img{width:260px; height:180px; overflow:hidden; position:relative}
.pro_list ul li .img .cover{width:100%; height:100%; background:rgba(0,0,0,0.5);position:absolute;bottom:-180px; left:0;}
.pro_list ul li .img .cover i{width:70px;height:70px; background:url(../images/fd.png) no-repeat; position:absolute; top:50%; left:50%; margin:-35px 0 0 -35px}
.pro_list ul li:hover .img .cover{top:0;}
.pro_list ul li h4{ font-size:16px;  text-align:center;text-transform: uppercase;margin-top: 11px;height: 27px;overflow: hidden;}
.pro_list ul li:hover h4{color:#d62d16}
.pro_list ul li h5{ font-size:12px; line-height:20px; color:#777}
.pro_list ul li h6{ text-transform:uppercase; font-size:12px; line-height:14px;margin-top:10px}
.pro_list ul li h6 i{width:14px;height:14px; display:inline-block; background:url(../images/pro_ico.png) no-repeat; background-position:-160px -540px; vertical-align:middle; margin-right:10px;transition:1s transform;-webkit-transform:1s transform;-moz-transform:1s transform;}
.pro_list ul li h6 i:nth-child(3){background-position:-180px -540px;}
.pro_list ul li h6 b{width:1px; height:14px; background:#cfcfcf; display:inline-block; margin:0 10px}
.pro_list ul li:nth-child(4){ margin-right:0}
.pro_list ul li:hover h6 i{transform:rotate(360deg)}
.f1 h3{border-bottom:2px solid #d62d16;}
.f1 h3 i{ background:#AB2412;color:#FFFFFF}
.f2 h3{border-bottom:2px solid #fcac0d;}
.f2 h3 i{ background:#fcac0d; color:#2B2B2B}
.f3 h3{border-bottom:2px solid #71c807;}
.f3 h3 i{ background:#71c807; color:#242424}
.f4 h3{border-bottom:2px solid #ff674d;}
.f4 h3 i{ background:#ff674d;color:#030303}
.f5 h3{border-bottom:2px solid #074590;}
.f5 h3 i{ background:#074590;color:#FFFFFF}
.f6 h3{border-bottom:2px solid #3a92b6;}
.f6 h3 i{ background:#49A0C5;color:#000000}
.f7 h3{border-bottom:2px solid #a10ed7;}
.f7 h3 i{ background:#8F0EBE;color:#FFFFFF}
@media only screen and (max-width: 1200px) {
    .ny_box,.foot2_con{ width:99%}
    .modal-content .search-bar .keywords{width:557px !important}
    .pro_list ul li{ width:20.5%;margin-right:10px;margin-left: 10px;height:auto}
    .pro_list ul li .img{ width:100%; height:auto}
    .banner_products ul{ width:auto;height:auto;left:0; margin-left:auto; top:0}
    .pro_list h3{ font-size:18px;overflow:hidden}
    .pro_list ul li .img img{ width:100%; height:auto}
}
@media only screen and (max-width: 930px) {
    .modal-content .search-bar .keywords{width:360px !important}
    .pro_list ul li{ width:20.5%;margin-right:7px;margin-left: 7px;}
}
@media only screen and (max-width: 768px) {
    .pro_list ul li{ width:20%;margin-right:5px;margin-left: 5px;}
    .modal-content .search-bar .keywords{width:230px !important}

}
@media only screen and (max-width: 640px) {
    .pro_list ul li{ width:44%;margin-right:5px;margin-left: 5px;}
    .modal-content .search-bar .keywords{width:230px !important}
    .pro_list ul li .img .cover{background:none}
    .pro_list ul li{min-height:252px}
    .foot2_con .fenlei dl{width:88%;padding: 10px 30px;}

}
@media only screen and (max-width: 620px) {
  
    .pro_list ul li{min-height:244px}

}
@media only screen and (max-width: 600px) {
    .pro_list ul li{min-height:236px}
    .banner_products{display:none}
    .modal-content{width:100% !important}
    .search-logo{width: 100%;text-align: center;}
    .modal-content .search-bar input[type="submit"]{width:19% !important}
    .modal-content .search-bar .keywords{width:78% !important;margin-left: 5px;}
    .modal-content .search-bar{margin:5px 0 10px 0 !important; width:100%!important}
    .modal-dialog{position:relative !important;}
    .modal-content .search-logo img{ width:150px; height:auto}
    .modal-content .search-logo { margin:0px 0 3px 0 !important;background: #FD0000;}
    .modal-content .search-bar .keywords,.modal-content .search-bar input[type="submit"]{height:50px !important;}
}
@media only screen and (max-width: 560px) {
    .pro_list ul li{min-height:221px}
}
@media only screen and (max-width: 530px) {
    .pro_list ul li{min-height:206px;width:42%}
}
@media only screen and (max-width: 500px) {
    .pro_list ul li{min-height:194px}
    .pro_list h3 i{width:43px; height:38px; line-height:46px; margin-right:0px;font-size:15px;margin-right:10px}
    .pro_list h3{ font-size:15px}
}
@media only screen and (max-width: 460px) {
    .pro_list ul li{min-height:182px; width:42%}
    
}
@media only screen and (max-width: 430px) {
    .pro_list ul li{min-height:173px;}
    
}
@media only screen and (max-width: 400px) {
    .pro_list ul li{min-height:160px;width:41%}
    
}
@media only screen and (max-width: 360px) {
    .pro_list ul li{min-height:148px;width:40%}
    
}
@media only screen and (max-width: 360px) {
    .pro_list ul li{width:90%}
}