/*
           (0 0)
+=====oOO====(_)=========+
|   Powered By AnXin     |
|   Tel: 0572-5220701    |
|   Creation:2023.12.22  |
+=================oOO====+
           |__|__|
            || ||
           ooO Ooo
*/
@charset "UTF-8"; body, button, dd, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, s, td, textarea, th, ul { margin: 0; padding: 0; list-style: none; font-family: Microsoft YaHei, sans-serif; } body, html { position: relative; } h1, h2, h3, h4, h5, h6 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; text-transform: capitalize } button, input, select, textarea { font-size: 100%; outline: 0 } a { color: #369; text-decoration: none } .clearfix::after { content: "\0020"; display: block; height: 0; clear: both; font-size: 0; visibility: hidden } .clearfix { zoom: 1 } .clear { clear: both; font-size: 1px; width: 1px; height: 0; visibility: hidden; line-height: 0 } .fl { float: left } .fl, .fr { display: inline } .fr { float: right } em, i { font-style: normal } .none { display: none } .block { display: block } .inline { display: inline-block !important; margin-right: 10px } img { border: 0; object-fit: cover } table { border-collapse: collapse; border: 0; border-collapse: collapse; } ::selection { background: #ddd; color: #111 } ::-webkit-scrollbar { width: 10px; height: 10px } ::-webkit-scrollbar-thumb { background-color: rgba(50, 50, 50, .25); border: 2px solid transparent; border-radius: 0px; background-clip: padding-box } ::-webkit-scrollbar-thumb:hover { background-color: rgba(50, 50, 50, 0.5) } ::-webkit-scrollbar-track { background-color: rgba(50, 50, 50, .05) } * { box-sizing: border-box } input, textarea { border: 0 } input::placeholder, textarea::placeholder { opacity: .5 } input:focus { border: 0; outline: 0; box-shadow: 0 } .tipMain { position: fixed; bottom: 0; left: 0; z-index: 9999; width: 100%; border-top: 1px solid #ccc; background: #fff; font-size: 13px; line-height: 40px } .tipMain, .tipMain .close { height: 40px; text-align: center } .tipMain .close { position: absolute; top: 0; right: 10px; width: 40px; color: red; font-size: 18px; font-family: Arial, Helvetica, sans-serif; cursor: pointer } span.spanleft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block } a, a:hover, ::after, ::before, .images, .images img, .list-li, .list-txt, .list-txt .name, .mobileMenu b, header, header *, #banner, #banner img, .arrow { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

/*通用*/
* { font-size: 14px; font-weight: 400; box-sizing: border-box; }
body { background-color: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.wrapper { margin: 0 auto; position: relative; }
.text { padding: 0; }
.text, .text * { color: #333; font-size: 14px; line-height: 2; word-wrap: break-word; }
.text p:not(:last-child) { margin-bottom: 30px; }
.text img { display: block; opacity: 1 !important; }
.text::after { content: ""; display: table; clear: both; }
.txt-info { overflow: hidden; display: -webkit-box !important; -webkit-box-orient: vertical; white-space: normal !important; word-wrap: normal !important; }
.txt-info * { -webkit-box-orient: horizontal; width: auto; display: inline; padding: 0; margin: 0; background: none !important; font-family: sans-serif !important; white-space: normal !important; word-wrap: normal !important; word-break: break-all !important; }
.txt-info img { display: none !important; opacity: 0; }
.arrow { position: relative; z-index: 2; width: 10px; height: 10px; }
.arrow::before, .arrow::after { content: ""; position: absolute; display: block; }
.arrow::before { width: 4px; height: 4px; border-right: 1px solid #999; border-top: 1px solid #999; pointer-events: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.arrow::after { width: 12px; height: 0; border-top: 1px solid #999; top: 50%; left: 50%; margin-top: -1px; margin-left: -9px; display: none; }
.arrow.arrow-white::before { border-right-color: #fff; border-top-color: #fff; }
.arrow.arrow-white::after { border-top-color: #fff; }
.body-overlay { position: fixed; left: 0; top: 0px; right: 0; bottom: 0; z-index: 1; width: 100%; height: 100vh; display: none; background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/*更多*/
.more { position: relative; display: inline; overflow: hidden; width: 56px; }
.more a { position: relative; display: flex; justify-content: space-between; align-items: center; height: 36px; }
.more a:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #333; }
.more span { position: relative; z-index: 2; font-size: 14px; font-weight: 400; color: #333; opacity: 0.5; text-transform: uppercase; display: block; text-align: center; }
.more .arrow:after { display: none }
.more .arrow:before { width: 4px; height: 4px; border-width: 1px; }
.more a:hover span { opacity: 1; }
.more a:hover:after { width: 100%; }

/*******************************
-------[=图片切换-------
********************************/
.swiper-container { width: 100%; height: 100%; }
.swiper-container img { display: block; width: 100%; height: 100%; }
.swiper-btn { position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); display: block; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0, 0, 0, 0.5); }
.swiper-btn:hover { background: var(--main-color); }
.swiper-btn .arrow::before { width: 8px; height: 8px; border-color: #fff; border-width: 2px; }
.swiper-btn.swiper-button-disabled { cursor: not-allowed }
.swiper-btn.next { right: 0; }
.swiper-btn.next .arrow { margin-right: 5px; }
.swiper-btn.prev { left: 0; }
.swiper-btn.prev .arrow { transform: rotate(180deg); margin-left: 5px; }
.swiper-btn .arrow::after { display: none }
.swiper-pagination { bottom: 20px; display: flex; align-items: center; justify-content: center; }
.swiper-pagination-bullet { background: #E5E5E5; opacity: 1 !important; width: 8px; height: 8px; margin: 0 8px; }
.swiper-pagination-bullet-active { background: transparent; width: 14px; height: 14px; border: 2px solid var(--main-color); }
.swiper-tool { position: relative; display: flex; align-items: center; justify-content: center; padding-top: 50px; padding-bottom: 50px; }
.swiper-tool .swiper-btn { position: relative; margin: 0 15px; transform: translateY(0%); }

/*******************************
-------[=select-------
********************************/
.select { position: relative; height: 36px; }
.select:after { content: ""; display: block; width: 6px; height: 6px; border-right: 1px solid #333; border-bottom: 1px solid #333; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); pointer-events: auto; position: absolute; z-index: 2; right: 20px; top: 16px; }
.select .placeholder { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; line-height: 46px; padding: 0 15px; box-sizing: border-box; cursor: pointer; text-align: left }
.select.is-open:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.select ul { position: absolute; z-index: 100; overflow: hidden; width: 100%; top: 100%; left: 0; margin: 0 0 0 -1px; padding: 0; max-height: 240px; overflow-x: hidden; overflow-y: auto; transition: all 0.3s ease; opacity: 0; visibility: hidden; }
.select.is-open ul { opacity: 1; visibility: visible; }
.select ul li { display: block; float: none !important; width: 100% !important; margin: 0; cursor: pointer; border-bottom: solid 1px #ECECEC; padding: 0 0 0 15px; box-sizing: border-box !important; text-align: left; font-size: 15px; line-height: 46px; }
.select ul li a { color: #333; display: block; }
.lang { display: flex; align-items: center; }
.lang img { width: 14px; height: 14px; margin-right: 6px; }
.lang .select { width: 70px; height: 20px; display: flex; align-items: center; justify-content: flex-end; }
.lang .select .placeholder { padding: 0; line-height: 20px; color: #333; }
.lang .select:after { position: relative; right: 0; top: 0; }
.lang .select ul { top: 32px; background-color: #fff; margin-left: -20px; width: 90px; }
.lang .select ul li { border-bottom: 0; font-size: 14px; padding: 0; text-align: center; }

/*******************************
-------[=返回顶部-------
********************************/
.toTop { position: fixed; z-index: 9; bottom: 0px; right: 0px; width: 50px; height: 50px; text-align: center; line-height: 50px; padding: 0; background-color: #222; cursor: pointer; display: none; opacity: 0.7 !important; }
.toTop:before { content: ""; margin-top: 22px; margin-left: 18px; display: block; width: 10px; height: 10px; border-right: 2px solid #fff; border-top: 2px solid #fff; pointer-events: auto; transform: rotate(-45deg); }
.toTop:hover { background: var(--main-color); opacity: 1 !important }
.toTop:active { background: #000; -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); }

/*******************************
-------[=列表-------
********************************/
.images { overflow: hidden; position: relative; z-index: 1; width: 100%; height: 0; padding: 0px; margin: 0; }
.images img { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: 1; left: 0; top: 0; }
.stretching::after { content: ""; display: block; position: absolute; z-index: 10; pointer-events: auto; background-color: rgba(0, 0, 0, 0); width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; }
.list { position: relative; z-index: 1; display: flex; flex-flow: row wrap; }
.list .list-li { position: relative; }
.list-txt { box-sizing: border-box; text-transform: capitalize; }
.list-txt .name { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block }
.list-txt .txt-info { -webkit-line-clamp: 2; }
.list-txt .txt-info, .list .list-txt .txt-info * { font-size: 14px; line-height: 2; color: #666; }
.list .list-li:hover .list-txt .name { color: var(--main-color); }
.list .list-li:hover .images img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
.swiper-wrapper.list { flex-flow: row; }

/*******************************
-------[=页码-------
********************************/
.main-page { position: relative; z-index: 1; width: 100%; padding: 0; text-transform: capitalize; display: flex; justify-content: center; align-items: center; margin-top: 50px; margin-bottom: 0px; }
.main-page a { padding: 8px 15px; font-size: 16px; line-height: 22px; background: #FFFFFF; border: 1px solid #ECECEC; color: #333; margin-right: 16px; }
.main-page a.disabled { border: 0; cursor: not-allowed; }
.main-page a.disabled:hover { background-color: #fff; color: #333; }
.main-page a.active, .main-page a:hover { border-color: var(--main-color); color: var(--main-color); }
.main-page .page { display: flex; }
@media screen and (max-width:860px) {
	.main-page a { padding: 5px 12px; font-size: 14px; line-height: 20px; margin-right: 6px; margin-left: 6px; }
	.main-page .page { justify-content: center; width: 100%; }
}

/*******************************
-------[=页面底部------
********************************/
#footer { background-color: #F5F7FA; position: relative; z-index: 2; padding-top: 60px; }
#footer .footer { display: flex; align-items: flex-start; justify-content: space-between; }
.footer .logo { width: 182px; height: 51px; background: url(../images/logo-footer.png) left center no-repeat; }
.footer .items { flex: 1; display: flex; justify-content: flex-end; align-items: flex-start; }
.footer .items .item { display: flex; flex-direction: column; margin-left: 180px; }
.footer .items .item .t { width: 100%; font-size: 14px; color: #333; font-weight: 600; line-height: 20px; text-transform: uppercase; margin-bottom: 32px; }
.footer .items .item p { display: flex; align-items: flex-start; margin-bottom: 16px; color: #666; line-height: 20px; }
.footer .items .item a { color: #666; }
.footer .items .item a:hover { color: #333; }
.footer .items .grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 16px; }
.footer .items .grid .t { grid-column-end: span 2; margin-bottom: 16px; }
.footer .items .four { width: 130px; }
.footer .items .four img { width: 130px; height: 130px; }
#footer .copyright { display: flex; align-items: center; justify-content: space-between; padding-top: 80px; padding-bottom: 24px; position: relative; }
#footer .copyright p, #footer .copyright a { line-height: 2.15; color: #666; display: flex; align-items: center; }
#footer .copyright a:hover { color: #333; border-top: solid 1px rgba(0, 0, 0, 0.1); }
#footer .record, #footer .record a { display: flex; align-items: center; justify-content: flex-start; }
#footer .record a { margin-right: 16px; }
#footer .record img { margin: 0 8px !important; }
@media screen and (max-width:1540px) {
	#footer { padding-top: 48px; }
	.footer .items .grid { column-gap: 24px; }
	.footer .items .item { margin-left: 10%; }
	#footer .copyright { padding-top: 60px; }
}
@media screen and (max-width:1280px) {
	.footer .items .grid { grid-template-columns: 1fr; column-gap: 0 }
	.footer .items .grid .t { grid-column-end: span 1; }
	#footer .copyright { padding-top: 40px; }
}
@media screen and (max-width:1024px) {
	#footer { padding-top: 32px; }
	.footer .logo { display: none; }
	.footer .items { justify-content: space-between; }
	.footer .items .item { margin-left: 0%; }
	.footer .items .item .t { margin-bottom: 12px; }
	#footer .copyright { padding-top: 16px; padding-bottom: 16px; }
	#footer .copyright { flex-direction: column; }
	#footer .copyright p, #footer .copyright a { margin-bottom: 0; }
}
@media screen and (max-width:768px) { 
	#footer{border-top:solid 1px #ccc;}
}
@media screen and (max-width:640px) {
	#footer .record { flex-direction: column; }
	#footer .record a { margin-right: 0; }
	#footer { padding-top: 0; }
	#footer .footer { display: none; }
	.footer .item .t { text-align: center; margin-bottom: 12px; }
}

/*******************************
-------[=页面------
********************************/
header, #header { width: 100%; }
.nav, .nav .nav-ul, .nav .mainlevel, .nav .mainlevel a { height: 100%; }
#header .wrapper { display: flex; justify-content: space-between; align-items: center; }
header { position: fixed; top: 0; z-index: 20; }
#nav { position: absolute; left: 0; bottom: 0; }
.nav .nav-ul { display: flex; align-items: center; }
.nav .mainlevel { position: relative; }
.nav .mainlevel .mainlevel-a { text-decoration: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; text-transform: capitalize; }
.nav .mainlevel::after, .nav .mainlevel::before { content: ""; z-index: 1; position: absolute; }
.nav .mainlevel::after { width: 1px; height: 12px; right: 0; top: 50%; transform: translate(0px, -50%); background: #000; opacity: 0; }
.nav .mainlevel:last-child::after { display: none; }
.nav .mainlevel::before { width: 0px; height: 2px; background-color: var(--main-color); left: 50%; top: 0; transform: translateX(-50%); }
.nav .mainlevel .mainlevel-a span { position: relative; z-index: 2; white-space: nowrap; text-transform: capitalize; }
.nav .mainlevel.active::before, .nav .mainlevel:hover::before, .nav .mainlevel.active.cuf:hover::before { width: 100%; }
.nav .mainlevel.active.cuf::before { width: 0; }
.nav .mainlevel ul { position: absolute; z-index: 999; left: 50%; width: 100%; min-width: 120px; transform: translate(-50%, 20px); opacity: 0; visibility: hidden; }
.nav .mainlevel ul::before, .nav .mainlevel ul::after { content: ""; display: block; position: fixed; top: 80px; display: none; }
.nav .mainlevel ul::after { background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05); z-index: 3; }
.nav .mainlevel .sub-mainlevel { display: block; list-style: none; padding: 0; background-color: #fff; border-radius: 0; box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1); }
.nav .mainlevel .sub-mainlevel::before { content: ""; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; position: absolute; top: -7px; left: 50%; margin-left: -7px; }
.nav .mainlevel .sub-mainlevel a { white-space: nowrap; display: block; color: #333; padding: 12px 16px; text-align: center; text-transform: capitalize; }
.nav .mainlevel .sub-mainlevel a:hover { color: var(--main-color); background: #f0f0f0; }
.nav .mainlevel:hover ul { opacity: 1; visibility: visible; transform: translate(-50%, 0px); }
header { transform: translateY(0); background-color: #fff; }
header.baion { transform: translateY(-110px); }
header.transformY { transform: translateY(-100%); }
.web-title { width: 100%; position: relative; padding-top: var(--title-top); padding-bottom: var(--title-bottom); display: flex; justify-content: flex-start; align-items: flex-end; }
.web-title .main { font-size: 24px; font-weight: 600; color: #000000; line-height: 37px; letter-spacing: 1px; }
.web-title .secondary { font-size: 14px; font-weight: 400; color: rgba(0, 0, 0, 0.3); line-height: 20px; margin-left: 10px; }
.web-title .more { position: absolute; right: 0; bottom: var(--title-bottom); }
.web-title.white .main, .web-title.white .secondary { color: #fff; }
.web-title.center { flex-direction: column; align-items: center; }
.web-title.center .secondary { margin-left: 0; }
.place { width: 100%; padding-bottom: calc(var(--title-bottom) / 2); }
.place, .place a { display: flex; flex-flow: row wrap; align-items: center; }
.place { line-height: 43px; color: #333; text-transform: capitalize; }
.place a { color: #666; margin-left: 8px; }
.place a:after { content: ""; width: 4px; height: 4px; border-right: 1px solid #666; border-top: 1px solid #666; pointer-events: auto; transform: rotate(45deg); margin-left: 10px; margin-right: 10px; }
.place a:hover { color: var(--main-color); }

/*关于我们*/
.about-section1 { display: flex; flex-flow: row wrap; }
.about-section1 img { width: 462px; height: 362px; }
.about-section1 .txt { flex: 1; padding-left: 50px; }
.about-section1 .txt .t { font-size: 24px; font-weight: 600; color: #333333; line-height: 1.4; margin-bottom: 36px; }
.about-section1 .txt .t span { display: block; font-size: 14px; color: rgba(51, 51, 51, 0.3); line-height: 1.4; }
.about-section1 .more { justify-content: flex-start; }
#about-section2 { position: relative; }
#about-section2 .images { padding-top: 29%; }
#about-section2 .about-section2 { background: #f7f7f7; padding-top: 50px; padding-bottom: 50px; }
#about-section2 .about-section2 .wrapper { padding-left: 214px; }
#about-section2 .about-section2 .txt .p1 { border-bottom: solid 1px #ECECEC; padding-bottom: 20px; margin-bottom: 20px; font-size: 20px; font-weight: 500; color: var(--main-color); }
#about-section2.index .about-section2 .txt .txt-info {height: 56px; -webkit-line-clamp: 2; margin-bottom: 24px; }
#about-section2 .about-section2 .txt .txt-info, #about-section2 .about-section2 .txt .txt-info * { font-size: 14px; line-height: 2; color: rgba(51, 51, 51, 0.5); }
#about-section2 .about-section2 .more { width: 70px; display: block; }
#about-section2 .swiper-pagination { bottom: 32px; left: 50%; margin-left: -750px; }
#about-section2.index .swiper-pagination { bottom: 210px;}

/*产品*/
.products-head { display: flex; align-items: center; justify-content: space-between; padding-top: var(--title-top); padding-bottom: var(--title-bottom); }
.products-head .web-title { padding-top: 0; padding-bottom: 0; flex: 1; }
.products-head .sub-nav { width: auto; }
.products-head .sub-nav .swiper-wrapper { justify-content: flex-end; }
.products-head .sub-nav .swiper-slide { width: auto; margin-top: 0; border-radius: 16px; border: 1px solid #F2F2F2; padding: 6px 22px; margin-left: 14px; }
.products-head .sub-nav .swiper-slide a { color: #828282; }
.sub-nav .swiper-slide.active { background-color: var(--main-color); }
.sub-nav .swiper-slide.active a { color: #fff; }
.list.pro-list { margin: var(--list-gap-m) }
.list.pro-list .list-li { padding: var(--list-gap-p); width: var(--products-column); }
.list.pro-list .images { padding-top: 100%; border: solid 1px #ececec; }
.list.pro-list .images img { object-fit: contain; }
.list.pro-list .list-txt { padding-top: 16px; }
.list.pro-list .list-txt .name { font-size: 16px; color: #333333; line-height: 22px; text-align: center; text-transform: uppercase; }

/*产品详细*/
.product-detailed { display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; padding-top: var(--title-top); padding-bottom: var(--title-bottom); }
.product-detailed .tab-wrap .tab-card { display: none; }
.product-detailed .tab-wrap .tab-card.active { overflow: hidden; display: flex; flex-direction: column; }
.product-detailed .product-img { width: 570px; }
.big-img { flex: 1; margin-bottom: 30px; height: 660px; background: #fff; border: 1px solid #eee }
.big-img .images { padding-top: 660px; }
.big-img .images img, .small-img img { object-fit: contain; width: 88%; height: 88%; margin: 6%; }
.small-img { padding: 0; width: 100%; height: 130px; order: 2; }
.small-img .swiper-slide { background: #fff; border: 1px solid #eee; cursor: pointer; }
.small-img .swiper-slide-thumb-active { border-color: var(--main-color); position: relative; }
.product-detailed .product-txt { padding-left: 50px; padding-bottom: 160px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.product-detailed .product-txt .name { font-size: 26px; font-weight: 400; color: #000000; line-height: 37px; text-transform: uppercase; }
.product-detailed .product-txt .category { font-size: 16px; color: var(--main-color); margin-top: 14px; margin-bottom: 30px; }
.product-detailed .product-txt .price { font-size: 30px; font-weight: 600; color: #000000; line-height: 42px; }
.product-detailed .product-txt .info { margin-top: 30px; }
.product-detailed .product-txt .info .p, .product-detailed .product-txt .color .t { font-size: 16px; color: #666666; line-height: 22px; text-transform: uppercase; margin-bottom: 14px; }
.product-detailed .product-txt .color { margin-top: 60px; }
.product-detailed .product-txt .color .t { margin-bottom: 20px; }
.product-detailed .product-txt .color .tab-t { display: flex; flex-flow: row wrap; }
.product-detailed .product-txt .color .tab-t li { margin-right: 16px; width: 36px; height: 36px; cursor: pointer; position: relative; }
.product-detailed .product-txt .color .tab-t li::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: -4px; border: solid 1px #fff; }
.product-detailed .product-txt .color .tab-t li.active::before { border-color: var(--main-color); }
.product-detailed .product-txt .btn { width: 132px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--main-color); }
.product-detailed .product-txt .btn span { color: #fff; font-size: 14px; }
@media screen and (max-width:1366px) {
	.big-img { margin-left: 24px; }
	.product-detailed .product-txt { padding-left: 64px; padding-bottom: 95px; }
}
@media screen and (max-width:1280px) {
	.product-detailed .product-img { width: 500px; }
	.product-detailed .tab-wrap .tab-card.active { flex-direction: column; height: auto; }
	.big-img { flex: none; width: 100%; margin-left: 0; margin-bottom: 15px; }
	.small-img { order: 2; width: 100%; height: 80px }
	.small-img img{margin: 10px; width: calc(100% - 20px); height: 60px;}
}
@media screen and (max-width:1024px) {
	.big-img { height: calc(100vh - 260px); }
	.big-img .images { padding-top: calc(100vh - 260px);; }
	.product-detailed .product-txt { padding-left: 32px; }
	.product-detailed .product-txt .name { font-size: 22px; }
}
@media screen and (max-width:900px) {
	.product-detailed .product-img { width: 400px }
	.product-detailed .product-txt .color img { width: 60px; height: 60px; }
	.product-detailed .product-txt .color { margin-top: 24px; }
}
@media screen and (max-width:800px) {
	.product-detailed { flex-direction: column; }
	.big-img .images { padding-top: 0; height: 100%; }
	.product-detailed .product-img { width: 100%; }
	.product-detailed .product-txt { padding-left: 0; padding-top: 24px; padding-bottom: 0; }
	.product-detailed .product-txt .category { margin-top: 8px; margin-bottom: 12px; }
	.product-detailed .product-txt .info { margin-top: 12px; }
	.product-info { padding-bottom: 24px; }
}
@media screen and (max-width:700px) {
	.product-detailed .product-txt .btn { width: 100%; }
}

/*news*/
.list[data-news] { margin: var(--news-gap-m); padding-top: var(--title-top); }
.list[data-news] .list-li { padding: var(--news-gap-p); width: var(--news-column); }
.list[data-news] .images, .index-section4 .images { padding-top: 48%; }
.list[data-news] .list-txt, .index-section4 .list-txt { padding-top: 40px; }
.list[data-news] .list-txt .name, .index-section4 .list-txt .name { font-size: 16px; font-weight: 500; color: #333; line-height: 22px; margin-bottom: 15px; }
.list[data-news] .list-txt .txt-info, .index-section4 .list-txt .txt-info { -webkit-line-clamp: 2; }
.list[data-news] .list-txt .txt-info, .list[data-news] .list-txt .txt-info *, .index-section4 .list-txt .txt-info, .index-section4 .list-txt .txt-info * { font-size: 14px; color: #666; line-height: 2; }
.list[data-news] .list-txt .date, .index-section4 .list-txt .date { font-size: 22px; font-weight: 600; color: #666; line-height: 1.4; border-top: solid 1px #D8D8D8; padding-top: 24px; margin-top: 24px; }
.list[data-news] .list-li:hover .list-txt .date, .index-section4 .swiper-slide:hover .list-txt .date { color: var(--main-color); border-color: var(--main-color); }
.article { display: flex; flex-direction: column; position: relative; width: 100%; padding: 0 24px 24px 24px; }
.article .article-info { width: 100%; border-bottom: 1px solid #ececec; background-color: #fff; padding-top: 24px; }
.article .article-info .h1 { font-size: 24px; font-weight: 600; text-align: left; color: #333; line-height: 34px; }
.article .article-info .date { margin-top: 15px; margin-bottom: 32px; text-align: left; font-size: 14px; font-weight: 600; color: #444; line-height: 20px; }
.article-body { width: 100%; padding-top: 32px; }
.article-txt, .article-txt * { font-family: Microsoft YaHei, sans-serif; font-size: 14px; line-height: 30px; color: #444; }
.article-txt p { margin-bottom: 20px; text-indent: 2em; }
.article-txt img { width: auto !important; height: auto !important; margin: 40px auto !important; max-width: 100%; display: block; }

/*联系*/
.contact { width: 100%; height: 350px; display: flex; }
.contact .txt { flex: 1; animation: fadeUp 1s ease 0s both; }
.contact .txt .t { font-size: 20px; font-weight: 600; color: #333333; line-height: 1.4; margin-bottom: 30px; }
.contact .txt .item { display: flex; flex-flow: row wrap; font-size: 16px; color: #666666; line-height: 2; margin-bottom: 12px; }
.contact .txt .item span { font-size: 16px; line-height: 2; color: #333333; white-space: nowrap; }
.contact .txt .item a { font-size: 16px; line-height: 2; color: var(--main-color); margin-left: 20px; }
.contact .map { width: 57%; height: 100%; animation: fadeUp 1s ease 1s both; }
.contact .map img { width: 100%; height: 100%;  }
@keyframes fadeUp {
	0% { margin-top: 100px; opacity: 0; }
	100% { margin-top: 0px; opacity: 100%; }
}

/*页面*/
#header { background-color: #fff; }
#header { height: 110px; }
#logo { overflow: hidden; width: 188px; height: 51px; }
.logo, .logo a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo a img {display:block; width: auto; height: 100%;}
.logo-txt { flex: 1; padding-left: 15px; font-size: 24px; font-weight: 600; color: var(--main-color); line-height: 33px; }
.logo-txt span { display: block; font-size: 10px; font-weight: 400; color: var(--main-color); line-height: 14px; letter-spacing: 1px; opacity: 0.3; text-transform: uppercase; }
.wrapper { width: 1500px; }
#body { position: relative; z-index: 2; background-color: #fff; padding-bottom: 70px; }
#body.main { padding-top: 160px; padding-bottom: 100px; }
#nav { left: 50%; margin-left: -750px; height: 50px; }
.nav .mainlevel { padding-left: 30px; padding-right: 30px; }
.nav .mainlevel .mainlevel-a span, .nav .mainlevel.active.cuf .mainlevel-a span { font-size: 14px; color: #333; text-transform: uppercase; }
.nav .mainlevel.active .mainlevel-a span, .nav .mainlevel .mainlevel-a:hover span, .nav .mainlevel:hover span, .mainlevel-a:hover span, .nav .mainlevel.active:hover .mainlevel-a span, .nav .mainlevel.active.cuf .mainlevel-a:hover span { color: var(--main-color); }
#header .wrapper { height: 110px; }
#nav-card { width: 100%; height: 50px; border-top: solid 1px #ECECEC; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); }
#nav-card .wrapper { height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.num-font { font-family: 'DIN Alternate'; }
.header-tel { width: 260px; display: flex; flex-direction: column; align-items: flex-end; }
.header-tel .num-font { font-size: 27px; font-weight: 700; letter-spacing: 1px; color: #000000; line-height: 33px; }
.header-tel .p { font-size: 12px; font-weight: 400; color: #000000; line-height: 17px; opacity: 0.5; }

/*页面参数*/
:root {
	--main-color: #D9261C; /*高亮颜色 */
	--title-top: 100px;
	--title-bottom: 60px;
	--list-gap-m: 0 -40px -40px -0;
	--list-gap-p: 0 40px 40px 0;
	--products-column: 25%;
	--news-gap-m: 0 -40px -40px -0;
	--news-gap-p: 0 40px 40px 0;
	--news-column: 33.33%;
}

@media screen and (max-width:1540px) {
	:root {
		--title-top: 80px;
		--title-bottom: 36px;
		--list-gap-m: 0 -32px -32px -0;
		--list-gap-p: 0 32px 32px 0;
		--news-gap-m: 0 -32px -32px -0;
		--news-gap-p: 0 32px 32px 0;
	}

}

@media screen and (max-width:1370px) {
	:root {
		--title-top: 50px;
		--title-bottom: 24px;
		--products-column: 33.33%;
		--list-gap-m: 0 -16px -16px -0;
		--list-gap-p: 0 16px 16px 0;
		--news-column: 50%;
		--news-gap-m: 0 -16px -16px -0;
		--news-gap-p: 0 16px 16px 0;
	}

}

@media screen and (max-width:1024px) {
	:root {
		--title-top: 24px;
		--title-bottom: 16px;
	}

}

@media screen and (max-width:768px) {
	:root {
		--products-column: 50%;
	}

}

@media screen and (max-width:640px) {
	:root {
		--news-column: 100%;
		--news-gap-m: 0 0px 0px 0;
		--news-gap-p: 0 0px 24px 0;
	}

}

/* 适配 */
@media screen and (max-width:1540px) {
	#nav,#about-section2 .swiper-pagination { left: 16px; margin-left: 0px; }
	.wrapper { width: 100%; padding-left: 16px; padding-right: 16px; }
	#body.main{padding-bottom: 60px;}
}
@media screen and (max-width:1370px) {
	#body { padding-bottom: 32px; }
	#body.main{padding-bottom: 32px;}
	.about-section1 img { width: 500px; }
	.about-section1 .txt { padding-left: 32px; }
	#about-section2 .about-section2{padding-top: 24px; padding-bottom: 24px;}
	#about-section2 .about-section2 .wrapper{padding-left: 160px;}
	#about-section2 .swiper-pagination{bottom: 185px;}
}
@media screen and (max-width:1280px) {
	.about-section1 img { width: 400px; }
	#about-section2 .images{padding-top: 20vh;}
	#about-section2 .about-section2 .txt .p1{padding-bottom: 10px; margin-bottom: 10px;}
	#about-section2 .about-section2 .txt .txt-info{margin-bottom: 16px;}
	#about-section2 .swiper-pagination{bottom: 158px;}
	.products-head { flex-direction: column; }
	.products-head .sub-nav { width: 100%; margin-top: 24px; }
	.products-head .sub-nav .swiper-wrapper { justify-content: flex-start; }
	.products-head .sub-nav .swiper-slide { margin-left: 0; margin-right: 14px; }
}
@media screen and (max-width:1024px) {
	.body-overlay { top: 60px; height: calc(100vh - 60px); }
	.mobileMenu { width: 30px; height: 30px; padding: 0; position: absolute; z-index: 1001; left: 20px; top: 15px; display: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: space-between; }
	.mobileMenu i, .mobileMenu i::before, .mobileMenu i::after { width: 28px; height: 2px; background: #999; display: block; position: absolute; }
	.mobileMenu i { top: 14px }
	.mobileMenu i::before, .mobileMenu i::after { content: ""; left: 0; -webkit-transform-origin: center center; transform-origin: center center; transition: all .25s ease; }
	.mobileMenu i::before { top: -10px }
	.mobileMenu i::after { top: 10px }
	.mobileMenu.close i { width: 0; }
	.mobileMenu.close i::before, .mobileMenu.close i::after { background: var(--main-color); }
	.mobileMenu.close i::before { -webkit-transform: rotate(45deg) translate(7px, 7px); transform: rotate(45deg) translate(7px, 7px); }
	.mobileMenu.close i::after { -webkit-transform: rotate(-45deg) translate(7px, -7px); transform: rotate(-45deg) translate(7px, -7px); }
	header { transform: none; }
	.mobileMenu { display: inline-block; }
	.mobileMenu.hide { display: none; }
	header { background-color: #fff; }
	header #header { position: relative; z-index: 102; box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.05); background: #fff; }
	#header, header.index-header #header { height: 60px; }
	#header .wrapper {padding-left: 100px; height: 60px; }
	#nav { position: fixed; display: block; width: 300px; max-width: 80%; height: calc(100vh - 60px); left: -100%; top: 60px; padding: 0; margin: 0; background: rgba(255, 255, 255, 1); z-index: 101; overflow: hidden; transform: translateX(0); }
	#nav.side-slide, #nav-card.side-slide { left: 0; }
	#nav-card { position: fixed; display: block; width: 300px; height: auto; max-width: 80%; left: -100%; bottom: 0px; z-index: 102; }
	#nav-card .wrapper{justify-content: center;}
	#logo { width: 160px; height: 45px; }
	.logo-txt{font-size: 20px;}
	.lang { height: 44px; }
	.lang img,.lang .select:after{display: none;}
	.lang .select { width: 100%; height: 100%; justify-content: center; }
	.lang .select ul li { line-height: 44px; }
	.lang .select ul, .lang .select .placeholder { opacity: 1; visibility: visible; position: relative; width: auto; top: 0; background: none; margin: 0; }
	.lang .select .placeholder { margin-right: 24px; line-height: 44px; }
	.nav .nav-ul { flex-direction: column; justify-content: flex-start; }
	.nav .mainlevel { position: relative; z-index: 10; display: flex; justify-content: center; margin-left: 0; margin-right: 0; width: 100%; height: 46px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
	.nav .mainlevel::before { bottom: 0;  top: auto; left: 0; transform: translateX(0);}
	.nav .mainlevel .mainlevel-a { text-decoration: none; width: 100%; display: flex; justify-content: flex-start;padding-top: 16px; padding-bottom: 16px; align-items: center; position: relative; z-index: 2; text-transform: capitalize; }
	.nav .mainlevel .mainlevel-a span { color: #333; }
	.nav .mainlevel.active .mainlevel-a span, .nav .mainlevel .mainlevel-a:hover span, .nav .mainlevel:hover span, .nav .mainlevel.active.cuf, .mainlevel-a:hover span { color: var(--main-color); }
	.nav .mainlevel:hover ul, .nav .mainlevel.active ul { opacity: 1; visibility: visible; transform: translate(0, 0); }
	.nav .mainlevel { height: auto; flex-direction: column; }
	.nav .mainlevel ul { position: relative; top: 0; left: 0; transform: translateY(0px); opacity: 1; visibility: visible; height: auto; display: none; }
	.nav .mainlevel.active ul { display: block; }
	.nav .mainlevel ul::before, .nav .mainlevel ul::after { display: none; opacity: 0; }
	.nav .mainlevel.active::before, .nav .mainlevel:hover::before, .nav .mainlevel.active.cuf:hover::before { width: 100%; }
	.nav .mainlevel .sub-mainlevel { box-shadow: none; padding: 0; }
	.nav .mainlevel .sub-mainlevel::before { display: none; }
	.nav .mainlevel .sub-mainlevel a { border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin: 0; padding: 12px 0 12px 32px; text-align: left; }
	.nav .mainlevel .sub-mainlevel a:last-child { border-bottom: 0; }
	#nav .nav { flex-direction: column; height: auto; }
	.nav .nav-ul { flex: none }
	#body.main { padding-top: 80px; padding-bottom: 24px; }
	.main-page { margin-top: 24px; padding-bottom: 24px; }
	#body { padding-bottom: 32px; }
	.list[data-news] .list-txt, .index-section4 .list-txt{padding-top: 24px;}
	#about-section2 .about-section2{padding-top: 16px;}
	#about-section2 .images{height: 30vh;}
	#about-section2 .about-section2 .wrapper{padding-left: 16px; padding-bottom: 16px;}
	#about-section2 .swiper-pagination{bottom: 16px;left: 50%; transform: translateX(-50%);}
	.contact { align-items: flex-start; height: 400px; }
	.contact .txt .t{margin-bottom: 12px;}
	.contact .txt .item{margin-bottom: 8px;}
}
@media screen and (max-width:860px) {
	.about-section1{flex-direction: column;}
	.about-section1 img{width: 100%;display: block;}
	.about-section1 .txt{padding-left: 0; padding-top: 24px;}
	.list.pro-list .list-txt .name { font-size: 14px; }
	.list[data-news] .list-txt .date, .index-section4 .list-txt .date { font-size: 18px; padding-top: 12px; margin-top: 12px; }
	.contact{flex-direction: column; height: auto; padding-bottom: 32px;}
	.contact .txt{margin-bottom: 24px;}
	.contact .map{width: 100%; height: 300px;}
}
@media screen and (max-width:768px) {
	#body.main{padding-top: 60px;padding-bottom: 0;}
	.wrapper{padding-left: 24px; padding-right: 24px;}
	#about-section2 .about-section2 .wrapper{padding-left: 24px; padding-bottom: 24px;}
	#about-section2 .about-section2 .txt .txt-info{margin-bottom: 10px;}
	#about-section2 .about-section2 .more{margin-top: 0;}
	#about-section2 .swiper-pagination{bottom: 24px;}
	#body { padding-bottom: 24px; }
	.more { margin-top: 24px; }
	.more a { width: 100%; }
	.header-tel{display:none}
	.flipbook-viewport{padding-bottom: 24px;}
	#header .wrapper{justify-content: center; padding-left: 0;}	
	.article{padding:0}
	.article .article-info{padding-top: 0;}
	.article-body{padding-top: 16px;}
	.article .article-info .date{margin-top: 8px; margin-bottom: 16px;}
}
@media screen and (max-width:640px) {
	.contact .img { display: none; }
	.contact .txt { padding-left: 0px; }
}
@media screen and (max-width:480px) { }

/*******************************
-------[=首页------
********************************/
#index-section1 { position: relative; z-index: 1; width: 100%; height: auto; margin-top: 160px; }
#index-section1 .swiper-container { z-index: 1; width: 100%; height: 100%; }
#index-section1 img.bg { width: 100%; height: 100%; object-fit: cover; z-index: 8; }
#index-section1 .index-banner-txt .btn { width: 120px; height: 40px; display: inline-block; background: var(--main-color); text-align: center; font-size: 14px; color: #FFFFFF; line-height: 40px; }
#index-section1 .index-banner-txt[data-left] { left: 20%; }
#index-section1 .swiper-btn { background: rgba(0, 0, 0, 0.5); }
#index-section1 .swiper-btn.prev { left: 5.7%; }
#index-section1 .swiper-btn.next { right: 5.7%; }
#index-section1 .swiper-pagination { left: 50%; transform: translateX(-50%); bottom: 20px; display: flex; align-items: center; justify-content: center; width: auto; height: 22px; background: rgba(0, 0, 0, 0.1); border-radius: 11px; padding-left: 16px; padding-right: 16px; }
#index-section1 .swiper-pagination-bullet { background: #fff; opacity: 1 !important; width: 6px; height: 6px; }
#index-section1 .swiper-pagination-bullet-active { background: transparent; width: 10px; height: 10px; border: 2px solid #fff; }
#index-section2 { padding-top: var(--title-top); }
#index-section2 .wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
#index-section2 .wrapper .item { position: relative; }
#index-section2 .wrapper .item .images { padding-top: 60.27%; }
#index-section2 .wrapper .item .txt { background: #F7F7F7; padding: 33px 50px; }
#index-section2 .wrapper .item .txt .p1 { font-size: 20px; color: #000000; line-height: 1.4; }
#index-section2 .wrapper .item .txt .txt-info { -webkit-line-clamp: 1; margin-top: 6px; }
#index-section2 .wrapper .item .txt .txt-info, #index-section2 .wrapper .item .txt .txt-info * { font-size: 14px; color: rgba(0, 0, 0, 0.3); line-height: 1.4; }
#index-section3 { margin-bottom: var(--title-top); }
#index-section4 .tool { position: relative; display: none; justify-content: center; column-gap: 16px; padding-top: 24px; }
#index-section4 .tool .swiper-btn { position: relative; transform: translateY(0); }
.index-section4 .swiper-slide:hover .list-txt .name { color: var(--main-color); }
.index-section3-txt { margin-bottom: 30px; margin-top: -30px; z-index: 10; background-color: #fff; }
.index-section3-txt .swiper-wrapper, .index-section3-txt .swiper-slide { width: auto !important; }
.index-section3-txt .swiper-wrapper { justify-content: center; }
.index-section3-txt .swiper-slide { padding: 11px 16px; margin: 0 16px; font-size: 16px; font-weight: 500; color: #666; line-height: 22px; cursor: pointer; }
.index-section3-txt .swiper-slide::after { content: ""; display: block; height: 1px; position: absolute; left: 50%; right: 50%; bottom: 0; background: var(--main-color); }
.index-section3-txt .swiper-slide.swiper-slide-thumb-active { color: var(--main-color); }
.index-section3-txt .swiper-slide.swiper-slide-thumb-active::after { left: 0; right: 0; }
.index-section3-swiper .list.pro-list .list-li { width: 25%; }

/* 首页适配 */
@media screen and (max-width:1540px) {
	#index-section2 .wrapper .item .txt{padding: 16px 24px;}
}
@media screen and (max-width:1370px) {
	#index-section2 .wrapper{column-gap:24px}
}
@media screen and (max-width:1024px) {
	#index-section1{margin-top: 60px;}
	#index-section2 .wrapper{column-gap:16px}
	#index-section4 .tool{display: flex;}
}
@media screen and (max-width:860px) {
	#index-section2 .wrapper{row-gap:16px; grid-template-columns: 1fr;}
}
@media screen and (max-width:768px) {}
@media screen and (max-width:480px) { }