@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 1300px) {
  .w {
    width: 1300px;
    margin: 0 auto;
  }
  a {
    text-decoration: none;
  }
  .navbar {
    overflow: hidden;
  }
  .navbar .active {
    color: #007bff;
  }
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 17px 31px;
    text-decoration: none;
    font-size: 18px;
  }
  .navbar a:hover {
    color: #007bff !important;
  }
  .active {
    color: #007bff;
  }
  .lang-switch {
    float: right;
  }
  .navtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navtop .navtop-left {
    width: 192px;
    height: 44px;
  }
  .navtop .navtop-right {
    display: flex;
    align-items: center;
  }
  .navtop .navtop-right .navtop-av {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  .navtop .navtop-right .navtop-av img {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
  .navtop .navtop-right .navtop-ch {
    font-size: 18px;
    color: #ffffff;
  }
  .p_1 {
    height: 100vh;
    /* 核心属性：Y轴滚动捕捉，强制捕捉 */
  }
  .p_1 .p_2 {
    width: 100%;
    height: 100vh;
  }
  .p_1 .p_2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 关键：保持比例铺满，多余部分裁掉 */
  }
  .p_1 .p_2 .swiper {
    height: 100%;
  }
  .p_3 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999999999;
    padding: 20px 0;
  }
  .p_4 {
    padding: 122px 0;
    background: url("../images/77_02.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
    box-sizing: border-box;
    background-position: center;
  }
  .p_4 .p_5 {
    display: flex;
    justify-content: space-between;
  }
  .p_4 .buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    width: 639px;
  }
  .p_4 .button {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  .p_4 .btn {
    padding: 20px 39px;
    border-radius: 40px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    background-color: #4881cc;
    color: #ffffff;
  }
  .p_4 .btn:hover {
    background-color: #ffffff;
    color: #012967;
  }
  .p_4 .btn-primary {
    background-color: #fff;
    color: #053a80;
    font-weight: bold;
  }
  .p_4 .btn-outline {
    border: 1px solid #fff;
    color: #fff;
  }
  .pc_1 {
    padding: 122px 0;
    height: 100vh;
    box-sizing: border-box;
    background: url("../images/10_02.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
  .p_6 {
    font-size: 72px;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
  }
  .p_7 {
    font-size: 48px;
    color: #ffffff;
    margin-bottom: 80px;
  }
  .p_8 {
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 30px;
  }
  .p_9 {
    font-size: 14px;
    color: #ffffff;
    width: 639px;
    margin-bottom: 77px;
    line-height: 30px;
  }
  .pc_3 {
    display: flex;
    align-items: center;
  }
  .pc_3 .pc_4 {
    width: 60px;
    height: 65px;
    margin-right: 20px;
  }
  .pc_3 .pc_4 img {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
  .pc_3 .pc_5 {
    font-size: 14px;
    color: #ffffff;
  }
  .product-categories {
    width: 300px;
    padding: 30px;
    border-radius: 10px;
  }
  .product-categories ul li {
    padding: 15px 0;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    margin-bottom: 40px;
    padding-left: 34px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 34px;
  }
  .product-categories ul li:hover .fa-circle::before {
    content: "\f192" !important;
    color: #042b69;
  }
  .product-categories ul li:hover {
    background-color: #eff0f4;
    border-radius: 10px;
    color: #012967;
  }
  .product-categories ul li a {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: left;
  }
  .product-categories ul li:hover a {
    color: #012967 !important;
  }
  .product-categories ul li:last-child {
    border-bottom: none;
  }
  .product-categories ul li.active {
    color: #00aeff;
    font-weight: bold;
  }
  .fa-regular {
    margin-right: 10px;
  }
  .fa-circle-dot::before {
    content: "" !important;
  }
  .pc_2 {
    display: flex;
    justify-content: space-between;
  }
  .pc_6 {
    height: 100vh;
    padding: 122px 0;
    box-sizing: border-box;
    background: url("../images/12_02.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .hexagon-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 50px;
  }
  .hex-row {
    display: flex;
    gap: 20px;
  }
  .hexagon {
    width: 160px;
    height: 180px;
    background: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
  }
  .hex-content {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hex-content img {
    max-width: 100%;
  }
  .hexagon:hover {
    transform: scale(1.05);
  }
  .hex-row.offset {
    margin-top: -40px;
    /* Pull second row up to nest */
  }
  .count_1 {
    padding: 122px 0;
    box-sizing: border-box;
    background: url("../images/14_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-position: center;
  }
  .count_2 .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 51px;
  }
  .count_2 .news-card {
    background: #fff;
    color: #333;
    border-radius: 5px;
    overflow: hidden;
  }
  .count_2 .news-img {
    height: 280px;
    overflow: hidden;
  }
  .count_2 .news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  .count_2 .news-card:hover .news-img img {
    transform: scale(1.1);
  }
  .count_2 .news-body {
    padding: 20px;
  }
  .count_2 .news-body h4 {
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: bold;
  }
  .count_2 .news-body .date {
    font-size: 12px;
    color: #888;
    display: block !important;
  }
  .count_2 .pd_1 {
    font-size: 18px;
    color: #000000;
    font-weight: 700;
  }
  .pd_2 {
    padding: 122px 0;
    box-sizing: border-box;
    background: url("../images/16_12.jpg");
    height: 100vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .pd_2 .pd_3 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .app-icons {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
  }
  .app-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #fff;
  }
  .pd_4 {
    width: 40px;
  }
  .pd_4 img {
    max-width: 100%;
  }
  .pd_5 {
    font-size: 18px;
    color: #ffffff;
  }
  .pd_7 {
    padding: 21px 46px;
    font-size: 18px;
    color: #ffffff;
    background-color: #375a99;
    height: 70px;
    box-sizing: border-box;
    opacity: 0.9;
    border-radius: 40px;
  }
  .pd_6 {
    display: flex;
    justify-content: space-between;
  }
  .pd_9 {
    padding: 122px 0;
    box-sizing: border-box;
    background: url("../images/18_02.png");
    height: 100vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .jc_2 {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 80px;
    text-align: justify;
    width: 860px;
    line-height: 30px;
  }
  .quality-images {
    flex: 1;
    display: flex;
    gap: 118px;
  }
  .q-img {
    flex: 1;
    height: 263px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
  .q-img:hover img {
    transform: scale(1.5);
  }
  .q-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  .jc_3 {
    padding: 122px 0;
    height: 800px;
    box-sizing: border-box;
    background: url("../images/20_02.png");
  }
  .jc_4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .jc_4 .qr-box {
    width: 385px;
    height: 215px;
  }
  .jc_4 .qr-box img {
    max-width: 100%;
  }
  .jc_4 .copyright {
    margin-top: 30px;
    font-size: 12px;
    color: #ffffff;
  }
  .jc_4 .copyright a {
    color: #ffffff;
  }
  .jc_4 .company-name {
    font-size: 18px;
    margin: 20px 0;
    color: #ffffff;
  }
  .jc_4 .contact-list li {
    margin-bottom: 30px;
    display: flex;
  }
  .jc_4 .jc_7 {
    width: 48px;
    height: 48px;
    margin-right: 21px;
  }
  .jc_4 .jc_8 {
    font-size: 18px;
    color: #ffffff;
  }
  .jc_4 .jc_6 {
    width: 573px;
  }
  .jc_9 {
    position: relative;
    width: 100%;
    height: 800px;
  }
  .jc_9 img {
    max-width: 100%;
  }
  .g_1 {
    padding: 40px 0;
    /* 标签区域 */
  }
  .tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
  }
  .tab {
    padding: 14px 45px;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid #0e3370;
    color: #022868;
    transition: all 0.3s ease;
    border-radius: 25px;
    margin-right: 80px;
  }
  .tab.active {
    background: #0a1e46;
    color: #fff;
    border-color: #0a1e46;
  }
  .tab:hover {
    background-color: #022868;
    color: #ffffff;
  }
  .about-title {
    font-size: 90px;
    color: #ccc;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: -90px;
    opacity: 0.3;
  }
  .section-title {
    font-size: 48px;
    color: #003366;
    font-weight: bold;
    margin-bottom: 40px;
    position: relative;
  }
  .g_2 {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .about-img {
    width: 45%;
    height: 620px;
  }
  .about-img img {
    max-width: 100%;
    height: 100%;
  }
  .about-text {
    width: 50%;
    font-size: 14px;
    color: #555;
    line-height: 2;
  }
  .about-text p {
    margin-bottom: 20px;
    text-indent: 2em;
  }
  .g_4 {
    width: 100%;
    height: 760px;
  }
  .g_4 img {
    max-width: 100%;
  }
  .section-honor {
    background-image: linear-gradient(to bottom, #003366, #001a33);
    padding: 60px 0 20px 0;
    text-align: center;
    color: #fff;
    background: url("../images/27_02.png");
    background-repeat: no-repeat;
  }
  /* 通用容器：1300px */
  .container {
    width: 1300px;
    margin: 0 auto;
    position: relative;
  }
  .tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
  }
  .culture-grid {
    display: flex;
    gap: 20px;
  }
  .culture-sidebar {
    width: 280px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: url("../images/26_03.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 590px;
  }
  .culture-sidebar h2 {
    writing-mode: vertical-rl;
    font-size: 36px;
    letter-spacing: 5px;
    z-index: 1;
  }
  .culture-sidebar span {
    writing-mode: vertical-rl;
    font-size: 14px;
    margin-right: 10px;
    opacity: 0.7;
    z-index: 1;
    text-transform: uppercase;
  }
  .card {
    background-color: #f4f6f9;
    padding: 40px;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.3s;
  }
  .card h3 {
    margin-top: 70px;
    margin-left: 16px;
    font-weight: 700;
  }
  .card p {
    color: #333333;
    margin-left: 16px;
  }
  .card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  .card.card-large {
    grid-column: span 2;
  }
  .card-num {
    font-size: 40px;
    font-weight: bold;
    color: #003366;
    margin-bottom: 10px;
  }
  .card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
  }
  .card p {
    color: #666;
    font-size: 14px;
  }
  .card-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
  }
  .cube-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 114, 255, 0.3);
  }
  .culture-cards {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
  }
  .section-culture {
    padding: 40px 0;
  }
  .g_5 {
    background: url("../images/26_05.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .g_6 {
    background: url("../images/26_07.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .g_7 {
    background: url("../images/26_11.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .honor-title {
    font-size: 90px;
    font-weight: bold;
    opacity: 0.1;
    margin-bottom: -30px;
  }
  .section-honor h2 {
    font-size: 32px;
    margin-bottom: 50px;
  }
  /* Swiper 外部容器 */
  .honor-swiper-wrap {
    position: relative;
    padding-bottom: 20px;
    padding-top: 30px;
  }
  .swiper {
    width: 100%;
    /* 不需要设置固定高度，由内容撑开 */
  }
  /* 单个 Slide：现在代表“一页”，包含8个证书 */
  .swiper-slide {
    /* 默认 Swiper slide 是 flex，这里不需要居中，由内部 Grid 布局 */
    box-sizing: border-box;
  }
  /* 核心布局：8宫格容器 (2行 x 4列) */
  .honor-grid-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4列 */
    grid-template-rows: repeat(2, auto);
    /* 2行 */
    gap: 30px;
    /* 间距 */
    padding: 10px 10px;
    /* 防止阴影被切 */
    justify-items: center;
    /* 水平居中 */
  }
  /* 证书卡片样式 */
  .cert-item {
    width: 235px;
    height: 328px;
    display: flex;
    justify-content: center;
    margin-bottom: 120px;
  }
  .cert-img {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 5px solid #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
  }
  .cert-img:hover {
    transform: translateY(-10px);
  }
  .cert-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* 底部导航按钮区域 */
  .honor-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 10;
  }
  .nav-arrow {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s;
    user-select: none;
  }
  .nav-arrow:hover {
    background: #fff;
    color: #003366;
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  }
  /* 禁用状态（如果是普通模式非循环） */
  .nav-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
    color: #aaa;
  }
  .g_8 {
    font-size: 48px;
    color: #fefeff;
    font-weight: 700;
  }
  .section-partner {
    height: 850px;
  }
  .g_9 {
    width: 100%;
    height: 100%;
  }
  .c_1 {
    /* --- 顶部 Banner (视觉装饰) --- */
    /* 分类导航 */
  }
  .c_1 .header-bg {
    height: 300px;
    background: linear-gradient(135deg, #0f2c68 0%, #1a4da1 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .c_1 .header-bg h1 {
    font-size: 48px;
    letter-spacing: 2px;
  }
  .c_1 .category-nav {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .c_1 .cat-btn {
    position: relative;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    width: 236px;
    height: 130px;
    text-align: center;
    line-height: 130px;
    font-size: 18px;
    border-radius: 20px;
    overflow: hidden;
  }
  .c_1 .cat-btn::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #022969;
    opacity: 0.6;
    border-radius: 20px;
    overflow: hidden;
    display: none;
  }
  .c_1 .cat-btn:hover::after {
    display: block;
  }
  .c_1 .cat-btn:hover .c_3 {
    color: #ffffff;
  }
  .c_1 .cat-btn:nth-child(1) {
    background: url("../images/58_03.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .c_1 .cat-btn:nth-child(2) {
    background: url("../images/30_05.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .c_1 .cat-btn:nth-child(3) {
    background: url("../images/30_07.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .c_1 .cat-btn:nth-child(4) {
    background: url("../images/30_09.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .c_1 .cat-btn:nth-child(5) {
    background: url("../images/30_11.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .c_2 {
    padding: 30px 0;
  }
  .c_3 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 130px;
    font-size: 18px;
    color: #333333;
    z-index: 1;
  }
  /* --- 上半部分：蓝底 + 右侧大图 --- */
  .top-section {
    background-color: #00205b;
    /* 深蓝背景 */
    height: 500px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .top-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .top-swiper {
    width: 100%;
    height: 100%;
  }
  /* Slide 布局：左文右图 */
  .top-slide-content {
    display: flex;
    width: 100%;
    height: 100%;
  }
  /* 左侧文字区 */
  .text-area {
    width: 35%;
    padding: 60px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 10;
  }
  .text-area h2 {
    font-size: 32px;
    margin-bottom: 20px;
    border-left: 4px solid #fff;
    padding-left: 15px;
  }
  .text-area p {
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.9;
    margin-bottom: 40px;
  }
  /* 自定义导航箭头 (在左侧区域内) */
  .custom-nav {
    display: flex;
    gap: 20px;
  }
  .nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #00205b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
  }
  .nav-btn:hover {
    background: #ccc;
  }
  .nav-btn.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
  }
  /* 右侧图片区 */
  .image-area {
    width: 65%;
    height: 100%;
  }
  /* 稍微做一点倾斜切割效果模拟原图 */
  .image-area-inner {
    width: 100%;
    height: 100%;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  }
  /* --- 下半部分：4图展示 + 条形分页 --- */
  .bottom-section {
    padding: 40px 0;
    background: #fff;
    max-width: 1300px;
    margin: 0 auto;
  }
  .bottom-swiper {
    padding-bottom: 50px !important;
    /* 给分页器留位置 */
  }
  /* 每一页展示 4 张图的容器 */
  .four-grid {
    display: flex;
    gap: 20px;
    width: 280px;
  }
  .four-grid img {
    width: 100%;
    height: 100%;
  }
  /* --- 自定义条形分页器 --- */
  .custom-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
  }
  .swiper-pagination-bullet {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #ccc;
    opacity: 1;
    transition: 0.3s;
    margin: 0 !important;
  }
  .swiper-pagination-bullet-active {
    background: #022969 !important;
    width: 60px;
    /* 激活时变长 */
  }
  /* --- 上半部分：蓝底 + 右侧大图 --- */
  .top-section {
    background-color: #00205b;
    /* 深蓝背景 */
    height: 500px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .top-swiper {
    width: 100%;
    height: 100%;
  }
  /* Slide 布局：左文右图 */
  .top-slide-content {
    display: flex;
    width: 100%;
    height: 100%;
  }
  /* 左侧文字区 */
  .text-area {
    width: 35%;
    padding: 60px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 10;
  }
  .text-area h2 {
    font-size: 32px;
    margin-bottom: 20px;
    border-left: 4px solid #fff;
    padding-left: 15px;
  }
  .text-area p {
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.9;
    margin-bottom: 40px;
  }
  /* 自定义导航箭头 (在左侧区域内) */
  .custom-nav {
    display: flex;
    gap: 20px;
  }
  .nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #00205b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
  }
  .nav-btn:hover {
    background: #ccc;
  }
  .nav-btn.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
  }
  /* 右侧图片区 */
  .image-area {
    width: 65%;
    height: 100%;
  }
  /* 稍微做一点倾斜切割效果模拟原图 */
  .image-area-inner {
    width: 100%;
    height: 100%;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  }
  .bottom-swiper {
    padding-bottom: 50px !important;
    /* 给分页器留位置 */
  }
  /* 每一页展示 4 张图的容器 */
  .product-good {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    width: 280px;
    height: 450px;
    position: relative;
    overflow: hidden;
    /* 防止图片或遮罩溢出圆角（如果有的话） */
    border-radius: 20px;
  }
  .product-good img {
    transition: transform 0.5s;
    max-width: 100% !important;
  }
  .product-good:hover img {
    transform: scale(1.1);
  }
  /* --- 自定义条形分页器 --- */
  .custom-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
  }
  .swiper-pagination-bullet {
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background-color: #ccd4e1;
    opacity: 1;
    transition: 0.3s;
    margin: 0 !important;
  }
  /* 占位填充 */
  .features-mock {
    height: 300px;
    background: #001845;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .c_4 {
    position: relative;
    z-index: 10;
    width: 1300px;
    /* 设定宽度 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* 垂直排列：上标题，下卡片 */
    justify-content: center;
    /* --- 单个卡片 --- */
    /* 卡片数字 */
    /* 卡片文字 */
    /* --- 错落布局 --- */
    /* 两边的低一些 */
    /* 中间的高一些 */
  }
  .c_4 .card {
    width: 250px;
    height: 380px;
    /* 模拟图片的微弱渐变白底 */
    background: linear-gradient(170deg, #eef3f8 0%, #d0dbe8 100%);
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
  }
  .c_4 .card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  }
  .c_4 .card-num {
    font-size: 60px;
    font-weight: 900;
    color: #002355;
    /* 深蓝字 */
    margin-bottom: auto;
    /* 将数字顶上去，文字压下来 (或者反过来) */
    text-align: center;
    font-family: "Arial Black", sans-serif;
    margin-top: 10px;
  }
  .c_4 .card-text {
    font-size: 16px;
    color: #1a3c6e;
    line-height: 1.6;
    text-align: left;
    font-weight: 600;
    padding-bottom: 20px;
  }
  .c_4 .card.side {
    transform: translateY(40px);
  }
  .c_4 .card.middle {
    transform: translateY(-40px);
    height: 400px;
    /* 中间稍微大一点 */
    z-index: 2;
    /* 稍微浮起 */
  }
  .c_4 .card:nth-child(1) {
    background: url("../images/33_06.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .c_4 .card:nth-child(2) {
    background: url("../images/33_03.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .c_4 .card:nth-child(3) {
    background: url("../images/33_09.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  /* --- 标题区域 --- */
  .header {
    position: absolute;
    top: 50px;
    left: 0;
    /* 标题靠左 */
    z-index: 5;
  }
  .header h1 {
    font-size: 140px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    /* 极淡的水印效果 */
    line-height: 1;
    text-transform: uppercase;
    font-family: Impact, "Arial Black", sans-serif;
    letter-spacing: 4px;
    margin-left: -10px;
  }
  .header h2 {
    font-size: 42px;
    color: #ffffff;
    font-weight: bold;
    margin-top: -60px;
    /* 拉上去叠加 */
    margin-left: 15px;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
  /* --- 卡片容器 --- */
  .cards-container {
    margin-top: 200px;
    display: flex;
    gap: 40px;
    /* 关键代码：将卡片推到右侧 */
    margin-left: auto;
    padding-right: 20px;
    /* 右侧稍微留一点余地 */
  }
  .c_5 {
    background: url("../images/33_02.png");
    width: 100%;
    height: 757px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  /* --- Application 应用 --- */
  .app-section {
    padding: 40px 0;
    background: #fff;
  }
  .app-layout {
    display: flex;
    gap: 50px;
  }
  .app-left {
    width: 45%;
  }
  .app-left img {
    max-width: 100%;
  }
  .app-left .grid-box {
    background: #ccc;
    height: 60px;
  }
  /* 模拟中间大LOGO */
  .app-left .logo-box {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    background: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
  }
  .app-right {
    width: 55%;
  }
  .app-right h2 {
    font-size: 90px;
    color: #ccc;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .app-right h2 span {
    color: var(--primary-blue);
    display: block;
    font-size: 48px;
    color: #333;
    margin-top: 5px;
  }
  .app-right p {
    font-size: 14px;
    line-height: 2;
    color: #666;
    margin-top: 20px;
  }
  /* --- Footer --- */
  footer {
    background: #00133a;
    color: #fff;
    padding: 60px 0 20px;
  }
  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
  }
  .contact-info h2 {
    font-size: 32px;
    margin-bottom: 10px;
  }
  .contact-info p {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 30px;
  }
  .info-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    opacity: 0.8;
  }
  .info-list li i {
    width: 24px;
    height: 24px;
    background: #1a3d7c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }
  .qr-section {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .qr-box {
    width: 100px;
    height: 100px;
    padding: 5px;
  }
  .copyright {
    text-align: center;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
  }
  .c_6 {
    width: 100%;
    height: 100vh;
    background: url("../images/35_01.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .hero {
    position: relative;
    width: 100%;
    height: 100%;
    /* 初始背景图 */
    background-size: cover;
    background-position: center;
    transition: background-image 0.6s ease-in-out;
    /* 背景平滑过渡 */
  }
  .display-area {
    position: relative;
    z-index: 2;
    padding: 15vh 10%;
    max-width: 900px;
    color: #fff;
    /* 动画基础状态 */
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s ease;
  }
  /* 切换时的隐藏状态 */
  .display-area.animating {
    opacity: 0;
    transform: translateY(20px);
  }
  .display-area h1 {
    font-size: 56px;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 2px;
  }
  .display-area p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
  }
  .c_7 {
    padding-top: 370px;
    margin-bottom: 100px;
  }
  .c_8 {
    font-size: 48px;
    color: #ffffff;
    margin-bottom: 58px;
  }
  .c_9 {
    font-size: 18px;
    color: #ffffff;
    width: 700px;
  }
  .pz_1 {
    display: flex;
    justify-content: space-between;
  }
  /* 文字内容过渡 */
  #c_7 {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cj_1 {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cj_2 {
    font-size: 14px;
    color: #5c5c5c;
    margin-bottom: 40px;
    text-align: center;
  }
  .cj_3 {
    margin-bottom: 116px;
  }
  .cj_3 img {
    max-width: 100%;
  }
  .cj_4 {
    width: 100%;
    height: 80vh;
    /* 容器高度设定为80%，让图片有机会超出 */
    display: flex;
    position: relative;
  }
  /* 背景网格装饰 */
  .grid-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 40px 40px;
    pointer-events: none;
  }
  /* --- 左侧区域 --- */
  .left-panel {
    flex: 0 0 40%;
    position: relative;
    z-index: 10;
    /* 保证左侧层级高 */
    background: url("../images/56_02.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  /* 1. 左侧3D图：超出盒子顶部 */
  .floating-obj {
    position: absolute;
    top: -150px;
    /* 负值让它跑出去 */
    left: -50px;
    width: 350px;
    height: 350px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0, 210, 255, 0.3));
    animation: float 6s ease-in-out infinite;
    z-index: 5;
  }
  /* --- 核心交互区 (圆环+菜单) --- */
  .hub-center {
    position: absolute;
    top: 50%;
    right: 0;
    /* 靠在左侧面板的右边缘 */
    transform: translate(50%, -50%);
    /* 让圆心正好压在中线上 */
    width: 600px;
    height: 600px;
    background: url("../images/57_05.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  /* 同心圆 */
  .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.1);
  }
  .r1 {
    width: 180px;
    height: 180px;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .r2 {
    width: 320px;
    height: 320px;
    border-color: rgba(255, 255, 255, 0.15);
  }
  .r3 {
    width: 480px;
    height: 480px;
    border-color: rgba(255, 255, 255, 0.05);
  }
  /* 中间 LOGO */
  .logo-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #2196f3, #00d2ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    box-shadow: 0 0 50px rgba(0, 210, 255, 0.6);
    z-index: 20;
  }
  /* --- 2. 弧形菜单 & 3. 文字特效 --- */
  .arc-menu {
    position: absolute;
    top: 260px;
    left: 40px;
    list-style: none;
    /* 这里不需要宽高，依靠子元素定位 */
  }
  .arc-menu li {
    position: absolute;
    top: 0;
    left: 0;
    /* 核心技巧：所有li都在圆心，通过transform移动到圆弧上 */
    transform-origin: center center;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  /* 菜单文字样式 */
  .menu-text {
    display: block;
    font-size: 18px;
    color: #ffffff;
    padding: 8px 15px;
    /* 特效：玻璃态背景（未选中时隐藏） */
    background: rgba(255, 255, 255, 0);
    border-radius: 20px;
    /* 特效：文字阴影 */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }
  /* --- 计算位置 (手动分布在左侧圆弧) --- */
  /* 半径设为 260px 左右 */
  /* 第1个：向上旋转30度 */
  .arc-menu li:nth-child(1) {
    transform: rotate(-35deg) translate(-280px) rotate(35deg);
  }
  /* 第2个 */
  .arc-menu li:nth-child(2) {
    transform: rotate(-22deg) translate(-270px) rotate(22deg);
  }
  /* 第3个 */
  .arc-menu li:nth-child(3) {
    transform: rotate(-10deg) translate(-265px) rotate(10deg);
  }
  /* 第4个 (中间) */
  .arc-menu li:nth-child(4) {
    transform: rotate(2deg) translate(-260px) rotate(-2deg);
  }
  /* 第5个 */
  .arc-menu li:nth-child(5) {
    transform: rotate(14deg) translate(-265px) rotate(-14deg);
  }
  /* 第6个 */
  .arc-menu li:nth-child(6) {
    transform: rotate(26deg) translate(-275px) rotate(-26deg);
  }
  /* 选中态/悬停态特效 */
  .arc-menu li:hover .menu-text,
  .arc-menu li.active .menu-text {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    /* 渐变文字 */
    background: linear-gradient(to right, #fff, #b3e5fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 发光阴影 */
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.8));
    /* 只有选中的才有边框背景 */
    /* border: 1px solid rgba(0, 210, 255, 0.3); */
  }
  /* 选中项前面的小光点装饰 */
  .arc-menu li.active::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 50%;
    width: 40px;
    /* 连接线 */
    height: 2px;
    background: linear-gradient(to right, #00d2ff, transparent);
    transform: translateY(-50%);
  }
  /* --- 右侧区域 --- */
  .right-panel {
    flex: 1;
    position: relative;
    /* 这里的关键：不隐藏溢出，让图片可以突出去 */
    display: flex;
    align-items: center;
  }
  /* 2. 右侧图片：大于盒子高度 */
  .right-img-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    /* 高度设为 120%，让它上下都超出父容器 */
    height: 120%;
    top: -10%;
    /* 向上偏移一半的超出量，使其垂直居中 */
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    z-index: 5;
  }
  .right-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  /* 悬停微动效果 */
  .right-img-wrapper:hover img {
    transform: scale(1.05);
  }
  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  .cj_5 {
    padding: 80px 0 40px 0;
  }
  /* --- 容器设置 --- */
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 两列等宽 */
    gap: 40px;
    /* 基础间距 */
    max-width: 95%;
    /* 关键：因为右侧下沉了，给底部多留点空间，防止被截断 */
    padding: 40px 40px 100px 40px;
  }
  /* --- 【核心功能】错位布局 --- */
  /* 选中第2个和第4个元素（即右边那一列） */
  .grid-container .grid-item:nth-child(even) {
    /* 向下平移 70px，形成错位感 */
    transform: translateX(10px);
  }
  /* --- 图片样式 --- */
  .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    display: block;
    position: relative;
    z-index: 10;
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    /* 阴影加深一点，增强立体感 */
  }
  /* --- 手机端适配 --- */
}

@media screen and (min-width: 1300px) and (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    /* 单列 */
    gap: 60px;
    padding-bottom: 40px;
  }
  /* 手机端取消错位，否则会很难看 */
  .grid-container .grid-item:nth-child(even) {
    transform: none;
  }
}

@media screen and (min-width: 1300px) {
  .grid-items {
    position: relative;
    width: 100%;
    border-radius: 15px;
    transition: transform 0.3s ease;
    /* 加个过渡，如果做悬停效果会很顺滑 */
    width: 590px;
    height: 430px;
    overflow: hidden;
  }
  .grid-items:hover img {
    transform: scale(1.5);
  }
  .grid-items img {
    transition: transform 0.5s;
  }
  .decor-right::after {
    position: absolute;
    right: -20px;
    top: 0;
    content: "";
    width: 40px;
    height: 50%;
    background-color: #022969;
    display: block;
    z-index: -1;
    border-radius: 30px;
  }
  .decor-left::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 40px;
    height: 50%;
    background-color: #022969;
    display: block;
    z-index: -1;
    border-radius: 30px;
  }
  .cj_6 {
    transform: translateX(-40px);
    overflow: hidden;
  }
  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .news-card {
    background: #fff;
    border-bottom: 2px solid transparent;
    /* 预留底部边框位置 */
    border-radius: 8px;
    height: 450px;
    /* 固定高度，保证布局整齐 */
    padding: 35px 30px;
    overflow: hidden;
    /* 关键：隐藏溢出内容 */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
  }
  /* 内部容器：用于控制整体移动 */
  .card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* 平滑移动动画 */
  }
  /* 文字部分 */
  .date {
    font-size: 14px;
    color: #999;
    margin-bottom: 15px;
  }
  .date span {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-right: 5px;
  }
  .news-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.5;
    height: 54px;
    /* 固定两行高度 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.3s;
  }
  /* --- 按钮 (位于文字下，图片上) --- */
  .view-btn {
    display: inline-block;
    width: 130px;
    padding: 9px 0;
    border: 1px solid #ccc;
    border-radius: 25px;
    text-align: center;
    font-size: 14px;
    color: #666;
    background: transparent;
    transition: all 0.3s ease;
    margin-top: 20px;
    /* 按钮不设置 margin-bottom，让图片紧贴 */
  }
  /* --- 图片容器 (位于按钮正下方) --- */
  .expandable-image-box {
    position: relative;
    height: 0;
    width: 100%;
    opacity: 0;
    margin-top: 0;
    /* 初始无间距 */
    border-radius: 6px;
    /* 动画：高度展开 + 淡入 */
    transition: height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
  }
  .expandable-image-box img {
    width: 100%;
    height: 160px;
    /* 图片显示的固定高度 */
    object-fit: cover;
    display: block;
  }
  /* ================= 悬停交互逻辑 ================= */
  /* 1. 卡片边框和阴影 */
  .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    border-bottom-color: var(--primary-blue);
    /* 底部亮条 */
  }
  /* 2. 核心：整体内容上移 */
  /* 因为下面要变出一张图片，如果不往上移，图片就会被卡片底部切掉。
           上移距离 ≈ 图片高度的一半或根据审美调整 */
  .news-card:hover .card-inner {
    transform: translateY(-70px);
  }
  /* 3. 图片展开 */
  .news-card:hover .expandable-image-box {
    height: 160px;
    /* 展开高度 */
    opacity: 1;
    /* 显示 */
    margin-top: 25px;
    /* 图片和按钮之间拉开一点距离 */
  }
  /* 4. 按钮样式变化 */
  .news-card:hover .view-btn {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
  }
  /* 5. 标题变色 */
  .news-card:hover h3 {
    color: var(--primary-blue);
  }
  .tab-btn {
    padding: 10px 40px;
    border-radius: 30px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 18px;
    border: 1px solid #022969;
    margin-right: 80px;
    color: #022969;
  }
  .tab-btn:hover {
    box-shadow: 0 10px 20px -10px black;
  }
  .tab-btn.active {
    background-color: #022868;
    color: #ffffff;
  }
  /* Featured News */
  .featured-news {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 80px;
  }
  .featured-text {
    padding-top: 20px;
    width: 537px;
  }
  .featured-image {
    flex: 1;
    overflow: hidden;
  }
  .featured-image:hover img {
    transform: scale(1.5);
  }
  .featured-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s;
  }
  .featured-date {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #696969;
  }
  .featured-title {
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #022969;
  }
  .featured-desc {
    margin-bottom: 30px;
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333333;
  }
  .featured-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 16px;
    margin-top: 40px;
    color: #355386;
  }
  .icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
  }
  /* News Grid */
  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
  }
  .news-card {
    display: flex;
    flex-direction: column;
    height: 400px;
    color: #333333;
  }
  .card-header {
    margin-bottom: 15px;
    font-family: var(--font-main);
  }
  .date-highlight {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-dark);
  }
  .date-year {
    font-size: 14px;
    color: var(--text-light);
  }
  .card-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--text-dark);
    line-height: 1.4;
    font-weight: normal;
  }
  .card-excerpt {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1;
  }
  /* Image Card Special Styles */
  .image-card .card-image-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 180px;
    margin-top: auto;
  }
  .image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .btn-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: rgba(0, 51, 102, 0.9);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    transition: background 0.3s;
  }
  .btn-overlay:hover {
    background-color: var(--primary-blue);
  }
  /* Text Card Button */
  .btn-outline {
    display: inline-block;
    width: fit-content;
    padding: 8px 30px;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: var(--text-light);
    font-size: 13px;
    transition: all 0.3s;
    margin-top: auto;
  }
  .btn-outline:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
  }
  /* Pagination */
  .pagination {
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: center;
    padding-top: 20px;
  }
  .page-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: all 0.3s;
  }
  .page-btn:hover,
  .page-btn.active {
    background-color: var(--primary-blue);
    color: var(--text-white);
    border-color: var(--primary-blue);
  }
  .tabs-container {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }
  .main-content {
    padding: 40px 0;
  }
  .cj_7 {
    position: absolute;
    left: 20px;
    bottom: 20px;
  }
  .view-btns {
    display: inline-block;
    width: 130px;
    padding: 9px 0;
    border-radius: 25px;
    text-align: center;
    font-size: 13px;
    color: #ffffff;
    background: transparent;
    transition: all 0.3s ease;
    background-color: #022969;
  }
  /* 联系信息区域 */
  .contact-section__wrapper {
    padding: 40px 0;
    background-color: #f8f9fa;
  }
  .contact-section__content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .contact-section__image {
    flex: 1;
  }
  .contact-section__image img {
    width: 100%;
    border-radius: 8px;
  }
  .contact-section__info {
    flex: 1;
  }
  .contact-section__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }
  .contact-section__subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
  }
  .contact-section__details {
    display: grid;
    gap: 20px;
  }
  .contact-section__item {
    display: flex;
    gap: 15px;
    align-items: center;
  }
  .contact-section__item-icon {
    width: 40px;
    height: 40px;
    background-color: #0066cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  .contact-section__item-content h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
  }
  .contact-section__item-content p {
    color: #666;
    font-size: 14px;
  }
  /* 地图区域 */
  .map-section__container {
    height: 500px;
    background-color: #e9ecef;
    position: relative;
  }
  .map-section__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 响应式设计 */
}

@media screen and (min-width: 1300px) and (max-width: 768px) {
  .hero__inner {
    padding: 100px 20px;
  }
  .hero__inner h1 {
    font-size: 32px;
  }
  .hero__inner p {
    font-size: 18px;
  }
  .contact-section__wrapper {
    padding: 40px 0;
  }
  .contact-section__content {
    flex-direction: column;
    gap: 30px;
  }
  .contact-section__image img {
    max-width: 100%;
  }
  .map-section__container {
    height: 300px;
  }
}

@media screen and (min-width: 1300px) and (max-width: 480px) {
  .hero__inner {
    padding: 80px 15px;
  }
  .hero__inner h1 {
    font-size: 28px;
  }
  .hero__inner p {
    font-size: 16px;
  }
  .contact-section__wrapper {
    padding: 30px 0;
  }
  .contact-section__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .contact-section__item-icon {
    width: 35px;
    height: 35px;
  }
}

@media screen and (min-width: 1300px) {
  /* 可访问性样式 */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .contact-section__link {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .contact-section__link:hover,
  .contact-section__link:focus {
    color: #004999;
    text-decoration: underline;
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }
  .info-side {
    flex: 1;
    padding: 20px 30px;
  }
  .info-row {
    display: flex;
    gap: 60px;
    margin-bottom: 20px;
  }
  .info-item {
    flex: 1;
    border-top: 3px solid #022969;
  }
  .info-item h3 {
    font-weight: normal;
    color: #333;
    padding-bottom: 8px;
    font-size: 18px;
    margin: 30px 0;
  }
  .icon {
    width: 32px;
    height: 28px;
    margin-bottom: 60px;
  }
  .icon svg {
    width: 100%;
    height: 100%;
    fill: #1e3a5f;
  }
  .icon img {
    max-width: 100%;
  }
  .info-item p {
    font-size: 14px;
    color: #333;
    line-height: 1.8;
  }
  .address-section {
    padding-top: 30px;
    border-top: 3px solid #022969;
  }
  .address-section h3 {
    font-weight: normal;
    color: #333;
    font-size: 14px;
    margin-bottom: 30px;
  }
  #container {
    width: 100%;
    height: 100%;
  }
  .pz_1s {
    display: none;
  }
  .goodz_2 {
    display: none;
  }
  .cs_3 {
    display: none;
  }
  .cs_1 {
    display: none;
  }
  .cs_2 {
    display: none;
  }
  .cs_4 {
    display: none;
  }
  .cs_6 {
    display: none;
  }
  .cs_7 {
    display: none;
  }
  .cs_8 {
    display: none;
  }
  .about-imgs {
    display: none;
  }
  .per-code {
    width: 100%;
    box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.6);
  }
  .per-code .per-code-yx {
    display: flex;
    align-items: center;
  }
  .per-code .per-code-yx .per-title:hover a {
    color: #015aad;
    border-bottom: 2px solid #015aad;
  }
  .per-code .per-code-yx .per-title a {
    text-decoration: none;
    font-size: 18px;
    color: #8c8c8c;
    padding: 22px 30px;
    display: block;
  }
  .per-code .per-code-yx .active4 a {
    color: #015aad;
    border-bottom: 2px solid #015aad;
  }
  .perjy-lock {
    padding: 40px 0;
  }
  .perjy-lock .perjy-title {
    font-size: 18px;
    color: #333333;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
  }
  .perjy-lock .perjy-times {
    font-size: 14px;
    color: #cccccc;
    margin-bottom: 20px;
    text-align: center;
  }
  .perjy-lock .perjy-img {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .perjy-lock .perjy-img img {
    max-width: 100%;
  }
  .perjy-lock .perjy-gcyjxq {
    font-size: 14px;
    color: #333333;
    line-height: 30px;
  }
  .pc_8 {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    text-align: center;
  }
  .pc_9 {
    font-size: 14px;
    color: #cccccc;
    margin-top: 30px;
    margin-bottom: 60px;
    text-align: center;
  }
  .pc_p1 {
    font-size: 14px;
    color: #333333;
    line-height: 30px;
  }
  .steam {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .cs_9 .news-grid .news-card {
    height: 390px;
    box-sizing: border-box;
  }
  .gun_1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .current {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: all 0.3s;
    border-color: var(--primary-blue);
    background-color: #022969;
    color: #ffffff;
  }
  .num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: all 0.3s;
  }
  .phone {
    font-size: 14px;
    color: #000000;
  }
  .fixed {
    position: fixed;
    top: -160px;
    left: 0;
    z-index: 1000;
    /* 确保导航栏在最上层 */
  }
  @keyframes hd {
    0% {
      top: -60px;
    }
    100% {
      top: 0;
    }
  }
  .loop {
    animation: hd 1s ease forwards;
  }
  .header-ch {
    display: none;
  }
  .take {
    background-color: #ffffff;
  }
  .take .navtop-ch {
    color: #333333 !important;
  }
  .take .navtop-left-ch {
    display: block;
  }
  .take .navtop-left-good {
    display: none;
  }
  .take .navtop-av-ch {
    display: none;
  }
  .take .navtop-av-cs {
    display: block;
  }
  .take .navbar a {
    color: #333333;
  }
  .take .active {
    color: #007bff !important;
  }
  .navtop-left-good {
    width: 100%;
    height: 100%;
  }
  .navtop-left-ch {
    width: 100%;
    height: 100%;
    display: none;
  }
  .navtop-av-ch {
    width: 100%;
    height: 100%;
  }
  .navtop-av-cs {
    width: 100%;
    height: 100%;
    display: none;
  }
  .navbar {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }
  .navbar a {
    position: relative;
    text-decoration: none;
    font-size: 18px;
    display: block;
  }
  .navbar a:nth-last-child(1) {
    margin-right: 0;
  }
  .navbar a::before, .navbar a::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    /* 每条线占据一半宽度 */
    background-color: transparent;
    /* 初始颜色为透明 */
    transition: transform 0.5s ease;
    /* 添加动画效果 */
  }
  .navbar a::before {
    left: 0;
    /* 左边的线条 */
    transform: translateX(50%);
    /* 初始时隐藏在左侧 */
  }
  .navbar a::after {
    right: 0;
    /* 右边的线条 */
    transform: translateX(-50%);
    /* 初始时隐藏在右侧 */
  }
  .navbar a:hover::before {
    transform: translateX(100%);
    /* 鼠标悬停时向中间移动 */
  }
  .navbar a:hover::after {
    transform: translateX(-100%);
    /* 鼠标悬停时向中间移动 */
  }
  .navbar a:hover::before, .navbar a:hover::after {
    border-bottom: 2px solid #007bff;
    /* 线条颜色 */
  }
  .pc_7 {
    padding: 40px 0;
  }
  .gs_1 {
    width: 600px;
  }
  .gs_1 img {
    max-width: 100%;
  }
  /* 遮罩层样式 */
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* 黑色背景，0.6的透明度 */
    display: flex;
    /* 使用 Flex 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    opacity: 0;
    /* 默认透明（隐藏） */
    transition: all 0.3s ease;
    /* 添加平滑过渡效果 */
  }
  /* 文字样式 */
  .mask-text {
    color: #fff;
    /* 白色文字 */
    font-size: 16px;
    /* 根据需要调整字体大小 */
    font-weight: bold;
    text-align: center;
    padding: 0 10px;
    /* 防止文字贴边 */
  }
  /* 鼠标悬停时的效果 */
  /* 当鼠标移入 .four-grid (也就是a标签) 时，改变 .mask 的透明度 */
  .four-grid:hover .mask {
    opacity: 1;
    /* 变为不透明（显示） */
  }
  .tem_173_33_c {
    position: fixed;
    right: -130px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    z-index: 999;
    height: 320px;
  }
  .tem_173_33_c:hover .w-cs-list-ewmimgs {
    display: block;
  }
  .tem_173_33_c ul {
    list-style: none;
  }
  .tem_173_33_c ul li {
    width: 100%;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    flex-wrap: wrap;
    background-color: #155ec4;
    cursor: pointer;
  }
  .tem_173_33_c ul li .w-cs-list-icon {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .tem_173_33_c ul li .w-cs-list-icon img {
    width: 100%;
    height: 100%;
  }
  .tem_173_33_c ul li .w-cs-list-title {
    font-size: 14px;
    color: #ffffff;
  }
  .tem_173_33_c ul li .w-cs-list-ewmimgs {
    width: 180px;
    height: 180px;
    margin-top: 10px;
    display: none;
  }
  .tem_173_33_c ul li .w-cs-list-ewmimgs img {
    width: 100%;
    height: 100%;
  }
  .tem_173_33_c ul li .w-cs-list-lick {
    display: flex;
    align-items: center;
  }
  @keyframes dh2 {
    0% {
      right: -130px;
    }
    100% {
      right: 0;
    }
  }
  .temright {
    animation: dh2 0.5s forwards ease;
  }
  @keyframes dh3 {
    0% {
      right: 0;
    }
    100% {
      right: -130px;
    }
  }
  .temloop {
    animation: dh3 0.5s forwards ease;
  }
  .w-cs-ewmch {
    animation: dhyr 0.3s forwards ease-in;
    display: block;
  }
  @keyframes dhyr {
    0% {
      transform: translateX(180px);
      width: 10px;
      height: 10px;
    }
    100% {
      width: 180px;
      height: 180px;
    }
  }
  .w-cs-ewmyc {
    animation: ewmyc 0.3s forwards ease-in-out;
  }
  @keyframes ewmyc {
    0% {
      width: 180px;
      height: 180px;
    }
    100% {
      width: 0;
      height: 0;
      display: none;
    }
  }
  .tga_1 {
    font-size: 12px;
    color: #333333;
  }
  .tga_1 a {
    font-size: 12px;
    color: #ffffff;
  }
  /* 资深技巧：添加遮罩层，确保任何背景图下文字都清晰可见 */
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color);
    z-index: 1;
  }
  .hero-content {
    position: relative;
    z-index: 2;
    /* 确保文字在遮罩之上 */
    padding: 0 20px;
    /* 防止移动端文字贴边 */
    max-width: 1200px;
    width: 100%;
    /* 简单的入场动画，增加高级感 */
    animation: fadeInUp 1s ease-out forwards;
  }
  .hero-title {
    color: var(--text-color);
    font-size: var(--font-size-title);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  .hero-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-desc);
    margin-bottom: 2rem;
    max-width: 600px;
    /* 控制阅读行长，提升体验 */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }
  .hero-btn {
    display: inline-block;
    padding: 0.8em 2em;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    color: var(--text-color);
    background-color: var(--primary-color);
    text-decoration: none;
    border-radius: 50px;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  .hero-btn:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
  }
  /* 简单的动画定义 */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .hero-banner {
    position: relative;
    width: 100%;
    height: var(--banner-height);
    /* 背景图处理：Cover 保证填满，Center 保证主体在中间 */
    background-image: url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Flex 布局实现垂直水平居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
  }
  /* 遮罩层，保证文字清晰 */
  .banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }
  .banner-content {
    position: absolute;
    z-index: 2;
    width: 90%;
    /* 移动端留点边距 */
    top: 70%;
    right: 20px;
  }
  .banner-title {
    color: #fff;
    /* 移动端：使用 rem (适配 flexible.js) */
    font-size: 0.64rem;
    /* 约等于设计稿 48px */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.2rem;
  }
  .banner-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.37rem;
    /* 约等于设计稿 28px */
    padding: 0 0.5rem;
  }
  .banner-btn {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.2rem 0.6rem;
    background: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 1rem;
    font-size: 0.37rem;
  }
  /* =========================================
           2. PC端 核心适配 (Desktop Overrides)
           关键点：当屏幕 > 768px 时，我们要“夺权”！
           不再听 flexible.js 的指挥。
           ========================================= */
}

@media screen and (min-width: 1300px) and (min-width: 768px) {
  /* 1. 强制重置 HTML 字号
               flexible.js 会把 html font-size 设得很大(如 192px)，
               我们要强制设回 16px 或 100px，这里设为 16px 符合 PC 规范 
            */
  html {
    font-size: 16px !important;
  }
  .banner {
    /* PC端高度：不再用 rem，改用 vh (视口高度) 或 px */
    /* clamp(最小高度, 推荐高度, 最大高度) */
    height: clamp(400px, 50vh, 700px);
  }
  .banner-content {
    max-width: 1200px;
    /* PC端限制内容最大宽度，防止太散 */
    margin: 0 auto;
  }
  /* 
               ★ 核心大招：CSS Clamp 流体排版 
               font-size: clamp(最小值, 变化公式, 最大值);
               
               解释：
               - 最小值 2rem (32px): 保证浏览器缩小时字不会太小。
               - 变化值 3vw: 随着屏幕变宽，字体变大。
               - 最大值 4.5rem (72px): 在超大屏上限制字号，防止吓人。
            */
  .banner-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin-bottom: 24px;
  }
  .banner-desc {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    max-width: 800px;
    /* 限制文字行长，提升阅读体验 */
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
  .banner-btn {
    /* 按钮回到 px 单位，或者使用相对单位 em */
    margin-top: 40px;
    padding: 12px 40px;
    font-size: 1.1rem;
    /* 这里的 rem 是基于 16px 的 */
    border-radius: 50px;
    transition: transform 0.2s;
  }
  .banner-btn:hover {
    transform: translateY(-3px);
  }
}

@media screen and (min-width: 1300px) {
  .roll_1 {
    display: flex;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
  }
  .roll_1 .roll_2 {
    padding: 20px 30px;
    text-align: center;
    font-size: 18px;
    color: #333333;
    border: 1px solid #e1e1e1;
    width: 300px;
    box-sizing: border-box;
  }
  .roll_1 .roll_2:hover {
    color: #ffffff;
    background-color: #007bff;
  }
  /* 吸顶 Tabs */
  .detail-tabs-bar {
    position: sticky;
    /* 关键CSS: 滚动吸顶 */
    top: 0;
    border-bottom: 1px solid var(--primary-color);
    margin-bottom: 20px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  .tab-item {
    display: inline-block;
    padding: 15px 30px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #007bff;
  }
  .tab-item.active {
    background: var(--primary-color);
    color: #fff;
  }
  .detail-main {
    margin-bottom: 40px;
  }
  /* ==================== 
           2. 悬浮卡片容器
           ==================== */
  .form-card {
    max-width: 600px;
    /* 限制宽度，更显精致 */
    padding: 60px;
    border-radius: 24px;
    /* 关键：应用高级阴影 */
    box-shadow: 0 0 20px -15px black;
    text-align: center;
    /* 入场动画 */
    animation: floatUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
  }
  /* 标题区 */
  .form-header {
    margin-bottom: 40px;
  }
  .form-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 10px;
    color: var(--text-main);
  }
  .form-header p {
    color: var(--text-sub);
    font-size: 1rem;
    line-height: 1.6;
  }
  /* ==================== 
           3. 表单区域
           ==================== */
  .form-group {
    margin-bottom: 24px;
    text-align: left;
    /* 内部内容左对齐 */
    width: 100%;
  }
  .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    margin-left: 4px;
  }
  /* 输入框样式 */
  .form-input,
  .form-textarea {
    width: 100%;
    padding: 16px 20px;
    background-color: #f1f1f1;
    border: 2px solid transparent;
    /* 预留边框位置，防止抖动 */
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-main);
    transition: all 0.3s ease;
  }
  /* 输入框交互 */
  .form-input:focus,
  .form-textarea:focus {
    background-color: #fff;
    border-color: var(--text-main);
    /* 聚焦时变黑框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    outline: none;
  }
  .form-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
  }
  /* 占位符颜色 */
  ::placeholder {
    color: #aaa;
    font-weight: 400;
  }
  /* ==================== 
           4. 提交按钮
           ==================== */
  .btn-submit {
    width: 100%;
    padding: 18px;
    background-color: black;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
  }
  .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }
  .btn-submit:active {
    transform: translateY(0);
  }
  /* ==================== 
           5. 响应式
           ==================== */
}

@media screen and (min-width: 1300px) and (max-width: 600px) {
  .form-card {
    padding: 40px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* 移动端减弱阴影 */
  }
  .form-header h1 {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 1300px) {
  @keyframes floatUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .roll_3 {
    width: 100%;
  }
  /* --- 容器布局 --- */
  .text-rec-section {
    padding: 30px 20px;
    background-color: #fff;
    border-top: 1px solid var(--border-color);
    /* 顶部分割线 */
  }
  .text-rec-container {
    max-width: 1000px;
    /* 纯文本不需要太宽，窄一点阅读体验更好 */
    margin: 0 auto;
  }
  .section-titles {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--text-main);
    padding-left: 0.5rem;
    border-left: 4px solid #007bff;
    /* 标题左侧装饰条 */
    line-height: 1;
  }
  /* --- Grid 网格 --- */
  .text-grid {
    display: grid;
    /* 自适应列宽：最小220px，填满整行 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
  }
  /* --- 卡片核心样式 --- */
  .text-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 让日期始终沉底 */
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    height: 100%;
    /* 统一高度 */
    min-height: 100px;
    /* 最小高度保证视觉一致 */
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    color: #333333;
  }
  /* 悬停交互：边框变色 + 阴影 + 轻微上浮 */
  .text-card:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  /* 标题样式 */
  .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    /* 撑开标题和日期的距离 */
    /* 限制标题最多3行，超出显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 底部元数据区域 */
  .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-sub);
  }
  /* 日期样式 */
  time {
    font-feature-settings: "tnum";
    /* 使用等宽数字，对齐更美观 */
  }
  /* 简单的分类标签（可选） */
  .category-tag {
    background-color: #eff6ff;
    color: var(--primary-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
  }
  /* 悬停时标题变色 */
  .text-card:hover .card-title {
    color: var(--primary-color);
  }
  /* --- 移动端适配 --- */
}

@media screen and (min-width: 1300px) and (max-width: 600px) {
  .text-grid {
    grid-template-columns: 1fr;
    /* 手机端单列显示 */
    gap: 1rem;
  }
  .text-card {
    min-height: auto;
    /* 手机端不需要强制高度 */
    padding: 1.25rem;
  }
}

@media screen and (min-width: 1300px) {
  .roll_4 {
    font-size: 48px;
    color: #003366;
    font-weight: bold;
    margin-bottom: 40px;
    position: relative;
  }
}

@media screen and (max-width: 1299px) {
  * {
    padding: 0;
    margin: 0;
  }
  .w {
    width: 9.4667rem;
    margin: 0 auto;
  }
  .header-ch {
    padding: 0.2rem 0;
    background-color: #ffffff;
  }
  .header-ch-img {
    max-width: 4rem;
  }
  .header-ch-img img {
    max-width: 100%;
    height: auto;
  }
  .header-ch-more {
    max-width: 0.8533rem;
    height: auto;
  }
  .header-ch-core {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .goodz_1 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.7;
    z-index: 9999;
  }
  .goodz_2 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: white;
    z-index: 9999;
  }
  .goodz_3 {
    width: 100%;
    height: 1.3333rem;
    background-color: #165dff;
    padding: 0 0.1333rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .goodz_4 {
    width: 0.9067rem;
    height: 0.64rem;
    display: block;
  }
  .goodz_4 img {
    max-width: 100%;
    vertical-align: top;
  }
  .goodz_5 {
    width: 0.8rem;
    height: 0.8rem;
  }
  .goodz_5 img {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
  .goodz_6 ul {
    list-style: none;
    padding-left: 0;
    padding: 0 0.1333rem;
  }
  .goodz_6 li {
    font-size: 0.4rem;
    color: #333333;
    border-bottom: 0.9975px solid #cccccc;
  }
  .goodz_6 li a {
    display: block;
    font-size: 0.4rem;
    color: #333333;
    padding: 0.4rem 0;
    border-bottom: 0.9975px solid #cccccc;
    text-decoration: none;
    width: 100%;
  }
  .goodz_6 .active {
    color: #007bff;
  }
  .p_3 {
    display: none;
  }
  .p_1 {
    display: none;
  }
  .cs_1 {
    width: 100%;
    height: 6.6667rem;
  }
  .cs_1 .swiper {
    width: 100%;
    height: 100%;
  }
  .cs_1 .swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cs_1 .swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .p_4 {
    padding: 0.5333rem 0;
    background: url("../images/48_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .p_4 .buttons {
    margin-top: 0.5333rem;
  }
  .p_4 .buttons .btn {
    padding: 0.5333rem 0;
    text-align: center;
    font-size: 0.3733rem;
    color: #ffffff;
    border-radius: 0.5333rem;
    margin-right: 0.2667rem;
  }
  .p_4 .buttons a {
    text-decoration: none;
  }
  .p_6 {
    font-size: 0.48rem;
    color: #ffffff;
    font-weight: 700;
  }
  .p_7 {
    font-size: 0.48rem;
    color: #ffffff;
    margin-bottom: 0.5333rem;
  }
  .p_8 {
    font-size: 0.3733rem;
    color: #ffffff;
    margin-bottom: 0.2667rem;
  }
  .p_9 {
    font-size: 0.3733rem;
    color: #ffffff;
    margin-bottom: 0.2667rem;
  }
  .pc_3 {
    display: flex;
    align-items: center;
  }
  .pc_3 .pc_4 {
    width: 1.0667rem;
    margin-right: 0.2667rem;
  }
  .pc_3 .pc_4 img {
    max-width: 100%;
  }
  .pc_3 .pc_5 {
    font-size: 0.3733rem;
    color: #ffffff;
  }
  .product-categories {
    display: none;
  }
  .pc_1 {
    padding: 0.5333rem 0;
    background: url("../images/10_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .pc_6 {
    padding: 0.5333rem 0;
    background: url("../images/50_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .pc_6 .place .hexagon-grid {
    display: none;
  }
  .pc_6 .place .cs_2 {
    width: 100%;
  }
  .pc_6 .place .cs_2 img {
    max-width: 100%;
  }
  .count_2 .pd_7 {
    font-size: 0.3733rem;
    color: #ffffff;
  }
  .count_2 .pd_6 {
    display: flex;
    justify-content: space-between;
  }
  .count_2 .news-grid {
    display: flex;
    justify-content: space-between;
  }
  .count_2 .news-grid .news-card {
    width: 4.5333rem;
    border-radius: 0.1333rem;
    overflow: hidden;
  }
  .count_2 .news-grid .news-card:nth-last-child(1) {
    display: none;
  }
  .count_2 .news-grid .news-card .news-img {
    width: 100%;
    height: 3.4667rem;
    overflow: hidden;
  }
  .count_2 .news-grid .news-card .news-img img {
    max-width: 100%;
  }
  .count_2 .news-grid .news-card .news-body {
    padding: 0.2667rem;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
  }
  .count_2 .news-grid .news-card .news-body h4 {
    font-size: 0.3733rem;
    color: #000000;
    margin-bottom: 0.2667rem;
  }
  .count_2 .news-grid .news-card .news-body .date {
    font-size: 0.3733rem;
    color: #858585;
  }
  .pd_2 {
    padding: 0.5333rem 0;
    background: url("../images/52_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .pd_2 .pd_3 .p_6 {
    text-align: center;
  }
  .pd_2 .pd_3 .p_7 {
    text-align: center;
  }
  .pd_2 .pd_3 .app-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .pd_2 .pd_3 .app-icons .app-item {
    display: flex;
    align-items: center;
  }
  .pd_2 .pd_3 .app-icons .app-item .pd_4 {
    width: 1.0667rem;
    margin-right: 0.2667rem;
  }
  .pd_2 .pd_3 .app-icons .app-item .pd_4 img {
    max-width: 100%;
  }
  .pd_2 .pd_3 .app-icons .app-item .pd_5 {
    font-size: 0.3733rem;
    color: #ffffff;
  }
  .pd_9 {
    padding: 0.5333rem 0;
    background: url("../images/53_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .pd_9 .jc_1 .jc_2 {
    font-size: 0.3733rem;
    color: #ffffff;
    margin-bottom: 0.5333rem;
  }
  .pd_9 .jc_1 .quality-images {
    display: flex;
    justify-content: space-between;
  }
  .pd_9 .jc_1 .quality-images .q-img {
    width: 4.5333rem;
  }
  .pd_9 .jc_1 .quality-images .q-img img {
    max-width: 100%;
  }
  .jc_3 {
    padding: 0.5333rem 0;
    background: url("../images/54_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 2.4rem;
  }
  .jc_3 .qr-code-area {
    display: none;
  }
  .jc_3 .copyright {
    display: none;
  }
  .jc_3 .company-name {
    display: none;
  }
  .jc_3 .contact-list .jc_7 {
    width: 1.0667rem;
    margin-right: 0.2667rem;
  }
  .jc_3 .contact-list .jc_7 img {
    max-width: 100%;
  }
  .jc_3 .contact-list .jc_8 {
    font-size: 0.3733rem;
    color: #ffffff;
  }
  .jc_3 .contact-list li {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.2667rem;
    align-items: center;
  }
  .cs_3 {
    width: 100%;
  }
  .cs_3 img {
    max-width: 100%;
  }
  .jc_9 {
    display: none;
  }
  .g_1 {
    padding: 0.5333rem 0;
  }
  .g_1 .tabs-section .tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5333rem;
  }
  .g_1 .tabs-section .tabs .tab {
    font-size: 0.3733rem;
    color: #022868;
    padding: 0.2667rem 0.4rem;
    border: 0.0133rem solid #022969;
    border-radius: 0.4rem;
    margin-right: 0.2667rem;
  }
  .g_2 {
    position: relative;
    margin-bottom: 1.0667rem;
  }
  .about-title {
    font-size: 1rem;
    color: #ccd4e1;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.0667rem;
  }
  .roll_4 {
    position: absolute;
    top: 0.2667rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: #022969;
    text-align: center;
  }
  .about-content .about-img {
    width: 100%;
    margin-bottom: 0.5333rem;
  }
  .about-content .about-img img {
    max-width: 100%;
  }
  .about-content .about-text p {
    font-size: 0.3733rem;
    color: #333333;
    line-height: 0.5333rem;
  }
  .g_4 {
    width: 100%;
  }
  .g_4 img {
    width: 100%;
  }
  .culture-cards {
    display: none;
  }
  .section-honor .container {
    position: relative;
  }
  .g_8 {
    position: absolute;
    top: 0.2667rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: #022969;
    text-align: center;
  }
  .honor-swiper-wrap {
    display: none;
  }
  .cs_4 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .cs_4 .cs_5 {
    width: 4.5333rem;
    height: 4rem;
    margin-bottom: 0.5333rem;
  }
  .cs_4 .cs_5 img {
    width: 100%;
    height: 100%;
  }
  .section-partner {
    width: 100%;
  }
  .section-partner img {
    max-width: 100%;
  }
  .c_1 .category-nav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.2667rem;
  }
  .c_1 .category-nav .cat-btn {
    font-size: 0.3733rem;
    color: #333333;
    border: 0.0133rem solid black;
    padding: 0.2667rem 0.2rem;
    margin-bottom: 0.2667rem;
    margin-right: 0.2667rem;
  }
  .top-section {
    display: none;
  }
  .bottom-section {
    display: none;
  }
  .cs_6 .four-grid {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .cs_6 .four-grid .grid-item {
    width: 4.5333rem;
    margin-bottom: 0.2667rem;
  }
  .cs_6 .four-grid .grid-item img {
    width: 100%;
  }
  .c_5 {
    display: none;
  }
  .cs_7 {
    width: 100%;
  }
  .cs_7 img {
    max-width: 100%;
  }
  .app-section .app-left {
    width: 100%;
  }
  .app-section .app-left img {
    max-width: 100%;
  }
  .app-section .app-right {
    margin-bottom: 0.5333rem;
  }
  .app-section .app-right h2 {
    font-size: 1rem;
    color: #ccd4e1;
  }
  .app-section .app-right span {
    display: block;
    color: #022969;
    margin-bottom: 0.5333rem;
  }
  .app-section .app-right p {
    font-size: 0.3733rem;
    color: #5c5c5c;
  }
  .c_6 {
    padding: 1.3333rem 0;
    width: 100%;
    background: url("../images/35_01.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 8rem;
    box-sizing: border-box;
  }
  .c_6 .c_8 {
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 0.5333rem;
  }
  .c_6 .c_9 {
    font-size: 0.3733rem;
    color: #ffffff;
    line-height: 0.5333rem;
  }
  .c_6 .app-item {
    display: none;
  }
  .cs_8 {
    background-color: #1c4689;
  }
  .cs_8 .app-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0.5333rem 0;
  }
  .cs_8 .app-icons .app-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-right: 0.2667rem;
  }
  .cs_8 .app-icons .app-item .pd_4 {
    width: 1.0667rem;
    margin-right: 0.2667rem;
  }
  .cs_8 .app-icons .app-item .pd_4 img {
    max-width: 100%;
  }
  .cs_8 .app-icons .app-item .pd_5 {
    font-size: 0.48rem;
    color: #ffffff;
  }
  .cj_1 {
    position: relative;
  }
  .cj_2 {
    font-size: 0.3733rem;
    color: #5c5c5c;
    margin-bottom: 0.5333rem;
  }
  .cj_3 {
    width: 100%;
  }
  .cj_3 img {
    max-width: 100%;
  }
  .cj_4 {
    display: none;
  }
  .cj_5 .grid-container {
    width: 100%;
  }
  .cj_5 .grid-container .grid-items {
    width: 100%;
  }
  .cj_5 .grid-container .grid-items img {
    max-width: 100%;
  }
  .main-content {
    padding: 0.5333rem 0;
  }
  .main-content .container {
    display: flex;
    justify-content: center;
  }
  .main-content .container .tab-btn {
    padding: 0.2667rem 0.4rem;
    font-size: 0.48rem;
    color: #022868;
    background-color: transparent;
    border: 0.0133rem solid #022868;
    border-radius: 0.5333rem;
    margin-right: 0.5333rem;
  }
  .main-content .tabs-container {
    margin-bottom: 0.5333rem;
  }
  .main-content .tabs-container .active {
    background-color: #022868;
    color: #ffffff;
  }
  .featured-news {
    display: none !important;
  }
  .cs_9 {
    margin-bottom: 0.5333rem;
  }
  .cs_9 .news-grid .news-card {
    margin-bottom: 0.5333rem;
    box-shadow: 0 0 0.2667rem -0.1333rem black;
  }
  .cs_9 .news-grid .news-card .card-inner {
    font-size: 0.3733rem;
    color: #222222;
    display: flex;
    flex-direction: column-reverse;
    box-shadow: 0 0.1333rem 0.2667rem -0.1333rem black;
    margin-bottom: 0.2667rem;
  }
  .cs_9 .news-grid .news-card .card-inner .date {
    font-size: 0.32rem;
    color: #3f3f3f;
    margin-bottom: 0.2667rem;
  }
  .cs_9 .news-grid .news-card .card-inner .date span {
    font-size: 0.32rem;
    color: #3f3f3f;
  }
  .cs_9 .news-grid .news-card .card-inner h3 {
    font-size: 0.48rem;
    color: #222222;
    margin-bottom: 0.2667rem;
  }
  .cs_9 .news-grid .news-card .card-inner p {
    font-size: 0.3733rem;
    color: #444444;
    margin-bottom: 0.2667rem;
  }
  .cs_9 .news-grid .view-btn {
    font-size: 0.3733rem;
    color: #444444;
  }
  .expandable-image-box {
    width: 100%;
    padding: 0.2667rem;
    box-sizing: border-box;
  }
  .expandable-image-box img {
    max-width: 100%;
  }
  .jz_1 {
    width: 100%;
    padding: 0.2667rem;
    box-sizing: border-box;
  }
  .jz_1 h3 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .cj_7 {
    display: none;
  }
  .page-btn {
    padding: 0.2667rem 0.4rem;
    font-size: 0.3733rem;
    color: #052c6b;
    border-radius: 50%;
    margin-right: 0.2667rem;
    border: 0.0267rem solid #9e9e9e;
    color: #333333;
  }
  .prev {
    border: 0.0267rem solid #183b76;
    color: #325185;
  }
  .next {
    border: 0.0267rem solid #0c316f;
    color: #103571;
  }
  a {
    text-decoration: none;
  }
  .contact-section__content {
    width: 100%;
  }
  .contact-section__content .contact-section__image {
    width: 100%;
  }
  .contact-section__content .contact-section__image img {
    max-width: 100%;
  }
  .info-side {
    margin-bottom: 0.5333rem;
  }
  .info-side .info-row .info-item {
    padding-top: 0.2667rem;
    border-top: 0.04rem solid #022969;
  }
  .info-side .info-row .info-item h3 {
    font-size: 0.48rem;
    color: #333333;
    margin-bottom: 0.2667rem;
  }
  .info-side .info-row .info-item .icon {
    width: 1.0667rem;
  }
  .info-side .info-row .info-item .icon img {
    max-width: 100%;
  }
  .info-side .info-row .info-item p {
    font-size: 0.3733rem;
    color: #000000;
    margin-bottom: 0.2667rem;
  }
  .address-section {
    border-top: 0.0267rem solid #022969;
    padding-top: 0.2667rem;
  }
  .address-section h3 {
    font-size: 0.48rem;
    color: #333333;
    margin-bottom: 0.2667rem;
  }
  .address-section .icon {
    width: 1.0667rem;
  }
  .address-section .icon img {
    max-width: 100%;
  }
  .address-section p {
    font-size: 0.3733rem;
    color: #090909;
  }
  #container {
    width: 100%;
    height: 6.6667rem;
  }
  .pz_1s {
    padding: 0.2667rem 0;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0.0133rem;
    z-index: 999;
  }
  .go2 {
    width: 0.8rem;
  }
  .go2 img {
    max-width: 100%;
    height: 0.8rem;
  }
  .go3 {
    font-size: 0.3733rem;
    color: #333333;
  }
  .go1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .active {
    color: #165dff;
  }
  .about-imgs {
    width: 100%;
  }
  .about-imgs img {
    max-width: 100%;
  }
  .perjy-lock {
    padding: 0.5333rem 0;
  }
  .perjy-lock .perjy-title {
    font-size: 0.48rem;
    color: #333333;
    font-weight: 700;
    text-align: center;
  }
  .perjy-lock .perjy-times {
    font-size: 0.3733rem;
    color: #cccccc;
    margin: 0.2667rem 0;
    text-align: center;
  }
  .perjy-lock .perjy-img {
    width: 100%;
    margin-bottom: 0.5333rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .perjy-lock .perjy-img img {
    max-width: 100%;
  }
  .perjy-lock .perjy-gcyjxq {
    font-size: 0.3733rem;
    color: #333333;
  }
  .per-code {
    padding-bottom: 0.2667rem;
    border-bottom: 0.0267rem solid #cccccc;
  }
  .per-code .per-code-yx {
    display: flex;
    align-items: center;
  }
  .per-code .per-code-yx .per-title a {
    font-size: 0.48rem;
    color: #666666;
    padding: 0.1333rem 0.2rem;
    text-decoration: none;
  }
  .per-code .per-code-yx .active4 {
    color: #015aad;
  }
  .pc_7 {
    padding: 0.5333rem 0;
  }
  .pc_7 .pc_8 {
    text-align: center;
    font-size: 0.4267rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 0.4rem;
  }
  .pc_7 .pc_9 {
    font-size: 0.32rem;
    color: #999999;
    margin-bottom: 0.4rem;
    text-align: center;
  }
  .pc_7 .pc_p1 {
    font-size: 0.3733rem;
    color: #333333;
    text-align: left;
    line-height: 0.8rem;
    margin-bottom: 2.4rem;
  }
  .count_1 {
    padding: 0.5333rem 0;
    background: url("../images/51_02.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .steam {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .phone {
    font-size: 0.3733rem;
    color: #000000;
  }
  .active {
    color: #007bff;
  }
  .gun_1 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 0.5333rem;
  }
  .current {
    padding: 0.2667rem 0.4rem;
    font-size: 0.3733rem;
    color: #052c6b;
    border-radius: 50%;
    margin-right: 0.2667rem;
    border: 0.0267rem solid #9e9e9e;
    background-color: #022969;
    color: #ffffff;
  }
  .num {
    padding: 0.2667rem 0.4rem;
    font-size: 0.3733rem;
    color: #052c6b;
    border-radius: 50%;
    margin-right: 0.2667rem;
    border: 0.0267rem solid #9e9e9e;
    color: #333333;
  }
  .gs_1 {
    display: none;
  }
  .tem_173_33_c {
    display: none;
  }
  .roll_1 {
    display: flex;
    flex-wrap: wrap;
    gap: .2667rem;
    margin-bottom: .5333rem;
  }
  .roll_1 .roll_2 {
    padding: .2667rem .4rem;
    font-size: .48rem;
    color: #333333;
    border: 1px solid #333333;
  }
  /* ==================== 
           2. 悬浮卡片容器
           ==================== */
  .form-card {
    max-width: 600px;
    /* 限制宽度，更显精致 */
    padding: 60px;
    border-radius: 24px;
    /* 关键：应用高级阴影 */
    box-shadow: 0 0 20px -15px black;
    text-align: center;
    /* 入场动画 */
    animation: floatUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
  }
  /* 标题区 */
  .form-header {
    margin-bottom: 40px;
  }
  .form-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 10px;
    color: var(--text-main);
  }
  .form-header p {
    color: var(--text-sub);
    font-size: 1rem;
    line-height: 1.6;
  }
  /* ==================== 
           3. 表单区域
           ==================== */
  .form-group {
    margin-bottom: 24px;
    text-align: left;
    /* 内部内容左对齐 */
    width: 100%;
  }
  .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: .48rem;
    font-weight: 600;
    color: var(--text-main);
    margin-left: 4px;
  }
  /* 输入框样式 */
  .form-input,
  .form-textarea {
    width: 100%;
    padding: 16px 20px;
    background-color: #f1f1f1;
    border: 2px solid transparent;
    /* 预留边框位置，防止抖动 */
    border-radius: 12px;
    font-family: inherit;
    font-size: .3733rem;
    color: var(--text-main);
    transition: all 0.3s ease;
  }
  /* 输入框交互 */
  .form-input:focus,
  .form-textarea:focus {
    background-color: #fff;
    border-color: var(--text-main);
    /* 聚焦时变黑框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    outline: none;
  }
  .form-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
  }
  /* 占位符颜色 */
  ::placeholder {
    color: #aaa;
    font-weight: 400;
  }
  /* ==================== 
           4. 提交按钮
           ==================== */
  .btn-submit {
    width: 100%;
    padding: 18px;
    background-color: black;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: .48rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
  }
  .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }
  .btn-submit:active {
    transform: translateY(0);
  }
  /* ==================== 
           5. 响应式
           ==================== */
}

@media screen and (max-width: 1299px) and (max-width: 600px) {
  .form-card {
    padding: .5333rem .3333rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* 移动端减弱阴影 */
  }
  .form-header h1 {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 1299px) {
  @keyframes floatUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .roll_3 {
    width: 100%;
  }
  /* --- 容器布局 --- */
  .text-rec-section {
    padding: .5333rem .2667rem;
    background-color: #fff;
    border-top: 1px solid var(--border-color);
    /* 顶部分割线 */
    margin-bottom: .5333rem;
  }
  .text-rec-container {
    max-width: 9.4667rem;
    /* 纯文本不需要太宽，窄一点阅读体验更好 */
    margin: 0 auto;
  }
  .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-main);
    padding-left: 0.5rem;
    border-left: 4px solid var(--primary-color);
    /* 标题左侧装饰条 */
    line-height: 1;
  }
  /* --- Grid 网格 --- */
  .text-grid {
    display: grid;
    /* 自适应列宽：最小220px，填满整行 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
  }
  /* --- 卡片核心样式 --- */
  .text-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 让日期始终沉底 */
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: .5333rem .2667rem;
    text-decoration: none;
    height: 100%;
    /* 统一高度 */
    min-height: 1.8667rem;
    /* 最小高度保证视觉一致 */
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    color: #333333;
    box-shadow: 0 0 .32rem -.2667rem black;
  }
  /* 悬停交互：边框变色 + 阴影 + 轻微上浮 */
  .text-card:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  /* 标题样式 */
  .card-title {
    font-size: .48rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: .5333rem;
    /* 撑开标题和日期的距离 */
    /* 限制标题最多3行，超出显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 底部元数据区域 */
  .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .48rem;
    color: var(--text-sub);
  }
  /* 日期样式 */
  time {
    font-feature-settings: "tnum";
    /* 使用等宽数字，对齐更美观 */
  }
  /* 简单的分类标签（可选） */
  .category-tag {
    background-color: #eff6ff;
    color: var(--primary-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
  }
  /* 悬停时标题变色 */
  .text-card:hover .card-title {
    color: var(--primary-color);
  }
  .section-titles {
    font-size: .48rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--text-main);
    padding-left: 0.5rem;
    border-left: 4px solid #007bff;
    /* 标题左侧装饰条 */
    line-height: 1;
  }
  .detail-main {
    padding: .5333rem 0;
  }
}