@charset "utf-8";
/* ============================================================
   天津鸿盼磐建材有限公司 - 全站样式
   参考模板 28548（蓝海军工业风）
   主色 #113961 深海军蓝 / #256fc2 蓝 / #c6d7e5 浅蓝灰
   辅 #f8d37a 金(电话) / #f7941e 橙(浮动) / #242933 深灰(页脚)
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:"Microsoft YaHei","微软雅黑","Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;background:#fff;line-height:1.6;font-size:14px;overflow-x:hidden;}
img{max-width:100%;border:0;vertical-align:middle;}
a{color:inherit;text-decoration:none;transition:color .25s,background .25s,opacity .25s;}
a:hover{color:#256fc2;}
ul,ol{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
input,textarea,select,button{font-family:inherit;font-size:inherit;outline:none;border:none;}
table{border-collapse:collapse;width:100%;}

/* ---------- Layout wrapper ---------- */
.wp{width:100%;max-width:1200px;margin:0 auto;padding:0 15px;}
.clearfix::after{content:"";display:block;clear:both;}

/* ---------- Fade-in (correct specificity, see notes) ---------- */
.fade-in{opacity:1;transform:none;}
html.js .fade-in{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease;}
html.js .fade-in.visible{opacity:1;transform:none;}

/* ---------- Image fallback ---------- */
.img-fallback{background:linear-gradient(135deg,#113961,#256fc2);display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:120px;color:#fff;font-size:13px;text-align:center;padding:8px;}

/* ============================================================
   TOP  顶部信息栏 + 导航（topbox > lotbox + menubox）
   ============================================================ */
.topbox{position:sticky;top:0;z-index:9999;background:#113961;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:background .3s;}
.lotbox{max-width:1200px;margin:0 auto;height:96px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:12px;}
.logo-icon{width:54px;height:54px;flex:0 0 54px;color:#f8d37a;}
.logo-icon svg{width:100%;height:100%;display:block;}
.logo-text{display:flex;flex-direction:column;line-height:1.1;}
.logo-text .brand{font-size:26px;font-weight:bold;color:#fff;letter-spacing:1px;}
.logo-text .tagline{font-size:12px;color:#9fc1e0;letter-spacing:3px;margin-top:4px;text-transform:uppercase;}
.tel{display:flex;align-items:center;gap:10px;color:#f8d37a;font-size:22px;font-weight:bold;}
.tel .tel-ico{font-size:26px;color:#f8d37a;}
.tel small{display:block;color:#9fc1e0;font-size:12px;font-weight:normal;letter-spacing:1px;}

/* nav */
.menubox{background:#0e2e4f;border-top:1px solid rgba(255,255,255,.08);}
.nav-list{max-width:1200px;margin:0 auto;padding:0 15px;display:flex;}
.nav-list>li{flex:1;position:relative;text-align:center;}
.nav-list>li>a{display:block;height:62px;line-height:62px;color:#fff;font-size:16px;position:relative;}
.nav-list>li>a::after{content:"";position:absolute;left:50%;bottom:14px;width:0;height:2px;background:#f8d37a;transform:translateX(-50%);transition:width .25s;}
.nav-list>li>a:hover,.nav-list>li.active>a{color:#f8d37a;}
.nav-list>li>a:hover::after,.nav-list>li.active>a::after{width:30px;}
.nav-list>li>a .fa{font-size:13px;margin-left:4px;opacity:.7;}
.sub-menu{position:absolute;top:62px;left:0;width:100%;background:rgba(15,117,188,.92);z-index:99999;display:none;}
.sub-menu li{height:44px;line-height:44px;}
.sub-menu li a{display:block;color:#fff;font-size:13px;height:44px;line-height:44px;border-top:1px solid rgba(255,255,255,.18);}
.sub-menu li a:hover{background:#256fc2;color:#fff;}
.nav-list>li:hover .sub-menu{display:block;}

/* mobile header */
.m-hd{display:none;height:58px;background:#113961;position:sticky;top:0;z-index:99999;align-items:center;justify-content:space-between;padding:0 12px;}
.m-logo{display:flex;align-items:center;gap:8px;}
.m-logo .logo-icon{width:38px;height:38px;flex:0 0 38px;}
.m-logo .brand{color:#fff;font-size:18px;font-weight:bold;}
.m-trigger{width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;}
.m-trigger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s;}
.m-nav{display:none;position:fixed;top:58px;left:0;width:100%;background:rgba(13,42,68,.97);z-index:99998;max-height:calc(100vh - 58px);overflow-y:auto;}
.m-nav li{border-bottom:1px solid rgba(255,255,255,.12);}
.m-nav li>a{display:block;color:#fff;font-size:15px;height:46px;line-height:46px;padding:0 18px;}
.m-nav li>a:hover{color:#f8d37a;}
.m-nav .m-sub{display:none;background:rgba(15,117,188,.5);}
.m-nav .m-sub li a{padding-left:38px;font-size:13px;height:42px;line-height:42px;}

/* ============================================================
   BANNER
   ============================================================ */
.banner{width:100%;position:relative;overflow:hidden;background:#0e2e4f;}
.fader{position:relative;width:100%;padding-top:33.3%;overflow:hidden;}
.fader .slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease-in-out;z-index:1;}
.fader .slide.active{opacity:1;z-index:2;}
.fader .slide img{width:100%;height:100%;object-fit:cover;display:block;}
.fader .slide .slide-mask{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,42,68,.7) 0%,rgba(13,42,68,.25) 60%,rgba(13,42,68,.1) 100%);}
.fader .slide .slide-txt{position:absolute;left:8%;top:50%;transform:translateY(-50%);color:#fff;max-width:560px;z-index:3;}
.fader .slide .slide-txt h2{font-size:40px;font-weight:bold;line-height:1.3;text-shadow:0 2px 10px rgba(0,0,0,.4);}
.fader .slide .slide-txt h2 em{color:#f8d37a;font-style:normal;}
.fader .slide .slide-txt p{font-size:16px;margin-top:14px;letter-spacing:1px;opacity:.9;}
.fader .prev,.fader .next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;background:rgba(0,0,0,.3);color:#fff;font-size:26px;text-align:center;line-height:64px;cursor:pointer;z-index:5;transition:background .25s;}
.fader .prev:hover,.fader .next:hover{background:rgba(38,111,194,.8);}
.fader .prev{left:0;}.fader .next{right:0;}
.pager_list{position:absolute;bottom:18px;left:0;width:100%;text-align:center;z-index:5;}
.pager_list li{display:inline-block;width:14px;height:14px;margin:0 6px;background:rgba(255,255,255,.6);border-radius:50%;cursor:pointer;transition:.25s;}
.pager_list li.active{background:#f8d37a;width:30px;border-radius:7px;}
.m-banner{display:none;}

/* ============================================================
   SECTION HEAD (通用标题)
   ============================================================ */
.sec-head{text-align:center;padding:48px 0 8px;}
.sec-head .sec-title{font-size:28px;font-weight:bold;color:#131313;position:relative;display:inline-block;padding:0 26px;}
.sec-head .sec-title::before,.sec-head .sec-title::after{content:"";position:absolute;top:50%;width:16px;height:2px;background:#256fc2;transform:translateY(-50%);}
.sec-head .sec-title::before{left:0;} .sec-head .sec-title::after{right:0;}
.sec-head .sec-sub{font-size:14px;color:#7b849f;letter-spacing:4px;text-transform:uppercase;margin-top:10px;}
.sec-head.light .sec-title{color:#fff;}
.sec-head.light .sec-title::before,.sec-head.light .sec-title::after{background:#6eb1db;}
.sec-head.light .sec-sub{color:#6eb1db;}

/* ============================================================
   ABOUT  关于我们
   ============================================================ */
.about-sec{background:#c6d7e5;padding-bottom:60px;}
.about-nr{width:100%;max-width:1200px;margin:0 auto;padding:0 15px 30px;display:flex;flex-wrap:wrap;gap:24px;}
.about-nr-l{flex:0 0 calc(50% - 12px);background:#fff;padding:30px 34px 36px;}
.about-nr-l .about-tag{font-size:13px;color:#256fc2;letter-spacing:3px;text-transform:uppercase;}
.about-nr-l .about-title{font-size:22px;color:#256fc2;margin:8px 0 16px;font-weight:bold;}
.about-nr-l p.about-desc{font-size:14px;line-height:26px;color:#696969;text-indent:2em;}
.about-nr-l .about-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;border-top:1px dashed #d6d6d6;padding-top:20px;}
.about-nr-l .about-stats .st{flex:1;min-width:90px;text-align:center;}
.about-nr-l .about-stats .st b{display:block;font-size:28px;color:#256fc2;font-weight:bold;}
.about-nr-l .about-stats .st span{font-size:12px;color:#888;}
.about-nr-l .about-btn{display:inline-block;margin-top:22px;color:#5a5a5a;font-size:14px;padding:9px 30px;border:1px solid #9e9e9e;}
.about-nr-l .about-btn:hover{color:#fff;background:#1861ae;border-color:#1861ae;}
.about-nr-r{flex:0 0 calc(50% - 12px);display:flex;flex-wrap:wrap;gap:18px;}
.about-card{flex:0 0 calc(33.333% - 12px);background:#fff;overflow:hidden;}
.about-card .card-img{width:100%;padding-bottom:78%;position:relative;}
.about-card .card-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.about-card .card-cap{padding:16px 8px 20px;text-align:center;}
.about-card .card-cap h4{color:#256fc2;font-size:17px;font-weight:bold;}
.about-card .card-cap p{color:#686868;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-top:4px;}

/* ============================================================
   PRODUCTS  产品展示（深色区）
   ============================================================ */
.product-sec{background:#0c2a47;background-image:linear-gradient(180deg,#0c2a47,#0e2e4f);padding-bottom:56px;}
.cat-tabs{text-align:center;padding:6px 0 30px;}
.cat-tabs .cat-tab{display:inline-block;margin:0 8px;padding:8px 22px;color:#cfe6fb;font-size:14px;border:1px solid rgba(111,177,219,.4);border-radius:2px;}
.cat-tabs .cat-tab:hover,.cat-tabs .cat-tab.active{background:#256fc2;color:#fff;border-color:#256fc2;}
.product-grid{width:100%;display:flex;flex-wrap:wrap;}
.product-grid::after{content:"";flex:auto;}/* not needed with justify */
.product-card{flex:0 0 25%;padding:8px;}
.product-link{display:block;position:relative;overflow:hidden;}
.product-link .imgk{width:100%;padding-bottom:75%;position:relative;background:#0e2e4f;}
.product-link .imgk img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.product-link .hover{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(38,111,194,.55);display:flex;align-items:center;justify-content:center;transform:translateY(-101%);transition:transform .35s;pointer-events:none;}
.product-link .hover-txt{text-align:center;color:#fff;}
.product-link .hover-txt span{display:inline-block;font-size:13px;border:1px solid #fff;padding:7px 22px;}
.product-link:hover .imgk img{transform:scale(1.08);}
.product-link:hover .hover{transform:translateY(0);}
.product-card .card-name{background:#113961;color:#ddf2ff;font-size:14px;text-align:center;padding:12px 6px;}
.product-card:hover .card-name{background:#256fc2;color:#fff;}
.cpgd{text-align:center;margin-top:34px;}
.cpgd a{display:inline-block;color:#fff;font-size:16px;padding:10px 40px;border:1px solid #6eb1db;}
.cpgd a:hover{background:#256fc2;border-color:#256fc2;}

/* ============================================================
   CASES  应用实例（浅蓝灰区）
   ============================================================ */
.case-sec{background:#c6d7e5;padding-bottom:56px;}
.case-grid{width:100%;max-width:1250px;margin:0 auto;padding:0 15px;display:flex;flex-wrap:wrap;gap:16px;}
.case-item{flex:0 0 calc(16.666% - 14px);background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.case-item .case-img{width:100%;padding-bottom:68%;position:relative;overflow:hidden;}
.case-item .case-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.case-item:hover .case-img img{transform:scale(1.1);}
.case-item .case-name{padding:12px 6px;text-align:center;color:#256fc2;font-size:14px;}

/* ============================================================
   NEWS  新闻动态（深色区）
   ============================================================ */
.news-sec{background:#113961;padding-bottom:64px;}
.news-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 15px;display:flex;flex-wrap:wrap;gap:30px;}
.news-col{flex:0 0 calc(50% - 15px);}
.news-col h3.news-title{color:#fff;font-size:22px;font-weight:bold;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;align-items:center;}
.news-col h3.news-title .more-link{color:#9fc1e0;font-size:12px;font-weight:normal;letter-spacing:1px;}
.news-col h3.news-title .more-link:hover{color:#f8d37a;}
.news-feat{display:flex;gap:14px;margin-top:18px;}
.news-feat .feat-img{flex:0 0 200px;height:140px;overflow:hidden;position:relative;}
.news-feat .feat-img img{width:100%;height:100%;object-fit:cover;}
.news-feat .feat-body{flex:1;}
.news-feat .feat-body .feat-title{display:block;color:#fff;font-size:16px;font-weight:bold;line-height:1.5;margin-bottom:8px;}
.news-feat .feat-body .feat-cap{background:#afd5f9;color:#2f2f2f;font-size:13px;padding:7px 10px;line-height:1.4;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.news-feat .feat-body p{color:#cfe6fb;font-size:13px;line-height:22px;}
.news-list{margin-top:16px;}
.news-list li{line-height:38px;border-bottom:1px dashed rgba(255,255,255,.12);}
.news-list li a{display:block;color:#fefefe;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.news-list li a:hover{color:#dab866;}
.news-list li a .news-date{display:inline-block;background:#3071b2;color:#fff;font-size:12px;width:58px;height:24px;line-height:24px;text-align:center;margin-right:12px;vertical-align:middle;}

/* ============================================================
   PARTNERS  合作伙伴
   ============================================================ */
.partner-sec{background:#fff;padding-bottom:56px;}
.partner-grid{width:100%;max-width:1200px;margin:0 auto;padding:0 15px;display:flex;flex-wrap:wrap;gap:14px;}
.partner-item{flex:0 0 calc(12.5% - 13px);height:78px;background:#f4f7fa;border:1px solid #e6edf3;display:flex;align-items:center;justify-content:center;color:#7b849f;font-size:14px;text-align:center;padding:4px;transition:.25s;}
.partner-item:hover{border-color:#256fc2;color:#256fc2;background:#fff;box-shadow:0 4px 12px rgba(38,111,194,.12);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#242933;border-top:8px solid #c6d7e5;color:#cacaca;}
.footer-top{max-width:1200px;margin:0 auto;padding:42px 15px 30px;display:flex;flex-wrap:wrap;gap:30px;}
.footer-l{flex:1;min-width:280px;}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-logo .logo-icon{width:46px;height:46px;color:#f8d37a;}
.footer-logo .brand{color:#fff;font-size:20px;font-weight:bold;}
.footer-company{color:#fff;font-size:17px;margin-bottom:14px;line-height:1.5;}
.footer-contact p{color:#cacaca;font-size:13px;line-height:30px;}
.footer-contact p .fa{color:#6eb1db;width:18px;text-align:center;margin-right:8px;}
.footer-contact p a:hover{color:#fff;}
.footer-qr{margin-top:16px;display:flex;align-items:center;gap:12px;}
.footer-qr .qr-img{width:96px;height:96px;background:#fff;padding:4px;}
.footer-qr .qr-img img{width:100%;height:100%;}
.footer-qr .qr-cap{color:#9fc1e0;font-size:12px;line-height:1.6;}
.footer-r{flex:0 0 460px;display:flex;gap:10px;justify-content:flex-end;}
.footer-col{flex:1;}
.footer-col h3.footer-col-title{color:#fff;font-size:16px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid #4e5564;}
.footer-col li{line-height:32px;}
.footer-col li a{color:#c0c0c0;font-size:13px;}
.footer-col li a::before{content:"›";color:#6eb1db;margin-right:8px;}
.footer-col li a:hover{color:#fff;}
.footer-copy{border-top:1px solid #323845;text-align:center;padding:16px 15px;color:#8c93a3;font-size:12px;line-height:1.8;}
.footer-copy a{color:#8c93a3;}
.footer-copy a:hover{color:#fff;}
.footer-copy .beian::before{content:"";display:inline-block;width:14px;height:14px;background:#8c93a3;border-radius:2px;margin-right:5px;vertical-align:middle;opacity:.6;}

/* ============================================================
   SIDE FLOAT
   ============================================================ */
.side2{position:fixed;right:12px;bottom:14%;z-index:100;}
.side2 ul{display:flex;flex-direction:column;gap:6px;}
.side2 .side-btn{display:block;width:46px;height:46px;background:#f7941e;color:#fff;text-align:center;line-height:46px;font-size:20px;}
.side2 .side-btn:hover{background:#113961;}
.side2 .side-btn .weixin{position:absolute;right:56px;bottom:0;width:120px;display:none;background:#fff;padding:6px;border:1px solid #eee;}
.side2 .side-btn .weixin img{width:100%;display:block;}
.side2 .side-btn:hover .weixin{display:block;}

/* ============================================================
   INNER PAGE  内页通用
   ============================================================ */
.n-banner{width:100%;height:240px;position:relative;background:url('') center/cover #0c2a47;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;}
.n-banner .n-banner-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,42,68,.55),rgba(13,42,68,.75));}
.n-banner .n-banner-txt{position:relative;z-index:2;color:#fff;}
.n-banner .n-banner-title{font-size:34px;font-weight:bold;letter-spacing:2px;}
.n-banner .n-banner-en{font-size:14px;color:#9fc1e0;letter-spacing:6px;text-transform:uppercase;margin-top:8px;}
.ntit{background:#f4f7fa;border-bottom:1px solid #e6edf3;}
.ntt{max-width:1200px;margin:0 auto;padding:0 15px;display:flex;align-items:center;justify-content:space-between;height:64px;}
.ntt .ntt-title{font-size:22px;color:#131313;font-weight:bold;}
.ntt .ntt-l i{font-size:12px;color:#9aa3b5;font-style:normal;letter-spacing:2px;margin-left:10px;text-transform:uppercase;}
.ntt .weiz{font-size:13px;color:#7b849f;}
.ntt .weiz a:hover{color:#256fc2;}
.ntt .weiz .fa{margin:0 6px;color:#c4ccd9;}

.page-main{max-width:1200px;margin:0 auto;padding:40px 15px 60px;}

/* ---- product list ---- */
.cat-group{margin-bottom:42px;}
.cat-group h3.cat-title{font-size:20px;color:#256fc2;font-weight:bold;padding:0 0 14px 14px;border-left:5px solid #256fc2;margin-bottom:22px;}
.plist-grid{width:100%;display:flex;flex-wrap:wrap;}
.plist-grid .product-card{flex:0 0 25%;}

/* ---- product detail ---- */
.pro-top{display:flex;flex-wrap:wrap;gap:30px;margin-bottom:40px;}
.pro-top .pro-img{flex:0 0 440px;}
.pro-top .pro-img img{width:100%;border:1px solid #eee;}
.pro-top .pro-info{flex:1;min-width:280px;}
.pro-info .pro-name{font-size:24px;color:#131313;font-weight:bold;margin-bottom:6px;}
.pro-info .pro-en{color:#9aa3b5;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;}
.pro-info .pro-brief{background:#f4f7fa;border-left:4px solid #256fc2;padding:16px 20px;color:#555;font-size:14px;line-height:26px;margin-bottom:20px;}
.pro-info .pro-price{color:#e8553e;font-size:18px;font-weight:bold;margin-bottom:18px;}
.pro-info .pro-btn{display:inline-block;background:#256fc2;color:#fff;padding:11px 36px;font-size:15px;}
.pro-info .pro-btn:hover{background:#113961;}
.pro-section{margin-bottom:36px;}
.pro-section h3.pro-h3{font-size:18px;font-weight:bold;color:#131313;padding-bottom:12px;border-bottom:2px solid #eef2f7;margin-bottom:18px;position:relative;}
.pro-section h3.pro-h3::after{content:"";position:absolute;left:0;bottom:-2px;width:60px;height:2px;background:#256fc2;}
.pro-section p{color:#555;font-size:14px;line-height:27px;text-indent:2em;margin-bottom:12px;}
.param-table{border:1px solid #e6edf3;}
.param-table th,.param-table td{border:1px solid #e6edf3;padding:11px 16px;font-size:14px;text-align:left;}
.param-table th{background:#f4f7fa;color:#256fc2;font-weight:bold;width:24%;}
.param-table td{color:#555;}
.pro-features{display:flex;flex-wrap:wrap;gap:16px;}
.feat-item{flex:0 0 calc(50% - 8px);display:flex;gap:12px;align-items:flex-start;background:#f9fbfd;border:1px solid #eef2f7;padding:16px;}
.feat-item .feat-ico{flex:0 0 42px;width:42px;height:42px;background:#256fc2;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;}
.feat-item .feat-body h4{font-size:15px;color:#131313;font-weight:bold;margin-bottom:4px;}
.feat-item .feat-body p{font-size:13px;color:#777;text-indent:0;line-height:22px;margin:0;}
.related-grid{width:100%;display:flex;flex-wrap:wrap;}
.related-grid .product-card{flex:0 0 25%;}

/* ---- news list ---- */
.news-list-page .nl-item{display:flex;gap:22px;padding:24px 0;border-bottom:1px solid #eef2f7;}
.news-list-page .nl-item .nl-img{flex:0 0 240px;height:160px;overflow:hidden;}
.news-list-page .nl-item .nl-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.news-list-page .nl-item:hover .nl-img img{transform:scale(1.06);}
.news-list-page .nl-item .nl-body{flex:1;}
.news-list-page .nl-item .nl-title{font-size:18px;color:#131313;font-weight:bold;margin-bottom:10px;}
.news-list-page .nl-item:hover .nl-title{color:#256fc2;}
.news-list-page .nl-item .nl-meta{font-size:13px;color:#9aa3b5;margin-bottom:10px;}
.news-list-page .nl-item .nl-meta .fa{margin-right:5px;}
.news-list-page .nl-item .nl-meta span{margin-right:18px;}
.news-list-page .nl-item .nl-desc{font-size:14px;color:#666;line-height:24px;}

/* ---- news detail ---- */
.news-article{background:#fff;}
.article-head{text-align:center;padding:0 0 24px;border-bottom:1px solid #eef2f7;margin-bottom:28px;}
.article-head .article-title{font-size:26px;color:#131313;font-weight:bold;line-height:1.4;}
.article-head .article-meta{font-size:13px;color:#9aa3b5;margin-top:14px;}
.article-head .article-meta span{margin:0 12px;}
.article-body{color:#555;font-size:15px;line-height:28px;}
.article-body p{text-indent:2em;margin-bottom:18px;}
.article-body img{display:block;margin:22px auto;max-width:100%;border:1px solid #eee;}
.article-body h3{font-size:18px;color:#256fc2;font-weight:bold;margin:24px 0 12px;text-indent:0;}
.article-nav{display:flex;justify-content:space-between;margin-top:36px;padding-top:22px;border-top:1px solid #eef2f7;font-size:14px;flex-wrap:wrap;gap:10px;}
.article-nav a{color:#666;}
.article-nav a:hover{color:#256fc2;}

/* ---- about page ---- */
.about-page p{color:#555;font-size:14px;line-height:28px;text-indent:2em;margin-bottom:16px;}
.about-block{margin-bottom:44px;}
.about-block h3.ab-h3{font-size:20px;font-weight:bold;color:#131313;border-left:5px solid #256fc2;padding-left:14px;margin-bottom:22px;}
.timeline{position:relative;padding:10px 0 10px 30px;border-left:2px solid #c6d7e5;}
.tl-item{position:relative;margin-bottom:30px;}
.tl-item::before{content:"";position:absolute;left:-37px;top:6px;width:14px;height:14px;background:#256fc2;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #256fc2;}
.tl-item .tl-year{font-size:20px;font-weight:bold;color:#256fc2;}
.tl-item .tl-title{font-size:16px;color:#131313;font-weight:bold;margin:4px 0;}
.tl-item .tl-desc{font-size:14px;color:#666;line-height:24px;}
.culture-grid{width:100%;display:flex;flex-wrap:wrap;gap:20px;}
.culture-card{flex:0 0 calc(33.333% - 14px);background:#f4f7fa;border-top:3px solid #256fc2;padding:30px 24px;text-align:center;}
.culture-card .cul-ico{width:60px;height:60px;background:#256fc2;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px;}
.culture-card h4{font-size:18px;color:#131313;font-weight:bold;margin-bottom:10px;}
.culture-card p{color:#666;font-size:13px;line-height:22px;text-indent:0;}
.team-grid{width:100%;display:flex;flex-wrap:wrap;gap:20px;}
.team-card{flex:0 0 calc(25% - 15px);text-align:center;}
.team-card .team-av{width:100%;padding-bottom:100%;position:relative;border-radius:50%;overflow:hidden;border:3px solid #eef2f7;}
.team-card .team-av img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.team-card h4{font-size:17px;color:#131313;font-weight:bold;margin-top:14px;}
.team-card .team-role{font-size:13px;color:#256fc2;margin-top:4px;}

/* ---- contact page ---- */
.contact-info{width:100%;display:flex;flex-wrap:wrap;gap:18px;margin-bottom:40px;}
.contact-card{flex:0 0 calc(33.333% - 12px);background:#f4f7fa;padding:30px 22px;text-align:center;border-top:3px solid #256fc2;}
.contact-card .ci-ico{width:56px;height:56px;background:#256fc2;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px;}
.contact-card h4{font-size:16px;color:#131313;font-weight:bold;margin-bottom:8px;}
.contact-card p{font-size:14px;color:#666;line-height:24px;}
.contact-form{background:#f9fbfd;border:1px solid #eef2f7;padding:34px;}
.contact-form h3{font-size:20px;font-weight:bold;color:#131313;margin-bottom:22px;border-left:5px solid #256fc2;padding-left:12px;}
.form-row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px;}
.form-group{flex:1;min-width:240px;}
.form-group label{display:block;font-size:13px;color:#666;margin-bottom:6px;}
.form-group label .req{color:#e8553e;}
.form-input,.form-textarea{width:100%;background:#fff;border:1px solid #dde3ec;padding:11px 14px;font-size:14px;color:#333;}
.form-input:focus,.form-textarea:focus{border-color:#256fc2;}
.form-textarea{min-height:130px;resize:vertical;}
.form-btn{background:#256fc2;color:#fff;padding:12px 44px;font-size:15px;cursor:pointer;margin-top:6px;}
.form-btn:hover{background:#113961;}
.map-box{margin-top:34px;}
.map-box h3{font-size:18px;font-weight:bold;color:#131313;margin-bottom:14px;border-left:4px solid #256fc2;padding-left:12px;}
.map-box .map-img{width:100%;height:300px;background:#eef2f7;border:1px solid #e6edf3;object-fit:cover;transition:opacity .25s;}
.map-box .map-link{display:block;}
.map-box .map-link:hover .map-img{opacity:.85;}
.map-box .map-tip{text-align:center;color:#9aa3b5;font-size:13px;margin-top:12px;}
.map-box .map-tip .fa{color:#256fc2;margin-right:5px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width:1199px){
  .about-nr-l,.about-nr-r{flex:0 0 100%;}
  .about-nr-r{gap:14px;}
  .footer-r{flex:0 0 100%;justify-content:flex-start;}
}
@media screen and (max-width:1024px){
  .news-col{flex:0 0 100%;}
  .fader .slide .slide-txt h2{font-size:32px;}
  .product-card,.plist-grid .product-card,.related-grid .product-card{flex:0 0 33.333%;}
  .case-item{flex:0 0 calc(33.333% - 12px);}
  .partner-item{flex:0 0 calc(25% - 11px);}
  .team-card{flex:0 0 calc(33.333% - 14px);}
  .pro-top .pro-img{flex:0 0 100%;}
}
@media screen and (max-width:768px){
  .topbox{display:none;}
  .m-hd{display:flex;}
  .sec-head .sec-title{font-size:23px;}
  .fader{padding-top:50%;}
  .fader .slide .slide-txt{left:6%;max-width:90%;}
  .fader .slide .slide-txt h2{font-size:24px;}
  .fader .slide .slide-txt p{font-size:13px;}
  .product-card,.plist-grid .product-card,.related-grid .product-card{flex:0 0 50%;}
  .case-item{flex:0 0 calc(50% - 8px);}
  .partner-item{flex:0 0 calc(33.333% - 10px);}
  .about-card{flex:0 0 calc(50% - 9px);}
  .culture-card,.team-card,.contact-card{flex:0 0 100%;}
  .news-list-page .nl-item .nl-img{flex:0 0 100%;height:200px;}
  .footer-top{padding:30px 15px;}
  .n-banner h1{font-size:24px;}
  .pro-features .feat-item{flex:0 0 100%;}
}
@media screen and (max-width:480px){
  .fader .prev,.fader .next{display:none;}
  .product-card,.plist-grid .product-card,.related-grid .product-card{flex:0 0 100%;}
  .case-item{flex:0 0 100%;}
  .partner-item{flex:0 0 calc(50% - 7px);}
  .about-card{flex:0 0 100%;}
  .fader .slide .slide-txt h2{font-size:20px;}
  .page-main{padding:26px 12px 44px;}
  .form-row{flex-direction:column;}
}