﻿@charset "utf-8";
/* ==========================================================================
   鍏充簬椤?about 鏉垮潡鏍峰紡锛堝ご灏惧叕鍏辨牱寮忚 header_footer.css锛?   ========================================================================== */

/* 琛ュ厖瀛楀彿锛堝叧浜庨〉鐢ㄥ埌 fnt_60 / fnt_150锛?*/
.fnt_60 { font-size: 0.6rem; }
.fnt_150 { font-size: 1.5rem; }
@media only screen and (max-width: 1024px) { .fnt_60 { font-size: 26px; } }
@media only screen and (max-width: 1023px) { .fnt_150 { font-size: 70px; } .fnt_100 { font-size: 50px; } }
@media only screen and (max-width: 767px) { .fnt_60 { font-size: 18px; } .fnt_150 { font-size: 40px; } .fnt_100 { font-size: 30px; } }

/* 鍥哄畾澶撮儴鍗犱綅 */
.zs-h-height { height: 0.96rem; }
@media only screen and (max-width: 1024px) { .zs-h-height { height: 56px; } }

/* 婊氬姩杩涘叆鍔ㄧ敾 */
.zs-fadeup { opacity: 0; transform: translateY(60px); transition: opacity 0.8s, transform 0.8s; }
.zs-fadel  { opacity: 0; transform: translateX(-80px); transition: opacity 0.8s, transform 0.8s; }
.zs-fader  { opacity: 0; transform: translateX(80px); transition: opacity 0.8s, transform 0.8s; }
.zs-fadein { opacity: 0; transition: opacity 1s; }
.zs-fadeup.is-in, .zs-fadel.is-in, .zs-fader.is-in { opacity: 1; transform: none; }
.zs-fadein.is-in { opacity: 1; }

/* 瀹瑰櫒 */
.zs-aboutwrap { width: 1660px; max-width: 90%; margin: 0 auto; }
@media only screen and (max-width: 1024px) { .zs-aboutwrap { max-width: 94%; } }
.zs-about { margin: 0 24px; }
@media only screen and (max-width: 1279px) { .zs-about { margin: 0 3%; } }
.zs-about img { max-width: 100%; }

/* ==========================================================================
   about_01 棣栧睆
   ========================================================================== */
.zs-ab-hero { overflow: hidden; }
.zs-ab-hero .zs-hero-txt { position: relative; margin-top: 5%; }
.zs-ab-hero .zs-hero-txt h3 { line-height: 1.2; }
.zs-ab-hero .zs-hero-txt h1, .zs-ab-hero .zs-hero-txt h2 { line-height: 1.2; font-weight: bold; }
.zs-ab-hero .zs-hero-txt span { position: absolute; right: 0; bottom: 0; }
.zs-ab-hero ul { margin-top: 2%; overflow: hidden; }
.zs-ab-hero li { float: left; width: 49.2%; border-radius: 20px; overflow: hidden; }
.zs-ab-hero li:nth-child(2n) { float: right; }
.zs-ab-hero li img { width: 100%; display: block; }

/* ==========================================================================
   about_02 鏁板瓧
   ========================================================================== */
.zs-ab-num { overflow: hidden; padding: 5% 0; }
.zs-ab-num .zs-num-ll { float: left; width: 75%; }
.zs-ab-num .zs-num-ll li { float: left; width: 40%; margin-bottom: 5%; }
.zs-ab-num .zs-num-ll li:nth-child(2n) { width: 60%; }
.zs-ab-num .zs-num-ll li p { position: relative; display: inline-block; }
.zs-ab-num .zs-num-ll li span { font-weight: bold; line-height: 1; }
.zs-ab-num .zs-num-ll li em { display: block; margin-top: 0.1rem; font-style: normal; }
.zs-ab-num .zs-num-ll li i { position: absolute; right: -0.5rem; top: -0.12rem; font-weight: bold; }
.zs-ab-num .zs-num-rr { float: right; }
.zs-ab-num .zs-num-rr h2 { font-weight: bold; line-height: 1.2; }
@media only screen and (max-width: 1023px) {
    .zs-ab-num .zs-num-ll { width: 100%; }
    .zs-ab-num .zs-num-ll li em { position: static; display: block; }
    .zs-ab-num .zs-num-ll li em br { display: none; }
}

/* ==========================================================================
   about_03 鍏徃
   ========================================================================== */
.zs-ab-company { position: relative; }
.zs-ab-company > img { width: 100%; display: block; }
.zs-ab-company h2 { position: absolute; left: 5.5%; top: 15%; z-index: 2; color: #3f4144; }
.zs-ab-company .zs-company-txt { position: absolute; left: 33%; top: 50%; transform: translateY(-50%);
    text-align: left; z-index: 2; line-height: 1.2; font-weight: bold; color: #3f4144; }
.zs-ab-company .zs-company-txt p:last-child { margin-top: 5%; }
@media only screen and (max-width: 767px) {
    .zs-ab-company h2 { position: static; margin: 15px 0; font-size: 24px; }
    .zs-ab-company .zs-company-txt { position: static; transform: none; margin-top: 5%; }
}

/* ==========================================================================
   about_04 鎵х潃涓撴敞锛堢偣鍑绘墜椋庣惔锛?   ========================================================================== */
.zs-ab-focus { padding: 5% 0; overflow: hidden; }
.zs-ab-focus > .zs-aboutwrap > h2 { line-height: 1.1; font-weight: bold; }
.zs-ab-focus .zs-focus-inner { margin: 5% 6.5%; overflow: hidden; }
@media only screen and (max-width: 1599px) { .zs-ab-focus .zs-focus-inner { margin: 5% 0; } }
.zs-ab-focus .zs-focus-ll { float: left; width: 36%; }
.zs-ab-focus .zs-focus-rr { float: right; width: 55%; }
.zs-ab-focus .zs-focus-ll li { margin-bottom: 0.1rem; transition: all 0.5s; }
.zs-ab-focus .zs-focus-ll li:last-child { margin-bottom: 0; }
.zs-ab-focus .zs-focus-ll li .zs-focus-tit { cursor: pointer; background: #242424; color: #fff; width: 55%;
    padding: 0.15rem 0.2rem 0.1rem; border-radius: 0.2rem; transition: all 0.5s; }
.zs-ab-focus .zs-focus-ll li .zs-focus-tit h3 { line-height: 1.3; font-weight: bold; }
.zs-ab-focus .zs-focus-ll li .zs-focus-con { height: 0; opacity: 0; overflow: hidden; transition: all 0.5s; }
.zs-ab-focus .zs-focus-ll li .zs-focus-con p { margin-top: 0.2rem; }
.zs-ab-focus .zs-focus-ll li.on .zs-focus-tit { background: linear-gradient(135deg, #0140bf, #01b3bf); }
.zs-ab-focus .zs-focus-ll li.on .zs-focus-con { height: auto; opacity: 1; overflow: visible; padding: 0.05rem 0.2rem 0.25rem; }
.zs-ab-focus .zs-focus-rr li { height: 0; opacity: 0; overflow: hidden; border-radius: 20px; transition: all 0.5s; }
.zs-ab-focus .zs-focus-rr li.on { height: auto; opacity: 1; }
.zs-ab-focus .zs-focus-rr li img { width: 100%; display: block; }
@media only screen and (max-width: 1023px) {
    .zs-ab-focus .zs-focus-ll, .zs-ab-focus .zs-focus-rr { width: 100%; }
    .zs-ab-focus .zs-focus-rr { margin-top: 5%; }
    .zs-ab-focus .zs-focus-ll li .zs-focus-tit { width: 100%; }
}

/* ==========================================================================
   about_05 淇′换
   ========================================================================== */
.zs-ab-trust { padding: 0 0 5%; position: relative; text-align: center; }
.zs-ab-trust h2 { line-height: 1.2; font-weight: bold; display: inline-block; text-align: left; }
.zs-ab-trust .zs-trust-logo { margin-top: 5%; background: #fff; padding: 5%; border-radius: 30px; }
.zs-ab-trust .zs-trust-logo img { width: 100%; }
@media only screen and (max-width: 1023px) { .zs-ab-trust { padding-top: 0; } .zs-ab-trust h2 { width: 100%; } }

/* ==========================================================================
   about_06 濂芥垚缁?   ========================================================================== */
.zs-ab-achieve { padding: 4% 0; overflow: hidden; }
.zs-ab-achieve dt { float: left; width: 50%; }
.zs-ab-achieve dt img { width: 100%; display: block; border-radius: 0.2rem; }
.zs-ab-achieve dd { float: right; width: 42%; }
.zs-ab-achieve dd h2 { line-height: 1.2; font-weight: bold; }
.zs-ab-achieve dd .zs-achieve-c { padding-top: 2%; }
.zs-ab-achieve dd .zs-achieve-c p { margin-top: 2%; }
@media only screen and (max-width: 1023px) {
    .zs-ab-achieve dt, .zs-ab-achieve dd { width: 100%; }
    .zs-ab-achieve dd { margin-top: 5%; }
}

/* ==========================================================================
   about_07 璇勪环锛堟暎甯冨畾浣嶅崱鐗囷級
   ========================================================================== */
.zs-ab-voice { padding: 4% 0 8%; overflow: hidden; }
.zs-ab-voice .zs-aboutwrap { text-align: center; }
.zs-ab-voice .zs-voice-head { display: inline-block; text-align: left; margin: 0 0 5%; }
.zs-ab-voice .zs-voice-head h2 { line-height: 1.2; font-weight: bold; }
.zs-ab-voice .zs-voice-head p { margin-top: 8%; }
.zs-ab-voice .zs-voice-list { position: relative; aspect-ratio: 2.47 / 1; }
.zs-ab-voice .zs-voice-item { position: absolute; width: 27%; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.zs-ab-voice .zs-voice-item dl { position: relative; padding: 0.45rem 0.5rem 0.25rem 0.3rem; }
.zs-ab-voice .zs-arrow { position: absolute; left: 0.3rem; top: -0.16rem; width: 0.35rem; height: 0.3rem; }
.zs-ab-voice .zs-arrow img { width: 100%; height: 100%; }
.zs-ab-voice dt { margin-bottom: 10px; }
.zs-ab-voice dt p { min-height: 96px; line-height: 24px; text-align: left; }
.zs-ab-voice dt .zs-faq-q { display: block; margin-bottom: 8px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-ab-voice dd { text-align: right; }
.zs-ab-voice .zs-per { overflow: hidden; }
.zs-ab-voice .zs-per span { display: inline-block; width: 46px; height: 46px; margin-right: 10px; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.zs-ab-voice .zs-per span img { width: 100%; height: 100%; object-fit: cover; }
.zs-ab-voice .zs-per__info { display: inline-block; float: right; max-width: calc(100% - 56px); text-align: left; }
.zs-ab-voice .zs-per__info h4, .zs-ab-voice .zs-per__info p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-ab-voice .zs-voice-item.li_01 { left: 0; top: 35%; }
.zs-ab-voice .zs-voice-item.li_02 { left: 25%; top: 8%; }
.zs-ab-voice .zs-voice-item.li_03 { left: 27%; top: 67%; }
.zs-ab-voice .zs-voice-item.li_04 { left: 38%; top: 37%; z-index: 10; }
.zs-ab-voice .zs-voice-item.li_05 { left: 55%; top: 0; }
.zs-ab-voice .zs-voice-item.li_06 { left: 60%; top: 67%; }
.zs-ab-voice .zs-voice-item.li_07 { left: 73%; top: 50%; }
.zs-ab-voice .zs-voice-item:hover { z-index: 30; }
@media only screen and (max-width: 1279px) { .zs-ab-voice .zs-voice-list { aspect-ratio: auto; height: 560px; } }
@media only screen and (max-width: 1023px) {
    .zs-ab-voice .zs-voice-head { margin: 0; }
    .zs-ab-voice .zs-voice-list { height: auto !important; aspect-ratio: auto; }
    .zs-ab-voice .zs-voice-item { width: 100% !important; position: static; margin-top: 5%; }
}

/* ==========================================================================
   index_07 搴曢儴 CTA锛堜綘韬湪浣曞锛?   ========================================================================== */
.zs-index-07 { background: linear-gradient(135deg, #0140bf, #01b3bf); overflow: hidden; text-align: center; padding: 0.9rem 0; }
.zs-index-07 h3 { line-height: 1em; margin-bottom: 0.4rem; }
.zs-index-07 .zs-cont { display: inline-block; text-align: left; }
.zs-index-07 .zs-header-map { margin: 0 auto; float: none; display: block; text-align: center; }
.zs-index-07 .zs-header-map a { background: #1e1e1e; width: 272px; height: 46px; line-height: 46px; margin: 0 auto; }
@media only screen and (max-width: 1440px) { .zs-index-07 .zs-header-map a { width: 200px; } }
@media only screen and (max-width: 767px) {
    .zs-index-07 h3 { line-height: 1.4em; margin-bottom: 15px; }
    .zs-index-07 .zs-header-map a { height: 36px; line-height: 36px; width: 170px; }
}
