/*
|          (0 0)
+=====oOO====(_)=========+
|       英文版样式        |
+=================oOO====+
|          |__|__|
|           || ||
|          ooO Ooo
*/
@charset "UTF-8";
:root { --section1-header: 750px; }
#nav { left: calc(var(--logo-width) + var(--wrapper) + var(--gap-60)); }
header{--logo-width: 100px;}
header.baion{--logo-width: 52px;}
.footer { --footer-left: 500px; --gap: 80px; }
.footer .footer-left .t { display: flex; align-items: center; gap: var(--gap-40); margin-bottom: 20px; }
.footer .footer-left .logo { background: url(../images/logo.png) left center no-repeat; background-size: contain; width: 120px; height: 85px; }
.footer .item.subscribe { width: 320px; }
.footer .item.subscribe .layui-input-affix { line-height: 40px; }
.footer .item.subscribe p { color: var(--color-6); font-size: 14px; margin-bottom: 20px; }
.footer .item.subscribe .layui-form { border-radius: var(--radius); overflow: hidden; }
.footer .item.subscribe .layui-input-wrap, .footer .item.subscribe .layui-btn { height: 40px; border-radius: 0; }
@media screen and (max-width:1660px) { }
@media screen and (max-width:1540px) {
	.footer { --footer-left: 360px; --gap: 60px; }
	.footer .item.subscribe { width: 240px; }
}
@media screen and (max-width:1370px) {
	.footer { --footer-left: 300px; --gap: 40px; }
}
@media screen and (max-width:1280px) {
	#footer .footer { gap: 40px; }
	.footer { --gap: 0px; }
	.footer .footer-column { flex: 1; justify-content: space-between; }
}
@media screen and (max-width:1024px) {
	.footer-column { width: 100%; }
	.footer-column .item { display: none; }
	.footer-column .item.subscribe { display: block; width: 100%; max-width: 400px; }
}
@media screen and (max-width:860px) {
	.reserve { display: none; }
	#footer .copyright { margin-top: 0; border-top: 0; }
}
@media screen and (max-width:768px) {
	.footer { flex-direction: column; --footer-left: 100% }
	#footer .footer { gap: 12px; }
	.footer .footer-column { padding-top: 0; }
	.footer-column .item.subscribe { max-width: 100%; }
	.footer .social { margin-top: 8px; }
	.footer .footer-column .item-title { margin-bottom: 8px; }
}

/* about */
#about #banner-nav { border-top: 0; border-bottom: solid 1px var(--border-color); }
.about-section2.list { margin-top: var(--gap-60); grid-template-columns: repeat(4, 1fr); gap: var(--gap-30); }
.about-section2.list .list-li { border: 0; border-radius: var(--card-radius); }
.about-section2.list .images { padding-top: 60%; }
.about-section2.list .item-t { height: 100%; display: flex; align-items: center; gap: var(--gap-30); font-size: 1.526em; line-height: 1.5; color: var(--color-3); text-transform: capitalize; }
.about-section2.list .item-t .font-din { font-size: 4.5em; color: var(--main-color); }
.about-section2.list .txt { position: absolute; z-index: 5; left: 0; bottom: 0; right: 0; font-size: 1.5em; font-weight: 500; color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); padding: 32px 12px 12px 12px; display: flex; align-items: flex-end; justify-content: flex-start; font-size: 1.25em; gap: 12px; }
.about-section2.list .txt .font-din { font-size: 2em; color: #fff; line-height: 1; }
#one-two { background: #fff; padding-top: var(--gap-80); padding-bottom: var(--gap-80); }
.one-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-30); }
.one-two .item { display: grid; grid-template-columns: 300px 1fr; align-items: center; border-radius: var(--card-radius); overflow: hidden; border: solid 1px var(--border-color); }
.one-two .item .images { padding-top: 240px; }
.one-two .item .txt-wrap { display: flex; gap: 10px; padding: var(--gap-30) var(--gap-40); flex-direction: column; align-items: flex-start; font-size: 1.125em; color: var(--color-3); }
.one-two .item .txt-wrap .txt * { font-size: 1em; color: var(--color-6); }
.one-two .item.lg { grid-column-end: span 2; grid-template-columns: 600px 1fr; }
.one-two .item.right { direction: rtl }
#one-three { background: var(--page-bg); padding-top: var(--gap-80); padding-bottom: var(--gap-80); }
.one-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-60); margin-top: var(--gap-40); }
.one-three .item { background: #fff; border-radius: var(--card-radius); padding: var(--gap-30); display: flex; align-items: flex-start; gap: 1.5em; }
#one-four { background: url(../images/3-1-4bg.jpg) center center no-repeat; background-size: cover; padding-top: var(--gap-80); padding-bottom: var(--gap-80); }
.one-four { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-40); margin-top: var(--gap-40); }
.one-four .item { border: solid 1px var(--border-color); border-radius: var(--card-radius); padding: var(--gap-20) var(--gap-30); font-size: 1.125em; line-height: 2; color: #fff; }
#one-five { background-color: #fff; padding-top: var(--gap-80); padding-bottom: var(--gap-80); }
.one-five { display: grid; grid-template-columns: 1fr 47%; }
.one-five .map { display: block; width: 100%; }
.one-five .item-wrap { display: flex; flex-direction: column; gap: 32px; }
.one-five .item-wrap .item { display: flex; flex-direction: column; gap: 16px; }
.one-five .item-wrap .item-t { font-size: 1.5em; font-weight: 500; color: var(--color-3); }
.one-five .item-wrap .list1, .one-five .item-wrap .list2, .one-five .txt-wrap .list3 { color: var(--color-6); }
.one-five .item-wrap .list1, .one-five .item-wrap .list2 { display: flex; flex-flow: row wrap; gap: 16px; }
.one-five .item-wrap .list1 .p { padding: 8px 16px; border-radius: var(--card-radius); border: solid 1px var(--border-color); }
.one-five .item-wrap .list2 .p { display: flex; align-items: center; padding: 8px 16px; border-radius: var(--card-radius); gap: 12px; border: solid 1px var(--border-color); }
#choose { margin-bottom: calc(0px - var(--gap-80)); }

/* Support */
.process-wrap { display: flex; flex-flow: row wrap; gap: 30px 20px; }
.process-wrap img { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); border-radius: 50%; }
.process-wrap .item { display: flex; align-items: center; gap: 12px; font-size: 1.25em; color: var(--color-3); }
.process-wrap .item img { width: var(--process-wrap); height: var(--process-wrap); }
.process-wrap .arrow { padding-top: 28px; }
.oem1 { display: grid; grid-template-columns: 47% 1fr; align-items: center; gap: var(--gap-60); margin-top: var(--gap-20); margin-bottom: var(--gap-80); }
.oem1 .images { padding-top: 56.25%; }
.oem1 .txt { margin-top: 16px; margin-bottom: var(--gap-40); }
#oem2 { background: url(../images/oem2-bg.jpg) center top no-repeat; background-size: cover; padding-top: var(--gap-80); padding-bottom: var(--gap-80); }
.oem2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-60); margin-top: var(--gap-60); }
.oem2 .item { background: #fff; border-radius: var(--card-radius); padding: var(--gap-30); display: flex; align-items: flex-start; gap: var(--gap-30); }
.oem2 .item img { width: 170px; height: 170px; border-radius: var(--radius); }
.oem2 .txt-wrap { display: flex; flex-direction: column; gap: 12px; }
.oem2 .txt-wrap .t { font-size: 1.125em; color: var(--color-3); }
.oem2 .txt-wrap .txt { color: var(--color-6); line-height: 1.8; }
.oem2 .txt-wrap .flex { display: flex; gap: 12px; flex-flow: row wrap; }
.oem2 .txt-wrap .flex .p { font-size: 14px; height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 15px; color: #fff; background: var(--main-color); }
#oem3 { background: #fff; padding-top: var(--gap-80); padding-bottom: var(--gap-80); }
.oem3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-60); margin-top: var(--gap-60); }
.oem3 .item { display: flex; flex-direction: column; gap: 12px; }
.oem3 .item .t { display: flex; align-items: center; gap: 12px; font-size: 1.125em; }
.oem3 .item .t img { width: 36px; height: 36px; }
#oem4 { padding-top: var(--gap-80); }
.oem4 { margin-top: var(--gap-40); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-60); }
.oem4 .contact { border: solid 1px var(--border-color); border-radius: var(--card-radius); padding: var(--gap-30); background: #fff; display: flex; flex-direction: column; gap: 12px; }
.oem4 .contact .t { font-size: 1.5em; font-weight: 500; color: var(--color-3); margin-bottom: 8px; }
.oem4 .contact .p { display: flex; gap: 8px; }
.list.download { grid-template-columns: repeat(2, 1fr); gap: var(--gap-60); }
.list.download .list-li { display: grid; grid-template-columns: 37% 1fr; gap: var(--gap-30); background: #fff; border-radius: var(--card-radius); }
.list.download .images { padding-top: 100%; }
.list.download .list-txt { padding: var(--gap-60) 0; flex-direction: column; justify-content: space-between; }
.list.video { grid-template-columns: repeat(3, 1fr); gap: var(--gap-60); }
.list.video .list-li { border-radius: var(--card-radius); background: #fff; }
.list.video .images { padding-top: 56.25%; }

/* Contact */
.contact-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-20); margin-top: var(--gap-40); margin-bottom: var(--gap-40); }
.contact-info .contact-item { background: #fff; border-radius: var(--card-radius); padding: 1em 1.5em; display: flex; justify-content: flex-start; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.contact-info .contact-item img { width: 32px; height: 32px; }
.contact-info .contact-item.lg { grid-column-end: span 2; }
.contact-info .contact-item .txt { color: var(--color-3); display: flex; flex-flow: row wrap; gap: 8px; align-items: center; }

/* 首页 */
#index-section2, #index-section2 .wrapper { display: flex; flex-direction: column; }
#index-section2 { padding-top: var(--gap-80); padding-bottom: var(--gap-80); gap: var(--gap-80); }
#index-section2 .wrapper { gap: var(--gap-40); }
.index-section2 .swiper-slide { border-radius: var(--card-radius) }
.index-section2 .swiper-slide .photo { width: 100%; height: 100%; }
.index-section2 .list-txt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--gap-30); display: flex; flex-direction: column; justify-content: space-between; }
.index-section2 .list-txt .name { font-size: 1.5em; font-weight: 500; color: var(--color-3); }
.index-section2 .list-txt .btn { display: flex; justify-content: center; align-items: center; border-radius: var(--btn-radius); width: 125px; height: 46px; gap: 12px; border: solid 1px var(--border-color); }
.index-section2 .list-txt .btn img { width: 5px; height: 10px; }
.index-section2 .swiper-slide:hover .list-txt .name { color: var(--main-color); }
.index-section2 .swiper-slide:hover .btn { background-color: #fff; }
#index-products { background: #fff; }
.index-section#index-products { padding-bottom: var(--gap-80); }
#index-certification { padding-top: var(--gap-80); padding-bottom: var(--gap-80); }
#index-certification .tab-pane { display: grid; grid-template-columns: 47% 1fr; gap: var(--gap-60); }
#index-certification .tab-pane .tab { flex-direction: column; gap: 20px; }
#index-certification .tab-pane .tab .item { font-size: 1em; padding: 8px 12px; border: solid 1px var(--border-color); border-radius: var(--btn-radius); }
#index-certification .tab-pane .tab .item.current { background: url(../images/arrow-right-white.svg) calc(100% - 16px) center no-repeat var(--main-color); background-size: 9px 18px; border-color: var(--main-color); color: #fff; padding-right: 30px; }
#index-certification .tab-pane .pane .pane-item { padding: 0; height: 100%; }
#index-certification .tab-pane .pane .pane-item img { margin: 0; max-width: 100%; }
#index-certification .certification-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; }
#index-certification .certification-wrap .images { padding-top: 0; width: 100%; height: auto; box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05); border: 10px solid; border-image: radial-gradient(100% 100% at 50% 0%, #E6DFBE 0%, #FFE1A6 53.82%, #FECE72 80.12%) 1; background-color: #fff; }
#index-certification .certification-wrap .images img { position: relative; object-fit: contain; max-width: 520px; max-height: 400px; }
#index-certification .certification-wrap .card { position: relative; width: 60%; display: flex; flex-direction: column; justify-content: end; align-items: center; margin-bottom: -30px; }
#index-certification .certification-wrap .shadow { background: url(../images/certification-shadow.png) center center no-repeat; width: 77px; height: 58px; background-size: contain; position: absolute; bottom: 0; right: 0; margin-right: -77px; }
#index-certification .certification-wrap .base { display: block; width: 100%; height: auto; }
#index-OEM { background: url(../images/section-OEM.jpg) center top no-repeat; background-size: cover; padding-top: var(--gap-80); padding-bottom: var(--gap-80); }
#index-OEM .web-title { margin-bottom: var(--gap-40); }
#index-OEM .section1, #index-OEM .section2 { margin-bottom: var(--gap-60); }
#index-OEM .section1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-60); }
#index-OEM .section1 .item { background: #fff; border-radius: var(--card-radius); padding: var(--gap-30); display: flex; align-items: flex-start; gap: 1.5em; }
#index-OEM .section2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: #fff; border-radius: var(--card-radius); overflow: hidden; }
#index-OEM .section2 .item { position: relative; }
#index-OEM .section2 .images { padding-top: 100%; }
#index-OEM .section2 .txt { position: absolute; z-index: 5; left: 0; bottom: 0; right: 0; font-size: 1.5em; font-weight: 500; color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); padding: 32px 12px 12px 12px; text-align: center; }
#index-faq { background-color: var(--page-bg); padding-top: var(--gap-80); padding-bottom: var(--gap-80); }

/* 适配 */
@media screen and (max-width:1370px) {
	.one-two .item .images { padding-top: 0; height: 100%; }
}
@media screen and (max-width:1280px) {
	:root { --process-wrap: 60px; --section1-header: 600px; }
	.process-wrap { gap: 12px 0; }
	.process-wrap .item { flex-direction: column; }
	.process-wrap .arrow { padding-top: 15px; }
	#index-certification .certification-wrap .card { margin-bottom: -15px; }
	.about-section2.list { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width:1024px) {
	#index-OEM .section2 { grid-template-columns: repeat(2, 1fr); }
	#index-OEM .section2 .images { padding-top: 56.25%; }
	#index-OEM .section2 .txt { font-size: 1.25em; }
	.about-section2.list { grid-template-columns: repeat(2, 1fr); }
	.about-section2.list .item-t { font-size: 1.25em; }
	.about-section2.list .item-t .font-din { font-size: 3em; }
	.one-two { grid-template-columns: 1fr; }
	.one-two .item.lg { grid-column-end: span 1; }
	.one-two .item { min-height: 140px; }
	.one-two .item.right { direction: ltr; }
	.one-two .item, .one-two .item.lg { grid-template-columns: 36% 1fr; }
	.list.video { grid-template-columns: repeat(2, 1fr); }
	.oem4, .list.download { grid-template-columns: 1fr; }
}
@media screen and (max-width:860px) {
	:root { --process-wrap: 60px; --section1-header: 50vh; }
	header{--logo-width: 72px;}
	#nav { left: -100%; }
	#index-certification .tab-pane { grid-template-columns: 1fr; }
	#index-certification .tab-pane .tab { grid-row-start: 2; }
	.process-wrap .arrow { padding-top: 12px; }
	#index-OEM .section1 { grid-template-columns: 1fr; }
	.one-three, .one-four, .one-five { grid-template-columns: 1fr; }
	.oem2 { grid-template-columns: 1fr; }
	.oem3 { grid-template-columns: repeat(2, 1fr); }
	.contact-info { grid-template-columns: 1fr; }
	.contact-info .contact-item.lg { grid-column-end: span 1; }
}
@media screen and (max-width:768px) {
	.process-wrap { flex-direction: column; }
	.process-wrap .item { flex-direction: row; }
	.process-wrap .arrow { padding-top: 0; padding-left: 12px; }
	.process-wrap .arrow img { transform: rotate(90deg); }
	.about-section2.list { grid-template-columns: repeat(1, 1fr); }
	.oem1 { grid-template-columns: 1fr; }
	#index-certification .tab-pane .tab{gap: 12px;}
}
@media screen and (max-width:640px) {
	.oem3,.list.video { grid-template-columns: 1fr; }
}
@media screen and (max-width:480px) {
	#index-OEM .section2 { grid-template-columns: repeat(1, 1fr); }
}