body {font-family: 'Microsoft YaHei', arial, helvetica, clean, sans-serif;}
i, em {font-style: normal;}
.wp {margin: 0 auto;width: 1200px; }
.clear {clear: both; }
a:hover {color: #8CC63F;}
.fl { float: left; }
.fr { float: right; }

/* 新增箭头样式 */
.nav-link { display: flex !important; justify-content: flex-start; align-items: center; position: relative; }
.nav-arrow { width: 24px; height: 24px; border: none; background: none; cursor: pointer; position: relative; border: 0px;outline: none !important; }
.nav-arrow::before { content: ""; position: absolute; top: 35%; left: 90%; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s; }

/* 展开状态箭头旋转 */
.nav-item.active .nav-arrow::before { transform: translate(-50%, 25%) rotate(-135deg); }

/* 主容器样式 */
.main-content { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-height: 100vh; background: #fff; position: relative; }

/* 遮罩层 */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 998; }

/* 触发按钮 */
.menu-toggle { position: fixed; right: 30px; top: 35px; width: 44px; height: 44px; background: none; color: white; outline: none !important; border: none; border-radius: 50%; cursor: pointer; z-index: 1000; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; }

/* 按钮关闭状态 */
.menu-toggle::before { content: ''; position: absolute; width: 20px; height: 2px; background: #000; box-shadow: 0 8px 0 #000, 0 -8px 0 #000; transition: transform 0.3s; }

/* 按钮激活状态 */
.menu-toggle.active { background: none; right: calc(30px + 600px); }
.menu-toggle.active::before {box-shadow: none; background: #fff; transform: rotate(45deg); }
.menu-toggle.active::after {content: ''; position: absolute; width: 20px; height: 2px; background: white; transition: transform 0.3s; transform: rotate(-45deg); }

/* 侧边栏容器 */
.sidebar { position: fixed; right: -600px; top: 0; width: 600px; height: 100%; background: #f8f9fa; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 999; padding: 300px 50px; }
.sidebar.active { right: 0; }
.main-content.slide { transform: translateX(-600px); }

/* 显示遮罩 */
.overlay.active { opacity: 1; visibility: visible; }

/* 导航菜单样式 */
.nav-item { border-bottom: 1px solid #efefef; }
.nav-item .nav-link { display: block; padding: 15px 0; text-decoration: none; transition: background 0.2s; color: rgba(49,49,49,.8)!important; font-size: 18px; font-weight: 700; letter-spacing: .03em;transition: transform .3s ease-out;}
.nav-item:hover .nav-link { background: none; transform: translateX(8px); opacity: 0.8;}

/* 二级菜单 */
.sub-nav { display: none; background: #fff;}
.sub-nav.active { display: block; }
.sub-nav a { display: block; padding: 8px 12px; color: #313131; text-decoration: none; transition: background 0.2s; font-size: 14px; font-weight: 400; }
.sub-nav a:hover { background: #f1f3f5; }
.nav-header { display: flex; align-items: center; }
.nav-item.active .sub-nav { display: block; }

.wk_hdc {width: 100%;height: 123px; overflow: hidden;background: linear-gradient(to right, #ffffff 0%,#d7d7d7 100%);}
.wk_logo {text-align: center;line-height: 123px;}
.wk_logo img {width:auto;height:45px;}

.wk_container {width: 100%;height: 647px;overflow: hidden;padding-top:180px;}
.wk_container h3 { color: #ffffff; font-size: 36px; font-weight: 700; margin-bottom: 30px;}
.wk_container p { font-size: 28px; color: #ffffff; font-weight: normal; }
.wk_container span { font-size: 28px; color: #ffffff; font-weight: normal; margin-top: 30px;display: block;}

.wk_index_aboutus {width: 100%;overflow: hidden; background: url(../images/64bubrx7.png) no-repeat; background-size: cover; background-position: 50% 50%!important;padding-top: 108px;padding-bottom:108px;}
.wk_aboutus_tit h3 { font-weight: 400; font-family: Muli; font-size: 36px; color: #000000; text-align: center; margin-bottom: 0;}
.wk_pubsliders {width: 170px;height: 3px;background: #d4d4d4;margin: 0 auto;}
.wk_aboutus_box {margin-top: 60px;}
.wk_aboutus_box p { width: 800px; margin: 0 auto; font-size: 16px; font-weight: 400; margin-bottom: 20px; }
.wk-vedio {width: 1200px;height: 510px; }
.wk-vedio video {width:1200px;height:510px;}

.wk_index_about_data {width: 100%;height: 88px;overflow: hidden;padding: 27px 40px;background-color: #ffffff;}
.wk_index_about_datacen {display: flex;justify-content: center;align-items: center;}
.wk_index_about_datacen span { font-size: 17px; font-weight: 700; color: #333; display: inline-block; width: 300px; text-align: center; }

.wk_index_hb {width: 100%;overflow: hidden;}
.wk_index_hb .hbimg1 {height: 200px;background-position: 50% 50%!important;background-size: cover!important;margin-bottom: 45px;}
.wk_index_hb .hbimg2 {height: 200px;background-position: 50% 50%!important;background-size: cover!important;margin-bottom: 45px;}
.wk_index_hb .hbimg3 {height: 300px;background-position: 50% 50%!important;background-size: cover!important;}

.wk_footer {width: 100%;overflow: hidden;padding: 85px 0;}
.wk_footer_box {width: 1200px;margin: 0 auto;}
.wk_footer_box_office {width: 400px;}
.wk_footer_box_office h5 { font-size: 18px; font-weight: 700; color: #000000; margin-bottom: 36px; }
.wk_footer_box_office p { color: #000000; max-width: 190px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 15px; }
.wk_footer_box_contact {width: 400px;}
.wk_footer_box_contact h5 { font-size: 18px; font-weight: 700; color: #000000; margin-bottom: 36px; }
.wk_footer_box_contact span {display: block;color: #000000;font-size: 15px;}
.wk_footer_box_follow {width: 400px;}
.wk_footer_box_follow h5 { font-size: 18px; font-weight: 700; color: #000000; margin-bottom: 36px; }
.wk_footer_box_follow_ico {display: flex;justify-content: space-between;width: 200px;}
.wk_footer_box_follow_ico a i {font-size: 30px;}

.wk-about-bg {width: 100%;height: 346px;overflow: hidden;background: url(../images/j074bftc.png) no-repeat;background-size: cover;}
.wk-about-bg h3 { margin-top: 120px; font-size: 16px; font-weight: 700; }
.wk-about-bg h5 { color: #333; font-weight: 100; font-size: 45px; margin-top: 20px; }

.wk_about_box {width: 100%;overflow: hidden;padding-top: 80px;}
.wk_about_imgleft {width: 580px;height: 775px;overflow: hidden;float: left;}
.wk_about_imgleft img {width: 580px;}
.wk_about_titright {width: 580px;overflow: hidden;float: left;margin-left: 40px;}

.wk_pisocials {width: 100%;overflow: hidden;padding-top: 30px;}
.wk_pisocials_tit {margin-bottom: 80px;}
.wk_pisocials_tit h3 {color: #333;font-size: 40px;font-weight: 700;}
.wk_message_left {width: 580px;float: left;margin-right: 40px;}
.wk_message_left h5 {font-size: 16px;font-weight: 300;color: #505050;font-style: normal;}
.wk_message_left_box {margin-top: 50px;}
.wk_message_left_box h2 {font-size: 16px;color: #000000;font-weight: 400;font-style: normal;margin-bottom: 0;}
.wk_message_left_box p { color: #000000; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 15px; }
.wk_message_left_box span { display: block; color: #000000; font-size: 15px; }
.wk_messages_right {width: 580px;float: left;}
.wk_pi_row {margin-bottom: 18px;}
.wk_form_groupa {width: 275px;float: left;margin-right: 30px;}
.wk_form_groupb {width: 275px;float: left;}
.wk-form-control { display: block; width: 100%; height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #f3f4f6; background-clip: padding-box; border: 0px solid #ced4da; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
textarea.wk-form-control { height: auto; }

.wk_pisocials_map {width: 100%;overflow: hidden;margin-top: 15px;}
.wk_pisocials_map_l {width: 580px;height: 639px;float: left;margin-right: 40px;background-size: cover !important;}
.wk_pisocials_map_r {width: 580px;float: left;}

.wk-brands-a1 {width: 100%;overflow: hidden;margin-top: 40px;}
.wk-brands-a1-box h3 {font-size: 34px;color: #000000;font-weight: 700;text-align: center;}
.wk-brands-a1-ul {margin-top: 100px;}
.wk-brands-a1-ul ul li {margin-bottom: 120px;}
.wk-brands-a1-ul ul li:last-child {margin-bottom: 70px}
.wk-brands-a1-ul ul li:nth-child(2n+1) .wk-brands-tit {width: 400px;height: 161px;line-height: 161px;float: left;padding-right: 50px;color: #000000;font-weight: 700;text-align: right;font-size: 25px;}
.wk-brands-a1-ul ul li:nth-child(2n+1) .wk-brands-img {width: 800px;height: 161px;float: left;background-size: cover !important;background-position: 50% 50% !important;}
.wk-brands-a1-ul ul li:nth-child(2n) .wk-brands-tit {width: 500px;height: 161px;padding-left: 50px;line-height: 161px;float: right;color: #000000;font-weight: 700;text-align: left;font-size: 25px;}
.wk-brands-a1-ul ul li:nth-child(2n) .wk-brands-img {width: 700px;height: 161px;float: left;background-size: cover !important;background-position: 50% 50% !important;}
.wk-line-a {width: 1200px;height: 3px;background: #808080;margin: 0 auto;}

.wk_nav_bottom { margin-top: 220px; text-align: center; position: fixed; bottom: 100px; width: 500px;}
.wk_nav_bottom_a { width: 100%; height: 58px; margin-bottom: 20px; }
.wk_nav_bottom_a a { display: block; width: 100%; height: 58px; line-height: 58px; font-size: 16px; font-weight: 700; color: #696969; text-decoration: underline; transition: transform .3s ease-out; }
.wk_nav_bottom_a a:hover {color: #000;background: #f0f0f0;}

.mt-4, .my-4 {margin-top: 0 !important;}

.wk-btn {
    color: #696969;
    background: none;
    text-decoration: underline;
    font-weight: 700;
    border: none;
    font-size: 16px;
    transition: transform .3s ease-out;
    outline: none;
    width: 200px;
    text-align: left;
    padding: 10px;
}
.wk-btn:hover {
    background: #f0f0f0;
    color: #333;
}
/* 响应式地图容器 */
#map-container {
    width: 100%;
    max-width: 580px;
    height: 300px;
    margin: 20px auto;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 信息窗口自定义样式 */
.BMap_bubble_content { 
    padding: 15px !important;
    min-width: 250px;
}
.map-info-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}
.map-info-content {
    line-height: 1.6;
    color: #666;
}
.wk_pisocials_map_r_tit {font-size:16px;font-weight:300;color:#505050;margin-top:70px;}


.slider-container {
    width: 1920px;
    height: 640px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    margin-bottom:50px;
}

/* 固定背景图片 */
.background-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.background-fixed {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 遮罩层 */
.overlaya {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
    z-index: 2;
}

/* 图标滚动容器 */
.icons-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 300px;
    z-index: 3;
    overflow: hidden;
}

.icons-track {
    display: flex;
    height: 100%;
    position: absolute;
    left: 0;
    transition: transform 0.8s ease;
}

/* 图标项 */
.icon-item {
    width: 240px; /* 1200px / 5 = 240px */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

/* 中间位置指示器 */
.icon-item.center .icon-wrapper {
    transform: scale(1.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.icon-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.icon-item:hover .icon-wrapper {
    transform: scale(1.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.icon-item:hover .icon {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.brand-name {
    margin-top: 15px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 产品图片 - 只保留中间图标的自动弹出效果 */
.product-image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 移除鼠标悬停弹出效果，只保留中间图标自动弹出图片 */
.icon-item.center .product-image-container {
    width: 280px;
    height: 280px;
    opacity: 1;
    visibility: visible;
    animation: expandImage 0.5s ease forwards;
}

@keyframes expandImage {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
    }
    70% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.product-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    padding: 20px;
    border-radius: 0 0 20px 20px;
}

.product-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.product-desc {
    font-size: 14px;
    opacity: 0.9;
}

/* 左右箭头按钮 */
.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.slider-container:hover .arrow-btn {
    opacity: 1;
    visibility: visible;
}

.arrow-left {
    left: 40px;
}

.arrow-right {
    right: 40px;
}

/* 提示文字 */
.hint {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    z-index: 4;
}

/* 中间位置指示器 */
.center-indicator {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    z-index: 3;
}

/* 响应式调整 */
@media (max-width: 1920px) {
    .slider-container {
        width: 100%;
        max-width: 1920px;
    }
    
    .icons-container {
        width: 62.5%; /* 1200/1920 = 0.625 */
        max-width: 1200px;
    }
    
    .icon-item {
        width: 20%; /* 5个图标平均分布 */
    }
}

@media (max-width: 1200px) {
    .slider-container {
        height: 500px;
    }
    
    .arrow-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .arrow-left {
        left: 20px;
    }
    
    .arrow-right {
        right: 20px;
    }
    
    /* 只保留中间图标的响应式调整 */
    .icon-item.center .product-image-container {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 768px) {
    .slider-container {
        height: 400px;
    }
    
    .icons-container {
        height: 200px;
    }
    
    .icon-wrapper {
        width: 80px;
        height: 80px;
    }
    
    .icon {
        width: 40px;
        height: 40px;
    }
    
    .arrow-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    /* 只保留中间图标的响应式调整 */
    .icon-item.center .product-image-container {
        width: 180px;
        height: 180px;
    }
}