﻿#product{padding: 4.8% 0;background: #f6f6f6;}
#product .typename,#choose .typename,#reason .typename,#customer .typename,#seen .typename,#news .typename{text-align: center; font-size: 24px; text-transform: uppercase;position: relative; margin-bottom: 100px;}
#product .typename::before,#choose .typename::before,#reason .typename::before,#customer .typename::before,#seen .typename::before,#news .typename::before{width: 30px; height: 4px; background: #67b563; content: ""; position: absolute; bottom: -35px;border-radius: 2px;left: 50%;margin-left: -22px;}
#product .typename::after,#choose .typename::after,#reason .typename::after,#customer .typename::after,#seen .typename::after,#news .typename::after{width: 14px; height: 4px; background: #67b563; content: ""; position: absolute; bottom: -35px;border-radius: 2px;left: 50%; margin-left: 11px;}
#product .hottitle{background: #67b563;color: #fff; text-align: center; padding: 40px 0; text-transform: uppercase; font-size: 24px; font-weight: bold;}
#product .me-3{background: #fff; width: 26.3%;}
#product .nav-link{ border-bottom: 1px solid #f0f0f0; padding: 26px 0; font-size: 18px; color: #434648; margin: 0 20px;}
#product .nav-link:last-child{border: none;}
#product .nav-pills .nav-link.active{background: none;color: #67b563;}
#product .tab-content{width: 73.7%;padding-left: 2.2%;}
#product .youshi{background: #fff;}
#product .youshi img{ width: 100%; height: 100%; object-fit: cover; left: 0;  text-align: center;}
#product .youshi ul{list-style: none; margin: 0; padding: 0;}
#product .youshi ul li{ color: #434648;margin: 0 30px 0 10px; border-bottom: 1px solid #f0f0f0; padding: 10.6% 0; font-size: 17px;text-transform: uppercase; padding-left: 62px;position: relative;}
#product .youshi ul li:last-child{border: none;}
#product .youshi ul li i{color: #67b563;margin-left: -62px; top:50%; margin-top: -22px;position: absolute; border: 1px solid #67b563; border-radius: 50%; width: 44px; height: 44px; text-align: center; line-height: 42px; font-size: 24px;}
#product .infos{background: #fff; margin-top: 20px;padding: 2.5%;}
#product .infos .more{color:#67b563; font-size: 16px; text-transform: uppercase; text-decoration: none; margin-top: 20px;}
#choose{background: url(../image/bg_02.jpg) fixed no-repeat; background-size: cover; padding: 5.6% 0;}
#choose .typename{color: #fff;}
#choose .cbox {background: #f6f6f6; padding: 2.3%;}
#choose .content{background: #fff; padding: 30px; font-size: 16px;position: relative;}
#choose .content .title{text-align: center; color: #273f52; font-size: 20px; text-transform: uppercase; padding:10px 0 45px; font-weight: bold; background: url(../image/line_bg.jpg) left bottom repeat-x;}
#choose .content ul{list-style: none; margin: 180px 0 0; padding: 0;}
#choose .content ul li{padding: 12px 0;}
#choose .getbtn{margin-top: 10px; font-size: 16px; text-decoration: none; font-weight:bold;color: #fff; background: #67b563; display: inline-block; text-transform: uppercase;padding: 14px 25px;border-radius: 30px;}
#choose .getbtn span{border-right: 1px solid #72c36e; margin-right: 10px; padding-right: 10px;}
#choose .getbtn .bicon{ border: 1px solid #fff; border-radius: 50%; width: 22px; height: 22px; text-align: center; line-height: 20px; font-size: 14px; }
#choose a:hover.getbtn{background: #092943;}
#choose .content .tel{border: 2px solid #e5e5e5; font-size: 24px; font-weight: bold; padding: 12px 30px; border-radius: 30px; color: #092943; text-decoration: none;}
.thumbSwiper .swiper-slide{background: #f6f6f6; cursor: pointer; border-radius: 10px; text-align: center; text-transform: uppercase; font-size: 14px;padding:10px 20px;line-height: 18px;}
.thumbSwiper .swiper-slide i{background: #67b563;margin-bottom: 5px; color: #fff; width: 48px; height: 48px; border-radius: 50%; text-align: center; line-height: 48px; font-size: 24px;}
.thumbSwiper .swiper-slide-thumb-active{background: #67b563; color: #fff;}
.thumbSwiper .swiper-slide-thumb-active i{background: #fff; color: #67b563;}
#choose .content .desimg img{margin-top: 30px;}
@media (min-width: 1200px) {
.thumbSwiper{width: 50%;position: absolute; left: 0; top: 145px; padding:0 20px;}
#choose .content .desimg{padding-left: 40px; text-align: center;}
}
#reason{padding: 4.6% 0; background: #f6f6f6;}
#reason .reasonSwiper{position: relative; text-align: center;}
#reason .swiper-slide a.box{background: #fff; text-align: center;color: #333; display: block;text-decoration: none;}
#reason .swiper-slide .title{ padding: 10px 0; display:block; text-transform: capitalize;}
#reason .swiper-slide a.box:hover{background: #67b563; color: #fff;}
#reason .slideimg{display: block; overflow: hidden;}
#reason a.box .slideimg img{transition:all 0.3s ease; outline:none;}
#reason a.box .slideimg:hover img{transform: scale(1.1);}
#reason .swiper-button-next, #reason .swiper-button-prev {background: #282828;width: 35px;height: 35px;position: absolute;bottom: 0;top: auto;left: 50%;transition: 0.3s;text-align: center;line-height: 35px; color: #fff;}
#reason .more{display: inline-block;width: 35px;height: 35px; color: #fff;background: #c5c5c5; text-align: center; line-height: 35px; margin-top: 30px;}
#reason .swiper-button-next {margin-left: 33px;}
#reason .swiper-button-prev {margin-left: -68px;}
#customer{background:#67b563;background-size: cover; padding: 5.6% 0; font-size: 16px; }
#customer .typename::before,#customer .typename::after{background: #fff;}
#customer .number{color: #fff;font-size: 40px; font-weight: bold;}
#customer .about-parameter{color: #fff;} 
#customer .typename{ color:#fff}
#customer .col-lg-3{border-left: 1px solid #78d174;}
#customer .col-lg-3:first-child{border: none;}
#customer .about{background: #f6f6f6;margin: 35px 0 0;}
#customer .about .col-xl-6{padding: 0;}
#customer .about .title{font-size: 25px; font-weight: bold;}
#customer .about .box{padding: 30px;color: #5c5b5b;}
#customer .about .title{margin-bottom: 15px;margin-top: 10px;}
#customer .subtit{margin-bottom: 40px;}
#customer .subtit a{color: #67b563; text-decoration: none; text-transform: uppercase; float: right;}
#customer .box p{margin-bottom: 30px;}
#customer .contact{background: #fff; border-radius: 30px; display: block; margin: 50px auto 0; width: 340px; height: 54px; text-align: center; line-height: 54px; color: #67b563; font-size: 16px; text-decoration: none; text-transform: uppercase; font-weight: bold;}
#customer a:hover.contact{background: #092943; color: #fff;}
#seen{background: #f6f6f6; padding: 4.6% 0; text-align: center;}
#seen .container{position: relative;}
#seen .swiperbg{background: #fff; padding: 2.4%;}
#seen .seebox{position: relative; display: block; text-align: center;}
#seen .seebox::before{content: "";transform: scale(0);opacity: 0; transition: all 0.3s ease; width: 90%; height: 90%; background: rgba(103,181,99,.8);position: absolute; left: 5%; top: 5%;}
#seen .seebox:hover::before{ transform: scale(1); opacity: 1;}
#seen .seebox .title{font-size: 16px;text-transform: capitalize; opacity: 0;font-weight: bold;transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; position: absolute; width: 90%; height: 90%;  left: 5%; top: 5%; color: #fff;}
#seen .seebox:hover .title{opacity: 1;}
#seen .more{display: inline-block;width: 35px;height: 35px; color: #fff;background: #c5c5c5; text-align: center; line-height: 35px; margin-top: 30px;}
#seen .swiper-button-next, #seen .swiper-button-prev {background: #282828;width: 35px;height: 35px;position: absolute;bottom: 0;left: 50%; top: auto; transition: 0.3s;text-align: center;line-height: 35px; color: #fff;}
#seen .swiper-button-next {margin-left: 33px;}
#seen .swiper-button-prev {margin-left: -68px;}
#news{padding: 4.6% 0;background: #fff;}
#news .boxbg{background: #f6f6f6; padding: 2.3%;}
#news .boxbg .list{border-bottom: 1px solid #e5e1e1;}
#news .boxbg .list .news-no {position: absolute;top: 35px; border-right: 1px solid #e5e1e1; left: 0;padding: 10px 0;width: 75px;height: 68px;color: #666666; text-align: center;font-size: 16px;}
#news .boxbg .list .news-no b {font-size:45px;}
#news .boxbg .list .n-list{text-decoration: none; position: relative;padding:20px 15px 20px 93px ; display: block; color: #838282;}
#news .boxbg .list .title{text-transform: uppercase;color: #3d3d3d; font-weight: bold;}
#news .boxbg .list p{margin-bottom: 0; line-height: 20px; margin-top:5px; height: 60px; overflow: hidden;}
#news .boxbg .list .n-list:hover{background: #67b563; color: #fff;}
#news .boxbg .list .n-list:hover .title,#news .boxbg .n-list:hover .news-no{color: #fff;}
#news .boxbg .list:last-child{border: none;}
@media (max-width: 1199px) {
.d-flex{display: block !important;}
#product .me-3{width: 100%; padding: 10px;}
#product .hottitle{display: none;flex-direction:row;}
#product .nav-link{display: inline-block !important; background: #f0f0f0;color: #67b563; padding:8px 15px; margin: 2px; font-size: 14px;}
#product .nav-pills .nav-link.active{background: #67b563;color: #fff;}
#product .tab-content{width: 100%; padding-left: 0;}
#choose .content ul{margin: 0;}
.thumbSwiper{margin-top: 10px;}
}
@media (min-width: 1200px) {
#product .me-3{flex-direction: column !important;}
}
@media (max-width: 991px) {
#product .youshi ul li{padding-top:25px; padding-bottom: 25px; }
#customer .col-lg-3{border: none;margin-bottom: 25px;}
#ban,#ban h2{font-size: 24px;}
}
@media (max-width: 1399px) {
	#choose .content .tel{display: none;}
}
@media (max-width: 767px) {
#product,#choose,#reason,#customer,#seen,#news,#form{padding:40px 0; }
}
@media (max-width: 384px) {
#choose .getbtn .bicon{display: none;}
}
.swiper-button-next::after, .swiper-button-prev::after{font-size: 18px; font-weight: bold;}
.swiper-ban .swiper-slide{position: relative;  background-size: cover; background-repeat: no-repeat;background-position: right center; height: 672px;}
.sell{color: #e5ebee; font-size: 42px; font-style:italic; font-weight: bold; position: absolute; top:20%;  left:13%;}
.sell h2{text-transform: uppercase; font-weight: bold; margin: 2.3% 0; font-size: 42px;position: relative; z-index: 1;display: inline-block; padding-right: 30px;}
.sell h2::before {transform: skew(30deg);background: rgba(9,41,67,0.8);content: "";width: 100%;height: 100%;position: absolute;left: 0;z-index: -1;}
.sell h1{font-size: 31px; font-style: normal; font-weight: normal;margin-bottom: 5.6%;}
.sell b{font-size: 50px;}
.sell .years{margin-bottom: 2.6%;}
.sell .more{border-radius: 30px; text-decoration: none; background:#67b563; display: inline-block; width: 240px; height: 55px; line-height: 55px; color: #fff; text-align: center; font-size: 16px; text-transform: uppercase; }
.sell .more:hover{background: #89cf84;}
.sell  h3{font-size: 42px; text-transform: uppercase;margin-bottom: 30px;}
.sell ul{list-style: none;margin: 0 0 60px;padding: 0;}
.sell ul li{font-size: 24px;position: relative;padding-left: 40px; font-weight: normal; margin: 20px 0;line-height: 35px; font-style: normal;}
.sell ul li::after{content: "\f14a";position: absolute; font-family: "Font Awesome 6 Free"; font-weight: 400; font-size: 14px;left: 0; color: #20a83a; font-size: 28px; top: 0; font-style: normal;}
.sell ul li.gcolor{color: #67b563; font-style: italic;}
@media (min-width: 768px) and (max-width: 991px){
 .swiper-ban .swiper-slide{height: 420px;}
.sell ul{font-size: 14px; line-height: 20px;}
.sell{top: 23%;}
}
@media (min-width: 992px) and (max-width: 1440px){
.swiper-ban .swiper-slide{height: 520px;}
}
@media (min-width: 1400px){
.s-con2{width: 25%;}	
}
@media (max-width: 1401px){
.sell{left: 30px;}	
.s-con2 span,.s-con2 h3{position: relative; display: inline-block; z-index:1; padding: 7px 25px 7px 10px;}
.s-con2 span::before,.s-con2 h3::before{transform: skew(30deg);background: rgba(9,41,67,0.8);content: "";width: 100%;height: 100%;position: absolute;
left: 0;top: 0;z-index: -1;}
.sell ul li::after{top: 8px;}
.sell h3{font-size: 24px;}
.sell h2{ font-size: 32px;}
.sell ul li{font-size: 18px; line-height: 20px;margin: 10px 0;}
.sell{top: 18%; font-size: 26px;}
.sell h3{margin-bottom: 15px;}
}
.swiper-ban .swiper-button-next,.swiper-ban .swiper-button-prev{background-color: rgba(0,0,0,.5); padding: 15px; background-position: center center; color: #fff;}
.swiper-ban .swiper-button-next::after,.swiper-ban .swiper-button-prev::after{font-size: 32px; }
@media (max-width: 767px){
    .swiper-ban .swiper-slide{height: 390px;}
	.sell,.sell h1,.sell h2, #ban h2{font-size: 18px;}
	.sell b{font-size: 30px;}
	.sell .more{width: 180px;}
	.sell ul{margin-bottom: 20px;}
	.swiper-ban .swiper-button-next, .swiper-ban .swiper-button-prev{display: none;}
}
@media (max-width: 730px){
.swiper-ban .swiper-slide{background-position: 45% center;}
.sell ul li{margin: 5px; font-size: 16px;}
.sell h3{margin-bottom: 5px;}
}
@media (min-width: 1401px) and (max-width: 1744px){
.s-con2{width: 80%;top: 10%;}
.s-con2 span,.s-con2 h3{position: relative; display: inline-block; z-index:1; padding: 7px 25px 7px 10px;}
.s-con2 span::before,.s-con2 h3::before{transform: skew(30deg);background: rgba(9,41,67,0.8);content: "";width: 100%;height: 100%;position: absolute;
left: 0;top: 0;z-index: -1;}
}

