:root,
:host {
  --tblr-blue: #2572CA;
  --tblr-primary: #2572CA;
  --tblr-font-sans-serif: -apple-system, BlinkMacSystemFont, Arial, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  margin: 0;
}
body{background-color: var(--tblr-white);}
a:hover{text-decoration: none;}
.border-solid {--tblr-border-style: solid;}
.border-dashed {--tblr-border-style: dashed;}
.border-dotted {--tblr-border-style:dotted}
.w-60px{width: 60px;}
.h-60px{height: 60px;}
.w-100px{width: 100px;}
.h-100px{height: 100px;}
.w-120px{width: 120px;}
.h-120px{height: 120px;}
.w-150px{width: 150px;}
.h-150px{height: 150px;}
.w-200px{width: 200px;}
.h-200px{height: 200px;}
.w-300px{width: 300px;}
.h-300px{height: 300px;}
.w-320px{width: 320px;}
.h-500px{height: 500px;}
.mh-500px{max-height: 500px;overflow-y: auto;}
.mw-500px{max-width: 500px;}



/*滚动条样式*/
.box::-webkit-scrollbar {width: 6px;height: 6px;}
.box::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 3px;}
.box::-webkit-scrollbar-thumb {background: #bfbfbf;border-radius: 3px;}
.box::-webkit-scrollbar-thumb:hover {background: #999;}
.box {scrollbar-width: thin;scrollbar-color: #bfbfbf #f1f1f1;}

/* 自定义导航栏 */
.navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.pc-navbar {
    --tblr-navbar-padding-x: 0;
    --tblr-navbar-padding-y: 0;
    --tblr-navbar-color: var(--tblr-white);
    --tblr-navbar-hover-color: var(--tblr-dark);
    --tblr-navbar-active-color: var(--tblr-dark);
    --tblr-navbar-bg:transparent;
    --tblr-border-color: transparent;
    --tblr-border-width: 0;
    min-height: auto;
    background-image: url(images/navbar-bg.jpg);
    background-repeat: repeat-x;
    position: relative;
    z-index: 1060; /* 确保导航栏本身也处于较高层级，但要低于菜单以防遮挡菜单内容 */
}
.pc-navbar .navbar-nav {
    --tblr-nav-link-padding-x: 0;
    --tblr-nav-link-padding-y: 0;
}
.pc-navbar .nav-item{
    flex-direction:row;
}
.pc-navbar .nav-link {
    --tblr-nav-link-font-size: 1rem;
    --tblr-nav-link-font-weight: 500;
    --tblr-border-radius:0;
    border-bottom:8px solid transparent;
}
.pc-navbar .nav-item:hover .nav-link,
.pc-navbar .nav-link.active,
.pc-navbar .nav-link:hover {
    background-color: #ff9934;
    border-color: #e18427;
    color: var(--tblr-dark);
}

/*用户中心*/
.navbar-user .nav-item:hover .nav-link,
.navbar-user .nav-link.active,
.navbar-user .nav-link:hover,
.navbar-user .nav-link{
    background-color: rgba(var(--tblr-dark-rgb), 0.2);
    border-color: rgba(var(--tblr-dark-rgb), 0.05);
    color: var(--tblr-white);
}

/* 移动端菜单 */
.mobile-menu .nav-link.active,
.mobile-menu .nav-link:hover{
    background-color: color-mix(in srgb,var(--tblr-muted-lt) calc(var(--tblr-bg-opacity,1) * 100%),transparent)!important;
}



/* 核心：实现 100% 宽度的下拉 */
.dropdown-menu-custom{
    background-color: #ffffff;
    position: absolute !important; /* 使用绝对定位脱离文档流 */
    top: 100%; /* 刚好紧贴在导航栏下方 */
    left: 0;
    right: 0 !important;
    width: 100% !important; /* 强制全屏宽度 */
    z-index: 1050; /* 必须高于导航栏的 z-index */
    border-radius: 0;
    margin-top: 0;
    width: 100%;
}
.header-banner{
    margin-top: 140px;
}
/*侧边栏*/
.sidebar{
    top: 150px;
    width: 320px;
}


/*面包屑*/
.breadcrumb {
    --tblr-breadcrumb-font-size: 1rem;
    --tblr-breadcrumb-divider-color: var(--tblr-white);
    --tblr-breadcrumb-item-active-color: var(--tblr-white);
    --tblr-breadcrumb-link-color: var(--tblr-white);
}
.breadcrumb a:hover{
    color: var(--tblr-white);
}

/* CSB 卡片 */
.card-csb {
    --tblr-card-spacer-y: 1rem;
    --tblr-card-spacer-x: 0;
    --tblr-card-title-spacer-y: 0;
    --tblr-card-title-color: var(--tblr-white);
    --tblr-card-border-width: 0;
    --tblr-card-border-color: transparent;
    --tblr-card-border-radius: 0;
    --tblr-card-inner-border-radius: 0;
    --tblr-card-cap-padding-y: 0;
    --tblr-card-cap-padding-x: 0;
    --tblr-card-cap-bg: transparent;
    --tblr-card-cap-color: var(--tblr-white);
    --tblr-card-bg: var(--tblr-white);
    --tblr-card-box-shadow: none;
}
.card-csb .card-header {
    border-bottom: 1px solid var(--tblr-white);
    color: var(--tblr-white);
}
.card-csb .card-body {
    border-top: 3px solid var(--tblr-primary);
}
.card-csb .card-icon {
    background-color: var(--tblr-primary);
    background-image: url("images/card-csb.jpg");
    background-repeat: no-repeat;
    background-position: center left;
    width: 55px;
}
.card-csb .card-title {
    border-top-right-radius: 20px;
    width: 160px;
    padding: 6px;
}

/*侧边栏联系方式 p 样式*/
.sidebar-contact p{
    margin: 0;
    padding: 0;
}
/* 侧边栏菜单卡片 */
.card-menu {
    --tblr-card-spacer-y: 0.5rem;
    --tblr-card-spacer-x: 0;
    --tblr-card-title-spacer-y: 0;
    --tblr-card-title-color: var(--tblr-white);
    --tblr-card-border-width: 0;
    --tblr-card-border-color: transparent;
    --tblr-card-border-radius: 0;
    --tblr-card-inner-border-radius: 0;
    --tblr-card-cap-padding-y: 0;
    --tblr-card-cap-padding-x: 0;
    --tblr-card-cap-bg: var(--tblr-primary);
    --tblr-card-cap-color: var(--tblr-white);
    --tblr-card-bg: transparent;
}
.card-menu .card-title{
    color: var(--tblr-white);
}
.card-menu .card-header{
    background: var(--tblr-primary);
}
.card-menu .card-title:hover {
    color: var(--tblr-card-title-color);
}
.card-menu .card-icon {
    background-position: center left;
    background-repeat: no-repeat;
}
.icon-fin {
    background-image: url("images/fin.jpg");
    height: 30px;
    width: 53px;
}
.icon-news {
    background-image: url("images/news.jpg");
    height: 30px;
    width: 53px;
}
.icon-service {
    background-image: url("images/service.jpg");
    height: 30px;
    width: 47px;
}
.icon-fs {
    background-image: url("images/fs.jpg");
    height: 30px;
    width: 44px;
}
.card-menu .list-group {
    --tblr-list-group-color: var(--tblr-secondary-color);
    --tblr-list-group-bg: transparent;
    --tblr-list-group-border-color: transparent;
    --tblr-list-group-border-width: 0;
    --tblr-list-group-border-radius: 0;
    --tblr-list-group-item-padding-x: 1rem;
    --tblr-list-group-item-padding-y: 0.25rem;
    --tblr-list-group-action-color: var(--tblr-secondary);
    --tblr-list-group-action-hover-color: var(--tblr-primary);
    --tblr-list-group-action-hover-bg: transparent;
}

/* 首页案例 */
.case-item {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--tblr-gray-300);
    font-weight: bold;
}
.case-item i {
    color: var(--tblr-warning);
}
.case-item i:before{
    margin-left: 1rem;
}
.case-item:hover,
.case-item:hover i {
    background-color: var(--tblr-warning);
    color: var(--tblr-white);
}
.case-item.active,
.case-item.active i {
    background-color: var(--tblr-dark);
    color: var(--tblr-white);
}

/*六边形图标*/
.icon-hexagons {
    display: inline-block;
    background-image: url("images/blue_hexagons.png");
    background-repeat: no-repeat;
    background-position: -1px left;
    width: 26px;
    height: 53px;
}

/** tabs 标签 */
.nav-tabs-primary {
    --tblr-nav-tabs-border-width: calc(var(--tblr-border-width) * 2);
    --tblr-nav-tabs-border-color: var(--tblr-primary);
    --tblr-nav-tabs-border-radius: var(--tblr-border-radius);
    --tblr-nav-link-color: var(--tblr-primary);
    --tblr-nav-link-font-size: 1rem;
    --tblr-nav-link-bg: var(--tblr-primary-lt);
    --tblr-nav-tabs-link-hover-border-color: var(--tblr-primary) var(--tblr-primary) var(--tblr-primary);
    --tblr-nav-tabs-link-active-color: var(--tblr-white);
    --tblr-nav-tabs-link-active-bg: var(--tblr-primary);
    --tblr-nav-tabs-link-active-border-color: var(--tblr-primary) var(--tblr-primary) var(--tblr-primary);
    border-bottom: var(--tblr-nav-tabs-border-width) solid var(--tblr-nav-tabs-border-color);
    width: 100%;
}
.nav-tabs-primary .nav-link{
    background-color: var(--tblr-nav-link-bg);
    border-bottom: var(--tblr-nav-tabs-border-width) solid var(--tblr-nav-tabs-link-active-border-color);
}
.nav-tabs-primary .nav-link:focus,
.nav-tabs-primary .nav-link:hover {
    background-color: var(--tblr-primary);
    color: var(--tblr-white);
}

/** 新闻标签 */
.nav-tabs-warning{
    --tblr-nav-link-color: var(--tblr-white);
    --tblr-nav-link-hover-color: var(--tblr-dark);

    --tblr-nav-tabs-border-width: 0;
    --tblr-nav-tabs-border-color: var(--tblr-transparent);
    --tblr-nav-tabs-border-radius: var(--tblr-border-radius);
    --tblr-nav-tabs-link-active-color: var(--tblr-black);
    --tblr-nav-tabs-link-active-bg: var(--tblr-white);
}
.nav-tabs-warning .nav-link{
    background-color: var(--tblr-warning);
}
.nav-tabs-warning .nav-link.active:hover{
    background-color: var(--tblr-white);
    color: var(--tblr-black);
}
.nav-tabs-warning .nav-link:focus,
.nav-tabs-warning .nav-link:hover {
    background-color: var(--tblr-warning);
    color: var(--tblr-black);
}

/*产品列表*/
.article-content table{
    margin-bottom: 0.25rem;
    max-width: 100%;
}
.article-content table>:not(caption)>*>*{
    padding: 0.5rem 0.25rem;
}
p{
    margin-bottom: 0.25rem;
}
p:last-child{
    margin-bottom: 0;
}
/*发展历史*/
.history .timeline{
    --tblr-timeline-icon-size:5rem;
    --tblr-page-padding:2rem;
}
.history .timeline-event-icon{
    font-family: Arial Narrow;
    height: 2.5rem;
    font-size: 2rem;
}
.history .timeline-event::before{
    top: 2.5rem;
}

/*分页*/
.pagination{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}
.pagination li span,
.pagination li a{
    display: block;
    background-color: rgba(var(--tblr-primary-rgb), 1);
    color: var(--tblr-white);
    margin: 0 0.15rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
}
.pagination li.disabled span{
    background-color: var(--tblr-gray-300);
}
.pagination li.active span{
    background-color: rgba(var(--tblr-danger-rgb), 0.8);
}
.pagination li:hover a{
    background-color: rgba(var(--tblr-primary-rgb), 0.8);
}

/*动画效果*/
.animate-up {
    transition: all 0.3s ease;
    transform: translateY(0);
}
.animate-up:hover {
    transform: translateY(-6px);
}


/** 页面布局样式 */
.row-cols-6 > *{flex: 0 0 auto;width: calc(100%/6);}
.row-cols-7 > *{flex: 0 0 auto;width: calc(100%/7);}
.row-cols-8 > *{flex: 0 0 auto;width: calc(100%/8);}
.row-cols-9 > *{flex: 0 0 auto;width: calc(100%/9);}
.row-cols-10 > *{flex: 0 0 auto;width: calc(100%/10);}

@media (min-width: 768px) {
    .row-cols-md-6 > *{flex: 0 0 auto;width: calc(100%/6);}
    .row-cols-md-7 > *{flex: 0 0 auto;width: calc(100%/7);}
    .row-cols-md-8 > *{flex: 0 0 auto;width: calc(100%/8);}
    .row-cols-md-9 > *{flex: 0 0 auto;width: calc(100%/9);}
    .row-cols-md-10 > *{flex: 0 0 auto;width: calc(100%/10);}

    .pc-navbar .navbar-nav .nav-link {
        --tblr-navbar-nav-link-padding-x: 0.8rem;
    }
    .dropdown:hover .dropdown-menu-custom {
        display: block;
        margin-top: 0; /* 去除间隙 */
    }
}
/*屏幕 ≥ 992px（lg 大屏）*/
@media (min-width: 992px) {
    .pc-navbar .navbar-nav .nav-link {
        --tblr-navbar-nav-link-padding-x: 0.8rem;
    }
    .dropdown:hover .dropdown-menu-custom {
        display: block;
        margin-top: 0; /* 去除间隙 */
    }
    .sidebar{
        width: 220px;
    }
    .row-cols-lg-6 > *{flex: 0 0 auto;width: calc(100%/6);}
    .row-cols-lg-7 > *{flex: 0 0 auto;width: calc(100%/7);}
    .row-cols-lg-8 > *{flex: 0 0 auto;width: calc(100%/8);}
    .row-cols-lg-9 > *{flex: 0 0 auto;width: calc(100%/9);}
    .row-cols-lg-10 > *{flex: 0 0 auto;width: calc(100%/10);}
}
/*屏幕 ≥ 1200px（xl 大屏）*/
@media (min-width: 1200px) {
    .pc-navbar .navbar-nav .nav-link {
        --tblr-navbar-nav-link-padding-x: 1.5rem;
    }
    .sidebar{
        width: 320px;
    }
    .row-cols-xl-6 > *{flex: 0 0 auto;width: calc(100%/6);}
    .row-cols-xl-7 > *{flex: 0 0 auto;width: calc(100%/7);}
    .row-cols-xl-8 > *{flex: 0 0 auto;width: calc(100%/8);}
    .row-cols-xl-9 > *{flex: 0 0 auto;width: calc(100%/9);}
    .row-cols-xl-10 > *{flex: 0 0 auto;width: calc(100%/10);}
}
@media (min-width: 1400px) {
    .container {
        max-width: 1600px;
    }
    .pc-navbar .navbar-nav .nav-link {
        --tblr-navbar-nav-link-padding-x: 3rem;
    }
    .row-cols-xxl-6 > *{flex: 0 0 auto;width: calc(100%/6);}
    .row-cols-xxl-7 > *{flex: 0 0 auto;width: calc(100%/7);}
    .row-cols-xxl-8 > *{flex: 0 0 auto;width: calc(100%/8);}
    .row-cols-xxl-9 > *{flex: 0 0 auto;width: calc(100%/9);}
    .row-cols-xxl-10 > *{flex: 0 0 auto;width: calc(100%/10);}
}
@media (min-width: 1700px) {
    .container {
        max-width: 1800px;
    }
}



/*屏幕 ≤ 768px（md 大屏）*/
@media (max-width: 768px) {
    .header-banner{
        margin-top: 76px;
    }
    .sidebar{
        width: 100%;
    }
    /** 导航栏 */
    .pc-navbar {
        --tblr-navbar-padding-x: 0.25rem;
        --tblr-navbar-padding-y: 0;
        --tblr-navbar-color: var(--tblr-white);
        --tblr-navbar-hover-color: rgba(var(--tblr-emphasis-color-rgb), 0.8);
        --tblr-navbar-active-color: var(--tblr-dark);
        --tblr-navbar-nav-link-padding-x: 0.5rem;

        background-image: none;
        background-repeat: repeat-x;
        background-color: var(--tblr-primary);
    }
    .pc-navbar .navbar-nav {
        --tblr-navbar-nav-link-padding-x: 0.5rem;
        padding: 1rem 0;
    }
    .pc-navbar .navbar-nav .nav-link {
        border-bottom-width: 0;
    }
}
/*屏幕 ≥ 1400px（xxl 大屏）*/
@media (max-width: 1399.98px) {
    .container {
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}