@font-face {
    font-family: 'mySourceHanSC';
    src: url('../fonts/SourceHanSansSC-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'mySourceHanSC', "Source Han Sans SC", "思源黑体", sans-serif;
}

:root {
    --color-primary: #12255C;
    --color-secondary: #B52922;
    --color-tertiary: #dde2f3;
    --color-title: #222;
    --color-text: #333;
    --color-desc: #818487;
    --color-description: #818487;
    --desc-color: #818487;
    --description-color: #818487;
    --primary-color: #12255C;
    --primary-color-rgb: 18, 37, 92;
    --secondary-color: #B52922;
    --tertiary-color: #dde2f3;
    --text-color: #333;
    --bg-color: #f8f9fa;
    --title-color: #222;

    --coal-red: #B52922;
    --coal-red-dark: #8f1b15;
    --coal-red-light: #B52922;
    --coal-blue: #12255C;
    --coal-blue-dark: #091844;
    --coal-blue-light: #d3d8e1;
    --coal-gray: #1F2937;
    --coal-gray-light: #ebeef3;
    --coal-gray-mid: #d3d8e1;
    --coal-black: #111827;
}

.text-danger {
    color: var(--coal-red);
}

.text-warning {
    color: #FFA500;
}

.text-success {
    color: #28a745;
}

.text-report {
    color: #12255C;
}

svg {
    max-width: 100px;
}

.swiper {
    --swiper-navigation-size: 50px;
    --swiper-navigation-color: #fff;
    width: 100%;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-width: 24px;
    --swiper-theme-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
}

.swiper .swiper-button-next,
.swiper .swiper-button-prev {
    background: rgba(7, 7, 97, 0.094);
    border-radius: 3px;
    transition: all 0.3s ease;
    height: var(--swiper-navigation-size);
    width: calc(var(--swiper-navigation-size) * 2 / 3);
}

.swiper .swiper-button-next svg,
.swiper .swiper-button-prev svg {
    height: calc(var(--swiper-navigation-size) / 2);
    width: calc(var(--swiper-navigation-size) / 2);
}

.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
    font-size: calc(var(--swiper-navigation-size) / 2.5);
}

.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:hover {
    background: #12255C;
    transform: scale(1.05);
}

@media screen and (max-width: 992px) {
    .swiper {
        --swiper-navigation-size: 40px;
    }
}


.description {
    color: var(--description-color);
}

.w-100 {
    width: 100%;
}

.text-right {
    text-align: right;
}

.text-desc {
    color: var(--desc-color);
}

/* 导航 */
.nav-header {
    --title-color: #000;
    --desc-color: #666;
    --text-color: #333;
    --theme-color: #12255c;
    --theme-color-rgb: 18, 37, 92;
    --bg-color: #fff;
    --bg-color-rgb: 255, 255, 255;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: background-color 600ms ease-in-out;
    z-index: 1000;
    padding: 0 16px;
}

.nav-header .header-box {
    width: 100%;
    max-width: 1600px;
    margin: 16px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffffee;
    padding: 10px;
    border-radius: 3px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(20, 3, 79, 0.1);
    transition: all 0.3s ease-in-out;
}

.nav-header.no-bg {
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(20, 3, 79, 0.1);
}

.nav-header.no-bg .header-box {
    box-shadow: none;
    margin: 0 auto;
}


.nav-header .logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
}

.nav-header img.logo {
    display: block;
    max-height: 72px;
}

#nav-menu {
    position: relative;
}

#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

#nav-menu .nav-item {
    position: relative;
}

#nav-menu .nav-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 12px 12px;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
}

#nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    z-index: 1000;
    border: 1px solid rgba(var(--theme-color-rgb), 0.1);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#nav-menu .sub-item {
    margin: 0;
    border-bottom: none;
    width: 100%;
}


#nav-menu .sub-item a:hover {
    background: var(--primary-color);
    color: #fff;
}

#nav-menu .nav-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#nav-menu .sub-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 10px;
    transition: color 0.3s ease-in-out;
}

.nav-item.active .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-btn-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-toggle-box {
    display: none;
}

@media (max-width: 1360px) {
    #nav-menu .nav-link {
        padding: 12px 4px;
    }
}

@media (min-width: 1200px) {

    /* #nav-menu ul li a{
            padding: 10px 12px;
        } */
    #nav-menu .nav-item.active .nav-link,
    #nav-menu .nav-item:hover .nav-link {
        background-color: var(--tertiary-color);
        color: var(--primary-color);
        font-weight: bold;
    }

    /* #nav-menu ul li.active,
      #nav-menu ul li:hover {
          border-bottom: 2px solid var(--theme-color);
      } */

    #nav-menu .nav-item {
        margin: 0 6px;
    }
}

@media (max-width: 1199.99px) {
    .nav-header {
        position: sticky;
        padding: 0;
    }

    .nav-header .header-box {
        padding: 12px;
        margin: 0;
        border-radius: 0;
    }

    #nav-menu .nav-link {
        border-radius: 0;
    }

    #nav-menu .nav-item.active .nav-link,
    #nav-menu .nav-item:hover .nav-link {
        background-color: var(--tertiary-color);
        color: var(--primary-color);
        font-weight: bold;
    }

    #nav-menu {
        position: fixed;
        overflow: hidden;
        top: 74px;
        left: -101vw;
        opacity: 0;
        width: 100%;
        background-color: #fff;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-radius: 0;
        transition: all 0.5s ease-in-out;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11);
        z-index: 999;
    }

    /* #nav-menu.active {
          transition: all 0.5s ease-in-out;
        } */
    #nav-menu>ul {
        text-align: left;
        flex-direction: column;
        align-items: flex-start;
    }

    #nav-menu>ul .nav-item {
        width: 100%;
        margin-bottom: 2px;
    }

    #nav-menu .nav-link {
        text-decoration: none;
        display: block;
        font-weight: bold;
        padding: 10px;
        background-color: #f2f2f2;
    }

    #nav-menu .sub-menu {
        position: static;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        min-width: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        border: none;
        padding: 0;
        background-color: #fff;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px;
        padding: 10px;
    }

    #nav-menu .sub-item {
        width: auto;
        background-color: #f2f2f2;
    }

    #nav-menu .sub-item a {
        padding: 4px 12px;
        font-size: 14px;
    }


    #nav-menu.active {
        left: 0;
        opacity: 1;
    }

    #nav-menu.active ul li {
        transition-delay: 0s;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-toggle-box {
        display: block;
        height: 46px;
        width: 46px;
        padding: 8px;
        border: none;
        cursor: pointer;
        z-index: 9999;
        border-radius: 6px;
    }

    #nav-toggle {
        height: 30px;
        width: 30px;
        display: block;
        position: relative;
        fill: var(--primary-color);
    }

    .nav-toggle-box.active {
        fill: var(--primary-color);
        background: var(--tertiary-color);
    }

    #nav-toggle>path {
        transition: 0.6s ease-in-out;
        transform-origin: center center;
    }

    .nav-toggle-box.active svg>.one {
        transform: rotateZ(45deg) translate(-4px, 10px);
    }

    .nav-toggle-box.active svg>.two {
        opacity: 0;
    }

    .nav-toggle-box.active svg>.three {
        transform: rotateZ(-45deg) translateY(-10px);
    }
}



/* 搜索按钮和下拉框样式 */
.search-btn,
.websites-btn {
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.search-btn:hover,
.search-btn.active {
    background: var(--tertiary-color);
    color: var(--primary-color);
}

.websites-btn {
    background: var(--tertiary-color);
}

.websites-btn:hover,
.websites-btn.active {
    background: var(--primary-color);
    color: #fff;
}

.search-btn svg {
    width: 30px;
    height: 30px;
    transition: color 0.3s ease-in-out;
}

.websites-btn svg {
    width: 30px;
    height: 30px;
    transition: color 0.3s ease-in-out;
}

.search-drop-down {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(var(--theme-color-rgb), 0.1);
    padding: 16px;
    margin-top: 8px;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    z-index: 1001;
}

.websites-drop-down {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    z-index: 999;
}

.websites-drop-down a {
    display: block;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    color: var(--text-color);
    text-decoration: none;
    background: var(--tertiary-color);
}

.websites-drop-down a:hover {
    background: var(--primary-color);
    color: #fff;
}

.search-drop-down.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.websites-drop-down.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-drop-down form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-drop-down input[type="text"] {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid rgba(var(--theme-color-rgb), 0.1);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease-in-out;
}

.search-drop-down input[type="text"]:focus {
    /* border-color: var(--primary-color); */
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.search-drop-down input[type="text"]::placeholder {
    color: var(--text-color);
}

.search-drop-down button[type="submit"] {
    padding: 10px 16px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .websites-drop-down {
        gap: 8px;
    }

    .websites-drop-down a {
        padding: 6px 12px;
        font-size: 14px;
    }

    .search-btn,
    .websites-btn {
        padding: 4px;
    }

    .websites-btn span {
        display: none;
    }

    .search-btn svg,
    .websites-btn svg {
        width: 24px;
        height: 24px;
    }

    .nav-btn-box {
        gap: 4px;
    }
}

.tab-nav {
    display: flex;
    gap: 16px;
    border-bottom: 4px solid var(--tertiary-color);
}

.tab-nav .tab-nav-item {
    padding: 0 0 14px 0;
    cursor: pointer;
    position: relative;
    margin-bottom: -4px;
    font-weight: 600;
}

.tab-nav .tab-nav-item:hover {
    color: var(--primary-color);
}

.tab-nav .tab-nav-item .tab-line {
    position: absolute;
    bottom: 0;
    right: 1px;
    width: 28px;
    height: 4px;
    border-left: 4px solid var(--primary-color);
    transform: skewX(-15deg);
    border-right: 4px solid var(--primary-color);
    opacity: 0;
    transition: all 0.3s ease;
}

.tab-nav .tab-nav-item .tab-line::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    right: 4px;
    width: 12px;
    height: 4px;
    border-left: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
}

.tab-nav .tab-nav-item::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    left: 1px;
    width: calc(100% - 35px);
    height: 4px;
    background-color: var(--primary-color);
    transform: skewX(-15deg);
    opacity: 0;
    transition: all 0.3s ease;
}

.tab-nav .tab-nav-item:hover::after,
.tab-nav .tab-nav-item.active::after,
.tab-nav .tab-nav-item:hover .tab-line,
.tab-nav .tab-nav-item.active .tab-line {
    opacity: 1;
}

.tab-nav .tab-nav-item.active,
.tab-nav .tab-nav-item:hover .tab-line {
    color: var(--primary-color);
}

.tab-content {
    position: relative;
}

.tab-content .tab-pane {
    opacity: 0;
    display: none;
}

.tab-content .tab-pane.active {
    opacity: 1;
    display: block;
}

/* .tab-box{
    background-color: #f3f3f3;
    border-radius: 6px;
    padding: 16px;
} */

.section-title-en-line {
    position: relative;
    padding-left: 12px;
}

.section-title-en-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2px;
    height: calc(100% - 10px);
    background-color: var(--color-primary);
}

.section-title-en-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 2px;
    height: 6px;
    background-color: var(--color-secondary);
}

.section-title-en-line .title-en {
    line-height: 1;
    color: var(--desc-color);
    margin-bottom: 6px;
}

.section-title-en-line .title-zh {
    line-height: 1;
    color: var(--color-primary);
}

.section {
    padding: 64px 0;
}

.pe-60 {
    padding-right: 60px;
}

.cover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}

.cover-text-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.5);
}


.text-white {
    color: #fff;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.bg-white {
    background-color: #fff;
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-secondary {
    background-color: var(--secondary-color);
}

.bg-light {
    background-color: var(--bg-color);
}


ul,
li {
    list-style: none;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: var(--text-color);
}

.title {
    color: var(--title-color);
}

.hover-box {
    overflow: hidden;
    position: relative;
}

a.hover-box {
    display: block;
}

.hover-box img {
    transition: transform 0.3s ease-in-out;
}

.hover-box:hover {
    color: var(--primary-color);
}

.hover-x {
    transition: transform 0.3s ease-in-out;
}

.hover-x:hover {
    transform: translateX(10px);
}

.hover-box:hover .title {
    color: var(--primary-color);
}

.hover-box:hover .icon {
    color: var(--primary-color);
}

.hover-box:hover .line {
    background-color: var(--primary-color);
}

.hover-box:hover img {
    transform: scale(1.03);
}

.hover-box:hover a {
    color: var(--primary-color);
}

.hover-shadow {
    transition: box-shadow 0.3s ease-in-out;
}

.hover-shadow:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.container {
    position: relative;
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.container-1200 {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    width: 100%;
}

.container-1280 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    width: 100%;
}

@media screen and (max-width: 992px) {

    .container,
    .container-1200,
    .container-1280 {
        padding: 0 14px;
    }
}

/* 通用间距 */
.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-48 {
    margin-top: 48px;
}

.mt-64 {
    margin-top: 64px;
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-24 {
    font-size: 24px;
}

.fs-32 {
    font-size: 32px;
}

.fs-36 {
    font-size: 36px;
}

.fs-40 {
    font-size: 40px;
}

.fs-44 {
    font-size: 44px;
}

.fs-48 {
    font-size: 48px;
}

.fs-64 {
    font-size: 64px;
}

.fs-80 {
    font-size: 80px;
}

@media screen and (max-width: 1280px) {

    /* 通用间距 */
    .mt-16 {
        margin-top: 12px;
    }

    .mt-24 {
        margin-top: 18px;
    }

    .mt-32 {
        margin-top: 24px;
    }

    .mt-40 {
        margin-top: calc(1.5vw + 18px);
    }

    .mt-48 {
        margin-top: calc(1.5vw + 20px);
    }

    .mt-64 {
        margin-top: calc(1.5vw + 24px);
    }

    .section {
        padding: calc(1.5vw + 24px) 0;
    }

    /* 响应式字体大小 */
    .fs-80 {
        font-size: calc(2vw + 24px);
    }

    .fs-64 {
        font-size: calc(2vw + 24px);
    }

    .fs-48 {
        font-size: calc(2vw + 22px);
    }

    .fs-44 {
        font-size: calc(1.8vw + 20px);
    }

    .fs-40 {
        font-size: calc(1.6vw + 20px);
    }

    .fs-36 {
        font-size: calc(1.4vw + 19px);
    }

    .fs-32 {
        font-size: calc(1vw + 18px);
    }

    .fs-24 {
        font-size: calc(0.625vw + 16px);
    }

    .fs-20 {
        font-size: calc(0.5vw + 14px);
    }
}

.list-no-border>li {
    margin-bottom: 4px;
    /* background-color: var(--bg-color); */
    padding: 9px 0;
}

.list-border>li {
    border-bottom: 1px solid #eee;
    padding: 12px 0;
}

.list-border>li:nth-last-of-type(1) {
    border-bottom: none;
}

.list-borders>li {
    border-top: 1px solid #eee;
    padding: 12px 0;
}

.list-borders>li:nth-last-of-type(1) {
    border-bottom: 1px solid #eee;
}

.flex-2-1 {
    display: flex;
    gap: 32px;
}

.flex-2-3 {
    display: flex;
    gap: 32px;
}

.flex-2-3>*:nth-child(1) {
    width: 40%;
    flex-shrink: 0;
}

.flex-2-3>*:nth-child(2) {
    width: calc(60% - 32px);
}

.flex-2-1>* {
    width: 50%;
}

.grid-4-1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
}

.grid-4-1>* {
    min-width: 0;
}

.grid-3-2-2 {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    gap: 32px;
}

.grid-3-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.grid-3-1>* {
    min-width: 0;
}

.grid-3-2-2>* {
    min-width: 0;
}

.grid-2-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 32px;
}

.grid-2-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
}

.grid-2-2>* {
    min-width: 0;
}

.grid-2-1>* {
    min-width: 0;
}

.grid-400-2-3 {
    display: grid;
    grid-template-columns: 400px 2fr 3fr;
    grid-gap: 32px;
}

.grid-400-1-1 {
    display: grid;
    grid-template-columns: 400px 1fr 1fr;
    grid-gap: 32px;
}

.grid-400-1-1>* {
    min-width: 0;
}

@media screen and (max-width: 1280px) {
    .grid-400-1-1 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-400-1-1>:nth-child(1) {
        grid-column: span 2;
    }
}

@media screen and (max-width: 991.98px) {
    .grid-400-1-1 {
        grid-template-columns: 1fr;
    }

    .grid-400-1-1>:nth-child(1) {
        grid-column: span 1;
    }
}


.grid-300-1-1 {
    display: grid;
    grid-template-columns: 300px 1fr 1fr;
    grid-gap: 32px;
}

.grid-300-1-1>* {
    min-width: 0;
}

.grid-200-1-1 {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-gap: 32px;
}

.grid-200-1-1>* {
    min-width: 0;
}


.grid-2-3 {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-gap: 32px;
}

.grid-item {
    width: 100%;
    height: 100%;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-item p {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 16px;
}







@media screen and (max-width: 991.98px) {
    .flex-2-1 {
        flex-wrap: wrap;
        gap: 24px;
    }

    .flex-2-1>* {
        width: 100%;
    }

    .grid-2-1 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .grid-3-1 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .grid-2-2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .grid-4-1 {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .grid-2-3 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media screen and (max-width: 575.98px) {
    .grid-4-1 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.video-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}


.party-safety-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.party-card-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
    gap: 30px;
}

.party-card {
    min-width: 0;
    position: relative;
}

.party-card:nth-child(2) {
    grid-row: span 2;
}

.party-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.party-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
}

.party-card .overlay h2 {
    font-size: calc(0.3vw + 16px);
    line-height: 1.5;
}

.party-card .link {
    display: inline-block;
    padding: 8px 16px;
    background: white;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.party-card .link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* 矿井风采大图显示样式 */
.img-show-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: pointer;
}

.img-show-box.active {
    display: flex;
}

.img-show-box img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    cursor: default;
}

.img-show-box .close-btn {
    position: absolute;
    top: 10%;
    right: 50%;
    transform: translateX(50%);
    color: white;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}
.img-show-box .close-btn svg {
    width: 32px;
    height: 32px;
}

.img-show-box .close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 矿井风采图片点击效果 */
.swiper-coal-pics .swiper-slide img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.swiper-coal-pics .swiper-slide img:hover {
    transform: scale(1.05);
}

@media screen and (max-width: 575.98px) {
    .party-card-box {
        grid-template-columns: 1fr;
        grid-auto-rows: 140px;
        gap: 20px;
    }

    .party-card:nth-child(2) {
        grid-row: span 1;
    }
}



.party-building,
.social-responsibility {
    position: relative;
    height: 300px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.party-building img,
.social-responsibility img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.party-building:hover img,
.social-responsibility:hover img {
    transform: scale(1.05);
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(45deg, rgba(220, 38, 38, 0.8), rgba(239, 68, 68, 0.6)); */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.social-responsibility .section-overlay {
    background: none;
    /* background: linear-gradient(45deg, rgba(34, 197, 94, 0.8), rgba(74, 222, 128, 0.6)); */
    background: linear-gradient(45deg, rgba(4, 16, 49, 0.8), rgba(3, 65, 51, 0.345));
}

.section-overlay h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.section-overlay p {
    margin-bottom: 25px;
    opacity: 0.9;
    font-size: 1.1rem;
}

.section-link {
    display: inline-block;
    padding: 12px 30px;
    background: white;
    color: #333;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.section-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767.98px) {

    .social-responsibility,
    .party-building {
        height: 200px;
    }

    .party-safety-section {
        grid-template-columns: 1fr;
    }

    .section-overlay h2 {
        font-size: 1.4rem;
    }

    .section-link {
        padding: 10px 20px;
        font-size: 14px;
    }
}


.news-list-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.news-list-text2 {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.news-list2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media screen and (max-width: 767.98px) {
    .news-list2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 575.98px) {
    .news-list2 {
        grid-template-columns: 1fr;
    }
}

.news-list-imgs3 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.news-item3 {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.news-item3 .news-img-link {
    aspect-ratio: 5/3;
    border-radius: 4px;
    overflow: hidden;
}

.news-item3 .news-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item2 {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item2:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.news-item2 .news-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: #f0f0f0;
    display: block;
}

.news-item2 .news-info {
    padding: 16px;
}

.news-desc {
    font-size: 14px;
    color: var(--color-desc);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-img-link {
    display: block;
    overflow: hidden;
}

.news-img-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-img-link:hover img {
    transform: scale(1.05);
}

.news-time {
    font-size: 12px;
    line-height: 1.6;
    color: #999999;
}

@media screen and (max-width: 767.98px) {
    .news-item3 {
        grid-template-columns: 100px 1fr;
        gap: 12px;
        position: relative;
    }

    .news-item3 .news-img-link {
        aspect-ratio: 3/2;
    }

    .news-item3 .news-desc {
        margin-bottom: 0;
        line-height: 1.4;
        font-size: 14px;
    }

    .news-item3 .news-time {
        position: absolute;
        bottom: 0;
        left: 10px;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 2px 4px 3px;
        border-radius: 4px;
        color: #fff;
        width: 80px;
        text-align: center;
    }

    .news-item3 .news-title {
        margin-bottom: 0;
        font-size: 15px;
    }
}

/* main banner */
.swiper-banner {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
    --swiper-theme-color: #fff;
    --swiper-pagination-bullet-width: 40px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bottom: 30px;
    height: 60vw;
    max-height: 800px;
    position: relative;
}


.swiper-banner .swiper-slide img {
    transition: 1s linear 2s;
    transform: scale(1.1, 1.1);
}

.swiper-banner .swiper-slide-active img,
.swiper-banner .swiper-slide-duplicate-active img {
    transition: 6s linear;
    transform: scale(1, 1);
}

/* .swiper-banner .title1{
    font-weight: bold;
} */
.swiper-banner .swiper-slide-active .title1 {
    animation: fadeInDown 1s .3s ease-in-out both;
}

.swiper-banner .swiper-slide-active .title2 {
    animation: fadeInDown 1s ease-in-out both;
}

.swiper-banner .swiper-slide-active .title3 {
    animation: fadeInDown 1s .5s ease-in-out both;
}

.swiper-banner .swiper-slide .img_box {
    width: 100%;
    height: 100%;
}

.swiper-banner .swiper-slide .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-banner .swiper-slide .text_box {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    width: 70%;
    max-width: 1200px;
}

.swiper-banner .swiper-slide .text_box>* {
    text-shadow: 0 0 10px rgba(12, 17, 50, 0.285);
}

@media screen and (max-width:1280px) {
    .swiper-banner {
        height: 60vh;
        max-height: 400px;
    }
}

@media screen and (max-width:1200px) {
    .swiper-banner .swiper-slide .text_box {
        top: 50%;
    }
}

@media screen and (max-width:768px) {
    .swiper-banner {
        height: 30vh;
        max-height: 300px;
    }

    .swiper-banner .swiper-slide .text_box {
        width: 90%;
    }

    .swiper-banner {
        --swiper-pagination-bullet-width: 6px;
        --swiper-pagination-bullet-height: 8px;
        --swiper-pagination-bottom: 12px;
    }
}

.swiper-box {
    width: 100%;
    position: relative;
}

.tab-box {
    min-width: 0;
}

.swiper-news1 {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
    --swiper-theme-color: #fff;
    --swiper-pagination-bullet-width: 6px;
    --swiper-pagination-bullet-height: 20px;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bottom: 9px;
    height: 400px;
    min-width: 0;
    width: 100%;
}

.swiper-news1 .img_box {
    width: 100%;
    height: 100%;
}

.swiper-news1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

section .swiper-news1 .swiper-pagination-bullets {
    text-align: right;
    right: 12px;
    left: auto;
    width: auto;
}

.main-section-news a {
    display: block;
}

@media screen and (max-width:768px) {
    .swiper-news1 {
        height: 300px;
    }
}

@media screen and (max-width:576px) {
    .swiper-news1 {
        height: 200px;
    }
}

.date {
    color: var(--color-desc);
    font-size: 14px;
}

.item-list-title-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.item-list-title-date::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.item-list-title-date:hover::after {
    width: 100%;
}

.item-list-title-date .title {
    flex: 1;
    display: block;
    max-width: calc(100% - 100px);
}

.item-list-title-date .date {
    width: 100px;
    text-align: right;
}


.item-list-title-date2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    transition: all 0.3s ease-in-out;
}

.item-list-title-date2:hover {
    transform: translateX(-12px);
}

.item-list-title-date2 .item-content {
    flex: 1;
    display: block;
}

.item-content .title {
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.item-content .item-description {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-date-box {
    background-color: #eee;
    width: 88px;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.3s ease;
}

.item-day {
    line-height: 1;
    margin-bottom: 6px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.item-year-month {
    font-size: 16px;
    color: #666;
    transition: all 0.3s ease;
}

.item-list-title-date2:hover .item-date-box {
    background-color: var(--primary-color);
    color: #fff;
}

.item-list-title-date2:hover .item-year-month {
    color: #fff;
}

@media (max-width: 768px) {
    .item-list-title-date2 {
        gap: 12px;
    }

    .item-date-box {
        width: 68px;
    }

    .item-year-month {
        font-size: 12px;
    }

    .item-day {
        margin-bottom: 0;
    }
}

.swiper-top-news-section {
    position: relative;
    /* margin-top: 40px; */
    z-index: 10;
    background-color: #ffffff;
    /* padding: 0 16px; */
    display: flex;
    align-items: center;
    /* border-bottom: 1px solid var(--secondary-color); */
    border-bottom: 1px solid var(--tertiary-color);
    /* border-radius: 8px 8px 0 0; */
    gap: 24px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.swiper-top-news {
    --swiper-pagination-color: var(--secondary-color);
    --swiper-pagination-bullet-vertical-gap: 2px;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bullet-height: 4px;
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-right: 0;
}

.swiper-top-news .wiper-pagination-bullets {
    right: 0;
    height: 100%;
}

.swiper-top-news-section .title {
    font-size: 16px;
    font-weight: bold;
    color: var(--secondary-color);
    width: 100px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.swiper-top-news-section a {
    padding-right: 50px;
}

.swiper-top-news-section .swiper-top-news {
    width: 100%;
    flex: 1;
    height: 60px;
}

.swiper-top-news .swiper-slide {
    display: flex;
    align-items: center;
    gap: 12px;
}

.swiper-top-news-section .icon {
    width: 32px;
    height: 32px;
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .swiper-top-news-section {
        /* padding: 0 12px; */
        gap: 12px;
    }

    .swiper-top-news-section a {
        padding-right: 24px;
    }

    .swiper-top-news-section .title {
        width: auto;
    }
}

.news-center-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

/* .news-center-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
} */


.nav-pills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    /* padding: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
}

.pill-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 4px;
    /* border: 2px solid transparent; */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.card-icon-box {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    height: 280px;
}

.card-icon {
    display: block;
    width: calc(50% - 6px);
    position: relative;
    background: linear-gradient(135deg, #eff2f492 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.pill-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.card-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.pill-item:hover::before,
.pill-item.active::before,
.card-icon:hover::before,
.card-icon.active::before {
    opacity: 1;
}


.pill-icon {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-tertiary);
    border-radius: 10px;
    margin-right: 16px;
    transition: all 0.3s ease;
}

.card-icon .icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    transition: all 0.3s ease;
}

.pill-item:hover,
.card-icon:hover {
    transform: translateY(-4px);
}

.pill-item:hover .pill-icon,
.pill-item.active .pill-icon {
    background: white;
    transform: scale(1.1);
}

.card-icon:hover .icon,
.card-icon.active .icon {
    transform: scale(1.1);
}


.pill-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.card-icon .icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.pill-item:hover .pill-icon svg,
.pill-item.active .pill-icon svg {
    color: var(--color-secondary);
}

.card-icon:hover .icon svg,
.card-icon.active .icon svg {
    color: #fff;
}

.pill-content,
.card-icon .title {
    position: relative;
    z-index: 2;
    flex: 1;
}

.pill-content h3,
.card-icon .title h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-title);
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.pill-content p,
.card-icon .title p {
    font-size: 14px;
    color: var(--color-desc);
    margin: 0;
    transition: color 0.3s ease;
}

.pill-item:hover .pill-content h3,
.pill-item:hover .pill-content p,
.pill-item.active .pill-content h3,
.pill-item.active .pill-content p,
.card-icon:hover .title h3,
.card-icon.active .title h3,
.card-icon:hover .title p,
.card-icon.active .title p {
    color: white;
}

.pill-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-secondary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.pill-item:hover .pill-indicator,
.pill-item.active .pill-indicator {
    transform: scaleX(1);
}

/* 内容区域布局 */
.news-content-area {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 32px;
}




/* Tab新闻列表 */
.tab-news-section {
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.tab-nav-container {
    display: flex;
    background: #f4f4f4;
}

.tab-nav-item2 {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
    color: var(--color-text);
}

.tab-nav-item2.active {
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
}

.tab-nav-item2.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-secondary);
    opacity: 0;
}

.tab-icon {
    font-size: 18px;
}

.tab-count {
    background: var(--color-secondary);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.tab-content2 {
    padding: 24px;
}

.tab-pane2 {
    display: none;
}

.tab-pane2.active {
    display: block;
}

@media screen and (max-width: 992px) {
    .tab-content2 {
        padding: 14px;
    }
}

/* 新闻列表样式 */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.news-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    /* padding: 20px; */
    border-radius: 4px;
    /* border: 1px solid #e9ecef; */
    transition: all 0.3s ease;
    cursor: pointer;
}

.news-item:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); */
    border-color: var(--color-primary);
}

.news-item.featured {
    grid-template-columns: 200px 1fr;
}

.news-image {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    max-width: 100%;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-item:hover .news-image img {
    transform: scale(1.05);
}

.news-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--color-secondary);
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.news-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.news-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.news-item:hover .news-title {
    color: var(--color-primary);
}



.news-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--color-desc);
}

/* 侧边栏样式 */
.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.sidebar-widget {
    width: 100%;
    background: white;
    border-radius: 4px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.sidebar-widget:hover {
    transform: translateY(-2px);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    margin-top: -7px;
    border-bottom: 2px solid var(--color-tertiary);
}

.widget-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-title);
    margin: 0;
    line-height: 1;
}

.more-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.more-link:hover {
    color: var(--color-primary);
}

/* 工作简报 */
.report-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    background: transparent;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.report-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: var(--color-tertiary);
    transition: all 0.6s ease;
    z-index: -1;
}

.report-item:hover::after {
    left: 0;
}

.report-item:hover {
    background-color: var(--color-tertiary);
}

.report-date {
    width: 100px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-tertiary);
    border-radius: 4px;
    font-weight: 600;
    color: var(--primary-color);
    flex-shrink: 0;
}

.report-item h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-title);
    margin: 0;
    line-height: 1.2;
    padding-right: 12px;
}

.report-date {
    font-size: 14px;
    line-height: 1;
}

.date-day {
    font-size: 12px;
}

/* 快速链接 */
.links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--color-tertiary);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--color-text);
}

.quick-link:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

.link-icon {
    font-size: 20px;
}

.quick-link span {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}



.video-info {
    padding: 16px;
}

.video-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .news-content-area {
        grid-template-columns: 1fr 300px;
        gap: 32px;
    }

    .grid-3-2-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-3-2-2>*:nth-child(3n+1) {
        grid-column: span 2;
    }

    .grid-3-2-2>*:nth-child(3n+2) {
        grid-column: span 1;
    }

    .grid-3-2-2>*:nth-child(3n+3) {
        grid-column: span 1;
    }
}

@media (max-width: 992px) {
    .nav-pills-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .news-content-area {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .news-item.featured {
        grid-template-columns: 150px 1fr;
    }
}

@media (max-width: 768px) {
    .grid-3-2-2 {
        grid-template-columns: 1fr;
    }

    .grid-3-2-2>*:nth-child(3n+1) {
        grid-column: span 1;
    }


    .nav-pills-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .pill-item {
        padding: 16px;
    }


    .tab-nav-item {
        padding: 16px;
    }

    .news-item {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .news-item.featured {
        grid-template-columns: 1fr;
    }

    .news-image {
        height: 150px;
    }

    .links-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sidebar-widget {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .pill-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }

    .pill-content h3 {
        font-size: 14px;
    }

    .pill-content p {
        font-size: 12px;
    }

    .tab-content2 {
        padding: 20px;
    }

    .news-meta {
        flex-direction: column;
        gap: 8px;
    }
}

/* 图文新闻列表样式 */
.news-card-img-lists {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
}

.news-main {
    display: flex;
    flex-direction: column;
}

.news-card-img-lists .news-item {
    /* border: 1px solid #e9ecef; */
    transition: all 0.3s ease;
}

.news-card-img-lists .news-item:hover {
    transform: translateY(-4px);
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); */
    /* border-color: var(--color-primary); */
}


.news-card-img-lists .news-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.news-card-img-lists .news-item {
    grid-template-columns: 1fr;
    padding: 0;
    border-radius: 4px;
}

.news-card-img-lists .news-item.featured {
    grid-template-columns: 200px 1fr;
    padding: 24px;
}

.news-card-img-lists .news-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-title);
    line-height: 1.4;
    margin-bottom: 8px;
    transition: color 0.3s ease;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-img-lists .news-item:hover .news-title {
    color: var(--color-primary);
}

.news-card-img-lists .news-desc {
    font-size: 14px;
    color: var(--color-desc);
    line-height: 1.6;
    margin-bottom: 12px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-img-lists .news-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--color-desc);
}

.news-card-img-lists .news-date {
    /* padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px; */
    font-size: 12px;
}

@media (max-width: 1200px) {


    .news-card-img-lists .news-item.featured {
        grid-template-columns: 1fr;
        padding: 20px;
    }

}

@media (max-width: 992px) {
    .news-card-img-lists {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .news-card-img-lists .news-item {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .news-card-img-lists {
        gap: 20px;
    }

    .news-card-img-lists .news-item.featured {
        padding: 16px;
    }

    .news-card-img-lists .news-title {
        font-size: 14px;
    }

    .news-card-img-lists .news-meta {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 576px) {
    .news-card-img-lists .news-item {
        grid-template-columns: 1fr;
    }
}

.section .main-video-swiper {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: var(--secondary-color);
    --swiper-pagination-bullet-width: 32px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bottom: 0;
    padding-bottom: 30px;
}

.video--item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video--item:hover,
.video--item.active {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.video--item .video-box {
    width: 100%;
    aspect-ratio: 3/2;
    background-color: #fff;
    position: relative;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.video--item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video--item .video-play-btn-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    cursor: pointer;
    opacity: 0;
}

.video--item .video-info {
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.video--item .video-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video--item .video-desc {
    font-size: 14px;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.video--item .video-meta {
    /* padding: 12px 16px; */
    width: 100%;
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: #666666;
    justify-content: space-between;
}



.video--item .video-play-btn-box svg {
    color: #fff;
    width: 60px;
    height: 60px;
}

.video--item:hover .video-play-btn-box,
.video--item.active .video-play-btn-box {
    opacity: 1;
}

.video--item .video-play-btn-box:not(.playing) .video-play-btn {
    display: block;
}

.video--item .video-play-btn-box:not(.playing) .video-pause-btn {
    display: none;
}

.video--item .video-play-btn-box.playing .video-play-btn {
    display: none;
}

.video--item .video-play-btn-box.playing .video-pause-btn {
    display: block;
}

@media (max-width: 768px) {
    .video--item .video-name {
        font-size: 14px;
    }

    .video--item .video-desc {
        font-size: 12px;
    }

    .section .main-video-swiper {
        --swiper-pagination-bullet-width: 8px;
        --swiper-pagination-bullet-height: 8px;
    }
}


.section .top-events-swiper {
    --swiper-navigation-color: #fff;

}

.section .top-events-swiper .swiper-pagination-bullets {
    width: auto;
}

.top-events-swiper .swiper-slide img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    display: block;
}

.top-title-with-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    --swiper-pagination-color: var(--secondary-color);
    --swiper-pagination-bullet-width: 20px;
    --swiper-pagination-bullet-height: 20px;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bottom: 0;
}

.section .top-title-with-pagination .swiper-pagination {
    position: relative;
    width: auto;
    height: 20px;
}

@media screen and (max-width: 992px) {
    .top-title-with-pagination {
        --swiper-pagination-bullet-width: 4px;
        --swiper-pagination-bullet-height: 12px;
    }

    .section .top-title-with-pagination .swiper-pagination {
        height: 12px;
    }
}

.section .industry-section {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* .section .industry-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd700 0%, #ff6b35 50%, #ffd700 100%);
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
} */


.industry-link-btns {
    order: 2;
    width: 200px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 360px;
    padding: 10px 0;
    position: relative;
    /* background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); */
}

.industry-link-btns h2 {
    padding: 12px 24px;
    color: #353535;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

.industry-link-btns h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(21, 0, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.industry-link-btns h2.active {
    color: #fff;
    background: linear-gradient(135deg, #12255C 0%, #12255C 100%);
    border-color: #12255C;
    box-shadow: 0 4px 15px rgba(18, 37, 92, 0.3);
}

.industry-link-btns h2:hover {
    border-color: #12255C;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(18, 37, 92, 0.2);
}

.industry-link-btns h2:hover::before {
    left: 100%;
}

.industry-swiper {
    border-radius: 12px;
    overflow: hidden;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
    flex: 1;
}

.industry-content {
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    border: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
    background: #fff;
}


.industry-img {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 400px;
}

.industry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.industry-content:hover .industry-img img {
    transform: scale(1.05);
}

.industry-desc {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.industry-desc::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #12255C 50%, transparent 100%);
}

.industry-desc h2 {
    color: #1a1a2e;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
}

.industry-desc h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1500ff 0%, #820505 100%);
    border-radius: 2px;
}

.industry-desc p {
    color: #555555;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    font-weight: 400;
}

.industry-link {
    display: inline-block;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    padding: 14px 32px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    align-self: flex-start;
}

.industry-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #12255C 0%, #ac0505 100%);
    transition: left 0.3s ease;
    z-index: -1;
}

.industry-link:hover {
    color: #fff;
    border-color: #12255C;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 37, 92, 0.3);
}

.industry-link:hover::before {
    left: 0;
}

.industry-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid #12255C;
    width: 12px;
    height: 12px;
    opacity: 1;
    transition: all 0.3s ease;
}

.industry-swiper .swiper-pagination-bullet-active {
    background: #12255C;
    /* transform: scale(1.2); */
    /* box-shadow: 0 0 10px rgba(18, 37, 92, 0.5); */
}

@media (max-width: 1200px) {
    .section .industry-section {
        flex-direction: column;
        gap: 24px;
    }

    .industry-link-btns {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 12px;
        height: auto;
        width: 100%;
        flex-wrap: wrap;
    }

    .industry-link-btns h2 {
        width: auto;
    }

    .industry-swiper {
        margin-top: 0;
        width: 100%;
        order: 2;
    }

    .industry-desc {
        padding: 35px;
    }

    .industry-desc h2 {
        font-size: 26px;
    }
}

@media (max-width: 992px) {
    .section .industry-section {
        gap: 12px;
    }

    .industry-img {
        height: 300px;
    }


    .industry-desc {
        padding: 30px;
    }

    .industry-desc::before {
        display: none;
    }

    .industry-desc h2 {
        font-size: 24px;
    }

    .industry-desc p {
        font-size: 15px;
    }


}

@media (max-width: 768px) {
    .industry-link-btns h2 {
        font-size: 14px;
        padding: 6px 12px;
        width: calc(33% - 12px);
    }

    .industry-content {
        flex-direction: column;
    }

    .section .industry-section {
        gap: 0;
    }

    .industry-desc {
        padding: 16px;
    }

    .industry-desc h2 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .industry-desc p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .industry-link {
        padding: 10px 16px;
        font-size: 14px;
    }


}

@media (max-width: 576px) {

    .industry-content {
        border-radius: 8px;
        min-height: auto;
    }

    .industry-img {
        height: 200px;
    }

    .industry-desc h2::after {
        width: 50px;
        height: 2px;
        bottom: -6px;
    }

    .industry-desc p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .industry-link {
        padding: 8px 18px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

}

.product-section {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
}

.product-sidebar {
    min-width: 0;
    flex-shrink: 0;
    position: relative;
}

.products-category-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.products-category-nav a {
    display: block;
    padding: 12px 24px;
    color: #353535;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

.products-category-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(21, 0, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.products-category-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, #12255C 0%, #12255C 100%);
    border-color: #12255C;
    box-shadow: 0 4px 15px rgba(18, 37, 92, 0.3);
}

.products-category-nav a:hover {
    border-color: #12255C;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(18, 37, 92, 0.2);
}

.products-category-nav a:hover::before {
    left: 100%;
}

.product-lists .product-item {
    min-width: 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

.product-lists .product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.product-lists .product-item .img_box {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.product-lists .product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-lists .product-item .product-info {
    padding: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.153);
}

.product-lists .product-item .product-title {
    font-size: 18px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
}

.product-lists .product-item .product-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #555555;
}

.product-lists {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 32px;
    min-width: 0;
}

/* .product-lists .product-item{
    grid-column-end: span 1;
} */
.product-lists.grid-num-5 {
    grid-template-columns: repeat(4, 1fr);
}

.product-lists.grid-num-5 .product-item:nth-child(1) {
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.product-lists.grid-num-6 {
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 300px;
}

.product-lists.grid-num-6 .product-item {
    grid-column-end: span 2;
}

.product-lists.grid-num-6 .product-item:nth-child(1) {
    grid-column-end: span 3;
}

.product-lists.grid-num-6 .product-item:nth-child(6) {
    grid-column-end: span 3;
}

.product-lists.grid-num-7 {
    grid-template-columns: repeat(12, 1fr);
    /* grid-auto-rows: 240px; */
}

.product-lists.grid-num-7 .product-item {
    grid-column-end: span 3;
}

.product-lists.grid-num-7 .product-item:nth-child(7n + 5),
.product-lists.grid-num-7 .product-item:nth-child(7n + 6),
.product-lists.grid-num-7 .product-item:nth-child(7n + 7) {
    grid-column-end: span 4;
}

.product-lists.grid-num-8 {
    grid-template-columns: repeat(4, 1fr);
}

.product-lists.grid-num-8 .product-item:nth-child(1) {
    grid-row-end: span 1;
}

@media (max-width: 1200px) {
    .products-category-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .product-section {
        grid-template-columns: 1fr;
    }

    .product-lists {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .product-lists .product-item .product-title {
        font-size: 16px;
    }

    .product-lists.grid-num-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .product-lists.grid-num-5 .product-item:nth-child(1) {
        grid-column-end: span 2;
        grid-row-end: span 2;
    }


    .product-lists.grid-num-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        grid-auto-rows: 240px;
    }

    .product-lists.grid-num-6 .product-item {
        grid-column-end: span 1;
    }

    .product-lists.grid-num-6 .product-item:nth-child(1) {
        grid-column-end: span 1;
    }

    .product-lists.grid-num-6 .product-item:nth-child(6) {
        grid-column-end: span 1;
    }


    .product-lists.grid-num-7 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        grid-auto-rows: 240px;
    }

    .product-lists.grid-num-7 .product-item {
        grid-column-end: span 1;
    }

    .product-lists.grid-num-7 .product-item:nth-child(1) {
        grid-column-end: span 2;
    }

    .product-lists.grid-num-7 .product-item:nth-child(7n + 5),
    .product-lists.grid-num-7 .product-item:nth-child(7n + 6),
    .product-lists.grid-num-7 .product-item:nth-child(7n + 7) {
        grid-column-end: span 1;
    }

    .product-lists.grid-num-8 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        grid-auto-rows: 240px;
    }


}

@media (max-width: 576px) {

    .product-lists.grid-num-5,
    .product-lists.grid-num-6,
    .product-lists.grid-num-7,
    .product-lists.grid-num-8 {
        grid-auto-rows: 160px;
    }

    .products-category-nav a {
        padding: 8px 16px;
        font-size: 14px;
    }

    .product-lists {
        grid-template-columns: 1fr;
    }

    /* .product-lists .product-item{
        width: 70%;
        margin: 0 auto;
    } */
    .product-lists .product-item .product-title {
        font-size: 14px;
    }

    .product-lists .product-item .product-desc {
        font-size: 13px;
    }
}


.supervision-content-area {
    display: grid;
    grid-template-columns: 240px 1fr 1fr;
    gap: 32px;
}

.supervision-content-area .news-card-img-lists {
    grid-template-columns: 1fr;
}

.supervision-content-area .news-card-img-lists .news-item {
    grid-template-columns: 200px 1fr;
}

@media (max-width: 1280px) {
    .supervision-content-area {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .supervision-content-area .news-nav-innovation {
        grid-column-end: span 2;
    }

    .supervision-content-area .news-card-img-lists .news-item {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 992px) {
    .supervision-content-area {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .supervision-content-area .news-nav-innovation {
        grid-column-end: span 1;
    }

    .supervision-content-area .news-card-img-lists .news-item {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .supervision-content-area .news-card-img-lists .news-item {
        grid-template-columns: 1fr;
    }
}

.culture-section {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
}

.culture-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 32px;
    grid-auto-rows: 320px;
}

.culture-grid .grid-item {
    grid-column-end: span 3;
    width: 100%;
    height: 100%;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.culture-grid .grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.culture-grid .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.culture-grid .grid-item .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    z-index: 1;
}

.culture-grid .grid-item:nth-child(1) {
    grid-column-end: span 5;
}

.culture-grid .grid-item:nth-child(4) {
    grid-column-end: span 6;
}

.culture-grid .grid-item:nth-child(5) {
    grid-column-end: span 5;
}

.culture-navs {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.culture-navs a {
    display: block;
    padding: 12px 20px;
    color: #333;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    font-weight: bold;
}

.culture-navs a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0.1;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.culture-navs a:hover::after {
    opacity: 1;
}

.culture-navs a:hover {
    color: #fff;
}


@media (max-width: 1280px) {
    .culture-section {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .culture-navs a {
        padding: 12px 20px;
        font-size: 16px;
    }

    .culture-navs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 992px) {
    .culture-navs a {
        padding: 8px 16px;
        font-size: 14px;
    }

    .culture-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .culture-grid .grid-item {
        grid-column-end: span 1;
    }

    .culture-grid .grid-item:nth-child(1) {
        grid-column-end: span 2;
    }

    .culture-grid .grid-item:nth-child(4) {
        grid-column-end: span 1;
    }

    .culture-grid .grid-item:nth-child(5) {
        grid-column-end: span 1;
    }
}

@media (max-width: 768px) {
    .culture-grid {
        grid-auto-rows: 200px;
        gap: 16px;
    }

    .culture-grid .grid-item {
        grid-column-end: span 1;
    }
}

.footer {
    padding-top: 40px;
    position: relative;
    /* background-color: var(--color-secondary); */
    /* clip-path: polygon(0 0,50% 100px, 100% 0, 100% 100%, 0 100%); */
    background-color: #f5f5f5;
}

.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    transition: opacity 0.3s ease;
    z-index: -1;
}

.footer * {
    color: #333;
}

.footer-links-swiper {
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.footer-links-swiper .swiper-slide {
    width: auto;
}


.footer-links {
    display: flex;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--color-secondary);
}

.footer-links .swiper-button-box {
    position: relative;
    width: 100px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-links .swiper-button-box .swiper-button-prev,
.footer-links .swiper-button-box .swiper-button-next {
    position: relative;
    background-color: #efeff4;
    margin: 0;
    top: 0;
    left: auto;
    right: auto;
}

.footer-links .swiper-button-box .swiper-button-prev svg,
.footer-links .swiper-button-box .swiper-button-next svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.footer-links h2 {
    background-color: var(--color-secondary);
    padding: 0 14px;
    height: 44px;
    line-height: 44px;
    color: #fff;
}

.footer-content {
    margin: 24px 0;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 32px;
    justify-content: space-between;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-erweima {
    display: flex;
    gap: 16px;
}

.code-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 120px;
    max-width: 100%;
}

.code-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-copyright {
    border-top: 1px solid #0000002e;
    font-size: 14px;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
}

.footer-logo {
    width: 400px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* .footer-logo::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: block;
    width: 200vw;
    height: 1000px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    z-index: 1;
    border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
    box-shadow: inset 0px -10px 0 0 rgba(0, 0, 0, 0.137);
} */

.footer-logo img {
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

@media (max-width: 1280px) {
    .footer-logo {
        width: 300px;
    }
}

@media (max-width: 1280px) {
    .footer-content {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .footer {
        padding-top: 20px;
    }

    .footer .footer-links-swiper {
        --swiper-navigation-size: 24px;
    }

    .footer-copyright {
        flex-direction: column;
        gap: 8px;
    }

    .footer * {
        font-size: 14px;
    }

    .footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        position: relative;
    }

    .footer-links h2 {
        background-color: transparent;
        color: #333;
        padding: 0;
    }

    .footer-links::after {
        content: '';
        position: absolute;
        left: 0;
        top: 44px;
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color-secondary);
        z-index: -1;
    }

    .footer-links .swiper-button-box {
        position: absolute;
        right: 0;
        top: 0;
    }

    .footer-links .swiper a {
        padding: 12px 0;
        display: block;
    }




}

@media (max-width: 576px) {
    .footer-content {
        gap: 16px;
    }

    .code-content {
        width: 80px;
    }

    .code-content .text {
        font-size: 10px;
    }

    .footer-contact {
        gap: 6px;
    }
}

.bg-cover-img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.page-banner-section-with-bg {
    position: relative;
    height: 400px;
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.page-banner-section-with-bg::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(4, 20, 75, 0.555);
    z-index: -1;
}

/* .banner-page-content {
} */
.banner-page-content {
    text-align: center;
    margin-top: 60px;
}

.banner-page-content .title {
    color: #fff;
    padding-bottom: 16px;
    margin-bottom: 16px;
    position: relative;
}

.banner-page-content .title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.banner-page-content .desc {
    color: #fff;
    margin-bottom: 0;
}

@media (max-width:1280px) {
    .banner-page-content {
        margin-top: 0;
    }

    .page-banner-section-with-bg {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .page-banner-section-with-bg {
        height: 200px;
    }
}

.breadcrumb-section {
    /* padding: 14px 0; */
    background-color: rgba(0, 0, 0, 0.05);
}

.detail-breadcrumb {
    font-size: 14px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
}

.detail-breadcrumb li a {
    color: #677390;
    padding-right: 8px;
}

.detail-breadcrumb li.active {
    color: #BB0016;
}

.detail-breadcrumb li::after {
    content: '/';
    color: #BB0016;
}

.detail-breadcrumb li:last-child::after {
    content: '';
}


.sidebar-box {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.sidebar-sidebar {
    flex: 0 0 220px;
    width: 220px;
    flex-shrink: 0;
}

/* .sidebar-sidebar .sidebar-bg {
    background-color: #F9F9F9;
    padding: 20px;
} */

.sidebar-sidebar.sticky .sidebar-bg {
    position: fixed;
    top: 80px;
    width: 284px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background-color: #F9F9F9;
    padding: 20px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    border-radius: 4px;
    z-index: 999;
}

.sidebar-content {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 14px;
}

.category-list li a {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    padding: 8px 12px 8px 0;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    /* background-color: #eaebf0; */
}

.category-list li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 0.3s ease-in-out;
}

.category-list li a::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--color-primary);
    position: absolute;
    left: -0;
    transform: translateX(-10px);
    top: 12px;
    transition: all 0.3s ease-in-out;
    box-shadow: 4px 4px 0 rgba(57, 2, 2, 0.2);
    opacity: 0;
}

.category-list li a:hover,
.category-list li a.active {
    color: var(--color-primary);
    padding-left: 24px;
}

/* .category-list li a:hover::after,
.category-list li a.active::after {
    width: 120px;
} */
.category-list li a:hover::before,
.category-list li a.active::before {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1024px) {
    .category-book-list {
        margin-top: 30px;
    }

    .sidebar-sidebar {
        flex: 0 0 auto;
        width: 100%;
    }

    .sidebar-sidebar .category-title {
        display: none;
    }

    .sidebar-sidebar .sidebar-bg {
        padding: 0;
        background: none;
    }

    .sidebar-box {
        flex-direction: column;
        gap: 24px;
    }

    .category-book-list {
        gap: 30px;
    }

    .category-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
        padding-left: 0;
    }

    .category-list li a {
        font-size: 14px;
        padding: 6px 20px;
        border-radius: 4px;
        background-color: #f2f3f7;
    }

    .category-list li a:hover,
    .category-list li a.active {
        color: #fff;
        background-color: var(--color-primary);
        padding-left: 20px;
    }

    .category-list li a:hover::before,
    .category-list li a.active::before {
        opacity: 0;
        transform: translateX(0);
    }


}


.news-detail-content {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow);
    /* padding: 30px;
  border: 1px solid #eee; */
}

.news-detail-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.news-detail-title {
    line-height: 1.4;
    color: var(--color-primary);
    margin-bottom: calc(0.3em + 8px);
}

.news-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #888;
    font-size: 14px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-item svg {
    width: 20px;
    height: 20px;
}

.news-detail-body {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.prev-next-article {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-bottom: 40px;
}

.prev-next-article .label {
    font-size: 14px;
    color: #666;
    min-width: 50px;
}

.prev-next-article .link {
    font-size: 14px;
    color: #666;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.prev-next-article>div {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    max-width: 100%;
}

.prev-next-article a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}


.search-page-form {
    width: 480px;
    max-width: 100%;
    display: flex;
    border: 1px solid #DAE0EE;
    border-radius: 0;
    background-color: #fff;
}

.search-input {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
}

.search-input::placeholder {
    color: #999;
}

.search-submit {
    border: none;
    border-radius: 0;
    padding: 10px 16px;
    background: white;
    color: #384572;
}

.search-meta {
    font-size: 14px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.search-keyword {
    font-size: 14px;
    color: #666;
}

.search-keyword .keyword {
    color: var(--secondary-color);
}

.search-keyword .result-count {
    color: var(--primary-color);
}

.search-result-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.result-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.result-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.result-item .item-img-link {
    width: 200px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.result-item .item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.result-item .item-img-link:hover .item-img {
    transform: scale(1.04);
}

.result-item .item-title {
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.result-item .item-title:hover {
    color: var(--color-primary);
}

.result-item .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-item .item-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.result-item .item-time {
    font-size: 14px;
    color: #888;
}

.result-item .item-title b,
.result-item .item-desc b {
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .result-item .item-img-link {
        width: 120px;
        aspect-ratio: 5 / 4;
    }

    /* .result-item .item-time{
        position: absolute;
        bottom: 0;
        left: 20px;
        width: 80px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 2px 6px 3px;
        border-radius: 4px;
    } */
}

.page-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f3;
}

.page-menu .menu-link {
    font-size: 14px;
    color: #333;
    position: relative;
    border-radius: 4px;
    display: block;
    padding: 8px 20px;
    overflow: hidden;
    z-index: 1;
    background-color: #ebedf3;
}

.page-menu .menu-link span {
    display: block;
    position: relative;
    z-index: 10;
    color: #000;
}


.page-menu .menu-link:hover,
.page-menu .menu-link.active {
    color: #fff;
    background-color: var(--color-primary);
}

@media (max-width: 768px) {
    .page-menu .menu-link {
        padding: 8px 12px;
    }

    .page-menu {
        gap: 2px;
        justify-content: flex-start;
    }
}

.news-sections--1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.news-sections--2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
}

.news-sections--1 .block,
.news-sections--2 .block {
    min-width: 0;
}

.block-main-news .img-box {
    width: 100%;
    height: 260px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 4px;
}

.cover-text-linear {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
}

.cover-text-linear .cover-title {

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis-title-date {
    display: flex;
    gap: 10px;
    max-width: 100%;
    justify-content: space-between;
    align-items: center;
}

.block-news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0 0 0;
}

.block-news-list li {
    list-style: none;
    padding-left: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.block-news-list li a {
    padding: 4px 0;
}

.block-news-list li:hover {
    transform: translateX(4px);
}

.block-news-list li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--color-secondary);
    border-radius: 0;
}

.block-news-list li:hover .title {
    color: var(--color-primary);
}

.ellipsis-title-date .date {
    font-size: 14px;
    color: #888;
    flex-shrink: 0;
}

.ellipsis-title-date .title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
}

.block-pic-cover {
    position: relative;
}

.block-pic-cover .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.block-pic-cover .img-box {
    position: relative;
    height: 260px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.block-pic-cover .cover-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
    color: #fff;
    font-size: calc(16px + .5vw);
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
}

.block-pic-cover .block-more {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background-color: #ffffff;
}

.block-pic-cover .block-more svg {
    width: 20px;
    height: 20px;
}

.block-pic-message {
    position: absolute;
    right: 2px;
    top: 2px;
    background-color: #0000004d;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 12px;
}

.block-pic-message .title {
    color: #fff;
}

.block-pic-message .num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.block-main-news .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}



.block-title-box {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-primary);
}

.block-title-box .block-title {
    margin-bottom: 0;
}

.block-title-box .block-more {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
}

.block-title-box .block-more svg {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    color: var(--color-primary);
}

.swiper-block-img-links {
    width: 100%;
    height: 480px;
    --swiper-pagination-color: var(--color-primary);
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-border-radius: 0;
}

.swiper-block-img-links .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-link-box {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
}

@media (max-width: 1023.98px) {
    .news-sections--1 .block:last-child {
        grid-column: span 2;
    }

    .block-main-news .img-box {
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .news-sections--1 {
        grid-template-columns: repeat(2, 1fr);
    }

    .swiper-block-img-links {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .news-sections--1 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .news-sections--1 .block:last-child {
        grid-column: span 1;
    }


}






.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 50px 0;
    justify-content: center;
    color: #677390;
}

.page-size-btn {
    min-width: 88px;
    text-align: center;
}

.page-size-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: white;
    border-radius: 0;
    box-shadow: 0px 8px 18px 0px #00000014;
    overflow: hidden;
    list-style: none;
    min-width: 80px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    z-index: 1001;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-size-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.page-size-dropdown li {
    padding: 0;
}

.page-size-dropdown a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    color: #384572;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
}

.page-size-dropdown a:hover {
    background-color: #1549C00D;
}

.page-size-dropdown a.active {
    background-color: #1549C00D;
    color: #1549C0;
}


.page-size-dropdown.active {
    display: block;
}

.pagination form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination>span {
    color: #677390;
}

.pagination>span,
.pagination>a,
.pagination>.current {
    padding: 0 12px;
    height: 36px;
    line-height: 33px;
    text-decoration: none;
    border: 1px solid #DAE0EE;
    border-radius: 0;
    color: #677390;
    transition: all 0.3s ease;
}

.pagination a:not(.disabled):hover {
    background-color: var(--color-primary);
    color: #fff;
}

.pagination .current {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.pagination .disabled {
    background-color: #E3E3E3CC;
    color: #677390;
    cursor: not-allowed;
}

.pagination select,
.pagination input {
    padding: 0 6px;
    height: 36px;
    line-height: 34px;
    border: 1px solid #DAE0EE;
    border-radius: 0;
    margin-left: 8px;
    color: #677390;
    max-width: 60px;
}

.pagination select:focus,
.pagination input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.pagination button {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #DAE0EE;
    border-radius: 0;
    background-color: #fff;
    cursor: pointer;
    color: #677390;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pagination button:hover {
    background-color: var(--color-primary);
    color: #fff;
}

@media (max-width: 1024px) {
    .pagination form {
        display: none;
    }
}

@media (max-width: 768px) {
    .pagination {
        margin: 30px 0;
    }

    .pagination>a:not(.prev-btn):not(.next-btn) {
        display: none;
    }
}










.return-top {
    cursor: pointer;
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    color: #23415A;
    opacity: 0;
    transition: all 0.5s ease;
    box-shadow: 0px 8px 32px 0px #0F2C0126;
}

.return-top:hover {
    background-color: #DAE0EE;
}

.return-top.active {
    opacity: 1;
}

.return-top svg {
    width: 24px;
    height: 24px;
}

.a-card-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.a-card-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.a-card-img {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    min-width: 0;
    border-radius: 4px;
    overflow: hidden;
}

.a-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}

.a-card-content {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.a-card-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: calc(0.3vw + 14px);
    font-weight: bold;
    max-width: 100%;
    display: block;
}

.a-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #5b5b5b;
    font-size: 14px;
}

.a-card-meta {
    font-size: 14px;
    color: #939393;
}

.a-card-item:hover .a-card-title {
    color: var(--color-primary);
}

.a-card-item:hover img {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .a-card-item {
        grid-template-columns: 160px 1fr;
    }
}

@media (max-width: 576px) {
    .a-card-item {
        grid-template-columns: 1fr;
    }

    .a-card-content {
        gap: 12px;
    }
}



.border-hard {
    border: 2px solid var(--coal-gray-mid);
    border-radius: 2px;
}

.shadow-hard {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-hard {
    display: inline-block;
    padding: 12px 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ebeef2;
    color: #fff;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-red {
    background-color: var(--coal-red);
    color: #fff;
}

.btn-red:hover {
    background-color: var(--coal-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(192, 16, 46, 0.3);
}

.btn-blue {
    background-color: var(--coal-blue);
    color: #fff;
}

.btn-blue:hover {
    background-color: var(--coal-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(10, 74, 143, 0.3);
}

.news-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (min-width: 768px) {
    .news-wrapper {
        flex-direction: row;
    }
}

.news-left {
    flex: 2;
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    padding: 30px;
}

.news-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.news-item-hard {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--coal-gray-light);
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.news-item-hard:hover {
    transform: translateX(10px);
}

.news-item-hard:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.news-item-hard .news-date {
    width: 70px;
    height: 70px;
    background-color: var(--coal-red-light);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.news-item-hard .news-date .day {
    font-size: calc(0.4vw + 16px);
}

.news-item-hard .news-date .month {
    font-size: 14px;
    text-transform: uppercase;
}

.news-text .news-title {
    font-size: calc(0.3vw + 14px);
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--coal-gray);
    transition: color 0.3s ease;
}

.news-text .news-title:hover {
    color: var(--coal-red);
}

.news-text .news-desc {
    font-size: 14px;
    color: #94989c;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.news-aside {
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    padding: 25px;
}

.aside-title {
    font-size: calc(0.4vw + 14px);
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--coal-blue);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--coal-blue-light);
}

.aside-list {
    list-style: none;
    min-width: 0;
}

.aside-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--coal-gray-light);
}

.aside-list li:last-child {
    border-bottom: none;
}

.aside-list a {
    text-decoration: none;
    color: var(--coal-gray);
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.aside-list a:hover {
    color: var(--coal-red);
    transform: translateX(5px);
}

.section-title {
    font-size: calc(0.6vw + 20px);
    font-weight: 800;
    text-align: center;
    margin-bottom: calc(20px + .5vw);
    position: relative;
    color: var(--coal-gray);
}

.section-title-left {
    font-size: calc(0.6vw + 20px);
    font-weight: 800;
    margin-bottom: calc(20px + .5vw);
    position: relative;
    color: var(--coal-gray);
    text-align: left;
}

.section-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--coal-red), var(--coal-blue));
    margin: 15px auto 0;
}

.section-title-left::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--coal-red), var(--coal-blue));
    margin: 15px 0 0;
}



.business-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.business-card {
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    padding: 30px;
    transition: all 0.3s ease;
}

.business-card:hover {
    transform: translateY(-5px);
    border-color: var(--coal-red);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.business-card-icon {
    width: 50px;
    height: 50px;
    color: var(--coal-blue);
    margin-bottom: 20px;
}

.business-card .title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--coal-gray);
}

.card-desc {
    color: #797c83;
    margin-bottom: 20px;
}



.intro-wrapper {
    display: flex;
    align-items: center;
}




.intro-img {
    flex: 1;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-color: var(--coal-gray-mid);
}

.intro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.intro-img:hover img {
    transform: scale(1.03);
}

.intro-content {
    position: relative;
    z-index: 2;
    flex: 1.2;
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    padding: 40px;
    margin-left: -40px;
}

.company-section2 .intro-wrapper {
    gap: 40px;
}

.company-section2 .intro-content {
    margin-left: 0;
    padding: 0;
}

.intro-subtitle {
    font-size: calc(0.4vw + 14px);
    font-weight: 700;
    color: var(--coal-blue);
    margin-bottom: calc(0.4vw + 14px);
    position: relative;
    padding-left: 15px;
    line-height: 1;
}

.intro-subtitle::before {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    background-color: var(--coal-red);
    position: absolute;
    left: 0;
    top: 0;
}

.company-section2 .intro-subtitle {
    padding-left: 20px;
}

.company-section2 .intro-subtitle::before {
    border: 6px solid transparent;
    width: 0;
    height: 0;
    border-left-color: var(--coal-red);
    border-width: 6px 0 6px 12px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
}

.company-section2 .more {
    font-size: 14px;
    font-weight: 700;
    color: var(--coal-blue);
    position: relative;
    padding-left: 20px;
    line-height: 1;
    display: block;
}

.company-section2 .more::before {
    content: "";
    display: block;
    border: 6px solid transparent;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left-color: var(--coal-red);
    border-width: 6px 0 6px 12px;
    top: 50%;
    transform: translateY(-50%);
}

.intro-text {
    color: var(--coal-gray);
    margin-bottom: 20px;
    text-align: justify;
    font-size: 14px;
}

.intro-text:last-of-type {
    margin-bottom: 30px;
}

.intro-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.intro-feature {
    background-color: var(--coal-gray-light);
    padding: 8px 16px;
    border-left: 3px solid var(--coal-red);
    color: var(--coal-gray);
    font-weight: 500;
}

.company-section2 .intro-feature {
    border-left: 0;
}

@media (max-width: 992px) {
    .intro-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .company-section2 .intro-wrapper {
        gap: 20px;
    }

    .intro-content {
        margin-left: 0;
        padding: 20px;
    }

    .intro-feature {
        padding: 4px 12px;
        font-size: 14px;
    }
}


.gallery-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.gallery-list-big {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.gallery-item {
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    overflow: hidden;
    transition: all 0.3s ease;
    min-width: 0;
}

.gallery-item:hover {
    transform: translateY(-5px);
    border-color: var(--coal-blue);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.gallery-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: block;
    position: relative;
}

.gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-img img {
    transform: scale(1.05);
}

.gallery-caption {
    padding: 18px 20px;
    border-top: 2px solid var(--coal-gray-light);
}

.gallery-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--coal-gray);
    margin-bottom: 8px;
    position: relative;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.gallery-desc {
    font-size: 0.95rem;
    color: #797c83;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.gallery-item:hover .gallery-title {
    color: var(--coal-blue);
}

@media (max-width: 992px) {

    .gallery-list,
    .gallery-list-big {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {

    .gallery-list,
    .gallery-list-big {
        grid-template-columns: 1fr;
    }
}

.business-title3 {
    text-align: center;
    margin-bottom: calc(0.6vw + 20px);
}

.business-title3 h2 {
    font-size: 36px;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
}

.business-title3 h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}

.business-title3 p {
    font-size: 16px;
    color: var(--color-desc);
    max-width: 600px;
    margin: 0 auto;
}

.business-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.business-card2 {
    background: #fff;
    padding: 35px 25px;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
    align-items: center;
}

.business-card2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.business-card2:hover::before {
    transform: scaleX(1);
}

.business-card2:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(18, 37, 92, 0.15);
}

.business-icon2 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.3s ease;
}

.business-card2:hover .business-icon2 {
    transform: scale(1.1) rotate(5deg);
}

.business-icon2 svg {
    width: 40px;
    height: 40px;
    color: #fff;
}

.business-card2 h3 {
    font-size: 22px;
    color: var(--color-title);
    font-weight: 600;
    margin-bottom: 15px;
}

.business-card2 p {
    color: var(--color-desc);
    font-size: 15px;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 20px;
}

.business-btn2 {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.business-btn2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 37, 92, 0.3);
}



@media (max-width: 1200px) {
    .business-grid2 {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }

    .business-card2 {
        padding: 30px 20px;
    }
}

@media (max-width: 768px) {
    .business-title3 h2 {
        font-size: 28px;
    }

    .business-grid2 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    .business-card2 {
        padding: 25px 18px;
    }

    .business-icon2 {
        width: 70px;
        height: 70px;
    }

    .business-icon2 svg {
        width: 35px;
        height: 35px;
    }


}

@media (max-width: 576px) {

    .business-title3 h2 {
        font-size: 24px;
    }

    .business-grid2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .business-card2 {
        padding: 20px 15px;
    }


}




.tab-more-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: calc(0.3vw + 20px);
}

.tab-more-box .tab-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tab-more-box .tab-box .tab-nav-item {
    padding: 12px 0;
    position: relative;
    cursor: pointer;
    font-size: calc(0.3vw + 14px);
    font-weight: 600;
    color: var(--color-title);
}

.tab-more-box .tab-box .tab-nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 0;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.tab-more-box .tab-box .tab-nav-item.active {
    color: var(--color-primary);
}

.tab-more-box .tab-box .tab-nav-item.active::after {
    transform: scaleX(1);
}

.tab-more-box .tab-box .tab-nav-item:hover::after {
    transform: scaleX(1);
}

.tab-more-box .tab-box .tab-nav-item:hover {
    color: var(--color-primary);
}

.tab-more-box .tab-more {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.tab-more-box .tab-more svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.tab-more-box .tab-more:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}

.block-title-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: calc(0.3vw + 20px);
}

.block-title-more .title {
    font-size: calc(0.3vw + 14px);
    font-weight: 600;
    padding: 12px 0;
    color: var(--color-title);
}

.block-title-more .more {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.block-title-more .more svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.block-title-more .more:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}


.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.grid-2>* {
    min-width: 0;
}

@media (max-width: 991.98px) {

    .news-sections--2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}



.news-item4 {
    overflow: hidden;
    transition: all 0.3s ease;
}



.news-item4 .news-title {
    padding-left: 16px;
    position: relative;
    margin-bottom: 12px;
}

.news-item4 .news-desc {
    padding-left: 16px;
    margin-bottom: 0;
}

.news-item4 .news-time {
    padding-left: 16px;
}

.news-item4 .news-title::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-width: 4px 0 4px 8px;
    border-left-color: var(--color-primary);
    transition: transform 0.4s ease;
}

.news-item4 .news-img-link {
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
    height: 200px;
}

.news-item4:hover {
    transform: translateY(-5px);
}

.news-item4:hover .news-title {
    color: var(--color-primary);
}


.card-title-line {
    padding: 0 0 18px 0;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    font-size: calc(0.4vw + 15px);
}

.card-title-line .title {
    line-height: 1;
}

.card-title-line .line {
    position: absolute;
    bottom: 0;
    left: 36px;
    width: 28px;
    height: 4px;
    border-left: 4px solid var(--primary-color);
    /* transform: skewX(-15deg); */
    border-right: 4px solid var(--primary-color);
}

.card-title-line .line::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    right: 4px;
    width: 12px;
    height: 4px;
    border-left: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
}

.card-title-line::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    left: 1px;
    width: 30px;
    height: 4px;
    background-color: var(--primary-color);
    /* transform: skewX(-15deg); */
}

.card-title-line::before {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    left: 1px;
    width: 100%;
    height: 4px;
    background-color: #f0f0f0;
}

.card-title-line .more {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease;
}

.card-title-line .more:hover {
    color: var(--color-secondary);
    transform: translateX(5px);
}

.price-disclosure {
    margin-top: 14px;
    padding: 14px 20px 16px;
    background-color: #f1f3f7;
    color: #333;
}

.price-disclosure .price-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-disclosure .price-content b {
    font-size: 16px;
    font-weight: 700;
    color: var(--coal-red);
}



.no-banner-page {
    height: 82px;
}

@media (max-width: 1199.99px) {
    .no-banner-page {
        height: 0;
    }
}




.grid-2-2\/2\/1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.grid-2-2\/2\/1>* {
    min-width: 0;
}

.grid-2-2\/2\/1> :nth-child(5n) {
    grid-column: span 2;
}

@media (max-width: 991.99px) {
    .grid-2-2\/2\/1 {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .grid-2-2\/2\/1> :nth-child(5n) {
        grid-column: span 1;
    }
}

.coal-message-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
}


.coal-message-card .item-title {
    font-weight: 700;
    color: var(--coal-gray);
    padding: 20px;
}

.coal-message-card .item-img-box {
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    background-color: #f1f3f7;
    padding: 10px;
}

.coal-message-card .item-img-box img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.coal-message-card .num-card-box {
    display: flex;
    border-top: 1px solid #f0f0f0;
}

.num-card {
    font-size: 14px;
    color: var(--coal-gray);
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 1;
    padding: 16px 0;
}

.num-card {
    border-right: 1px solid #f0f0f0;
}

.num-card .num {
    font-size: 24px;
    font-weight: 700;
    color: var(--coal-red);
    margin: 0 4px;
}

.num-card-box .item-more {
    width: 140px;
    flex-shrink: 0;
    padding: 16px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.num-card-box .item-more::after {
    content: '\2192';
    padding-left: 4px;
}

.num-card-box .item-more:hover::after {
    transform: scaleX(1);
}

.num-card-box .item-more:hover {
    color: #fff;
    background-color: var(--primary-color);
}



.coal-message-card-box {
    display: flex;
    align-items: center;
}

.coal-message-card-box .coal-message-card {
    flex: 1;
    margin-right: -40px;
    position: relative;
    z-index: 2;
    background-color: #fff;
}

.coal-message-card-box .item-img-box {
    background-color: #f1f3f7;
    width: 50%;
    box-shadow: -12px 12px 0 rgb(239, 240, 242);
}

.coal-message-card .item-img-box img {
    max-height: 300px;
}

.coal-message-card-box .item-img-box img {
    width: 100%;
    display: block;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
    max-height: 300px;
}

@media screen and (max-width: 991.99px) {

    .coal-message-card-box {
        flex-direction: column;
    }

    .coal-message-card-box .coal-message-card {
        margin-right: 0;
        width: 100%;
        order: 2;
    }

    .coal-message-card-box .item-img-box {
        width: 100%;
        order: 1;
        max-height: 300px;
        box-shadow: none;
    }
}

@media screen and (max-width: 575.99px) {
    .num-card-box {
        flex-direction: column;
        background-color: #f1f3f7;
        gap: 1px;
    }

    .num-card-box .num-card {
        border-right: 0;
        background-color: #fff;
    }

    .num-card-box .item-more {
        background-color: #fff;
        width: 100%;
    }
}


.more-btn {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    padding-left: 14px;
    position: relative;
    transition: transform 0.4s ease;
}

.more-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-width: 4px 0 4px 8px;
    border-left-color: var(--coal-red);
}

.more-btn:hover {
    transform: translateX(5px);
    color: var(--coal-red);
}



.mine-base-info,
.mine-news {
    flex: 1;
    background: #fff;
    padding: 20px 25px;
    min-width: 0;
    width: 100%;
}

.box-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--coal-gray);
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--coal-blue-light);
}

.base-info-list,
.news-list {
    list-style: none;
}

.base-info-list li {
    color: var(--coal-gray-deep);
    font-size: 1.02rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--coal-gray-light);
}

.base-info-list li:last-child {
    border: 0;
}

.base-info-list li strong,
.base-info-list li .title {
    color: var(--coal-black);
    font-weight: 600;
}

.base-info-list li a {
    width: 100%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.base-info-list li a:hover {
    transform: translateX(5px);
}

.base-info-list li a:hover .title {
    color: var(--coal-red);
}

.base-info-list li .title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.base-info-list li .date {
    color: var(--coal-blue);
    font-weight: 600;
    display: inline-block;
    width: 85px;
    flex-shrink: 0;
}

.mine-data-board {
    background: #fff;
    margin-bottom: 25px;
}

.data-board-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--coal-gray);
    margin-bottom: 20px;
    text-align: center;
}

.data-card-group {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.data-card {
    flex: 1;
    min-width: 180px;
    background: #eff0f4;
    padding: 15px 10px;
    text-align: center;
}

.data-card .data-name {
    font-size: 1rem;
    color: var(--coal-gray);
    font-weight: 600;
    margin-bottom: 8px;
}

.data-card .data-num {
    font-size: 1.4rem;
    color: var(--coal-black);
    font-weight: 800;
    margin-bottom: 6px;
}

.data-card .data-trend.up {
    color: var(--coal-red);
    font-weight: 600;
    font-size: 0.9rem;
}

.data-card .data-trend.down {
    color: var(--coal-blue);
    font-weight: 600;
    font-size: 0.9rem;
}

.mine-safety-column {
    background: #fff;
    padding: 20px 25px;
}

.safety-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--coal-gray);
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--coal-red);
}

.safety-list {
    list-style: none;
    gap: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.safety-list li {
    color: var(--coal-gray-deep);
    font-size: 1.02rem;
    padding: 0;
    padding-left: 18px;
    position: relative;
    min-width: 0;
}

.safety-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--coal-red);
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.safety-list li strong {
    color: var(--coal-red);
}

@media screen and (max-width: 991.98px) {
    .safety-list {
        grid-template-columns: 1fr;
    }
}



.swiper-coal-pics .swiper-slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}



.coal-reserve .section-title {
    color: #fff;
}

.bg-light2 {
    background-color: #f5f7fa;
}


.coal-reserve {
    background-color: var(--coal-gray);
    color: #fff;
}



.reserve-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    transition: all 0.3s ease;
}

.reserve-card2 {
    background: rgba(0, 0, 0, 0.05);
    padding: 14px;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.reserve-card:hover {
    border-color: #e65100;
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

.reserve-card2:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

.reserve-card .number-box {
    margin-bottom: 10px;
}


.reserve-card .number-box span,
.reserve-card2 .number-box span {
    vertical-align: bottom;
}

.reserve-card .number {
    font-size: calc(0.6vw + 18px);
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(to right, var(--coal-red-light), #fff643);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-right: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.reserve-card2 .number {
    font-size: calc(0.6vw + 18px);
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-right: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.reserve-card .arrow {
    /* font-size: calc(0.6vw + 14px); */
}

.reserve-card .label,
.reserve-card2 .label {
    font-size: 16px;
    opacity: 0.9;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.reserve-desc {
    font-size: 0.9rem;
    opacity: 0.7;
}



.swiper-coal-images,
.swiper-coal-real {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.swiper-coal-images .swiper-slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.swiper-coal-real img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.swiper-coal-images .cover-text,
.swiper-coal-real .cover-text {
    position: absolute;
    top: 20px;
    left: 0;
    transform: translate(0, 0);
    font-size: calc(0.7vw + 16px);
    font-weight: 700;
    color: #fff;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0 4px 4px 0;
    z-index: 2;
}

@media screen and (max-width: 991.98px) {
    .swiper-coal-images .swiper-slide img {
        height: 300px;
    }
}

@media screen and (max-width: 768px) {
    .swiper-coal-images .swiper-slide img {
        height: 240px;
    }
}



.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--coal-blue-light);
    margin-bottom: 12px;
}

.card-header .title {
    font-size: calc(0.2vw + 15px);
    font-weight: 700;
    color: var(--coal-gray);
}

.card-header .more {
    font-size: 14px;
    transition: all 0.3s ease;
}

.card-header .more:hover {
    color: var(--coal-red);
    transform: translateX(5px);
}

.info-card,
.news-card {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-header2 {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--coal-blue-light);
    margin-bottom: 12px;
    position: relative;
}

.card-header2 .title {
    font-size: calc(0.2vw + 14px);
    font-weight: 700;
    color: var(--coal-gray);
}

.card-header2 .icon {
    width: 24px;
    height: 24px;
    display: block;
    color: var(--coal-red);
}

.card-header2 .more {
    transition: all 0.3s ease;
    position: absolute;
    top: 2px;
    right: 0;
}

.card-header2 .more:hover {
    color: var(--coal-red);
    transform: translateX(5px);
}

.section-title-more {
    position: relative;
}

.section-title-more .more {
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #888;
}

.section-title-more .more:hover {
    transform: translateX(5px);
    color: var(--coal-red);
}

.product-card {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.product-card .img-box {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
    background-color: #f1f3f7;
    display: block;
}

.product-card .img-box img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.product-card .img-box:hover img {
    transform: scale(1.03);
}

.product-card .info {
    padding: 20px;
}

.product-card .info .name {
    font-size: 16px;
    font-weight: 600;
    color: var(--coal-black);
    margin-bottom: 8px;
    display: block;
}

.product-card .info .specs {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

.product-card:hover .info .name {
    color: var(--coal-red);
}


.item-image-box {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
    background-color: #f1f3f7;
    display: block;
    transition: all 0.3s ease;
}

.item-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item-image-box:hover img {
    transform: scale(1.03);
}

.item-image-box:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-6px);
}

.notice-card {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s ease;
}

.notice-card .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--coal-black);
    margin-bottom: 14px;
    display: block;
    padding-bottom: 14px;
    position: relative;
}

.notice-card .title::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #e6eaf0;
    margin-top: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.notice-card .meta {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

.notice-card .meta span {
    margin-right: 12px;
}

.notice-card .link {
    display: flex;
    gap: 12px;
}

.notice-card:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-6px);
}

.important-news-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.important-news {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    gap: 24px;
}

.important-news .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--coal-black);
    margin-bottom: 14px;
    display: block;
    position: relative;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.important-news .line {
    width: 100%;
    height: 2px;
    background-color: #e6eaf0;
    margin: 12px 0;
}

.important-news .desc {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.important-news .time {
    display: block;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 12px;
}

.important-news .img-link {
    width: 300px;
    flex-shrink: 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    overflow: hidden;
}

.important-news .img-link img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.important-news .img-link:hover img {
    transform: scale(1.03);
}

.important-news:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-6px);
}

.important-news:hover .title {
    color: var(--coal-red);
}

@media screen and (max-width: 991.98px) {
    .important-news-box {
        gap: 16px;
    }

    .important-news {
        padding: 0;
        box-shadow: none;
        gap: 12px;
    }

    .important-news:hover {
        box-shadow: none;
    }

    .important-news .img-link {
        width: 100px;
    }

    .important-news .desc {
        display: none;
    }
}



.detail-video-box {
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f1f3f7;
    display: block;
    padding: 0;
    border-radius: 4px;
}

.detail-video-box video {
    aspect-ratio: 16 / 9;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}



.share-container {
    padding: 25px 0;
}

.share-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    height: 50px;
    width: 120px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}

.share-btn svg {
    margin-right: 4px;
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
}

.wechat-btn {
    background-color: #07c160;
    color: white;
}

.wechat-btn:hover {
    background-color: #06ad56;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(7, 193, 96, 0.2);
}

.weibo-btn {
    background-color: #e6162d;
    color: white;
}

.weibo-btn:hover {
    background-color: #cf1429;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(230, 22, 45, 0.2);
}

.qzone-btn {
    background-color: #f7b500;
    color: #333;
}

.qzone-btn:hover {
    background-color: #e6a800;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(247, 181, 0, 0.2);
}

.print-btn {
    background-color: #3498db;
    color: white;
}

.print-btn:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(52, 152, 219, 0.2);
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #95a5a6;
    font-weight: 500;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.separator::before {
    margin-right: 15px;
}

.separator::after {
    margin-left: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .share-buttons {
        justify-content: center;
    }

    .share-btn {
        padding: 0;
        font-size: 14px;
        width: 90px;
        height: 40px;
    }
}



/* 打印样式 */
@media print {

    .share-container,
    .separator,
    .print-btn {
        display: none !important;
    }

    body {
        background-color: white;
        padding: 0;
    }

    .container {
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    .content {
        border: none;
        padding: 0;
        background-color: white;
    }
}

/* 微信分享弹窗 */
.wechat-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
    margin-bottom: 15px;
    color: #333;
}

.qrcode-placeholder {
    width: 200px;
    height: 200px;
    background-color: #f5f5f5;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px dashed #ccc;
    color: #777;
}

.close-modal {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 10px;
}

.close-modal:hover {
    background-color: #2980b9;
}





.section-title-with-navs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media screen and (max-width: 991.98px) {
    .section-title-with-navs {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

.video-navs {
    display: flex;
    gap: 20px;
    /* border-bottom: 2px solid var(--coal-blue-light); */
}

.video-navs a {
    display: block;
    font-size: 16px;
    color: var(--coal-black);
    padding: 8px 0 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    transition: all 0.3s ease;
}

.video-navs a::after {
    content: '';
    display: block;
    width: 0;
    height: 10px;
    width: 10px;
    background-color: var(--coal-red);
    transition: width 0.3s ease;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 4px 4px 0 #d7dde3;
}

.video-navs a:hover {
    color: var(--coal-red);
    transform: translateY(-4px);
}

@media screen and (max-width: 767.98px) {
    .video-navs {
        flex-wrap: wrap;
        gap: 12px;
    }

    .video-navs a {
        font-size: 14px;
        padding: 4px 0 4px 14px;
    }

    .video-navs a::after {
        height: 8px;
        width: 8px;
        box-shadow: 4px 4px 0 #d7dde3;
    }
}



.files-item {
    padding: 12px 0;
    border-bottom: 1px solid #e6eaf0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.files-item .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex:1;
}
.files-item:hover .title {
    color: var(--coal-red);
}
.files-item .link{
    flex-shrink: 0;
}

.header-title-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}
/* ===== 产业板块 · 横向手风琴(方案A) 20260715 ===== */
.industry-acc-section .industry-acc{display:flex;gap:10px;height:430px}
.industry-acc .ia-panel{position:relative;flex:1;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;transition:flex .45s ease;text-decoration:none;display:block}
.industry-acc .ia-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(9,24,68,.86),rgba(9,24,68,.15) 70%)}
.industry-acc .ia-panel:first-child{flex:3.4}
.industry-acc:hover .ia-panel:first-child{flex:1}
.industry-acc:hover .ia-panel:hover{flex:3.4}
.industry-acc .ia-mini{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;color:#fff;font-size:20px;font-weight:700;writing-mode:vertical-rl;letter-spacing:5px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.industry-acc .ia-full{position:absolute;left:34px;right:34px;bottom:34px;z-index:2;color:#fff;opacity:0;transition:opacity .3s .12s}
.industry-acc .ia-panel:first-child .ia-full{opacity:1}
.industry-acc .ia-panel:first-child .ia-mini{display:none}
.industry-acc:hover .ia-panel:first-child .ia-full{opacity:0}
.industry-acc:hover .ia-panel:first-child .ia-mini{display:block}
.industry-acc:hover .ia-panel:hover .ia-full{opacity:1}
.industry-acc:hover .ia-panel:hover .ia-mini{display:none}
.industry-acc .ia-en{font-size:13px;letter-spacing:4px;color:#c9d3ec;margin-bottom:8px}
.industry-acc .ia-full h3{font-size:36px;font-weight:800;margin-bottom:14px;line-height:1.1;color:#fff}
.industry-acc .ia-line{width:46px;height:3px;background:var(--secondary);margin-bottom:14px}
.industry-acc .ia-full p{font-size:14px;color:#dfe4f0;margin-bottom:20px}
.industry-acc .ia-go{display:inline-flex;align-items:center;gap:8px;background:var(--secondary);color:#fff;padding:11px 26px;border-radius:4px;font-size:14px}
@media (max-width:768px){
  .industry-acc-section .industry-acc{flex-direction:column;height:auto}
  .industry-acc .ia-panel,.industry-acc:hover .ia-panel:first-child{flex:none!important;height:190px}
  .industry-acc .ia-mini,.industry-acc:hover .ia-panel:first-child .ia-mini{display:none!important}
  .industry-acc .ia-full,.industry-acc:hover .ia-panel:first-child .ia-full{opacity:1!important}
}

/* ===== 安全文化 · 斜切撞色编号(醒B) 20260715 ===== */
.culture-b-section .culture-b{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.culture-b .cb-card{position:relative;height:300px;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;display:block;text-decoration:none;transition:transform .25s}
.culture-b .cb-card:hover{transform:translateY(-5px)}
.culture-b .cb-num{position:absolute;top:6px;right:16px;font-size:110px;font-weight:900;line-height:1;color:rgba(255,255,255,.16);z-index:2}
.culture-b .cb-pan{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 22px 22px;color:#fff;clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.culture-b .cb-card.n .cb-pan{background:linear-gradient(120deg,#091844,rgba(18,37,92,.85))}
.culture-b .cb-card.r .cb-pan{background:linear-gradient(120deg,#8f1b15,rgba(181,41,34,.9))}
.culture-b .cb-en{font-size:12px;letter-spacing:3px;opacity:.85;margin-bottom:6px}
.culture-b .cb-pan h3{font-size:26px;font-weight:800;color:#fff}
.culture-b .cb-go{position:absolute;right:22px;bottom:22px;width:38px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;transition:.25s}
.culture-b .cb-card:hover .cb-go{background:#fff;color:#12255C;border-color:#fff}
@media (max-width:768px){.culture-b-section .culture-b{grid-template-columns:1fr}}

/* ==================== 督查动态 分类入口图标 · 方案三 红点描边（2026-07-15）==================== */
.news-nav-innovation .pill-icon{position:relative;background:#fff;border:2px solid #12255C;border-radius:10px;overflow:visible;transition:background .2s}
.news-nav-innovation .pill-icon::after{content:"";position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:#B52922;border:2px solid #fff}
.news-nav-innovation .pill-icon .sv3-ic{width:24px;height:24px;fill:none;stroke:#B52922;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.news-nav-innovation .pill-item:hover .pill-icon{background:#eef1fa}
/* 覆盖原有 hover 渐变遮罩，方案三保持白底不压色块 */
.news-nav-innovation .pill-item::before{display:none}
.news-nav-innovation .pill-item:hover .pill-content h3,.news-nav-innovation .pill-item:hover .pill-content p{color:inherit}
/* ==================== 方案三 结束 ==================== */

/* ==================== 督查动态 板块风格统一 · 配合方案三红点描边（2026-07-15）==================== */
/* 1) 两列日期券：浅蓝实色 → 白底蓝描边，呼应入口图标的描边风 */
.superv-sec .report-date{background:#fff;border:1.5px solid #12255C;color:#12255C;box-shadow:none;transition:background .2s}
.superv-sec .report-item:hover .report-date{background:#eef1fa}
/* 2) 面板标题(专项检查/安全生产月)前加小红点，呼应图标右上角红点 */
.superv-sec .widget-header h3{position:relative;padding-left:16px}
.superv-sec .widget-header h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#B52922}
/* 3) 特写卡 Tab 底部列表的日期同样走描边语言（如为浅蓝实色则统一） */
.superv-sec .news-list .item-list-title-date .date{color:#12255C}
/* ==================== 板块风格统一 结束 ==================== */

/* ==================== 公告通知/专项检查/安全生产月 列表重设计 · 标题左 时间右（2026-07-15）==================== */
.superv-sec .report-list{display:flex;flex-direction:column}
.superv-sec .report-item{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid #edeff3;border-radius:0;background:transparent;overflow:visible;transition:background .2s,transform .2s}
.superv-sec .report-item::after{display:none}
.superv-sec .report-item::before{content:"";order:0;flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#c9d2e0;transition:background .2s,transform .2s}
.superv-sec .report-item:hover::before{background:#B52922;transform:scale(1.25)}
.superv-sec .report-item:last-child{border-bottom:none}
.superv-sec .report-item:hover{background:#f6f8fc;transform:translateX(3px)}
/* 标题：左，占满，可截断，悬停变蓝 */
.superv-sec .report-item .title{order:1;flex:1;min-width:0;color:#333;font-size:14px;line-height:1.5;transition:color .2s}
.superv-sec .report-item:hover .title{color:#12255C}
/* 时间：右，低调等宽灰字，去掉原来的浅蓝券 */
.superv-sec .report-item .report-date{order:2;flex:0 0 auto;width:auto;height:auto;min-width:64px;text-align:right;background:none;border:none;box-shadow:none;color:#9aa0aa;font-size:12.5px;font-weight:500;font-family:"DIN Alternate","Bahnschrift",ui-monospace,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;padding:0}
.superv-sec .report-item:hover .report-date{color:#12255C}
/* ==================== 列表重设计 结束 ==================== */

/* ==================== 首页新闻焦点区 · 草稿A 红色焦点（2026-07-15）==================== */
.main-section-news .grid-2-3{align-items:stretch}
/* ---- 左轮播 ---- */
.main-section-news .swiper-news1{position:relative;height:100%;min-height:400px;border-radius:6px;overflow:hidden;box-shadow:0 6px 20px rgba(20,30,60,.10)}
.main-section-news .swiper-news1 .swiper-slide{position:relative;height:auto;min-height:400px;background:radial-gradient(60% 50% at 30% 25%,#5a5f66,transparent 60%),radial-gradient(50% 40% at 72% 60%,#4b5058,transparent 55%),linear-gradient(150deg,#2b2f36,#141619)}
.main-section-news .swiper-news1 .img_box{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0}
.main-section-news .swiper-news1 .img-cover{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.main-section-news .swiper-news1 .nf-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(18,8,8,.85) 0%,rgba(18,8,8,.12) 46%,transparent 74%),linear-gradient(120deg,rgba(143,27,21,.34),transparent 58%)}
.main-section-news .swiper-news1 .nf-badge{position:absolute;top:14px;left:14px;z-index:3;background:#B52922;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;padding:5px 12px;border-radius:3px;box-shadow:0 2px 8px rgba(143,27,21,.4)}
.main-section-news .swiper-news1 .cover-text-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 20px 42px;background:none;display:flex;flex-direction:column;gap:6px}
.main-section-news .swiper-news1 .nf-cap{color:#fff;font-size:18px;font-weight:700;line-height:1.45;text-shadow:0 1px 6px rgba(0,0,0,.55);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.main-section-news .swiper-news1 .nf-cap:hover{color:#ffd7d0}
.main-section-news .swiper-news1 .nf-cap-date{color:rgba(255,255,255,.82);font-size:12px;font-family:"DIN Alternate","Bahnschrift",ui-monospace,sans-serif}
/* 进度条式圆点 */
.main-section-news .swiper-news1 .swiper-pagination{left:20px;right:auto;bottom:18px;width:auto;text-align:left}
.main-section-news .swiper-news1 .swiper-pagination-bullet{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);opacity:1;margin:0 5px 0 0}
.main-section-news .swiper-news1 .swiper-pagination-bullet-active{background:#fff;width:30px}
/* 圆形箭头，hover 变红 */
.main-section-news .swiper-news1 .swiper-button-next,.main-section-news .swiper-news1 .swiper-button-prev{width:36px;height:36px;margin-top:-18px;background:rgba(0,0,0,.34);border-radius:50%;color:#fff;transition:background .2s}
.main-section-news .swiper-news1 .swiper-button-next:hover,.main-section-news .swiper-news1 .swiper-button-prev:hover{background:#B52922}
.main-section-news .swiper-news1 .swiper-button-next::after,.main-section-news .swiper-news1 .swiper-button-prev::after{font-size:15px;font-weight:800}
/* ---- 右 Tab 面板 ---- */
.main-section-news .tab-box{background:#fff;border:1px solid #eceef3;border-radius:6px;padding:22px 24px}
/* Tab 下划线改红 */
.main-section-news .tab-nav .tab-nav-item{color:#8a8f98;font-weight:700}
.main-section-news .tab-nav .tab-nav-item.active{color:#12255C}
.main-section-news .tab-nav .tab-nav-item::after{background-color:#B52922}
.main-section-news .tab-nav .tab-nav-item .tab-line{border-left-color:#B52922;border-right-color:#B52922}
.main-section-news .tab-nav .tab-nav-item .tab-line::after{border-left-color:#B52922;border-right-color:#B52922}
/* 头条：红色大日期块 */
.main-section-news .item-list-title-date2{align-items:flex-start;padding:20px 0 18px;border-bottom:1px dashed #e3e6ec}
.main-section-news .item-list-title-date2 .item-title{color:#222;transition:color .2s}
.main-section-news .item-list-title-date2:hover .item-title{color:#12255C}
.main-section-news .item-list-title-date2 .item-description{color:#8a8f98}
.main-section-news .item-date-box{flex:0 0 auto;width:80px;text-align:center;border-radius:6px;padding:10px 4px;background:linear-gradient(160deg,#c8443c,#B52922 60%,#8f1b15);color:#fff}
.main-section-news .item-date-box .item-day{color:#fff}
.main-section-news .item-date-box .item-year-month{color:#fff;opacity:.92}
.main-section-news .item-list-title-date2:hover .item-date-box{background:linear-gradient(160deg,#c8443c,#B52922 60%,#8f1b15);color:#fff}
/* 列表：前导点 + 标题左 + 时间右灰字 */
.main-section-news .item-list-title-date{display:flex;align-items:center;gap:12px;justify-content:flex-start;padding:12px 0}
.main-section-news .item-list-title-date::after{display:none}
.main-section-news .item-list-title-date::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#c9d2e0;transition:background .2s,transform .2s}
.main-section-news .item-list-title-date:hover{transform:translateX(3px)}
.main-section-news .item-list-title-date:hover::before{background:#B52922;transform:scale(1.25)}
.main-section-news .item-list-title-date .title{flex:1;min-width:0;max-width:none;color:#333;font-size:15px;transition:color .2s}
.main-section-news .item-list-title-date:hover .title{color:#B52922}
.main-section-news .item-list-title-date .date{flex:0 0 auto;width:auto;text-align:right;color:#9aa0aa;font-size:12.5px;font-family:"DIN Alternate","Bahnschrift",ui-monospace,sans-serif;font-variant-numeric:tabular-nums}
/* ==================== 新闻焦点区 草稿A 结束 ==================== */

font-face {
    font-family: 'mySourceHanSC';
    src: url('../fonts/SourceHanSansSC-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'mySourceHanSC', "Source Han Sans SC", "思源黑体", sans-serif;
}

:root {
    --color-primary: #12255C;
    --color-secondary: #B52922;
    --color-tertiary: #dde2f3;
    --color-title: #222;
    --color-text: #333;
    --color-desc: #818487;
    --color-description: #818487;
    --desc-color: #818487;
    --description-color: #818487;
    --primary-color: #12255C;
    --primary-color-rgb: 18, 37, 92;
    --secondary-color: #B52922;
    --tertiary-color: #dde2f3;
    --text-color: #333;
    --bg-color: #f8f9fa;
    --title-color: #222;

    --coal-red: #B52922;
    --coal-red-dark: #8f1b15;
    --coal-red-light: #B52922;
    --coal-blue: #12255C;
    --coal-blue-dark: #091844;
    --coal-blue-light: #d3d8e1;
    --coal-gray: #1F2937;
    --coal-gray-light: #ebeef3;
    --coal-gray-mid: #d3d8e1;
    --coal-black: #111827;
}

.text-danger {
    color: var(--coal-red);
}

.text-warning {
    color: #FFA500;
}

.text-success {
    color: #28a745;
}

.text-report {
    color: #12255C;
}

svg {
    max-width: 100px;
}

.swiper {
    --swiper-navigation-size: 50px;
    --swiper-navigation-color: #fff;
    width: 100%;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-width: 24px;
    --swiper-theme-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
}

.swiper .swiper-button-next,
.swiper .swiper-button-prev {
    background: rgba(7, 7, 97, 0.094);
    border-radius: 3px;
    transition: all 0.3s ease;
    height: var(--swiper-navigation-size);
    width: calc(var(--swiper-navigation-size) * 2 / 3);
}

.swiper .swiper-button-next svg,
.swiper .swiper-button-prev svg {
    height: calc(var(--swiper-navigation-size) / 2);
    width: calc(var(--swiper-navigation-size) / 2);
}

.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
    font-size: calc(var(--swiper-navigation-size) / 2.5);
}

.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:hover {
    background: #12255C;
    transform: scale(1.05);
}

@media screen and (max-width: 992px) {
    .swiper {
        --swiper-navigation-size: 40px;
    }
}


.description {
    color: var(--description-color);
}

.w-100 {
    width: 100%;
}

.text-right {
    text-align: right;
}

.text-desc {
    color: var(--desc-color);
}

/* 导航 */
.nav-header {
    --title-color: #000;
    --desc-color: #666;
    --text-color: #333;
    --theme-color: #12255c;
    --theme-color-rgb: 18, 37, 92;
    --bg-color: #fff;
    --bg-color-rgb: 255, 255, 255;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: background-color 600ms ease-in-out;
    z-index: 1000;
    padding: 0 16px;
}

.nav-header .header-box {
    width: 100%;
    max-width: 1600px;
    margin: 16px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffffee;
    padding: 10px;
    border-radius: 3px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(20, 3, 79, 0.1);
    transition: all 0.3s ease-in-out;
}

.nav-header.no-bg {
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(20, 3, 79, 0.1);
}

.nav-header.no-bg .header-box {
    box-shadow: none;
    margin: 0 auto;
}


.nav-header .logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
}

.nav-header img.logo {
    display: block;
    max-height: 72px;
}

#nav-menu {
    position: relative;
}

#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

#nav-menu .nav-item {
    position: relative;
}

#nav-menu .nav-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 12px 12px;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
}

#nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    z-index: 1000;
    border: 1px solid rgba(var(--theme-color-rgb), 0.1);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#nav-menu .sub-item {
    margin: 0;
    border-bottom: none;
    width: 100%;
}


#nav-menu .sub-item a:hover {
    background: var(--primary-color);
    color: #fff;
}

#nav-menu .nav-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#nav-menu .sub-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 10px;
    transition: color 0.3s ease-in-out;
}

.nav-item.active .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-btn-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-toggle-box {
    display: none;
}

@media (max-width: 1360px) {
    #nav-menu .nav-link {
        padding: 12px 4px;
    }
}

@media (min-width: 1200px) {

    /* #nav-menu ul li a{
            padding: 10px 12px;
        } */
    #nav-menu .nav-item.active .nav-link,
    #nav-menu .nav-item:hover .nav-link {
        background-color: var(--tertiary-color);
        color: var(--primary-color);
        font-weight: bold;
    }

    /* #nav-menu ul li.active,
      #nav-menu ul li:hover {
          border-bottom: 2px solid var(--theme-color);
      } */

    #nav-menu .nav-item {
        margin: 0 6px;
    }
}

@media (max-width: 1199.99px) {
    .nav-header {
        position: sticky;
        padding: 0;
    }

    .nav-header .header-box {
        padding: 12px;
        margin: 0;
        border-radius: 0;
    }

    #nav-menu .nav-link {
        border-radius: 0;
    }

    #nav-menu .nav-item.active .nav-link,
    #nav-menu .nav-item:hover .nav-link {
        background-color: var(--tertiary-color);
        color: var(--primary-color);
        font-weight: bold;
    }

    #nav-menu {
        position: fixed;
        overflow: hidden;
        top: 74px;
        left: -101vw;
        opacity: 0;
        width: 100%;
        background-color: #fff;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-radius: 0;
        transition: all 0.5s ease-in-out;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11);
        z-index: 999;
    }

    /* #nav-menu.active {
          transition: all 0.5s ease-in-out;
        } */
    #nav-menu>ul {
        text-align: left;
        flex-direction: column;
        align-items: flex-start;
    }

    #nav-menu>ul .nav-item {
        width: 100%;
        margin-bottom: 2px;
    }

    #nav-menu .nav-link {
        text-decoration: none;
        display: block;
        font-weight: bold;
        padding: 10px;
        background-color: #f2f2f2;
    }

    #nav-menu .sub-menu {
        position: static;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        min-width: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        border: none;
        padding: 0;
        background-color: #fff;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px;
        padding: 10px;
    }

    #nav-menu .sub-item {
        width: auto;
        background-color: #f2f2f2;
    }

    #nav-menu .sub-item a {
        padding: 4px 12px;
        font-size: 14px;
    }


    #nav-menu.active {
        left: 0;
        opacity: 1;
    }

    #nav-menu.active ul li {
        transition-delay: 0s;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-toggle-box {
        display: block;
        height: 46px;
        width: 46px;
        padding: 8px;
        border: none;
        cursor: pointer;
        z-index: 9999;
        border-radius: 6px;
    }

    #nav-toggle {
        height: 30px;
        width: 30px;
        display: block;
        position: relative;
        fill: var(--primary-color);
    }

    .nav-toggle-box.active {
        fill: var(--primary-color);
        background: var(--tertiary-color);
    }

    #nav-toggle>path {
        transition: 0.6s ease-in-out;
        transform-origin: center center;
    }

    .nav-toggle-box.active svg>.one {
        transform: rotateZ(45deg) translate(-4px, 10px);
    }

    .nav-toggle-box.active svg>.two {
        opacity: 0;
    }

    .nav-toggle-box.active svg>.three {
        transform: rotateZ(-45deg) translateY(-10px);
    }
}



/* 搜索按钮和下拉框样式 */
.search-btn,
.websites-btn {
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.search-btn:hover,
.search-btn.active {
    background: var(--tertiary-color);
    color: var(--primary-color);
}

.websites-btn {
    background: var(--tertiary-color);
}

.websites-btn:hover,
.websites-btn.active {
    background: var(--primary-color);
    color: #fff;
}

.search-btn svg {
    width: 30px;
    height: 30px;
    transition: color 0.3s ease-in-out;
}

.websites-btn svg {
    width: 30px;
    height: 30px;
    transition: color 0.3s ease-in-out;
}

.search-drop-down {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(var(--theme-color-rgb), 0.1);
    padding: 16px;
    margin-top: 8px;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    z-index: 1001;
}

.websites-drop-down {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    z-index: 999;
}

.websites-drop-down a {
    display: block;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    color: var(--text-color);
    text-decoration: none;
    background: var(--tertiary-color);
}

.websites-drop-down a:hover {
    background: var(--primary-color);
    color: #fff;
}

.search-drop-down.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.websites-drop-down.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-drop-down form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-drop-down input[type="text"] {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid rgba(var(--theme-color-rgb), 0.1);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease-in-out;
}

.search-drop-down input[type="text"]:focus {
    /* border-color: var(--primary-color); */
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.search-drop-down input[type="text"]::placeholder {
    color: var(--text-color);
}

.search-drop-down button[type="submit"] {
    padding: 10px 16px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .websites-drop-down {
        gap: 8px;
    }

    .websites-drop-down a {
        padding: 6px 12px;
        font-size: 14px;
    }

    .search-btn,
    .websites-btn {
        padding: 4px;
    }

    .websites-btn span {
        display: none;
    }

    .search-btn svg,
    .websites-btn svg {
        width: 24px;
        height: 24px;
    }

    .nav-btn-box {
        gap: 4px;
    }
}

.tab-nav {
    display: flex;
    gap: 16px;
    border-bottom: 4px solid var(--tertiary-color);
}

.tab-nav .tab-nav-item {
    padding: 0 0 14px 0;
    cursor: pointer;
    position: relative;
    margin-bottom: -4px;
    font-weight: 600;
}

.tab-nav .tab-nav-item:hover {
    color: var(--primary-color);
}

.tab-nav .tab-nav-item .tab-line {
    position: absolute;
    bottom: 0;
    right: 1px;
    width: 28px;
    height: 4px;
    border-left: 4px solid var(--primary-color);
    transform: skewX(-15deg);
    border-right: 4px solid var(--primary-color);
    opacity: 0;
    transition: all 0.3s ease;
}

.tab-nav .tab-nav-item .tab-line::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    right: 4px;
    width: 12px;
    height: 4px;
    border-left: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
}

.tab-nav .tab-nav-item::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    left: 1px;
    width: calc(100% - 35px);
    height: 4px;
    background-color: var(--primary-color);
    transform: skewX(-15deg);
    opacity: 0;
    transition: all 0.3s ease;
}

.tab-nav .tab-nav-item:hover::after,
.tab-nav .tab-nav-item.active::after,
.tab-nav .tab-nav-item:hover .tab-line,
.tab-nav .tab-nav-item.active .tab-line {
    opacity: 1;
}

.tab-nav .tab-nav-item.active,
.tab-nav .tab-nav-item:hover .tab-line {
    color: var(--primary-color);
}

.tab-content {
    position: relative;
}

.tab-content .tab-pane {
    opacity: 0;
    display: none;
}

.tab-content .tab-pane.active {
    opacity: 1;
    display: block;
}

/* .tab-box{
    background-color: #f3f3f3;
    border-radius: 6px;
    padding: 16px;
} */

.section-title-en-line {
    position: relative;
    padding-left: 12px;
}

.section-title-en-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2px;
    height: calc(100% - 10px);
    background-color: var(--color-primary);
}

.section-title-en-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 2px;
    height: 6px;
    background-color: var(--color-secondary);
}

.section-title-en-line .title-en {
    line-height: 1;
    color: var(--desc-color);
    margin-bottom: 6px;
}

.section-title-en-line .title-zh {
    line-height: 1;
    color: var(--color-primary);
}

.section {
    padding: 64px 0;
}

.pe-60 {
    padding-right: 60px;
}

.cover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}

.cover-text-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.5);
}


.text-white {
    color: #fff;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.bg-white {
    background-color: #fff;
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-secondary {
    background-color: var(--secondary-color);
}

.bg-light {
    background-color: var(--bg-color);
}


ul,
li {
    list-style: none;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: var(--text-color);
}

.title {
    color: var(--title-color);
}

.hover-box {
    overflow: hidden;
    position: relative;
}

a.hover-box {
    display: block;
}

.hover-box img {
    transition: transform 0.3s ease-in-out;
}

.hover-box:hover {
    color: var(--primary-color);
}

.hover-x {
    transition: transform 0.3s ease-in-out;
}

.hover-x:hover {
    transform: translateX(10px);
}

.hover-box:hover .title {
    color: var(--primary-color);
}

.hover-box:hover .icon {
    color: var(--primary-color);
}

.hover-box:hover .line {
    background-color: var(--primary-color);
}

.hover-box:hover img {
    transform: scale(1.03);
}

.hover-box:hover a {
    color: var(--primary-color);
}

.hover-shadow {
    transition: box-shadow 0.3s ease-in-out;
}

.hover-shadow:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.container {
    position: relative;
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.container-1200 {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    width: 100%;
}

.container-1280 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    width: 100%;
}

@media screen and (max-width: 992px) {

    .container,
    .container-1200,
    .container-1280 {
        padding: 0 14px;
    }
}

/* 通用间距 */
.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-48 {
    margin-top: 48px;
}

.mt-64 {
    margin-top: 64px;
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-24 {
    font-size: 24px;
}

.fs-32 {
    font-size: 32px;
}

.fs-36 {
    font-size: 36px;
}

.fs-40 {
    font-size: 40px;
}

.fs-44 {
    font-size: 44px;
}

.fs-48 {
    font-size: 48px;
}

.fs-64 {
    font-size: 64px;
}

.fs-80 {
    font-size: 80px;
}

@media screen and (max-width: 1280px) {

    /* 通用间距 */
    .mt-16 {
        margin-top: 12px;
    }

    .mt-24 {
        margin-top: 18px;
    }

    .mt-32 {
        margin-top: 24px;
    }

    .mt-40 {
        margin-top: calc(1.5vw + 18px);
    }

    .mt-48 {
        margin-top: calc(1.5vw + 20px);
    }

    .mt-64 {
        margin-top: calc(1.5vw + 24px);
    }

    .section {
        padding: calc(1.5vw + 24px) 0;
    }

    /* 响应式字体大小 */
    .fs-80 {
        font-size: calc(2vw + 24px);
    }

    .fs-64 {
        font-size: calc(2vw + 24px);
    }

    .fs-48 {
        font-size: calc(2vw + 22px);
    }

    .fs-44 {
        font-size: calc(1.8vw + 20px);
    }

    .fs-40 {
        font-size: calc(1.6vw + 20px);
    }

    .fs-36 {
        font-size: calc(1.4vw + 19px);
    }

    .fs-32 {
        font-size: calc(1vw + 18px);
    }

    .fs-24 {
        font-size: calc(0.625vw + 16px);
    }

    .fs-20 {
        font-size: calc(0.5vw + 14px);
    }
}

.list-no-border>li {
    margin-bottom: 4px;
    /* background-color: var(--bg-color); */
    padding: 9px 0;
}

.list-border>li {
    border-bottom: 1px solid #eee;
    padding: 12px 0;
}

.list-border>li:nth-last-of-type(1) {
    border-bottom: none;
}

.list-borders>li {
    border-top: 1px solid #eee;
    padding: 12px 0;
}

.list-borders>li:nth-last-of-type(1) {
    border-bottom: 1px solid #eee;
}

.flex-2-1 {
    display: flex;
    gap: 32px;
}

.flex-2-3 {
    display: flex;
    gap: 32px;
}

.flex-2-3>*:nth-child(1) {
    width: 40%;
    flex-shrink: 0;
}

.flex-2-3>*:nth-child(2) {
    width: calc(60% - 32px);
}

.flex-2-1>* {
    width: 50%;
}

.grid-4-1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
}

.grid-4-1>* {
    min-width: 0;
}

.grid-3-2-2 {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    gap: 32px;
}

.grid-3-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.grid-3-1>* {
    min-width: 0;
}

.grid-3-2-2>* {
    min-width: 0;
}

.grid-2-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 32px;
}

.grid-2-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
}

.grid-2-2>* {
    min-width: 0;
}

.grid-2-1>* {
    min-width: 0;
}

.grid-400-2-3 {
    display: grid;
    grid-template-columns: 400px 2fr 3fr;
    grid-gap: 32px;
}

.grid-400-1-1 {
    display: grid;
    grid-template-columns: 400px 1fr 1fr;
    grid-gap: 32px;
}

.grid-400-1-1>* {
    min-width: 0;
}

@media screen and (max-width: 1280px) {
    .grid-400-1-1 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-400-1-1>:nth-child(1) {
        grid-column: span 2;
    }
}

@media screen and (max-width: 991.98px) {
    .grid-400-1-1 {
        grid-template-columns: 1fr;
    }

    .grid-400-1-1>:nth-child(1) {
        grid-column: span 1;
    }
}


.grid-300-1-1 {
    display: grid;
    grid-template-columns: 300px 1fr 1fr;
    grid-gap: 32px;
}

.grid-300-1-1>* {
    min-width: 0;
}

.grid-200-1-1 {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-gap: 32px;
}

.grid-200-1-1>* {
    min-width: 0;
}


.grid-2-3 {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-gap: 32px;
}

.grid-item {
    width: 100%;
    height: 100%;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-item p {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 16px;
}







@media screen and (max-width: 991.98px) {
    .flex-2-1 {
        flex-wrap: wrap;
        gap: 24px;
    }

    .flex-2-1>* {
        width: 100%;
    }

    .grid-2-1 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .grid-3-1 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .grid-2-2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .grid-4-1 {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .grid-2-3 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media screen and (max-width: 575.98px) {
    .grid-4-1 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.video-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}


.party-safety-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.party-card-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
    gap: 30px;
}

.party-card {
    min-width: 0;
    position: relative;
}

.party-card:nth-child(2) {
    grid-row: span 2;
}

.party-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.party-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
}

.party-card .overlay h2 {
    font-size: calc(0.3vw + 16px);
    line-height: 1.5;
}

.party-card .link {
    display: inline-block;
    padding: 8px 16px;
    background: white;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.party-card .link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* 矿井风采大图显示样式 */
.img-show-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: pointer;
}

.img-show-box.active {
    display: flex;
}

.img-show-box img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    cursor: default;
}

.img-show-box .close-btn {
    position: absolute;
    top: 10%;
    right: 50%;
    transform: translateX(50%);
    color: white;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}
.img-show-box .close-btn svg {
    width: 32px;
    height: 32px;
}

.img-show-box .close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 矿井风采图片点击效果 */
.swiper-coal-pics .swiper-slide img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.swiper-coal-pics .swiper-slide img:hover {
    transform: scale(1.05);
}

@media screen and (max-width: 575.98px) {
    .party-card-box {
        grid-template-columns: 1fr;
        grid-auto-rows: 140px;
        gap: 20px;
    }

    .party-card:nth-child(2) {
        grid-row: span 1;
    }
}



.party-building,
.social-responsibility {
    position: relative;
    height: 300px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.party-building img,
.social-responsibility img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.party-building:hover img,
.social-responsibility:hover img {
    transform: scale(1.05);
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(45deg, rgba(220, 38, 38, 0.8), rgba(239, 68, 68, 0.6)); */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.social-responsibility .section-overlay {
    background: none;
    /* background: linear-gradient(45deg, rgba(34, 197, 94, 0.8), rgba(74, 222, 128, 0.6)); */
    background: linear-gradient(45deg, rgba(4, 16, 49, 0.8), rgba(3, 65, 51, 0.345));
}

.section-overlay h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.section-overlay p {
    margin-bottom: 25px;
    opacity: 0.9;
    font-size: 1.1rem;
}

.section-link {
    display: inline-block;
    padding: 12px 30px;
    background: white;
    color: #333;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.section-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767.98px) {

    .social-responsibility,
    .party-building {
        height: 200px;
    }

    .party-safety-section {
        grid-template-columns: 1fr;
    }

    .section-overlay h2 {
        font-size: 1.4rem;
    }

    .section-link {
        padding: 10px 20px;
        font-size: 14px;
    }
}


.news-list-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.news-list-text2 {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.news-list2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media screen and (max-width: 767.98px) {
    .news-list2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 575.98px) {
    .news-list2 {
        grid-template-columns: 1fr;
    }
}

.news-list-imgs3 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.news-item3 {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.news-item3 .news-img-link {
    aspect-ratio: 5/3;
    border-radius: 4px;
    overflow: hidden;
}

.news-item3 .news-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item2 {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item2:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.news-item2 .news-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: #f0f0f0;
    display: block;
}

.news-item2 .news-info {
    padding: 16px;
}

.news-desc {
    font-size: 14px;
    color: var(--color-desc);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-img-link {
    display: block;
    overflow: hidden;
}

.news-img-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-img-link:hover img {
    transform: scale(1.05);
}

.news-time {
    font-size: 12px;
    line-height: 1.6;
    color: #999999;
}

@media screen and (max-width: 767.98px) {
    .news-item3 {
        grid-template-columns: 100px 1fr;
        gap: 12px;
        position: relative;
    }

    .news-item3 .news-img-link {
        aspect-ratio: 3/2;
    }

    .news-item3 .news-desc {
        margin-bottom: 0;
        line-height: 1.4;
        font-size: 14px;
    }

    .news-item3 .news-time {
        position: absolute;
        bottom: 0;
        left: 10px;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 2px 4px 3px;
        border-radius: 4px;
        color: #fff;
        width: 80px;
        text-align: center;
    }

    .news-item3 .news-title {
        margin-bottom: 0;
        font-size: 15px;
    }
}

/* main banner */
.swiper-banner {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
    --swiper-theme-color: #fff;
    --swiper-pagination-bullet-width: 40px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bottom: 30px;
    height: 60vw;
    max-height: 800px;
    position: relative;
}


.swiper-banner .swiper-slide img {
    transition: 1s linear 2s;
    transform: scale(1.1, 1.1);
}

.swiper-banner .swiper-slide-active img,
.swiper-banner .swiper-slide-duplicate-active img {
    transition: 6s linear;
    transform: scale(1, 1);
}

/* .swiper-banner .title1{
    font-weight: bold;
} */
.swiper-banner .swiper-slide-active .title1 {
    animation: fadeInDown 1s .3s ease-in-out both;
}

.swiper-banner .swiper-slide-active .title2 {
    animation: fadeInDown 1s ease-in-out both;
}

.swiper-banner .swiper-slide-active .title3 {
    animation: fadeInDown 1s .5s ease-in-out both;
}

.swiper-banner .swiper-slide .img_box {
    width: 100%;
    height: 100%;
}

.swiper-banner .swiper-slide .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-banner .swiper-slide .text_box {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    width: 70%;
    max-width: 1200px;
}

.swiper-banner .swiper-slide .text_box>* {
    text-shadow: 0 0 10px rgba(12, 17, 50, 0.285);
}

@media screen and (max-width:1280px) {
    .swiper-banner {
        height: 60vh;
        max-height: 400px;
    }
}

@media screen and (max-width:1200px) {
    .swiper-banner .swiper-slide .text_box {
        top: 50%;
    }
}

@media screen and (max-width:768px) {
    .swiper-banner {
        height: 30vh;
        max-height: 300px;
    }

    .swiper-banner .swiper-slide .text_box {
        width: 90%;
    }

    .swiper-banner {
        --swiper-pagination-bullet-width: 6px;
        --swiper-pagination-bullet-height: 8px;
        --swiper-pagination-bottom: 12px;
    }
}

.swiper-box {
    width: 100%;
    position: relative;
}

.tab-box {
    min-width: 0;
}

.swiper-news1 {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
    --swiper-theme-color: #fff;
    --swiper-pagination-bullet-width: 6px;
    --swiper-pagination-bullet-height: 20px;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bottom: 9px;
    height: 400px;
    min-width: 0;
    width: 100%;
}

.swiper-news1 .img_box {
    width: 100%;
    height: 100%;
}

.swiper-news1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

section .swiper-news1 .swiper-pagination-bullets {
    text-align: right;
    right: 12px;
    left: auto;
    width: auto;
}

.main-section-news a {
    display: block;
}

@media screen and (max-width:768px) {
    .swiper-news1 {
        height: 300px;
    }
}

@media screen and (max-width:576px) {
    .swiper-news1 {
        height: 200px;
    }
}

.date {
    color: var(--color-desc);
    font-size: 14px;
}

.item-list-title-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.item-list-title-date::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.item-list-title-date:hover::after {
    width: 100%;
}

.item-list-title-date .title {
    flex: 1;
    display: block;
    max-width: calc(100% - 100px);
}

.item-list-title-date .date {
    width: 100px;
    text-align: right;
}


.item-list-title-date2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    transition: all 0.3s ease-in-out;
}

.item-list-title-date2:hover {
    transform: translateX(-12px);
}

.item-list-title-date2 .item-content {
    flex: 1;
    display: block;
}

.item-content .title {
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.item-content .item-description {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-date-box {
    background-color: #eee;
    width: 88px;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.3s ease;
}

.item-day {
    line-height: 1;
    margin-bottom: 6px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.item-year-month {
    font-size: 16px;
    color: #666;
    transition: all 0.3s ease;
}

.item-list-title-date2:hover .item-date-box {
    background-color: var(--primary-color);
    color: #fff;
}

.item-list-title-date2:hover .item-year-month {
    color: #fff;
}

@media (max-width: 768px) {
    .item-list-title-date2 {
        gap: 12px;
    }

    .item-date-box {
        width: 68px;
    }

    .item-year-month {
        font-size: 12px;
    }

    .item-day {
        margin-bottom: 0;
    }
}

.swiper-top-news-section {
    position: relative;
    /* margin-top: 40px; */
    z-index: 10;
    background-color: #ffffff;
    /* padding: 0 16px; */
    display: flex;
    align-items: center;
    /* border-bottom: 1px solid var(--secondary-color); */
    border-bottom: 1px solid var(--tertiary-color);
    /* border-radius: 8px 8px 0 0; */
    gap: 24px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.swiper-top-news {
    --swiper-pagination-color: var(--secondary-color);
    --swiper-pagination-bullet-vertical-gap: 2px;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bullet-height: 4px;
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-right: 0;
}

.swiper-top-news .wiper-pagination-bullets {
    right: 0;
    height: 100%;
}

.swiper-top-news-section .title {
    font-size: 16px;
    font-weight: bold;
    color: var(--secondary-color);
    width: 100px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.swiper-top-news-section a {
    padding-right: 50px;
}

.swiper-top-news-section .swiper-top-news {
    width: 100%;
    flex: 1;
    height: 60px;
}

.swiper-top-news .swiper-slide {
    display: flex;
    align-items: center;
    gap: 12px;
}

.swiper-top-news-section .icon {
    width: 32px;
    height: 32px;
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .swiper-top-news-section {
        /* padding: 0 12px; */
        gap: 12px;
    }

    .swiper-top-news-section a {
        padding-right: 24px;
    }

    .swiper-top-news-section .title {
        width: auto;
    }
}

.news-center-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

/* .news-center-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
} */


.nav-pills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    /* padding: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
}

.pill-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 4px;
    /* border: 2px solid transparent; */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.card-icon-box {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    height: 280px;
}

.card-icon {
    display: block;
    width: calc(50% - 6px);
    position: relative;
    background: linear-gradient(135deg, #eff2f492 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.pill-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.card-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.pill-item:hover::before,
.pill-item.active::before,
.card-icon:hover::before,
.card-icon.active::before {
    opacity: 1;
}


.pill-icon {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-tertiary);
    border-radius: 10px;
    margin-right: 16px;
    transition: all 0.3s ease;
}

.card-icon .icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    transition: all 0.3s ease;
}

.pill-item:hover,
.card-icon:hover {
    transform: translateY(-4px);
}

.pill-item:hover .pill-icon,
.pill-item.active .pill-icon {
    background: white;
    transform: scale(1.1);
}

.card-icon:hover .icon,
.card-icon.active .icon {
    transform: scale(1.1);
}


.pill-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.card-icon .icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.pill-item:hover .pill-icon svg,
.pill-item.active .pill-icon svg {
    color: var(--color-secondary);
}

.card-icon:hover .icon svg,
.card-icon.active .icon svg {
    color: #fff;
}

.pill-content,
.card-icon .title {
    position: relative;
    z-index: 2;
    flex: 1;
}

.pill-content h3,
.card-icon .title h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-title);
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.pill-content p,
.card-icon .title p {
    font-size: 14px;
    color: var(--color-desc);
    margin: 0;
    transition: color 0.3s ease;
}

.pill-item:hover .pill-content h3,
.pill-item:hover .pill-content p,
.pill-item.active .pill-content h3,
.pill-item.active .pill-content p,
.card-icon:hover .title h3,
.card-icon.active .title h3,
.card-icon:hover .title p,
.card-icon.active .title p {
    color: white;
}

.pill-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-secondary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.pill-item:hover .pill-indicator,
.pill-item.active .pill-indicator {
    transform: scaleX(1);
}

/* 内容区域布局 */
.news-content-area {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 32px;
}




/* Tab新闻列表 */
.tab-news-section {
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.tab-nav-container {
    display: flex;
    background: #f4f4f4;
}

.tab-nav-item2 {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
    color: var(--color-text);
}

.tab-nav-item2.active {
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
}

.tab-nav-item2.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-secondary);
    opacity: 0;
}

.tab-icon {
    font-size: 18px;
}

.tab-count {
    background: var(--color-secondary);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.tab-content2 {
    padding: 24px;
}

.tab-pane2 {
    display: none;
}

.tab-pane2.active {
    display: block;
}

@media screen and (max-width: 992px) {
    .tab-content2 {
        padding: 14px;
    }
}

/* 新闻列表样式 */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.news-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    /* padding: 20px; */
    border-radius: 4px;
    /* border: 1px solid #e9ecef; */
    transition: all 0.3s ease;
    cursor: pointer;
}

.news-item:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); */
    border-color: var(--color-primary);
}

.news-item.featured {
    grid-template-columns: 200px 1fr;
}

.news-image {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    max-width: 100%;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-item:hover .news-image img {
    transform: scale(1.05);
}

.news-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--color-secondary);
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.news-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.news-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.news-item:hover .news-title {
    color: var(--color-primary);
}



.news-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--color-desc);
}

/* 侧边栏样式 */
.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.sidebar-widget {
    width: 100%;
    background: white;
    border-radius: 4px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.sidebar-widget:hover {
    transform: translateY(-2px);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    margin-top: -7px;
    border-bottom: 2px solid var(--color-tertiary);
}

.widget-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-title);
    margin: 0;
    line-height: 1;
}

.more-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.more-link:hover {
    color: var(--color-primary);
}

/* 工作简报 */
.report-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    background: transparent;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.report-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: var(--color-tertiary);
    transition: all 0.6s ease;
    z-index: -1;
}

.report-item:hover::after {
    left: 0;
}

.report-item:hover {
    background-color: var(--color-tertiary);
}

.report-date {
    width: 100px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-tertiary);
    border-radius: 4px;
    font-weight: 600;
    color: var(--primary-color);
    flex-shrink: 0;
}

.report-item h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-title);
    margin: 0;
    line-height: 1.2;
    padding-right: 12px;
}

.report-date {
    font-size: 14px;
    line-height: 1;
}

.date-day {
    font-size: 12px;
}

/* 快速链接 */
.links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--color-tertiary);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--color-text);
}

.quick-link:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

.link-icon {
    font-size: 20px;
}

.quick-link span {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}



.video-info {
    padding: 16px;
}

.video-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .news-content-area {
        grid-template-columns: 1fr 300px;
        gap: 32px;
    }

    .grid-3-2-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-3-2-2>*:nth-child(3n+1) {
        grid-column: span 2;
    }

    .grid-3-2-2>*:nth-child(3n+2) {
        grid-column: span 1;
    }

    .grid-3-2-2>*:nth-child(3n+3) {
        grid-column: span 1;
    }
}

@media (max-width: 992px) {
    .nav-pills-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .news-content-area {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .news-item.featured {
        grid-template-columns: 150px 1fr;
    }
}

@media (max-width: 768px) {
    .grid-3-2-2 {
        grid-template-columns: 1fr;
    }

    .grid-3-2-2>*:nth-child(3n+1) {
        grid-column: span 1;
    }


    .nav-pills-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .pill-item {
        padding: 16px;
    }


    .tab-nav-item {
        padding: 16px;
    }

    .news-item {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .news-item.featured {
        grid-template-columns: 1fr;
    }

    .news-image {
        height: 150px;
    }

    .links-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sidebar-widget {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .pill-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }

    .pill-content h3 {
        font-size: 14px;
    }

    .pill-content p {
        font-size: 12px;
    }

    .tab-content2 {
        padding: 20px;
    }

    .news-meta {
        flex-direction: column;
        gap: 8px;
    }
}

/* 图文新闻列表样式 */
.news-card-img-lists {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
}

.news-main {
    display: flex;
    flex-direction: column;
}

.news-card-img-lists .news-item {
    /* border: 1px solid #e9ecef; */
    transition: all 0.3s ease;
}

.news-card-img-lists .news-item:hover {
    transform: translateY(-4px);
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); */
    /* border-color: var(--color-primary); */
}


.news-card-img-lists .news-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.news-card-img-lists .news-item {
    grid-template-columns: 1fr;
    padding: 0;
    border-radius: 4px;
}

.news-card-img-lists .news-item.featured {
    grid-template-columns: 200px 1fr;
    padding: 24px;
}

.news-card-img-lists .news-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-title);
    line-height: 1.4;
    margin-bottom: 8px;
    transition: color 0.3s ease;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-img-lists .news-item:hover .news-title {
    color: var(--color-primary);
}

.news-card-img-lists .news-desc {
    font-size: 14px;
    color: var(--color-desc);
    line-height: 1.6;
    margin-bottom: 12px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-img-lists .news-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--color-desc);
}

.news-card-img-lists .news-date {
    /* padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px; */
    font-size: 12px;
}

@media (max-width: 1200px) {


    .news-card-img-lists .news-item.featured {
        grid-template-columns: 1fr;
        padding: 20px;
    }

}

@media (max-width: 992px) {
    .news-card-img-lists {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .news-card-img-lists .news-item {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .news-card-img-lists {
        gap: 20px;
    }

    .news-card-img-lists .news-item.featured {
        padding: 16px;
    }

    .news-card-img-lists .news-title {
        font-size: 14px;
    }

    .news-card-img-lists .news-meta {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 576px) {
    .news-card-img-lists .news-item {
        grid-template-columns: 1fr;
    }
}

.section .main-video-swiper {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: var(--secondary-color);
    --swiper-pagination-bullet-width: 32px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bottom: 0;
    padding-bottom: 30px;
}

.video--item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video--item:hover,
.video--item.active {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.video--item .video-box {
    width: 100%;
    aspect-ratio: 3/2;
    background-color: #fff;
    position: relative;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.video--item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video--item .video-play-btn-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    cursor: pointer;
    opacity: 0;
}

.video--item .video-info {
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.video--item .video-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video--item .video-desc {
    font-size: 14px;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.video--item .video-meta {
    /* padding: 12px 16px; */
    width: 100%;
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: #666666;
    justify-content: space-between;
}



.video--item .video-play-btn-box svg {
    color: #fff;
    width: 60px;
    height: 60px;
}

.video--item:hover .video-play-btn-box,
.video--item.active .video-play-btn-box {
    opacity: 1;
}

.video--item .video-play-btn-box:not(.playing) .video-play-btn {
    display: block;
}

.video--item .video-play-btn-box:not(.playing) .video-pause-btn {
    display: none;
}

.video--item .video-play-btn-box.playing .video-play-btn {
    display: none;
}

.video--item .video-play-btn-box.playing .video-pause-btn {
    display: block;
}

@media (max-width: 768px) {
    .video--item .video-name {
        font-size: 14px;
    }

    .video--item .video-desc {
        font-size: 12px;
    }

    .section .main-video-swiper {
        --swiper-pagination-bullet-width: 8px;
        --swiper-pagination-bullet-height: 8px;
    }
}


.section .top-events-swiper {
    --swiper-navigation-color: #fff;

}

.section .top-events-swiper .swiper-pagination-bullets {
    width: auto;
}

.top-events-swiper .swiper-slide img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    display: block;
}

.top-title-with-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    --swiper-pagination-color: var(--secondary-color);
    --swiper-pagination-bullet-width: 20px;
    --swiper-pagination-bullet-height: 20px;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bottom: 0;
}

.section .top-title-with-pagination .swiper-pagination {
    position: relative;
    width: auto;
    height: 20px;
}

@media screen and (max-width: 992px) {
    .top-title-with-pagination {
        --swiper-pagination-bullet-width: 4px;
        --swiper-pagination-bullet-height: 12px;
    }

    .section .top-title-with-pagination .swiper-pagination {
        height: 12px;
    }
}

.section .industry-section {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* .section .industry-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd700 0%, #ff6b35 50%, #ffd700 100%);
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
} */


.industry-link-btns {
    order: 2;
    width: 200px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 360px;
    padding: 10px 0;
    position: relative;
    /* background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); */
}

.industry-link-btns h2 {
    padding: 12px 24px;
    color: #353535;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

.industry-link-btns h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(21, 0, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.industry-link-btns h2.active {
    color: #fff;
    background: linear-gradient(135deg, #12255C 0%, #12255C 100%);
    border-color: #12255C;
    box-shadow: 0 4px 15px rgba(18, 37, 92, 0.3);
}

.industry-link-btns h2:hover {
    border-color: #12255C;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(18, 37, 92, 0.2);
}

.industry-link-btns h2:hover::before {
    left: 100%;
}

.industry-swiper {
    border-radius: 12px;
    overflow: hidden;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
    flex: 1;
}

.industry-content {
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    border: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
    background: #fff;
}


.industry-img {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 400px;
}

.industry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.industry-content:hover .industry-img img {
    transform: scale(1.05);
}

.industry-desc {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.industry-desc::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #12255C 50%, transparent 100%);
}

.industry-desc h2 {
    color: #1a1a2e;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
}

.industry-desc h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1500ff 0%, #820505 100%);
    border-radius: 2px;
}

.industry-desc p {
    color: #555555;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    font-weight: 400;
}

.industry-link {
    display: inline-block;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    padding: 14px 32px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    align-self: flex-start;
}

.industry-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #12255C 0%, #ac0505 100%);
    transition: left 0.3s ease;
    z-index: -1;
}

.industry-link:hover {
    color: #fff;
    border-color: #12255C;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 37, 92, 0.3);
}

.industry-link:hover::before {
    left: 0;
}

.industry-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid #12255C;
    width: 12px;
    height: 12px;
    opacity: 1;
    transition: all 0.3s ease;
}

.industry-swiper .swiper-pagination-bullet-active {
    background: #12255C;
    /* transform: scale(1.2); */
    /* box-shadow: 0 0 10px rgba(18, 37, 92, 0.5); */
}

@media (max-width: 1200px) {
    .section .industry-section {
        flex-direction: column;
        gap: 24px;
    }

    .industry-link-btns {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 12px;
        height: auto;
        width: 100%;
        flex-wrap: wrap;
    }

    .industry-link-btns h2 {
        width: auto;
    }

    .industry-swiper {
        margin-top: 0;
        width: 100%;
        order: 2;
    }

    .industry-desc {
        padding: 35px;
    }

    .industry-desc h2 {
        font-size: 26px;
    }
}

@media (max-width: 992px) {
    .section .industry-section {
        gap: 12px;
    }

    .industry-img {
        height: 300px;
    }


    .industry-desc {
        padding: 30px;
    }

    .industry-desc::before {
        display: none;
    }

    .industry-desc h2 {
        font-size: 24px;
    }

    .industry-desc p {
        font-size: 15px;
    }


}

@media (max-width: 768px) {
    .industry-link-btns h2 {
        font-size: 14px;
        padding: 6px 12px;
        width: calc(33% - 12px);
    }

    .industry-content {
        flex-direction: column;
    }

    .section .industry-section {
        gap: 0;
    }

    .industry-desc {
        padding: 16px;
    }

    .industry-desc h2 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .industry-desc p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .industry-link {
        padding: 10px 16px;
        font-size: 14px;
    }


}

@media (max-width: 576px) {

    .industry-content {
        border-radius: 8px;
        min-height: auto;
    }

    .industry-img {
        height: 200px;
    }

    .industry-desc h2::after {
        width: 50px;
        height: 2px;
        bottom: -6px;
    }

    .industry-desc p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .industry-link {
        padding: 8px 18px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

}

.product-section {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
}

.product-sidebar {
    min-width: 0;
    flex-shrink: 0;
    position: relative;
}

.products-category-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.products-category-nav a {
    display: block;
    padding: 12px 24px;
    color: #353535;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

.products-category-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(21, 0, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.products-category-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, #12255C 0%, #12255C 100%);
    border-color: #12255C;
    box-shadow: 0 4px 15px rgba(18, 37, 92, 0.3);
}

.products-category-nav a:hover {
    border-color: #12255C;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(18, 37, 92, 0.2);
}

.products-category-nav a:hover::before {
    left: 100%;
}

.product-lists .product-item {
    min-width: 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

.product-lists .product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.product-lists .product-item .img_box {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.product-lists .product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-lists .product-item .product-info {
    padding: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.153);
}

.product-lists .product-item .product-title {
    font-size: 18px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
}

.product-lists .product-item .product-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #555555;
}

.product-lists {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 32px;
    min-width: 0;
}

/* .product-lists .product-item{
    grid-column-end: span 1;
} */
.product-lists.grid-num-5 {
    grid-template-columns: repeat(4, 1fr);
}

.product-lists.grid-num-5 .product-item:nth-child(1) {
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.product-lists.grid-num-6 {
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 300px;
}

.product-lists.grid-num-6 .product-item {
    grid-column-end: span 2;
}

.product-lists.grid-num-6 .product-item:nth-child(1) {
    grid-column-end: span 3;
}

.product-lists.grid-num-6 .product-item:nth-child(6) {
    grid-column-end: span 3;
}

.product-lists.grid-num-7 {
    grid-template-columns: repeat(12, 1fr);
    /* grid-auto-rows: 240px; */
}

.product-lists.grid-num-7 .product-item {
    grid-column-end: span 3;
}

.product-lists.grid-num-7 .product-item:nth-child(7n + 5),
.product-lists.grid-num-7 .product-item:nth-child(7n + 6),
.product-lists.grid-num-7 .product-item:nth-child(7n + 7) {
    grid-column-end: span 4;
}

.product-lists.grid-num-8 {
    grid-template-columns: repeat(4, 1fr);
}

.product-lists.grid-num-8 .product-item:nth-child(1) {
    grid-row-end: span 1;
}

@media (max-width: 1200px) {
    .products-category-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .product-section {
        grid-template-columns: 1fr;
    }

    .product-lists {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .product-lists .product-item .product-title {
        font-size: 16px;
    }

    .product-lists.grid-num-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .product-lists.grid-num-5 .product-item:nth-child(1) {
        grid-column-end: span 2;
        grid-row-end: span 2;
    }


    .product-lists.grid-num-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        grid-auto-rows: 240px;
    }

    .product-lists.grid-num-6 .product-item {
        grid-column-end: span 1;
    }

    .product-lists.grid-num-6 .product-item:nth-child(1) {
        grid-column-end: span 1;
    }

    .product-lists.grid-num-6 .product-item:nth-child(6) {
        grid-column-end: span 1;
    }


    .product-lists.grid-num-7 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        grid-auto-rows: 240px;
    }

    .product-lists.grid-num-7 .product-item {
        grid-column-end: span 1;
    }

    .product-lists.grid-num-7 .product-item:nth-child(1) {
        grid-column-end: span 2;
    }

    .product-lists.grid-num-7 .product-item:nth-child(7n + 5),
    .product-lists.grid-num-7 .product-item:nth-child(7n + 6),
    .product-lists.grid-num-7 .product-item:nth-child(7n + 7) {
        grid-column-end: span 1;
    }

    .product-lists.grid-num-8 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        grid-auto-rows: 240px;
    }


}

@media (max-width: 576px) {

    .product-lists.grid-num-5,
    .product-lists.grid-num-6,
    .product-lists.grid-num-7,
    .product-lists.grid-num-8 {
        grid-auto-rows: 160px;
    }

    .products-category-nav a {
        padding: 8px 16px;
        font-size: 14px;
    }

    .product-lists {
        grid-template-columns: 1fr;
    }

    /* .product-lists .product-item{
        width: 70%;
        margin: 0 auto;
    } */
    .product-lists .product-item .product-title {
        font-size: 14px;
    }

    .product-lists .product-item .product-desc {
        font-size: 13px;
    }
}


.supervision-content-area {
    display: grid;
    grid-template-columns: 240px 1fr 1fr;
    gap: 32px;
}

.supervision-content-area .news-card-img-lists {
    grid-template-columns: 1fr;
}

.supervision-content-area .news-card-img-lists .news-item {
    grid-template-columns: 200px 1fr;
}

@media (max-width: 1280px) {
    .supervision-content-area {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .supervision-content-area .news-nav-innovation {
        grid-column-end: span 2;
    }

    .supervision-content-area .news-card-img-lists .news-item {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 992px) {
    .supervision-content-area {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .supervision-content-area .news-nav-innovation {
        grid-column-end: span 1;
    }

    .supervision-content-area .news-card-img-lists .news-item {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .supervision-content-area .news-card-img-lists .news-item {
        grid-template-columns: 1fr;
    }
}

.culture-section {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
}

.culture-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 32px;
    grid-auto-rows: 320px;
}

.culture-grid .grid-item {
    grid-column-end: span 3;
    width: 100%;
    height: 100%;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.culture-grid .grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.culture-grid .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.culture-grid .grid-item .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    z-index: 1;
}

.culture-grid .grid-item:nth-child(1) {
    grid-column-end: span 5;
}

.culture-grid .grid-item:nth-child(4) {
    grid-column-end: span 6;
}

.culture-grid .grid-item:nth-child(5) {
    grid-column-end: span 5;
}

.culture-navs {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.culture-navs a {
    display: block;
    padding: 12px 20px;
    color: #333;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    font-weight: bold;
}

.culture-navs a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0.1;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.culture-navs a:hover::after {
    opacity: 1;
}

.culture-navs a:hover {
    color: #fff;
}


@media (max-width: 1280px) {
    .culture-section {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .culture-navs a {
        padding: 12px 20px;
        font-size: 16px;
    }

    .culture-navs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 992px) {
    .culture-navs a {
        padding: 8px 16px;
        font-size: 14px;
    }

    .culture-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .culture-grid .grid-item {
        grid-column-end: span 1;
    }

    .culture-grid .grid-item:nth-child(1) {
        grid-column-end: span 2;
    }

    .culture-grid .grid-item:nth-child(4) {
        grid-column-end: span 1;
    }

    .culture-grid .grid-item:nth-child(5) {
        grid-column-end: span 1;
    }
}

@media (max-width: 768px) {
    .culture-grid {
        grid-auto-rows: 200px;
        gap: 16px;
    }

    .culture-grid .grid-item {
        grid-column-end: span 1;
    }
}

.footer {
    padding-top: 40px;
    position: relative;
    /* background-color: var(--color-secondary); */
    /* clip-path: polygon(0 0,50% 100px, 100% 0, 100% 100%, 0 100%); */
    background-color: #f5f5f5;
}

.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    transition: opacity 0.3s ease;
    z-index: -1;
}

.footer * {
    color: #333;
}

.footer-links-swiper {
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.footer-links-swiper .swiper-slide {
    width: auto;
}


.footer-links {
    display: flex;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--color-secondary);
}

.footer-links .swiper-button-box {
    position: relative;
    width: 100px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-links .swiper-button-box .swiper-button-prev,
.footer-links .swiper-button-box .swiper-button-next {
    position: relative;
    background-color: #efeff4;
    margin: 0;
    top: 0;
    left: auto;
    right: auto;
}

.footer-links .swiper-button-box .swiper-button-prev svg,
.footer-links .swiper-button-box .swiper-button-next svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.footer-links h2 {
    background-color: var(--color-secondary);
    padding: 0 14px;
    height: 44px;
    line-height: 44px;
    color: #fff;
}

.footer-content {
    margin: 24px 0;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 32px;
    justify-content: space-between;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-erweima {
    display: flex;
    gap: 16px;
}

.code-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 120px;
    max-width: 100%;
}

.code-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-copyright {
    border-top: 1px solid #0000002e;
    font-size: 14px;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
}

.footer-logo {
    width: 400px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* .footer-logo::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: block;
    width: 200vw;
    height: 1000px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    z-index: 1;
    border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
    box-shadow: inset 0px -10px 0 0 rgba(0, 0, 0, 0.137);
} */

.footer-logo img {
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

@media (max-width: 1280px) {
    .footer-logo {
        width: 300px;
    }
}

@media (max-width: 1280px) {
    .footer-content {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .footer {
        padding-top: 20px;
    }

    .footer .footer-links-swiper {
        --swiper-navigation-size: 24px;
    }

    .footer-copyright {
        flex-direction: column;
        gap: 8px;
    }

    .footer * {
        font-size: 14px;
    }

    .footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        position: relative;
    }

    .footer-links h2 {
        background-color: transparent;
        color: #333;
        padding: 0;
    }

    .footer-links::after {
        content: '';
        position: absolute;
        left: 0;
        top: 44px;
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color-secondary);
        z-index: -1;
    }

    .footer-links .swiper-button-box {
        position: absolute;
        right: 0;
        top: 0;
    }

    .footer-links .swiper a {
        padding: 12px 0;
        display: block;
    }




}

@media (max-width: 576px) {
    .footer-content {
        gap: 16px;
    }

    .code-content {
        width: 80px;
    }

    .code-content .text {
        font-size: 10px;
    }

    .footer-contact {
        gap: 6px;
    }
}

.bg-cover-img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.page-banner-section-with-bg {
    position: relative;
    height: 400px;
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.page-banner-section-with-bg::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(4, 20, 75, 0.555);
    z-index: -1;
}

/* .banner-page-content {
} */
.banner-page-content {
    text-align: center;
    margin-top: 60px;
}

.banner-page-content .title {
    color: #fff;
    padding-bottom: 16px;
    margin-bottom: 16px;
    position: relative;
}

.banner-page-content .title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.banner-page-content .desc {
    color: #fff;
    margin-bottom: 0;
}

@media (max-width:1280px) {
    .banner-page-content {
        margin-top: 0;
    }

    .page-banner-section-with-bg {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .page-banner-section-with-bg {
        height: 200px;
    }
}

.breadcrumb-section {
    /* padding: 14px 0; */
    background-color: rgba(0, 0, 0, 0.05);
}

.detail-breadcrumb {
    font-size: 14px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
}

.detail-breadcrumb li a {
    color: #677390;
    padding-right: 8px;
}

.detail-breadcrumb li.active {
    color: #BB0016;
}

.detail-breadcrumb li::after {
    content: '/';
    color: #BB0016;
}

.detail-breadcrumb li:last-child::after {
    content: '';
}


.sidebar-box {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.sidebar-sidebar {
    flex: 0 0 220px;
    width: 220px;
    flex-shrink: 0;
}

/* .sidebar-sidebar .sidebar-bg {
    background-color: #F9F9F9;
    padding: 20px;
} */

.sidebar-sidebar.sticky .sidebar-bg {
    position: fixed;
    top: 80px;
    width: 284px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background-color: #F9F9F9;
    padding: 20px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    border-radius: 4px;
    z-index: 999;
}

.sidebar-content {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 14px;
}

.category-list li a {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    padding: 8px 12px 8px 0;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    /* background-color: #eaebf0; */
}

.category-list li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 0.3s ease-in-out;
}

.category-list li a::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--color-primary);
    position: absolute;
    left: -0;
    transform: translateX(-10px);
    top: 12px;
    transition: all 0.3s ease-in-out;
    box-shadow: 4px 4px 0 rgba(57, 2, 2, 0.2);
    opacity: 0;
}

.category-list li a:hover,
.category-list li a.active {
    color: var(--color-primary);
    padding-left: 24px;
}

/* .category-list li a:hover::after,
.category-list li a.active::after {
    width: 120px;
} */
.category-list li a:hover::before,
.category-list li a.active::before {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1024px) {
    .category-book-list {
        margin-top: 30px;
    }

    .sidebar-sidebar {
        flex: 0 0 auto;
        width: 100%;
    }

    .sidebar-sidebar .category-title {
        display: none;
    }

    .sidebar-sidebar .sidebar-bg {
        padding: 0;
        background: none;
    }

    .sidebar-box {
        flex-direction: column;
        gap: 24px;
    }

    .category-book-list {
        gap: 30px;
    }

    .category-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
        padding-left: 0;
    }

    .category-list li a {
        font-size: 14px;
        padding: 6px 20px;
        border-radius: 4px;
        background-color: #f2f3f7;
    }

    .category-list li a:hover,
    .category-list li a.active {
        color: #fff;
        background-color: var(--color-primary);
        padding-left: 20px;
    }

    .category-list li a:hover::before,
    .category-list li a.active::before {
        opacity: 0;
        transform: translateX(0);
    }


}


.news-detail-content {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow);
    /* padding: 30px;
  border: 1px solid #eee; */
}

.news-detail-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.news-detail-title {
    line-height: 1.4;
    color: var(--color-primary);
    margin-bottom: calc(0.3em + 8px);
}

.news-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #888;
    font-size: 14px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-item svg {
    width: 20px;
    height: 20px;
}

.news-detail-body {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.prev-next-article {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-bottom: 40px;
}

.prev-next-article .label {
    font-size: 14px;
    color: #666;
    min-width: 50px;
}

.prev-next-article .link {
    font-size: 14px;
    color: #666;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.prev-next-article>div {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    max-width: 100%;
}

.prev-next-article a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}


.search-page-form {
    width: 480px;
    max-width: 100%;
    display: flex;
    border: 1px solid #DAE0EE;
    border-radius: 0;
    background-color: #fff;
}

.search-input {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
}

.search-input::placeholder {
    color: #999;
}

.search-submit {
    border: none;
    border-radius: 0;
    padding: 10px 16px;
    background: white;
    color: #384572;
}

.search-meta {
    font-size: 14px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.search-keyword {
    font-size: 14px;
    color: #666;
}

.search-keyword .keyword {
    color: var(--secondary-color);
}

.search-keyword .result-count {
    color: var(--primary-color);
}

.search-result-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.result-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.result-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.result-item .item-img-link {
    width: 200px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.result-item .item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.result-item .item-img-link:hover .item-img {
    transform: scale(1.04);
}

.result-item .item-title {
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.result-item .item-title:hover {
    color: var(--color-primary);
}

.result-item .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-item .item-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.result-item .item-time {
    font-size: 14px;
    color: #888;
}

.result-item .item-title b,
.result-item .item-desc b {
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .result-item .item-img-link {
        width: 120px;
        aspect-ratio: 5 / 4;
    }

    /* .result-item .item-time{
        position: absolute;
        bottom: 0;
        left: 20px;
        width: 80px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 2px 6px 3px;
        border-radius: 4px;
    } */
}

.page-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f3;
}

.page-menu .menu-link {
    font-size: 14px;
    color: #333;
    position: relative;
    border-radius: 4px;
    display: block;
    padding: 8px 20px;
    overflow: hidden;
    z-index: 1;
    background-color: #ebedf3;
}

.page-menu .menu-link span {
    display: block;
    position: relative;
    z-index: 10;
    color: #000;
}


.page-menu .menu-link:hover,
.page-menu .menu-link.active {
    color: #fff;
    background-color: var(--color-primary);
}

@media (max-width: 768px) {
    .page-menu .menu-link {
        padding: 8px 12px;
    }

    .page-menu {
        gap: 2px;
        justify-content: flex-start;
    }
}

.news-sections--1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.news-sections--2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
}

.news-sections--1 .block,
.news-sections--2 .block {
    min-width: 0;
}

.block-main-news .img-box {
    width: 100%;
    height: 260px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 4px;
}

.cover-text-linear {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
}

.cover-text-linear .cover-title {

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis-title-date {
    display: flex;
    gap: 10px;
    max-width: 100%;
    justify-content: space-between;
    align-items: center;
}

.block-news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0 0 0;
}

.block-news-list li {
    list-style: none;
    padding-left: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.block-news-list li a {
    padding: 4px 0;
}

.block-news-list li:hover {
    transform: translateX(4px);
}

.block-news-list li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--color-secondary);
    border-radius: 0;
}

.block-news-list li:hover .title {
    color: var(--color-primary);
}

.ellipsis-title-date .date {
    font-size: 14px;
    color: #888;
    flex-shrink: 0;
}

.ellipsis-title-date .title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
}

.block-pic-cover {
    position: relative;
}

.block-pic-cover .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.block-pic-cover .img-box {
    position: relative;
    height: 260px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.block-pic-cover .cover-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
    color: #fff;
    font-size: calc(16px + .5vw);
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
}

.block-pic-cover .block-more {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background-color: #ffffff;
}

.block-pic-cover .block-more svg {
    width: 20px;
    height: 20px;
}

.block-pic-message {
    position: absolute;
    right: 2px;
    top: 2px;
    background-color: #0000004d;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 12px;
}

.block-pic-message .title {
    color: #fff;
}

.block-pic-message .num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.block-main-news .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}



.block-title-box {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-primary);
}

.block-title-box .block-title {
    margin-bottom: 0;
}

.block-title-box .block-more {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
}

.block-title-box .block-more svg {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    color: var(--color-primary);
}

.swiper-block-img-links {
    width: 100%;
    height: 480px;
    --swiper-pagination-color: var(--color-primary);
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-border-radius: 0;
}

.swiper-block-img-links .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-link-box {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
}

@media (max-width: 1023.98px) {
    .news-sections--1 .block:last-child {
        grid-column: span 2;
    }

    .block-main-news .img-box {
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .news-sections--1 {
        grid-template-columns: repeat(2, 1fr);
    }

    .swiper-block-img-links {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .news-sections--1 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .news-sections--1 .block:last-child {
        grid-column: span 1;
    }


}






.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 50px 0;
    justify-content: center;
    color: #677390;
}

.page-size-btn {
    min-width: 88px;
    text-align: center;
}

.page-size-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: white;
    border-radius: 0;
    box-shadow: 0px 8px 18px 0px #00000014;
    overflow: hidden;
    list-style: none;
    min-width: 80px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    z-index: 1001;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-size-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.page-size-dropdown li {
    padding: 0;
}

.page-size-dropdown a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    color: #384572;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
}

.page-size-dropdown a:hover {
    background-color: #1549C00D;
}

.page-size-dropdown a.active {
    background-color: #1549C00D;
    color: #1549C0;
}


.page-size-dropdown.active {
    display: block;
}

.pagination form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination>span {
    color: #677390;
}

.pagination>span,
.pagination>a,
.pagination>.current {
    padding: 0 12px;
    height: 36px;
    line-height: 33px;
    text-decoration: none;
    border: 1px solid #DAE0EE;
    border-radius: 0;
    color: #677390;
    transition: all 0.3s ease;
}

.pagination a:not(.disabled):hover {
    background-color: var(--color-primary);
    color: #fff;
}

.pagination .current {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.pagination .disabled {
    background-color: #E3E3E3CC;
    color: #677390;
    cursor: not-allowed;
}

.pagination select,
.pagination input {
    padding: 0 6px;
    height: 36px;
    line-height: 34px;
    border: 1px solid #DAE0EE;
    border-radius: 0;
    margin-left: 8px;
    color: #677390;
    max-width: 60px;
}

.pagination select:focus,
.pagination input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.pagination button {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #DAE0EE;
    border-radius: 0;
    background-color: #fff;
    cursor: pointer;
    color: #677390;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pagination button:hover {
    background-color: var(--color-primary);
    color: #fff;
}

@media (max-width: 1024px) {
    .pagination form {
        display: none;
    }
}

@media (max-width: 768px) {
    .pagination {
        margin: 30px 0;
    }

    .pagination>a:not(.prev-btn):not(.next-btn) {
        display: none;
    }
}










.return-top {
    cursor: pointer;
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    color: #23415A;
    opacity: 0;
    transition: all 0.5s ease;
    box-shadow: 0px 8px 32px 0px #0F2C0126;
}

.return-top:hover {
    background-color: #DAE0EE;
}

.return-top.active {
    opacity: 1;
}

.return-top svg {
    width: 24px;
    height: 24px;
}

.a-card-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.a-card-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.a-card-img {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    min-width: 0;
    border-radius: 4px;
    overflow: hidden;
}

.a-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}

.a-card-content {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.a-card-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: calc(0.3vw + 14px);
    font-weight: bold;
    max-width: 100%;
    display: block;
}

.a-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #5b5b5b;
    font-size: 14px;
}

.a-card-meta {
    font-size: 14px;
    color: #939393;
}

.a-card-item:hover .a-card-title {
    color: var(--color-primary);
}

.a-card-item:hover img {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .a-card-item {
        grid-template-columns: 160px 1fr;
    }
}

@media (max-width: 576px) {
    .a-card-item {
        grid-template-columns: 1fr;
    }

    .a-card-content {
        gap: 12px;
    }
}



.border-hard {
    border: 2px solid var(--coal-gray-mid);
    border-radius: 2px;
}

.shadow-hard {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-hard {
    display: inline-block;
    padding: 12px 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ebeef2;
    color: #fff;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-red {
    background-color: var(--coal-red);
    color: #fff;
}

.btn-red:hover {
    background-color: var(--coal-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(192, 16, 46, 0.3);
}

.btn-blue {
    background-color: var(--coal-blue);
    color: #fff;
}

.btn-blue:hover {
    background-color: var(--coal-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(10, 74, 143, 0.3);
}

.news-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (min-width: 768px) {
    .news-wrapper {
        flex-direction: row;
    }
}

.news-left {
    flex: 2;
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    padding: 30px;
}

.news-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.news-item-hard {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--coal-gray-light);
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.news-item-hard:hover {
    transform: translateX(10px);
}

.news-item-hard:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.news-item-hard .news-date {
    width: 70px;
    height: 70px;
    background-color: var(--coal-red-light);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.news-item-hard .news-date .day {
    font-size: calc(0.4vw + 16px);
}

.news-item-hard .news-date .month {
    font-size: 14px;
    text-transform: uppercase;
}

.news-text .news-title {
    font-size: calc(0.3vw + 14px);
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--coal-gray);
    transition: color 0.3s ease;
}

.news-text .news-title:hover {
    color: var(--coal-red);
}

.news-text .news-desc {
    font-size: 14px;
    color: #94989c;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.news-aside {
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    padding: 25px;
}

.aside-title {
    font-size: calc(0.4vw + 14px);
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--coal-blue);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--coal-blue-light);
}

.aside-list {
    list-style: none;
    min-width: 0;
}

.aside-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--coal-gray-light);
}

.aside-list li:last-child {
    border-bottom: none;
}

.aside-list a {
    text-decoration: none;
    color: var(--coal-gray);
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.aside-list a:hover {
    color: var(--coal-red);
    transform: translateX(5px);
}

.section-title {
    font-size: calc(0.6vw + 20px);
    font-weight: 800;
    text-align: center;
    margin-bottom: calc(20px + .5vw);
    position: relative;
    color: var(--coal-gray);
}

.section-title-left {
    font-size: calc(0.6vw + 20px);
    font-weight: 800;
    margin-bottom: calc(20px + .5vw);
    position: relative;
    color: var(--coal-gray);
    text-align: left;
}

.section-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--coal-red), var(--coal-blue));
    margin: 15px auto 0;
}

.section-title-left::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--coal-red), var(--coal-blue));
    margin: 15px 0 0;
}



.business-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.business-card {
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    padding: 30px;
    transition: all 0.3s ease;
}

.business-card:hover {
    transform: translateY(-5px);
    border-color: var(--coal-red);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.business-card-icon {
    width: 50px;
    height: 50px;
    color: var(--coal-blue);
    margin-bottom: 20px;
}

.business-card .title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--coal-gray);
}

.card-desc {
    color: #797c83;
    margin-bottom: 20px;
}



.intro-wrapper {
    display: flex;
    align-items: center;
}




.intro-img {
    flex: 1;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-color: var(--coal-gray-mid);
}

.intro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.intro-img:hover img {
    transform: scale(1.03);
}

.intro-content {
    position: relative;
    z-index: 2;
    flex: 1.2;
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    padding: 40px;
    margin-left: -40px;
}

.company-section2 .intro-wrapper {
    gap: 40px;
}

.company-section2 .intro-content {
    margin-left: 0;
    padding: 0;
}

.intro-subtitle {
    font-size: calc(0.4vw + 14px);
    font-weight: 700;
    color: var(--coal-blue);
    margin-bottom: calc(0.4vw + 14px);
    position: relative;
    padding-left: 15px;
    line-height: 1;
}

.intro-subtitle::before {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    background-color: var(--coal-red);
    position: absolute;
    left: 0;
    top: 0;
}

.company-section2 .intro-subtitle {
    padding-left: 20px;
}

.company-section2 .intro-subtitle::before {
    border: 6px solid transparent;
    width: 0;
    height: 0;
    border-left-color: var(--coal-red);
    border-width: 6px 0 6px 12px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
}

.company-section2 .more {
    font-size: 14px;
    font-weight: 700;
    color: var(--coal-blue);
    position: relative;
    padding-left: 20px;
    line-height: 1;
    display: block;
}

.company-section2 .more::before {
    content: "";
    display: block;
    border: 6px solid transparent;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left-color: var(--coal-red);
    border-width: 6px 0 6px 12px;
    top: 50%;
    transform: translateY(-50%);
}

.intro-text {
    color: var(--coal-gray);
    margin-bottom: 20px;
    text-align: justify;
    font-size: 14px;
}

.intro-text:last-of-type {
    margin-bottom: 30px;
}

.intro-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.intro-feature {
    background-color: var(--coal-gray-light);
    padding: 8px 16px;
    border-left: 3px solid var(--coal-red);
    color: var(--coal-gray);
    font-weight: 500;
}

.company-section2 .intro-feature {
    border-left: 0;
}

@media (max-width: 992px) {
    .intro-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .company-section2 .intro-wrapper {
        gap: 20px;
    }

    .intro-content {
        margin-left: 0;
        padding: 20px;
    }

    .intro-feature {
        padding: 4px 12px;
        font-size: 14px;
    }
}


.gallery-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.gallery-list-big {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.gallery-item {
    background-color: #fff;
    border-color: var(--coal-gray-mid);
    overflow: hidden;
    transition: all 0.3s ease;
    min-width: 0;
}

.gallery-item:hover {
    transform: translateY(-5px);
    border-color: var(--coal-blue);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.gallery-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: block;
    position: relative;
}

.gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-img img {
    transform: scale(1.05);
}

.gallery-caption {
    padding: 18px 20px;
    border-top: 2px solid var(--coal-gray-light);
}

.gallery-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--coal-gray);
    margin-bottom: 8px;
    position: relative;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.gallery-desc {
    font-size: 0.95rem;
    color: #797c83;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.gallery-item:hover .gallery-title {
    color: var(--coal-blue);
}

@media (max-width: 992px) {

    .gallery-list,
    .gallery-list-big {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {

    .gallery-list,
    .gallery-list-big {
        grid-template-columns: 1fr;
    }
}

.business-title3 {
    text-align: center;
    margin-bottom: calc(0.6vw + 20px);
}

.business-title3 h2 {
    font-size: 36px;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
}

.business-title3 h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}

.business-title3 p {
    font-size: 16px;
    color: var(--color-desc);
    max-width: 600px;
    margin: 0 auto;
}

.business-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.business-card2 {
    background: #fff;
    padding: 35px 25px;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
    align-items: center;
}

.business-card2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.business-card2:hover::before {
    transform: scaleX(1);
}

.business-card2:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(18, 37, 92, 0.15);
}

.business-icon2 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.3s ease;
}

.business-card2:hover .business-icon2 {
    transform: scale(1.1) rotate(5deg);
}

.business-icon2 svg {
    width: 40px;
    height: 40px;
    color: #fff;
}

.business-card2 h3 {
    font-size: 22px;
    color: var(--color-title);
    font-weight: 600;
    margin-bottom: 15px;
}

.business-card2 p {
    color: var(--color-desc);
    font-size: 15px;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 20px;
}

.business-btn2 {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.business-btn2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 37, 92, 0.3);
}



@media (max-width: 1200px) {
    .business-grid2 {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }

    .business-card2 {
        padding: 30px 20px;
    }
}

@media (max-width: 768px) {
    .business-title3 h2 {
        font-size: 28px;
    }

    .business-grid2 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    .business-card2 {
        padding: 25px 18px;
    }

    .business-icon2 {
        width: 70px;
        height: 70px;
    }

    .business-icon2 svg {
        width: 35px;
        height: 35px;
    }


}

@media (max-width: 576px) {

    .business-title3 h2 {
        font-size: 24px;
    }

    .business-grid2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .business-card2 {
        padding: 20px 15px;
    }


}




.tab-more-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: calc(0.3vw + 20px);
}

.tab-more-box .tab-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tab-more-box .tab-box .tab-nav-item {
    padding: 12px 0;
    position: relative;
    cursor: pointer;
    font-size: calc(0.3vw + 14px);
    font-weight: 600;
    color: var(--color-title);
}

.tab-more-box .tab-box .tab-nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 0;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.tab-more-box .tab-box .tab-nav-item.active {
    color: var(--color-primary);
}

.tab-more-box .tab-box .tab-nav-item.active::after {
    transform: scaleX(1);
}

.tab-more-box .tab-box .tab-nav-item:hover::after {
    transform: scaleX(1);
}

.tab-more-box .tab-box .tab-nav-item:hover {
    color: var(--color-primary);
}

.tab-more-box .tab-more {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.tab-more-box .tab-more svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.tab-more-box .tab-more:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}

.block-title-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: calc(0.3vw + 20px);
}

.block-title-more .title {
    font-size: calc(0.3vw + 14px);
    font-weight: 600;
    padding: 12px 0;
    color: var(--color-title);
}

.block-title-more .more {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.block-title-more .more svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.block-title-more .more:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}


.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.grid-2>* {
    min-width: 0;
}

@media (max-width: 991.98px) {

    .news-sections--2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}



.news-item4 {
    overflow: hidden;
    transition: all 0.3s ease;
}



.news-item4 .news-title {
    padding-left: 16px;
    position: relative;
    margin-bottom: 12px;
}

.news-item4 .news-desc {
    padding-left: 16px;
    margin-bottom: 0;
}

.news-item4 .news-time {
    padding-left: 16px;
}

.news-item4 .news-title::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-width: 4px 0 4px 8px;
    border-left-color: var(--color-primary);
    transition: transform 0.4s ease;
}

.news-item4 .news-img-link {
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
    height: 200px;
}

.news-item4:hover {
    transform: translateY(-5px);
}

.news-item4:hover .news-title {
    color: var(--color-primary);
}


.card-title-line {
    padding: 0 0 18px 0;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    font-size: calc(0.4vw + 15px);
}

.card-title-line .title {
    line-height: 1;
}

.card-title-line .line {
    position: absolute;
    bottom: 0;
    left: 36px;
    width: 28px;
    height: 4px;
    border-left: 4px solid var(--primary-color);
    /* transform: skewX(-15deg); */
    border-right: 4px solid var(--primary-color);
}

.card-title-line .line::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    right: 4px;
    width: 12px;
    height: 4px;
    border-left: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
}

.card-title-line::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    left: 1px;
    width: 30px;
    height: 4px;
    background-color: var(--primary-color);
    /* transform: skewX(-15deg); */
}

.card-title-line::before {
    box-sizing: border-box;
    content: "";
    position: absolute;
    bottom: 0;
    left: 1px;
    width: 100%;
    height: 4px;
    background-color: #f0f0f0;
}

.card-title-line .more {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease;
}

.card-title-line .more:hover {
    color: var(--color-secondary);
    transform: translateX(5px);
}

.price-disclosure {
    margin-top: 14px;
    padding: 14px 20px 16px;
    background-color: #f1f3f7;
    color: #333;
}

.price-disclosure .price-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-disclosure .price-content b {
    font-size: 16px;
    font-weight: 700;
    color: var(--coal-red);
}



.no-banner-page {
    height: 82px;
}

@media (max-width: 1199.99px) {
    .no-banner-page {
        height: 0;
    }
}




.grid-2-2\/2\/1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.grid-2-2\/2\/1>* {
    min-width: 0;
}

.grid-2-2\/2\/1> :nth-child(5n) {
    grid-column: span 2;
}

@media (max-width: 991.99px) {
    .grid-2-2\/2\/1 {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .grid-2-2\/2\/1> :nth-child(5n) {
        grid-column: span 1;
    }
}

.coal-message-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
}


.coal-message-card .item-title {
    font-weight: 700;
    color: var(--coal-gray);
    padding: 20px;
}

.coal-message-card .item-img-box {
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    background-color: #f1f3f7;
    padding: 10px;
}

.coal-message-card .item-img-box img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.coal-message-card .num-card-box {
    display: flex;
    border-top: 1px solid #f0f0f0;
}

.num-card {
    font-size: 14px;
    color: var(--coal-gray);
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 1;
    padding: 16px 0;
}

.num-card {
    border-right: 1px solid #f0f0f0;
}

.num-card .num {
    font-size: 24px;
    font-weight: 700;
    color: var(--coal-red);
    margin: 0 4px;
}

.num-card-box .item-more {
    width: 140px;
    flex-shrink: 0;
    padding: 16px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.num-card-box .item-more::after {
    content: '\2192';
    padding-left: 4px;
}

.num-card-box .item-more:hover::after {
    transform: scaleX(1);
}

.num-card-box .item-more:hover {
    color: #fff;
    background-color: var(--primary-color);
}



.coal-message-card-box {
    display: flex;
    align-items: center;
}

.coal-message-card-box .coal-message-card {
    flex: 1;
    margin-right: -40px;
    position: relative;
    z-index: 2;
    background-color: #fff;
}

.coal-message-card-box .item-img-box {
    background-color: #f1f3f7;
    width: 50%;
    box-shadow: -12px 12px 0 rgb(239, 240, 242);
}

.coal-message-card .item-img-box img {
    max-height: 300px;
}

.coal-message-card-box .item-img-box img {
    width: 100%;
    display: block;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
    max-height: 300px;
}

@media screen and (max-width: 991.99px) {

    .coal-message-card-box {
        flex-direction: column;
    }

    .coal-message-card-box .coal-message-card {
        margin-right: 0;
        width: 100%;
        order: 2;
    }

    .coal-message-card-box .item-img-box {
        width: 100%;
        order: 1;
        max-height: 300px;
        box-shadow: none;
    }
}

@media screen and (max-width: 575.99px) {
    .num-card-box {
        flex-direction: column;
        background-color: #f1f3f7;
        gap: 1px;
    }

    .num-card-box .num-card {
        border-right: 0;
        background-color: #fff;
    }

    .num-card-box .item-more {
        background-color: #fff;
        width: 100%;
    }
}


.more-btn {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    padding-left: 14px;
    position: relative;
    transition: transform 0.4s ease;
}

.more-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-width: 4px 0 4px 8px;
    border-left-color: var(--coal-red);
}

.more-btn:hover {
    transform: translateX(5px);
    color: var(--coal-red);
}



.mine-base-info,
.mine-news {
    flex: 1;
    background: #fff;
    padding: 20px 25px;
    min-width: 0;
    width: 100%;
}

.box-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--coal-gray);
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--coal-blue-light);
}

.base-info-list,
.news-list {
    list-style: none;
}

.base-info-list li {
    color: var(--coal-gray-deep);
    font-size: 1.02rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--coal-gray-light);
}

.base-info-list li:last-child {
    border: 0;
}

.base-info-list li strong,
.base-info-list li .title {
    color: var(--coal-black);
    font-weight: 600;
}

.base-info-list li a {
    width: 100%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.base-info-list li a:hover {
    transform: translateX(5px);
}

.base-info-list li a:hover .title {
    color: var(--coal-red);
}

.base-info-list li .title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.base-info-list li .date {
    color: var(--coal-blue);
    font-weight: 600;
    display: inline-block;
    width: 85px;
    flex-shrink: 0;
}

.mine-data-board {
    background: #fff;
    margin-bottom: 25px;
}

.data-board-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--coal-gray);
    margin-bottom: 20px;
    text-align: center;
}

.data-card-group {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.data-card {
    flex: 1;
    min-width: 180px;
    background: #eff0f4;
    padding: 15px 10px;
    text-align: center;
}

.data-card .data-name {
    font-size: 1rem;
    color: var(--coal-gray);
    font-weight: 600;
    margin-bottom: 8px;
}

.data-card .data-num {
    font-size: 1.4rem;
    color: var(--coal-black);
    font-weight: 800;
    margin-bottom: 6px;
}

.data-card .data-trend.up {
    color: var(--coal-red);
    font-weight: 600;
    font-size: 0.9rem;
}

.data-card .data-trend.down {
    color: var(--coal-blue);
    font-weight: 600;
    font-size: 0.9rem;
}

.mine-safety-column {
    background: #fff;
    padding: 20px 25px;
}

.safety-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--coal-gray);
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--coal-red);
}

.safety-list {
    list-style: none;
    gap: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.safety-list li {
    color: var(--coal-gray-deep);
    font-size: 1.02rem;
    padding: 0;
    padding-left: 18px;
    position: relative;
    min-width: 0;
}

.safety-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--coal-red);
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.safety-list li strong {
    color: var(--coal-red);
}

@media screen and (max-width: 991.98px) {
    .safety-list {
        grid-template-columns: 1fr;
    }
}



.swiper-coal-pics .swiper-slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}



.coal-reserve .section-title {
    color: #fff;
}

.bg-light2 {
    background-color: #f5f7fa;
}


.coal-reserve {
    background-color: var(--coal-gray);
    color: #fff;
}



.reserve-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    transition: all 0.3s ease;
}

.reserve-card2 {
    background: rgba(0, 0, 0, 0.05);
    padding: 14px;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.reserve-card:hover {
    border-color: #e65100;
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

.reserve-card2:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

.reserve-card .number-box {
    margin-bottom: 10px;
}


.reserve-card .number-box span,
.reserve-card2 .number-box span {
    vertical-align: bottom;
}

.reserve-card .number {
    font-size: calc(0.6vw + 18px);
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(to right, var(--coal-red-light), #fff643);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-right: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.reserve-card2 .number {
    font-size: calc(0.6vw + 18px);
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-right: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.reserve-card .arrow {
    /* font-size: calc(0.6vw + 14px); */
}

.reserve-card .label,
.reserve-card2 .label {
    font-size: 16px;
    opacity: 0.9;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.reserve-desc {
    font-size: 0.9rem;
    opacity: 0.7;
}



.swiper-coal-images,
.swiper-coal-real {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.swiper-coal-images .swiper-slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.swiper-coal-real img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.swiper-coal-images .cover-text,
.swiper-coal-real .cover-text {
    position: absolute;
    top: 20px;
    left: 0;
    transform: translate(0, 0);
    font-size: calc(0.7vw + 16px);
    font-weight: 700;
    color: #fff;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0 4px 4px 0;
    z-index: 2;
}

@media screen and (max-width: 991.98px) {
    .swiper-coal-images .swiper-slide img {
        height: 300px;
    }
}

@media screen and (max-width: 768px) {
    .swiper-coal-images .swiper-slide img {
        height: 240px;
    }
}



.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--coal-blue-light);
    margin-bottom: 12px;
}

.card-header .title {
    font-size: calc(0.2vw + 15px);
    font-weight: 700;
    color: var(--coal-gray);
}

.card-header .more {
    font-size: 14px;
    transition: all 0.3s ease;
}

.card-header .more:hover {
    color: var(--coal-red);
    transform: translateX(5px);
}

.info-card,
.news-card {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-header2 {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--coal-blue-light);
    margin-bottom: 12px;
    position: relative;
}

.card-header2 .title {
    font-size: calc(0.2vw + 14px);
    font-weight: 700;
    color: var(--coal-gray);
}

.card-header2 .icon {
    width: 24px;
    height: 24px;
    display: block;
    color: var(--coal-red);
}

.card-header2 .more {
    transition: all 0.3s ease;
    position: absolute;
    top: 2px;
    right: 0;
}

.card-header2 .more:hover {
    color: var(--coal-red);
    transform: translateX(5px);
}

.section-title-more {
    position: relative;
}

.section-title-more .more {
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #888;
}

.section-title-more .more:hover {
    transform: translateX(5px);
    color: var(--coal-red);
}

.product-card {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.product-card .img-box {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
    background-color: #f1f3f7;
    display: block;
}

.product-card .img-box img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.product-card .img-box:hover img {
    transform: scale(1.03);
}

.product-card .info {
    padding: 20px;
}

.product-card .info .name {
    font-size: 16px;
    font-weight: 600;
    color: var(--coal-black);
    margin-bottom: 8px;
    display: block;
}

.product-card .info .specs {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

.product-card:hover .info .name {
    color: var(--coal-red);
}


.item-image-box {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
    background-color: #f1f3f7;
    display: block;
    transition: all 0.3s ease;
}

.item-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item-image-box:hover img {
    transform: scale(1.03);
}

.item-image-box:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-6px);
}

.notice-card {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s ease;
}

.notice-card .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--coal-black);
    margin-bottom: 14px;
    display: block;
    padding-bottom: 14px;
    position: relative;
}

.notice-card .title::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #e6eaf0;
    margin-top: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.notice-card .meta {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

.notice-card .meta span {
    margin-right: 12px;
}

.notice-card .link {
    display: flex;
    gap: 12px;
}

.notice-card:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-6px);
}

.important-news-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.important-news {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    gap: 24px;
}

.important-news .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--coal-black);
    margin-bottom: 14px;
    display: block;
    position: relative;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.important-news .line {
    width: 100%;
    height: 2px;
    background-color: #e6eaf0;
    margin: 12px 0;
}

.important-news .desc {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.important-news .time {
    display: block;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 12px;
}

.important-news .img-link {
    width: 300px;
    flex-shrink: 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    overflow: hidden;
}

.important-news .img-link img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.important-news .img-link:hover img {
    transform: scale(1.03);
}

.important-news:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-6px);
}

.important-news:hover .title {
    color: var(--coal-red);
}

@media screen and (max-width: 991.98px) {
    .important-news-box {
        gap: 16px;
    }

    .important-news {
        padding: 0;
        box-shadow: none;
        gap: 12px;
    }

    .important-news:hover {
        box-shadow: none;
    }

    .important-news .img-link {
        width: 100px;
    }

    .important-news .desc {
        display: none;
    }
}



.detail-video-box {
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f1f3f7;
    display: block;
    padding: 0;
    border-radius: 4px;
}

.detail-video-box video {
    aspect-ratio: 16 / 9;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}



.share-container {
    padding: 25px 0;
}

.share-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    height: 50px;
    width: 120px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}

.share-btn svg {
    margin-right: 4px;
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
}

.wechat-btn {
    background-color: #07c160;
    color: white;
}

.wechat-btn:hover {
    background-color: #06ad56;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(7, 193, 96, 0.2);
}

.weibo-btn {
    background-color: #e6162d;
    color: white;
}

.weibo-btn:hover {
    background-color: #cf1429;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(230, 22, 45, 0.2);
}

.qzone-btn {
    background-color: #f7b500;
    color: #333;
}

.qzone-btn:hover {
    background-color: #e6a800;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(247, 181, 0, 0.2);
}

.print-btn {
    background-color: #3498db;
    color: white;
}

.print-btn:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(52, 152, 219, 0.2);
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #95a5a6;
    font-weight: 500;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.separator::before {
    margin-right: 15px;
}

.separator::after {
    margin-left: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .share-buttons {
        justify-content: center;
    }

    .share-btn {
        padding: 0;
        font-size: 14px;
        width: 90px;
        height: 40px;
    }
}



/* 打印样式 */
@media print {

    .share-container,
    .separator,
    .print-btn {
        display: none !important;
    }

    body {
        background-color: white;
        padding: 0;
    }

    .container {
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    .content {
        border: none;
        padding: 0;
        background-color: white;
    }
}

/* 微信分享弹窗 */
.wechat-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
    margin-bottom: 15px;
    color: #333;
}

.qrcode-placeholder {
    width: 200px;
    height: 200px;
    background-color: #f5f5f5;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px dashed #ccc;
    color: #777;
}

.close-modal {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 10px;
}

.close-modal:hover {
    background-color: #2980b9;
}





.section-title-with-navs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media screen and (max-width: 991.98px) {
    .section-title-with-navs {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

.video-navs {
    display: flex;
    gap: 20px;
    /* border-bottom: 2px solid var(--coal-blue-light); */
}

.video-navs a {
    display: block;
    font-size: 16px;
    color: var(--coal-black);
    padding: 8px 0 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    transition: all 0.3s ease;
}

.video-navs a::after {
    content: '';
    display: block;
    width: 0;
    height: 10px;
    width: 10px;
    background-color: var(--coal-red);
    transition: width 0.3s ease;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 4px 4px 0 #d7dde3;
}

.video-navs a:hover {
    color: var(--coal-red);
    transform: translateY(-4px);
}

@media screen and (max-width: 767.98px) {
    .video-navs {
        flex-wrap: wrap;
        gap: 12px;
    }

    .video-navs a {
        font-size: 14px;
        padding: 4px 0 4px 14px;
    }

    .video-navs a::after {
        height: 8px;
        width: 8px;
        box-shadow: 4px 4px 0 #d7dde3;
    }
}



.files-item {
    padding: 12px 0;
    border-bottom: 1px solid #e6eaf0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.files-item .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex:1;
}
.files-item:hover .title {
    color: var(--coal-red);
}
.files-item .link{
    flex-shrink: 0;
}

.header-title-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}
/* ===== 产业板块 · 横向手风琴(方案A) 20260715 ===== */
.industry-acc-section .industry-acc{display:flex;gap:10px;height:430px}
.industry-acc .ia-panel{position:relative;flex:1;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;transition:flex .45s ease;text-decoration:none;display:block}
.industry-acc .ia-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(9,24,68,.86),rgba(9,24,68,.15) 70%)}
.industry-acc .ia-panel:first-child{flex:3.4}
.industry-acc:hover .ia-panel:first-child{flex:1}
.industry-acc:hover .ia-panel:hover{flex:3.4}
.industry-acc .ia-mini{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;color:#fff;font-size:20px;font-weight:700;writing-mode:vertical-rl;letter-spacing:5px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.industry-acc .ia-full{position:absolute;left:34px;right:34px;bottom:34px;z-index:2;color:#fff;opacity:0;transition:opacity .3s .12s}
.industry-acc .ia-panel:first-child .ia-full{opacity:1}
.industry-acc .ia-panel:first-child .ia-mini{display:none}
.industry-acc:hover .ia-panel:first-child .ia-full{opacity:0}
.industry-acc:hover .ia-panel:first-child .ia-mini{display:block}
.industry-acc:hover .ia-panel:hover .ia-full{opacity:1}
.industry-acc:hover .ia-panel:hover .ia-mini{display:none}
.industry-acc .ia-en{font-size:13px;letter-spacing:4px;color:#c9d3ec;margin-bottom:8px}
.industry-acc .ia-full h3{font-size:36px;font-weight:800;margin-bottom:14px;line-height:1.1;color:#fff}
.industry-acc .ia-line{width:46px;height:3px;background:var(--secondary);margin-bottom:14px}
.industry-acc .ia-full p{font-size:14px;color:#dfe4f0;margin-bottom:20px}
.industry-acc .ia-go{display:inline-flex;align-items:center;gap:8px;background:var(--secondary);color:#fff;padding:11px 26px;border-radius:4px;font-size:14px}
@media (max-width:768px){
  .industry-acc-section .industry-acc{flex-direction:column;height:auto}
  .industry-acc .ia-panel,.industry-acc:hover .ia-panel:first-child{flex:none!important;height:190px}
  .industry-acc .ia-mini,.industry-acc:hover .ia-panel:first-child .ia-mini{display:none!important}
  .industry-acc .ia-full,.industry-acc:hover .ia-panel:first-child .ia-full{opacity:1!important}
}

/* ===== 安全文化 · 斜切撞色编号(醒B) 20260715 ===== */
.culture-b-section .culture-b{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.culture-b .cb-card{position:relative;height:300px;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;display:block;text-decoration:none;transition:transform .25s}
.culture-b .cb-card:hover{transform:translateY(-5px)}
.culture-b .cb-num{position:absolute;top:6px;right:16px;font-size:110px;font-weight:900;line-height:1;color:rgba(255,255,255,.16);z-index:2}
.culture-b .cb-pan{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 22px 22px;color:#fff;clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.culture-b .cb-card.n .cb-pan{background:linear-gradient(120deg,#091844,rgba(18,37,92,.85))}
.culture-b .cb-card.r .cb-pan{background:linear-gradient(120deg,#8f1b15,rgba(181,41,34,.9))}
.culture-b .cb-en{font-size:12px;letter-spacing:3px;opacity:.85;margin-bottom:6px}
.culture-b .cb-pan h3{font-size:26px;font-weight:800;color:#fff}
.culture-b .cb-go{position:absolute;right:22px;bottom:22px;width:38px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;transition:.25s}
.culture-b .cb-card:hover .cb-go{background:#fff;color:#12255C;border-color:#fff}
@media (max-width:768px){.culture-b-section .culture-b{grid-template-columns:1fr}}

/* ==================== 督查动态 分类入口图标 · 方案三 红点描边（2026-07-15）==================== */
.news-nav-innovation .pill-icon{position:relative;background:#fff;border:2px solid #12255C;border-radius:10px;overflow:visible;transition:background .2s}
.news-nav-innovation .pill-icon::after{content:"";position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:#B52922;border:2px solid #fff}
.news-nav-innovation .pill-icon .sv3-ic{width:24px;height:24px;fill:none;stroke:#B52922;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.news-nav-innovation .pill-item:hover .pill-icon{background:#eef1fa}
/* 覆盖原有 hover 渐变遮罩，方案三保持白底不压色块 */
.news-nav-innovation .pill-item::before{display:none}
.news-nav-innovation .pill-item:hover .pill-content h3,.news-nav-innovation .pill-item:hover .pill-content p{color:inherit}
/* ==================== 方案三 结束 ==================== */

/* ==================== 督查动态 板块风格统一 · 配合方案三红点描边（2026-07-15）==================== */
/* 1) 两列日期券：浅蓝实色 → 白底蓝描边，呼应入口图标的描边风 */
.superv-sec .report-date{background:#fff;border:1.5px solid #12255C;color:#12255C;box-shadow:none;transition:background .2s}
.superv-sec .report-item:hover .report-date{background:#eef1fa}
/* 2) 面板标题(专项检查/安全生产月)前加小红点，呼应图标右上角红点 */
.superv-sec .widget-header h3{position:relative;padding-left:16px}
.superv-sec .widget-header h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#B52922}
/* 3) 特写卡 Tab 底部列表的日期同样走描边语言（如为浅蓝实色则统一） */
.superv-sec .news-list .item-list-title-date .date{color:#12255C}
/* ==================== 板块风格统一 结束 ==================== */

/* ==================== 公告通知/专项检查/安全生产月 列表重设计 · 标题左 时间右（2026-07-15）==================== */
.superv-sec .report-list{display:flex;flex-direction:column}
.superv-sec .report-item{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid #edeff3;border-radius:0;background:transparent;overflow:visible;transition:background .2s,transform .2s}
.superv-sec .report-item::after{display:none}
.superv-sec .report-item::before{content:"";order:0;flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#c9d2e0;transition:background .2s,transform .2s}
.superv-sec .report-item:hover::before{background:#B52922;transform:scale(1.25)}
.superv-sec .report-item:last-child{border-bottom:none}
.superv-sec .report-item:hover{background:#f6f8fc;transform:translateX(3px)}
/* 标题：左，占满，可截断，悬停变蓝 */
.superv-sec .report-item .title{order:1;flex:1;min-width:0;color:#333;font-size:14px;line-height:1.5;transition:color .2s}
.superv-sec .report-item:hover .title{color:#12255C}
/* 时间：右，低调等宽灰字，去掉原来的浅蓝券 */
.superv-sec .report-item .report-date{order:2;flex:0 0 auto;width:auto;height:auto;min-width:64px;text-align:right;background:none;border:none;box-shadow:none;color:#9aa0aa;font-size:12.5px;font-weight:500;font-family:"DIN Alternate","Bahnschrift",ui-monospace,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;padding:0}
.superv-sec .report-item:hover .report-date{color:#12255C}
/* ==================== 列表重设计 结束 ==================== */

/* ==================== 首页新闻焦点区 · 草稿A 红色焦点（2026-07-15）==================== */
.main-section-news .grid-2-3{align-items:stretch}
/* ---- 左轮播 ---- */
.main-section-news .swiper-news1{position:relative;height:100%;min-height:400px;border-radius:6px;overflow:hidden;box-shadow:0 6px 20px rgba(20,30,60,.10)}
.main-section-news .swiper-news1 .swiper-slide{position:relative;height:auto;min-height:400px;background:radial-gradient(60% 50% at 30% 25%,#5a5f66,transparent 60%),radial-gradient(50% 40% at 72% 60%,#4b5058,transparent 55%),linear-gradient(150deg,#2b2f36,#141619)}
.main-section-news .swiper-news1 .img_box{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0}
.main-section-news .swiper-news1 .img-cover{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.main-section-news .swiper-news1 .nf-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(18,8,8,.85) 0%,rgba(18,8,8,.12) 46%,transparent 74%),linear-gradient(120deg,rgba(143,27,21,.34),transparent 58%)}
.main-section-news .swiper-news1 .nf-badge{position:absolute;top:14px;left:14px;z-index:3;background:#B52922;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;padding:5px 12px;border-radius:3px;box-shadow:0 2px 8px rgba(143,27,21,.4)}
.main-section-news .swiper-news1 .cover-text-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 20px 42px;background:none;display:flex;flex-direction:column;gap:6px}
.main-section-news .swiper-news1 .nf-cap{color:#fff;font-size:18px;font-weight:700;line-height:1.45;text-shadow:0 1px 6px rgba(0,0,0,.55);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.main-section-news .swiper-news1 .nf-cap:hover{color:#ffd7d0}
.main-section-news .swiper-news1 .nf-cap-date{color:rgba(255,255,255,.82);font-size:12px;font-family:"DIN Alternate","Bahnschrift",ui-monospace,sans-serif}
/* 进度条式圆点 */
.main-section-news .swiper-news1 .swiper-pagination{left:20px;right:auto;bottom:18px;width:auto;text-align:left}
.main-section-news .swiper-news1 .swiper-pagination-bullet{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);opacity:1;margin:0 5px 0 0}
.main-section-news .swiper-news1 .swiper-pagination-bullet-active{background:#fff;width:30px}
/* 圆形箭头，hover 变红 */
.main-section-news .swiper-news1 .swiper-button-next,.main-section-news .swiper-news1 .swiper-button-prev{width:36px;height:36px;margin-top:-18px;background:rgba(0,0,0,.34);border-radius:50%;color:#fff;transition:background .2s}
.main-section-news .swiper-news1 .swiper-button-next:hover,.main-section-news .swiper-news1 .swiper-button-prev:hover{background:#B52922}
.main-section-news .swiper-news1 .swiper-button-next::after,.main-section-news .swiper-news1 .swiper-button-prev::after{font-size:15px;font-weight:800}
/* ---- 右 Tab 面板 ---- */
.main-section-news .tab-box{background:#fff;border:1px solid #eceef3;border-radius:6px;padding:22px 24px}
/* Tab 下划线改红 */
.main-section-news .tab-nav .tab-nav-item{color:#8a8f98;font-weight:700}
.main-section-news .tab-nav .tab-nav-item.active{color:#12255C}
.main-section-news .tab-nav .tab-nav-item::after{background-color:#B52922}
.main-section-news .tab-nav .tab-nav-item .tab-line{border-left-color:#B52922;border-right-color:#B52922}
.main-section-news .tab-nav .tab-nav-item .tab-line::after{border-left-color:#B52922;border-right-color:#B52922}
/* 头条：红色大日期块 */
.main-section-news .item-list-title-date2{align-items:flex-start;padding:20px 0 18px;border-bottom:1px dashed #e3e6ec}
.main-section-news .item-list-title-date2 .item-title{color:#222;transition:color .2s}
.main-section-news .item-list-title-date2:hover .item-title{color:#12255C}
.main-section-news .item-list-title-date2 .item-description{color:#8a8f98}
.main-section-news .item-date-box{flex:0 0 auto;width:80px;text-align:center;border-radius:6px;padding:10px 4px;background:linear-gradient(160deg,#c8443c,#B52922 60%,#8f1b15);color:#fff}
.main-section-news .item-date-box .item-day{color:#fff}
.main-section-news .item-date-box .item-year-month{color:#fff;opacity:.92}
.main-section-news .item-list-title-date2:hover .item-date-box{background:linear-gradient(160deg,#c8443c,#B52922 60%,#8f1b15);color:#fff}
/* 列表：前导点 + 标题左 + 时间右灰字 */
.main-section-news .item-list-title-date{display:flex;align-items:center;gap:12px;justify-content:flex-start;padding:12px 0}
.main-section-news .item-list-title-date::after{display:none}
.main-section-news .item-list-title-date::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#c9d2e0;transition:background .2s,transform .2s}
.main-section-news .item-list-title-date:hover{transform:translateX(3px)}
.main-section-news .item-list-title-date:hover::before{background:#B52922;transform:scale(1.25)}
.main-section-news .item-list-title-date .title{flex:1;min-width:0;max-width:none;color:#333;font-size:15px;transition:color .2s}
.main-section-news .item-list-title-date:hover .title{color:#B52922}
.main-section-news .item-list-title-date .date{flex:0 0 auto;width:auto;text-align:right;color:#9aa0aa;font-size:12.5px;font-family:"DIN Alternate","Bahnschrift",ui-monospace,sans-serif;font-variant-numeric:tabular-nums}
/* ==================== 新闻焦点区 草稿A 结束 ==================== */

/* ==================== 视频中心 · 草稿A v2 更高+右列滚动循环（2026-07-15）==================== */
.va-sec .va-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:22px;align-items:stretch}
.va-sec .va-grid>*{min-width:0}
/* 左：大焦点（加高加宽） */
.va-sec .va-feature{position:relative;height:468px;border-radius:8px;overflow:hidden;border:1px solid #eceef3;background:#0c0d10;cursor:pointer}
.va-sec .va-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0c0d10}
.va-sec .va-cover{position:absolute;inset:0;z-index:4}
.va-sec .va-ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,10,14,.9),rgba(9,10,14,.1) 50%,transparent 78%)}
.va-sec .va-tag{position:absolute;left:12px;top:12px;z-index:2;background:#B52922;color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px}
.va-sec .va-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(181,41,34,.92);display:grid;place-items:center;box-shadow:0 6px 16px rgba(143,27,21,.45);transition:transform .25s,background .25s;z-index:2}
.va-sec .va-play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.va-sec .va-play.sm{width:32px;height:32px}.va-sec .va-play.sm svg{width:12px;height:12px}
.va-sec .va-feature:hover .va-play{transform:translate(-50%,-50%) scale(1.1)}
.va-sec .va-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff}
.va-sec .va-cap h3{margin:0 0 6px;font-size:20px;font-weight:700;line-height:1.4}
.va-sec .va-cap h3 a{color:#fff;text-decoration:none}
.va-sec .va-cap h3 a:hover{color:#ffd7d0}
.va-sec .va-cap p{margin:0;font-size:13px;color:rgba(255,255,255,.8);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 右：可上下滚动 + 自动循环的播放列表 */
.va-sec .va-list{height:468px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;padding-right:8px;scrollbar-width:thin;scrollbar-color:#c9d2e0 transparent}
.va-sec .va-list::-webkit-scrollbar{width:6px}
.va-sec .va-list::-webkit-scrollbar-thumb{background:#c9d2e0;border-radius:3px}
.va-sec .va-list::-webkit-scrollbar-thumb:hover{background:#B52922}
.va-sec .va-list::-webkit-scrollbar-track{background:transparent}
.va-sec .va-item{flex:0 0 auto;display:grid;grid-template-columns:128px 1fr;gap:12px;padding:8px;border-radius:6px;cursor:pointer;align-items:center;text-decoration:none;transition:background .2s,box-shadow .2s}
.va-sec .va-item:hover{background:#fff;box-shadow:0 3px 10px rgba(20,30,60,.07)}
.va-sec .va-item.on{background:#eef1fa}
.va-sec .va-thumb{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:linear-gradient(135deg,#2b2f36,#141619)}
.va-sec .va-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.va-sec .va-item:hover .va-play{background:#B52922;transform:translate(-50%,-50%) scale(1.08)}
.va-sec .va-info h4{margin:0 0 5px;font-size:14px;font-weight:600;color:#222;line-height:1.4;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.va-sec .va-item:hover .va-info h4{color:#12255C}
.va-sec .va-info .meta{font-size:12px;color:#8a8f98;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:900px){.va-sec .va-grid{grid-template-columns:1fr}.va-sec .va-feature{height:230px}.va-sec .va-list{height:auto;max-height:400px}}
/* ==================== 视频中心 草稿A v2 结束 ==================== */

/* ==================== 视频中心 · 草稿A v2 更高+右列滚动循环（2026-07-15）==================== */
.va-sec .va-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:22px;align-items:stretch}
.va-sec .va-grid>*{min-width:0}
/* 左：大焦点（加高加宽） */
.va-sec .va-feature{position:relative;height:468px;border-radius:8px;overflow:hidden;border:1px solid #eceef3;background:#0c0d10;cursor:pointer}
.va-sec .va-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0c0d10}
.va-sec .va-cover{position:absolute;inset:0;z-index:4}
.va-sec .va-ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,10,14,.9),rgba(9,10,14,.1) 50%,transparent 78%)}
.va-sec .va-tag{position:absolute;left:12px;top:12px;z-index:2;background:#B52922;color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px}
.va-sec .va-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(181,41,34,.92);display:grid;place-items:center;box-shadow:0 6px 16px rgba(143,27,21,.45);transition:transform .25s,background .25s;z-index:2}
.va-sec .va-play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.va-sec .va-play.sm{width:32px;height:32px}.va-sec .va-play.sm svg{width:12px;height:12px}
.va-sec .va-feature:hover .va-play{transform:translate(-50%,-50%) scale(1.1)}
.va-sec .va-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff}
.va-sec .va-cap h3{margin:0 0 6px;font-size:20px;font-weight:700;line-height:1.4}
.va-sec .va-cap h3 a{color:#fff;text-decoration:none}
.va-sec .va-cap h3 a:hover{color:#ffd7d0}
.va-sec .va-cap p{margin:0;font-size:13px;color:rgba(255,255,255,.8);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 右：可上下滚动 + 自动循环的播放列表 */
.va-sec .va-list{align-self:start;max-height:468px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;padding-right:8px;scrollbar-width:thin;scrollbar-color:#c9d2e0 transparent}
.va-sec .va-list::-webkit-scrollbar{width:6px}
.va-sec .va-list::-webkit-scrollbar-thumb{background:#c9d2e0;border-radius:3px}
.va-sec .va-list::-webkit-scrollbar-thumb:hover{background:#B52922}
.va-sec .va-list::-webkit-scrollbar-track{background:transparent}
.va-sec .va-item{flex:0 0 auto;display:grid;grid-template-columns:128px 1fr;gap:12px;padding:8px;border-radius:6px;cursor:pointer;align-items:center;text-decoration:none;transition:background .2s,box-shadow .2s}
.va-sec .va-item:hover{background:#fff;box-shadow:0 3px 10px rgba(20,30,60,.07)}
.va-sec .va-item.on{background:#eef1fa}
.va-sec .va-thumb{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:linear-gradient(135deg,#2b2f36,#141619)}
.va-sec .va-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.va-sec .va-item:hover .va-play{background:#B52922;transform:translate(-50%,-50%) scale(1.08)}
.va-sec .va-info h4{margin:0 0 5px;font-size:14px;font-weight:600;color:#222;line-height:1.4;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.va-sec .va-item:hover .va-info h4{color:#12255C}
.va-sec .va-info .meta{font-size:12px;color:#8a8f98;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:900px){.va-sec .va-grid{grid-template-columns:1fr}.va-sec .va-feature{height:230px}.va-sec .va-list{height:auto;max-height:400px}}
/* ==================== 视频中心 草稿A v2 结束 ==================== */

/* ==================== 板块间距压缩（2026-07-15）==================== */
/* 原 .section 上下各64px(板块间叠加128px)+标题后 mt-48,整体缝隙过大 → 收紧约1/3 */
.section{padding:42px 0}
.mt-48{margin-top:30px}
.mt-64{margin-top:40px}
@media screen and (max-width:1280px){
  .section{padding:calc(1.2vw + 18px) 0}
  .mt-48{margin-top:calc(1vw + 14px)}
  .mt-64{margin-top:calc(1.2vw + 18px)}
}
/* ==================== 板块间距压缩 结束 ==================== */

/* ==================== 视频卡片日期戳v2 标题右侧（2026-07-15）==================== */
.video--item .video-name{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.video--item .video-name .vtitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video--item .video-name .vdate{flex:0 0 auto;color:#9aa0aa;font-size:12px;font-weight:400;font-family:"DIN Alternate","Bahnschrift",ui-monospace,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
/* ==================== 视频卡片日期戳v2 结束 ==================== */

/* ==================== 视频列表固定4列（2026-07-15）==================== */
.sidebar-content .video-list{grid-template-columns:repeat(4,1fr);gap:20px}
@media screen and (max-width:1280px){.sidebar-content .video-list{grid-template-columns:repeat(3,1fr)}}
@media screen and (max-width:900px){.sidebar-content .video-list{grid-template-columns:repeat(2,1fr)}}
@media screen and (max-width:560px){.sidebar-content .video-list{grid-template-columns:1fr}}
/* ==================== 视频列表固定4列 结束 ==================== */
/* ==================== 新闻中心/督查动态 对齐公告通知款式（2026-07-25）==================== */
/* 作用域 .superv-sec = 新闻中心 + 督查动态两个板块，与右侧 .sidebar-widget 保持一致 */

/* ① 列表条目：悬浮特效与 .report-item 一致 */
.superv-sec .news-list .item-list-title-date{padding:12px 6px;overflow:visible;transition:background .2s,transform .2s}
.superv-sec .news-list .item-list-title-date::after{display:none}
.superv-sec .news-list .item-list-title-date:hover{background:#f6f8fc;transform:translateX(3px)}
.superv-sec .news-list .item-list-title-date .title{flex:1;min-width:0;max-width:none;transition:color .2s}
.superv-sec .news-list .item-list-title-date:hover .title{color:#12255C}

/* ② 日期：静止灰色等宽数字，hover 变藏蓝——与 .report-item .report-date 同一套 */
.superv-sec .news-list .item-list-title-date .date{flex:0 0 auto;width:auto;min-width:64px;text-align:right;padding:0;color:#9aa0aa;font-size:12.5px;font-weight:500;font-family:"DIN Alternate","Bahnschrift",ui-monospace,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
.superv-sec .news-list .item-list-title-date:hover .date{color:#12255C}

/* ③ 页签条：改成 .widget-header 那种卡片标题栏款式
   padding-top 用 17px，使本卡横线与右侧公告通知卡的横线处于同一水平线
   （右卡 = sidebar-widget 24px 内边距 + widget-header 的 margin-top:-7px） */
.superv-sec .tab-nav-container{background:transparent;padding:17px 24px 0;gap:28px;border-bottom:2px solid var(--color-tertiary)}
.superv-sec .tab-nav-item2{padding:0 0 12px;gap:8px;font-size:18px;font-weight:500;color:#8a8f98;transition:color .2s}
.superv-sec .tab-nav-item2::after{display:none}
.superv-sec .tab-nav-item2:hover{color:var(--color-title)}
.superv-sec .tab-nav-item2.active{background:transparent;font-weight:600;color:var(--color-title)}
/* 选中页签前的红点，与 .superv-sec .widget-header h3::before 同尺寸同色 */
.superv-sec .tab-nav-item2.active::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#B52922}
/* 内容区上边距对齐右卡（widget-header 的 margin-bottom:20px） */
.superv-sec .tab-content2{padding:20px 24px 24px}
/* ==================== 对齐公告通知款式 结束 ==================== */

/* ==================== 视觉隐藏（供 SEO 用的 H1，屏幕阅读器可读、视觉不可见）2026-07-26 ==================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ==================== 视觉隐藏 结束 ==================== */

/* ==================== 视频中心：无封面时用视频首帧当缩略图（2026-07-26）==================== */
.va-sec .va-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#141619}

/* ==================== 组件：更多 / 进入栏目（全站共用，2026-07-26 重新设计）====================
   设计要点
   1) 默认低饱和灰 + 细边胶囊：首页有 16 个"更多"，原来全是红字，视觉过吵，
      且与红色标题、红点抢注意力。改为安静的灰，hover 才上主色。
   2) 箭头改用 CSS 边框画的 chevron，不再用"→"字形——字形随字体变化，
      粗细/基线不一致，是原来看着毛糙的主因。分矿页模板里写死的"→"已一并去掉。
   3) hover 整块填 --color-primary 深蓝 + 箭头右移 2px，点击目标明确。
   4) 三处上下文（板块大标题 / 标签条 / 侧栏卡片标题栏）只调对齐，外观完全一致。
   ============================================================================= */
.more-link{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;box-sizing:border-box;border:1px solid #e2e6ee;border-radius:999px;background:#fff;color:#7b838f;font-size:12.5px;font-weight:500;letter-spacing:.4px;line-height:1;text-decoration:none;white-space:nowrap;transition:color .22s ease,border-color .22s ease,background-color .22s ease}
.more-link::after{content:"";flex:0 0 auto;width:5px;height:5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .22s ease}
.more-link:hover{color:#fff;border-color:var(--color-primary);background:var(--color-primary)}
.more-link:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.more-link:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}

/* --- 上下文① 板块大标题右下角（标题块 = 16px英文 + 6px间距 + 24px中文）--- */
.section-title-en-line .section-more{position:absolute;right:0;bottom:-1px}

/* --- 上下文② 标签条：与标签文字视觉居中。标签行高 18px，胶囊 28px → 上移 (28-18)/2 = 5px --- */
.tab-nav-container .tab-more,.tab-nav .tab-more{display:none}
.tab-nav-container .tab-nav-item.active+.tab-more,.tab-nav .tab-nav-item.active+.tab-more{display:inline-flex;order:99;margin-left:auto;align-self:flex-start}
.superv-sec .tab-nav-container .tab-nav-item.active+.tab-more{margin-top:-5px}
/* 头条右侧标签行高 20px → 上移 (28-20)/2 = 4px */
.main-section-news .tab-nav .tab-nav-item.active+.tab-more{margin-top:-4px}

/* --- 上下文③ 侧栏卡片标题栏：.widget-header 已是 align-items:center，无需额外处理 --- */

/* --- 窄屏：缩一号，避免与标题挤在一起 --- */
@media (max-width:767px){
.more-link{height:26px;padding:0 9px;font-size:12px;gap:6px}
.superv-sec .tab-nav-container .tab-nav-item.active+.tab-more{margin-top:-4px}
}/* ==================== 分矿板块 · 手机横向滑动（方案 C-1，2026-07-27）====================
   桌面端横向手风琴完全不动，只改 max-width:768px 内的规则。
   顺带修复：原 CSS 用了 var(--secondary)，站点从未定义该令牌（只有 --secondary-color /
   --color-secondary），导致红色分隔线与「进入专栏」按钮底色静默失效——这两条对桌面端同样生效。
   ========================================================================================= */
.industry-acc .ia-line{background:var(--color-secondary)}
.industry-acc .ia-go{background:var(--color-secondary)}
.industry-acc-section .ia-dots{display:none}

@media (max-width:768px){
  /* 轨道：负边距抵消 .container 的 14px 内边距，卡片贴边滚动并露出下一张 */
  .industry-acc-section .industry-acc{
    display:flex;flex-direction:row;height:auto;gap:10px;
    margin:0 -14px;padding:0 14px 2px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .industry-acc-section .industry-acc::-webkit-scrollbar{display:none}

  /* 卡片 212px：375px 视口下第二张可露约 120px */
  .industry-acc .ia-panel,
  .industry-acc:hover .ia-panel:first-child{
    flex:0 0 212px!important;height:auto!important;
    scroll-snap-align:start;
    background-color:#fff;background-size:100% 118px;
    background-repeat:no-repeat;background-position:top center;
    border:1px solid #e7eaf1;border-radius:7px;overflow:hidden;
    padding-top:118px}
  .industry-acc .ia-panel::after{display:none}
  .industry-acc .ia-mini,
  .industry-acc:hover .ia-panel:first-child .ia-mini{display:none!important}

  /* 文字区改为白底常驻，position:relative 保留 z-index 生效 */
  .industry-acc .ia-full,
  .industry-acc:hover .ia-panel:first-child .ia-full,
  .industry-acc:hover .ia-panel:hover .ia-full{
    position:relative;z-index:2;opacity:1!important;
    left:auto;right:auto;bottom:auto;
    padding:10px 11px 12px}
  .industry-acc .ia-en{font-size:9px;letter-spacing:1.2px;color:#9aa3b4;margin-bottom:4px}
  .industry-acc .ia-full h3{font-size:15px;font-weight:700;color:var(--color-primary);
    line-height:1.25;margin-bottom:7px}
  .industry-acc .ia-line{width:24px;height:2px;margin-bottom:7px}
  .industry-acc .ia-full p{font-size:11.5px;line-height:1.5;color:#5c6472;margin-bottom:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .industry-acc .ia-go{display:none}

  /* 进度点 + 总数 */
  .industry-acc-section .ia-dots{
    display:flex;align-items:center;justify-content:center;gap:5px;margin-top:12px}
  .industry-acc-section .ia-dots i{width:5px;height:5px;border-radius:50%;background:#d6dae4;
    display:block;transition:width .2s,background .2s}
  .industry-acc-section .ia-dots i.on{width:15px;border-radius:3px;background:var(--color-secondary)}
  .industry-acc-section .ia-dots span{font-size:10.5px;color:#9aa3b4;margin-left:6px;
    font-variant-numeric:tabular-nums}
}/* ==================== 安全文化 · 手机 Bento 便当格（2026-07-27）====================
   现状问题：改版时只改了列数、没改卡片高度，手机上变成单列 6 张 300px = 1900px。
   本块只作用于 max-width:768px；桌面端 3 列 × 300px 的规则完全不动。
   主格与竖高格用 :nth-child 选中，模板一行未改。
   骨架：2 列 × 78px 行，dense 补位
     ┌───────┐  1 号 2列×2行 主格
     │   1   │  2 号 1列×2行 竖高
     ├───┬───┤  3~6 号 1×1
     │ 2 │ 3 │  合计 5 行：5×78 + 4×8 = 422px
     │   ├───┤
     │   │ 4 │
     ├───┼───┤
     │ 5 │ 6 │
     └───┴───┘
   ================================================================================= */
@media (max-width:768px){
  .culture-b-section .culture-b{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    grid-auto-rows:78px;grid-auto-flow:dense}
  .culture-b .cb-card:nth-child(1){grid-column:span 2;grid-row:span 2}
  .culture-b .cb-card:nth-child(2){grid-row:span 2}

  .culture-b .cb-card{height:auto;border-radius:10px}
  .culture-b .cb-card:hover{transform:none}

  /* 桌面是斜切的局部面板；手机改成整格渐变遮罩，同时兼作文字容器 */
  .culture-b .cb-pan{
    position:absolute;inset:0;clip-path:none;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:11px 12px}
  .culture-b .cb-card.n .cb-pan{
    background:linear-gradient(180deg,rgba(9,24,68,.06) 34%,rgba(9,24,68,.92))}
  .culture-b .cb-card.r .cb-pan{
    background:linear-gradient(180deg,rgba(143,27,21,.06) 34%,rgba(143,27,21,.92))}

  /* 遮罩铺满后编号会被盖住，抬到遮罩之上 */
  .culture-b .cb-num{top:6px;right:11px;font-size:40px;z-index:4}
  .culture-b .cb-card:nth-child(1) .cb-num{font-size:64px;right:14px}

  .culture-b .cb-en{font-size:7.5px;letter-spacing:1.5px;margin-bottom:3px}
  .culture-b .cb-pan h3{font-size:13.5px;line-height:1.14}
  .culture-b .cb-card:nth-child(1) .cb-en{font-size:9px;letter-spacing:2.4px}
  .culture-b .cb-card:nth-child(1) .cb-pan h3{font-size:21px}
  .culture-b .cb-card:nth-child(2) .cb-pan h3{font-size:15px}

  /* 38px 的圆形箭头在小格里过大，手机隐藏 */
  .culture-b .cb-go{display:none}
}