/* ============ 布局5：瀑布流画廊（gallery） ============ */
/* 结构：胶囊导航 + 圆角大banner + CSS瀑布流产品画廊 + 时间轴资讯 + 拼色关于区 */

.l5-top{background:#241a12;color:rgba(255,255,255,.6);font-size:12px;}
.l5-top .in{display:flex;justify-content:space-between;align-items:center;height:36px;}
.l5-top a{color:rgba(255,255,255,.6);margin:0 5px;}
.l5-top a:hover{color:#fff;}
/* 城市下拉为白底弹层，覆盖回深色文字 */
.l5-top .city-dropdown{background:#fff;}
.l5-top .city-dropdown strong{color:var(--main);}
.l5-top .city-dropdown a{display:inline-block;margin:4px 10px 4px 0;color:var(--text2);}
.l5-top .city-dropdown a:hover,.l5-top .city-dropdown a.on{color:var(--gold-d);font-weight:bold;}

.l5-header{background:#fffdf8;border-bottom:1px solid #efe6d8;}
.l5-header .in{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:20px;}
.l5-logo{display:flex;align-items:center;gap:10px;}
.l5-logo img{height:50px;width:auto;}
.l5-logo .mark{width:50px;height:50px;background:var(--main);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:bold;}
.l5-logo .name{font-size:23px;font-weight:bold;color:var(--main);letter-spacing:2px;}
.l5-logo .en{display:block;font-size:11px;color:#b9a98f;letter-spacing:3px;}
.l5-search{display:flex;border:1px solid #e5d9c4;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 3px 12px rgba(90,70,49,.07);}
.l5-search input{border:0;outline:none;padding:10px 20px;font-size:13px;width:250px;background:transparent;}
.l5-search button{background:var(--main);color:#fff;border:0;padding:0 22px;cursor:pointer;border-radius:0 24px 24px 0;}
.l5-tel{display:flex;align-items:center;gap:10px;}
.l5-tel .ico{width:42px;height:42px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:17px;}
.l5-tel .num{font-size:21px;font-weight:bold;color:var(--gold);font-family:Georgia,serif;}
.l5-tel .lbl{font-size:11px;color:var(--text2);}

/* 胶囊导航 */
.l5-nav{background:#fffdf8;position:relative;z-index:5;}
.l5-nav .in{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:14px 0;}
.l5-nav a{padding:9px 26px;border-radius:22px;color:var(--main);font-size:14px;letter-spacing:1px;background:transparent;transition:.2s;}
.l5-nav a:hover,.l5-nav a.on{background:var(--main);color:#fff;box-shadow:0 6px 14px rgba(61,43,31,.25);}
.l5-nav .toggle{display:none;}

/* 圆角大banner */
.l5-banner{position:relative;overflow:hidden;}
.l5-banner .slides{display:flex;transition:transform .5s ease;}
.l5-banner .slide{min-width:100%;height:400px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.l5-banner .slide .txt{background:rgba(255,255,255,.88);border-radius:14px;padding:34px 52px;text-align:center;box-shadow:0 18px 44px rgba(0,0,0,.22);backdrop-filter:blur(3px);}
.l5-banner .slide h2{font-size:32px;color:var(--main);letter-spacing:5px;font-weight:normal;margin-bottom:8px;}
.l5-banner .slide p{font-size:13px;color:var(--text2);letter-spacing:2px;}
.l5-banner .dots{position:absolute;bottom:16px;left:0;right:0;text-align:center;}
.l5-banner .dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);margin:0 5px;cursor:pointer;}
.l5-banner .dots span.on{background:var(--gold);transform:scale(1.2);}
.l5-ph{background:linear-gradient(115deg,#8a6f4d,#c9b28a,#6b5138);}

/* 区块标题 */
.l5-sec{padding:54px 0;}
.l5-sec .head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;}
.l5-sec .head h2{font-size:25px;color:var(--main);font-weight:normal;letter-spacing:3px;}
.l5-sec .head h2 small{display:block;font-size:11px;color:#c2b49b;letter-spacing:3px;margin-top:4px;text-transform:uppercase;font-family:Georgia,serif;}
.l5-sec .head a{font-size:13px;color:var(--gold);}
.l5-sec .head a:hover{text-decoration:underline;}

/* 瀑布流画廊 */
.l5-falls{columns:4;column-gap:18px;}
.l5-fall{break-inside:avoid;background:#fff;border-radius:12px;overflow:hidden;margin-bottom:18px;box-shadow:0 4px 16px rgba(90,70,49,.09);transition:.25s;}
.l5-fall:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(90,70,49,.18);}
.l5-fall .img{position:relative;overflow:hidden;background:var(--bg2);}
.l5-fall .img img{width:100%;display:block;transition:transform .45s;}
.l5-fall:hover .img img{transform:scale(1.05);}
.l5-fall .img .ph{display:flex;align-items:center;justify-content:center;color:#b3a48a;font-size:14px;letter-spacing:2px;}
.l5-fall .tag{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);color:var(--main);font-size:11px;padding:4px 10px;border-radius:12px;}
.l5-fall .info{padding:13px 15px;}
.l5-fall h3{font-size:14px;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l5-fall h3 a:hover{color:var(--gold);}
.l5-fall .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;}
.l5-fall .meta .p{color:var(--gold);font-size:16px;font-family:Georgia,serif;}

/* 案例横排大卡 */
.l5-case-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.l5-case{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--main);box-shadow:0 8px 24px rgba(90,70,49,.14);}
.l5-case img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.l5-case:hover img{transform:scale(1.05);}
.l5-case .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#d8cbaf;letter-spacing:3px;}
.l5-case .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(30,20,12,.82));color:#fff;padding:44px 20px 16px;border-radius:0 0 14px 14px;}
.l5-case .cap b{font-size:17px;font-weight:normal;letter-spacing:2px;}
.l5-case .cap span{display:block;font-size:12px;opacity:.8;margin-top:4px;}

/* 时间轴资讯 */
.l5-timeline{position:relative;padding-left:26px;}
.l5-timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold),transparent);}
.l5-tl{position:relative;padding:12px 0 12px 14px;}
.l5-tl::before{content:"";position:absolute;left:-24px;top:20px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--gold);}
.l5-tl:hover::before{background:var(--gold);}
.l5-tl .d{font-size:12px;color:var(--gold);font-family:Georgia,serif;letter-spacing:1px;}
.l5-tl h3{font-size:16px;font-weight:normal;margin:4px 0;}
.l5-tl h3 a:hover{color:var(--gold);}
.l5-tl p{font-size:12.5px;color:var(--text2);}

/* 拼色关于区 */
.l5-about{display:grid;grid-template-columns:1.1fr 1fr;min-height:340px;}
.l5-about .txt{background:var(--main);color:#fff;padding:44px 48px;display:flex;flex-direction:column;justify-content:center;}
.l5-about .txt .en{font-size:11px;letter-spacing:4px;color:rgba(255,255,255,.5);font-family:Georgia,serif;}
.l5-about .txt h2{font-size:26px;font-weight:normal;letter-spacing:3px;margin:10px 0 16px;}
.l5-about .txt p{font-size:13px;line-height:2;color:rgba(255,255,255,.78);}
.l5-about .txt .more{align-self:flex-start;margin-top:18px;border:1px solid var(--gold);color:var(--gold);padding:9px 30px;border-radius:22px;letter-spacing:3px;}
.l5-about .txt .more:hover{background:var(--gold);color:#fff;}
.l5-about .pic{background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.l5-about .pic img{width:100%;height:100%;object-fit:cover;}
.l5-about .pic .ph{color:#c2b49b;letter-spacing:4px;font-size:16px;}

/* 三栏页脚 */
.l5-footer{background:#241a12;color:rgba(255,255,255,.62);font-size:13px;}
.l5-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding:38px 0 26px;border-bottom:1px solid rgba(255,255,255,.1);}
.l5-footer h3{color:#e8ddcd;font-size:15px;font-weight:normal;letter-spacing:2px;margin-bottom:13px;}
.l5-footer p{margin-bottom:6px;line-height:1.9;}
.l5-footer a{color:rgba(255,255,255,.62);}
.l5-footer a:hover{color:#fff;}
.l5-footer .tel{font-size:23px;color:var(--gold);font-family:Georgia,serif;}
.l5-footer .cities{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:12px;line-height:2;}
.l5-footer .cities a{margin-right:13px;}
.l5-footer .copy{padding:15px 0;text-align:center;font-size:12px;color:rgba(255,255,255,.35);}

.section{padding:54px 0;}

@media(max-width:992px){
  .l5-falls{columns:3;}
  .l5-about{grid-template-columns:1fr;}
  .l5-footer .cols{grid-template-columns:1fr 1fr;}
  .l5-tel{display:none;}
}
@media(max-width:768px){
  .l5-top .in{justify-content:center;}
  .l5-top .links{display:none;}
  .l5-header .in{flex-wrap:wrap;}
  .l5-search{order:3;width:100%;}
  .l5-search input{width:100%;flex:1;}
  /* 手机端汉堡折叠导航 */
  .l5-nav .toggle{display:block;width:100%;padding:12px 16px;color:var(--main);font-size:14px;letter-spacing:2px;cursor:pointer;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .l5-nav:not(.open) a{display:none;}
  .l5-nav .in{padding:6px 10px;}
  .l5-nav.open a{display:block;width:100%;padding:10px 14px;border-radius:8px;text-align:left;font-size:14px;}
  .l5-nav.open a.on,.l5-nav.open a:hover{color:#fff;}
  .l5-banner .slide{height:250px;}
  .l5-banner .slide .txt{padding:22px 26px;}
  .l5-banner .slide h2{font-size:22px;}
  .l5-falls{columns:2;column-gap:10px;}
  .l5-case-row{grid-template-columns:1fr;}
  .l5-footer .cols{grid-template-columns:1fr;}
}