@charset "utf-8";
/* 智慧安（苏州智绘安建筑科技有限公司）公共皮肤
   公共头尾/导航/客服/CTA/品牌色统一放本文件；首页专用样式在 index.css。
   品牌值来自首页静态稿 前端/pc/智绘安PC/智绘安PC/index.html */

:root{--brand-primary:#005EC1;--brand-primary-rgb:0,94,193;--brand-primary-dark:#005EC1;--brand-secondary:#3065BC;--tpl-text:#333;--tpl-muted:#666;--tpl-light:#f4f4f4}
*,*:before,*:after{box-sizing:border-box}
html body{min-width:1200px;max-width:1920px;width:100%;margin:0 auto;overflow-x:hidden;color:var(--tpl-text);font:14px/1.6 "Microsoft YaHei",Arial,sans-serif;background:#fff}
body,ul,ol,li,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,img,span,input,textarea{margin:0;padding:0;list-style:none;box-sizing:border-box}
a{color:var(--tpl-text)}a,a:hover,a:active,a:focus{text-decoration:none!important}a:focus{outline:0}img{border:0;max-width:100%}button{border:0}i,em{font-style:normal}
.tpl-clear{clear:both;height:0;line-height:0;font-size:0}.tpl-clearfix:after{content:"";display:block;clear:both}.tpl-container{width:1580px;margin:0 auto}
.tpl-empty{display:flex;min-height:160px;align-items:center;justify-content:center;width:100%;color:#999;background:#fafafa;border:1px dashed #d8d8d8;font-size:16px}
.tpl-common-css-marker{display:none}

/* ===== 头部（内页：品牌蓝实条；首页由 index.css 覆盖为 banner 上的透明叠层）===== */
.tpl-header{height:100px;display:flex;align-items:center;background:var(--brand-primary);border-bottom:1px solid rgba(255,255,255,.3);position:relative;z-index:80;padding:0 calc((100% - 1200px)/2)}
/* 头部 logo/站名/电话带 wow 类：WOW.js 会给 .wow 元素打上行内 visibility:hidden，
   只有进入视口才恢复。头部属于首屏必备信息，不允许被动画机制藏起来，这里强制可见
   （不写 opacity，淡入动画仍保留）。 */
.tpl-header .wow{visibility:visible!important}
.tpl-header-logo{flex:0 0 auto;margin-right:14px}.tpl-header-logo a{display:block}.tpl-header-logo img{display:block;height:75px;width:auto;max-width:230px}
.tpl-header-slogan{font-size:18px;color:#fff;line-height:34px;font-weight:400;white-space:nowrap}.tpl-header-slogan b{display:block;font-weight:700}.tpl-header-slogan em{color:#fff}
.tpl-nav{margin-left:auto}.tpl-nav>ul{display:flex;gap:60px}
.tpl-nav li{height:100px;position:relative;z-index:1}
.tpl-nav li:before{content:"";position:absolute;width:0;height:14px;border-left:1px dashed #fff;right:-35px;bottom:43px;opacity:.85}
.tpl-nav li:last-child:before{display:none}
.tpl-nav li:after{content:"";display:block;width:0;height:3px;background:#fff;position:absolute;left:0;bottom:-1px;opacity:0;transition:.4s}
.tpl-nav li>a{display:block;font-size:18px;color:#fff;line-height:100px;text-align:center;white-space:nowrap;position:relative;z-index:2}
.tpl-nav li:hover:after,.tpl-nav li.cur:after{width:100%;opacity:1}
.tpl-nav li:hover>a,.tpl-nav li.cur>a{color:#fff;font-weight:700}
.tpl-nav li ul{display:none;position:absolute;left:50%;top:76px;min-width:150px;transform:translateX(-50%);padding:10px 0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:90}
.tpl-nav li:hover>ul{display:block}
.tpl-nav li ul li{height:auto}.tpl-nav li ul li:before,.tpl-nav li ul li:after{display:none}
.tpl-nav li ul a{line-height:38px;height:38px;padding:0 18px;font-size:14px;color:#333;text-align:left}
.tpl-nav li ul a:hover{color:var(--brand-primary)}
.tpl-header-tel{position:relative;display:flex;align-items:center;margin-left:55px;height:100px;z-index:12;white-space:nowrap}
.tpl-header-tel img{width:41px;height:41px}
.tpl-header-tel span{position:absolute;left:50%;top:72px;z-index:20;transform:translateX(-50%) scale(0);width:202px;padding-top:9px;font:700 18px/49px Arial,sans-serif;color:#fff;text-align:center;background:url(/Skins/Default/framework/images/tel-k.png) no-repeat center 0;transition:all .5s}
.tpl-header-tel:hover span{transform:translateX(-48%) scale(1)}

/* ===== 底部（按首页静态稿：品牌蓝底 + 左品牌栏 + 四列导航 + 底栏）===== */
.tpl-footer{height:604px;background:var(--brand-primary) url(/Skins/Default/framework/images/foot-bg.jpg) no-repeat center 0;color:#fff}
.tpl-footer-main{height:558px;display:flex;justify-content:space-between}
.tpl-footer-brand{margin-top:52px;flex:0 0 auto}
.tpl-footer-logo{font-size:0}.tpl-footer-logo img{display:block;height:97px;width:auto}
.tpl-footer-tel{margin-top:20px;font:700 40px/50px "Microsoft YaHei",Arial,sans-serif;color:#fff}
.tpl-footer-tel b{display:inline-block;padding-bottom:8px;border-bottom:3px solid #fff}
.tpl-footer-info{padding:28px 0 22px}
.tpl-footer-info p{font-size:16px;color:#fff;line-height:20px}
.tpl-footer-info p+p{margin-top:22px}
.tpl-footer-code{margin-top:0;font-size:0}.tpl-footer-code img{width:130px;height:131px}
.tpl-footer-nav{flex:1 1 auto;min-width:0}
.tpl-footer-nav>ul{display:flex;justify-content:flex-end;gap:80px;margin-top:100px}
.tpl-footer-nav>ul>li{min-width:0}
.tpl-footer-nav>ul>li>a{display:block;font-size:18px;color:#fff;line-height:24px;margin-bottom:20px;font-weight:400}
.tpl-footer-nav>ul>li>ul>li>a{display:block;font-size:16px;color:#fff;line-height:50px;opacity:.5}
.tpl-footer-nav a:hover{color:#fff}
.tpl-footer-nav>ul>li>ul>li>a:hover{opacity:1}
.tpl-footer-line{height:1px;background:#9E9E9E;opacity:.3}
.tpl-footer-bottom{display:flex;height:45px;line-height:45px;font-size:12px;color:#fff;justify-content:space-between;opacity:.7}
.tpl-footer-bottom a{color:#fff}
.tpl-footer-bottom p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-footer-link{min-width:0;text-align:right}.tpl-footer-link a{margin-left:12px}

/* ===== 客服 ===== */
.tpl-kefu{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:999}.tpl-kefu li{width:70px;height:60px;text-align:center;background:var(--brand-primary-dark);margin-bottom:2px;padding:14px 0;position:relative}.tpl-kefu li img{max-height:32px}.tpl-kefu .tpl-kefu-phone p{position:absolute;right:-220px;top:0;z-index:-1;height:60px;padding:0 14px;line-height:60px;color:#fff;font-size:16px;font-weight:700;white-space:nowrap;background:var(--brand-primary-dark);transition:.35s}.tpl-kefu .tpl-kefu-phone:hover p{right:72px}.tpl-kefu .tpl-kefu-code p{position:absolute;right:72px;top:0;padding:8px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18);transform:scale(0);transform-origin:right top;transition:.25s}.tpl-kefu .tpl-kefu-code:hover p{transform:scale(1)}.tpl-kefu .tpl-kefu-code p img{width:120px;max-height:none}.tpl-kefu .tpl-kefu-top{display:none;cursor:pointer}

/* ===== 内页 CTA 横幅（首页不显示，见 Footer.html 的 HideCta）===== */
.tpl-cta{height:300px;background:var(--brand-primary);text-align:center;color:#fff}.tpl-cta h2{padding:72px 0 28px}.tpl-cta h2 b{display:block;font-size:42px;line-height:48px}.tpl-cta h2 span{display:block;font-size:22px;line-height:32px;padding-top:12px;font-weight:400}.tpl-cta a{position:relative;display:flex;width:315px;height:50px;align-items:center;justify-content:center;margin:0 auto;border-radius:25px;background:#fff;color:var(--brand-primary);font-size:18px;font-weight:700}.tpl-cta a img{position:absolute;right:5px;top:50%;transform:translateY(-50%);margin-left:0}

@media(min-width:1701px){.tpl-header{padding:0 calc((100% - 1580px)/2)}}
@media(max-width:1700px){
/* 静态稿 .container 在 ≤1700px 收成 1200px（body 也是 min-width:1200px）——
   公共头尾必须跟着收，否则页脚 1580px 会在笔记本宽度横向溢出、看起来"变形"。 */
.tpl-container{width:1200px}
.tpl-header-slogan{font-size:16px;line-height:30px}
.tpl-nav>ul{gap:35px}
.tpl-nav li:before{right:-17px}
.tpl-nav li>a{font-size:15px}
.tpl-header-tel{margin-left:30px}
.tpl-header-tel span{font-size:16px;width:170px}
.tpl-footer-nav>ul{gap:60px}
.tpl-footer-tel{font-size:34px}
}

/* 头部吸顶：滚动后固定在顶部（common.js 依据滚动位置切换类；首页 absolute 透明叠层不参与） */
.tpl-header.tpl-header-fixed{position:fixed;top:0;left:0;right:0;margin:0 auto;max-width:1920px;min-width:1200px;box-shadow:0 2px 12px rgba(0,0,0,.15)}
body.tpl-header-space{padding-top:100px}

/* 右侧客服探头图标水平居中：全局 img 为块级，li 的 text-align 管不到；
   用 a 撑满内容区做 flex 居中（不动 li 的 display——返回顶部按钮由 JS 以内联 display 控制显隐，会覆盖 li 上的 flex） */
.tpl-kefu li a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}