﻿.pro3 .proli1{width: 28%}
.pro3 .proli2{width: 25%}
.pro3 .proli3{width: 14%}
.pro3 li:nth-child(3) .three{padding-left: 18px;}
.pro3 li:nth-child(4) .three{padding-left: 10px;}
.proli1 .three span a{padding-left:20px!important}

.hotPro{margin-top:40px}
.hotProUl ul{border: 1px dashed #e5e5e5;}
.hotProUl ul li{float: left;width:calc(100% / 8);border-right: 1px dashed #e5e5e5;box-sizing:border-box;padding: 15px 20px;text-align: center;}
.hotProUl ul li:nth-child(8n){border-right:0}
.hotProUl ul li .Img{width:100%;height:86px;overflow:hidden}
.hotProUl ul li img{max-width:100%;max-height:100%}
.hotProUl ul li p{color:#010101;opacity:0.7;font-size:12px;margin-top:10px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.hotProCon{margin-top: 30px}
.hotProCon .left{width: 280px;height: 468px;float: left;padding: 40px 26px;box-sizing: border-box;border: 1px solid #e5e5e5;position: relative;text-align: center;}
.hotProCon .left .swiper-container{height: 280px;width:100%;line-height: 280px}
.hotProCon .left .swiper-slide{width: 100%;max-height:100%;}
.hotProCon .left .swiper-slide img{vertical-align: middle;max-height:100%;width: 100%}
.hotProCon .left .swiperBtn{position:relative;height: 80px;margin-top: 20px;width: 120px;display: inline-block;}
.hotProCon .left .swiperBtn .up{position:absolute;width:23px;height:17px;background: url(../images/swiperBtn.png) -28px 3px no-repeat;left:calc(50% - 11px);top: -18px;cursor: pointer;}
.hotProCon .left .swiperBtn .down{position:absolute;width:23px;height:17px;background: url(../images/swiperBtn.png) -28px -62px no-repeat;left: calc(50% - 11px);top: 58px;cursor: pointer;/* width: 17px; *//* height: 23px; */}
.hotProCon .left .swiperBtn .swiper-button-prev{opacity:1;background: url(../images/swiperBtn.png) 3px center no-repeat;width: 17px;height: 23px;}
.hotProCon .left .swiperBtn .swiper-button-next{opacity:1;background: url(../images/swiperBtn.png) -66px center no-repeat;width: 17px;height: 23px;}
/* .hotProCon .left .swiperBtn .swiper-button-next{opacity:1;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");background-size: 10px;width: 17px;height: 23px;background-color: red;} */
.hotProCon .left .swiperBtn .active{background-color: red;background-image: url(../images/swiperBtn1.png);}
.hotProCon .left .swiperBtn .up.active:after{content:""}
.hotProCon .swiper-pagination{top:0;margin:0;line-height:30px;left: calc(50% - 29px);top: 17px;white-space: nowrap;}
.hotProCon .swiper-pagination span.swiper-pagination-bullet{margin: 0 3px;border-radius: 0;border: 1px solid #e5e5e5;background: #fff;width: 4px;height: 4px;opacity: 1;transition: .2s transform,.2s left;}
.hotProCon .swiper-pagination span.swiper-pagination-bullet-active{background:red;border: 1px solid red;}
.hotProCon .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next,.hotProCon .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next,.hotProCon .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,.hotProCon .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(1)}
.hotProCon .right{width: 810px;height: 468px;float: right;background: #f4f4f4;box-sizing: border-box;padding: 20px 40px 25px;}
.hotProCon .right .head{position:relative;border-bottom: 1px dashed #e5e5e5}
.hotProCon .right .head p{font-size:17px;color:#010101;font-weight:bold;line-height:40px}
.hotProCon .right .head span{position:absolute;top:0;right:0;font-size:25px;color:#ff0000;font-weight: bold;}
.hotProCon .right .head em{font-size:17px}
.hotProCon .right .contactUs{position:absolute;width:108px;height:37px;right:26px;bottom:37px;text-align:center;line-height: 37px;border-radius: 10px;background: linear-gradient(180deg, rgba(255,0,0,0.7),red);color: #fff;font-size: 18px;}

.pro5 .head{line-height: 44px;margin-bottom: 30px;text-align: center;font-size: 20px;font-weight:bold}
.pro5 .swiper-container{/* border-bottom: 1px dashed #e5e5e5; *//* border: 1px dashed #e5e5e5; *//* border-right:0; */position:relative;background: url(../images/pro5Bk.png) center center no-repeat;background-size: calc(100% - 2px) 100%;}
.pro5 .swiper-container:before{content:"";/* border-top: 1px dashed #e5e5e5; */width:100%;top:50%;position:absolute;}
.pro5 .swiper-container:after{content:"";border-left: 1px dashed #FFF;height:100%;right:0px;top: 0;position:absolute;}
.pro5 .swiper-slide{height:220px;text-align:center;/* border:1px dashed #e5e5e5; *//* border-right: 1px dashed #e5e5e5; */box-sizing: border-box;/* border-bottom: 0; */}
.pro5 .swiper-slide .Img{height:170px;line-height:170px}
.pro5 .swiper-slide .Img img{vertical-align:middle}
.pro5 .swiper-slide p{font-size:16px;color:010101;/* opacity:0.7 */color: #151515;}
.pro5 .buttonBox{height: 30px;width: 100%;background: #f4f4f4;margin-top: 20px;position: relative}
.pro5 .more{position: absolute;font-size: 16px;color: #000;right: 20px;line-height: 30px;top: 0}
.pro5 .more span{color: red;font-size: 21px;margin-right:3px}
.pro5 .swiperBtn{background: #fff;position: relative;height:30px;width:105px}
.pro5 .swiper-button-prev{box-sizing:border-box;left: 0;margin-top: 0;top: 0;width: 24px;height: 30px;background-color: red;background-size: auto 30px;opacity:1;background: url(../images/pro5btn.png) left top no-repeat;background-size: auto 60px;}
.pro5 .swiper-button-next{box-sizing:border-box;left: 66px;width: 24px;height: 30px;background-color: #fff;opacity:1;/* background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23cccccc'%2F%3E%3C%2Fsvg%3E"); */margin-top: 0;top: 0;opacity: 1;background: url(../images/pro5btn.png) right top no-repeat;background-size: auto 60px;}
.pro5 .swiper-button-prev.active{background-position-y:bottom}
.pro5 .swiper-button-next.active{background-position-y:bottom}
.pro5 .swiper-pagination{top:0;margin:0;line-height:30px;left:30px}
.pro5 .swiper-pagination span.swiper-pagination-bullet{margin:0 3px;border-radius: 0;border: 1px solid #e5e5e5;background: #fff;width: 3px;height: 3px;opacity: 1;}
.pro5 .swiper-pagination span.swiper-pagination-bullet-active{background:red;border: 1px solid red;}

.disn{margin-bottom:20px}
.pro10 h5.title{margin-bottom: 20px}
.pro10 .left{width: 567px;height: 385px;float: left;background: #eeeeee}
.pro10 .left .swiper-slide{line-height: 385px;text-align: center}
.pro10 .left .swiper-slide img{vertical-align: middle;max-width: 80%;max-height: 80%}
.pro10 .left .swiper-button-next{width: 37px;height: 37px;right: 16px;margin-top: -18px;background-image: url(../images/pro10_btn.png);background-size: auto 100%;background-position-x: right;}
.pro10 .left .swiper-button-prev{width: 37px;height: 37px;left: 16px;margin-top: -18px;background-image: url(../images/pro10_btn.png);background-size: auto 100%;background-position-x: left;}
.pro10 .left .swiper-pagination{bottom:20px}
.pro10 .left .swiper-pagination span.swiper-pagination-bullet{width:7px;height:7px;border-radius: 0;margin: 0 5px;background: none;border: 1px solid #ccc;opacity: 1;}
.pro10 .left .swiper-pagination span.swiper-pagination-bullet-active{background:red;border:1px solid red}
.pro10 .right{width: 524px;height: 385px;float: right;}
.pro10 .right ul{border-right:1px dashed #e5e5e5;border-bottom:1px dashed #e5e5e5}
.pro10 .right ul li{position:relative;width:33.3%;height:190px;text-align:center;padding-top:30px;box-sizing:border-box;border:1px dashed #e5e5e5;border-right:0;border-bottom:0;float:left}
.pro10 .right ul li p{line-height:40px}
.pro10 .right ul li i{display:block;position:absolute;width:7px;height:7px;border:1px solid #eee;left:calc(50% - 3px);bottom:23px}
.pro10 .right ul li i.active{background:red}
.pro10 ul li{float:left}

.pro10 .design:after,.pro10 .design:before,.pro10 h5.title:after{display: none}
.pro10 .buttonBox{height: 30px;width: 100%;background: #f4f4f4;margin-top: 20px;position: relative;line-height: 30px;padding: 0;border: 0;}
.pro10 .click{padding-left:37px;position: relative}
.pro10 .click:after{position: absolute;content: "";width: 21px;height: 29px;background-color: red;opacity:1;background-size: 10px!important;/* border: 1px solid #cccccc; */background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");background-position: center;background-repeat: no-repeat;left: 0;}
.pro10 .more{position: absolute;font-size: 16px;color: #000;right: 20px;line-height: 30px;top: 0}
.pro10 .more span{color: red;font-size: 21px;margin-right:3px}

