@charset "UTF-8";
/* ============================================================
   佳帝电子科技 JIADI_Tech 官网样式
   参照 hznazhong.com 设计风格
   主色: #0a65ab  深文字: #34364b  浅灰: #f1f4f9
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, :after, :before { box-sizing: border-box; background-repeat: no-repeat; }
body, form, img, ul, ol, li, dl, dt, dd, p, tr, td, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; }
body { font: 14px/24px "Microsoft YaHei", Arial, sans-serif; color: #333; background: #fff; -webkit-font-smoothing: antialiased; }
ul, li { list-style: none; }
img { max-width: 100%; border: 0; }
a { color: #333; text-decoration: none; cursor: pointer; }
a:hover { color: #0a65ab; }
em, i, b { font-style: normal; }
.clearfix:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }
.clear { clear: both; }
.commonweb { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.center { text-align: center; }
.padtb { padding: 50px 0; }

/* ---------- Back to Top ---------- */
.zdsbacktop { display: none; position: fixed; right: 15px; bottom: 80px; width: 45px; height: 45px; background: #0a65ab; border-radius: 50%; cursor: pointer; z-index: 999; }
.zdsbacktop::after { content: "↑"; display: block; color: #fff; font-size: 22px; line-height: 45px; text-align: center; }
.zdsbacktop.show { display: block; }

/* ============================================================
   HEADER - Pure flex layout
   ============================================================ */
header { border-bottom: 1px solid #f0f0f0; }
.headerweb { max-width: 1400px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; height: 60px; }

/* Logo */
.logo { flex-shrink: 0; }
.logo .logo-txt { display: flex; align-items: center; }
.logo .logo-txt .logo-icon { width: 40px; height: 40px; background: #0a65ab; border-radius: 6px; color: #fff; text-align: center; line-height: 40px; font-size: 20px; font-weight: bold; }
.logo .logo-txt .logo-name { padding-left: 12px; }
.logo .logo-txt .logo-name .cn { font-size: 20px; font-weight: bold; color: #333; line-height: 24px; }
.logo .logo-txt .logo-name .en { font-size: 10px; color: #999; line-height: 16px; text-transform: uppercase; }

/* Nav - takes remaining space */
.header-nav { flex: 1; padding-left: 40px; }
.header-nav > ul { display: flex; }
.header-nav > ul > li { position: relative; }
.header-nav > ul > li > h3 { font-size: 15px; font-weight: normal; }
.header-nav > ul > li > h3 > a { display: block; padding: 0 16px; line-height: 60px; color: #333; white-space: nowrap; }
.header-nav > ul > li.cur > h3 > a,
.header-nav > ul > li:hover > h3 > a { color: #0a65ab; }

/* Dropdown */
.header-nav > ul > li > .sub-nav { display: none; position: absolute; top: 60px; left: 0; background: #fff; min-width: 160px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 100; border-radius: 0 0 4px 4px; }
.header-nav > ul > li:hover > .sub-nav { display: block; }
.sub-nav .sub-item { border-bottom: 1px solid #f0f0f0; }
.sub-nav .sub-item h4 a { display: block; padding: 10px 20px; font-size: 14px; white-space: nowrap; }
.sub-nav .sub-item h4 a:hover { color: #0a65ab; background: #f8f8f8; }

/* Header right: search + mobile btn */
.header-right { flex-shrink: 0; display: flex; align-items: center; padding-left: 15px; margin-left: 15px; border-left: 1px solid #eee; }
.header-right .headsearch { display: flex; align-items: center; }
.header-right .search-form-inline { display: flex; align-items: center; }
.header-right .search-form-inline .searchtext { width: 180px; height: 36px; padding: 0 10px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 13px; outline: none; }
.header-right .search-form-inline .searchtext:focus { border-color: #0a65ab; }
.header-right .search-form-inline .searchbtn { height: 36px; padding: 0 14px; background: #0a65ab; color: #fff; border: 1px solid #0a65ab; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 13px; white-space: nowrap; }
.header-right .search-form-inline .searchbtn:hover { background: #084f84; }

/* Mobile nav button (hidden on desktop) */
.mobnav-btn { display: none; width: 30px; height: 30px; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; margin-left: 12px; }
.mobnav-btn span { display: block; width: 100%; height: 2px; background: #333; transition: all 0.3s; border-radius: 1px; }

/* ============================================================
   BANNER
   ============================================================ */
.indexbanner { width: 100%; position: relative; overflow: hidden; }
.indexbanner .swiper-wrapper { display: flex; transition: transform 0.5s ease; }
.indexbanner .swiper-slide { flex: 0 0 100%; min-width: 100%; }
.indexbanner .banner-slide { min-height: 420px; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 60px 20px; }
.banner-slide.slide-1 { background: linear-gradient(135deg, #0a65ab, #1a3a5c, #0d2137); }
.banner-slide.slide-2 { background: linear-gradient(135deg, #1a5276, #0a65ab, #154360); }
.banner-slide.slide-3 { background: linear-gradient(135deg, #0d2137, #1a3a5c, #0a65ab); }
.banner-slide .slide-txt h2 { font-size: 40px; font-weight: bold; line-height: 1.4; margin-bottom: 15px; }
.banner-slide .slide-txt p { font-size: 18px; opacity: .85; line-height: 1.6; max-width: 700px; margin: 0 auto 30px; }
.banner-slide .slide-txt .slide-btn { display: inline-block; padding: 12px 40px; border: 2px solid #fff; color: #fff; font-size: 16px; border-radius: 4px; transition: all .3s; }
.banner-slide .slide-txt .slide-btn:hover { background: #fff; color: #0a65ab; }

/* Banner dots */
.banner-pages { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.banner-pages span { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .3s; }
.banner-pages span.active { background: #fff; }

/* Banner arrows */
.banner-arrows { position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; width: 100%; pointer-events: none; }
.banner-arrows .b-arrow { position: absolute; width: 44px; height: 44px; background: rgba(0,0,0,.25); color: #fff; font-size: 22px; line-height: 44px; text-align: center; border-radius: 50%; cursor: pointer; pointer-events: auto; transition: background .3s; }
.banner-arrows .b-arrow:hover { background: rgba(0,0,0,.5); }
.b-arrow.b-prev { left: 20px; }
.b-arrow.b-next { right: 20px; }

/* ============================================================
   SECTION TITLES
   ============================================================ */
.index-text { margin-bottom: 35px; }
.index-text .cn { color: #34364b; font-weight: bold; font-size: 34px; }
.index-text .en { color: #999; font-weight: normal; margin-top: 5px; font-family: Arial, sans-serif; font-size: 16px; }
.index-more { margin-top: 30px; }
.index-more a { display: inline-block; padding: 10px 35px; border: 1px solid #0a65ab; color: #0a65ab; border-radius: 30px; font-size: 14px; transition: all .3s; }
.index-more a:hover { background: #0a65ab; color: #fff; }

/* ============================================================
   PRODUCT CATEGORIES CAROUSEL
   ============================================================ */
.inxSolution { background: #fff; }
.inxSolut-wrapper { position: relative; }
.inxSolut-min { overflow: hidden; }
.inxSolut-min .swiper-wrapper { display: flex; gap: 20px; transition: transform 0.4s ease; }
.inxSolut-min .swiper-slide { flex: 0 0 286px; min-width: 286px; }
.inxSolut-min .solut-img { height: 200px; overflow: hidden; border-radius: 6px; }
.inxSolut-min .solut-img img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform .5s; }
.inxSolut-min .swiper-slide:hover .solut-img img { transform: scale(1.08); }
.inxSolut-min .solut-text { text-align: center; padding: 15px 0; }
.inxSolut-min .solut-text .cn { color: #34364b; font-weight: bold; font-size: 18px; line-height: 1.6; }
.inxSolut-min .solut-text .en { color: #999; font-size: 12px; line-height: 1.5; }

/* ============================================================
   NEW ARRIVALS CAROUSEL
   ============================================================ */
.indxArrivals { background: #f9f9f9; }
.arrivals-wrapper { position: relative; }
.arrivalsp-min { overflow: hidden; }
.arrivalsp-min .swiper-wrapper { display: flex; transition: transform 0.4s ease; }
.arrivalsp-min .swiper-slide { flex: 0 0 220px; min-width: 220px; margin-right: 20px; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: box-shadow .3s; }
.arrivalsp-min .swiper-slide:last-child { margin-right: 0; }
.arrivalsp-min .swiper-slide:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.arrivalsp-min .solut-img { height: 180px; overflow: hidden; }
.arrivalsp-min .solut-img img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform .5s; }
.arrivalsp-min .swiper-slide:hover .solut-img img { transform: scale(1.06); }
.arrivalsp-min .solut-text { padding: 15px; text-align: center; }
.arrivalsp-min .solut-text h3 { font-size: 14px; color: #34364b; font-weight: normal; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Carousel nav buttons */
.index-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #999; cursor: pointer; transition: all .3s; user-select: none; }
.index-btn:hover { color: #0a65ab; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.index-prev { left: -18px; }
.index-next { right: -18px; }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.indxAboutus { display: flex; min-height: 420px; }
.indxAboutus .par-posimg { flex: 1; background-size: cover !important; background-position: center !important; }
.indxAboutus .par-content { flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center; color: #666; line-height: 1.9; }
.indxAboutus .par-content h2 { font-size: 30px; color: #0a65ab; margin-bottom: 20px; }
.indxAboutus .par-content p { margin-bottom: 10px; }

.whyus-grid { display: flex; gap: 30px; margin-top: 40px; }
.whyus-card { flex: 1; text-align: center; padding: 35px 20px; border: 1px solid #eee; border-radius: 8px; transition: all .3s; }
.whyus-card:hover { border-color: #0a65ab; box-shadow: 0 4px 20px rgba(10,101,171,.1); transform: translateY(-4px); }
.whyus-card .whyus-icon { width: 60px; height: 60px; line-height: 60px; font-size: 28px; border-radius: 50%; margin: 0 auto 18px; }
.whyus-card h3 { font-size: 18px; color: #34364b; margin-bottom: 12px; }
.whyus-card p { font-size: 14px; color: #888; line-height: 1.8; }

/* ============================================================
   NEWS CAROUSEL
   ============================================================ */
.indxNews { background: #fff; }
.indxNews-wraper { position: relative; }
.inxnews-list { overflow: hidden; }
.inxnews-list .swiper-wrapper { display: flex; transition: transform 0.4s ease; }
.inxnews-list .swiper-slide { flex: 0 0 280px; min-width: 280px; margin-right: 20px; }
.inxnews-list .swiper-slide:last-child { margin-right: 0; }
.inxnews-list .tiothumb { height: 180px; overflow: hidden; border-radius: 6px 6px 0 0; }
.inxnews-list .tiothumb img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform .5s; }
.inxnews-list .swiper-slide:hover .tiothumb img { transform: scale(1.06); }
.inxnews-list .tioinfor { padding: 15px; border: 1px solid #eee; border-top: 0; border-radius: 0 0 6px 6px; }
.inxnews-list .tioinfor .text { color: #34364b; font-size: 14px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inxnews-list .tioinfor .date { color: #999; font-size: 12px; margin-top: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #fff; border-top: 1px solid #ddd; font-size: 13px; line-height: 24px; }
.footer-top { padding: 40px 15px 30px; overflow: hidden; max-width: 1200px; margin: 0 auto; }
.footer-top > ul { display: flex; flex-wrap: wrap; }
.footer-top ul li.li1 { width: 16.66%; padding-right: 15px; }
.footer-top ul li.li2 { width: 16.66%; padding-left: 20px; border-left: 1px solid #eee; text-align: right; }
.footer-top ul li h3 { font-size: 16px; color: #34364b; margin-bottom: 12px; }
.footer-top ul li h3 a { color: #34364b; }
.footer-top ul li h3 a:hover { color: #0a65ab; }
.footer-sub a { display: block; color: #999; font-size: 13px; line-height: 28px; }
.footer-sub a:hover { color: #0a65ab; }
.li2 .telnum { color: #999; font-size: 12px; margin-top: 5px; }
.li2 .telnum a { color: #999; }
.friendlink { background: #f1f4f9; padding: 12px 0; text-align: center; font-size: 13px; color: #999; }
.friendlink a { color: #34364b; opacity: .7; padding-right: 10px; }
.friendlink a:hover { color: #0a65ab; opacity: 1; }
.foot-copy { text-align: center; padding: 10px 0; font-size: 12px; color: #999; border-top: 1px solid #f0f0f0; }
.foot-copy a { color: #999; text-decoration: none; }
.foot-copy a:hover { color: #0a65ab; }

/* ============================================================
   SUBPAGE: Banner + Breadcrumb
   ============================================================ */
.sub-banner { background: linear-gradient(135deg, #0a65ab, #1a5276); padding: 60px 0; text-align: center; color: #fff; }
.sub-banner h2 { font-size: 32px; font-weight: bold; }
.sub-banner p { font-size: 15px; opacity: .8; margin-top: 8px; font-family: Arial, sans-serif; }
.breadcrumb { max-width: 1200px; margin: 0 auto; padding: 15px; font-size: 13px; color: #999; }
.breadcrumb a { color: #999; }
.breadcrumb a:hover { color: #0a65ab; }

/* ============================================================
   SUBPAGE: Sidebar + Content Layout
   ============================================================ */
.sub-main { max-width: 1200px; margin: 0 auto 50px; padding: 0 15px; overflow: hidden; }
.sub-sidebar { width: 290px; float: left; }
.sub-sidebar .side-box { border: 1px solid #eee; margin-bottom: 20px; border-radius: 4px; overflow: hidden; }
.sub-sidebar .side-box h3 { font-size: 16px; background: #0a65ab; color: #fff; padding: 14px 18px; }
.sub-sidebar .side-box .side-list li { border-bottom: 1px solid #f0f0f0; }
.sub-sidebar .side-box .side-list li:last-child { border-bottom: 0; }
.sub-sidebar .side-box .side-list li a { display: block; padding: 12px 18px; font-size: 14px; color: #555; transition: all .2s; }
.sub-sidebar .side-box .side-list li a:hover,
.sub-sidebar .side-box .side-list li.active a { color: #0a65ab; background: #f8f8f8; }
.sub-sidebar .side-box .side-contact { padding: 15px 18px; color: #666; font-size: 13px; line-height: 2; }
.sub-content { margin-left: 310px; }
.sub-content .content-tit { font-size: 20px; color: #34364b; padding-bottom: 15px; border-bottom: 2px solid #0a65ab; margin-bottom: 25px; }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.pro-grid { overflow: hidden; }
.pro-grid .pro-item { width: 32%; float: left; margin-right: 2%; margin-bottom: 25px; border: 1px solid #eee; border-radius: 6px; overflow: hidden; transition: all .3s; text-decoration: none; color: inherit; display: block; }
.pro-grid .pro-item:nth-child(3n) { margin-right: 0; }
.pro-grid .pro-item:hover { border-color: #0a65ab; box-shadow: 0 4px 16px rgba(10,101,171,.1); }
.pro-grid .pro-item > div:first-child { overflow: hidden; }
.pro-grid .pro-item img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform .5s; }
.pro-grid .pro-item:hover img { transform: scale(1.05); }
.pro-grid .pro-item .pro-info { padding: 15px; text-align: center; }
.pro-grid .pro-item .pro-info h4 { font-size: 15px; color: #34364b; line-height: 1.5; }
.pro-grid .pro-item .pro-info .pro-tags { margin-top: 6px; }
.pro-grid .pro-item .pro-info .pro-tags span { display: inline-block; padding: 2px 8px; background: #f0f0f0; color: #999; font-size: 11px; border-radius: 2px; margin: 0 2px; }

/* Filter tabs */
.filter-tabs { margin-bottom: 25px; border-bottom: 2px solid #eee; padding-bottom: 15px; }
.filter-btn { display: inline-block; padding: 8px 22px; font-size: 14px; color: #666; cursor: pointer; border-radius: 30px; border: 1px solid #ddd; margin-right: 8px; margin-bottom: 6px; background: #fff; transition: all .3s; user-select: none; }
.filter-btn:hover { color: #0a65ab; border-color: #0a65ab; }
.filter-btn.active { background: #0a65ab; color: #fff; border-color: #0a65ab; }

/* ============================================================
   NEWS LIST
   ============================================================ */
.news-list li { padding: 18px 0; border-bottom: 1px solid #eee; overflow: hidden; }
.news-list li .n-date { float: left; width: 80px; text-align: center; }
.news-list li .n-date .day { font-size: 28px; color: #0a65ab; font-weight: bold; display: block; line-height: 1; }
.news-list li .n-date .mon { font-size: 12px; color: #999; }
.news-list li .n-info { margin-left: 100px; }
.news-list li .n-info h4 { font-size: 15px; color: #34364b; line-height: 1.5; }
.news-list li .n-info p { font-size: 13px; color: #999; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list li:hover .n-info h4 { color: #0a65ab; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-intro { line-height: 2; color: #555; font-size: 15px; text-indent: 2em; margin-bottom: 15px; }
.timeline { padding: 20px 0; }
.timeline .tl-item { padding: 0 0 25px 40px; border-left: 2px solid #0a65ab; position: relative; }
.timeline .tl-item:last-child { padding-bottom: 0; }
.timeline .tl-item::before { content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #0a65ab; }
.timeline .tl-item .tl-year { font-size: 18px; font-weight: bold; color: #0a65ab; margin-bottom: 6px; }
.timeline .tl-item .tl-text { font-size: 14px; color: #666; line-height: 1.8; }
.honor-grid { overflow: hidden; }
.honor-item { width: 30%; float: left; margin-right: 5%; margin-bottom: 20px; text-align: center; padding: 25px 15px; border: 1px solid #eee; border-radius: 6px; transition: all .3s; }
.honor-item:nth-child(3n) { margin-right: 0; }
.honor-item:hover { border-color: #0a65ab; box-shadow: 0 4px 12px rgba(10,101,171,.1); }
.honor-item .h-icon { font-size: 36px; margin-bottom: 10px; }
.honor-item h4 { font-size: 14px; color: #34364b; }
.honor-item p { font-size: 12px; color: #999; margin-top: 5px; }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 14px; color: #555; margin-bottom: 5px; }
.form-group label em { color: #e70012; }
.form-group input, .form-group textarea { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-family: 'Microsoft YaHei', sans-serif; outline: none; transition: border-color .3s; }
.form-group input:focus, .form-group textarea:focus { border-color: #0a65ab; box-shadow: 0 0 0 3px rgba(10,101,171,.08); }
.form-group textarea { height: 120px; resize: vertical; }
.form-submit { padding: 12px 50px; background: #0a65ab; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background .3s; }
.form-submit:hover { background: #085a9a; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { margin: 30px 0; text-align: center; }
.pagination a { display: inline-block; padding: 6px 15px; border: 1px solid #ddd; color: #666; border-radius: 3px; margin: 0 2px; }
.pagination a:hover, .pagination a.on { background: #0a65ab; color: #fff; border-color: #0a65ab; }

/* ============================================================
   TECHNOLOGY PAGE
   ============================================================ */
.tech-table { width: 100%; margin: 15px 0; border-collapse: collapse; }
.tech-table th, .tech-table td { padding: 10px 15px; border: 1px solid #eee; font-size: 14px; }
.tech-table th { background: #0a65ab; color: #fff; font-weight: bold; text-align: left; }
.tech-table td:first-child { font-weight: bold; background: #f9f9f9; width: 160px; }

/* ============================================================
   RESPONSIVE - Tablet (< 1024px)
   ============================================================ */
@media (max-width: 1023px) {
    .header-nav { display: none; position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px); background: #fff; padding: 0; overflow-y: auto; z-index: 999; }
    .header-nav.open { display: block; }
    .header-nav > ul { flex-direction: column; padding: 10px 0; }
    .header-nav > ul > li { border-bottom: 1px solid #f0f0f0; }
    .header-nav > ul > li > h3 > a { line-height: 48px; padding: 0 20px; font-size: 15px; }
    .header-nav > ul > li > .sub-nav { position: static; box-shadow: none; padding: 0 0 10px 25px; }
    .header-nav > ul > li > .sub-nav .sub-item h4 a { font-size: 13px; padding: 8px 0; }
    .mobnav-btn { display: flex; }
    .header-right { border-left: 0; margin-left: auto; padding-left: 0; }
    .header-right .search-form-inline .searchtext { width: 140px; }

    .indxAboutus { display: block; }
    .indxAboutus .par-posimg { height: 300px; min-height: auto !important; }
    .indxAboutus .par-content { padding: 35px 25px; }
    .indxAboutus .par-content h2 { font-size: 24px; }
    .whyus-grid { gap: 20px; flex-wrap: wrap; }
    .whyus-card { padding: 25px 15px; flex: 1 1 45%; }
    .whyus-card h3 { font-size: 16px; }

    .inxSolut-min .swiper-slide { flex: 0 0 44%; min-width: 44%; }
    .arrivalsp-min .swiper-slide { flex: 0 0 40%; min-width: 40%; }
    .inxnews-list .swiper-slide { flex: 0 0 44%; min-width: 44%; }
    .banner-slide { min-height: 300px; }
    .banner-slide .slide-txt h2 { font-size: 28px; }
    .banner-slide .slide-txt p { font-size: 15px; }

    .sub-sidebar { width: 100%; float: none; margin-bottom: 25px; }
    .sub-content { margin-left: 0; }
    .sub-sidebar .side-box.side-contact-box { display: none; }
    .pro-grid .pro-item { width: 48%; }
    .pro-grid .pro-item:nth-child(3n) { margin-right: 2%; }
    .pro-grid .pro-item:nth-child(2n) { margin-right: 0; }
    .honor-item { width: 48%; margin-right: 4%; }
    .honor-item:nth-child(3n) { margin-right: 4%; }
    .honor-item:nth-child(2n) { margin-right: 0; }

    .footer-top > ul { display: block; }
    .footer-top ul li.li1 { width: 33.33%; float: left; margin-bottom: 20px; }
    .footer-top ul li.li2 { width: 100%; float: left; border-left: 0; padding-left: 0; text-align: left; margin-top: 20px; }

    .index-text .cn { font-size: 26px; }
    .index-text .en { font-size: 14px; }
}

/* ============================================================
   RESPONSIVE - Mobile (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    .headerweb { height: 50px; }
    .logo .logo-txt .logo-icon { width: 32px; height: 32px; line-height: 32px; font-size: 16px; }
    .logo .logo-txt .logo-name .cn { font-size: 16px; }
    .logo .logo-txt .logo-name .en { font-size: 9px; }
    .header-right .search-form-inline .searchtext { width: 120px; }
    .header-nav { top: 50px; height: calc(100vh - 50px); }
    .header-nav > ul > li > h3 > a { line-height: 42px; }

    .inxSolut-min .swiper-slide { flex: 0 0 80%; min-width: 80%; }
    .arrivalsp-min .swiper-slide { flex: 0 0 66%; min-width: 66%; }
    .inxnews-list .swiper-slide { flex: 0 0 82%; min-width: 82%; }
    .banner-slide { min-height: 240px; padding: 40px 15px; }
    .banner-slide .slide-txt h2 { font-size: 22px; }
    .banner-slide .slide-txt p { font-size: 13px; }
    .banner-slide .slide-txt .slide-btn { padding: 8px 28px; font-size: 14px; }
    .banner-arrows .b-arrow { width: 34px; height: 34px; font-size: 16px; line-height: 34px; }
    .b-arrow.b-prev { left: 8px; }
    .b-arrow.b-next { right: 8px; }

    .padtb { padding: 30px 0; }
    .pro-grid .pro-item { width: 100%; margin-right: 0; }
    .honor-item { width: 100%; margin-right: 0; }
    .index-text .cn { font-size: 22px; }
    .index-text .en { font-size: 13px; }
    .index-prev { left: 0; }
    .index-next { right: 0; }
    .news-list li .n-date { width: 60px; }
    .news-list li .n-info { margin-left: 75px; }
    .news-list li .n-date .day { font-size: 22px; }
    .sub-banner { padding: 35px 15px; }
    .sub-banner h2 { font-size: 24px; }

    .footer-top ul li.li1 { width: 50%; }
    .indxAboutus .par-posimg { height: 200px; }
    .indxAboutus .par-content { padding: 25px 18px; }
    .indxAboutus .par-content h2 { font-size: 20px; }
    .whyus-grid { flex-direction: column; gap: 15px; }
    .whyus-card { flex: auto; }
    #amapContainer { float: none !important; width: 100% !important; margin-top: 15px; }
}