/*
Theme Name: 知途管道科技 (EyouCMS Exact)
Template: astra
Version: 4.2
*/
@charset "utf-8";
*{box-sizing:border-box}
body{text-align:left;padding:0;margin:0;font-size:14px;font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif!important;-webkit-text-size-adjust:none;color:#333!important;background:#fff!important;min-width:1200px;overflow-x:hidden}
html{min-width:1200px}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p{padding:0;margin:0}
a img{border:0}
a{color:#333;text-decoration:none;outline:0;transition:all .3s}
a:hover{color:#1a73e8}
li{list-style:none}
i{font-style:normal}
img{max-width:100%;height:auto;display:block}
.fl{float:left}
.fr{float:right}
.left{float:left}
.right{float:right}
.clearfix{*zoom:1}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.w1200{width:1200px;margin:0 auto}

/* === Top Bar === */
.head_main{z-index:10;background:#1a2a4a;height:40px;line-height:40px;color:#fff;font-size:12px}
.head_main .right li{display:inline}
.head_main .right li a{display:inline-block;color:#fff;padding:0 12px;border-left:1px solid rgba(255,255,255,0.1)}
.head_main .right li:first-child a{border-left:none}
.head_main .right li a:hover{color:#fbbf24}

/* === Header === */
.top_main{position:relative;padding:17px 0;z-index:9;border-bottom:1px solid #ecebec;box-shadow:1px 2px 2px rgba(0,0,0,0.1);background:#fff}
.top_main .logo{display:flex;align-items:center;gap:10px;float:left}
.top_main .logo .logo-icon{width:44px;height:44px;background:linear-gradient(135deg,#1a3a6a,#2a5aaa);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;font-weight:800}
.top_main .logo h1{font-size:22px;font-weight:700;color:#1a2a4a;line-height:44px}
.top_main .logo h1 span{color:#d97706}
.top_main ul{display:inline-block}
.top_main li{float:left;margin-left:30px;text-align:center;position:relative;z-index:9}
.top_main li a{display:inline-block;margin:0 auto;position:relative;padding:5px 0}
.top_main li a i{width:0;height:2px;position:absolute;left:50%;bottom:0;display:block;transition:ease-in-out 0.2s;z-index:9}
.top_main li a p{font-size:15px;line-height:50px;color:#333;font-weight:500}
.top_main li a:hover p,.top_main li a.hover p{color:#d97706}
.top_main li a:hover i,.top_main li a.hover i{width:100%;left:0;background:#d97706}
.top_main li .tel-btn{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff!important;padding:10px 24px!important;border-radius:6px;font-weight:700;margin-top:10px}
.top_main li .tel-btn p{color:#fff!important;line-height:24px!important}
.top_main li .tel-btn:hover{background:linear-gradient(135deg,#b45309,#d97706);box-shadow:0 4px 15px rgba(217,119,6,0.3)}
.top_main li .tel-btn:hover i{display:none}
.top_main dl{width:120px;border-radius:0 0 4px 4px;padding-bottom:3px;background:#1a2a4a;position:absolute;left:50%;margin-left:-60px;top:55px;z-index:1555;opacity:0;visibility:hidden;transition:all .4s ease;transform:translate3d(0,10px,0)}
.top_main li:hover dl{opacity:1;visibility:visible;transform:translate3d(0,0,0)}
.top_main dl dd{text-align:center;border-top:1px solid rgba(255,255,255,0.1)}
.top_main dl dd a{color:rgba(255,255,255,0.7);height:36px;display:block;line-height:36px;font-size:12px;padding:0}
.top_main dl dd a:hover{color:#fbbf24}

/* === Banner === */
#banner_main{overflow:hidden;position:relative;z-index:2;max-width:1920px;margin:0 auto}
.banner{width:100%;min-width:1000px;position:relative;overflow:hidden;z-index:0;height:460px}
.banner .list{height:100%}
.banner .list li{width:100%;position:absolute;z-index:1;overflow:hidden;display:none}
.banner .list li:first-child{display:block}
.banner .list li img{width:1920px;display:block;position:relative;left:50%;margin-left:-960px;height:460px;object-fit:cover}

/* === Search === */
.search{background:#f5f7fa;border-bottom:1px solid #e8ecf1;padding:14px 0}
.search .hot .left{line-height:36px;font-size:13px;color:#999}
.search .hot .left b{color:#d97706;font-weight:700;margin-right:6px}
.search .hot .left a{color:#999;margin-right:10px}
.search .hot .left a:hover{color:#d97706}
.search .hot .right{font-size:13px;color:#999;line-height:36px}
.search .hot .right strong{color:#d97706;font-size:16px}

/* === Section Title === */
.index_title{text-align:center;padding:50px 0 30px}
.index_title h2,.index_title h3{font-size:28px;font-weight:700;color:#1a2a4a;margin-bottom:8px;position:relative}
.index_title h2 i,.index_title h3 i{display:block;width:50px;height:3px;background:#d97706;margin:14px auto 0;border-radius:2px}
.index_title p{font-size:14px;color:#999;line-height:24px;max-width:600px;margin:0 auto}

/* === Floor 1 (Services) === */
.floor_1{padding:0 0 50px}
.floor_1 .body ul{width:100%}
.floor_1 .body li{width:280px;float:left;margin-right:26px;margin-bottom:26px;border:1px solid #eef2f7;border-radius:6px;overflow:hidden;transition:all .3s;background:#fff}
.floor_1 .body li:nth-child(4n){margin-right:0}
.floor_1 .body li:hover{box-shadow:0 6px 25px rgba(0,0,0,0.1);transform:translateY(-4px);border-color:#d97706}
.floor_1 .body li .img{width:280px;height:200px;overflow:hidden}
.floor_1 .body .img img{width:100%;height:100%;object-fit:cover;transition:all .5s}
.floor_1 .body li:hover .img img{transform:scale(1.08)}
.floor_1 .body li .txt{padding:15px 16px 18px;text-align:center}
.floor_1 .body li .txt h3{font-size:15px;font-weight:600;color:#333;margin-bottom:4px}
.floor_1 .body li .txt p{font-size:12px;color:#999;line-height:1.6;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.floor_1 .body li .txt span{font-size:12px;color:#d97706;font-weight:500}

/* === Floor 2 (About - full width) === */
.floor_2_main{background:#f9fafb;padding:50px 0}
.floor_2_main .about-grid{display:flex;gap:40px;align-items:center}
.floor_2_main .about-img{flex:0 0 500px;border-radius:6px;overflow:hidden}
.floor_2_main .about-img img{width:100%}
.floor_2_main .about-text h3{font-size:20px;color:#1a2a4a;margin-bottom:12px;font-weight:600}
.floor_2_main .about-text p{font-size:13px;color:#666;line-height:1.8;margin-bottom:10px}
.floor_2_main .about-text .phone{font-size:14px;font-weight:600;color:#333;margin-top:14px}
.floor_2_main .about-text .phone strong{color:#d97706;font-size:18px}

/* === Floor 3 (Equipment) === */
.floor_3{padding:0 0 50px}
.floor_3 .body ul{width:100%}
.floor_3 .body li{width:380px;float:left;margin-right:30px;margin-bottom:30px;border:1px solid #eef2f7;border-radius:6px;overflow:hidden;transition:all .3s;background:#fff}
.floor_3 .body li:nth-child(3n){margin-right:0}
.floor_3 .body li:hover{box-shadow:0 6px 25px rgba(0,0,0,0.1);transform:translateY(-4px)}
.floor_3 .body li .img{width:380px;height:200px;overflow:hidden}
.floor_3 .body li .img img{width:100%;height:100%;object-fit:cover;transition:all .5s}
.floor_3 .body li:hover .img img{transform:scale(1.08)}
.floor_3 .body li .txt{padding:15px 18px 18px}
.floor_3 .body li .txt h3{font-size:14px;font-weight:600;color:#333;margin-bottom:4px}
.floor_3 .body li .txt p{font-size:12px;color:#999;line-height:1.6}

/* === Floor 4 (Process/Stats - full width) === */
.floor_4_main{background:#1a2a4a;padding:50px 0;color:#fff}
.floor_4_main .index_title h3{color:#fff}
.floor_4_main .index_title h3 i{background:#fbbf24}
.floor_4_main .index_title p{color:rgba(255,255,255,0.6)}
.floor_4_main .liucheng{width:100%}
.floor_4_main .liucheng li{width:280px;float:left;margin-right:26px;text-align:center;padding:25px 15px;background:rgba(255,255,255,0.06);border-radius:6px;border:1px solid rgba(255,255,255,0.08);transition:all .3s}
.floor_4_main .liucheng li:last-child{margin-right:0}
.floor_4_main .liucheng li:hover{background:rgba(255,255,255,0.1);transform:translateY(-4px)}
.floor_4_main .liucheng li .step-num{width:48px;height:48px;background:#d97706;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;margin:0 auto 12px}
.floor_4_main .liucheng li h4{font-size:15px;color:#fff;margin-bottom:6px;font-weight:600}
.floor_4_main .liucheng li p{font-size:12px;color:rgba(255,255,255,0.6);line-height:1.6}

/* === Floor 5 (Cases) === */
.floor_5{padding:0 0 50px}
.floor_5 .body ul{width:100%}
.floor_5 .body li{width:380px;float:left;margin-right:30px;margin-bottom:30px;border:1px solid #eef2f7;border-radius:6px;overflow:hidden;transition:all .3s;background:#fff}
.floor_5 .body li:nth-child(3n){margin-right:0}
.floor_5 .body li:hover{box-shadow:0 6px 25px rgba(0,0,0,0.1);transform:translateY(-4px)}
.floor_5 .body li .img{width:380px;height:200px;overflow:hidden}
.floor_5 .body li .img img{width:100%;height:100%;object-fit:cover;transition:all .5s}
.floor_5 .body li:hover .img img{transform:scale(1.08)}
.floor_5 .body li .txt{padding:15px 18px 18px}
.floor_5 .body li .tag{display:inline-block;background:#fef3c7;color:#d97706;padding:2px 10px;border-radius:3px;font-size:11px;font-weight:600;margin-bottom:6px}
.floor_5 .body li h4{font-size:14px;font-weight:600;color:#333;margin-bottom:4px}
.floor_5 .body li p{font-size:12px;color:#999;line-height:1.6;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.floor_5 .body li .more{color:#d97706;font-size:12px;font-weight:600}

/* === Floor 6 (FAQ + Contact) === */
.floor_6{background:#f9fafb;padding:50px 0}
.floor_6 .faq-list{margin-top:20px}
.floor_6 .faq-list li{margin-bottom:8px;border:1px solid #eef2f7;border-radius:4px;overflow:hidden;background:#fff}
.floor_6 .faq-list li .q{padding:12px 18px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#333;font-size:14px;background:#fafbfc}
.floor_6 .faq-list li .q:hover{color:#d97706}
.floor_6 .faq-list li .q .toggle{font-size:10px;color:#ccc;transition:transform .3s}
.floor_6 .faq-list li .q.active .toggle{transform:rotate(180deg);color:#d97706}
.floor_6 .faq-list li .a{max-height:0;overflow:hidden;transition:all .3s;font-size:13px;color:#666;line-height:1.8}
.floor_6 .faq-list li .a.show{max-height:300px;padding:0 18px 14px}

/* === Contact Banner === */
.contact-banner{background:linear-gradient(135deg,#1a2a4a,#2a5aaa);padding:40px 0;text-align:center}
.contact-banner .contact-inner{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;margin-bottom:16px}
.contact-banner .contact-item{color:rgba(255,255,255,0.8);font-size:14px}
.contact-banner .contact-item b{color:#fbbf24;font-size:18px}
.contact-banner .contact-btn{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;padding:14px 48px;border-radius:6px;font-size:16px;font-weight:700;display:inline-block;transition:all .3s}
.contact-banner .contact-btn:hover{background:linear-gradient(135deg,#b45309,#d97706);transform:translateY(-2px);box-shadow:0 6px 20px rgba(217,119,6,0.3)}

/* === Cities === */
.city-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px;padding:10px 4px}
.city-grid a{display:inline-block;padding:7px 18px;background:#f5f7fa;border:1px solid #eef2f7;border-radius:4px;font-size:13px;color:#555;transition:all .2s;white-space:nowrap}
.city-grid a:hover{background:#d97706;color:#fff;border-color:#d97706}


/* === Footer === */
.bottom_main{background:#1a2a4a;padding:50px 0 0}
.bottom_main .foot-grid{display:flex;gap:0;padding-bottom:30px}
.bottom_main .foot-brand{width:320px;margin-right:40px}
.bottom_main .foot-brand h3{font-size:18px;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.bottom_main .foot-brand h3 .logo-icon{width:34px;height:34px;background:linear-gradient(135deg,#d97706,#f59e0b);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem}
.bottom_main .foot-brand h3 span{color:#fbbf24}
.bottom_main .foot-brand p{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.8;margin-bottom:12px}
.bottom_main .foot-brand .phone{font-size:14px;color:rgba(255,255,255,0.6)}
.bottom_main .foot-brand .phone a{color:#fbbf24;font-weight:700;font-size:16px}
.bottom_main .foot-nav{display:flex;flex:1;gap:20px}
.bottom_main .foot-nav > div{flex:1}
.bottom_main .foot-nav h4{font-size:14px;color:#fff;margin-bottom:14px;font-weight:600}
.bottom_main .foot-nav li{margin-bottom:7px}
.bottom_main .foot-nav a{font-size:12px;color:rgba(255,255,255,0.5);transition:all .2s}
.bottom_main .foot-nav a:hover{color:#fbbf24;padding-left:3px}
.bottom_main .foot-contact{width:260px;margin-left:40px}
.bottom_main .foot-contact h4{font-size:14px;color:#fff;margin-bottom:14px;font-weight:600}
.bottom_main .foot-contact .ci{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.bottom_main .foot-contact .ci-icon{width:20px;color:#fbbf24;font-size:14px}
.bottom_main .foot-contact .ci-label{font-size:11px;color:rgba(255,255,255,0.4)}
.bottom_main .foot-contact .ci-val{font-size:13px;color:#fff;font-weight:600}
.bottom_copy{background:#0f1f35;padding:16px 0;text-align:center;font-size:12px;color:rgba(255,255,255,0.3)}
.bottom_copy a{color:rgba(255,255,255,0.4)}
.bottom_copy a:hover{color:#fbbf24}

/* === Back to Top === */
#ztBt{position:fixed;bottom:80px;right:20px;width:40px;height:40px;background:#d97706;color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;opacity:0;visibility:hidden;z-index:999;transition:all .3s}
#ztBt.show{opacity:1;visibility:visible}
#ztBt:hover{background:#b45309;transform:translateY(-3px)}
.zt-mbar{display:none}

/* === Stats Banner (inside floor_4) === */
.stats-row{display:flex;justify-content:center;gap:30px;margin-top:30px;padding-top:30px;border-top:1px solid rgba(255,255,255,0.08)}
.stats-row .stat-item{text-align:center;padding:0 20px}
.stats-row .stat-num{font-size:1.8rem;font-weight:800;color:#fbbf24}
.stats-row .stat-label{font-size:12px;color:rgba(255,255,255,0.5);margin-top:4px}

/* === Responsive === */
@media(max-width:1200px){
  body,html{min-width:auto}
  .w1200{width:100%;padding:0 15px}
}
@media(max-width:992px){
  .floor_1 .body li,.floor_3 .body li,.floor_5 .body li{width:48%;margin-right:4%}
  .floor_1 .body li:nth-child(2n){margin-right:0}
  .floor_4_main .liucheng li{width:48%;margin-bottom:20px}
  .bottom_main .foot-grid{flex-direction:column}
  .bottom_main .foot-brand,.bottom_main .foot-contact{width:100%;margin:0 0 30px}
}
@media(max-width:768px){
  .top_main li{margin-left:10px}
  .floor_1 .body li,.floor_3 .body li,.floor_5 .body li{width:100%;margin-right:0}
  .floor_4_main .liucheng li{width:100%;margin-right:0}
}