@charset "UTF-8";
@import url("https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap");
 
html,body{ 
    color:#333;
    max-width: 100%; 
    font-family:'MiSans VF','Microsoft YaHei','Arial'!important; 
}
/**********重置一些原样式**************/
div,a,span,strong{
     font-size: 1.4rem;
}
.fixed-top{
    z-index: 999;
}
.pages,
.content {
    min-height: 20px;
}
input:focus,
textarea:focus,
button:focus {
    outline: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
}
table {
    width: 100% !important;
    background: #fff;
}
td {
    border: 1px solid #ddd;
    padding: 0.75rem 1.5rem;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 3rem;
}
tr:nth-child(2n) {
    background: #f8f8f8;
}
tr:hover {
    cursor: pointer;
}
table .firstRow{
     background: linear-gradient(to right, #1866ed, #4766f6,  #7066fe);
     color:#fff;
}
.clear {
    clear: both;
}
.col-20 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
.nav-pills .nav-link {
    border: none;
}
.nav-link {
    padding: 1rem 1rem;
}

.nav-tabs .nav-link {
    margin-right: 2px;
}



/* 1. 初始状态：让下拉菜单处于“隐身”但逻辑上“存在”的状态 */
.navbar-nav .dropdown-menu {
    display: block;
    /* 必须强制设为 block，否则 transition 不起作用 */
    visibility: hidden;
    /* 使用 visibility 隐藏 */
    opacity: 0;
    border: none;
    background: #ddd;
    transform: translateY(20px);
    /* 初始位置稍微下移，实现向上滑入的效果 */
    transition: all 0.4s ease-in-out;
    pointer-events: none;
    /* 隐藏时禁止鼠标交互 */
    position: absolute;
    padding: 1rem
}
.navbar-nav .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -5px;
    /* 向上露出一半 */
    left: 25px;
    width: 10px;
    height: 10px;
    background: #ddd;
    /* 与背景色一致 */
    transform: rotate(45deg);
    /* 旋转 45 度变成菱形 */
    z-index: -1;
    /* 放在菜单背景后面，防止遮挡内容 */
    /* 如果菜单有阴影，可以给它也加一点 */
    box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.05);
}

/* 2. 激活状态：当 Bootstrap 给菜单加上 .show 类时 */
.navbar-nav .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    /* 回到原位 */
    pointer-events: auto;
    /* 恢复鼠标交互 */
}

/* 1. 鼠标悬停时的背景（Hover）和 获得焦点时（Focus） */
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #f8f9fa;
    /* 浅灰色背景 */
    color: #333;
    /* 文字颜色 */
}

/* 2. 点击瞬间或处于激活状态时（Active）- 即你提到的蓝色背景 */
.navbar-nav .dropdown-menu .dropdown-item:active,
.navbar-nav .dropdown-menu .dropdown-item.active {
    background-color: #ddd;
    /* 自定义你的背景色，比如 #ddd */
    color: #000;
    /* 点击后的文字颜色 */
}


/* 修改默认的箭头 */
.dropdown-toggle::after {
    /* 彻底重置原生样式 */
    border: none !important;
    margin-left: 0.5em;
    vertical-align: middle;
    content: "";

    /* 注入 SVG 图像 */
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;

    transition: transform 0.3s;
}

/* 展开时旋转 */
.show.dropdown-toggle::after {
    transform: rotate(180deg);
}

.head-sm-height {
    height: 58px;
}

/**********重置一些原结束**************/

/*********自定义一些基本设置**************/
:root {
    --colorred: #C54B4D;
    --colorblue: #1889DF;
    --coloryellow: #FB9614;
    --coloryellow2: #F3E734;
    --colorgreen:#16BAAA;
    --colorqing:#687960;
}




pre {
    position: relative;
    padding: 40px 20px 20px;
    background: #222;
    color: #f8f8f8;
    padding-top: 50px;
    border-radius: 10px;
}
pre::before {
    content: '';
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d;
    width: 1.2rem;
    height: 1.2rem;
    top: 10px;
    left: 20px;
    -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    z-index: 2;
}

input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #333;
}




html ::-webkit-scrollbar {
    width: 5px;
    height: 1px;
}
html ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #233b67;
}
html ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background: #ededed;
}



.d-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.d-flex-center-x {
    display: flex;
    justify-content: center;
}
.d-flex-center-y {
    display: flex;
    align-items: center;
}

.fweight {
    font-weight: bold;
}
.fw300 {
    font-weight: 300;
}
.fn {
    font-weight: normal;
}
.coloron {
    color: #dbbc87 !important;
}
.color000 {
    color: #000 !important;
}
.colorfff {
    color: #fff !important;
}
.color666 {
    color: #6f6f6f !important;
}
.color888 {
    color: #888 !important;
}
.color333 {
    color: #333 !important;
}
.colorred {
    color: var(--colorred) !important;
}
.colorblue {
    color: var(--colorblue) !important;
}
.colorgreen {
    color: var(--colorgreen) !important;
}

.bg000 {
    background: #000 !important;
}
.bgf3 {
    background: #f3f5f9 !important;
}
.bgf8 {
    background: #f8f8f8 !important;
}
.bgblue {
    background: #EDF0FA !important;
}
.bgblue2 {
    background: #F7F8FD !important;
}
.bgfff {
    background: #fff !important;
}
.bg44 {
    background: #444444 !important;
}
.bg-glass {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.fa-square:before,
.fa-circle:before,
.fa-check-square:before {
    margin-right: 3px;
}

.border-right {
    border-right: 1px solid #dee2e6 !important;
}

.title-bg {
    background-image: url(../images/titilebg.jpg);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-size: center center;
    background-size: cover;
    color: #fff;
    display: inline-block;
}

.navbar-light .navbar-toggler,
.navbar-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none;
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}
.navbar-toggler-icon.open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    /* 或者是具体的像素值，如 16px 16px */
}


.leftmenus .onemenu .leftmenus-link {
    display: block;
}
.leftmenus .twomenu a {
    font-size: 1.4rem;
    padding-left: 1.4rem;
}
.banner {
    height: 40rem;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.w-80 {
    width: 80%;
}


/**********自定义一些基本设置结束**************/


.logo-sm-height {
    height: 6rem;
    padding: 1rem 0;
}


.top-login {
    display: flex;
    align-items: stretch;
    /* 确保内部元素撑满高度 */
    margin-right: -1.5rem;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    /* 让“登录”文字在全高按钮内垂直居中 */
    justify-content: center;
    /* 水平居中 */
    padding: 0 5rem;
    background: #206FED;
    color: #fff !important;
    height: 100%;
    text-decoration: none;
    /* 去除下划线 */
    font-size: 1.4rem;
}

.regedit {
    display: inline-flex;
    align-items: center;
    /* 让“登录”文字在全高按钮内垂直居中 */
    justify-content: center;
    /* 水平居中 */
    padding: 0 5rem;
    background: #fff;
    color: #333 !important;
    height: 100%;
    text-decoration: none;
    /* 去除下划线 */
    font-size: 1.4rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: 1.6rem;
    color: #191919; 
}
.navbar-expand-lg .navbar-nav .nav-link i{
    margin-left: 0.5rem;
}
.navbar-nav .dropdown-menu,
.navbar-nav .dropdown-menu::before{
   background: #f3f5f9;
}
.dropdown-item{
   font-size: 1.4rem;
}

.nav-item {
    position: relative;

}
.submenu {
    position: absolute;
    top: 130%;
    left: 20px;
    width: auto;
    z-index: 999;
    background: rgba(255, 255, 255, 0);
    transition: .2s;
    transition: all 0.6s;
    opacity: 0;
    visibility: hidden;

}

.nav-item:hover .submenu {
    opacity: 1;
    top: 100%;
    visibility: visible;
}


.submenu .submenu-2 {
    padding: 20px 15px 10px 15px;
    background: var(--colorgreen);
    border-radius: 10px;
    box-shadow: 0 5px 16px 0 rgba(40, 40, 40, .24);
}

.submenu .submenu-2 a {
    color:#fff;
    display: block;
    width: 100%;
    display: flex;
    white-space: nowrap;
}
.submenu .submenu-2 a:hover {
    font-weight: bold;
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--colorgreen);
    margin-left: 20px;
}


.topsearch{
     position: relative;
     margin-left: 2rem;
}
.topsearch input{
     border:1px solid #ddd;
     border-radius: 20px;
     width:150px;
     height: 30px;
     padding-left:15px;
}
.topsearch button{
     border:none;
     position: absolute;
     right:5px;
     top:0px;
     z-index: 9;
     background: none;     
}

.topsearch button i{
     font-size: 1.6rem;
}



.index-banner {
    height: 60rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: 1px 1px 15px #f8f8f8;
}
.gradient-text {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 48px;
    font-weight: 700;
    /* 加粗字体，渐变效果更明显 */

    /* 1. 设置从浅蓝到蓝紫色的水平渐变 */
    background: linear-gradient(90deg, #3F7AFF 0%, #AD00FF 50%);

    /* 2. 将背景裁切为文字轮廓 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. 将文字原本的颜色设为透明，露出背景渐变 */
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.spotlight-btn {
    position: relative;
    overflow: hidden;
    /* 裁剪超出按钮圆角的光晕 */
    font-size: 18px;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    /* 基础渐变底色 */
    background: linear-gradient(90deg, #6253fa 0%, #1e80ff 100%);
    cursor: pointer;
    width: 260px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    padding: 0px 20px;
    /* 1. 初始化坐标变量（默认在按钮中心） */
    --x: 50%;
    --y: 50%;
}
.spotlight-btn .icon {
    right: 20px;
    top: 15px;
    position: absolute;
    font-size: 1.4rem;
}

/* 2. 利用伪元素创建跟随鼠标的“聚光灯”高光层 */
.spotlight-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 以 --x 和 --y 为圆心，画一个内亮外透明的白色高光圆圈 */
    background: radial-gradient(circle 80px at var(--x) var(--y),
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0) 80%);
    opacity: 0;
    /* 默认隐藏 */
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* 防止遮挡鼠标点击事件 */
}

/* 3. 鼠标悬浮时显示高光 */
.spotlight-btn:hover::before {
    opacity: 1;
}






.one-step {
    background: #fff;
    position: relative;
}
 
.wai-left {
    position: sticky;
    top: 100px;
    /* 固定位置 */
    height: 200px;
}

.wai-list{
    border-bottom: 1px solid #ddd;
    padding: 30px 15px;
 
}

.wai-list .ico {
    display: flex;
    align-items: center;
}
.wai-list .ico img {
    height: 30px;
}

.wai-list .pics {
    border-radius: 15px;
    overflow: hidden;
    height: 15rem;
}
.wai-list .pics img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.index-gongneng{
     padding:30px 20px;
     height: 100%;
     text-align: center; 
     background: #fff;
     box-shadow: 1px 1px 5px #ddd;
     cursor: pointer;
}
.index-gongneng .ico img{
     width:5rem;
     transition: all 0.6s;
}
.index-gongneng .title{
     color:#333;
}
.index-gongneng .desc{
     color:#999;
}
.index-gongneng:hover .title,
.index-gongneng:hover .desc{
     color:#fff;
}
.index-gongneng:hover{
            background: linear-gradient(90deg, #6253fa 0%, #1e80ff 100%);
        color:#fff;
}
.index-gongneng:hover .ico img{
    transform: scale(1.1);
}

.jianzan{
     border-radius: 15px;
     overflow: hidden;
     background: #fff;
     padding-bottom: 20px;
     height: 100%;
     border:1px solid #ddd;
     cursor: pointer;
}
.jianzan .ico{
     overflow: hidden;
}
.jianzan .ico img{
     width:100%;
    transition: all 0.6s;
}
.jianzan .text{
     padding:20px;
}
.jianzan:hover .ico img{
    transform: scale(1.2);
}
.jianzan:hover{
         background: linear-gradient(90deg, #6253fa 0%, #1e80ff 100%);
        color:#fff;
}




.index_aboutbig_container {
    width: 100%;
}
.sontit-one {
    width: 100%;
}
.sontit-one p {
    font-size: 28px;
    color: #ccc;
    text-transform: uppercase;
}
.sontit-one h3 {
    font-size: 30px;
    color: #333;
    margin-top: 16px;
}
.sontit-one.white p,
.sontit-one.white h3 {
    color: #fff;
}
.index_aboutbig {
    width: 100%;
    overflow: hidden;
}
.index_aboutbig-img,
.index_aboutbig-wdbox {
    height: 682px;
    position: relative;
}
.index_aboutbig-img {
    width: 50%;
    object-fit: cover;
    float: left;
}
.index_aboutbig-wdbox {
    display: flex;
    align-items: center;
    background: #f3f5f9;
    width: 50%;
    float: right;
    padding-left: 76px;
}
.index_aboutbig-wd {
    width: 424px;
}
.index_aboutbig-wd .sontit-one p {
    opacity: .5;
    line-height: 1.2em;
}
.index_aboutbig-desc {
    width: 100%;
    margin-top: 40px;
}
.index_aboutbig-desc p {
    font-size: 16px;
    line-height: 28px; 
}
.index_aboutbig-desc p:first-child {
    margin-top: 0;
}




.index-seo{
     padding:2rem 1.5rem;
     background: #fff;
     box-shadow: 1px 1px 10px #ddd;
     font-size: 1.6rem;
     height: 100%;
     display: flex;
}
.index-seo:hover{
     background: #D9DFFD;
     color:#5159DD;
     cursor: pointer;
}



.nav-tabs .nav-link {
    margin-right: 2px;
}
.nav-tabs {
    border: none;
    display: block;
    text-align: center;

}
.nav-tabs .nav-item.show .nav-link-tab,
.nav-tabs .nav-link-tab.active {
    border: none !important;
    background: none;
    color: #000;
    border-bottom: 2px solid #000 !important;
    font-weight: bold;
}
.nav-tabs .nav-link-tab {
    display: inline-block !important;
    cursor: pointer;
    font-size: 18px;
    line-height: 28px;
    margin: 0 20px;
    padding: 0;
    padding-bottom: 10px;
    position: relative;
    -webkit-transition: .2s;
    transition: .2s;
    background: none;

}

.nav-tabs .nav-link-tab:hover {
    border: none;
}

.reduction {
    background: #f3f5f9;
    width: 100%;
    position: relative;
    display: inline-block;
    border-radius: 15px;
    cursor: pointer;
}
.reduction:hover{
    background: linear-gradient(90deg, #6253fa 0%, #1e80ff 100%) 
}
.reduction-big-box {
    margin-top: 80%;
}

.reduction-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center; 
}
.reduction-box img{
     width:70px;
}
.reduction-box .w-width{
    width: 100%;
}
.reduction:hover .text-center{
     color:#fff;
}




.rota-3D-sec-foot {
    position: relative;
    background: #CED8FC;
}
.rota-3D-sec-container {
    z-index: 1;
    width: 100%;
    height: auto;
    padding-top: 0;
    position: relative;
}


.rota-3D-motion-wrap {
    width: 100%;
    height: 500vh;
    position: relative;
    overflow: clip;
}


.rota-3D-motion-content {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    margin-top: 0;
    display: flex;
    position: sticky;
    top: 0;
}

.rota-3D-motion-inner {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}
.rota-3D-motion-path {
    width: 100vmax;
    height: 100%;
    max-height: 30vh;
    position: absolute;
    pointer-events: none;
}
.rota-3D-motion-svg {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}




.rota-3D-bg-text-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.rota-3D-bg-title {
    color: #ff5e31;
    font-size:6vw;
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -2px;
    white-space: nowrap;
}

.rota-3D-motion-list-wrap {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
}
.rota-3D-motion-list {
    position: relative;
    width: 100%;
    height: 100%;
}


.rota-3D-motion-item {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
    position: absolute;
}
.rota-3D-motion-item._1,
.rota-3D-motion-item._2,
.rota-3D-motion-item._3,
.rota-3D-motion-item._4,
.rota-3D-motion-item._5,
.rota-3D-motion-item._6,
.rota-3D-motion-item._7,
.rota-3D-motion-item._8{
    display: block;
}


.rota-3D-card-box {
    grid-column-gap: 1.875em;
    grid-row-gap: 1.875em;
    width: 37.5em;
    background: #fff;
    border-radius: 24px;
    padding:15px;
    box-shadow: 0 30px 60px rgba(255, 94, 49, 0.08);
}
.rota-3D-card-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 16px;
}
.rota-3D-card-desc {
    display: flex;
    flex-direction: column;
    grid-column-gap: 1.25em;
    grid-row-gap: 1.25em;
}
.rota-3D-card-title {
    text-align: center;
    text-transform: uppercase; 
    font-size: 1.8em;
    margin-top: 1rem; 
}
 
.rota-3D-page-tip {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #ff5e31;
    font-weight: bold;
}







.gradient-bg {  
  background-color: #6a74ff;
  background-image: 
    radial-gradient(at 100% 0%, #196ff3 0%, transparent 55%),  /* 右上亮蓝 */
    radial-gradient(at 0% 100%, #59a1ff 0%, transparent 55%),  /* 左下浅蓝 */
    radial-gradient(at 100% 100%, #7d43ff 0%, transparent 55%),/* 右下深紫 */
    radial-gradient(at 0% 0%, #8762ff 0%, transparent 55%);    /* 左上粉紫 */    
  border-radius: 2rem;
}
.gradient-bg:hover{
   box-shadow: 0px 10px 40px -6px rgba(0, 0, 0, .1), 0px 24px 80px -16px rgba(19, 102, 236, .27);
   cursor: pointer;
}
.index-contact-box1{
   position: relative;
   padding:3rem;
   width: 100%;
  height: 41.5rem; 
}
.index-contact-box1 .more-btn{
   position: absolute;
   bottom:3rem;
   left:3rem;
   z-index: 2; 
   display: block;
}
.index-contact-box1 .more-btn .more{
    padding:15px 30px;
    font-size: 16px;
    background: #fff;
    border-radius: 1rem;
    color:#000;
    display: inline-block;
    cursor: pointer;
}
.index-contact-box1 .more-btn .more:hover{
    color:var(--colorblue);
}
.index-contact-box{
   height: 20rem;
   border-radius: 2rem;
   background: #fff; 
   margin-bottom: 1.5rem;
   padding:3rem;
   position: relative;
}
.index-contact-box:hover{
   box-shadow: 0px 10px 40px -6px rgba(0, 0, 0, .1), 0px 24px 80px -16px rgba(19, 102, 236, .27);
   cursor: pointer;
}
.index-contact-box .icos img{
   width:3rem;
}

.index-contact-box .subtitle{
   position: absolute;
   bottom:3rem;
   left:3rem;
   z-index: 2; 
}





.dashboard-bg {
      background: linear-gradient(135deg, #e3edff 0%, #d8e5ff 100%);
      border-radius: 2rem;
      padding: 30px;
    }

    /* 左侧 Tab 样式重写 */
    .custom-nav {
      width: 180px;
      flex-shrink: 0;
    }

    .custom-nav .nav-link {
      color: #333;
      font-size: 14px;
      text-align: left;
      padding: 12px 20px;
      border-radius: 12px;
      margin-bottom: 4px;
      border: none;
      transition: all 0.2s ease;
    }

    .custom-nav .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.4);
    }

    /* Tab 选中态：纯白背景、加粗 */
    .custom-nav .nav-link.active {
      background-color: #ffffff !important;
      color: #111111 !important;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    /* 右侧面板外层容器 */
    .custom-tab-content {
      background: rgba(255, 255, 255, 0.45);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.6);
      padding: 24px;
      min-height: 500px;
    }

    /* 右侧卡片基础样式 */
    .product-card {
      background: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 20px;
      height: 100%;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
      transition: all 0.6s;
    }
    .product-card:hover{
           background: linear-gradient(90deg, #6253fa 0%, #1e80ff 100%);
           
    }
    .product-card:hover .title{
        color:#fff;
    }

    .product-card .title{
       position: relative;
       width: 100%;
       display: block;
       padding-right: 3rem;
    }
    .product-card .title span{
       position: absolute;
       right:1rem;
       top:0rem;
       z-index: 2
    }








.index-contact-main{
   background: linear-gradient(to right, #1866ed, #4766f6,  #7066fe)
}


.footer{
   background: #f3f3f3;
}

.footer-service{
   background: #f3f3f3;
   padding:30px 0;
}

.footer-service-list{
  -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    display: flex;
}
.footer-service-list .ico{
  width:60px;
  margin-right: 10px;
}

.footer-service-list .right-txt{
  width:calc(100% - 70px);
  padding-top: 10px;
}
.footer-service-list .right-txt .title{
  font-size: 17px;
}


.footlogo{
  height: 40px;
}



.foot-top{
  background: url(../images/bgfoottop.jpg);
  padding:50px 0;
  background-size: 100% 100%;
}


/*************首页结束***********************/

.web-list{

}

.web-list-box{
    padding:20px;
}

.web-list-box .desc{
    height: 48px;
    line-height: 24px;
    overflow-y: hidden;
}



.custom{
    display: flex;
}

.custom .ico{
    width:70px;
    margin-right: 10px;
}

.custom .ico img{
    width:60px;
}

.custom .txt{
    width:calc(100% - 80px);
}



.ecs{
    background: #fff;
    border-radius: 15px;
    display: flex;
    height: 150px;
    align-items: center;
}

.ecs .ecs-box{
    display: block;
    width: 100%;
}

.ecs .ecs-box .ico{
     width:100%;
}

.ecs .ecs-box .ico img{
    width: 150px;
}





.news-list-box{
     border-bottom: 1px solid #ddd;
     padding:2rem 0;
}

.news-list-box .news-list{
     display: flex;
}
.news-list-box .news-list .text{
     width:85%;
}
.news-list-box .news-list .date{ 
     width: 15%;
     text-align: center;

}





.form-group{
    margin-bottom: 15px;
    float: left;
    display: block;
    width:100%;
}
.input0{
    margin-bottom: 10px;
    font-weight: bold;
    
}

.form-control{
    height: 40px;
    font-size: 1.6rem
}

.disabled-btn{
   background: #f8f8f8!important;
   pointer-events: none;
   cursor: not-allowed; 
   opacity: 0.5;
}



.form-group2{
     width:32%;
     margin-right: 1.3%
}
.more {
    padding: 13px 40px;
    border: 1px solid #ddd;
    display: inline-block !important;
    border-radius: 30px !important;
}






.advantage{
    padding:30px 10px;
    text-align: center;
    cursor: pointer;
    position:relative; 
}

.advantage::after{
     content: "";
     position:absolute;
     right:0;
     top:30px;
     width:1px;
     height:60px;
     background: #ddd;
}
.advantage-list{
     padding:0;
}
.advantage-list:last-child .advantage::after{
     display: none;
}
.advantage .title{
    font-size: 18px;
    font-weight: bold;
}

.advantage .desc{
    font-size: 14px;
    margin-top: 10px;
    color:#666;
}
.advantage-list:hover .advantage{
        background: linear-gradient(90deg, #6253fa 0%, #1e80ff 100%);
}

.advantage-list:hover .advantage::after{
     display: none;
}
.advantage:hover .title,
.advantage:hover .desc{
     color:#fff;
}



.contact-btn{
     padding:10px 30px;
     background: #C2000B;
     color:#fff;
     display: inline-block;
}
.contact-btn:hover{
     color:#fff;
     background:#9A0009;
}
.contact-box{
    background: #fff;
    box-shadow: 2px 2px 10px 10px #eee;
    padding:40px;
}

.book-btn{
    border:1px solid #C2000B;
    padding:10px 30px;
    display: inline-block;
}

.book-btn:hover{
    background: #c2000b;
    color:#fff;
}



.son-sort{
     position: sticky;
     top:68px;
      z-index: 99;
}
.sonsort-btn{
     padding:18px 20px;
     background: var(--colorgreen);
     color:#fff;
     border-radius: 0px;
}
.active-son{
     background: var(--colorqing);
}





.waimao-duibi{
     border:1px solid #ddd;
     min-width: 1200px;
}
.waimao-duibi .header{
    position: sticky;
     top:128px;
     background: #fff;
}
.waimao-duibi  .header th{
    padding: 17px 10px;
    width: 360px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-top: none;
    font-size: 28px;
    font-weight: 400;
    background:linear-gradient(90deg, #6253fa 0%, #1e80ff 100%);
    color: #fff;
    text-align: center;
    position: relative;
}

.waimao-duibi tr th{
         font-size: 16px;
    text-align: left;
    background-color: #fbfbfb; 
    font-weight: normal;
    border-bottom: 1px solid #ddd;
    padding:10px 15px;
}
.waimao-duibi  .header2{
     background:linear-gradient(90deg, #6253fa 0%, #1e80ff 100%);
     color:#fff;
}
.waimao-duibi  .header2 td{     
     padding:15px;
     text-align: center;
}
.waimao-duibi td i{
     color:var(--colorblue);
     font-size: 2rem;
}
.waimao-duibi td i.bi-x-circle-fill{
     color:var(--colorred);
}
.waimao-duibi th span {
    margin-top: 5px;
    font-size: 14px; 
    display: block;
    color: #888;
}
/**********购物列表*******************/

.shop-left{
     padding-right: 4rem;
}
.hm-shop-product-card  .img{
     width: 100%;
     aspect-ratio: 3 / 2;
    overflow:hidden;
}
.hm-shop-product-card  .img a{
     display: block;
     width: 100%;
     height: 100%;
}
.hm-shop-product-card  .img a img{
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.hm-shop-detail-page{
    padding:20px;
    background: #fff;
}
.hmcms-shop-buy-now-button{
    background: var(--colorgreen)!important;
}