.pro3 .proli1 {
    width: 28%
}

.pro3 .proli2 {
    width: 25%
}

.pro3 .proli3 {
    width: 14%
}

.proli1 .three span a {
    padding-left: 20px !important
}

.hotPro {
    margin-top: 20px;
    padding: 0 3vw;
}

.hotProUl ul {
    border: 1px dotted  #e5e5e5;
}

.hotProUl ul li {
    float: left;
    width: calc(100% / 4);
    border-right: 1px dotted  #e5e5e5;
    box-sizing: border-box;
    /* padding: 15px 20px; */
    text-align: center;
}
.hotProUl ul li:nth-child(4n){border-right:0}

.hotProUl ul li .Img {
    width: 100%;
    height: 19vw;
    overflow: hidden;
    padding: 5px 10px;
    box-sizing: border-box;
}

.hotProUl ul li img {
    max-width: 100%;
    max-height: 100%
}

.hotProUl ul li p {
    color: #010101;
    opacity: 0.7;
    font-size: 10px;
    margin-top: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 5px;
    line-height: 20px;
    padding-bottom: 5px;
}

.hotProCon {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

.hotProCon .left {
    width: 40vw;
    /* height: 468px; */
    float: left;
    /* padding: 40px 26px; */
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    position: relative;
    text-align: center;
    /* height: 100vw; */
    padding: 4vw 2vw;
}

.hotProCon .left .swiper-container {
    height: 50vw;
    width: 100%;
    line-height: 50vw;
}

.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: 30px;
    width: 120px;
    display: inline-block;
}

.hotProCon .left .swiperBtn .up {
    position: absolute;
    width: 23px;
    height: 17px;
    background: url(../../images/pro3_btn.png) top no-repeat;
    left: calc(50% - 11px);
    top: -15px;
    cursor: pointer;
}

.hotProCon .left .swiperBtn .down {
    position: absolute;
    width: 23px;
    height: 17px;
    background: url(../../images/pro3_btn.png) bottom no-repeat;
    left: calc(50% - 11px);
    top: 55px;
    cursor: pointer;
}

.hotProCon .left .swiperBtn .swiper-button-prev {
    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'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d8d8d8'%2F%3E%3C%2Fsvg%3E");
    background-size: 10px;
    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 .swiper-pagination {
    top: 0;
    margin: 0;
    line-height: 30px;
    left: calc(50% - 22px);
    top: 13px;
}

.hotProCon .swiper-pagination span.swiper-pagination-bullet {
    margin: 0 4px;
    border-radius: 0;
    border: 1px solid #e5e5e5;
    background: #fff;
    width: 4px;
    height: 4px;
    opacity: 1;
}

.hotProCon .swiper-pagination span.swiper-pagination-bullet-active {
    background: red;
    border: 1px solid red;
}
.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;appearance: none;-webkit-appearance: none;}
/* .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)}

.swiperBtn *{appearance: none;-webkit-appearance: none;}
.hotProCon .right {
    width: 50vw;
    /* height: 100vw; */
    float: right;
    background: #f4f4f4;
    box-sizing: border-box;
    padding: 3vw 2vw;
    padding-bottom: 40px;
}

.hotProCon .right .head {
    position: relative;
    border-bottom: 1px dashed #e5e5e5
}

.hotProCon .right .head p {
    font-size: 12px;
    color: #010101;
    font-weight: bold;
    line-height: 30px;
}

.hotProCon .right .head span {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    color: #ff0000;
    font-weight: bold;
    line-height: 30px;
}

.hotProCon .right .head em {
    font-size: 10px;
}

.hotProCon .right .contactUs {
    position: absolute;
    /* width:108px; */
    /* height:37px; */
    right: 23px;
    /* bottom:37px; */
    text-align: center;
    line-height: 25px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.7), red);
    color: #fff;
    font-size: 12px;
    bottom: 4vw;
    padding: 0 9px;
}

.hotProCon .right .info * {
    font-size: 10px !important;
    line-height: 1.5 !important;
}

.pro5 {
    height: auto;
    padding-bottom: 50px;
}

.pro5 .head {
    line-height: 44px;
    margin: 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.pro5 .swiper-container {
    /* border-bottom: 1px dotted  #e5e5e5; */
    /* border-right: 1px dotted  #e5e5e5; */
     border: 1px dotted  #e5e5e5; 
    position: relative;
    margin: 0 3vw;
    border-right: 0; 
    border-bottom: 0; 
    /*background: url(../../images/Mpro5Bk.png) center center no-repeat;*/
    background-size: 99% 99%;
}

.pro5 .swiper-container:before {
    content: "";
    /* border-top: 1px dotted  #e5e5e5; */
    width: 100%;
    top: 35vw;
    position: absolute;
}

.pro5 .swiper-container:after {
    content: "";
    /* border-top: 1px dotted  #e5e5e5; */
    width: 100%;
    left: 0;
    top: 70vw;
    position: absolute;
}
.pro5 .swiper-container .borderBox:before{
     content: "";
     /* border-right: 1px dotted  #e5e5e5; */
     height: 100%;
     right: 1px;
     top: 0;
     position: absolute;
}
.pro5 .swiper-slide {
    /* height:220px; */
    text-align: center;
     border:1px dotted  #e5e5e5; 
    /* border-right: 1px dotted  #e5e5e5; */
    box-sizing: border-box;
    border-top: 0; 
    border-left: 0; 
    height: 35vw;
}

.pro5 .swiper-slide .Img {
    height: 28vw;
    line-height: 28vw;
}

.pro5 .swiper-slide .Img img {
    vertical-align: middle;
    max-width: 70%;
    max-height: 80%;
}

.pro5 .swiper-slide p {
    font-size: 12px;
    color: #010101;
    opacity: 0.7;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* .pro5 .buttonBox{height: 30px;width: 100%;background: #f4f4f4;margin-top: 20px;position: relative;} */

.pro5 .buttonBox {
    height: 30px;
    width: 94%;
    background: red;
    margin-top: 20px;
    position: relative;
    line-height: 30px;
    padding: 0;
    border: 0;
    text-align: center;
    margin: 20px auto 0;
}

.pro5 .more {
    /* position: absolute; */
    font-size: 14px;
    color: #fff;
    /* right: 20px; */
    line-height: 30px;
    top: 0;
    position: absolute;
    z-index: 111;
    left: calc(50% - 30px);
}

.pro5 .more span {
    color: #fff;
    font-size: 17px;
    margin-right: 3px;
}

.pro5 .swiperBtn {
    /* background: #fff; */
    /* position: relative; */
    height: 30px;
    /* width:105px; */
    /* display: none; */
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.pro5 .swiper-button-prev {
    box-sizing: border-box;
    left: 0;
    margin-top: 0;
    top: 0;
    width: 21px;
    height: 29px;
    background-color: red;
    background-size: 10px !important;
    opacity: 1;
}

.pro5 .swiper-button-prev {
    box-sizing: border-box;
    /* left: 66px; */
    /* width: 21px; */
    /* background-color: #fff; */
    opacity: 1;
    background-size: 15px !important;
    /* border: 1px solid #cccccc; */
    background-image: url(../images/pro5_left.png);
    margin-top: 0;
    top: 0;
    padding-right: 33px;
    background-position: right;
    height: 30px;
    left: auto;
    left: 19vw;
}

.pro5 .swiper-button-next {
    box-sizing: border-box;
    /* left: 66px; */
    /* width: 21px; */
    /* background-color: #fff; */
    opacity: 1;
    background-size: 15px !important;
    /* border: 1px solid #cccccc; */
    background-image: url(../images/pro5_right.png);
    margin-top: 0;
    top: 0;
    padding-left: 20px;
    background-position: left;
    height: 30px;
    left: auto;
    right: 19vw;
}

.pro5 .swiper-pagination {
    top: 0;
    margin: 0;
    line-height: 30px;
    left: 30px;
    display: none;
}

.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;
    padding: 0 3vw;
    box-sizing: border-box;
}

.pro10 h5.title {
    margin-bottom: 20px
}

.pro10 .left {
    width: 100%;
    height: 70vw;
    float: left;
    background: #eeeeee;
}

.pro10 .left .swiper-slide {
    line-height: 70vw;
    text-align: center;
}

.pro10 .left .swiper-slide img {
    vertical-align: middle;
    max-width: 80%;
    max-height: 80%
}

.pro10 .left .swiper-button-next {
    width: 27px;
    height: 27px;
    right: 8px;
    margin-top: -18px;
    background-image: url(../../images/pro10_btn.png);
    background-size: auto 100%;
    background-position-x: right;
}

.pro10 .left .swiper-button-prev {
    width: 27px;
    height: 27px;
    left: 8px;
    margin-top: -18px;
    background-image: url(../../images/pro10_btn.png);
    background-size: auto 100%;
    background-position-x: left;
}

.pro10 .left .swiper-pagination {
    bottom: 10px;
}

.pro10 .left .swiper-pagination span.swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    border-radius: 0;
    margin: 0 3px;
    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: 100%;
    /* height: 370px; */
    float: right;
    margin-top: 15px;
}

.pro10 .right ul {
    border-right: 1px dotted  #e5e5e5;
    border-bottom: 1px dotted  #e5e5e5
}

.pro10 .right ul li {
    position: relative;
    width: 33.3%;
    height: 150px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    border: 1px dotted  #e5e5e5;
    border-right: 0;
    border-bottom: 0;
    float: left;
}

.pro10 .right ul li .Img {
    height: 23vw;
}
.pro10 .right ul li .Img img{
    height: 70%;
    margin-top: 8px;
}

.pro10 .right ul li p {
    line-height: 14px;
    font-size: 12px;
}

.pro10 .right ul li i {
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid #eee;
    left: calc(50% - 3px);
    bottom: 15px;
}

.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: 94%;
    background: red;
    margin-top: 20px;
    position: relative;
    line-height: 30px;
    padding: 0;
    border: 0;
    text-align: center;
}

.pro10 .click {
    padding-left: 37px;
    position: relative;
    display: none;
}

.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: 14px;
    color: #fff;
    right: 20px;
    line-height: 30px;
    top: 0;
}

.pro10 .more span {
    color: #fff;
    font-size: 16px;
    margin-right: 3px;
}