@import url('../static/icon/iconfont.css');
@import url('../static/font/VisbyCF-Regular/result.css');
*{
    margin: 0;
    padding: 0;
    font-family: Visby CF;
}
html {
    /* 强制预留滚动条空间，防止内容跳动 */
    scrollbar-gutter: stable;
    /* background-color: #000; */
    
    /* 添加下面这行 */
    height: -webkit-fill-available; 
}
/* WebKit内核浏览器（Chrome/Safari/Edge）专用语法 */
::-webkit-scrollbar {
    width: 6px;        /* 垂直滚动条宽度 */
}
::-webkit-scrollbar-track {
    background-color: #101111;
}
::-webkit-scrollbar-thumb {
    background: #ffffff;  /* 滑块颜色 */
    border-radius: 100vw;   /* 滑块圆角 */
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;  /* 悬停状态颜色 */
}
/*去除未被访问的a标签的下划线*/
a:link {
    text-decoration: none;
    color: #000;
}
/*去除已经被访问过的a标签的下划线*/
a:visited {
    text-decoration: none;
    color: #000;
}
/*去除鼠标悬停时的a标签的下划线*/
a:hover {
    text-decoration: none;
    color: #000;
}
/*去除正在点击的a标签的下划线（鼠标按下，尚未松开）*/
a:active {
    text-decoration: none;
    color: #000;
}
/*去除获得焦点的a标签的下划线（被鼠标点击过）*/
a:focus {
    text-decoration: none;
    color: #000;
}

.menu_container{
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    
    /* ===== 修复移动端高度被遮挡的核心代码 START ===== */
    height: 100vh; /* 兜底方案：老版本浏览器 */
    height: -webkit-fill-available; /* 兼容方案：针对 iOS Safari */
    height: 100dvh; /* 终极方案：动态视口高度，会自动避开浏览器自带的导航栏 */
    /* ===== 修复移动端高度被遮挡的核心代码 END ===== */

    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    /* background-color: #c4c4c4; */
    overflow: hidden;
    /* opacity: 0; */
    transform: translateY(-100%);
    transition: all 1s;
    pointer-events: none;
}
.menu_container_active{
    transform: translateY(0%);
    opacity: 1;
    pointer-events: all;
}
.menu_container .menu_up{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 83%;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    background: url('../static/image/public/menu_bg.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.menu_container .menu_down{
    position: relative;
    width: 100%;
    height: 17%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-100%,-100%);
    /* overflow: hidden; */
    background-color: #c4c4c4;
    opacity: 0;
    transition: all 1s;
}
.menu_container .menu_down .ov_cover{
    width: 100%;
    height: 100%;
    background: url('../static/image/public/menu_footer.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #c4c4c4;
}
.menu_container .menu_down::after{
    position: absolute;
    left: 100%;
    content: "";
    display: inline-block;
    width: 10vw;
    height: 100%;
    border-radius: 0 100vw 100vw 0;
    background-color: #d8d8d8;
}
.menu_container_active .menu_down{
    transform: translate(0%,0%);
    opacity: 1;
}
.menu_container .menu_down .fliter_bottom{
    position: absolute;
    z-index: 1;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 20%;
    user-select: none;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4),rgba(0,0,0,0.0));
}
.menu_container .menu_down .carousel_font_container{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
.menu_container .menu_down .carousel_font{
    position: relative;
    flex-shrink: 0;
    top: 0;
    left: 0;
    font-size: 14vh;
    white-space: nowrap;
    font-weight: 300;
    margin-right: 8vw;
    color: rgba(255, 255, 255, 0.7);
    font-weight: bold;
}

.menu_container .menu_up .width_limit{
    position: relative;
    width: 88%;
}
.menu_container .menu_up .logo_close{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.8vw;
}
.menu_container .menu_up .logo_close .jciconfont{
    font-size: 2.1vw;
}
.menu_container .menu_up .logo_close .language_close{
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu_container .menu_up .logo_close .language_btn{
    font-weight: bold !important;
    border: 1px solid #000 !important;
    border-radius: 100vw;
    padding: 0 !important;
    background-color: #00000000;
}
.menu_container .special_effects_more .first_container{
    color: #000 !important;
}
.menu_container .special_effects_more .style_label{
    padding: 0 0.4vw !important;
}
.menu_container .special_effects_more .second_container::after{
    background-color: #000 !important;
}
.menu_container .special_effects_more .second_container{
    color: #fff !important;
}
.menu_container .menu_up .logo_close .close_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1.4vw;
    font-weight: bold;
    transition: all .3s;
}
.menu_container .menu_up .logo_close .close_btn .jciconfont{
    font-size: 1.2vw;
    margin-left: 0.5vw;
    transition: all .3s;
}
.menu_container .menu_up .logo_close .close_btn:hover{
    color: rgb(89, 0, 0);
}
.menu_container .menu_up .logo_close .close_btn:hover .jciconfont{
    color: #f00;
}   
.menu_container .menu_main_container{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.4vw;
    opacity: 0;
    transition: all 1s;
}
.menu_container_active .menu_main_container{
    opacity: 1;
}
.menu_container .menu_main_container .image_container{
    position: relative;
    width: 48.29%;
    height: 24.8vw;
    box-shadow: 0px 0px 30px #888;
    transform: translateX(-100%);
    transition: all 1s;
    overflow: hidden;
}
.menu_container_active .menu_main_container .image_container{
    transform: translateX(0%);
}
.menu_container .menu_main_container .image_container .img_item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    opacity: 0;
    object-fit: cover;
}
.menu_container .menu_main_container .image_container .img_item_active{
    opacity: 1;
}
.menu_container .menu_main_container .menu_list_container{
    position: relative;
    width: 37%;
    height: 28vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    transition: all 1s;
    transform: translateX(100%);
}
.menu_container_active .menu_main_container .menu_list_container{
    transform: translateX(0%);
}
.menu_container .menu_main_container .menu_list_container .item{
    position: relative;
    width: 95%;
    margin: 0.469vw 0;
    transition: all .8s;
    cursor: pointer;
}
.menu_container .menu_main_container .menu_list_container .item .label_1{
    font-size: 1.458vw;
    font-weight: bold;
    color: #7D7D7D;
    transition: all .8s;
}
.menu_container .menu_main_container .menu_list_container .item .label_1:hover{
    color: #333;
}
.menu_container .menu_main_container .menu_list_container .item .label_2{
    width: 90%;
    margin-top: 0vw;
    transition: all .8s;
    overflow: hidden;
}
.menu_container .menu_main_container .menu_list_container .item .label_2 .link_btn_container{
    display: flex;
    /* justify-content: space-between; */
    position: relative;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all .8s;
}
.menu_container .menu_main_container .menu_list_container .item_active{
    width: 100% !important;
    margin-bottom: 1.3vw !important;
}
.menu_container .menu_main_container .menu_list_container .item_active .label_1{
    color: #000 !important;
}
.menu_container .menu_main_container .menu_list_container .item_active .label_2{
    margin-top: 1.51vw !important;
}
.menu_container .menu_main_container .menu_list_container .item_active .link_btn_container{
    transform: translateX(0%) !important;
    opacity: 1 !important;
    pointer-events: all !important;
}
.menu_container .menu_main_container .menu_list_container .item .link_btn{
    color: #7D7D7D;
    font-size: 0.938vw;
    transition: all .5s;
    margin-right: 2vw;
    white-space: nowrap;      /* 1. 强制文本在一行内显示，不换行 */

}
.menu_container .menu_main_container .menu_list_container .item .link_btn:hover{
    color: #444;
}
.menu_container .menu_main_container .menu_list_container .item .link_btn_active{
    color: #000 !important;
}
.menu_container .media_search_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 3vw; */
}
.menu_container .media_search_container .media_container{
    display: flex;
    align-items: center;
    transform: translateX(-200%);
    transition: all 1s;
}
.menu_container_active .media_search_container .media_container{
    transform: translateX(0%);
}
.menu_container .media_search_container .media_container .icon_href{
    position: relative;
    margin-right: 1.3vw;
}
.menu_container .media_search_container .media_container .jciconfont{
    font-size: 1.771vw;
    color: #7d7d7d;
    transition: all .5s;
}
.menu_container .media_search_container .media_container .jciconfont:hover{
    color: #231815;
}
.menu_container .search_container_menu{
    width: 37%;
    transform: translateX(100%);
    transition: all 1s;
}
.menu_container_active .search_container_menu{
    transform: translateX(0%);
    display: none;
}
.menu_container .search_container_menu .search{
    width: 14.688vw;
    border-radius: 100vw;
    border: 1px solid #979797;
    padding: 0.4vw 0;
    padding-left: 1.25vw;
    padding-right: 0.73vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
}
.menu_container .qrcode_container{
    position: absolute;
    width: 10vw;
    height: 10vw;
    left: 50%;
    top: 100%;
    transform: translate(-50%,10%);
    opacity: 0;
    scale: 0.8;
    transform-origin: 0% 0%;
    user-select: none;
    pointer-events: none;
    transition: all .4s;
}
.menu_container .qrcode_container .qrcode_img{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2vw;
    background-color: #fff;
    overflow: hidden;
    transition: all .4s;
}
.menu_container .qrcode_container .qrcode_img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.menu_container .qrcode_container::before{
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    top: 0%;
    left: 50%;
    transform: translate(-50%,-80%);
    border-bottom: 0vw solid #fff;
    border-left: 0.5vw solid #ffffff00;
    border-right: 0.5vw solid #ffffff00;
    border-top: 0.5vw solid #ffffff00;
    transition: all .4s;
}
.menu_container .icon_href:hover .qrcode_container{
    scale: 1;
    opacity: 1;
}
.menu_container .icon_href:hover .qrcode_container::before{
    border-bottom: 1vw solid #fff;
}
.menu_container .icon_href:hover .qrcode_img{
    border-radius: 1vw;
}
.search_container_menu .search .search_input{
    /* height: 1.5vw;
    width: 0vw; */
    font-size: 0.84vw;
    box-shadow: none;
    outline: none;
    /* background: #F8F8FF; */
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:none !important;
    /* border-bottom: 2px solid #ccc !important; */
    border-radius: 0px !important;
    color: #7D7D7D;
    background: #ffffff00;
    transition: all .5s;
    flex-shrink: 0;
    padding: 0 0.3vw;
    box-sizing: border-box;
    width: 9vw;
}
.search_container_menu .search_input::placeholder{
    color: #aaa;
    font-size: 1vw;
    transition: all .5s;
}
.menu_container .search_container_menu .search .search_btn_menu{
    width: 1.4vw;
    height: 1.4vw;
    border-radius: 50%;
    background-color: #7d7d7d;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all .5s;
}
.menu_container .search_container_menu .search .search_btn_menu:hover{
    background-color: #231815;
}
.menu_container .search_container_menu .search .jciconfont{
    font-size: 1.3vw;
    color: #7d7d7d;
    flex-shrink: 0;
}
.menu_container .search_container_menu .search .search_btn_menu .jciconfont{
    color: #fff;
    font-size: 0.84vw;
}

.nav_container{
    position: fixed;
    z-index: 9;
    width: 100%;
    top: 0%;
    left: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s;
}
.nav_container_hide{
    transform: translateY(-101%);
}
/* .nav_container_hide_import{
    transform: translateY(-101%) !important;
}
.nav_container_hide_import .nav_bg{
    transform: translateY(-100%) !important;
} */
.nav_container .hover_layer_container{
    position: absolute;
    /* z-index: 1; */
    top: 0%;
    left: 0%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    padding: 9vw 0 2.865vw;
    transform: translateY(-100.1%);
    transition: all .5s;
}
.nav_container .hover_layer_container_active{
    transform: translateY(0%);
}
.nav_container .hover_layer_container::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,#444,#00000000 0.5%);
    /* box-shadow: 0px 0px 2px #444 inset; */
}
.nav_container .hover_layer_container::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.2;
}

.nav_container .layer_search{
    width: 88%;
    margin-top: 3.75vw;
}
.nav_container .search{
    width: 14.688vw;
    border-radius: 100vw;
    border-top: 1px solid #979797;
    border-left: 1px solid #979797;
    padding: 0.6vw 1vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    background-color: rgb(119, 119, 119,0.5);
    display: none;
}
.nav_container .search .search_input{
    /* height: 1.5vw;
    width: 0vw; */
    font-size: 0.84vw;
    box-shadow: none;
    outline: none;
    /* background: #F8F8FF; */
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:none !important;
    /* border-bottom: 2px solid #ccc !important; */
    border-radius: 0px !important;
    color: #fff;
    background: #ffffff00;
    transition: all .5s;
    flex-shrink: 0;
    padding: 0 0.3vw;
    box-sizing: border-box;
    width: 9vw;
}
.nav_container .search_input::placeholder{
    color: #fff;
    font-size: 0.781vw;
    transition: all .5s;
}
.nav_container .search .search_btn_menu{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.nav_container .search .jciconfont{
    font-size: 1vw;
    color: #fff;
    flex-shrink: 0;
}
.nav_container .search .search_btn_menu .jciconfont{
    color: #fff;
    font-size: 0.84vw;
    transition: all .5s;
}
.nav_container .search .search_btn_menu .jciconfont:hover{
    color: #b0b0b0;
}
.nav_container .hover_layer_container .class_list_container{
    position: relative;
    width: 88%;
    height: 17.188vw;
    display: flex;
    justify-content: space-between;
    transition: all .4s;
}
.nav_container .hover_layer_container .class_list_container_product{
    position: relative;
    width: 88%;
    height: 25.781vw;
    display: flex;
    justify-content: space-between;
}
.nav_container .hover_layer_container .class_list_container .level_1_list{
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 找到原来的这段代码进行替换 */
.nav_container .hover_layer_container .level_2_list .level_1_info_list {
    position: absolute;
    opacity: 0;
    transition: opacity .5s; /* 只过渡 opacity，不要过渡 all，否则滚动条出现会有延迟 */
    width: 100%;
    height: 100%;
    
    /* 核心修复：防止 padding 撑大宽度导致滚动条被切割 */
    box-sizing: border-box; 
    
    /* 滚动设置 */
    overflow-x: hidden;
    overflow-y: auto;
    
    /* 交互设置 */
    pointer-events: none;
    
    /* 右侧留白，给滚动条腾位置 */
    padding-right: 0.5vw; 
    
    /* 阻止滚动冒泡 */
    overscroll-behavior: contain; 
}

/* 激活状态 */
.nav_container .hover_layer_container .level_2_list .level_1_info_list_active {
    opacity: 1;
    pointer-events: auto; /* 确保这里是 auto 或 all */
    z-index: 20; /* 提高层级，确保在其他绝对定位元素之上 */
}

/* --- 滚动条样式优化 (建议加宽，否则极难点中) --- */
.nav_container .hover_layer_container .level_2_list .level_1_info_list::-webkit-scrollbar {
    width: 4px !important; /* 建议从 2px 改为 4px 或 5px */
}

/* 滚动条轨道 */
.nav_container .hover_layer_container .level_2_list .level_1_info_list::-webkit-scrollbar-track {
    background-color: transparent !important; /* 轨道透明，更美观 */
}

/* 滚动条滑块 */
.nav_container .hover_layer_container .level_2_list .level_1_info_list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4) !important; /* 半透明白色 */
    border-radius: 10px !important;
}

/* 鼠标悬停在滚动条上时加深颜色 */
.nav_container .hover_layer_container .level_2_list .level_1_info_list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8) !important;
}
.nav_container .hover_layer_container .level_2_list .level_1_info_list_active{
    opacity: 1;
    pointer-events: all;
    z-index: 10;
}
.nav_container .hover_layer_container .class_list_container .product_image{
    position: relative;
    width: 56.8%;
    height: 100%;
}
.nav_container .hover_layer_container .class_list_container .product_image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nav_container .hover_layer_container .level_1_list .more_link{
    font-size: 0.83vw;
    color: #9FA0A0;
    margin-bottom: 2.1vw;
    display: none;
}
.nav_container .hover_layer_container .level_2_list .more_link{
    font-size: 0.83vw;
    color: #9FA0A0;
    margin-bottom: 2.1vw;
}
/* .nav_container .hover_layer_container .level_2_list .level_1_info_list_position{
    height: 25vw;
} */
.nav_container .hover_layer_container .level_1_list .level_1_name{
    font-size: 1.25vw;
    font-weight: bold;
    color: #9FA0A0;
    margin-bottom: 1.5vw;
    transition: all .5s;
}
.nav_container .hover_layer_container .level_1_list .level_1_name_active{
    color: #fff;
}
.nav_container .hover_layer_container .level_2_list .module_item{
    display: flex;
    flex-direction: column;
    font-size: 0.83vw;
    margin-bottom: 1vw;
    padding-bottom: 0.5vw;
    border-bottom: 1px solid #666;
}
.nav_container .hover_layer_container .level_2_list .module_item:last-of-type{
    border-bottom: none;
}
.nav_container .hover_layer_container .level_2_list .module_item .img_url_btn{
    color: #9FA0A0;
    margin-bottom: 0.7vw;
    transition: all .5s;
}
.nav_container .hover_layer_container .level_2_list .module_item .img_url_btn_active{
    color: #fff;
}

.nav_container .hover_layer_container .class_list_container .btn_list_item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    pointer-events: none;
    opacity: 0;
    transition: all .3s;
}
.nav_container .hover_layer_container .class_list_container .btn_list_item_active{
    opacity: 1;
    pointer-events: all;
    z-index: 10;
}
.nav_container .hover_layer_container .class_list_container .btn_list_item .img_list_item{
    position: relative;
    flex: 1;
    margin: 0 1vw;
    overflow: hidden;
}
.nav_container .hover_layer_container .class_list_container .btn_list_item .img_list_item>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
}
.nav_container .hover_layer_container .class_list_container .btn_list_item .img_list_item:hover .item_text .p_2{
    opacity: 1;
    line-height: 1.2;
}
.nav_container .hover_layer_container .class_list_container .img_list_item .item_text{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1.823vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hover_layer_container .class_list_container .img_list_item .item_text .p_1{
    font-size: 0.938vw;
    color: #fff;
}
.hover_layer_container .class_list_container .img_list_item .item_text .p_2{
    /* width: 70%; */
    margin-top: 0.6vw;
    font-size: 1.875vw;
    color: #fff;
    line-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .5s;
    text-shadow: 0px 13px 17px rgba(42,32,25,0.14);
    background: linear-gradient(5deg, rgba(9,8,10,0.72) 0%, rgba(255,255,255,0.7) 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav_container .hover_layer_container .class_list_container .img_list_item:hover img{
    scale: 1.08;
}

.nav_container .width_limit{
    position: relative;
    width: 87.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px;
    /* line-height: 1; */
}
.nav_container .width_limit>div{
    flex-shrink: 0;
}
.nav_container .logo_svg{
    transform: translateY(-20%);
}
.nav_container .logo_svg .jciconfont{
    font-size: 33px !important;
    color: #fff;
}
.nav_container .nav_btn{
    display: flex;
    align-items: center;
    opacity: 0;
    transition: all .5s;
    pointer-events: none;
}
.nav_container_bg .nav_btn{
    opacity: 1;
    pointer-events: all;
}
.nav_container .nav_btn a{
    position: relative;
    margin: 0 1.51vw;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all .5s;
}
.nav_container .nav_btn a::after{
    content: "";
    display: inline-block;
    position: absolute;
    width: 0%;
    height: 1px;
    background-color: #8a8b8b;
    top: 120%;
    left: 0%;
    transition: all.5s;
}
.nav_container .nav_btn .active{
    color: #fff;
}
.nav_container .nav_btn .active::after{
    width: 100%;
}
.nav_container .nav_btn a:hover{
    color: #fff;
}
.nav_container .nav_btn a:hover::after{
    width: 100%;
}
.nav_container .menu{
    display: flex;
    align-items: center;
    pointer-events: all;
}
.nav_container .menu .menu_btn{
    border-radius: 100vw;
    background-color: #000;
    color: #fff;
    padding: 9px 15px;
    margin-left: 1vw;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.nav_container .menu a{
    color: #fff;
    font-size: 15px;
}
.nav_container .menu .menu_btn span{
    font-size: 15px !important;
    line-height: 1;
}
.nav_container .nav_bg{
    position: absolute;
    width: 100%;
    height: 151%;
    top: 0%;
    left: 0%;
    background: linear-gradient(45deg, #444 10%, transparent);
    transition: all .7s;
    transform: translateY(-100%);
    backdrop-filter: blur(5px);
}

.nav_container_hide .nav_bg{
    transform: translateY(-100%) !important;
}
.nav_container_bg .nav_bg{
    transform: translateY(0%);
}
.to_top{
    position: fixed;
    z-index: 5;
    right: 4%;
    bottom: 4%;
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    border: 2px solid #3c3432;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .5s;
    /* mix-blend-mode: difference; */
}
.to_top .jciconfont{
    font-size: 1vw;
    transform: rotate(-90deg) rotate3d(0, 1, 0, 0deg);
    color: #3c3432;
    transition: all .5s,transform 1s;
}
.to_top:hover{
    background-color: #101111;
    border: 2px solid #101111;
}
.to_top:hover .jciconfont{
    color: #fff;
}
.to_top:hover .jciconfont{
    transform: rotate(-90deg) rotate3d(1, 0, 0, 360deg);
}

.special_effects_more{
    position: relative;
    background-color: #000;
    border-radius: 100vw;
    overflow: hidden;
    display: inline-block;
}
.special_effects_more .style_label{
    padding: 0.5vw 2vw;
    transition: all .5s;
}
.special_effects_more .first_container{
    position: relative;
    color: #fff;
}
.special_effects_more .second_container{
    position: absolute;
    top: 101%;
    left: 0%;
    color: #000 !important;
}
.special_effects_more .second_container .zindex_up{
    position: relative;
    z-index: 1;
}
.special_effects_more .second_container::after{
    content: "";
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%,0%);
    width: 110%;
    height: 110%;
    display: inline-block;
    background-color: #fff;
    border-radius: 100%;
    transition: all .5s;
}
.special_effects_more:hover .second_container{
    top: 0%;
}
.special_effects_more:hover .second_container::after{
    border-radius: 0%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.footer_container{
    width: 90%;
}
.footer_container .footer_up{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.footer_container .footer_up .footer_up_left>.p_1{
    color: #595757;
    font-size: 0.9vw;
    font-weight: bold;
}
.footer_container .footer_up .footer_up_left>.p_2{
    color: #231815;
    font-size: 1.094vw;
    margin: 1.927vw 0 1.51vw;
}
.footer_container .footer_up .footer_up_left>.p_3{
    color: #231815;
    font-size: 0.794vw;
    line-height: 1.563vw;
}
.footer_container .footer_up .footer_up_right{
    width: 69%;
    display: flex;
    justify-content: space-between;
}
.footer_container .footer_up .footer_up_right .nav_item{
    display: flex;
    flex-direction: column;
}
.footer_container .footer_up .footer_up_right .list_title{
    font-weight: bold;
    color: #3E3A39;
    font-size: 0.9vw;
    margin-bottom: 1.25vw;
}
.footer_container .footer_up .footer_up_right .list_item{
    color: #595757;
    font-size: 0.8vw;
    line-height: 2.604vw;
    transition: all .5s;
}
.footer_container .footer_up .footer_up_right .list_item:hover{
    color: #fff !important;
}
.footer_container .logo_social_media_platform{
    margin-top: 9.896vw;
    display: flex;
    justify-content: space-between;
}
.footer_container .logo_social_media_platform .jcicon-logo{
    font-size: 5.26vw;
    color: #231815;
    transition: all .3s;
}
.footer_container .logo_social_media_platform .jcicon-logo:hover{
    color: #fff !important;
}
.footer_container .logo_social_media_platform .social_media_platform_container{
    display: flex;
    align-items: flex-end;
}
.footer_container .logo_social_media_platform .social_media_platform_container .icon_href{
    position: relative;
    margin-left: 2vw;
}
.footer_container .logo_social_media_platform .social_media_platform_container .jciconfont{
    font-size: 2.083vw;
    color: #3e3a39;
    transition: all .5s;
}
.footer_container .logo_social_media_platform .social_media_platform_container .jciconfont:hover{
    color: #fff !important;
}
.footer_container .logo_social_media_platform .social_media_platform_container .qrcode_container{
    position: absolute;
    width: 10vw;
    height: 10vw;
    left: 50%;
    top: -50%;
    transform: translate(-50%,-100%);
    opacity: 0;
    scale: 0.8;
    transform-origin: 0% 0%;
    user-select: none;
    pointer-events: none;
    transition: all .4s;
}
.footer_container .logo_social_media_platform .social_media_platform_container .qrcode_container .qrcode_img{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2vw;
    background-color: #fff;
    overflow: hidden;
    transition: all .4s;
}
.footer_container .logo_social_media_platform .social_media_platform_container .qrcode_container .qrcode_img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.footer_container .logo_social_media_platform .social_media_platform_container .qrcode_container::before{
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%,80%);
    border-top: 0vw solid #fff;
    border-left: 0.5vw solid #ffffff00;
    border-right: 0.5vw solid #ffffff00;
    border-bottom: 0.5vw solid #ffffff00;
    transition: all .4s;
}
.footer_container .logo_social_media_platform .social_media_platform_container .icon_href:hover .qrcode_container{
    scale: 1;
    opacity: 1;
}
.footer_container .logo_social_media_platform .social_media_platform_container .icon_href:hover .qrcode_container::before{
    border-top: 1vw solid #fff;
}
.footer_container .logo_social_media_platform .social_media_platform_container .icon_href:hover .qrcode_img{
    border-radius: 1vw;
}
.footer_container .footer_down{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer_container .footer_down .hypocrisy_hr{
    width: 87.5vw;
    height: 1px;
    background-color: #555;
    margin: 3.646vw 0 1.823vw;
}
.footer_container .footer_down .other_info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.781vw;
    margin-bottom: 6.979vw;
}
.footer_container .footer_down .other_info a{
    color: #3E3A39;
    transition: all .5s;
}
.footer_container .footer_down .other_info a:hover{
    color: #fff !important;
}
.footer_container_width{
    width: 100%;
    display: flex;
    justify-content: center;
}
.mobile_footer_container{
    display: none;
}
.hide_type{
    display: none;
}

/* 1. 确保二级列表容器占满高度，并使用 Flex 布局 */
.nav_container .hover_layer_container .class_list_container .level_2_list {
    display: flex;
    flex-direction: column;
    width: 14vw; /* 稍微给宽一点，避免文字换行挤压 */
    height: 100% !important; /* 强制高度 */
    overflow: hidden; /* 防止父级出现滚动条 */
}

/* 2. 让包裹层占据剩余空间（这是关键！解决高度撑开问题） */
.nav_container .class_list_container .level_1_info_list_position {
    position: relative;
    flex: 1; /* 自动占据剩余高度 */
    height: 0; /* 【核弹技巧】强制让 Flex 子项的高度受限，否则它会被内容撑开 */
    min-height: 0; /* 兼容 Firefox */
    width: 100%;
}

/* 3. 滚动区域绝对定位填满包裹层 */
.nav_container .hover_layer_container .level_2_list .level_1_info_list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important; /* 必须是 100% */
    
    /* 滚动设置 */
    overflow-y: auto !important;
    overflow-x: hidden;
    
    /* 交互核心 */
    pointer-events: none; /* 默认不可点 */
    opacity: 0;
    transition: opacity 0.4s;
    
    /* 盒模型与内边距 */
    box-sizing: border-box;
    padding-right: 10px; /* 给滚动条留位置 */
    padding-bottom: 50px; /* 底部留白，防止最后一个被遮挡 */
    
    /* 提升层级，防止被兄弟元素遮挡 */
    z-index: 5;
}

/* 4. 激活状态 */
.nav_container .hover_layer_container .level_2_list .level_1_info_list_active {
    opacity: 1;
    pointer-events: auto !important; /* 【强制开启交互】 */
    z-index: 100; /* 确保在最顶层 */
}

/* 5. 滚动条样式（加粗，确保能点到） */
.nav_container .hover_layer_container .level_2_list .level_1_info_list::-webkit-scrollbar {
    width: 3px !important;
    display: block !important;
}
.nav_container .hover_layer_container .level_2_list .level_1_info_list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}
.nav_container .hover_layer_container .level_2_list .level_1_info_list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}
.qr_code_mask {
    display: none;
}

.privacy-nav {
    position: fixed;
    bottom: 0px;
    left: 0px;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 199;
    backdrop-filter: blur(10px) brightness(90%);
    padding: 20px 30px;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.privacy-nav .content {
    word-break: keep-all;
    overflow-wrap: break-word;
}
.privacy-nav .actions {
    display: flex;
    justify-content: space-evenly;
    margin-top: 16px;
}
.privacy-nav .content a {
    text-decoration: underline;
}
.privacy-nav a {
    color: rgb(255, 255, 255);
}
.privacy-nav .actions a:first-child {
    background-color: rgb(255, 255, 255);
    color: rgb(30, 30, 33);
}
.privacy-nav .actions a {
    display: inline-block;
    padding: 9px 26px 10px;
    border-radius: 40px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: initial;
}
/* 视频封面容器 */
.video-cover-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.header_img_mobile_cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000;
}

/* 播放按钮 */
.play-btn {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.play-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px; /* 微调三角形居中 */
}

/* 遮罩层 */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.video-modal.active {
    display: flex;
}

.video-modal-content {
    width: 90%;
    max-width: 800px;
}

.video-modal-content video {
    width: 100%;
    height: auto;
    outline: none;
}

/* 关闭按钮 */
.video-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 35px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    user-select: none;
}
@media screen and (min-width: 992px) {
    .privacy-nav {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 7vw;
    }
    .privacy-nav .content {
        padding-right: 7vw;
    }
    .privacy-nav .actions {
        display: block;
        flex-shrink: 0;
        align-items: center;
        margin-top: 0px;
    }
    .privacy-nav .actions a:first-child {
        margin-right: 16px;
    }
}

@media (max-width:1600px) {
    .nav_container .logo_svg .jciconfont{
        font-size: 30px !important;
    }
}
@media (max-width: 996px) {
    /* @media (max-width:996px) { */
    .nav_container .nav_btn{
        display: none;
    }
    .nav_container .menu a{
        display: none;
    }
    .nav_container .logo_svg .jciconfont{
        font-size: 25px !important;
    }
    .nav_container .menu .menu_btn span{
        font-size: 14px !important;
        font-weight: bold;
    }
    .nav_container .menu .menu_btn{
        padding: 1.2vw 2.6vw;
    }
    .footer_container{
        display: none;
    }
    .mobile_footer_container{
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #1a1a1a;
        margin-top: 10vw;
    }
    .mobile_footer_container::before{
        position: absolute;
        content: "";
        display: inline-block;
        width: 100%;
        height: 10vw;
        background-color: #1a1a1a;
        border-radius: 100vw 100vw 0 0;
        top: 0%;
        left: 0%;
        transform: translateY(-99%);
    }
    .mobile_footer_container .mobile_logo .jciconfont{
        font-size: 12.308vw;
        color: #fff;
    }
    .mobile_footer_container .points_list{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 4.615vw;
    }
    .mobile_footer_container .points_list .point{
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: #fff;
        margin-bottom: 1.5vw;
        flex-shrink: 0;
    }
    .mobile_footer_container .points_list .point_2{
        opacity: 0.5;
    }
    .mobile_footer_container .points_list .point_3{
        opacity: 0.3;
    }
    .mobile_footer_container .phone_adress{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 14px;
        line-height: 1.7;
        margin: 6.2vw 0;
        text-align: center;
        padding: 0 10%;
        box-sizing: border-box;
    }
    .mobile_footer_container .social_media_platform_container{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mobile_footer_container .social_media_platform_container .jciconfont{
        font-size: 7.7vw;
        color: #c9c9c9;
        margin: 0 1.538vw;
    }
    .mobile_footer_container .other_info{
        text-align: center;
        margin: 13.59vw 0;
    }
    .mobile_footer_container .other_info a{
        display: block;
        font-size: 14px;
        color: #B5B5B5;
        line-height: 1.8;
    }
    /* 修复电话号码的颜色并去除下划线 */
    .mobile_footer_container .phone_adress a {
        color: #fff !important; 
        text-decoration: none;
        /* 增加一点点击反馈，提升移动端体验（可选） */
        -webkit-tap-highlight-color: transparent; 
    }

    /* 触摸按下时稍微变暗，给用户点击反馈 */
    .mobile_footer_container .phone_adress a:active {
        opacity: 0.7;
    }
    .to_top{
        display: none;
    }
    .menu_container .menu_main_container{
        height: 100%;
        /* position: absolute; */
        height: 90%;
        margin-top: 0;
        top: 0;
    }
    .menu_container .menu_main_container .image_container{
        display: none;
    }
    .menu_container .media_search_container{
        display: none;
    }
    .menu_container .media_search_container .media_container{
        display: none;
    }
    .menu_container .menu_up .logo_close{
        position: relative;
        z-index: 1;
        width: 100%;
        height: 10%;
        margin-top: 0;
    }
    .menu_container .menu_main_container .menu_list_container{
        width: 100%;
        height: 90%;
        overflow-y: auto;
        overflow-x: hidden;
        justify-content: flex-start;
    }
    /* --- 滚动条样式优化 (建议加宽，否则极难点中) --- */
    .menu_container .menu_main_container .menu_list_container::-webkit-scrollbar {
        width: 2px !important; /* 建议从 2px 改为 4px 或 5px */
    }
    /* 滚动条轨道 */
    .menu_container .menu_main_container .menu_list_container::-webkit-scrollbar-track {
        background-color: transparent !important; /* 轨道透明，更美观 */
    }
    /* 滚动条滑块 */
    .menu_container .menu_main_container .menu_list_container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important; /* 半透明白色 */
        border-radius: 10px !important;
    }
    /* 鼠标悬停在滚动条上时加深颜色 */
    .menu_container .menu_main_container .menu_list_container::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.8) !important;
    }

    .menu_container .menu_main_container .menu_list_container::after{
        position: relative;
        content: "";
        width: 100%;
        margin-bottom: 10vw;
    }
    .menu_container .menu_main_container .menu_list_container .item{
        margin: 3vw 0;
        text-align: center;
    }
    .menu_container .menu_main_container .menu_list_container .item_active{
        width: 95% !important;
        margin: 3vw 0 !important;
    }
    .menu_container .menu_main_container .menu_list_container .item .label_1{
        font-size: 6vw;
        display: block;
    }
    .menu_container .menu_main_container .menu_list_container .item .link_btn{
        font-size: 12px;
        margin: 0 10px;
    }
    .menu_container .menu_main_container .menu_list_container .item .label_2{
        margin-top: 2vw !important;
        width: 100%;
        opacity: 0;
    }
    .menu_container .menu_up .logo_close .jciconfont{
        font-size: 6vw;
    }
    .menu_container .special_effects_more .style_label{
        padding: 0 2.5vw !important;
    }
    .menu_container .menu_up .logo_close .close_btn{
        margin-left: 3.4vw;
    }
    .menu_container .menu_up .logo_close .close_btn .jciconfont{
        font-size: 5vw;
    }
    .menu_container .menu_main_container .menu_list_container .item .label_2 .link_btn_container{
        justify-content: center;
    }
    .btn_container .item:hover{
        transform: translateY(0) !important;
    }
    .menu_container .menu_up .width_limit{
        width: 95%;
        /* display: flex;
        flex-direction: column;
        align-items: center; */
    }
    .menu_container .menu_main_container .menu_list_container .item_active .label_2{
        margin-top: 2vw !important;
        opacity: 1;
    }
    .menu_container .search_container_menu{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .menu_container .search_container_menu .search{
        width: 70%;
        padding: 1vw 0;
    }
    .menu_container .search_container_menu .search .jciconfont{
        font-size: 5vw;
    }
    .search_container_menu .search .search_input{
        font-size: 5vw;
        width: 60%;
    }
    .menu_container .search_container_menu .search .search_btn_menu{
        width: 6vw;
        height: 6vw;
    }
    .menu_container .search_container_menu .search .search_btn_menu .jciconfont{
        font-size: 3vw;
    }
    .search_container_menu .search_input::placeholder{
        color: #aaa;
        font-size: 5vw;
        transition: all .5s;
    }
    .menu_container .media_search_container{
        position: absolute;
        bottom: 0%;
        height: 10%;
        width: 100%;
    }
    .menu_container .menu_up{
        height: 88%;
    }
    .menu_container .menu_down{
        height: 12%;
    }
    .menu_container .menu_down .carousel_font{
        font-size: 9vh;
    }
    .menu_container{
        overflow: hidden;
    }
    /* .nav_container .logo_svg .jciconfont{
        color: #000;
    } */
         /* 1. 当隐藏类触发时，强制容器本身不要向上位移，留在顶部 */
    .nav_container.nav_container_hide {
        transform: translateY(0) !important;
    }

    /* 2. 让背景图在隐藏类触发时，单独向上滑动消失 */
    .nav_container_hide .nav_bg {
        transform: translateY(-100%) !important;
    }

    /* 3. 确保内容层（Logo和菜单按钮）始终可见 */
    .nav_container .width_limit {
        position: relative;
        z-index: 2; /* 确保在背景层之上 */
        transform: translateY(0) !important;
    }
    .qr_img_box img {
        width: 80%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .qr_text {
        color: #333;
        font-size: 14px;
        margin: 0;
    }
    .close_mask_btn {
        position: absolute;
        top: -40px;
        right: 0;
        font-size: 24px;
        color: #fff;
        padding: 10px;
    }
    
    .qr_code_mask {
        /* 初始状态：完全透明且不响应点击 */
        display: flex; /* 始终保持 flex 布局以方便居中 */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(5px);
        justify-content: center;
        align-items: center;

        /* 关键：使用 transition 代替 jQuery 动画 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* 激活状态 */
    .qr_code_mask.active {
        opacity: 1;
        visibility: visible;
    }

    .qr_modal_content {
        transform: scale(0.8);
        transition: transform 0.3s ease;
    }

    .qr_code_mask.active .qr_modal_content {
        transform: scale(1);
    }

}