/* ==========================================================================
   首页样式（浅蓝大气版）
   ========================================================================== */

/* ---------- Banner 文字 ---------- */
.banner-title{font-size:54px; font-weight:bold; color:#ffffff; text-shadow:0 0 18px rgba(0,102,204,.55),0 2px 6px rgba(11,37,69,.5); margin-bottom:8px; letter-spacing:2px;}
.banner-sub{font-size:40px; color:#ffffff; text-shadow:0 0 14px rgba(0,102,204,.5),0 2px 6px rgba(11,37,69,.5);}
@media(max-width:767px){
  .banner-title{font-size:26px;}
  .banner-sub{font-size:18px;}
}

/* ---------- 产品分类快捷入口（整体下移，不遮挡 banner） ---------- */
.topx{padding:48px 0 10px; background:#fff;}
.topx-list{margin:0 -14px;}
.topx-list:after{display:block; content:''; clear:both;}
.topx-item{float:left; width:25%; padding:0 14px;}
.topx-item>div{background:#f5f9ff; border:1px solid #eef4fb; border-radius:14px; padding:32px 26px; position:relative; overflow:hidden; display:flex; flex-direction:column; height:560px;}
.topx-item>div:before{content:''; position:absolute; left:0; top:0; width:0; height:4px; background:linear-gradient(90deg,#0066cc,#3498db); transition:width .4s;}
.topx-item>div:hover:before{width:100%;}
.topx-item>div>i{font-size:40px; color:#0066cc; transition:transform .4s;}
.topx-item>div:hover>i{transform:translateY(-4px) scale(1.08);}
.topx-item>div>b{display:block; font-size:30px; color:#0b2545; margin-top:14px;}
.topx-item>div>h3{font-size:16px; color:#3498db; margin:10px 0 14px 0;}
.topx-item>div>ul:after{display:block; content:''; clear:both;}
.topx-item>div>ul>li{float:left; min-width:50%; position:relative; padding-left:14px; margin-top:12px; font-size:14px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topx-item>div>ul>li>a{font-size:14px; color:#666;}
.topx-item>div>ul>li:before{position:absolute; width:6px; height:6px; border-radius:6px; content:''; left:0; top:50%; margin-top:-3px; background:#0066cc;}
.topx-item>div>ul>li>a:hover{color:#0066cc; padding-left:4px;}
.topx-item>div>span{display:block; margin-top:auto; padding-top:24px;}
.topx-item>div>span>a{display:inline-block; line-height:38px; padding:0 22px; border-radius:30px; color:#0066cc; background:#eaf3ff; font-size:14px; transition:.3s;}
.topx-item>div>span>a:hover{background:#0066cc; color:#fff; box-shadow:0 8px 18px rgba(0,102,204,.25);}
@media(max-width:1200px){
  .topx{padding-top:34px;}
  .topx-list{margin:0 -10px;}
  .topx-item{width:50%; padding:10px;}
}
@media(max-width:767px){
  .topx{padding-top:22px;}
  .topx-list{margin:0;}
  .topx-item{width:100%; padding:6px 0;}
  .topx-item>div{padding:20px 16px; height:auto;}
  .topx-item>div>b{font-size:24px; margin-top:10px;}
  .topx-item>div>ul>li{font-size:13px; margin-top:8px;}
}

/* ---------- 公司介绍：左标题+描述，右图片 ---------- */
.about{padding:78px 0; background:linear-gradient(180deg,#fff, #f5f9ff);}
.about article{display:flex; align-items:center; gap:60px;}
.about-text{flex:1; min-width:0;}
.about-desc{font-size:16px; line-height:2; color:#333; margin-bottom:16px;}
.about-intro{font-size:15px; line-height:1.9; color:#666;}
.about-text h4{font-size:21px; color:#0b2545; margin-top:22px; font-weight:bold;}
.about-text h4:before{content:''; display:inline-block; width:26px; height:3px; background:linear-gradient(90deg,#0066cc,#3498db); vertical-align:middle; margin-right:10px; border-radius:2px;}
.about-actions{margin-top:32px; display:flex; gap:16px; flex-wrap:wrap;}
.btn-line{display:inline-block; position:relative; overflow:hidden; color:#0066cc; border:1px solid #b8d4f0; border-radius:30px; padding:12px 32px; font-size:15px; background:#fff; z-index:1;}
.btn-line:after{position:absolute; left:100%; top:100%; content:''; width:0; height:0; border-radius:50%; transition:.6s; transform:translate(-50%,-50%); background:#0066cc;}
.btn-line i,.btn-line{transition:.3s;}
.btn-line i{margin-left:8px;}
.btn-line:hover{color:#fff; border-color:#0066cc; box-shadow:0 10px 24px rgba(0,102,204,.25);}
.btn-line:hover:after{width:400px; height:400px;}
.btn-line i{position:relative; z-index:2;}

.about-media{flex:1; min-width:0; position:relative; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#0b2545,#0066cc); height:420px; box-shadow:0 24px 50px rgba(11,37,69,.22);}
.about-media>i{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:90px; color:rgba(255,255,255,.28);}
.about-media>img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s;}
.about-media:hover>img{transform:scale(1.05);}
.about-badge{position:absolute; z-index:2; right:26px; bottom:26px; background:rgba(255,255,255,.94); border-radius:14px; padding:16px 22px; text-align:center; box-shadow:0 12px 28px rgba(11,37,69,.25); transition:.3s;}
.about-media:hover .about-badge{transform:translateY(-6px);}
.about-badge b{display:block; font-size:26px; color:#0066cc; font-weight:bold;}
.about-badge span{display:block; font-size:13px; color:#0b2545; margin-top:2px;}
@media(max-width:1200px){
  .about{padding:54px 0;}
  .about article{flex-direction:column; gap:34px;}
  .about-media{width:100%; height:340px;}
}
@media(max-width:767px){
  .about{padding:32px 0;}
  .about-media{height:220px; border-radius:12px;}
  .about-desc{font-size:14px; line-height:1.8;}
  .about-intro{font-size:14px;}
  .about-text h4{font-size:17px;}
  .about-badge{right:14px; bottom:14px; padding:10px 14px;}
  .about-badge b{font-size:20px;}
}

/* ---------- 产品中心：横向 tab 悬停切换 ---------- */
.product{padding:78px 0; background:#f5f9ff;}
.product-tabs{display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:2px solid #e5ecf5; padding-bottom:18px;}
.tabs-list{display:flex; flex-wrap:wrap; gap:12px;}
.tabs-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.product-tab{position:relative; cursor:pointer;}
.product-tab b{display:block; padding:11px 26px; font-size:16px; font-weight:normal; color:#333; background:#fff; border:1px solid #e5ecf5; border-radius:30px; transition:all .35s ease;}
.product-tab:hover b,.product-tab.on b{background:linear-gradient(135deg,#0066cc,#3498db); color:#fff; border-color:#0066cc; box-shadow:0 8px 20px rgba(0,102,204,.2);}
.tabs-right .product-search form{display:flex; width:230px; background:#fff; border:2px solid #0066cc; border-radius:30px; overflow:hidden; box-shadow:0 6px 16px rgba(0,102,204,.14);}
.tabs-right .product-search input{flex:1; min-width:0; border:none; height:40px; padding:0 14px; font-size:14px; background:#fff; border-radius:30px 0 0 30px;}
.tabs-right .product-search button{width:70px; border:none; background:linear-gradient(135deg,#0066cc,#3498db); color:#fff; font-size:14px; letter-spacing:1px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; transition:.3s;}
.tabs-right .product-search button:hover{background:linear-gradient(135deg,#0052a3,#0066cc);}
.tabs-right>a{display:inline-flex; align-items:center; gap:6px; color:#0066cc; font-size:15px; border:1px solid #b8d4f0; border-radius:30px; padding:10px 20px; white-space:nowrap; transition:.3s;}
.tabs-right>a i{transition:.3s;}
.tabs-right>a:hover{background:#0066cc; border-color:#0066cc; color:#fff; box-shadow:0 8px 20px rgba(0,102,204,.25);}
.tabs-right>a:hover i{transform:translateX(4px);}
.product-panels{padding-top:26px;}
.product-panel{display:none;}
.product-panel.on{display:block; animation:fadeUp .65s cubic-bezier(.22,.61,.36,1);}
.product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.product-card{display:flex; align-items:flex-start; gap:16px; background:#fff; border:1px solid #eef4fb; border-radius:14px; padding:18px 20px;}
.product-card-icon{flex-shrink:0; width:58px; height:58px; border-radius:14px; background:linear-gradient(135deg,#0066cc,#3498db); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; transition:.4s;}
.product-card:hover .product-card-icon{transform:rotate(-10deg) scale(1.08);}
.product-card-body{flex:1; min-width:0;}
.product-card-body h3{font-size:16px; color:#0b2545; font-weight:bold; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s;}
.product-card:hover .product-card-body h3{color:#0066cc;}
.pc-attr{font-size:13px; color:#999; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pc-price{margin-top:10px; font-size:14px; color:#666; border-top:1px dashed #e5ecf5; padding-top:8px;}
.pc-price i{font-style:normal; color:#0066cc; font-size:18px; font-weight:bold;}
@media(max-width:1200px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:767px){
  .product{padding:32px 0;}
  .product-tab b{padding:9px 14px; font-size:14px;}
  .product-grid{grid-template-columns:1fr; gap:10px;}
  .product-card{padding:12px 14px; gap:12px;}
  .product-card-icon{width:44px; height:44px; font-size:19px; border-radius:10px;}
  .product-card-body h3{font-size:14px;}
  .pc-attr{font-size:12px;}
}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}

/* ---------- 新闻动态 ---------- */
.news{padding:78px 0; background:#fff;}
.news-wrap{display:flex; gap:26px;}
.news-feature{flex:1.2; min-width:0; position:relative; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,#0b2545,#0066cc); height:440px; box-shadow:0 20px 44px rgba(11,37,69,.16);}
.news-feature>a{display:block; width:100%; height:100%; color:#fff;}
.news-feature>a>i{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:100px; color:rgba(255,255,255,.22);}
.news-feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s;}
.news-feature:hover img{transform:scale(1.06);}
.news-feature-mask{position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,37,69,.05) 30%,rgba(11,37,69,.86));}
.news-feature-info{position:absolute; left:0; right:0; bottom:0; padding:30px;}
.news-feature-date{display:inline-flex; align-items:baseline; gap:6px; background:rgba(0,102,204,.9); border-radius:8px; padding:6px 12px; color:#fff;}
.news-feature-date i{font-style:normal; font-size:22px; font-weight:bold;}
.news-feature-date u{text-decoration:none; font-size:12px; opacity:.9;}
.news-feature-info h3{font-size:23px; color:#fff; margin-top:14px; font-weight:bold; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.news-feature-info p{font-size:14px; color:rgba(255,255,255,.85); margin-top:10px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.news-feature-info b{display:inline-block; margin-top:16px; font-weight:normal; font-size:14px; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:20px; padding:7px 18px; transition:.3s;}
.news-feature-info b i{transition:.3s; margin-left:6px;}
.news-feature:hover .news-feature-info b{background:#fff; color:#0066cc;}
.news-feature:hover .news-feature-info b i{transform:translateX(5px);}

.news-list{flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; height:440px;}
.news-row{display:flex; align-items:center; gap:16px; background:#f5f9ff; border:1px solid #eef4fb; border-radius:12px; padding:14px 20px; transition:all .35s ease; flex:1;}
.news-row:hover{background:#fff; border-color:#b8d4f0; transform:translateX(6px); box-shadow:0 10px 24px rgba(0,102,204,.1);}
.news-row-icon{flex-shrink:0; width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,#0066cc,#3498db); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; transition:.35s;}
.news-row:hover .news-row-icon{transform:rotate(-8deg) scale(1.06);}
.news-row-body{flex:1; min-width:0;}
.news-row-body b{display:block; font-size:16px; color:#0b2545; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s;}
.news-row:hover .news-row-body b{color:#0066cc;}
.news-row-body p{font-size:13px; color:#999; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.news-row-date{flex-shrink:0; text-align:center; width:64px;}
.news-row-date i{display:block; font-style:normal; font-size:26px; color:#0066cc; font-weight:bold; line-height:1.1;}
.news-row-date u{text-decoration:none; font-size:12px; color:#999;}
@media(max-width:1200px){
  .news-wrap{flex-direction:column;}
  .news-feature{height:320px;}
  .news-list{height:auto;}
}
@media(max-width:767px){
  .news{padding:32px 0;}
  .news-feature{height:240px; border-radius:12px;}
  .news-feature-info{padding:16px;}
  .news-feature-info h3{font-size:17px;}
  .news-row{padding:12px 14px; gap:12px;}
  .news-row-icon{width:40px; height:40px; font-size:18px; border-radius:10px;}
  .news-row-body b{font-size:14px;}
  .news-row-date{width:52px;}
  .news-row-date i{font-size:20px;}
}

/* ---------- 合作伙伴 ---------- */
.join{padding:66px 0; background:#f5f9ff;}
.join-title{text-align:center; padding-bottom:34px;}
.join-title .sec-en{display:block; font-size:16px; letter-spacing:4px; text-transform:uppercase; color:#3498db; margin-bottom:6px;}
.join-title h2{font-size:36px; color:#0b2545;}
.join-title h2 em{font-style:normal; color:#0066cc;}
.join-title p{font-size:15px; color:#666; margin-top:10px;}
.join-list ul{margin:0 -10px;}
.join-list ul:after{display:block; content:''; clear:both;}
.join-list li{width:20%; float:left; padding:0 10px;}
.join-list li img{display:block; width:100%; height:104px; object-fit:contain; background:#fff; border:1px solid #e5ecf5; border-radius:12px; padding:14px; transition:.35s; filter:grayscale(100%); opacity:.75;}
.join-list li img:hover{filter:grayscale(0); opacity:1; border-color:#0066cc; transform:translateY(-6px); box-shadow:0 12px 26px rgba(0,102,204,.14);}
@media(max-width:1200px){
  .join-list li{width:33.333%; margin-bottom:16px;}
}
@media(max-width:767px){
  .join{padding:32px 0;}
  .join-title{padding-bottom:18px;}
  .join-title h2{font-size:26px;}
  .join-list li{width:50%;}
  .join-list li img{height:84px;}
}

/* ---------- 询盘表单 ---------- */
.tact{padding:70px 0;}
.tact-content{display:flex; gap:50px; background:linear-gradient(135deg,#eaf3ff,#f5f9ff); border:1px solid #e5ecf5; border-radius:20px; padding:50px; align-items:center;}
.tact-text{flex:1; min-width:0;}
.tact-text>h2{font-size:36px; color:#0b2545; font-weight:bold;}
.tact-text>h2 b{color:#0066cc; font-weight:bold;}
.tact-text>p{font-size:17px; color:#666; margin-top:16px;}
.tact-text>h3{font-size:21px; color:#0b2545; margin-top:30px; font-weight:bold;}
.tact-text>h4{display:block; margin-top:10px; font-weight:bold; font-size:34px; color:#0066cc; letter-spacing:1px;}
.tact-contact{margin-top:26px; display:flex; gap:14px; flex-wrap:wrap;}
.tact-contact a{display:inline-flex; align-items:center; gap:8px; background:#0066cc; color:#fff; border-radius:30px; padding:12px 26px; font-size:15px; transition:.3s;}
.tact-contact a i{font-size:17px;}
.tact-contact a:hover{background:#0b2545; transform:translateY(-4px); box-shadow:0 12px 26px rgba(11,37,69,.25);}
.tact-form{flex:1; min-width:0;}
.tact-form>div{background:#fff; border-radius:16px; padding:34px; box-shadow:0 18px 40px rgba(11,37,69,.1);}
.tact-form h2{font-size:24px; color:#0b2545; margin-bottom:22px; font-weight:bold; padding-left:12px; border-left:4px solid #0066cc;}
.tact-form dt{display:none;}
.tact-form dd{margin-bottom:16px;}
.tact-form input{height:46px; border-radius:8px; background:#f7fbff;}
.tact-form button{width:100%; color:#fff; border:none; line-height:46px; padding:0 30px; font-size:16px; border-radius:30px; cursor:pointer; transition:.3s; background:linear-gradient(135deg,#0066cc,#3498db); letter-spacing:2px;}
.tact-form button:hover{box-shadow:0 12px 26px rgba(0,102,204,.3); transform:translateY(-3px);}
@media(max-width:1200px){
  .tact-content{flex-direction:column; padding:36px;}
  .tact-form>div{margin-top:0;}
}
@media(max-width:767px){
  .tact{padding:32px 0;}
  .tact-content{padding:20px 14px; border-radius:14px;}
  .tact-text>h2{font-size:26px;}
  .tact-text>h3{font-size:17px; margin-top:20px;}
  .tact-text>h4{font-size:26px;}
  .tact-form>div{padding:20px 16px;}
}

.about article:after{display:none;}

@media(max-width:767px){
  .product-tabs{flex-direction:column; align-items:stretch; gap:12px;}
  .tabs-list{justify-content:flex-start; gap:8px;}
  .product-tab b{padding:8px 16px; font-size:14px;}
  .tabs-right{flex-direction:column; align-items:stretch; gap:10px;}
  .tabs-right .product-search form{width:100%;}
  .tabs-right>a{align-self:flex-start; padding:9px 18px;}
}