@charset "utf-8";


.pro_view{overflow:hidden;padding:90px 0;}
.pro_view .container{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;position:relative;align-items: center;-webkit-align-items: center;}


.pro_img{width:860px;display:-webkit-flex;display:flex;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-justify-content:space-between;justify-content:space-between;}
.pro_img .view{width:750px;position:relative;box-sizing:border-box;}
.pro_img .view .swiper{width:100%;}
.pro_img .view .swiper img{width:100%;display:block;}
.pro_img .view .swiper-slide img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;box-sizing:border-box;border:1px solid #F3F3F3;}

.pro_img .preview{width:100px;height:750px;position:relative;text-align:center;overflow:hidden;box-sizing:border-box;}
.pro_img .preview .swiper{width:100%;height:100%;text-align:center;}
.pro_img .preview .swiper-wrapper{height:100%;}
.pro_img .preview .swiper-slide{cursor:pointer;width:100px;display:inline-block;box-sizing:border-box;position:relative;}
.pro_img .preview .swiper-slide img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;box-sizing:border-box;border:1px solid #F3F3F3;}

.pro_img .preview .swiper-slide.active-nav img{border-color:var(--color-active);}

.pro_img .view .arrow-left,.pro_img .view .arrow-right{color:#434343;position:absolute;top:calc(50% - 20px);width:40px;height:40px;z-index:10;text-align:center;background: rgba(255,255,255,.53);border-radius: 4px;}
.pro_img .view .arrow-left{left:5px;}
.pro_img .view .arrow-right{right:5px;}
.pro_img .view .arrow-left i,.pro_img .view .arrow-right i{color:inherit;font-size:24px;line-height:40px;}
.pro_img .view .arrow-left:hover,.pro_img .view .arrow-right:hover{color:var(--color-active);}
.pro-desc  h5 {color: #6E4627;font-size: 32px;font-weight: 700;line-height: 1;text-transform: capitalize;}
.pro_view_inner {flex: 1;margin-left: 40px;}
.pro_view_inner .path {color: #000;font-size: 16px;line-height: 1;}
.pro_view_inner h1 {color: #000;font-size: 32px;font-weight: 700;line-height: 40px;margin-top: 20px;}
.pro_view_inner h4 {color: #6E4627;font-size: 32px;font-weight: 700;line-height: 1;margin-top: 20px;}
.pro_view_inner .para {color: #4A4A4A;font-size: 18px;line-height: 30px;margin-top: 20px;}
.pro_view_inner ul {margin: 20px -5px 0;display: flex;flex-wrap: wrap;}
.pro_view_inner ul li {width: 25%;padding: 0 5px;text-align: center;}
.pro_view_inner ul li .ico {width: 76px;height: 76px;margin: 0 auto;border-radius: 50%;display: flex;justify-content: center;align-items: center;background: #6E4627;}
.pro_view_inner ul li .ico img {max-width: 67%;}
.pro_view_inner ul li h5 {color: #000;font-size: 16px;font-weight: 700;line-height: 1;text-transform: uppercase;margin-top: 15px;}
.pro_view_inner ul li p {color: #000;font-size: 16px;line-height: 1;text-transform: uppercase;margin-top: 8px;}

.pro_view_inner .btn-box {margin-top: 20px;}
.pro_view_inner .btn-box a {display: block;width: 100%;line-height: 52px;border-radius: 28px;background: #6E4627;color: #fff;font-size: 18px;
font-weight: 700;letter-spacing: 1px;text-align: center;border: 2px solid #6E4627;transition: all .5s ease;}
.pro_view_inner .btn-box a:hover {background: transparent;color: #6E4627;}


.pro-desc {padding: 30px 0 40px;background: #FAFAFA;}
.pro-desc h3 {color: #000;font-size: 40px;font-weight: 700;line-height: 1;text-transform: uppercase;margin-top: 30px;}
.pro-desc .list {display: flex;margin: 60px 0;}
.pro-desc .list .txt {flex: 1;margin-right: 50px;}
.pro-desc .list .txt .t {color: #4A4A4A;font-size: 18px;line-height: 30px;}
.pro-desc .list .txt .t p {line-height: 30px;}
.pro-desc .list .txt .t + .t {margin-top: 30px;}
.pro-desc .list .txt h5 {color: #6E4627;font-size: 32px;font-weight: 700;line-height: 1;margin-bottom: 25px;}
.pro-desc .list .txt dl dd {line-height: 30px;padding-left: 25px;position: relative;}
.pro-desc .list .txt dl dd::after {content: ''; width: 5px;height: 5px;border-radius: 50%;background: #464646;position: absolute;left: 5px;top: 13px;}
.pro-desc .list .pic {max-width: 49%;}
.pro-desc .list .pic .tit h3 {color: #6E4627;font-size: 32px;font-weight: 700;line-height: 1;}
.pro-desc .list .pic .tit p {margin-top: 25px;color: #4A4A4A;font-size: 18px;line-height: 30px;}
.pro-desc .list .pic .tit a.more {width: 220px;display: inline-block;line-height: 46px;text-align: center;border: 2px solid #6E4627;border-radius: 25px;color: #fff;font-size: 18px;font-weight: 700;margin-top: 20px;transition: all .5s ease;background: #6E4627;}
.pro-desc .list .pic .tit a.more:hover {background: transparent;color: #6E4627;}
.pro-desc .list .pic img {margin-top: 20px;}


.pro-fabric {padding: 80px 0 0;}
.pro-fabric h3 {color: #000;font-size: 40px;font-weight: 700;line-height: 1;text-transform: uppercase;}
.pro-fabric dl {margin-top: 30px;}
.pro-fabric dl dd {color: #4A4A4A;font-size: 18px;line-height: 30px;padding-left: 25px;position: relative;}
.pro-fabric dl dd::after {content: ''; width: 5px;height: 5px;border-radius: 50%;background: #464646;position: absolute;left: 5px;top: 13px;}
.pro-fabric ul {margin: 0 -30px;display: flex;flex-wrap: wrap;}
.pro-fabric ul li {width: 50%;padding: 30px;overflow: hidden;}
.pro-fabric ul li .pic img {width: 100%;}
.pro-fabric ul li .txt {margin-top: 25px;text-align: center;}
.pro-fabric ul li .txt h5 {color: #000;font-size: 18px;font-weight: 700;line-height: 1;}
.pro-fabric ul li .txt p {color: #4A4A4A;font-size: 18px;line-height: 25px;margin-top: 5px;}


.rela-pro {padding: 80px 0 70px;}
.rela-pro h3 {color: #000;font-size: 40px;font-weight: 700;line-height: 1;text-transform: uppercase;}
.rela-pro .list {position: relative;margin-top: 40px;}
.rela-pro .list .swiper-slide .pic {overflow: hidden;}
.rela-pro .list .swiper-slide .pic a {position: relative;display: block;}
.rela-pro .list .swiper-slide .pic a::after {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,.06);transition: all .5s ease;}
.rela-pro .list .swiper-slide .pic img {aspect-ratio: 1 / 1;width: 100%;object-fit: cover;}
.rela-pro .list .swiper-slide .txt {margin-top: 15px;}
.rela-pro .list .swiper-slide .txt h6 {color: #6E4627;font-size: 16px;line-height: 1;}
.rela-pro .list .swiper-slide .txt h5 {color: #303030;font-size: 18px;font-weight: 600;line-height: 25px;margin-top: 15px;}

.rela-pro .list .swiper-slide .pic:hover a::after {background: rgba(0,0,0,.24);}

.rela-pro .list .swiper-pagination-bullets{position: relative;margin-top: 30px;top: auto;right: auto;bottom: auto;left: auto;}
.rela-pro .list .swiper-pagination-bullets::after {content: '';width: 100%;height: 3px;display: block;background: #E1E1E1;position: absolute;left: 0;top: 14px;z-index: 0;}
.rela-pro .list .swiper-pagination-bullet {width:240px;height:3px;margin: 0!important;border-radius:0;background:transparent;opacity:1;position: relative;transition: all .3s ease 0s;z-index: 10;}
.rela-pro .list .swiper-pagination-bullet-active {background: #6E4627;}


.container .txt .table-response{width:100%;max-width: 100%;overflow-x:auto;}
.container .txt table{width: 100% !important;max-width:100%;margin-bottom:20px;font-size:15px;border:1px solid #D9D9D9;color:#333;height: auto;}
.container .txt table tr > th{padding:8px 8px;line-height:1.42857143;vertical-align:middle;border:1px solid #D9D9D9;font-weight:bold;}
.container .txt table tr > td{padding:8px 8px;line-height:1.42857143;vertical-align:middle;border:1px solid #D9D9D9;}
.container .txt table tr.firstRow > td{font-weight:bold;}
.container .txt table tr > td *{margin:0;padding:0;}
.container .txt table tr > td p{margin:0;}

@media screen and (max-width: 1680px) {
.pro_view {padding: 70px 0;}
.pro_img {width: 590px;}
.pro_img .view {width: 510px;}
.pro_img .preview {width: 70px;height: 510px;}
.pro_img .preview .swiper-slide {width: 70px;}
.pro_view_inner h1 {font-size: 28px;line-height: 36px;}
.pro_view_inner .path {font-size: 15px;}
.pro_view_inner h4 {font-size: 28px;}
.pro_view_inner ul li .ico {width: 68px;height: 68px;}
.pro_view_inner ul li h5 {font-size: 15px;}
.pro_view_inner ul li p {font-size: 15px;}
.pro_view_inner .btn-box a {line-height: 46px;font-size: 17px;}

.pro-desc h3 {font-size: 32px;margin-top: 25px;}
.pro-desc .list {margin: 50px 0;}
.pro-desc .list .txt h5 {font-size: 28px;margin-bottom: 20px;}
.pro-desc .list .pic .tit h3 {font-size: 28px;}
.pro-desc .list .pic .tit p {margin-top: 20px;font-size: 17px;line-height: 26px;}
.pro-desc .list .pic .tit a.more {width: 200px;line-height: 42px;font-size: 17px;}

.rela-pro {padding: 70px 0 60px;}
.rela-pro h3 {font-size: 34px;}
.pro-desc .list .txt .t {font-size: 17px;line-height: 28px;}
}
 
@media screen and (max-width: 1440px) {
}
                                          
@media screen and (max-width: 1367px) {
.pro_view {padding: 50px 0;}
.pro_img {width: 520px;}
.pro_img .view {width: 450px;}
.pro_img .preview {width: 60px;height: 450px;}
.pro_img .preview .swiper-slide {width: 60px;}
.pro_view_inner h1 {font-size: 24px;line-height: 32px;}
.pro_view_inner .path {font-size: 14px;}
.pro_view_inner h4 {font-size: 24px;}
.pro_view_inner ul li .ico {width: 60px;height: 60px;}
.pro_view_inner ul li h5 {font-size: 14px;}
.pro_view_inner ul li p {font-size: 14px;}
.pro_view_inner .btn-box a {line-height: 40px;font-size: 16px;}

.pro-desc h3 {font-size: 28px;margin-top: 20px;}
.pro-desc .list {margin: 40px 0;}
.pro-desc .list .txt h5 {font-size: 24px;margin-bottom: 15px;}
.pro-desc .list .pic .tit h3 {font-size: 24px;}
.pro-desc .list .pic .tit p {margin-top: 15px;font-size: 16px;line-height: 24px;}
.pro-desc .list .pic .tit a.more {width: 180px;line-height: 38px;font-size: 16px;}

.rela-pro {padding: 60px 0 50px;}
.rela-pro h3 {font-size: 28px;}
.rela-pro .list .swiper-slide .txt h5 {font-size: 16px;line-height: 22px;margin-top: 10px;}
.pro-desc .list .txt .t {font-size: 16px;line-height: 26px;}
}
                                    
@media screen and (max-width: 1280px) {
}
                                
@media screen and (max-width: 992px) {
.pro_view {padding: 30px 0;}
.pro_view .container {display: block;}
.pro_img {width: 70%;display: block;margin: 0 auto;}
.pro_img .view {width: 100%;}
.pro_img .preview {width: 100%;height: auto;margin-top: 20px;}
.pro_view_inner {margin-left: 0; text-align: center;margin-top:30px;}
.pro_view_inner h1 {font-size: 22px;line-height: 28px;margin-top: 10px;}
.pro_view_inner h4 {font-size: 22px;margin-top: 10px;}
.pro_view_inner .btn-box a {line-height: 36px;font-size: 10px;}

.pro-desc {padding: 30px 0;}
.pro-desc h3 {font-size: 24px;margin-top: 15px;}
.pro-desc .list {margin: 20px 0;display: block;}
.pro-desc .list .txt {margin-right: 0;}
.pro-desc .list .txt h5 {font-size: 20px;margin-bottom: 10px;}
.pro-desc .list .pic .tit h3 {font-size: 20px;}
.pro-desc .list .pic .tit p {margin-top: 10px;font-size: 15px;line-height: 22px;}
.pro-desc .list .pic .tit a.more {width: 160px;line-height: 34px;font-size: 15px;margin-top: 10px;}
.pro-desc .list .pic {max-width: 100%;margin-top: 20px;}

.rela-pro {padding: 30px 0;}
.rela-pro h3 {font-size: 24px;}
.rela-pro .list {margin-top: 20px;}
.rela-pro .list .swiper-slide .txt {margin-top: 10px;}
.rela-pro .list .swiper-pagination-bullets {margin-top: 20px;}
.rela-pro .list .swiper-pagination-bullet {width: 30px;}
.pro-desc .list .txt .t {font-size: 15px;line-height: 24px;}
.pro-desc .list .txt .t p {line-height: 24px;}
}
                                
@media screen and (max-width: 768px) {
}

@media screen and (max-width: 480px) {
.pro_img {width: 90%;}
.pro_view_inner ul li {width: 50%;padding: 5px;}
.pro_view_inner h1 {font-size: 20px;}
.pro_view_inner h4 {font-size: 20px;}

.pro-desc h3 {font-size: 20px;margin-top: 10px;}
.pro-desc .list .txt h5 {font-size: 18px;}
.pro-desc .list .pic .tit h3 {font-size: 18px;}

.rela-pro h3 {font-size: 20px;}
}

@media screen and (max-width: 400px) {
}