/* ========================================
   About.css - 鍏充簬閲戦浄 Page Styles
   ======================================== */

/* ---------- Banner (#nyBan) ---------- */
/* 鈥滈珮搴︾敱鍐呭鍐冲畾銆佹案涓嶈瀛椻€濈殑閫氱敤瑙勫垯鍦 style.css锛?nyBan锛夛紱
   鏈〉鍙渶澹版槑鏂囧瓧鍧楃殑鍨傜洿閿氱偣锛氫腑蹇冭惤鍦 65vh锛堝叏绔欓粯璁 72.5%锛夛紝
   鍥犱负鏈〉姝ｆ枃姣斿叾瀹冨唴椤甸暱銆 */
#nyBan {
    --nyban-anchor: 0.65;
}

/* 鐭睆锛?366脳768銆?600脳800 杩欑被绗旇鏈級鎶婇敋鐐逛笂绉讳竴鐐 + 鏀剁揣琛岃窛锛
   璁╂暣娈垫枃瀛楀敖閲忚惤鍦ㄩ灞忓唴锛涗竾涓€浠嶆斁涓嶄笅锛屾暣娈典細鑷劧澧為珮锛屼絾缁濅笉瑁佸垏銆 */
@media screen and (max-height: 820px) {
    #nyBan { --nyban-anchor: 0.60; }
    #nyBan .p_miao { line-height: 1.7; }
    #nyBan .p_list.mt_50 { margin-top: 34px; }
    #nyBan .p_miao.mt_60 { margin-top: 38px; }
}

.p_list { color: #fff; }
.p_s { color: #fff; line-height: 1.2; }
.p_b { color: #fff; line-height: 1; }
.p_list { display: flex; }
.p_miao {
    color: #fff;
    line-height: 1.8;
    width: 86%;
    font-weight: normal; /* 鏄惧紡鍘绘帀鍔犵矖锛堥槻姝换浣曠户鎵?榛樿鍔犵矖锛 */
    font-family: 'Alibaba-PuHuiTi-Regular', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; /* 鏅儬浣 Regular锛屽瓧褰㈡洿缁 */
}
.list_item { margin-right: 60px; }
.list_d { margin-left: 10px; }

/* ---------- 鍒嗗瓙鍏徃 (mkBox1) ---------- */
.mkBox1 {
    position: relative;
    width: 100%;
    height: 100%;
}
.mk_z { color: #fff; }
.mk_t { color: #fff; }
.mk_item {
    position: relative;
    width: 100%;
    transition: all 1s;
}
.mk_item img {
    width: 100%;
    height: 100%;
    height: 130px;
    object-fit: cover;
}
.mk_bt {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.mk_button {
    display: block;
    line-height: 50px;
    text-align: center;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
}
.mk_button:hover { background: #164F8F; }
.mk_button:hover .icon path { fill: #fff !important; }
.mk_f {
    color: #fff;
    padding: 0 34%;
    line-height: 100px;
}
.mk_left {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(22, 79, 143, .8);
    width: 160px;
    height: 100%;
    z-index: 5;
    display: flex;
    align-items: center;
}
/* 鏂囧瓧鍖哄乏杈圭晫锛氬繀椤绘亽瀹氳鍑哄乏渚ц摑鑹茬珫鏍忥紙.mk_left锛? 16px 闂磋窛銆
   鈫 鍘熷疄鐜伴潬 `.wh1600 { width:75%; margin:0 auto }` 灞呬腑鈥斺€旇鍙ｄ竴绐勶紝
     宸﹀彸鐣欑櫧灏卞皬浜 160px锛屾枃瀛楄绔栨爮鍘嬩綇锛?280 鏃 2px銆?152 鏃 18px锛夈€
     杩欓噷鏀规垚銆屽乏杈硅窛鍙 绔栨爮瀹?16 涓 灞呬腑浣欓噺 鐨勮緝澶у€笺€嶏紝
     瀹藉睆浠嶆槸鍘熸潵鐨勫眳涓綅缃紝绐勫睆鍒欒閽冲湪绔栨爮鍙充晶锛屼换浣曞睆瀹介兘涓嶄細閲嶅彔銆 */
.mkBox1 .mk_bt .wh1600 {
    --mk_bar: 160px;                     /* 宸︿晶绔栨爮瀹藉害锛岄殢鏂偣璋冩暣 */
    --mk_gutter: calc(var(--mk_bar) + 16px);
    width: auto !important;
    max-width: 1440px;
    margin-left: max(var(--mk_gutter), calc((100% - 1440px) / 2)) !important;
    margin-right: max(var(--mk_gutter), calc((100% - 1440px) / 2)) !important;
    box-sizing: border-box;
}

.mk_item .mk_btn { display: none; }
.mk_item .mk_z { display: none; }
.mk_item .mk_t { font-size: 28px; }
.mk_active img {
    width: 100%;
    height: 100%;
    height: 430px;
    object-fit: cover;
}
.mk_active .mk_bt { padding: 118px 0 155px 0px; }
.mk_active .mk_btn { display: block; }
.mk_item .mk_t { margin-top: 0; line-height: 130px; }
.mk_active .mk_t { margin-top: 10px; line-height: normal; }
.mk_active .mk_btn { margin-top: 20px; }
.mk_active .mk_z { display: block; }
.mk_active .mk_t { font-size: 40px; }
.mk_mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 3;
}
.mk_active .mk_mask { display: none; }
.mk_active .mk_t { font-size: 30px; }

/* 瀛愬叕鍙 badge */
.mk_badge {
    display: inline-block;
    background: #164F8F;
    color: #fff;
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 1.5;
}

/* ---------- 缁忚惀鐞嗗康 (brandBox) ---------- */
.brandBox {
    position: relative;
    width: 100%;
    /* 鈫撯啌鈫 妯″潡楂樺害锛堝敮涓€鎺у埗鍙傛暟锛夆啌鈫撯啌
       鍐呯疆鑳屾櫙鍥 img/About/bg_img1.webp 涓 1920脳1080锛
       瀹藉睆涓 1000px 楂樺害鍑犱箮鑳藉畬鏁村憟鐜拌鍥撅紙浠呬笂涓嬪悇瑁 ~36px锛夛紝
       鍘熷€ 800px 浼氳鎺変笂涓嬪悇绾 136px銆 */
    height: 1000px;
    overflow: hidden;
}
.brandBox .brand_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brand_content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 80px;
    text-align: center;
}
.brand_title {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 20px;
}
.brand_subtitle {
    color: #fff;
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 40px;
}
.brand_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #164F8F;
    font-size: 18px;
    padding: 14px 36px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}
.brand_btn:hover {
    background: #e8f0f8;
    color: #164F8F;
}
.brand_btn svg {
    margin-left: 8px;
    width: 14px;
    height: 14px;
}
.brand_btn:hover svg path {
    fill: #fff;
}

/* ---------- 鑽ｈ獕濂栭」 (honorBox) ---------- */
.honorBox {
    position: relative;
    width: 100%;
    overflow-x: clip; /* 瑁佹帀鑽ｈ獕澧欒疆鎾钩閾烘孩鍑虹殑杩滅閮ㄥ垎锛屾秷闄ゆí鍚戞粴鍔ㄦ潯锛堜繚鐣欎袱渚ч湶杈规晥鏋滐級 */
}
.honorBox .honor_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.honor_content {
    position: absolute;
    left: 0;
    top: 192px;
    width: 100%;
}
.honor_header {
    text-align: center;
    color: #222;
}
.honor_header_bottom {
    text-align: center;
    color: #222;
}
.honor_h_title {
    font-size: 42px;
    color: #222;
    font-weight: bold;
    margin-bottom: 28px;
}
.honor_h_sub {
    font-size: 32px;
    color: #222;
}
.honor_carousel {
    position: relative;
    margin-top: 140px;
    overflow: visible !important;
    width: 100%;
}
.honor_carousel .swiper-container {
    overflow: visible !important;
}
.honor_carousel .swiper-wrapper {
    overflow: visible !important;
}
.honor_carousel .swiper-slide {
    width: 12.5%; /* 闅忓鍣ㄧ瓑姣旂缉鏀撅細1440px 瀹瑰櫒涓 = 180px锛岀獥鍙ｇ缉鏀炬椂杞挱鍥捐窡闅忓彉鍖 */
    height: auto;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: 300ms;
    transform: scale(0.7);
    transform-origin: center bottom;
}
.honor_carousel .box_image {
    width: 100%;
}
.honor_carousel .box_image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: scale(1.8);
    transform-origin: center center;
}

/* Swiper navigation buttons */
.honor_prev,
.honor_next {
    position: absolute;
    top: 67%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s;
}
.honor_prev { left: 0; }
.honor_next { right: 0; }
.honor_prev svg,
.honor_next svg {
    width: 14px;
    height: auto;
    fill: #164F8F;
}
.honor_prev:hover,
.honor_next:hover {
    background-color: #164F8F;
}
.honor_prev:hover svg,
.honor_next:hover svg {
    fill: #fff;
}

/* Swiper container */
.honor_swiper {
    overflow: visible !important;
}

/* Pagination */
.honor_pagination {
    text-align: center;
    margin-top: 30px;
}
.honor_pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s;
}
.honor_pagination .swiper-pagination-bullet-active {
    background-color: #164F8F;
    width: 24px;
    border-radius: 5px;
}

/* ========================================
   Responsive Breakpoints
   ======================================== */

@media screen and (max-width: 1780px) {
    .wh1600 {
        width: 75% !important;
        margin: 0 auto !important;
    }
}

@media screen and (max-width: 1600px) {
    .wh1600 {
        width: 75% !important;
        margin: 0 auto !important;
    }
    .honor_prev { left: -30px; }
    .honor_next { right: -30px; }
    .brand_content { }
}

@media screen and (max-width: 1200px) {
    .brand_subtitle { font-size: 36px; }
    .honor_h_sub { font-size: 36px; }
}

@media screen and (max-width: 1024px) {
    .wh1600 {
        width: 60% !important;
    }
    .honor_content { top: 40px; }
    .honor_carousel { margin-top: 30px; }
    .honor_carousel .box_image img { height: 90%; }
    .brand_subtitle { font-size: 28px; }
    .brand_btn { font-size: 16px; padding: 10px 30px; }
    .honor_h_sub { font-size: 28px; }
}

@media screen and (max-width: 768px) {
    .p_miao { display: none; }
    .p_list { display: none; }
    .mk_left { width: 80px; }
    /* 绔栨爮鍙樼獎 鈫 鏂囧瓧鍖哄乏杈圭晫鍚屾鏀剁獎锛堝彸渚х暀 16px锛岄伩鍏嶈瀹借繃绐勫鑷存崲琛岋級 */
    .mkBox1 .mk_bt .wh1600 {
        --mk_bar: 80px;
        margin-left: 96px !important;
        margin-right: 16px !important;
    }
    .mk_active .mk_bt { padding: 30px 0; }
    .mk_item img { height: 80px; }
    .mk_item .mk_t { font-size: 20px; line-height: 80px; }
    .mk_active .mk_t { font-size: 20px; line-height: normal; white-space: nowrap; }
    .mk_active img { height: 180px; }
    .mk_button { width: 35px; height: 35px; line-height: 35px; }
    .wh1600 {
        width: 55% !important;
        margin: 0 auto !important;
    }

    .brand_subtitle { font-size: 22px; margin-bottom: 20px; }
    .brand_title { font-size: 16px; margin-bottom: 10px; }
    .brand_btn { font-size: 14px; padding: 8px 24px; }
    /* 鎵嬫満涓婅鐪嬪埌鏁村紶鐓х墖锛氬尯鍧楅珮搴﹁窡鐫€鍥剧墖姣斾緥璧帮紙1920脳1080 鈫 16:9锛夛紝
       涓嶅啀鐢ㄥ浐瀹 800px + cover 鎶婂浘瑁佹垚涓棿涓€鏉★紙鍘熸潵鍙墿鑸圭殑涓€閮ㄥ垎锛夈€
       鏂囧瓧涔熶粠"鍘嬪湪鍥句笂"鏀规垚"鎺掑湪鍥剧墖涓嬫柟"鐨勮摑鑹叉潯锛
       璇ュ浘鏁翠綋鏄腑钃濊壊锛堝疄娴嬪簳閮 RGB鈮?2,118,169锛夛紝鐧藉瓧鐩存帴鍘嬩笂鍘诲姣斿害澶綆銆
       钃濇潯搴曡壊鐢ㄦ埛鎸囧畾涓 #1F74A7锛坮gb 31,116,167锛夈€ */
    .brandBox {
        height: auto;
        overflow: visible;
    }

    .brand_bg {
        height: auto;
        object-fit: contain;
    }

    .brand_content {
        position: static;
        padding: 24px 0 28px;
        background: #1F74A7;
    }

    .honor_content { top: 30px; }
    .honor_h_sub { font-size: 22px; margin-top: 8px; }
    .honor_h_title { font-size: 16px; }
    .honor_carousel { margin-top: 20px; }
    .honor_carousel .swiper-slide { width: 45%; } /* 绉诲姩绔斁澶у崟寮狅紝閬垮厤 12.5% 杩囧皬 */
    .honor_carousel .box_image { height: 200px; }
    .honor_carousel .box_image img { height: 80%; }
    .honorBox { min-height: 360px; }
    .honor_bg { min-height: 360px; }
    .honor_prev,
    .honor_next { display: none; }
    .honor_pagination { display: block; margin-top: 15px; }
}

@media screen and (max-width: 500px) {
    .brand_subtitle { font-size: 18px; }
    .brand_btn { font-size: 13px; padding: 6px 20px; }
    .honor_h_sub { font-size: 18px; }
}

/* 灏忓睆鎵嬫満锛氬瓙鍏徃鍏ㄥ悕鍦 360~400px 瀹戒笅浼氳秴鍑猴紙鈮?68 娈垫槸 nowrap锛夛紝
   杩欓噷缂╁皬瀛楀彿璁╁畠鏁磋鏀惧緱涓嬶紝閬垮厤灏鹃儴琚鎺 */
@media screen and (max-width: 400px) {
    .mk_active .mk_t { font-size: 17px; }
}