@charset "utf-8";
/* =========================================================
   上海敏学 · 莫兰迪设计系统（全站前端统一）
   与 imxC 项目既定莫兰迪 8 色盘一致
   ========================================================= */
:root{
  --moon:#FAF6EA; --celadon:#E4DED2; --frost:#DADAD4; --dai:#7D9EA7;
  --lotus:#E3CDA3; --lilac:#94747F; --clay:#C1AB9D; --ink:#5C544E;
  --ink-soft:#8A8079;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Microsoft YaHei","微软雅黑",Verdana,Arial,sans-serif;background:var(--moon);color:var(--ink);line-height:1.65;font-size:15px;}
a{color:var(--ink);text-decoration:none;transition:.2s;}
img{display:block;max-width:100%;}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* header */
header{background:#fff;border-bottom:1px solid var(--celadon);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(92,84,78,.06);}
.navwrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;flex-wrap:wrap;gap:10px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand h1{font-size:inherit;font-weight:inherit;margin:0;line-height:1.25;}
.brand .logo{width:56px;height:56px;flex:0 0 auto;object-fit:contain;}
.brand b{font-size:21px;color:var(--ink);font-weight:700;letter-spacing:1px;}
.brand small{display:block;font-size:11px;color:var(--dai);font-weight:400;letter-spacing:0;}
nav{display:flex;gap:4px;flex-wrap:wrap;}
nav a{padding:9px 15px;border-radius:10px;font-size:15px;}
nav a:hover{background:var(--dai);color:#fff;}
nav a.active{background:var(--ink);color:#fff;}

/* sections */
section.wrap{padding-top:16px;padding-bottom:16px;}
/* 同一 section 内相邻卡片之间的呼吸间距（列式排布的页面：a00/h00/c00 等） */
section.wrap > .card + .card{margin-top:20px;}
section.wrap > .subbar + .card{margin-top:20px;}
.sec-title{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.sec-title .bar{width:5px;height:22px;border-radius:3px;background:var(--dai);}
.sec-title h2{font-size:20px;color:var(--ink);font-weight:700;letter-spacing:1px;}
.sec-title .more{margin-left:auto;font-size:13px;color:var(--dai);}
.sec-title .more:hover{color:var(--ink);text-decoration:underline;}
.card{background:#fff;border-radius:18px;padding:22px;box-shadow:0 6px 22px rgba(92,84,78,.07);border:1px solid var(--celadon);}

/* hero / carousel */
.hero{display:flex;gap:20px;align-items:stretch;}
.focus{width:860px;flex:0 0 860px;position:relative;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(92,84,78,.14);}
.focus #pic{width:860px;height:480px;overflow:hidden;}
.focus #pic ul{width:6000px;height:480px;}
.focus #pic li{width:860px;height:480px;float:left;position:relative;}
.focus #pic li img{width:860px;height:480px;object-fit:cover;}
.focus .cap{position:absolute;left:0;bottom:0;width:100%;padding:24px 130px 22px 28px;color:#fff;background:linear-gradient(transparent,rgba(92,84,78,.82));pointer-events:none;}
.focus .cap .t{display:block;font-size:24px;font-weight:700;letter-spacing:1px;text-shadow:0 2px 10px rgba(0,0,0,.35);}
.focus .cap .d{display:block;margin-top:7px;font-size:14px;line-height:1.6;color:#eef4f2;text-shadow:0 1px 6px rgba(0,0,0,.3);}
.focus #tip{position:absolute;right:18px;bottom:16px;z-index:13;}
.focus #tip ul{display:flex;gap:9px;}
.focus #tip li{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.65);cursor:pointer;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.focus #tip li.current{background:var(--dai);transform:scale(1.25);}
.side{flex:1;display:flex;flex-direction:column;gap:14px;}
.side a{display:block;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(92,84,78,.1);position:relative;}
.side a img{width:100%;height:110px;object-fit:cover;transition:.3s;}
.side a:hover img{transform:scale(1.04);}
.side a span{position:absolute;left:0;bottom:0;width:100%;padding:8px 12px;color:#fff;font-size:14px;font-weight:600;background:linear-gradient(transparent,rgba(92,84,78,.78));}

/* two cols */
.cols{display:flex;gap:20px;}
.cols .card{flex:1;min-width:0;}
.cols .card:nth-child(1){flex:3;}
.cols .card:nth-child(2){flex:7;}
.plist{list-style:none;}
.plist li{padding:11px 4px;border-bottom:1px dashed var(--celadon);}
.plist li:last-child{border-bottom:none;}
.plist li a{font-size:15px;}
.plist li a:hover{color:var(--dai);padding-left:6px;}
.plist li.empty{color:#bbb;}
.nlist{list-style:none;}
.nlist li{padding:10px 0;border-bottom:1px dashed var(--celadon);display:flex;align-items:center;gap:8px;}
.nlist li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--frost);flex:0 0 7px;}
.nlist li a{font-size:14px;color:#5A5148;}
.nlist li a:hover{color:var(--dai);}
.nlist li.more:before{display:none;}
.nlist li.more a{color:var(--dai);font-weight:600;}

/* banner */
.banner{display:block;border-radius:18px;overflow:hidden;box-shadow:0 8px 26px rgba(92,84,78,.12);position:relative;}
.banner img{width:100%;height:200px;object-fit:cover;}
.banner .bcap{position:absolute;left:36px;bottom:30px;color:#fff;font-size:28px;font-weight:700;letter-spacing:3px;text-shadow:0 2px 12px rgba(0,0,0,.45);pointer-events:none;}
.banner .bcap:after{content:"";display:block;width:46px;height:3px;margin-top:10px;background:rgba(255,255,255,.85);border-radius:2px;}

/* products 3 cols */
.p3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.p3 .col{background:#fff;border:1px solid var(--celadon);border-radius:14px;padding:14px 16px;box-shadow:0 4px 16px rgba(92,84,78,.06);}
.p3 .col h3{font-size:15px;color:var(--dai);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--celadon);}
.p3 .col ul{list-style:none;}
.p3 .col li{padding:7px 0;font-size:14px;border-bottom:1px dotted #E8E1D6;}
.p3 .col li:last-child{border-bottom:none;}
.p3 .col li a:hover{color:var(--dai);}

/* links */
.links{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:14px;}
.links a{color:var(--ink-soft);}
.links a:hover{color:var(--dai);text-decoration:underline;}

/* footer */
footer{background:var(--ink);color:#dfe7e4;margin-top:30px;padding:34px 0;}
.footwrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 16px;flex-wrap:wrap;}
.footwrap a{color:#dfe7e4;}
.footwrap .fn{font-size:18px;font-weight:700;color:#fff;}
.footwrap .meta{font-size:13px;line-height:2;}
.footwrap .vx{width:86px;height:86px;border-radius:10px;background:#fff;padding:4px;}

/* =========================================================
   内页组件
   ========================================================= */
.page-hero{background:linear-gradient(120deg,#F3EBDE 0%,#E8E2D6 55%,#DEE5E6 100%);border-bottom:1px solid var(--celadon);}
.page-hero .inner{max-width:1200px;margin:0 auto;padding:40px 16px 34px;}
.page-hero h1{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:2px;}
.page-hero .sub{margin-top:10px;font-size:14px;color:var(--dai);letter-spacing:.5px;}
.crumb{margin-top:14px;font-size:13px;color:var(--ink-soft);}
.crumb a{color:var(--ink-soft);}
.crumb a:hover{color:var(--dai);}
.hero-img{width:100%;height:250px;object-fit:cover;border-radius:18px;box-shadow:0 8px 26px rgba(92,84,78,.12);}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* 4:6 双栏（相关产品 : 相关新闻），总宽与 .grid-2 一致 */
.grid-46{display:grid;grid-template-columns:4fr 6fr;gap:20px;}
.grid-46 > .card{min-width:0;}

.about p{margin-bottom:14px;font-size:15px;color:#5A5148;line-height:1.95;text-indent:2em;}
.about p:last-child{margin-bottom:0;}
/* 图文填充卡：与长卡片并排时，配图自动沉到底部并填满剩余空间，消除大片留白 */
.card.fill{display:flex;flex-direction:column;}
.card.fill .filler{margin-top:auto;padding-top:18px;flex:1 1 auto;display:flex;min-height:200px;}
.card.fill .filler img{width:100%;height:100%;min-height:200px;max-height:360px;object-fit:cover;border-radius:14px;box-shadow:0 6px 20px rgba(92,84,78,.12);}
.card h3{font-size:17px;color:var(--ink);margin-bottom:10px;padding-left:12px;border-left:4px solid var(--dai);line-height:1.2;}
.card p{font-size:14px;color:#5A5148;line-height:1.9;}
.card p+p{margin-top:8px;}
ul.dot{list-style:none;}
ul.dot li{position:relative;padding:5px 0 5px 16px;font-size:14px;color:#5A5148;line-height:1.85;}
ul.dot li:before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--clay);}

/* project rows */
.proj{display:flex;gap:26px;align-items:center;}
.proj .txt{flex:1;min-width:0;}
.proj .pic{flex:0 0 330px;}
.proj .pic img{width:100%;height:195px;object-fit:cover;border-radius:14px;box-shadow:0 6px 20px rgba(92,84,78,.12);}
.proj.rev{flex-direction:row-reverse;}
/* 长文本卡片：图片与正文顶端对齐，避免垂直居中造成的错位；正文段落间距放宽 */
.proj.long{align-items:flex-start;}
.proj.long .pic img{height:auto;min-height:195px;max-height:300px;}
.proj.long p{margin-bottom:13px;line-height:2;}
.proj.long h4{margin:22px 0 10px;font-size:16px;padding-bottom:6px;border-bottom:1px dashed var(--celadon);}
.proj.long p:last-child{margin-bottom:0;}
.proj h3{font-size:19px;color:var(--ink);margin-bottom:12px;border:none;padding:0;}
.proj h3 em{font-style:normal;color:var(--dai);}
.proj h4{font-size:15px;color:var(--dai);margin:16px 0 6px;border:none;padding:0;}
.proj p{font-size:14px;color:#5A5148;line-height:1.95;margin-bottom:10px;}
.proj ol,.proj ul.dot{margin-top:4px;}

/* product cards —— 两栏：文字左 / 图标右（图标贴容器右侧，靠卡片 padding 留白） */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
a.prod{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;align-content:center;background:#fff;border:1px solid var(--celadon);border-radius:14px;padding:18px;box-shadow:0 4px 16px rgba(92,84,78,.06);transition:.25s;}
a.prod:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(92,84,78,.14);border-color:var(--dai);}
a.prod .ptag{grid-column:1;grid-row:1;justify-self:start;display:inline-block;font-size:12px;color:var(--dai);background:#EFF3F3;border-radius:6px;padding:2px 8px;}
a.prod .pname{grid-column:1;grid-row:2;min-width:0;display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.65;min-height:50px;margin-top:10px;}
a.prod .pmore{grid-column:1;grid-row:3;display:block;margin-top:10px;font-size:13px;color:var(--dai);}
a.prod.empty{background:transparent;border:1px dashed var(--celadon);box-shadow:none;}
/* 产品卡分类图标：右栏，纵向跨三行并垂直居中 */
a.prod .pico{grid-column:2;grid-row:1/4;align-self:center;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#F1F3F2;transition:.25s;}
a.prod .pico svg{width:24px;height:24px;stroke:var(--dai);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
a.prod:hover .pico{background:var(--dai);}
a.prod:hover .pico svg{stroke:#fff;}

/* product list rows */
.plist2{display:flex;flex-direction:column;gap:16px;}
.plist2 .row{display:flex;gap:20px;background:#fff;border:1px solid var(--celadon);border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(92,84,78,.06);transition:.25s;}
.plist2 .row:hover{box-shadow:0 12px 28px rgba(92,84,78,.13);border-color:#D8CFC0;}
.plist2 .row img{width:220px;height:130px;object-fit:cover;border-radius:10px;flex:0 0 220px;}
.plist2 .row .info{flex:1;min-width:0;}
.plist2 .row .info h3{font-size:17px;color:var(--ink);margin-bottom:8px;border:none;padding:0;}
.plist2 .row .info .cat{float:right;font-size:13px;color:var(--dai);font-weight:400;}
.plist2 .row .info p{font-size:14px;color:#5A5148;line-height:1.85;}
.plist2 .row .info .go{display:block;margin-top:10px;font-size:13px;color:var(--dai);}
.plist2 .row .info .go:hover{color:var(--ink);}

/* search bar */
.searchbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.searchbar .lbl{font-size:14px;color:var(--ink-soft);}
.input{border:1px solid var(--celadon);background:#fff;border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit;color:var(--ink);outline:none;transition:.2s;}
.input:focus{border-color:var(--dai);box-shadow:0 0 0 3px rgba(125,158,167,.15);}
textarea.input{resize:vertical;line-height:1.85;}
.btn{display:inline-block;border:none;cursor:pointer;background:var(--dai);color:#fff;border-radius:10px;padding:10px 22px;font-size:14px;font-family:inherit;transition:.2s;}
.btn:hover{background:var(--ink);}

/* contact */
.contact-info .row{display:flex;gap:10px;padding:9px 0;font-size:15px;border-bottom:1px dashed var(--celadon);}
.contact-info .row:last-child{border-bottom:none;}
.contact-info .row b{flex:0 0 84px;color:var(--dai);font-weight:600;}
.contact-info .row span{color:#5A5148;}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:6px;}
.form-grid .full{grid-column:1/-1;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:14px;color:var(--ink);}
.field label i{color:#B66341;font-style:normal;margin-left:2px;}
.field .input{width:100%;}

/* article */
.subbar{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--celadon);border-radius:12px;padding:13px 18px;box-shadow:0 3px 12px rgba(92,84,78,.05);font-size:14px;}
.subbar .cur{font-weight:600;color:var(--ink);}
.subbar .sub-links{margin-left:auto;display:flex;gap:18px;}
.subbar .sub-links a{color:var(--ink-soft);}
.subbar .sub-links a:hover{color:var(--dai);}
.article-title{font-size:24px;font-weight:700;color:var(--ink);text-align:center;letter-spacing:1px;margin:26px 0 18px;}
.detail{font-size:15px;line-height:2;color:#4A423C;overflow-wrap:break-word;word-break:break-word;}
/* ⚠️ 后端 p05d.aspx.cs 会把产品正文包进 <table width=1200>，
   而容器内宽只有 1122px（1200 - wrap 32 - card 44 - border 2），表格会顶出卡片。
   HTML 的 width 属性属于「表现性提示」，优先级低于任何 CSS 规则，故此处可直接压回 100%。 */
.detail table{width:100%!important;max-width:100%!important;border-collapse:collapse;}
.detail td{max-width:100%;padding:0;}
.detail img,.detail div,.detail p,.detail span,.detail center,
.detail ul,.detail ol,.detail li,.detail h1,.detail h2,.detail h3,.detail h4,.detail h5{max-width:100%;}
.detail img{max-width:100%;height:auto;border-radius:10px;margin:12px 0;}
.detail p{margin-bottom:14px;}
.rel-list{list-style:none;}
.rel-list li{padding:9px 0;border-bottom:1px dashed var(--celadon);font-size:14px;}
.rel-list li:last-child{border-bottom:none;}
.rel-list li a:hover{color:var(--dai);}

/* 相关产品：横向网格（详情页底部） */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.rel-grid a{display:block;padding:13px 16px 13px 30px;position:relative;border:1px solid var(--celadon);border-radius:12px;background:#fff;font-size:14px;line-height:1.6;transition:.25s;}
.rel-grid a:before{content:"";position:absolute;left:15px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--clay);transition:.25s;}
.rel-grid a:hover{border-color:var(--dai);color:var(--dai);transform:translateY(-2px);box-shadow:0 8px 20px rgba(92,84,78,.12);}
.rel-grid a:hover:before{background:var(--dai);}

.sidebar-layout{display:flex;gap:20px;align-items:flex-start;}
.sidebar-layout .main{flex:1;min-width:0;}
.sidebar-layout .side-col{flex:0 0 300px;}

@media(max-width:960px){
  .hero{flex-direction:column;}
  .focus,.focus #pic,.focus #pic li,.focus #pic li img{width:100%;}
  .focus #pic,.focus #pic ul,.focus #pic li{height:300px;}
  .cols{flex-direction:column;}
  .p3{grid-template-columns:1fr;}
  .grid-2,.grid-3,.grid-46,.prod-grid,.form-grid{grid-template-columns:1fr;}
  .rel-grid{grid-template-columns:1fr;}
  .proj,.proj.rev{flex-direction:column;}
  .proj .pic{flex:0 0 auto;width:100%;}
  .plist2 .row{flex-direction:column;}
  .plist2 .row img{width:100%;flex:0 0 auto;height:180px;}
  .sidebar-layout{flex-direction:column;}
  .sidebar-layout .side-col{flex:0 0 auto;width:100%;}
  .page-hero h1{font-size:23px;}
  .article-title{font-size:19px;}
}