.container{max-width:1200px;}

/*网站公共样式*/
.info-content{line-height:2.5;}
a{color:#333;text-decoration:none;}                                            
a:hover{color:#F6C043;}
a:focus{color:#000;}
a.btn-more{transition:all 0.3s ease;-moz-transition:all 0.3s ease; /* Firefox 4 */-webkit-transition:all 0.3s ease; /* Safari and Chrome */-o-transition:all 0.3s ease; /* Opera */}
.banner{height:500px\9!important;overflow:hidden\9!important;overflow:hidden;} /*兼容ie低版*/
.text-green{color:#006ab8;}
/*遮罩层*/
.mask-bg{position:fixed;width: 100%;height:100%;display:none;height:100vh;background-color: rgba(0, 0, 0, .7);overflow:hidden;z-index:100;top: 0;left: 0;}
.mask-bg.active{display:block;}
/*首页模块样式*/
.product-module-box {position:relative;}
.module-title{clear:both;text-align:center;margin:30px 0px 30px 0px;}
.module-title .cn-title{display:block;color:#333;line-height:48px;font-family: SimSun;font-weight: bold;}
.module-title span{font-size: 18px;background:url(../images/24tel.png) no-repeat center left;background-size: 34px;padding: 20px 0 20px 50px;}
/*自定义导航动画，也可以用animater.css中的动画，需要在script.js中修改*/
.nav .animated,.sub-nav .animated{animation-duration:0.4s;-webkit-animation-duration:0.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.navSlide{animation-name:navSlide;-webkit-animation-name:navSlide;}
@keyframes navSlide{0%{transform:translateY(100%);-webkit-transform:translateY(100%);-ms-transform:translateY(100%);-moz-transform:translateY(100%);-o-transform:translateY(100%);opacity:0;visibility:visible;}100%{transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);opacity:1;}}
@-webkit-keyframes animal{0%{transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg)}
100%{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg)}
}.zhuandong{-webkit-animation:animal 15s infinite linear;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center}


/*主菜单*/
@media (min-width:1000px) /*pc端*/
{
.logo-box{text-align:left;}
.topborder{position: relative;top: 35px;padding-left:0;padding-right:0;}
.topborder .toptel .box{line-height: 0px;}
.topborder .toptel .box img{max-width:24px;}
.topborder .toptel .box span{padding-left:10px;}
.header .topnav{padding-top: 40px;}

/* 主导航栏 - 现代化样式 */
/* 导航栏 - 初始状态（在顶部时）*/
.nav-bg {
    background: #F4F5F7 !important;  /* 👈 非常浅的灰色 */
    backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 998;
    transition: all 0.3s ease;
    border-bottom: 1px solid #e8eaed !important;  /* 👈 淡边框 */
}

/* 滚动后：白色半透明毛玻璃 */
.nav-bg.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(0px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.nav {
    width: 100%;
}

.nav>ul>li {
    float: left;
    text-align: center;
    line-height: 48px;
    width: 12.5%;
    position: relative;
}

.nav>ul>li>a {
    color: #334155;
    font-size: 16px;
    display: block;
    padding: 0 15px;
    border-radius: 12px;
    margin: 8px 5px;
    transition: all 0.3s ease;
    font-weight: 500;
}

/* 悬停效果 - 渐变背景 */
.nav>ul>li>a:hover {
    background: #333!important;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 当前页高亮 */
.nav>ul>li.current>a {
    background:#333!important;
    color: #fff;
}
/* 二级菜单 - 隐藏状态 */
.nav ul li ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    top: 100%;
    width: 200px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-top: 10px;
    z-index: 999;
}

/* 悬停时显示二级菜单 - 平滑渐入 */
.nav ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 二级菜单项 */
.nav ul li ul li {
    width: 100%;
    float: none;
}

.nav ul li ul li a {
    display: block;
    width: 100%;
    text-align: left;
    color: #334155;
    font-size: 15px;
    line-height: 50px;
    padding: 0 20px;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 5px 10px;
    width: calc(100% - 20px);
}

.nav ul li ul li a:hover {
    background: linear-gradient(135deg, #616161 0%, #424242 100%);
    color: #fff;
    padding-left: 25px;
    transform: translateX(3px);
}

/* 二级菜单小箭头装饰 */
.nav ul li ul::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}

/* 三级菜单 */
.nav ul li ul li ul {
    left: 100%;
    top: 0;
    transform: translateX(10px);
    margin-top: 0;
    margin-left: 10px;
}

.nav ul li ul li:hover > ul {
    transform: translateX(0);
}
.el-input-group {width: 50%!important;}

footer{margin-top:30px;}
.bg-black{padding-top:30px;}
.bg-black .left img{min-width: 130px;}
.contact .title{font-size:22px}
}

@media (max-width:1000px) /*手机端*/
{
.header {background-color: #196EBB;border-bottom: 1px solid #11497B;}
.header .container .row{}
.header .logo a {display: block;max-width: 80%;}
.header .logo img{max-height:52px;max-width: 90%;}
.header .nav-toggle{position:absolute;right:0;top:-2px;font-size:25px;min-width:60px;height:60px;line-height:60px;text-align:center;cursor:pointer;z-index:1;}
.header .nav-toggle.active{color:#ccc;}
.nav-toggle{position: absolute;top: 24px;right: 20px;}
.nav-toggle .fa{font-size: 24px;color: #fff;}

.nav{position:fixed;z-index:999;top:0px;right:0px;width:0px;background:#fff;height:100%;height:100vh;opacity:0;transition: all 0.2s linear;overflow-y:auto}
.nav.active{opacity:1;width:300px;max-width:60%}
.nav ul li{line-height: 45px;text-align:left}
.nav ul li ul{display:none;} /*二级ul样式*/
.nav ul li a{padding-left:30px;display:block;color:#999;font-size:15px;line-height:3.5;border-bottom: 1px solid #dcdcdc}
.nav ul li ul li a{padding-left:40px;font-size:13px;background-color:#eeeeee}
.nav ul li ul li ul li a{padding-left:70px;}
.nav ul li ul li ul li li a{padding-left:120px;}
.nav ul li{position:relative;}
.nav ul li .arrow{position:absolute;right:0px;top:0px;width:50px;height:50px;line-height:50px; text-align:center;transition-duration:0s}
.nav ul li .arrow:after{font-family:FontAwesome;content:"\f105";display:block;font-weight:bold;font-size:18px}
.nav ul li.current > a{color:#5a342b;}
.nav ul li.active > ul{display:block}
.nav ul li.active > .arrow{transform:rotate(90deg)}

.wpsidebar-fkf {display:none;}

.contact .title{font-size:20px;}
.contact .title li{line-height:1.5;}
.bg-black{padding-top:38px;}
.bg-black .left{margin-bottom:20px;text-align:center;}
}

/*TOP*/
.header .top-center{font-size: 15px;margin-top: 30px;border-left: 1px dashed #2b41a4;padding-left: 20px;}
.header .top-center span{font-size: 15px;display: block;font-weight: normal;}
.header .top-right{text-align: right;margin-top: 6px;}
.header .top-right img{max-width: 54px;padding-top: 10px;}
.header .top-right ul{text-align: left;line-height: 1.2;position: relative;top: 18px;display: inline-block;}
.header .top-right ul li:last-child{color: rgb(43, 65, 164);font-weight: bold;font-size: 24px;}

/*FOOTER*/
footer{width:100%;line-height:2.5;}
.footernav>ul>li>a{color:#bbbbbb;}
.footernav>ul>li>ul>li{display:none!important;}
.copyright-bg .box a,.copyright-bg .box{font-size:13px;}
.copyright-bg .box a:hover{text-decoration:underline;}
.copyright a:hover{text-decoration:underline;color:#fff;}
.hotline{padding: 40px;font-size: 16px;}
.hotline img{padding-right: 10px;}
.hotline span{color: #dc214c;font-size: 25px;font-family: "Impact";}
.nav-bg{background-color:#000;color: #6F7172;}
.timm{color:#5a5a5a;font-size:12px;}
.appli{height: 40px;line-height: 40px;font-size: 24px;color: #fff;}
.footerright{border-right: 1px solid #4F4F4F;}
.contact{text-align:right;}
.contact .title{line-height: 40px;font-size: 24px;color: #fff;}
.contact ul li{color: #8e8d8d;font-size: 12px;}
.copyright-bg{color: #8e8d8d;}
.copyright-bg a{color: #8e8d8d;}
.nline a{text-align: center;background-color:none;-moz-border-radius: 30px 30px 30px 30px;-webkit-border-radius: 30px 30px 30px 30px;border-radius: 30px 30px 30px 30px;color:#fff;border: 1px solid #5a5a5a;}
.nline a.btn-more{transition:all 0.5s ease;-moz-transition:all 0.5s ease; /* Firefox 4 */-webkit-transition:all 0.5s ease; /* Safari and Chrome */-o-transition:all 0.5s ease; /* Opera */}
@media (min-width:1000px) {
.nline a{padding:7px 56px;}
.nline a:hover{background: #F6C042;color: #000;}
.bg-black{background-color:#000;}
}
@media (max-width:1000px) {
.nline{margin-top:20px;text-align:center;}
.nline a{padding: 8px 30px;}
.bg-black{padding: 15px 10px;background-color: #f1f2f3;color: #333;font-size: 13px;}
.kefu{background: url(../images/kefu_icon.png) 0 center no-repeat;font-size: 18px;color: #e65844;padding-left: 33px;line-height: 82px;}
.tibox a{font-weight: bold; color: #e65844;font-size: 18px;}
.copyright-bg .box a,.copyright-bg .box{color:#000;font-size:13px;}
.copyright-bg a{color:#000;}
}

/*Pc端固定客服*/
.wpsidebar-fkf{position:fixed;right:10px;top:50%;transform:translate(0,-50%);z-index:9999;}
.fkf-item{position:relative;width:50px;height:50px;border:1px solid #ccc;padding:10px;background-color:#fff;margin-bottom:6px;box-sizing:border-box;cursor:pointer;}
.fkf-item img{width:30px;height:30px;}
.fkf-item img.hover{display:none;}
.fkf-item:hover>img{display:none;}
.fkf-item:hover img.hover{display:block;}
.fkf-cart>span{position:absolute;display:block;width:24px;height:24px;border-radius:50%;background-color:#ff6600;color:#fff;left:-12px;top:-12px;text-align:center;line-height:24px;}
.fkf-item-right{position:absolute;right:35px;padding-right:25px;top:-15px;display:none;}
.fkf-item:hover .fkf-item-right{display:block;}
.fkf-item-right-content{width:430px;border:1px solid #ccc;border-top:4px solid #ff7011;padding:20px;padding-top:15px;background-color:#fff;-webkit-box-shadow:0 3px 8px rgba(0,0,0,.15);-moz-box-shadow:0 3px 8px rgba(0,0,0,.15);box-shadow:0 3px 8px rgba(0,0,0,.15);position:relative;font-family: 宋体;}
.fkf-item-right-content .arrow,.right-content-ewm .arrow{position:absolute;width:20px;height:20px;right:-15px;top:23px;z-index:20;}
.fkf-item-right-content-top{padding-bottom:10px;padding-top:10px;padding-left:70px;border-bottom:1px solid #ccc;position:relative;white-space:nowrap;overflow:hidden;}
.fkf-item-right-content-top img{position:absolute;left:0;top:20px;width:40px;height:40px;}
.fkf-item-right-content-top h2{font-size:22px;font-weight: bold;color: #ff7011;}
.fkf-item-right-content-bottom p{padding-top:15px;padding-bottom:15px;}
.fkf-item-right-content-bottom .content-bottom-item{display:inline-block;width:32%;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;}
.content-bottom-item img{width:25px;height:25px;margin-right:5px;background-color:#333;vertical-align:top;}
.content-bottom-item span{display:inline-block;line-height:25px;}
.content-bottom-item a:hover{color:#ff7011;}
.content-bottom-item:hover img{background-color:#ff6800;}
.content-bottom-item:hover span{color:#ff6800}
.right-content-tele{width:300px;}
.right-content-tele .fkf-item-right-content-top:last-child{border-bottom:0;padding-bottom:0;padding-top:10px;}
.right-content-ewm{padding:20px;background-color:#fff;border:1px solid #ccc;-webkit-box-shadow:0 3px 8px rgba(0,0,0,.15);-moz-box-shadow:0 3px 8px rgba(0,0,0,.15);box-shadow:0 3px 8px rgba(0,0,0,.15);position:relative;display:flex;flex-direction:row;width:max-content;}
.right-content-ewm .ewm div{width:130px;height:130px;margin:0 auto;border-radius:50%; margin-bottom:10px}
.right-content-ewm .ewm div img{width:100px;height:100px;margin-top:15px;margin-left:15px;background:#fff;}
.right-content-ewm .ewm p{text-align:center;font-size:16px;color: #ff7011;}
.fkf-item-right-ewm{top:initial;bottom:-15px;}
.right-content-ewm .arrow{top:initial;bottom:23px;}
/*移动端固定栏目按钮*/
.float-nav-toggle{display: block;text-align: center;position: fixed;left: 6px;bottom: 60px;color: #fff;font-size: 18px;width: 40px;height: 40px;line-height: 40px;background-color: rgba(13, 13, 13, 0.6);border-radius: 20px;z-index: 4;}
@media (max-width: 767px) {.display-xs-block{display: block !important;}}
/*手机端固定导航栏*/
.footer-fixed{position:fixed;left:0;bottom:0;overflow:hidden;width:100%;padding:6px 0px 2px;color:#fff;z-index:4;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-top: 0.2rem solid #000;background: #fff;}
.footer-fixed ul{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;text-align: center;}
.footer-fixed ul li a{width:100%;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size: 13px;}
.footer-fixed ul li p{font-size:1.3rem;}
.footer-fixed.active{transform:translateX(2.8rem);z-index:9;}
.footer-fixed2{font-size: 2.8rem;padding-top: 0.6rem;}
.footer-fixed i{display:block;}
.footer-fixed .fa{font-size:22px;}
@media (min-width:1000px){.footer-fixed{display:none!important;}}
@media (max-width:1000px){footer{margin-bottom:30px;}}
  

/*公共样式*/
.breadcrumb li img{width: 26px;position: relative;top: -2px;margin: 26px 0;}
.breadcrumb > li + li::before{content: ">>";}
.breadcrumb{border-bottom: 1px solid #ccc;margin-bottom: 20px;}
.card1{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: block;}
.card2{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;height: 40px;}
.page ul li .fa{padding-right: 10px;}
.page ul li:hover a,.page ul li:hover{color: #0488CD;}
.font-size-13{font-size:13px;}
.home-gallery-thumbs{background:url(../images/transparent_bg.png) repeat;}
.home-gallery-thumbs .swiper-button-prev{background:url(../images/arrow-ll.png) no-repeat left center;}
.home-gallery-thumbs .swiper-button-next{background:url(../images/arrow-rr.png) no-repeat left center;}

/*图片列表*/
.images-list .row .item a{display:block;overflow:hidden;}
.images-list .row .item .img{border: 1px solid #ddd;}
.images-list .row .item img{display:block;width:100%;height:auto;-moz-transition: 1.2s;}
@media (min-width:1000px) {.images-list .row .item a:hover img{-moz-transform: scale(1.2);}}

/*子栏目样式*/
.sub-nav-box {clear: both;position: relative;}
.sub-nav-box .sub-nav-title{height: 108px;line-height: 108px;text-align: center;color: white;}
.sub-nav-box .sub-nav-title .box{border-bottom: 4px solid #1985d4;}
.sub-nav-box .sub-nav{clear:both;text-align:left;margin-bottom:20px;width: 222px;overflow:visible;background:#000;margin-left: 24px;}
.sub-nav-box .sub-nav li{width:100%;padding:0px;text-align:left;position:relative;display:block;}
.sub-nav-box .sub-nav li a{display:block;color:#fff;border-bottom:1px solid #fff;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: block;font-size: 16px;padding-left: 20px;}
.sub-nav-box .sub-nav li a:hover{color: #222;background: #F6C043;}
.sub-nav-box .sub-nav li ul{display:none}
.sub-nav-box .sub-nav li ul li a{padding-left:55px;}
.sub-nav-box .sub-nav li ul li ul li a{padding-left:85px}
.sub-nav-box li .arrow{position:absolute;right:0px;top:0px;width:54px;height:54px;line-height:54px; text-align:center;transition-duration:0.1s;cursor:pointer}
.sub-nav-box li .arrow:after{font-family:FontAwesome;content:"\f105";display:block;font-weight:bold;font-size:18px}
.sub-nav-box .sub-nav li.current > a{color: #222;background: #F6C043;}
.sub-nav-box .sub-nav li.active > ul{display:block}
.sub-nav-box .sub-nav li.active > .arrow{transform:rotate(90deg)}
.svb-nn{background:url(../images/pwb3.jpg)no-repeat center;}
.sub-same-box{text-align: center;margin-bottom: 40px;}
.sub-same-box .sub-nav{background-color:#006ab8;}
.sub-same-box .sub-nav>ul>li{text-align:center;line-height:50px;display: inline-block;}
.sub-same-box .sub-nav>ul>li>ul{position:absolute;}
.sub-same-box .sub-nav>ul>li>a{padding:15px 38px;background-color: #006ab8;color: #fff;}
.sub-same-box .sub-nav >ul>li.active >a,.sub-same-box .sub-nav >ul>li>:hover a{background-color: #04528b;}
.sub-same-box .sub-nav li:hover> ul{display:block;}
.sub-same-box .sub-nav ul li ul li a{display:block;width:100%;text-align:center;color:#fff;line-height:50px} 
.sub-same-box .sub-nav ul li ul li a:hover{text-decoration:none;color:#fff;background:#006ab8;}


/*分页样式*/
@media (min-width:1000px) {
.sub-nav-box .sub-nav-title {font-size: 30px;}
.sub-nav-box .sub-nav-title p{background:url(../images/ngbg.jpg)no-repeat bottom center;height: 80px;line-height: 100px;}
.sub-nav-box .sub-nav-title .box{margin: 20px 15px 10px;padding-bottom: 24px;}
.sub-nav-box .sub-nav li a{line-height:57px;}
}
@media (max-width:1000px) {
.sub-nav-box{margin-bottom: -20px;}
.sub-nav-box .sub-nav-title {font-size: 18px;}
.sub-nav-box .sub-nav-title .box{margin: 10px 15px 4px;padding-bottom: 10px;}
.sub-nav-box .sub-nav li a{line-height:40px;}
}
/*分页-产品中心*/
.product-box li{text-align: center;padding-bottom:30px;}
.product-box li .title{line-height:1.5;padding:10px;font-size: 12px;}
.product-box li a.title:hover{color:#F6C043;}
.product-box li .listprice,.product-box li .peice{color: #acacac;}
.product-box li .listprice span{text-decoration: line-through;color: #666;padding-left: 4px;}
.product-box li .peice span{color: #ff3c00;padding-left: 4px;}
@media (min-width:1000px) {.product-box .div-imgs{ position:relative;border: 1px solid #ececec;}}
/*产品中心-内页*/
.pide{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.box-border{border-bottom:1px solid #dfdfdf;padding-bottom: 10px;}
.bbx p{padding: 3px 0;}
.downward{background:url(../images/view_more_bg.gif)no-repeat left;padding-left: 30px;}
.bshare-custom p{display: inline-block;padding-right: 10px;}
.bshare-custom a{padding-left: 25px;}
.current-page{margin-bottom: 10px;}
.current-page p{clear: both;text-align: left;border: 1px solid #e5e5e5;border-top: 1px solid #ff7300;padding: 10px;}
/*按钮*/
a.more{transition:all 0.5s ease;-moz-transition:all 0.5s ease; /* Firefox 4 */-webkit-transition:all 0.5s ease; /* Safari and Chrome */-o-transition:all 0.5s ease; /* Opera */}
.offer a{text-align: center;background-color:#dc214c;color:#fff;}
.offer a:hover{background-color:#c4173f;}
@media (min-width:1000px) {
.offer{margin-top:10px;}
.offer a{width: 237px;height: 40px;line-height: 40px;display: block;}
}
@media (max-width:1000px) {
.offer{margin-top:20px;text-align:center;}
.offer a{width: 237px;height: 40px;line-height: 40px;display: block;}
}


/*首页样式*/
@media (min-width:1000px){
.soft-bg{margin: 50px 0;}
/*关于美成*/
.reason-bg{background:url(../images/advantages_bg.png)no-repeat center;height: 1551px;position: relative;}
.reason-bg .reason{font-size: 20px;font-weight: bold;color: #e03b61;padding: 10px 0;}
.reason-bg .box-1 p{background:url(../images/advan_p_bg.png)no-repeat 15px 5px;width: 480px;padding-left: 40px;margin-top: 18px;}
.reason-bg .box-2{padding: 50px 0;position: relative;left: 140px;top: 150px;}
.reason-bg .box-3{position: relative;left: -70px;top: 430px;padding: 50px 0;}
.reason-bg .box-4{position: relative;left: 140px;top: 500px;padding: 50px 0;}
.reason-bg .box-5{position: relative;padding: 50px 0;top: 770px;left: -70px;}
.online{margin: 30px auto;}

/*首页-关于美成*/
.soft-bg{background:url(../images/sy_gy_titbg.png)no-repeat center;text-align:center;color: #666666;}
.soft-bg .about{font-size: 22px;height: 40px;line-height: 35px;font-weight: bold;margin-left: 110px;}
.soft-bg .tabe{margin-top: 10px;display: block;margin-left: 55px;font-size: 33px;font-weight: bold;}
.fs_tit{ position:relative;}
.fs_tit img{display:block;width:100%;}
.fs_tit .mask{color: #fff;width:95%;height:100%;background:#07376373;position:absolute;top:0;left:16px;overflow:hidden;display:flex;justify-content:center;align-items:center; opacity:0;font-size: 40px;}
.fs_tit:hover .mask{opacity:1;}
.fs_tit .mask .fa{color:#fff;font-size:40px;}
.company{border-bottom: 2px solid;padding-bottom: 16px;font-size: 26px;}
.company p{color: #A2A2A2;font-size: 13px;}
.com-title{text-align: left;text-indent: 2em;margin-top: 11px;line-height: 30px;}
.com-more{width: 120px;height: 30px;line-height: 30px;display: block;float: right;text-align: center;background: #073763;}
.com-more a{color: #FFF;}
.com-more:hover{background: #f6c043;color: #FFF;}

.quality{margin: 50px 0;position: relative;}
.quality a{background:url(../images/abg.jpg)no-repeat;width: 177px;height: 90px;display: block;position: absolute;right: 70px;bottom: -40px;}
.quality a:hover{background:url(../images/abg_h.jpg)no-repeat;}
.quality img{padding: 0 15px;}
.quality2{text-align: right;position: relative;}
.quality2 a{background:url(../images/abg.jpg)no-repeat;width: 177px;height: 90px;display: block;position: absolute;bottom: 30px;left: -60px;}
.quality2 a:hover{background:url(../images/abg_h.jpg)no-repeat;}
.quality2 img{width: 400px;height: 500px;}

/*小标题*/
 .ip-cpxq{border-bottom: 0;font-size: 16px;font-weight: bold;text-align: left;line-height: 1;color: #333;width: 100%;border-left: 5px solid #fe0000;padding-left: 10px;margin:30px 15px;}

/*材料*/
.cience{background:url(../images/fl_1.jpg)no-repeat center;padding: 30px;}
.cience div{font-size: 12px;}
.cience p{padding: 20px 0;}
.cience2{background:url(../images/fl_2.jpg)no-repeat center;padding: 30px;}
.cience2 div{font-size: 12px;}
.cience2 p{padding: 20px 0;}
.cience3{background:url(../images/fl_3.png)no-repeat center;padding: 30px;}
.cience3 div{font-size: 12px;}
.cience3 p{padding: 20px 0;}

/*分类*/
.terial{background:url(../images/titbg.png)no-repeat center;text-align: center;margin-bottom: 20px;font-size: 45px;color: #000;}
.terial p{height: 30px;line-height: 30px;font-size: 24px;color: #999;}
.gories ul{background: #000;height:40px;overflow:hidden}
.gories ul li{display:inline-block;}
.gories ul li a{float: left;width: 120px;height: 40px;line-height: 40px;text-align: center;background: #000;color: #FFF;font-weight: bold;}
.gories ul li a:hover{background: #F6C043;color: #000;}
/*推荐*/
.commend{margin-bottom:30px;}
.commend .border-box{border: 1px #ddd solid;margin-bottom: 30px;}
.commend .border-box:hover{border: 1px solid #F6C043;}
.commend .border-box img{padding: 15px;}
.commend .border-box .title{padding: 0 15px;}

/*导热硅胶*/
.heart{height: 240px;background: url(../images/drguijiaodian_bg.jpg) no-repeat center top;color: #fff;text-align: center;margin-left: 15px;margin-right: 15px;}
.heart .box{width: 435px;margin-left: 388px;padding-top: 20px;}
.heart .box2{text-align: left;padding-left: 30px;padding-top: 10px;}
.heart a{color: #fff;}
.heart a:hover{color: #f6c044;}

/*tab*/
.display-block{display:block;}
.display-none{display:none;}
.tabbox{position: relative;}
.tabbox .tab-title{}
.tabbox .tab-title ul li{display:inline-block;font-weight:bold;cursor: pointer;}
.tabbox .tab-title ul li.select{background:url(../images/news_ul_bg.png)no-repeat;background-position: 0 -45px;text-align: center;color: #f6c044;}
.tabbox .tab-title ul li.select a {color: #fff;}
.tabbox .tab-content{padding-right: 33px;}
.tabbox .tab-content .tab-more{position: absolute;right: 10px;top: 10px;}
.tabbox .tab-title ul li{padding: 10px 40px;font-size: 15px;background: url(../images/news_ul_bg.png)no-repeat;width: 243px;height: 45px;text-align: center;}

.pa_text .item{padding:10px 0;border-bottom:1px solid #ddd;}
.pa_text .item:not(:nth-child(1)){position: relative;padding-right: 100px;border:none}
.pa_text .title{display:block;line-height:1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.pa_text ul li:nth-child(1) .title{display:block;font-weight:bold;font-size:16px;line-height:2;font-size:20px;}
.pa_text ul li:nth-child(1) .date{line-height:2;font-size:12px;}
.pa_text ul li:not(:nth-child(1)) .date{position: absolute;right: 0px;color: #999;top: 0px;line-height: 2.5;}
.pa_text .intro{line-height:2;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.pa_text ul li:not(:nth-child(1)) .intro{display:none;}

/*友情链接*/
.blogroll {border-top: 1px solid #ccc;padding-top: 10px;margin-top: 30px;}
.blogroll ul{display:inline-block;}
.blogroll ul li{display:inline-block;padding-right: 5px;}
.blogroll ul li a{color: #999;}
.blogroll ul li a:hover{color: #F6C043;}
.blogroll span{padding-right: 10px;font-size: 16px;display:inline-block;}

}
@media (max-width:1000px){
.soft-bg{padding: 20px 0 40px}
.module_title{overflow:hidden;text-align:left;background-color:#196EBB;font-weight: bold;padding-left: 10px;color: #fff;line-height: 40px;font-size: 16px;margin-top: 10px;}
.module_title b{line-height:40px;float:right;padding-right:10px;}
.module_title b a{color:#efefef;}
.commend{margin-top:10px;}
}

/*手风琴--新闻滑动栏目*/
@media(max-width:1000px){
.wordsmovebox .movebox li h4 i{font-style: normal;color: #0079cf;}
.wordsmovebox .movebox .pra_active h4{color:#000;background: #e3e3e3;}
.movebox{ width: 100%;margin: 0 auto; overflow: hidden; display: block;}
.movebox .pra_active h4{color:#fff;}
.movebox li h4{border-radius:2px;}
.movebox .pra_con > li{ overflow: hidden;padding-bottom: 5px;}
.movebox .pra_con .s1{border-bottom: 1px solid #D8D8D8;}
.movebox .pra_con .s1:not(:nth-child(1)){border-top: 1px solid #FFFFFF;}
.movebox .pra_con h4{cursor: pointer;position: relative;font-weight: normal;}
.movebox .pra_pro{ display: none; padding: 10px 0;}
.movebox .pra_pro{line-height: 1.5;}
.movebox .pra_con h4{font-size: 13px;height: 45px;line-height: 45px;}
.movebox .pra_active h4,.movebox li h4{background-position-x:10px;}
.movebox .pra_pro{font-size:13px;}
.wordsmovebox .movebox li h4{font-weight:bold;padding-left: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.wordsmovebox .movebox li .title{position: relative;padding-right:70px;line-height:2.1;padding-left:15px}
.wordsmovebox .movebox li .title p{padding-left:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:23px;}
.wordsmovebox .movebox li .date{position: absolute;right: 0px;color: #999;top: 2px;padding-right: 10px;}
.wordsmovebox .movebox li h4 i{font-size: 14px;position: absolute;top: 0;right: 0;display: block;width: 50px;text-align: center;}
.wordsmovebox .movebox li.pra_active h4 i{background-size: 10px;}
.maxmovebox .wordsmovebox .movebox li h4 i{padding-left: 16px;font-size: 13px;position: absolute;top: 20px;right: 0;padding-right: 0;background-size: 16px;}
.maxmovebox .wordsmovebox .movebox li.pra_active h4 i{padding-left: 16px;font-size: 13px;position: absolute;top: 20px;right: 0;padding-right: 0;background-size: 16px;}
}

/*联系我们*/
.cont{line-height: 40px;}
.pdcin{padding-top: 10px;padding-bottom: 10px;}
.dress{border-bottom: 1px solid #DDD;border-top: 1px solid #DDD;padding-top: 20px;}
.dress .adss{font-size: 20px;padding-left: 40px; background:url(../images/lx_t1.png)no-repeat left;height: 45px;display: block;}
.dress2 {padding-top: 20px;border-bottom: 1px solid #DDD;}
.dress2 .adss2{font-size: 20px;padding-left: 40px; background:url(../images/lx_t2.png)no-repeat left;height: 45px;display: block;}
/*sub-联系我们*/
.wectan {margin-left: 23px;font-size: 12px;margin-right: 23px;}
.wectan .cc{height: 50px;line-height: 50px;font-size: 20px;border-bottom: 1px #666 solid;margin-bottom: 10px;}
.wectan .ctondss{background:url(../images/dh_l1.png)no-repeat left top;padding-left: 20px;}
.wectan .ctondss2{background:url(../images/dh_l6.png)no-repeat left;padding-left: 20px;margin: 5px 0;}
.wectan .ctondss3{background:url(../images/dh_l5.png)no-repeat left;padding-left: 20px;margin: 5px 0;}
.wectan .ctondss4{background:url(../images/dh_l3.png)no-repeat left;padding-left: 20px;margin: 5px 0;}
.wectan .ctondss5{background:url(../images/dh_l4.png)no-repeat left;padding-left: 20px;margin: 5px 0;}
@media (min-width:1000px) {}
@media (max-width:1000px) {.picc-bg{background: #ebebeb;}}
/*sub-热门文章*/
.articles{margin-left: 23px;font-size: 12px;margin-right: 23px;}
.articles .pular{height: 50px;line-height: 50px;font-size: 20px;border-bottom: 1px #666 solid;margin-bottom: 10px;}
.pa_newsModule_1 .item{position:relative;border-bottom:1px dashed #ccc;}
.pa_newsModule_1 .item .title{font-size:14px;color:#474747;line-height:40px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pa_newsModule_1 .item .title:hover{color:#1e50ae;}

/*新闻中心--日期*/
.pa_textlist_4 .title{font-size:18px;margin-bottom:4px;display:block;font-weight: bold;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.pa_textlist_4 .introduct{text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:26px;height:52px;color:#666;}
/*内页*/
.account2{text-align:center;padding: 10px;}
@media (min-width:1000px) {
.pa_textlist_4 .item .layout{padding-left: 0;}
.pa_textlist_4 .date-top{background:#F6C043;height:30px;color:#fff;font-weight:bold;line-height:30px;text-align:center;font-size:25px;padding: 10px 0;}
.pa_textlist_4 .date-bottom{background:#F6C043;line-height:30px;color:#fff;text-align:center;padding: 10px 0;}
.pa_textlist_4 .item{padding:20px 0;border-bottom:1px solid #ddd;}

}
@media (max-width:1000px) {
.pa_textlist_4 .date-top{background:#F6C043;height:30px;color:#fff;font-weight:bold;line-height:30px;text-align:center;font-size:20px;padding: 10px 0;}
.pa_textlist_4 .date-bottom{background:#F6C043;line-height:30px;color:#fff;text-align:center;padding: 10px 0;font-size:12px;}
.pa_textlist_4 .item{padding:10px 0;border-bottom:1px solid #ddd;}

}

/*新闻中心-列表*/
.pa_textlist_8 .item{padding:10px 0;border-bottom:1px dashed #ddd;}
.pa_textlist_8 .title{display:block;font-weight:bold;font-size:14px;line-height:2;}
.pa_textlist_8 .date{line-height:2;font-size: 12px;}
.pa_textlist_8 .intro{line-height:2;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size: 12px;}
@media(max-width:768px){
.pa_textlist_8 .intro { text-overflow: -o-ellipsis-lastline;  overflow: hidden;  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;   line-height: 26px;  height: 52px;  }
}
/*分享*/.bshare-custom{display: inline-block;}
/*TOP*/
@media (min-width:1000px){.header-top{color:#5a5a5a;background:url(../images/nav_bg.jpg);font-size:12px;line-height: 20px;border-bottom: 1px solid #ddd;}}

/*搜索--首页*/
.s-banner{min-height:224px;background:url(../images/bgg.png) no-repeat left top;background-size:cover;}
.ss-box{position:relative;margin:60px auto;border:1px solid #6F7172;background:#fff;width:100%;height:30px;}
.ss-box .s-input{width:100%;outline:none;border:none;line-height:28px;padding-left:0px;background-color:transparent;}
.ss-box .s-btn{position:absolute;right:-15px;top:-1px;background:url(../images/ssbgs.png) no-repeat center center #202020;width:52px;height:30px;color:#fff;cursor:pointer;font-weight:bold;line-height:32px;outline:none;border:none;}
.search{background:rgb(247, 247, 247);}
.search .ss-box{margin:0px auto;}
.search .font span{cursor:pointer;color: red;margin-left: 10px;}
.search .font span:hover{color:#F60;}

/*在线客服*/
.zaixian{position:fixed;bottom:440px;right:0px;z-index:9;}
.zaixian .zaixian_com{position:relative;width:50px;height:80px;}
.zaixian_com .zxzx_pic1{position:absolute;right:0px;top:0px;}
.zaixian_com .zxzx_pic2{position:absolute;right:-190px;top:-70px;z-index:10;width:170px;height:300px;}
.zaixian_com .zxzx_pic1 p{position: absolute;top: 50px;left: 18px;font-size: 13px;color: #fff;}
.zaixian_com .zxzx_pic2 p{position: absolute;top: 118px;left: 24px;font-size: 13px;color: #fff;}
.kf-lf-lj{position:absolute;width:100px;right:10px;top:70px;}
.kf-lf-lj a{display:block;line-height:30px;padding-left:10px;margin:5px 0;color:#848484;font-size:13px;}
.kf-lf-lj a .fa{padding-right:4px;}
.kf-lf-lj a:hover{background:#a88c48 url(../images/box-kefu2.png) no-repeat 5px center;color:#FFF;border-radius:4px;}
@media(max-width:1000px){.zaixian{display:none;}}

/*PC端置顶*/
#ToTop {position: fixed;bottom: 100px;right: 20px;width: 48px;height: 48px;text-indent: -999em;z-index: 20000;background: url(../images/bt11.png) no-repeat center; }
#ToTop:hover {width: 48px;height: 48px;background: url(../images/bt1.png) no-repeat center;opacity:0.1;text-indent: -999em;filter: alpha(opacity=100);opacity: 1;z-index: 20000;}
/* 轮播图全屏测试 */
.banner {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    height: 470px !important;
}

.banner .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* ==========================================
   轮播图全屏现代化样式
   ========================================== */

/* 全屏容器 */
.hero-banner-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* 轮播图主容器 */
.hero-banner {
    height: 540px !important;
    width: 100% !important;
}

/* 轮播图slide */
.hero-banner .swiper-slide {
    width: 100%;
    height: 100%;
}

/* 图片包装器 */
.hero-banner .banner-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 图片样式 */
.hero-banner .banner-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 渐变叠加层 */
.hero-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.1) 0%, 
        rgba(0,0,0,0) 30%, 
        rgba(0,0,0,0) 70%, 
        rgba(0,0,0,0.2) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 现代化分页器 */
.swiper-pagination-modern {
    bottom: 30px !important;
    z-index: 10;
}

.swiper-pagination-modern .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    margin: 0 8px !important;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
}

.swiper-pagination-modern .swiper-pagination-bullet-active {
    width: 40px;
    border-radius: 6px;
    background: #fff;
}

/* 现代化导航按钮 */
.swiper-button-modern {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    z-index: 10;
}

.swiper-button-modern:after {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
}

.swiper-button-modern:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.swiper-button-prev.swiper-button-modern {
    left: 30px;
}

.swiper-button-next.swiper-button-modern {
    right: 30px;
}

/* 响应式 */
@media (max-width: 1200px) {
    .hero-banner {
        height: 430px !important;
    }
}

@media (max-width: 768px) {
    .hero-banner {
        height: 340px !important;
    }
    
    .swiper-button-modern {
        display: none;
    }
    
    .swiper-pagination-modern {
        bottom: 20px !important;
    }
    
    .swiper-pagination-modern .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 5px !important;
    }
    
    .swiper-pagination-modern .swiper-pagination-bullet-active {
        width: 24px;
    }
}

@media (max-width: 480px) {
    .hero-banner {
        height: 250px !important;
    }
}
/* ==========================================
   联系我们页面 - 网格卡片布局
   ========================================== */

/* 联系页面主体 */
.contact-page-grid {
    padding: 5rem 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 0;
}


/* 页面头部 */
.contact-header-section {
    text-align: center;
    margin-bottom: 4rem;
}

.section-subtitle {
    color: #667eea;
    font-size: 3.6rem;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.section-title-main {
    font-size: 5.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.section-description {
    font-size: 1.525rem;
    color: #64748b;
    margin: 0;
}

/* 2x2 网格布局 */
.contact-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

/* 网格卡片样式 */
.contact-grid-card {
    background: #fff;
    border-radius: 50px;
    padding: 3rem 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.contact-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

/* 卡片图标 */
.card-icon-wrapper {
    margin: 0 auto 1.5rem;
    font-size: 5rem;  /* 👈 这个控制emoji大小 */
    line-height: 1;
}

.phone-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.email-gradient {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.location-gradient {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.time-gradient {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* 卡片标题 */
.card-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.25rem 0;
}

/* 卡片内容 */
.card-content {
    font-size: 1.4625rem;
    color: #64748b;
    line-height: 1.8;
}

.card-content p {
    margin: 0.4rem 0;
}

.card-content strong {
    color: #334155;
}

.email-tip,
.time-tip {
    font-size: 1.4375rem;
    color: #94a3b8;
    margin-top: 0.75rem;
}

/* 二维码大卡片 */
.qrcode-big-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 60px;
    padding: 3.5rem;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
    margin-bottom: 0;
}

.qrcode-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.qrcode-left {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
}

.qrcode-icon-wrapper {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: #fff;
    flex-shrink: 0;
}

.qrcode-text h3 {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.75rem 0;
}

.qrcode-text p {
    font-size: 2.525rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1.5rem 0;
}

.qrcode-features {
    display: flex;
    gap: 2.2rem;
    flex-wrap: wrap;
}

.qrcode-features span {
    font-size: 1.6rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qrcode-features i {
    color: #43e97b;
}

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

.qrcode-right img {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    background: #fff;
    padding: 15px;
    margin-bottom: 1rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.qrcode-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

/* 地图区域 */
.map-section-modern {
    padding: 5rem 0;
    background: #fff;
}

.map-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.map-subtitle {
    color: #667eea;
    font-size: 1rem;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.map-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.map-container-modern {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

#mapbox {
    width: 100%;
    height: 500px;
}

/* 响应式设计 */
@media (max-width: 1000px) {
    .contact-page-grid {
        padding: 3rem 0;
        margin-top: 0;
    }
    
    .contact-header-section {
        margin-bottom: 2.5rem;
    }
    
    .section-title-main {
        font-size: 2rem;
    }
    
    .section-description {
        font-size: 1rem;
    }
    
    .contact-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contact-grid-card {
        padding: 2rem 1.5rem;
    }
    
    .card-icon-wrapper {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
    }
    
    .card-title {
        font-size: 1.25rem;
    }
    
    .card-content {
        font-size: 1rem;
    }
    
    .qrcode-big-card {
        padding: 2rem;
    }
    
    .qrcode-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .qrcode-left {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .qrcode-text h3 {
        font-size: 1.5rem;
    }
    
    .qrcode-text p {
        font-size: 1rem;
    }
    
    .qrcode-features {
        justify-content: center;
    }
    
    .qrcode-right img {
        width: 180px;
        height: 180px;
    }
    
    #mapbox {
        height: 350px;
    }
    
    .map-section-modern {
        padding: 3rem 0;
    }
}

@media (max-width: 480px) {
    .contact-page-grid {
        padding: 2rem 0;
    }
    
    .section-title-main {
        font-size: 1.75rem;
    }
    
    .qrcode-big-card {
        padding: 1.5rem;
    }
    
    .qrcode-icon-wrapper {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }
    
    .qrcode-right img {
        width: 160px;
        height: 160px;
    }
}
/* 邮箱emoji可点击 + 悬停提示 */
.email-icon-link {
    position: relative;
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.email-icon-link:hover .card-icon-wrapper {
    transform: scale(1.1);
}

/* 悬停提示小弹窗 */
.email-tooltip {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 1.375rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10;
}


/* 悬停时显示提示 */
.email-icon-link:hover .email-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
/* 响应式设计 - 移动端 */
@media (max-width: 1000px) {
    .contact-page-grid {
        padding: 2rem 1rem !important;
        margin-top: 0 !important;
    }
    
    .contact-header-section {
        margin-bottom: 2rem !important;
        padding: 0 1rem;
    }
    
    .section-title-main {
        font-size: 1.75rem !important;
    }
    
    .section-description {
        font-size: 0.9375rem !important;
    }
    
    .contact-grid-wrapper {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        padding: 0 1rem;
    }
    
    .contact-grid-card {
        padding: 2rem 1.5rem !important;
    }
    
    .card-icon-wrapper {
        font-size: 3rem !important;
        margin-bottom: -3rem !important;
    }
    
    .card-title {
        font-size: 1.25rem !important;
    }
    
    .card-content {
        font-size: 1rem !important;
    }
    
    .qrcode-big-card {
        padding: 2rem 1.5rem !important;
        margin: 0 1rem;
    }
    
    .qrcode-content {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center;
    }
    
    .qrcode-left {
        flex-direction: column !important;
        gap: 1.25rem !important;
    }
    
    .qrcode-icon-wrapper {
        font-size: 4rem !important;
    }
    
    .qrcode-text h3 {
        font-size: 1.5rem !important;
    }
    
    .qrcode-text p {
        font-size: 0.9375rem !important;
    }
    
    .qrcode-features {
        justify-content: center;
        gap: 1rem;
    }
    
    .qrcode-features span {
        font-size: 0.875rem !important;
    }
    
    .qrcode-right img {
        width: 160px !important;
        height: 160px !important;
    }
    
    .qrcode-label {
        font-size: 1rem !important;
    }
    
    #mapbox {
        height: 300px !important;
    }
    
    .map-section-modern {
        padding: 2rem 0 !important;
    }
    
    .map-header {
        margin-bottom: 2rem !important;
        padding: 0 1rem;
    }
    
    .map-title {
        font-size: 1.75rem !important;
    }
    
    .map-container-modern {
        margin: 0 1rem;
    }
}
/* ==========================================
   现代化产品列表页面样式
   ========================================== */

.modern-product-page {
    padding: 2rem 0;
    background: #f8fafc;
    min-height: 100vh;
    margin-top: 0rem;
}

.product-page-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
}



.category-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2.5rem;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}

.category-header h2 {
    color: #fff;
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0;
}

.category-nav {
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 4.5rem;
}

.category-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-nav ul li {
    border-bottom: 1px solid #f1f5f9;
}

.category-nav ul li:last-child {
    border-bottom: none;
}

.category-nav ul li a {
    display: block;
    padding: 1.48rem 1.5rem;
    color: #475569;
    font-size: 1.4375rem;
    transition: all 0.3s ease;
    position: relative;
}

.category-nav ul li a:hover {
    background: #f8fafc;
    color: #667eea;
    padding-left: 2rem;
}

.category-nav ul li a::before {
    content: '▸';
    position: absolute;
    left: 1rem;
    opacity: 0;
    transition: all 0.3s ease;
}

.category-nav ul li a:hover::before {
    opacity: 1;
}

.category-nav ul li.current a {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
    color: #667eea;
    font-weight: 600;
    border-left: 3px solid #667eea;
}

/* 联系卡片 */
.contact-card-sidebar {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    padding: 3rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

.contact-card-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.contact-card-sidebar h3 {
    font-size: 2.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #fff;
}

.contact-card-sidebar > p {
    font-size: 1.475rem;
    margin: 0 0 1rem 0;
    opacity: 0.9;
}

.contact-info-compact {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.contact-info-compact p {
    font-size: 1.375rem;
    margin: 0.5rem 0;
    color: #fff;
}

.contact-btn-sidebar {
    display: block;
    background: #fff;
    color: #4facfe;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.4375rem;
    transition: all 0.3s ease;
}

.contact-btn-sidebar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #4facfe;
}

/* 右侧产品区域 */
.product-main-area {
    min-height: 500px;
}



/* 产品网格 */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr)!important;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* 产品卡片 */
.product-card-modern {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.product-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.product-card-link {
    display: block;
    text-decoration: none;
}

.product-image-wrapper {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    background: #f8fafc;
}

.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card-modern:hover .product-image {
    transform: scale(1.1);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: all 0.3s ease;
}

.product-card-modern:hover .product-overlay {
    opacity: 1;
}

.view-detail-btn {
    color: #fff;
    font-size: 1.5375rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.product-card-content {
    padding: 1.5rem 1.5rem 1rem;
}

.product-title {
    font-size: 2rem!important;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.product-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0rem;
    padding: 0.375rem 0.75rem;
    z-index: 1;
}
.product-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 分页 */
.pagination-modern {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* 响应式 */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 1000px) {
    .modern-product-page {
        padding: 1.5rem 0;
    }
    
    .product-page-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .category-sidebar {
        position: static;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .product-card-content {
        padding: 1rem;
    }
    
    .product-title {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   产品参数表格美化
   ========================================== */

.product-specs-table {
    padding: 0;
}

.product-specs-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
}

.product-specs-table table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.product-specs-table table thead th {
    color: #fff;
    font-weight: 600;
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: 1rem;
}

.product-specs-table table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s ease;
}

.product-specs-table table tbody tr:hover {
    background: #f8fafc;
}

.product-specs-table table tbody tr:last-child {
    border-bottom: none;
}

.product-specs-table table tbody td {
    padding: 1rem 1.5rem;
    color: #475569;
    font-size: 0.9375rem;
}

.product-specs-table table tbody td:first-child {
    font-weight: 600;
    color: #1e293b;
    width: 30%;
}

/* 斑马纹效果 */
.product-specs-table table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.product-specs-table table tbody tr:nth-child(even):hover {
    background: #f1f5f9;
}

/* 响应式 */
@media (max-width: 768px) {
    .product-specs-table {
        overflow-x: auto;
    }
    
    .product-specs-table table {
        min-width: 500px;
    }
    
    .product-specs-table table thead th,
    .product-specs-table table tbody td {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}
/* 简单Tab样式 */
.simple-tabs {
    width: 100%;
}

.tab-nav {
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    gap: 0;
}

.tab-link {
    padding: 15px 30px;
    color: #64748b;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
}

.tab-link:hover {
    color: #667eea;
}

.tab-link.active {
    color: #667eea;
    border-bottom: 2px solid #667eea;
}

.tab-panels {
    padding: 30px 20px;
    min-height: 300px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* 表格美化 */
.tab-panel table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.tab-panel table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tab-panel table thead th {
    color: #fff;
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
}

.tab-panel table tbody tr {
    border-bottom: 1px solid #e2e8f0;
}

.tab-panel table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.tab-panel table tbody tr:hover {
    background: #f1f5f9;
}

.tab-panel table tbody td {
    padding: 12px 15px;
    color: #475569;
}

.tab-panel table tbody td:first-child {
    font-weight: 600;
    color: #1e293b;
}
/* ==========================================
   侧边栏新样式
   ========================================== */

/* 分类标题 */
.category-header-new {
    background: linear-gradient(180deg, #1E2A38 0%, #394B59 100%);
    padding: 20px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}
.category-header-new h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

/* 所有产品链接 */
.all-products-link {
    background: #f8fafc;
    border-left:0;
    margin-bottom: 0;  
    margin-top: 0;     
}

.all-products-link a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    color: #1e293b;
    font-weight: 600;
    transition: all 0.3s ease;
    gap: 12px;
}

.all-products-link a:hover {
    background: #FFF;
    color: #667eea;
}

.all-products-link a.active {
    background: #333;
    color: #fff;
    border-left-color: #764ba2;
}

.all-products-link .icon {
    font-size: 20px;
}

.all-products-link .text {
    flex: 1;
    font-size: 17px;
}

.all-products-link .arrow {
    font-size: 18px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.all-products-link a:hover .arrow,
.all-products-link a.active .arrow {
    opacity: 1;
    transform: translateX(0);
}

/* 分类导航 */
.category-nav-new {
    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);  /* 渐变 */
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;  /* 边框 */
    margin-bottom: 20px;
}

.category-nav-new ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-nav-new ul li {
    border-bottom: 1px solid #e5e7eb;
}

.category-nav-new ul li:last-child {
    border-bottom: none;
}

.category-nav-new ul li a {
    display: block;
    padding: 15px 20px;
    color: #475569;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 40px;
    font-size: 15px;
}

.category-nav-new ul li a:before {
    content: '▸';
    position: absolute;
    left: 20px;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.category-nav-new ul li a:hover {
    background: #f8fafc;
    color: #667eea;
    padding-left: 45px;
}

.category-nav-new ul li a:hover:before {
    color: #667eea;
    left: 25px;
}

.category-nav-new ul li.current a {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
    color: #667eea;
    font-weight: 600;
    border-left: 3px solid #667eea;
}

.category-nav-new ul li.current a:before {
    color: #667eea;
}

/* 联系卡片 */
.contact-card-sidebar-new {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.contact-card-sidebar-new .contact-icon {
    font-size: 48px;
    margin-bottom: 15px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.contact-card-sidebar-new h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #fff;
}

.contact-card-sidebar-new .phone-number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.contact-card-sidebar-new .contact-time {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.contact-card-sidebar-new .contact-btn-new {
    display: inline-block;
    background: #fff;
    color: #667eea;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-card-sidebar-new .contact-btn-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    color: #667eea;
}

/* 响应式 */
@media (max-width: 991px) {
    .category-header-new,
    .all-products-link,
    .category-nav-new,
    .contact-card-sidebar-new {
        display: none;
    }
}
/* ==========================================
   资讯列表
   ========================================== */

.news-rich-list {
    padding: 20px 0;
}

.news-item-rich {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    display: flex;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.news-item-rich:hover {
    border-left-color: #2C2C2C;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    transform: translateX(5px);
}

/* 日期块 */
.news-date-block {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8C8C8C 0%, #2C2C2C 100%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.news-date-block::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
}

.date-day {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
}

.date-month {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
}

/* 内容区 */
.news-content-block {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.news-category-badge {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #667eea;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.news-icon {
    font-size: 20px;
    opacity: 0.6;
}

.news-title-rich {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.news-title-rich a {
    color: #1e293b;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.news-title-rich a:hover {
    color: #667eea;
    transform: translateX(3px);
}

.news-intro-rich {
    color: #64748b;
    line-height: 1.8;
    margin: 0 0 15px 0;
    font-size: 15px;
}

/* 阅读更多链接 */
.news-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    transition: all 0.3s ease;
    align-self: flex-start;
}

.news-more-link:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.arrow-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 16px;
}

.news-more-link:hover .arrow-icon {
    transform: translateX(3px);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .news-item-rich {
        flex-direction: column;
        padding: 20px;
    }
    
    .news-date-block {
        width: 70px;
        height: 70px;
    }
    
    .date-day {
        font-size: 28px;
    }
    
    .date-month {
        font-size: 12px;
    }
    
    .news-title-rich {
        font-size: 18px;
    }
    
    .news-intro-rich {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .news-date-block {
        width: 100%;
        height: auto;
        flex-direction: row;
        gap: 10px;
        padding: 12px;
    }
    
    .date-day {
        font-size: 24px;
    }
}
/* 隐藏左下角在线咨询按钮 */
.embed-group-icon {
    display: none !important;
}
/* ========== 案例展示区通用样式 ========== */
.case-showcase {
    padding: 20px 0;
}

/* ========== 精选案例卡片 ========== */
.featured-case {
    position: relative;
    background: linear-gradient(135deg, #fff 0%, #f8f9fc 100%);
    border-radius: 16px;
    padding: 35px;
    margin-bottom: 40px;
    border: 1px solid #e8ebf0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.featured-case:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}


.featured-content {
    position: relative;
}

.featured-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.3;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.featured-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #8892a0;
}

.featured-date i {
    font-size: 14px;
}

.featured-intro {
    color: #4a5568;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 90%;
}

.featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #333;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.featured-btn:hover {
    background: #333;
    transform: translateX(3px);
    color: #fff;
}

.featured-btn .arrow-icon {
    transition: transform 0.3s ease;
}

.featured-btn:hover .arrow-icon {
    transform: translateX(3px);
}

/* ========== 案例网格布局 ========== */
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

/* ========== 案例卡片 ========== */
.case-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8ebf0;
    overflow: hidden;
    transition: all 0.25s ease;
    position: relative;
}

.case-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
     background: linear-gradient(90deg, #000, #666);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.case-card:hover::before {
    opacity: 1;
}

.case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.case-card-body {
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 40px;
}

.case-card-header {
    margin-bottom: 16px;
}

.case-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.case-card-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.case-card-title a:hover {
    color: #000;
}

.case-card-date {
    display: inline-block;
    font-size: 13px;
    color: #8892a0;
    background: #f7f8fa;
    padding: 4px 10px;
    border-radius: 4px;
}

.case-card-intro {
    flex: 1;
    color: #4a5568;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #000;
    font-size: 18.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.case-card-link:hover {
    gap: 10px;
    color: #cc0010;
}

.case-card-link .link-arrow {
    transition: transform 0.2s ease;
}

.case-card-link:hover .link-arrow {
    transform: translateX(3px);
}

/* ========== 响应式设计 ========== */
@media (max-width: 992px) {
    .case-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
    
    .featured-case {
        padding: 28px;
    }
    
    .featured-title {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .case-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .featured-case {
        padding: 24px;
    }
    
    .featured-title {
        font-size: 20px;
    }
    
    .featured-intro {
        max-width: 100%;
    }
    
    .case-card-body {
        padding: 20px;
    }
}

/* ========== 分页优化 ========== */
.pagination {
    margin-top: 40px;
    text-align: center;
}

.pagination a,
.pagination span {
    margin: 0 4px;
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.pagination .active {
    background: #e60012;
    color: #fff;
}
/* 热门案例标记 */
.case-card-hot {
    position: relative;
    border-color: #ffeaea;
    background: linear-gradient(to bottom, #fffafa, #fff);
}

.hot-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, #ff6b6b, #e60012);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
}

.case-card-hot:hover {
    border-color: #ffcccc;
}
/* ========== 案例详情页样式 ========== */
.product-detail-wrapper {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 20px;
}

/* 标题区域 */
.product-header {
    padding: 30px;
    border-bottom: 1px solid #f0f2f5;
    background: linear-gradient(to bottom, #fafbfc, #fff);
}

.product-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.4;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

.meta-icon {
    color: #999;
}

.view-count {
    color: #000;
    font-weight: 600;
}

.view-count.animated {
    animation: countUp 0.5s ease-out;
}

@keyframes countUp {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 案例图片区域 */
.product-image-section {
    padding: 30px;
    background: #fafbfc;
}

.main-image-container {
    max-width: 600px;
    margin: 0 auto;
}

.product-main-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 案例内容区域 */
.product-content-section {
    padding: 30px;
}

.content-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.content-header {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-bottom: 2px solid #000;
}

.content-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.content-body {
    padding: 25px;
    line-height: 1.8;
    color: #4a5568;
    font-size: 15px;
}

.content-body p {
    margin-bottom: 16px;
}

.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 20px 0;
}

/* 分享功能 */
.share-section {
    padding: 20px 30px;
    border-top: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 15px;
}

.share-label {
    color: #666;
    font-size: 14px;
}

.share-buttons {
    display: flex;
    gap: 10px;
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: #f5f6f7;
}

.share-btn:hover {
    transform: translateY(-3px);
}

.share-wechat:hover { background: #07c160; color: #fff; }
.share-weibo:hover { background: #ff8200; color: #fff; }
.share-qq:hover { background: #1296db; color: #fff; }
.share-link:hover { background: #000; color: #fff; }

/* 上下篇导航 */
.article-navigation {
    display: flex;
    gap: 20px;
    padding: 30px;
    background: #f8f9fa;
    margin-top: 30px;
}

.nav-item {
    flex: 1;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #e8ebf0;
}

.nav-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    border-color: #000;
}

.nav-direction {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 13px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-title {
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nav-next {
    text-align: right;
}

.nav-next .nav-direction {
    justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .product-header {
        padding: 20px;
    }
    
    .product-title {
        font-size: 22px;
    }
    
    .product-meta {
        gap: 16px;
    }
    
    .meta-item {
        font-size: 13px;
    }
    
    .article-navigation {
        flex-direction: column;
    }
    
    .product-content-section,
    .product-image-section {
        padding: 20px;
    }
}
footer .bg-black {
  width: 100vw; /* 让背景宽度强制覆盖整个可视区 */
  margin-left: calc(50% - 50vw); /* 防止被父 container 居中限制 */
  margin-right: calc(50% - 50vw);
}
/* ==========================================
   产品详情页Tab样式 - 卡片式
   ========================================== */

.simple-tabs {
    margin-top: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.simple-tabs .tab-nav {
    display: flex;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    padding: 0;
    margin: 0;
}

.simple-tabs .tab-link {
    flex: 1;
    text-align: center;
    padding: 18px 30px;
    color: #64748b;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
    position: relative;
    border-bottom: 3px solid transparent;
}

.simple-tabs .tab-link:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.simple-tabs .tab-link.active {
    color: #667eea;
    background: #fff;
    border-bottom: 3px solid #667eea;
}

.simple-tabs .tab-panels {
    padding: 30px;
    min-height: 300px;
    background: #fff;
}

/* Tab面板显示控制 */
.simple-tabs .tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.simple-tabs .tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .simple-tabs .tab-link {
        padding: 15px 20px;
        font-size: 14px;
    }
    
    .simple-tabs .tab-panels {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {
    .simple-tabs .tab-nav {
        flex-direction: column;
    }
    
    .simple-tabs .tab-link {
        border-bottom: 1px solid #e2e8f0;
    }
    
    .simple-tabs .tab-link.active {
        border-bottom: 1px solid #e2e8f0;
        border-left: 3px solid #667eea;
    }
}
/* 产品图片圆角 */
.phone-border img {
    border-radius: 12px;
}

/* 产品咨询按钮圆角和渐变 */
.phone-border .offer .more {
    background: #333 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.phone-border .offer .more:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}
/* ==========================================
   面包屑导航样式
   ========================================== */

.breadcrumb {
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    font-size: 14px;
}

.breadcrumb li:first-child {
    color: #475569;
    font-weight: 500;
}

.breadcrumb li a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.breadcrumb li a:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.breadcrumb li a span {
    color: inherit;
}

/* 面包屑分隔符 */
.breadcrumb li i {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid #cbd5e1;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin: 0 8px;
}

.breadcrumb li:last-child i {
    display: none;
}

.breadcrumb li:last-child a {
    color: #667eea;
    font-weight: 500;
}

/* 响应式 */
@media (max-width: 768px) {
    .breadcrumb {
        padding: 12px 15px;
        font-size: 13px;
    }
    
    .breadcrumb li i {
        margin: 0 6px;
    }
}
.product-navigation {
    display: flex;
    gap: 20px;
    padding: 30px;
    background: #f8f9fa;
    margin-top: 0px;
}

.nav-card {
    flex: 1;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #e8ebf0;
    display: flex;
    align-items: center;
}

.nav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    border-color: #000;
    text-decoration: none;
}

.nav-prev {
    justify-content: flex-start;
}

.nav-next {
    justify-content: flex-end;
    margin-left: auto;
}

.nav-arrow {
    font-size: 20px;
    color: #999;
    font-weight: 300;
}

.nav-prev .nav-arrow {
    margin-right: 15px;
}

.nav-next .nav-arrow {
    margin-left: 15px;
}

.nav-content {
    display: flex;
    flex-direction: column;
}

.nav-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 13px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-title {
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nav-next .nav-content {
    text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .product-navigation {
        flex-direction: column;
    }
}
.offer {
    position: relative;
    z-index: 999;
    margin: 20px 0;
}
/* 跳转淘宝按钮 */
.offer .more {
    display: inline-block;
    padding: 12px 30px;
    min-height: 44px; /* iOS最小点击区域 */
    line-height: 1.5;
    touch-action: manipulation; /* 移动端优化 */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* 确保移动端可点击 */
@media (max-width: 768px) {
    .offer .more {
        width: 100%;
        text-align: center;
        display: block;
    }
}
/* 修复发展历程和资质荣誉的 CLS */
body:has([href*="/fzlc/"]) .info-content,
body:has([href*="/zzry/"]) .info-content {
}
/* ========================================
   通用样式优化
======================================== */

.ip-cpxq {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin: 60px 0 40px;
    position: relative;
    padding-bottom: 20px;
}

.ip-cpxq::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #0066cc, #00a8ff);
    border-radius: 2px;
}

/* ========================================
   关于美成 - 全屏横向时间轴版本
======================================== */

.about-timeline-horizontal {
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    padding: 80px 0 100px;
}

.about-header {
    text-align: center;
    margin-bottom: 50px;
}

.about-en {
    font-size: 16px;
    color: #0066cc;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 12px;
}

.about-cn {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* 公司简介 */
.company-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.intro-logo {
    width: 140px;
    height: auto;
    margin-bottom: 25px;
    animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.intro-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.intro-subtitle {
    font-size: 13px;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.intro-text {
    font-size: 15px;
    line-height: 2;
    color: #666;
    text-align: justify;
    max-width: 800px;
    margin: 0 auto;
}

/* 横向时间轴 */
.timeline-horizontal {
    position: relative;
    margin: 60px 0 80px;
}

.timeline-track {
    position: absolute;
    top: 10px; /* 改为10px，对齐圆点中心 */
    left: 10%;
    right: 10%;
    height: 4px;
    background: linear-gradient(90deg, #0066cc 0%, #00a8ff 100%);
    border-radius: 2px;
}

.timeline-nodes {
    display: flex;
    justify-content: space-between;
    padding: 0 10%;
    position: relative;
}

.timeline-node-h {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s ease;
}

.node-dot-h {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid #0066cc;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.timeline-node-h:hover .node-dot-h {
    width: 26px;
    height: 26px;
    box-shadow: 0 0 0 8px rgba(0, 102, 204, 0.2);
    transform: scale(1.1);
}

.node-year-h {
    font-size: 18px;
    font-weight: bold;
    color: #0066cc;
    transition: all 0.4s ease;
}

.timeline-node-h:hover .node-year-h {
    transform: translateY(-3px);
    font-size: 20px;
}

/* 时间轴卡片网格 */
.timeline-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* 从30px改为20px */
    margin-bottom: 50px;
}

.timeline-card-h {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
}

.timeline-card-h.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.timeline-card-h:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-image-h {
    position: relative;
    width: 100%;
    height: 240px; /* 从200px改为240px */
    overflow: hidden;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image-h img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.timeline-card-h:hover .card-image-h img {
    transform: scale(1.1);
}

.card-icon-large {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon-large svg {
    stroke: #0066cc;
    transition: all 0.5s ease;
}

.timeline-card-h:hover .card-icon-large svg {
    transform: rotate(360deg);
    stroke: #0052a3;
}

.card-overlay-h {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 15px;
    opacity: 0;
    transition: all 0.4s ease;
}

.timeline-card-h:hover .card-overlay-h {
    opacity: 1;
}

.card-year-badge {
    background: rgba(255, 255, 255, 0.95);
    color: #0066cc;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.card-content-h {
    padding: 30px; /* 从25px改为30px */
}

.card-title-h {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px; /* 从12px改为15px */
    position: relative;
    padding-bottom: 10px;
}

.card-title-h::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #0066cc, #00a8ff);
    border-radius: 2px;
}

.card-desc-h {
    font-size: 14px;
    line-height: 1.9; /* 从1.8改为1.9 */
    color: #666;
}

/* NOW卡片特殊样式 */
.timeline-card-now {
    background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px 25px; /* 从30px 20px改为35px 25px */
}

.card-stats-wrapper {
    width: 100%;
}

.stat-item-h {
    text-align: center;
    margin-bottom: 30px; /* 从25px改为30px */
}

.stat-item-h:last-child {
    margin-bottom: 0;
}

.stat-num-h {
    font-size: 52px; /* 从48px改为52px */
    font-weight: bold;
    color: #fff;
    line-height: 1;
    display: inline-block;
}

.stat-plus-h {
    font-size: 26px; /* 从24px改为26px */
    font-weight: bold;
    color: #fff;
    display: inline-block;
    margin-left: 4px;
}

.stat-label-h {
    font-size: 15px; /* 从14px改为15px */
    color: rgba(255, 255, 255, 0.9);
    margin-top: 10px; /* 从8px改为10px */
    font-weight: 500;
}

/* 了解更多按钮 */
.about-more-btn {
    text-align: center;
}

.about-more-btn a {
    display: inline-block;
    padding: 14px 40px;
    background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

.about-more-btn a:hover {
    background: linear-gradient(135deg, #0052a3 0%, #0077cc 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
    color: #fff;
    text-decoration: none;
}

/* ========================================
   选择美成的理由 - 数字驱动大卡片版本
======================================== */

.reasons-numeric-section {
    padding: 80px 0 100px;
    background: linear-gradient(180deg, #f8f9fa 0%, #e8ecf1 100%);
}

.reasons-header {
    text-align: center;
    margin-bottom: 60px;
}

.reasons-en {
    font-size: 16px;
    color: #0066cc;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 12px;
}

.reasons-cn {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.numeric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 25px;
}

/* 卡片布局 */
.large-card.card-1 {
    grid-column: 1 / 3;
    grid-row: 1;
}

.small-card.card-2 {
    grid-column: 3;
    grid-row: 1;
}

.small-card.card-3 {
    grid-column: 4;
    grid-row: 1;
}

.large-card.card-4 {
    grid-column: 3 / 5;
    grid-row: 2;
}

.wide-card.card-5 {
    grid-column: 1 / 3;
    grid-row: 2;
}

/* 卡片样式 */
.numeric-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 35px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
}

.numeric-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.numeric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #0066cc, #00a8ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.numeric-card.hovered::before {
    transform: scaleX(1);
}

.numeric-card.hovered {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.numeric-card.dimmed {
    opacity: 0.6;
    transform: scale(0.98);
}

.card-number {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 72px;
    font-weight: bold;
    color: rgba(0, 102, 204, 0.05);
    line-height: 1;
    transition: all 0.5s ease;
}

.numeric-card.hovered .card-number {
    color: rgba(0, 102, 204, 0.12);
    transform: scale(1.1);
}

.card-icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.5s ease;
}

.card-icon-wrapper svg {
    stroke: #0066cc;
    transition: all 0.5s ease;
}

.numeric-card.hovered .card-icon-wrapper {
    background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
    transform: rotateY(360deg);
}

.numeric-card.hovered .card-icon-wrapper svg {
    stroke: #fff;
}

.card-heading {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.numeric-card.hovered .card-heading {
    color: #0066cc;
}

.card-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 20px;
}

.card-badge {
    display: inline-block;
    padding: 6px 14px;
    background: #f0f0f0;
    color: #999;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.numeric-card.hovered .card-badge {
    background: #e3f2fd;
    color: #0066cc;
}

/* 横向卡片特殊样式 */
.wide-card {
    display: flex;
    align-items: center;
    gap: 30px;
}

.wide-card .card-icon-wrapper {
    flex-shrink: 0;
}

.wide-content {
    flex: 1;
}

.wide-card .card-badge {
    position: absolute;
    bottom: 25px;
    right: 30px;
}

/* ========================================
   3个重点材料保持原样
======================================== */

.materials-image-section {
    padding: 80px 0 100px;
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
}

.materials-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 35px;
    perspective: 2000px;
    padding: 40px 0;
}

.material-image-card {
    flex: 0 0 calc(33.33% - 24px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.material-card-1,
.material-card-3 {
    transform: scale(0.95) translateY(10px);
    opacity: 0.9;
}

.material-center {
    transform: scale(1.02) translateY(-10px);
    z-index: 10;
}

.materials-image-wrapper:hover .material-image-card {
    transform: scale(0.90) translateY(15px);
    opacity: 0.7;
}

.materials-image-wrapper .material-image-card:hover {
    transform: scale(1.08) translateY(-15px) !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

.card-link-image {
    display: block;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

.material-image-card:hover .card-link-image {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.card-image-top {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f8f8f8;
}

.card-image-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: all 0.6s ease;
}

.material-image-card:hover .card-image-top img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: all 0.5s ease;
}

.material-image-card:hover .image-overlay {
    opacity: 1;
}

.card-content-bottom {
    padding: 35px 25px 40px;
    text-align: center;
}

.card-icon-image {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.material-card-1 .card-icon-image svg {
    stroke: #667eea;
}

.material-card-2 .card-icon-image svg {
    stroke: #f5576c;
}

.material-card-3 .card-icon-image svg {
    stroke: #00f2fe;
}

.material-image-card:hover .card-icon-image {
    transform: scale(1.1) rotate(360deg);
}

.card-title-en-image {
    font-size: 12px;
    font-weight: 500;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.card-title-cn-image {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 18px;
    transition: all 0.4s ease;
}

.material-image-card:hover .card-title-cn-image {
    color: #0066cc;
    transform: scale(1.05);
}

.card-desc-image {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 22px;
}

.card-desc-image p {
    margin-bottom: 6px;
}

.card-more-image {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #0066cc;
    padding: 10px 24px;
    border: 2px solid #0066cc;
    border-radius: 22px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.card-more-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #0066cc;
    transition: all 0.4s ease;
    z-index: -1;
}

.material-image-card:hover .card-more-image {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.material-image-card:hover .card-more-image::before {
    left: 0;
}

/* ========================================
   资讯板块保持原样
======================================== */

.news-redesign-section {
    padding: 80px 0;
    background: #fff;
}

.news-tab-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

.news-tab-btn {
    padding: 12px 32px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-tab-btn:hover {
    background: #e8f4fd;
    color: #0066cc;
}

.news-tab-btn.active {
    background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
    border-color: #0066cc;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

.news-tab-panel {
    display: none;
}

.news-tab-panel.active {
    display: block;
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.news-redesign-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.news-redesign-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    overflow: hidden;
}

.news-redesign-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.news-redesign-link {
    display: flex;
    gap: 25px;
    padding: 30px;
    text-decoration: none;
    color: inherit;
}

.news-date-circle {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: #0066cc;
    transition: all 0.4s ease;
    text-align: center;
    line-height: 1.3;
}

.news-redesign-item:hover .news-date-circle {
    background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
    color: #fff;
    transform: rotate(360deg);
}

.news-content-area {
    flex: 1;
}

.news-redesign-title {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.5;
    transition: all 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-redesign-item:hover .news-redesign-title {
    color: #0066cc;
}

.news-redesign-intro {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-read-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #0066cc;
    transition: all 0.3s ease;
}

.news-redesign-item:hover .news-read-link {
    gap: 8px;
}

/* ========================================
   响应式设计
======================================== */

@media (max-width: 1200px) {
    .about-timeline-horizontal {
        padding: 60px 0 80px;
    }
    
    .company-intro {
        padding: 30px;
        margin-bottom: 50px;
    }
    
    .intro-title {
        font-size: 24px;
    }
    
    .timeline-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .numeric-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .large-card.card-1,
    .small-card.card-2,
    .small-card.card-3,
    .large-card.card-4,
    .wide-card.card-5 {
        grid-column: span 1;
        grid-row: auto;
    }
}

@media (max-width: 992px) {
    .about-header {
        padding: 50px 0 30px;
    }
    
    .about-cn, .reasons-cn {
        font-size: 30px;
    }
    
    .company-intro {
        padding: 25px 20px;
        margin-bottom: 40px;
    }
    
    .intro-logo {
        width: 100px;
    }
    
    .intro-title {
        font-size: 20px;
    }
    
    .intro-text {
        font-size: 14px;
        line-height: 1.8;
    }
    
    .timeline-horizontal {
        margin: 40px 0 60px;
    }
    
    .timeline-track {
        left: 5%;
        right: 5%;
    }
    
    .timeline-nodes {
        padding: 0 5%;
    }
    
    .timeline-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .card-image-h {
        height: 180px;
    }
    
    .numeric-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .wide-card {
        flex-direction: column;
    }
    
    .wide-card .card-badge {
        position: static;
        margin-top: 15px;
    }
    
    .materials-image-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .material-image-card {
        flex: 0 0 100%;
        max-width: 400px;
    }
    
    .material-card-1,
    .material-card-3,
    .material-center {
        transform: scale(1);
        opacity: 1;
    }
    
    .news-redesign-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ip-cpxq {
        font-size: 28px;
    }
    
    .about-cn, .reasons-cn {
        font-size: 26px;
    }
    
    .company-intro {
        padding: 20px 15px;
    }
    
    .intro-logo {
        width: 80px;
    }
    
    .intro-title {
        font-size: 18px;
    }
    
    .intro-subtitle {
        font-size: 11px;
    }
    
    .timeline-nodes {
        flex-wrap: wrap;
        gap: 15px 10px;
    }
    
    .timeline-track {
        display: none;
    }
    
    .node-dot-h {
        width: 16px;
        height: 16px;
    }
    
    .node-year-h {
        font-size: 16px;
    }
    
    .card-image-h {
        height: 150px;
    }
    
    .card-content-h {
        padding: 20px;
    }
    
    .card-title-h {
        font-size: 18px;
    }
    
    .stat-num-h {
        font-size: 40px;
    }
    
    .numeric-card {
        padding: 30px 25px;
    }
    
    .card-number {
        font-size: 56px;
    }
    
    .news-tab-nav {
        flex-direction: column;
        align-items: stretch;
    }
    
    .news-redesign-link {
        flex-direction: column;
        padding: 25px;
    }
    
    .news-date-circle {
        width: 70px;
        height: 70px;
        margin: 0 auto 20px;
    }
}

@media (max-width: 480px) {
    .about-cn, .reasons-cn {
        font-size: 22px;
    }
    
    .about-en, .reasons-en {
        font-size: 13px;
    }
    
    .company-intro {
        padding: 15px;
    }
    
    .intro-title {
        font-size: 16px;
    }
    
    .intro-text {
        font-size: 13px;
    }
    
    .timeline-horizontal {
        margin: 30px 0 40px;
    }
    
    .card-title-h {
        font-size: 16px;
    }
    
    .card-desc-h {
        font-size: 13px;
    }
    
    .stat-num-h {
        font-size: 36px;
    }
    
    .stat-plus-h {
        font-size: 20px;
    }
    
    .stat-label-h {
        font-size: 13px;
    }
    
    .numeric-card {
        padding: 25px 20px;
    }
    
    .card-heading {
        font-size: 18px;
    }
}