@charset "utf-8";
.banner{height: 400px;}
.about_cont{display: flex; padding: 20px 0 30px;}
.about_txt{ line-height: 1.8;}
.about_img{flex: 0 0 500px;}

.proinfo{padding: 20px; line-height: 2;}
.protable{max-width: 100%; overflow-x: auto; padding: 0 10px; box-sizing: border-box;}
.protable tr{height: auto !important;}
.protable td{padding: 10px 2px !important; height: auto !important; width: auto !important;}

.prodetail{padding-left:20px;}
.prodetail h1{font-size: 28px; border-bottom: 1px solid #eee; padding-bottom: 20px; font-weight: normal;}
.prodetail .proinfo{display:flex; padding:20px 0 0 10px;}
.prodetail .proimg{width: 400px; flex:0 0 400px;}
.prodetail .pinfo{flex:1 1 auto;}

.flexcont{display: flex; padding-top:20px;}
.leftcont{width: 280px;flex:0 0 280px;}
.leftcont .toptit{background: #a51e23; color:#fff; padding:20px; font-size: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.leftcont .toptit a{display: block; color:#fff;}
.leftnav{border: 1px solid #ddd;}
.leftnav a{display: block; padding:12px 5px 12px 12px; border-bottom: 1px solid #eee;}
.leftnav a.on{background: #eee;color:#a51e23; border-left: 2px solid #a51e23;}
.leftnav .subnav a{ font-size: 14px; padding: 10px 5px 10px 20px;}
.leftnav .hassub>.on{background: none;color:#3e3a39; border-left: 0;}
.rightcont{flex:1 1 auto;}
.rightcont .toptit{padding:15px 20px 14px; position: relative; font-size: 24px; color:#3e3a39;}
.rightcont .toptit:after{content:""; position: absolute; left: 20px; right:0; bottom:0; background: #eee; height:1px;}
.rightcont .product{padding-top: 0;}
.rightcont .product .pimg1{height:200px;}
.rightcont .toptit span{background: #a51e23; color: #fff; padding: 10px 20px; display: inline-block; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.aboutright .toptit{padding: 0; padding: 0;}
.aboutright .toptit:after{left:0;}

.gallery{padding: 20px 0;display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.gallery li{flex: 0 0 25%; width: 25%; padding: 15px; box-sizing: border-box;}
.gallery .pimgs{width: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; left:0; right:0; top:0; bottom:0; border: 1px solid #ddd; text-align: left; display: block; font-size: 0; padding:1%; box-sizing: border-box;}
.gallery .pimgs img{width: 31.3333%; padding:1%;}
.gallery .pimgbox{width:100%; padding-bottom: 100%; position: relative;}
.gallery .ptit{display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px;}

.phototit{padding:35px 20px 14px; position: relative; font-size: 24px; color:#3e3a39;}
.phototit:after{content:""; position: absolute; left: 20px; right:0; bottom:0; background: #eee; height:1px;}
.photo{padding: 20px 0;display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.photo li{flex: 0 0 25%; width: 25%; padding: 20px; box-sizing: border-box;}
.photo .pimg{width: 100%; height: 260px; background-size: contain; background-position: center; background-repeat: no-repeat; position: relative;}
.photo .pimg img{width: 100%; height: 100%; opacity: 0;}
.photo .pimg:hover:after{content:""; background: url(../images/scale.png) center no-repeat rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-size: auto 30px; -webkit-animation: scale 1s infinite;}
@keyframes scale {
    0%{background-size: auto 30px;}
    50%{background-size: auto 40px;}
    100%{background-size: auto 30px;}
}

.product{padding: 20px 0;display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.product li{flex: 0 0 25%; width: 25%; padding: 20px; box-sizing: border-box;}
.product .pimg1{width: 100%; height: 260px; background-size: contain; background-position: center; background-repeat: no-repeat; position: relative;}
.product .pimg1 img{width: 100%; height: 100%; opacity: 0;}
.product .ptit{text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px;}

.big_img{position:fixed;z-index:-1;opacity:0;background:rgba(0,0,0,.9);width:100%;height:100%;top:0;left:0}
.big_img .swiper-container2{position:relative;width:100%;height:100%}
.big_img .swiper-container2 .swiper-wrapper{width:100%;height:100%}
.big_img .swiper-slide{width:100%;height:100%;display:flex;}
.big_img .swiper-slide .cell{width:100%;height:100%;display:flex;align-items: center;text-align:center}
.big_img .swiper-slide img{max-width:80%;max-height:80%;margin:0 auto}
.big_img .swiper-pagination2{position:absolute;top:.2rem;text-align:center;width:100%}
.big_img .swiper-pagination2 span{margin:0 .1rem;background: #fff;}

.pager{text-align: center; padding: 20px 0 40px;}
.pager li{ display: inline-block; margin: 0 10px;}
.pager li a{border: 1px solid #aaa; padding: 5px 10px; color:#666}
.pager .disabled a{color:#ccc; border-color: #ddd;}
.pager .on a{color:#a51e23; border-color: #a51e23;}

.contleft{width: 700px; float:left;}
.contright{width: 500px; float: left;padding: 50px 0 0 20px; box-sizing: border-box; height:1000px;}
.contact{padding: 50px 20px; line-height: 2;}
.feedback{padding: 20px;}
.feedback h3{font-weight: normal; margin-bottom: 50px; line-height: 1.5;}
.feedback ul{width: 600px;}
.feedback li{padding: 10px 0; display: flex; align-items: center; flex-wrap: wrap;}
.feedback .tit{display: inline-block; width: 100px; text-align: right; flex: 0 0 100px; padding-right: 10px;}
.feedback .tit i{color:#a51e23; margin-right: 3px;}
.feedback input,.feedback textarea{border: 1px solid #CCC; flex: 1 1 auto; padding: 10px;}
.feedback .submitbtn{ background: #a51e23; color:#fff; border-color: #a51e23; font-size: 18px;}
.map{height:100%; z-index: 1;}
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1201px) {
    .photo li{flex: 0 0 33.33%; width: 33.33%; padding: 15px;}
    .photo .pimg{height: 220px;}
    .gallery li{flex: 0 0 33.33%; width: 33.33%; padding: 15px;}
    .product li{flex: 0 0 33.33%; width: 33.33%; padding: 15px;}
    .product .pimg{height: 220px;}
}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .banner{height: 250px;}
    .leftcont{position: fixed; background:#fff; z-index: 2; right:100%; top:100px; -webkit-transition: all 0.2s ease-in-out;}
    .leftcont.active{left:0; right:auto; -webkit-transition: all 0.2s ease-in-out;}
    .about_cont{display: block; padding: 10px 0;}
    .about_txt{ padding: 10px; }
    .rightcont .toptit{padding: 10px;}
    .rightcont .toptit:after{left: 10px; right:10px;}
	.aboutright .toptit{padding:0 10px; font-size: 20px;}
	.aboutright .toptit:after{left: 10px; right: 10px;}
    .protable{padding: 0 10px; box-sizing: border-box; width: 100vw;}
    .gallery{padding: 10px 0;}
    .gallery li{flex: 0 0 50%; width: 50%; padding: 10px;}
    .photo{padding: 10px 0;}
    .photo li{flex: 0 0 50%; width: 50%; padding: 10px;}
    .photo .pimg{height: 170px;}
    .product{padding: 10px 0;}
    .product li{flex: 0 0 50%; width: 50%; padding: 10px;}
    .product .pimg{height: 170px;}
    .prodetail{padding: 0;}
    .prodetail .proinfo{padding: 10px; display: block;}
    .contact{padding: 20px;}
    .contact *{word-break: break-all; white-space: normal;}
    .contleft{float: none; width: auto;}
    .contright{float: none; width: auto; padding: 20px; height:600px;}
    .feedback{padding: 20px;}
    .feedback h3{ margin-bottom: 20px;}
    .feedback ul{width: 100%; margin: 0 auto;}
    .feedback .tit{ flex: 1 1 auto;  width: 100%;  text-align: left; padding-bottom: 5px;}
}