@import url(besscolor.css);
/* main */
.list{ width: 100%; background-color: #F4F4F4;}
.list ul{ width: 100%; white-space: nowrap; text-align: center;}
.list ul li{display: inline-block; }
.list ul li a{font-family: "Sansation4"; font-size: 24px; display: block; width: 100%; color: #333; text-align: left; line-height: 80px; padding: 0px 30px; }
.list ul li a.active{font-family: "Sansation1"; color: var(--Bcolor);}
.listBox{padding: 60px 5% 100px;}
.listBox h3{font-family: "Sansation1"; text-align: center; font-size: 40px; color: #333; margin-bottom: 30px;}
.listBox .txt{margin-bottom: 40px;}
.listBox .txt p{font-size: 16px; color: #555; line-height: 32px;}
.listBox .pic{text-align: center;}
.listBox .pic div{font-size: 0;}
.listBox .pic div img{width: 100%;}
/* certifications */
.cerList{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.cerList{padding-top: 30px;}
.cerList .cerBox{width: 18%;}
.cerList .cerBox p{font-size: 14px; color: #666; margin-top: 10px;}
/* culture */
.culture {padding: 60px 5% 100px;}
.culture h3{font-family: "Sansation1"; text-align: center; font-size: 40px; color: #333; margin-bottom: 30px;}
.culList{display: flex; justify-content: space-between; flex-wrap: wrap;}
.culList{padding-top: 30px;}
.culList .cerBox{width: 31%; margin-bottom: 45px; position: relative;}
.culList .cerBox p{position: absolute; bottom: 0; left: 0; width: 100%; height: 45px; line-height: 45px; text-align: center; color: #fff; font-size: 16px; background-color: rgba(0,0,0,0.4);}
/* news */
.sbanner02{background: url(../images/sbanner02.png) no-repeat;}
.newsBox .newList{overflow: hidden;width: 100%;margin-bottom: 50px;transition: all .5s ease;}
.newsBox .newLinkBox{position: relative; display: flex; flex-wrap: nowrap; width: 100%; height: 100%; padding-right: 10%; overflow: hidden; background: #f6f6f6;}
.newsBox .newPicBox{width: 30%; float: left; position: relative; padding-bottom: 20%; overflow: hidden;}
.newsBox .newPicBox img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; transition: all 0.7s ease-in-out;}
.newsBox .centerContentBox {  width: 60%; padding-left: 4%; float: left;}
.newsBox .newTitle{font-size: 30px; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: all .5s ease; padding-top: 58px; font-weight: 600;}
.newsBox .leftTimeBox{width: 150px; height: 150px; text-align: center; font-family: arial; color: #999; transition: all .5s ease; position: absolute; right: 44px; top: 54px; border: 1px solid #ccc;}
.newsBox .newData{font-size: 50px; line-height: 46px; padding-top: 33px; margin-bottom: 10px;}
.newsBox .newSummry{ width: 100%; line-height: 30px; color: #666; margin-top: 15px; text-align: justify; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.newsBox .newList a:hover .newTitle{color: var(--Bcolor); }
.newsBox .newList a:hover img{width:110%;transition: all 0.7s ease-in-out;}
/* contactus */
.sbanner03{background: url(../images/sbanner03.png) no-repeat;}
.contactUs{display: flex; justify-content: space-between;}
.contactUs .factoryinfo,.contactUs .inquiryForm{width: 46%;}
.contactUs div h3{font-family: "Sansation1"; font-size: 50px; color: #333; margin: 50px 0 20px 0;}
.contactUs .factoryinfo .tips{font-family: "Sansation4"; font-size: 16px;}
.contactUs .infos .infoList{font-size: 16px; line-height: 30px; color: #666;}
.contactUs .infos .title{font-weight: bold;margin-top: 15px;color: #555;}
.contactUs .inquiryForm input{width: 100%; height: 45px; padding-left: 20px; border: 0.5px solid #ddd; margin-bottom: 20px; color: #999;}
.contactUs .inquiryForm textarea{width: 100%; padding: 10px 20px; border: 0.5px solid #ddd; margin-bottom: 20px;appearance: none;outline: none; color: #999;}
.contactUs .inquiryForm .btn{border: none; margin: 0 auto; display: block; width: 400px; line-height: 50px; border-radius: 50px; background-color: var(--Bcolor); font-family: "Sansation4"; font-size: 18px; color: #fff;}
.map{margin: 80px 0 50px 0;}
.map img{width: 100%;}

/* faq */
.pos_abs {
	position: absolute;
	text-align: center;
	right: 0;
	top:0;
}

.faqbox {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0;
}

.faqlist {
	    margin-bottom: .65rem;
	    border-radius: 0px;
	    border: 1px solid #f3f3f3;
	    overflow: hidden;
	    transition: all .5s ease;
}

.faqlist.active {
	border-color: #000;
}

.toggle-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	background: #fff;
	padding: 1.1rem;
}

.toggle-title {
	font-size: 1rem;
	font-weight: bold;
	color: #151515;
}

.toggle-button {
	width: 22px;
	height: 22px;
	position: relative;
	cursor: pointer;
	transition: transform 0.3s ease;
	display: inline-block;
	margin-right: 10px;
}

.toggle-button::before,
.toggle-button::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #000;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

.toggle-button::after {
	transform: translateY(-50%) rotate(90deg);
}

.toggle-content {
	display: none;
	padding: .9rem;
	font-size: 1rem;
	line-height: 1.8rem;
}

.expanded.toggle-button::after {
	transform: translateY(-50%) rotate(0deg);
}



@media only screen and (max-width: 1200px){
	.contactUs{display: block;}
	.contactUs .factoryinfo,.contactUs .inquiryForm{width: 100%;}
	.list ul li a{font-size: 20px; line-height: 60px;}
	.cerList {justify-content: normal;}
	.cerList .cerBox{width: 20%; margin-right: 5%; margin-bottom: 60px;}
	.newsBox .centerContentBox{width: 57%;}
	.newsBox .newSummry{line-height: 24px;}
}
@media only screen and (max-width: 769px){
	.contactUs .inquiryForm .btn{width: 100%;}
	.contactUs div h3{font-size: 30px;}
	.list ul li{display: block; border-bottom: 1px solid #ececec;}
	.cerList .cerBox{width: 25%; margin-right: 8%; margin-bottom: 60px;}
	.culList .cerBox{width: 45%;}
	.leftTimeBox{display: none;}
	.newsBox .centerContentBox{width: 70%;}
	.newsBox .newTitle{padding-top: 20px; font-size: 20px;}
	.newsBox .newSummry{line-height: 18px; margin-top: 10px;}
	.newsBox .newLinkBox{padding-right: 5%;}
}