@import url("all.min.css");
/* 全局样式：宇树式极简科技风 + 紧凑布局核心设定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Microsoft YaHei', sans-serif;
    list-style: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    color: #333333;
}

body {
    color: #111;
    background-color: #fff;
    overflow-x: hidden;
    line-height: 1.4;
}
p{
	margin: 0
}
ul,ol,li{
	list-style: none;
	list-style-type:none;
    margin:0;
	padding:0px;
}
h1,h2,h3,h4,h5{margin: 0;}
img {
	border: none;
	vertical-align: middle;
	
}
a {
	text-decoration: none;
	color: #333333;
}
/* 导航栏：更透明 + 左对齐 + 紧凑布局 + 窄屏不消失 + 下拉框正常展示修复 */
.navbar {
    background-color: #00000080;
    transition: all .3s ease;
    backdrop-filter: blur(12px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    height: 46px;
    width: 100%;
    padding: 0 4%;
}

.navbar:hover {
    background-color: #000000b3;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* LOGO：宇树式简约 + 紧凑 */
.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.logo-img {
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    filter: brightness(200%);
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.5px;
}

/* 主菜单：左对齐 + 紧凑 + 窄屏不消失 + 下拉框基础修复 + 窄屏自适应（取消横向滚动） */
.main-menu {
    display: flex;
    gap: 1.8rem;
    flex: 1;
    height: 100%;
    align-items: center;
    margin-left: 2rem;
    /* 移除横向滚动相关样式，窄屏自适应换行 */
    flex-wrap: wrap;
    overflow-x: visible;
    height: auto;
    padding: 0.5rem 0;
}

.main-menu > li {
    position: relative;
    height: auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 0.2rem;
    /* 关键：给菜单项添加足够的高度，避免下拉菜单重叠 */
    height: 40px;
}

.main-menu > li > a {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 400;
    transition: color .3s ease;
    letter-spacing: 0.2px;
    padding: 0.5rem 0.5rem;
    display: block;
}

.main-menu > li > a:hover {
    color: #00c6ff;
}
.product-series-list li a{
    color: #ffffff;
}

/* 普通下拉菜单：磨砂透明黑 + 紧凑 + 避免重叠 */
.dropdown {
    position: absolute;
    /* 核心修改：调整top值，确保下拉菜单在菜单项下方完全显示 */
    top: calc(100% + 2px);
    left: 0;
    /* 核心修改：磨砂透明黑背景 */
    background-color: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-in-out;
    z-index: 9999;
    min-width: 100px;
    padding: 0.8rem 0;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    /* 移除margin-top，改用top值控制间距 */
    margin-top: 0;
    /* 添加边框增强磨砂效果 */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* 防止下拉菜单被截断 */
    transform: translateY(5px);
}

/* 修复：确保li hover时，下拉框稳定显示 */
.main-menu > li:hover > .dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.dropdown li {
    padding: 0.5rem 1.2rem;
    transition: background-color .2s ease;
}

.dropdown li:hover {
    /* 悬停时背景透明度提高 */
    background-color: rgba(40, 40, 40, 0.7);
}

.dropdown li a {
    color: #ffffff;
    font-size: 0.8rem;
    transition: color .2s ease;
    display: block;
}

.dropdown li a:hover {
    color: #00c6ff;
}

/* 产品中心下拉菜单：磨砂透明黑 + 双栏布局 + 系列产品联动展示 + 避免重叠 */
.product-dropdown {
    padding: 0;
    display: flex;
    /* 核心修改：磨砂透明黑背景 */
    background-color: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-in-out;
    position: absolute;
    /* 核心修改：调整top值，确保下拉菜单在菜单项下方完全显示 */
    top: calc(100% + 2px);
    left: 0;
    z-index: 9999;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    /* 移除margin-top，改用top值控制间距 */
    margin-top: 0;
    /* 添加边框增强磨砂效果 */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* 防止下拉菜单被截断 */
    transform: translateY(5px);
}

/* 修复：产品中心下拉框hover触发优化 */
.main-menu > li:hover > .product-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 产品系列列表左栏 */
.product-series-list {
    /* width: 200px; */
    flex-shrink: 0;
    padding: 0.8rem 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.product-series-list li {
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all .2s ease;
    position: relative;
}

.product-series-list li:hover,
.product-series-list li.active {
    /* 悬停/激活时背景和文字颜色变化 */
    background-color: rgba(40, 40, 40, 0.7);
    color: #00c6ff;
}

/* 系列产品展示右栏 */
.series-products-preview {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 280px;
}

/* 单个系列的产品容器：默认全部隐藏 */
.series-products {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #fff;
}

/* 激活状态的产品容器显示 */
.series-products.active {
    display: flex;
}

/* 单个产品展示卡片 */
.series-product-card {
    width: calc(50% - 0.75rem);
    text-align: center;
}

.series-product-card img {
    width: 180px;
    height: 140px;
    object-fit: contain;
    background-color: rgba(40, 40, 40, 0.7);
    border-radius: 6px;
    margin-bottom: 0.8rem;
    transition: transform 0.3s ease;
}

.series-product-card img:hover {
    transform: scale(1.05);
}

.series-product-card .product-name {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.series-product-card .product-brief {
    font-size: 0.75rem;
    color: #aaa;
    line-height: 1.4;
}

/* 电话联系方式样式 */
.contact-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
}

.phone-icon {
    font-size: 1rem;
    color: #00c6ff;
}

.phone-number {
    font-weight: 500;
    color: #ffffff;
}

/* 板块内h2微调（保持统一紧凑） */
.section-heading, .core-title, .events-title, .news-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #111;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 2.5rem;
}

/* 更多链接通用样式 */
.more-link {
    display: block;
    text-align: center;
    margin-top: 2rem;
    color: #00c6ff;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all .3s ease;
}

.more-link:hover {
    color: #0072ff;
    transform: translateX(4px);
}

.more-link::after {
    content: '→';
    margin-left: 4px;
    transition: margin-left .3s ease;
}

.more-link:hover::after {
    margin-left: 6px;
}

/* 页脚：矮款紧凑 + 暗黑极简 */
.footer {
    background-color: #111;
    color: #aaa;
    padding: 2.5rem 4% 1.5rem;
}

.footer-container {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.footer-column h4 {
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.footer-column ul li {
    margin-bottom: 0.6rem;
}

.footer-column ul li a {
    color: #ffffff;
    font-size: 0.8rem;
    transition: all .3s ease;
}

.footer-column ul li a:hover {
    color: #00c6ff;
    padding-left: 3px;
}

.qrcode-container {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.qrcode-wrapper {
    margin-top: 0.8rem;
}

.qrcode-wrapper h4 {
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.qrcode-item {
    text-align: center;
}

.qrcode-img {
    width: 60px;
    height: 60px;
    background-color: #fff;
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 0.4rem;
}

.qrcode-item p {
    font-size: 1rem;
    color: #aaa;
    margin-top: 10px;
}

.copyright {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid #222;
    font-size: 0.75rem;
    color: #888;
    letter-spacing: 0.2px;
}
.nav-container .fas.fa-bars{
    color: #ffffff;
    font-size: 18px;
}
.wid{
    max-width: 1380px;
    margin: auto;
    width: 100%;
    padding: 4rem 4% 2rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.title h2{
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #111;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 2.5rem;
}
.nybanner{min-height: 46px;position: relative;display: flex;align-items: center;max-height: 300px;overflow: hidden;justify-content: center;}
.nybanner-text{position: absolute;color: #ffffff;z-index: 99;padding: 0;}
.nybanner-text h2{color: #ffffff;text-align: center;margin-bottom: 10px;}
.nybanner img{  width: 100%;}
  *{  transition: 0.5s;}
  .nybanner-text p{text-align: center;color: #ffffff;font-size: 18px;}
.qrcode-item {width: 100%;}
.qrcode-item img{width: 100%;margin-bottom: 5px;}
.pagination{
    text-align: center;
    margin: 20px 0;
}
.pagination button{background-color: transparent;border:0px solid #999999;padding: 10px;cursor: pointer;width: 40px;height: 40px;border-radius: 25px;}
.pagination button:hover{background-color: #00c6ff;color: #ffffff;}
.pagination span {margin:0 15px ;}


@media (max-width: 1300px) {
#content .about-six-img img{width: 100%;}
#content .cart-two, #content .cart-one{width: 94%;margin: auto;}
.wid{width: 94%;}
}
/* 响应式适配：紧凑布局同步优化 */
@media (max-width: 1200px) {
    .events-timeline::before {
        left: 25px;
    }
    

    .event-item {
        flex-direction: column;
        margin-bottom: 3rem;
    }

    .event-item:nth-child(even) {
        flex-direction: column;
    }

    .event-content {
        width: 100%;
        padding: 0 0 0 45px;
    }

    .event-dot {
        left: 25px;
    }
    #content .about-three-all{flex-wrap: wrap;height: auto;}
   #content .about-three-item{    width: calc((100% - 20px) / 2);}
   #content .about-three-item:nth-child(2n){margin-right: 0;}
  #content .about-three-item .front{position: relative;}
  #header .main-menu > li > a{font-size: 12px;}
  #header .main-menu{    gap: 0.5rem;}
}
.fas.fa-bars{display: none;}
@media (max-width: 992px) {

    .series-product-card {
        width: 100%;
    }

    .products-grid {
        gap: 1.8rem;
    }

    .core-grid {
        gap: 1.5rem;
    }
    .main-menu li{position: relative;padding-left: 3px;}
    .main-menu li::after{
        content: "-";
        display: inline-block;
        position: absolute;
        left: 0;
    }
    .main-menu>li>a{line-height: 24px;}
    .fas.fa-bars{display: block;}
    .main-menu{        position: fixed;
        top: 46px;
        left: 0;
        background-color: #ffffff;
        width: 100%;
        margin: 0;
        padding: 20px 3%;
        gap: 0rem;
        height: calc(100vh - 46px);
        overflow: auto;
        flex-flow: wrap;
        align-items: flex-start;
        display: none;
    }
    .products-section .products-grid, .core-content .core-grid, .news-section .news-grid{flex-flow: wrap;padding: 0;width: 100%;}
    .products-section .product-card, .core-content .core-grid .core-card, .news-section .news-grid .news-card{width: 100%;}
    .products-section .product-card-img, .core-content .core-grid .core-card-img,  .news-section .news-grid .news-card-img{height: auto;}
    

    .events-section .events-timeline::before{left: 7px; transform: translateX(0%)}
     .events-section .event-dot{left: 0px; transform: translateX(0%)}
    .events-section .event-content{width: 100%;}
    ul.main-menu.active{display: block;}
    .main-menu li a{color: #333333}
    .main-menu li{width: 100%;         position: relative;
        height: auto;        flex-flow: wrap;        overflow: hidden;}
    .product-dropdown {
        position: relative;
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        display: block;
    }
    .main-menu > li:hover > .product-dropdown.active{
        display: flex;
        overflow: auto;
    }
    .dropdown{box-shadow:0 0 0 rgba(0,0,0,0.00)}
    .product-dropdown{
            display: flex;
    visibility: inherit;
    opacity: 1;
    }
    ul.dropdown {
    position: relative;
    opacity: 1;
    visibility: visible;
    background-color: #ffffff;
    padding-top: 0;
            width: 100%;
            display: none;
}
.product-dropdown{display: none;}
ul.dropdown.active, .product-dropdown.active{display: block;}
.main-menu>li>a{
    font-weight: bold;
    padding-left: 15px;
}
.main-menu ul.dropdown li a{
    padding-left: 20px;
}
.series-product-card .product-name{color: #666666;}
.series-products{padding-top: 0;}
#content .about-five{padding-top: 40px;padding-bottom: 40px;}
#content .about-five>.a-title{
    margin-bottom: 0px;
}

}
@media (max-width: 992px) {
  .products .product-card{
    width: calc((100% - 40px) / 2);
    margin-right: 0px;
  }
   .products .product-card:nth-child(2n){
    margin-right: 0;
   }
    section#home{
        height: 500px;
        display: flex;
        justify-content: center;
    }
    ul.product-series-list li {padding-left: 25px;}
    .main-menu li::after{ left: 5px;top: 6px; }
    .nybanner-text.wid{max-width: 94%;margin: auto;}
    .dropdown li::after{display: none;}
    .dropdown li a{color: #666666;}
    .arrow {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2Ij48cGF0aCBmaWxsLW9wYWNpdHk9Ii44NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxLjEwNWExIDEgMCAwIDEgMS40MTYgMEw1IDQuNjg0bDMuNTg0LTMuNTc5YTEgMSAwIDAgMSAxLjQxNiAwbC00LjY0NiA0LjY0YS41LjUgMCAwIDEtLjcwOCAweiIvPjwvc3ZnPg==);
    background-origin: content-box;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 12px;
    height: 20px;
    transition: all .3s ease;
    width: 20px;
    position: absolute;
    right: 0;
    left: auto;
    top: 10px;
}
 .contact-all .service{max-width: 90%;flex-wrap: wrap}
 #content .contact-all .service .item{width: 100%;}
 .new-all-top-left, .new-all-top-right{width: 100%!important;}
}

@media (max-width: 768px) {
    .navbar {
        padding: 0 3%;
        height: auto;
        padding: 0.5rem 3%;
    }
     
   
    .nybanner{margin-top: 40px;}

    .nav-container {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .main-menu {
        margin-left: 0;
        gap: 1rem;
        width: 100%;
        margin-top: 0rem;
        top: 40px;
                height: calc(100vh - 40px);
    }

    /* 移动端下拉菜单位置调整 */
    .dropdown, .product-dropdown {
        top: 100%;
        left: 0;
        right: 0;
        min-width: auto;
        width: 100%;
    }

    /*.hero-title {*/
    /*    font-size: clamp(1.5rem, 4vw, 2.2rem);*/
    /*}*/

    .section-heading, .core-title, .events-title, .news-title {
        margin-bottom: 1rem;
        font-size: clamp(1.2rem, 3vw, 1.6rem);
    }

    .products-section, .core-content, .events-section, .news-section {
        padding: 4rem 3% 2rem;
    }

    .footer-container {
        gap: 1.5rem;
        margin-bottom: 1rem;
    }

    .product-dropdown {
        background-color: #ffffff;
        box-shadow: 0 0 0 0 #00000000;
    }
    .product-series-list li.active{background-color:#ffffff00;color: #000000;}
    .product-series-list li{color: #000000;}
    .product-series-list{padding-top: 0;}
    .product-series-list>li::after{
        display: none;
    }

    .contact-info {
        display: none;
    }
}

@media (max-width: 600px) {
    .nybanner-text.wid h2{font-size: 18px;}
    .nybanner-text p{font-size: 14px;}
    .ocbk .oc-item{width: 94%;padding:20px 0;margin: auto;}
    .ocbk .oc-wid{flex-wrap: wrap;}
    .ocbk .oc-item img{display: none;}
    .ocbk .oc-item-text{position: relative; left: auto;bottom: auto;}
    .ocbk .oc-item:nth-child(2n){bottom: auto;}
    .ocbk .oc{height: 500px;}
    .ocbk .entspirit{height: 300px;}
    .ocbk .entspirit-all h3{font-size: 24px;}
    .ocbk .entspirit-all{width: 94%;margin: auto;}
    .ocbk .partneritem{width: 100%;margin-right: auto;}
      #content .about-three-item{    width: 100%;margin-right: 0;}
          .products .product-card {
        width:100%;
        margin-right: 0px;
    }
     .products .product-card-img{height: auto;}
}