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

/* 琛ュ厖瀛楀彿鍝嶅簲寮?*/
@media only screen and (max-width: 1023px) { .fnt_100 { font-size: 50px; } }
@media only screen and (max-width: 767px) { .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-fadedown { 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-fadeup.is-in, .zs-fadedown.is-in, .zs-fadel.is-in, .zs-fader.is-in { opacity: 1; transform: none; }

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

/* ==========================================================================
   contact_01
   ========================================================================== */
.zs-contact-01 { padding: 5% 0 0; overflow: hidden; }
.zs-contact-01 dt { float: left; width: 60%; line-height: 1.2; }
.zs-contact-01 dd { float: right; width: 40%; padding-top: 1%; }
.zs-contact-01 dd p { text-align: right; margin-bottom: 3.5%; }
@media only screen and (max-width: 767px) {
    .zs-contact-01 dt, .zs-contact-01 dd { width: 100%; }
    .zs-contact-01 dd { margin-top: 5%; }
    .zs-contact-01 dd p { text-align: left; }
}

/* ==========================================================================
   contact_02
   ========================================================================== */
.zs-contact-02 { padding: 8% 0 0; overflow: hidden; }
.zs-contact-02 .zs-ct-txt { float: left; width: 30%; }
.zs-contact-02 .zs-ct-txt h1, .zs-contact-02 .zs-ct-txt h2 { line-height: 1.2; }
.zs-contact-02 .zs-ct-txt ul { margin-top: 4%; }
.zs-contact-02 .zs-ct-txt li { margin-bottom: 8%; }
.zs-contact-02 .zs-ct-txt li p { margin-top: 2%; }
.zs-contact-02 .zs-ct-txt li p a { display: block; }
.zs-contact-02 .zs-ct-txt li:first-child p { margin-top: 0; }
.zs-contact-02 .zs-ct-img { float: right; width: 64%; position: relative; overflow: hidden; }
.zs-contact-02 .zs-ct-img::after { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 40px; background: #fff; z-index: 10; }
.zs-contact-02 .zs-ct-img img { width: 100%; border-radius: 0.2rem; }
.zs-contact-02 .zs-ct-img iframe { width: 100%; border-radius: 0.2rem; display: block; }
.zs-contact-02 .zs-ct-img h2 { position: absolute; right: 24%; top: 29%; color: #fff; line-height: 1.2; font-weight: bold; }


#map_container{float: right; width: 68%; height: 680px;}

/* 导航按钮 */
.zs-map-nav { display: none; }
@media only screen and (max-width: 767px) {
    .zs-map-nav { display: block; margin-top: 12px; text-align: center; }
    .zs-map-nav-btn {
        display: inline-block;
        padding: 10px 30px;
        background: linear-gradient(135deg, #0140bf, #01b3bf);
        color: #fff;
        border-radius: 30px;
        text-decoration: none;
        font-weight: bold;
    }
    .zs-map-nav-btn i { margin-right: 6px; }
}

@media only screen and (max-width: 767px) {
    .zs-contact-02 .zs-ct-txt, .zs-contact-02 .zs-ct-img { width: 100%; }
    .zs-contact-02 .zs-ct-txt li { margin-bottom: 5%; }
    #map_container { float: none; width: 100%; height: 260px; margin-top: 15px; border-radius: 10px; }
}

/* ==========================================================================
   contact_03 琛ㄥ崟
   ========================================================================== */
.zs-contact-03 { padding: 8% 0 0; overflow: hidden; }
.zs-contact-03 > h2 { line-height: 1.2; }
.zs-contact-03 > p { margin-top: 1%; }
.zs-contact-03 .zs-form-con { margin-top: 5%; overflow: hidden; }
.zs-contact-03 .zs-ll { float: left; width: 34%; }
.zs-contact-03 .zs-ll .zs-codebox { width: 50%; background: linear-gradient(135deg, #0140bf, #01b3bf); position: relative; aspect-ratio: 1 / 1; border-radius: 0.2rem; }
.zs-contact-03 .zs-ll .zs-codebox img { width: 90%; max-width: 180px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.zs-contact-03 .zs-rr { float: right; width: 63%; }
.zs-contact-03 .zs-rr ul { overflow: hidden; }
.zs-contact-03 .zs-rr li { margin-bottom: 0.24rem; overflow: hidden; }
.zs-contact-03 .zs-rr .inp { float: left; padding: 0 24px; width: 60%; height: 42px; line-height: 42px; border: 2px solid #000; border-radius: 0.2rem; }
.zs-contact-03 .zs-rr .inp input { float: left; width: 100%; height: 100%; }
.zs-contact-03 .zs-rr .inp.inpan { float: right; width: 38%; }
.zs-contact-03 .zs-rr .inp.txt { margin-top: 10px; width: 100%; height: 212px; padding: 0; }
.zs-contact-03 .zs-rr .inp.txt textarea { padding: 20px 24px; width: 100%; height: 100%; resize: none; }
.zs-contact-03 .zs-rr li p { margin-left: 24px; }
.zs-contact-03 .zs-rr li p a.yszc { border-bottom: 1px solid #000; margin-left: 5px; }
.zs-contact-03 .zs-rr li p a.yszc:hover { border-color: #132b88; }
.zs-contact-03 .zs-rr li p input { margin-right: 10px; }
.zs-contact-03 .zs-rr .zs-vcode { border: 0 !important; padding: 0 !important; }
.zs-contact-03 .zs-rr .zs-vcode .image-code { width: auto; max-width: 120px; height: 42px; background: #eee; border-radius: 0.2rem; display: block; }
.zs-contact-03 .zs-rr .btn { display: inline-block; margin-top: 2%; background: #1E1E1E; color: #fff; line-height: 0.48rem; height: 0.48rem; padding: 0 0.5rem; border-radius: 0.3rem; }
.zs-contact-03 .zs-rr .btn i { margin-right: 0.08rem; }
/* 澶氶€?*/
.zs-contact-03 .radio-box .radio-label { float: left; width: 35%; margin-top: 3%; line-height: 28px; position: relative; font-size: 16px; }
.zs-contact-03 .radio-box .radio-label:nth-child(2n+1) { clear: both; }
.radio-label input[type="checkbox"] { position: absolute; opacity: 0; z-index: 2; width: 100%; height: 20px; cursor: pointer; }
.radio-label input[type="checkbox"] + em::before { content: ''; display: inline-block; margin-top: -4px; width: 14px; height: 14px; background-color: #fff; border: 2px solid #000; border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.radio-label input[type="checkbox"]:checked + em::before { border-color: #132b88; background: linear-gradient(135deg, #0140bf, #01b3bf); }
.checkbox-label { line-height: 20px; position: relative; }
.checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; z-index: 2; width: 20px; height: 20px; cursor: pointer; }
.checkbox-label input[type="checkbox"] + em::before { content: ''; display: inline-block; margin-top: -2px; border-radius: 3px; width: 12px; height: 12px; background-color: #fff; border: 2px solid #000; margin-right: 10px; vertical-align: middle; }
.checkbox-label input[type="checkbox"]:checked + em::before { border-color: #132b88; }
.checkbox-label input[type="checkbox"]:checked + em::after { content: "\2713"; position: absolute; left: 2px; top: 2px; color: #132b88; }
@media only screen and (min-width: 1025px) {
    .zs-contact-03 .zs-rr .btn i { transition: all 0.3s; }
    .zs-contact-03 .zs-rr .btn:hover { color: #fff !important; }
    .zs-contact-03 .zs-rr .btn:hover i { margin-right: 0.04rem; }
}
@media only screen and (max-width: 1023px) {
    .zs-contact-03 .zs-rr li { margin-bottom: 10px; }
    .zs-contact-03 .zs-rr .inp, .zs-contact-03 .zs-rr .inp.inpan { width: 100%; }
    .zs-contact-03 .zs-rr .inp.inpan { margin-top: 10px; }
    .zs-contact-03 .radio-box .radio-label { width: 50%; }
}
@media only screen and (max-width: 767px) {
    .zs-contact-03 .zs-ll, .zs-contact-03 .zs-rr { width: 100%; }
    .zs-contact-03 .zs-ll .zs-codebox { margin: 0 auto 5%; }
    .zs-contact-03 .zs-rr .btn { height: 36px; line-height: 36px; }
}

/* ==========================================================================
   contact_04 鎴戜滑閮藉湪鏈嶅姟璋侊紙鏁板瓧锛?   ========================================================================== */
.zs-contact-04 { padding: 8% 0 4%; }
.zs-serve { padding-bottom: 0.6rem; }
.zs-serve-tit { font-size: 0; margin-bottom: 0.3rem; text-align: center; }
.zs-serve-tit h2 { line-height: 1.2; display: inline-block; }
.zs-serve-num { margin-bottom: 0.5rem; }
.zs-serve-num ul { font-size: 0; text-align: center; }
.zs-serve-num li { display: inline-block; padding: 0 0.55rem; box-sizing: border-box; }
.zs-serve-num li dd { font-weight: bold; }
.zs-serve-num li dd span { line-height: 1.1; }
.zs-serve-num li dd em { display: inline-block; vertical-align: top; margin-top: -0.05rem; }
.zs-serve-img img { width: 100%; }
@media only screen and (max-width: 767px) {
    .zs-serve-tit { margin-bottom: 30px; }
    .zs-serve-num { margin-bottom: 0; }
    .zs-serve-num li { width: 50%; margin-bottom: 30px; padding: 0 0.25rem; }
}

/* ==========================================================================
   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; }
}

/* 头部：默认白底无阴影，下滑后加阴影 */
.contact_body .zs-header { background: #fff; box-shadow: none; border-bottom: none; }
.contact_body .zs-header.is-scroll { box-shadow: 0 10px 10px rgba(0,0,0,0.15); }