@charset "utf-8";
/* CSS Document */
body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form, input, label, table, tr, th, td, font, object, iframe, blockquote, big, em, strong, tt, b, u, i, center, fieldset, caption, tbody, tfoot, thead{ padding:0; margin:0; outline: none; font-family:Arial;}
body{font-size:12px; color:#333; background:url(../images/headerbg.jpg) repeat-x;}
a{text-decoration:none; color:#333;}
a:hover{color:#ba010b;}
img{border:0px; display:block;}
ul,li,dl,ol{list-style:none;}
.container{ width:100%; overflow:hidden;}
.head{ width:100%;}
.header{ width:1070px; height:60px; margin:0 auto;}
.navbar-close,.navbar-toggler {display: none;}

.nav{ width:1070px; height:47px; margin:0 auto; clear:both;}
.nav .logo{ float:left; width:200px; margin-left:25px;}
.nav .right{ width:776px; height:43px; float:left; margin-left:65px; display:inline;}
.nav .right ul{ width:776px; height:43px;}
.nav .right ul li{ float:left; position:relative; height:41px; line-height:44px; background:url(../images/nav.png) right top; text-align:center;}
.nav .right ul li.home { background:url(../images/nav_1.png) no-repeat left top; min-width:105px;}
.nav .right ul li.contact { background:url(../images/nav_2.png) no-repeat right top; min-width:105px;}
.nav .right ul li a { color:#ffffff; font-size:14px; text-transform:uppercase; padding:0 29px;font-weight:bold;}
.nav .right ul li ul{ width:215px; position:absolute; left:0; top:41px; background:#252525; z-index:999; height:auto; padding:10px 0;  border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; display:none;}
.nav .right ul li ul li{ width:197px; float:left; height:30px; line-height:30px; border-bottom:1px solid #313131; padding-left:18px; text-align:left; background:none}
.nav .right ul li ul li a{ color:#b8b8b8; font-size:14px;text-transform:none; padding:0;font-weight:100;}
.nav .right ul li ul li a:hover{color:#fff;}
.nav .right ul li ul .li{ border:0;}
.nav .right ul li .ul{ left:-80px;}
.nav .right ul li .subpro { position:absolute; left:-80px; top:41px; background:#252525; z-index:999; height:auto; padding:10px 0;  border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; display:none; width:720px}
.nav .right ul li ul.subpro li { height:auto;width:auto; border-bottom:none }
.nav .right ul li ul.subpro li dl { width:160px; float:left; margin-right:10px; height:140px;}
.nav .right ul li ul.subpro li dl dt { color:#FFF; font-size:14px; height:35px; }
.nav .right ul li ul.subpro li dd { border-bottom:1px solid #313131;}

.nav .search{ float:right; width:120px;}
.nav .search input{ height:41px; float:left; border:0;}
.nav .search .text1{ background:none; height:22px; border-bottom:1px solid #ababab; width:82px; margin-top:7px; color:#d3d2d2;}

.main{ width:1080px; margin:0 auto; clear:both; overflow:hidden;}
.main .ileft{ width:860px; min-height:420px; float:left; overflow:hidden;}
.main .iright{ width:215px; min-height:420px; float:right; overflow:hidden;}

.main .about,.main .news{ width:215px; float:left; position:relative; color:#787878;}
.main .about h3,.main .news h3{width:215px; height:57px; line-height:57px; background:url(../images/bg_3.png) no-repeat left bottom; font-size:16px; color:#393536;}
.main .about p { line-height:18px; }
.main .about p img { margin-bottom:5px;}
.main .about p a { color:#ba010b;}
.main .news ul{ width:215px; }
.main .news ul li{ width:215px; padding:3px 0; border-bottom:1px dotted #d5d5d5; background:url(../images/icon_1.png) no-repeat left 12px}
.main .news ul li a{ color:#4b4b4b;padding-left:15px;height:20px; line-height:20px; overflow:hidden; display:block;}
.main .news ul li a:hover{color:#ba010b;}
.main .news ul li span{color:#959595; line-height:16px; float:right;}
/*products*/
.main .products{ width:860px; float:left; display:inline; position:relative; height:414px; overflow:hidden;}
.main .products h3{width:860px; height:57px; line-height:57px; background:url(../images/bg_2.png) no-repeat left bottom; font-size:16px; color:#393536;}
.main .products ul{ width:205px;height:340px; margin-right:10px; background:url(../images/iprobox.jpg) repeat-x; float:left;display:inline;}
.main .products ul li{ width:185px; margin:auto;color:#787878; margin-bottom:5px;}
.main .products ul li a{ color:#565656;}
.main .products ul li a:hover{color:#ba010b;}
.main .products .protitle{ font-weight:bold; color:#000; font-size:16px; font-weight:bold; overflow:hidden; height:45px; line-height:50px; overflow:hidden; display:block}
.main .products .proimg {border: 1px solid #e1e1e1;width: 100%;height: 150px;background: #ffffff;display: flex;justify-content: center;align-items: center; overflow: hidden;}
.main .products .proimg img{ width:180px; max-height:150px; height: auto;transition: all 0.5s; }
.main .products .proimg:hover {border:1px solid #ba010b;}
.main .products .proimg:hover img{transform: scale(1.1);}
.main .products .proinfor { background:url(../images/iprolist.gif) repeat-y; line-height:30px; padding-left:15px; margin:5px 0 15px 0; height:60px; overflow:hidden}
.main .products .more { background:url(../images/readmore.jpg) no-repeat right top; height:25px; display:block;}

.main .right{ width:223px; float:right; margin-top:20px; height:400px; overflow:hidden; border:1px solid #d3d3d3; border-radius:10px;}
.main .right dl{ width:223px; float:left; margin-bottom:25px; overflow:hidden;}
.main .right dl dt{ width:223px; float:left; margin-bottom:10px;}
.main .right dl dd{ color:#787878; line-height:16px; float:left; margin-bottom:4px; width:203px; padding:0 10px;}
.main .right dl dd .a{ display:block; font-size:16px; color:#000; font-weight:bold; text-align:center; width:100%; line-height:24px;}
.main .right dl dd .a span{ color:#ce0202;}
.main .right dl dd .a:hover{ background:url(../images/hover_a.png) no-repeat center bottom;}
.main .right dl dd .p{ float:left; word-break:break-word;}
.main .right dl dd .p span{display:inline;}
.main .right dl dd .p span img{ display:inline;}
/*Banner*/
.slider{width:100%;position:relative; height:395px;}
.slider .swiper-slide img{margin: auto;}
.slider .swiper-pagination-bullet { display:inline-block; background:#a5a9b2;width:12px; height:12px; margin-right:5px;margin-left:5px; cursor:pointer;opacity:1;}
.slider .swiper-pagination-bullet-active {background:#fff;opacity:1;}
/* footer */
.footer{ width:100%; height:222px; background:#39383a; border:1px solid #888; border-left:0; border-right:0; float:left; overflow:hidden;}
.footer .friendlink{ width:1071px; height:187px; border-bottom:1px solid #7e7c7c; margin:0 auto;    overflow: hidden;}
.footer .friendlink .left{ float:left; width:1100px;}
.footer .friendlink .left dl{float:left; width:150px; height:187px;}
.footer .friendlink .left dl dt{ width:100%; float:left; color:#fff; font-size:16px; margin:22px 0 5px 0;}
.footer .friendlink .left dl dt a {color:#fff;font-size: 12px;}
.footer .friendlink .left dl dd{ float:left; width:100%; line-height:24px;}
.footer .friendlink .left dl dd a{ color:#b4b4b4;}
.footer .friendlink .left dl dd a:hover{ text-decoration:underline;}
.footer .friendlink .right{ width:271px; height:158px; float:right; margin:20px 0 0 0; display:inline;}
.footer .friendlink .right a{ width:271px; height:158px; display:block; background:url(../images/map.png) no-repeat;}
.footer .copyright{ width:1070px; height:34px; line-height:34px; margin:0 auto;}
.footer .copyright .left{ float:left; color:#b4b4b4; width:100%;}
.footer .copyright .left a{ color:#b4b4b4;}
.footer .copyright .left a:hover{color:#ba010b;}
.footer .copyright .right{ float:right; width:auto;}
.footer .copyright .right a{ display:block; width:23px; height:15px; float:left; margin:8px 5px 0 0; display:inline;}
@media screen and (max-width:750px) {
    html {font-size: 100px;}
    .head { height: 0.8rem;}
    .header {width: auto;height: 0.3rem;}
    .navbar-close {border:1px solid #666666;width:0.45rem;height:0.45rem;border-radius:0.45rem;background:#ffffff;margin: 0.2rem auto;opacity:0;visibility:hidden;/* 隐藏元素 */transition:opacity 2s,visibility 2s;/* 设置过渡效果 */}
    .navbar-close-icon {position:relative;width:0.2em;height:1.5em;background:#333;transform:rotate(45deg);display:inline-block;margin-top:0.04rem;}
    .navbar-close-icon:after {content:"";position:absolute;top:0;left:0;width:0.2em;height:1.5em;background:#333;transform:rotate(270deg);}
    .navbar-toggler-icon,.navbar-toggler-icon::before,.navbar-toggler-icon::after {content:"";width:0.26rem;height: 0.12rem;border-top:1px solid #ffffff;display:inline-block;}
    .navbar-toggler-icon::before,.navbar-toggler-icon::after {display:block;position:absolute;margin-top:0.08rem;height:0.02rem;}
    .navbar-toggler-icon::after {margin-top:0.16rem;}
    .navbar-toggler {padding: 0.08rem 0.1rem;font-size: 0.16rem;line-height: 1;color: #0000008c;background-color: transparent;border: 1px solid #ffffff;border-radius: 0.075rem;display: block;visibility: visible;float: right;margin: 0rem 0.16rem 0 0;border:1px solid #666666;}
    .navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after {border-top:1px solid #666666;}
    .nav {width:100%;height:auto;}
    .nav .logo {float:left;width:auto;margin-left:0.25rem;}
    .nav .show {visibility:visible;transform:none;opacity:1;cursor: pointer;display: block !important;}
    .nav .right {display: none;width:60%;float:inherit;margin-left:0;position:fixed;right:0;top:0;height:100%;background:#39383a;z-index:999;transition: all 500ms;transform: translateX(0);}
    .nav .right ul {width:100%;height:auto;}
    .nav .right ul li.home {min-width:100%;border-bottom:1px solid #444345;background:none;}
    .nav .right ul li {float:left;position:relative;height:0.44rem;line-height:0.44rem;text-align:center;min-width:100%;border-bottom:1px solid #444345;background:none;}
    .nav .right ul li.contact {min-width:100%;background:none;}
    .nav .right ul li .subpro {left:0;top:0.41rem;padding:0.1rem 0;width:100%;}
    .nav .right ul li a {font-size:0.14rem;padding:0;}
    .nav .right ul li ul {width:100%;top:0.41rem;background:#252525;padding:0.1rem 0;}
    .nav .right ul li ul.subpro li dl {width:88%;float:left;margin-right:0.625rem;height:auto;border-bottom:1px solid #3d3d3d;}
    
    .slider {width: 100%;height: auto;}   
    .swiper-container {width: 100%;}
    .slider .swiper-slide img {margin: auto;width: 100%;}
    .main {width: 100%;}
    .main .ileft {width: 94%;margin: auto;min-height:auto;float: inherit;}
    .main .products {width: 100%;height: auto;}
    .main .about h3, .main .news h3,
    .main .products h3 {width: 100%;height: 0.6rem;line-height: 0.5rem;font-size: 0.16rem;background: url(../images/bg_2.png) no-repeat left bottom;}
    .main .products ul {width: 46%;height: 3.2rem;margin: 0 2%;}
    .main .products ul li {width: 100%;}
    .main .products .protitle {font-size: 0.16rem;height: .45rem;line-height: .5rem;}
    .main .products .proimg img {width: 100%;max-height: 1.5rem;background: #f6f6f6;}
    .main .products .more {height: 0.2rem;background-size: contain;}
    .main .iright {width: 94%;margin: auto;min-height: 4.2rem;float: inherit;}
    .main .news ul,
    .main .news ul li,
    .main .about, .main .news {width: 100%;}

    .footer {height:auto;border:none;}
    .footer .friendlink {width:100%;height:auto;border:none;}
    .footer .friendlink .left {float:inherit;width:94%;display:flex;flex-wrap:wrap;align-items:flex-start;margin:auto;}
    .footer .friendlink .left dl {width:33%;height:auto;}
    .footer .friendlink .left dl dt {font-size:0.16rem;margin:0.15rem 0 0.05rem 0;}
    .footer .friendlink .left dl dt a {font-size:0.12rem;}
    .footer .friendlink .left dl dd {line-height:0.2rem;}
    .footer .copyright {width:94%;height:auto;line-height:0.34rem;margin:auto;border-top:1px solid #7e7c7c;margin-top:0.12rem;}
}