@charset "utf-8";
/* ============================================================
   荣峰装饰 首页样式表 style.css
   主色 #f74041  副色 #034196
   内容区 80% 居中，max-width 1400px
   ============================================================ */

/* ============ Banner ============ */
.banner{position:relative;height:calc(100vh - 34px);width:100%;overflow:hidden;background:#000;margin-top:0}
.banner-slides{position:relative;height:100%;width:100%}
.banner-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease;background-size:cover;background-position:center;background-repeat:no-repeat}
.banner-slide.active{opacity:1;z-index:2}
.banner-slide::after{content:"";position:absolute;inset:0;/*background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.55))*/}
.banner-content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 20px}
.banner-content .b-tag{display:inline-block;padding:6px 18px;border:1px solid rgba(255,255,255,.6);border-radius:30px;font-size:13px;letter-spacing:2px;margin-bottom:22px;background:rgba(255,255,255,.08);backdrop-filter:blur(4px)}
.banner-content h1{font-size:48px;font-weight:500;line-height:1.3;margin-bottom:20px;letter-spacing:2px;max-width:900px}
.banner-content h1 span{color:var(--primary)}
.banner-content p{font-size:15px;color:rgba(255,255,255,.9);margin-bottom:36px;max-width:680px;line-height:1.8}
.banner-btns{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .3s}
.banner-arrow:hover{background:var(--primary);color:#fff}
.banner-arrow.prev{left:30px}
.banner-arrow.next{right:30px}
.banner-dots{position:absolute;right:10%;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:14px}
.banner-dots .dot{width:4px;height:36px;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s;border-radius:2px}
.banner-dots .dot.active{height:50px;background:var(--primary)}
.banner-stats{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:4;width:80%;max-width:1400px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.95);backdrop-filter:blur(10px);box-shadow:0 -4px 20px rgba(0,0,0,.1);border-radius:8px 8px 0 0;overflow:hidden}
.banner-stats .stat{padding:22px 20px;text-align:center;border-right:1px solid var(--border)}
.banner-stats .stat:last-child{border-right:none}
.banner-stats .stat .num{font-size:34px;font-weight:700;color:var(--primary);background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.banner-stats .stat .num .unit{font-size:18px;-webkit-text-fill-color:initial;background:none;color:var(--primary);font-weight:700}
.banner-stats .stat .label{font-size:14px;color:var(--text-light);margin-top:6px}

/* ============ Core Business (带标题) ============ */
.business-section{padding:90px 0 0}
.business-head{text-align:center;margin-bottom:50px}
.business-head .en{font-size:14px;color:var(--primary);letter-spacing:3px;font-weight:500;text-transform:uppercase}
.business-head h2{font-size:36px;color:var(--text);margin:8px 0 16px;font-weight:700}
.business-head .divider{width:60px;height:3px;background:var(--primary);border-radius:2px;margin:0 auto 14px}
.business-head .sub{color:var(--text-light);font-size:15px;max-width:700px;margin:0 auto}
.business{width:100vw;margin-left:calc(50% - 50vw);display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:hidden}
.biz-card{position:relative;height:560px;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}
.biz-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,65,150,.15) 0%,rgba(3,65,150,.55) 55%,rgba(3,65,150,.9) 100%);transition:all .5s;z-index:1;background: rgba(0,0,0,0.55);}
.biz-card:hover::before{/*background:linear-gradient(180deg,rgba(247,64,65,.35) 0%,rgba(247,64,65,.65) 50%,rgba(3,65,150,.95) 100%);*/background: rgba(3,65,150,.9,0.55);}
.biz-card .biz-default{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 36px;color:#fff;transition:all .4s}
.biz-card .biz-default .biz-icon{width:56px;height:56px;color:#fff;margin-bottom:20px}
.biz-card .biz-default h3{font-size:24px;font-weight:700;margin-bottom:6px}
.biz-card .biz-default .biz-en{font-size:12px;opacity:.7;letter-spacing:2px;text-transform:uppercase}
.biz-card .biz-hover{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 36px;color:#fff;opacity:0;transform:translateY(30px);transition:all .5s ease}
.biz-card:hover .biz-default{opacity:0;transform:translateY(-20px);pointer-events:none}
.biz-card:hover .biz-hover{opacity:1;transform:translateY(0)}
.biz-card .biz-hover .biz-icon{width:50px;height:50px;color:#fff;margin-bottom:16px}
.biz-card .biz-hover h3{font-size:22px;font-weight:700;margin-bottom:10px}
.biz-card .biz-hover p{font-size:14px;line-height:1.8;opacity:.95;margin-bottom:16px}
.biz-card .biz-hover .biz-tag{display:inline-block;padding:4px 14px;border:1px solid rgba(255,255,255,.6);border-radius:20px;font-size:12px;letter-spacing:1px}

/* ============ Advantages ============ */
/* .advantages{background:var(--bg-light)} */
.adv-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items: center;}
.adv-left .en{font-size:14px;color:var(--primary);letter-spacing:3px;font-weight:500;text-transform:uppercase}
.adv-left h2{font-size:36px;color:var(--text);margin:10px 0 18px;font-weight:700;line-height:1.3}
.adv-left .divider{width:60px;height:3px;background:var(--primary);border-radius:2px;margin-bottom:20px}
.adv-left .desc{font-size:15px;color:var(--text-light);line-height:1.9;margin-bottom:28px}
.adv-left .promises{background:#fff;padding:20px 30px;border-radius:8px;border-left:4px solid var(--primary);box-shadow:var(--shadow)}
.adv-left .promises h4{font-size:18px;color:var(--secondary);margin-bottom:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.adv-left .promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.adv-left .promise-item{font-size:14px;color:var(--text);line-height:1.8;display:flex;align-items:center;gap:8px}
.adv-left .promise-item .check{color:var(--primary);font-weight:700;font-size:16px}
.adv-right{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.adv-item{background:#fff;padding:22px 18px;border-radius:8px;display:flex;align-items:center;gap:14px;transition:all .3s;box-shadow:0 2px 10px rgba(0,0,0,.03);border:1px solid var(--border)}
.adv-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--primary)}
.adv-item .adv-icon{width:52px;height:52px;min-width:52px;border-radius:12px;background:rgba(247,64,65,.1);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.adv-item:hover .adv-icon{background:var(--primary);color:#fff}
.adv-item .adv-icon svg{width:26px;height:26px}
.adv-item .adv-text{flex:1;min-width:0}
.adv-item .adv-text h4{font-size:16px;color:var(--text);margin-bottom:4px;font-weight:600;line-height:1.3}
.adv-item .adv-text p{font-size:13px;color:var(--text-light);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}

/* ============ Cases ============ */
.cases{background-image: url('../images/a81ca144-6c05-4b56-b3d1-d5a53f817ded.jpg');background-position: center center;background-attachment: fixed;}
.case-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content: center;margin-bottom: 30px;}
.case-tabs .ctab{padding:8px 22px;background:#f0f3f8;color:var(--text-light);border-radius:4px;cursor:pointer;font-size:14px;transition:all .3s;font-weight:500}
.case-tabs .ctab:hover{color:var(--secondary)}
.case-tabs .ctab.active{background:var(--primary);color:#fff}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.case-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:all .4s;cursor:pointer}
.case-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.case-card .case-img{height:240px;overflow:hidden;position:relative}
.case-card .case-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.case-card:hover .case-img img{transform:scale(1.08)}
.case-card .case-img .case-tag{position:absolute;left:16px;top:16px;padding:4px 12px;background:var(--primary);color:#fff;font-size:12px;border-radius:3px}
.case-card .case-body{padding:22px 24px}
.case-card .case-body h3{font-size:18px;color:var(--text);margin-bottom:10px;font-weight:600;transition:color .3s}
.case-card:hover .case-body h3{color:var(--primary)}
.case-info{display:flex;gap:18px;font-size:13px;color:var(--text-lighter);margin-bottom:12px}
.case-info span{display:flex;align-items:center;gap:4px}
.case-info .svg-icon{color:var(--primary)}
.case-body .desc{font-size:13px;color:var(--text-light);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.case-more{text-align:center;margin-top:40px}

/* ============ Process ============ */
.process{position:relative;background-image:url(../images/process_bg.jpg);background-size:cover;background-position:center;background-attachment:fixed}
.process::before{content:"";position:absolute;inset:0;background:rgba(3,65,150,.88)}
.process *{position:relative;z-index:2}
.process .process-title{text-align:center;color:#fff;margin-bottom:60px}
.process .process-title .en{font-size:14px;color:rgba(255,255,255,.8);letter-spacing:3px;font-weight:500;text-transform:uppercase}
.process .process-title h2{font-size:34px;color:#fff;margin:10px 0 14px;font-weight:700}
.process .process-title .divider{width:60px;height:3px;background:var(--primary);border-radius:2px;margin:0 auto 14px}
.process .process-title p{color:rgba(255,255,255,.85);font-size:15px;max-width:640px;margin:0 auto;line-height:1.8}
.process-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.step-item{text-align:center;color:#fff;padding:20px 10px;position:relative}
.step-item:not(:last-child)::after{content:"";position:absolute;right:-8px;top:40px;width:16px;height:2px;background:rgba(255,255,255,.3)}
.step-circle{width:80px;height:80px;border-radius:50%;border:3px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;transition:all .4s;background:rgba(255,255,255,.05)}
.step-item:hover .step-circle{background:var(--primary);border-color:var(--primary);transform:scale(1.08);box-shadow:0 0 24px rgba(247,64,65,.5)}
.step-circle .svg-icon{width:36px;height:36px;color:#fff}
.step-item h4{font-size:17px;margin-bottom:10px;font-weight:600}
.step-item p{font-size:12px;line-height:1.7;color:rgba(255,255,255,.78)}

/* ============ About ============ */
.about{/*background:linear-gradient(135deg,#f8f9fc 0%,#fff 100%);*/overflow:visible}
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-left .en{font-size:14px;color:var(--primary);letter-spacing:4px;font-weight:500;text-transform:uppercase}
.about-left h2{font-size:34px;color:var(--dark);margin:8px 0 14px;font-weight:800;line-height:1.3}
.about-left .divider{width:60px;height:3px;background:var(--primary);border-radius:2px;margin-bottom:20px}
.about-left .desc{font-size:15px;color:#555;line-height:1.9;margin-bottom:26px}
.about-left .desc p{margin-bottom:12px}
.about-services{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.as-item{display:flex;gap:12px;padding:15px;background:#fff;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.05);transition:all .3s;align-items:flex-start}
.as-item:hover{box-shadow:0 8px 22px rgba(var(--primary-rgb),.12);transform:translateY(-3px)}
.as-icon{width:44px;height:44px;flex-shrink:0;background:rgba(var(--primary-rgb),.1);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--primary)}
.as-icon svg{width:22px;height:22px}
.as-text{flex:1;min-width:0}
.as-item h4{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:4px}
.as-item p{font-size:13px;color:var(--text-light);line-height:1.6;margin:0}
.about-right{position:relative}
.about-right img{width:100%;height:440px;object-fit:cover;border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,.12)}
.about-float{position:absolute;bottom:-28px;left:-28px;background:#fff;padding:24px 28px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);border-left:4px solid var(--primary)}
.about-float .af-num{font-size:34px;font-weight:800;color:var(--primary);line-height:1}
.about-float .af-label{font-size:14px;color:var(--text-light);margin-top:4px}

/* ============ Team ============ */
.team{background:#fff}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);text-align:center;transition:all .3s;padding-bottom:26px}
.team-card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(0,0,0,.12)}
.team-card .avatar{height:300px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--secondary),var(--primary))}
.team-card .avatar .initials{font-size:80px;color:#fff;font-weight:700;opacity:.85;letter-spacing:4px}
.team-card h4{font-size:18px;color:var(--dark);margin-top:20px;font-weight:700}
.team-card .t-pos{font-size:13px;color:var(--primary);margin:6px 0 10px;font-weight:500;letter-spacing:1px}
.team-card .t-skill{font-size:13px;color:var(--text-light);padding:0 22px;line-height:1.7}

/* ============ News 新闻资讯 ============ */
.news-section{background-image: url(../images/004acbbbb9ad6079339993cae99be7725ee9a030.jpg);background-position: center center;background-attachment: fixed;}
.news-wrap{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:stretch}
.news-left{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.news-main-card a{display:grid;grid-template-columns:320px 1fr;gap:0;cursor:pointer;border-bottom:1px solid var(--gray-200);transition:.3s}
.news-main-card:hover{background:#fafbff}
.news-main-card .n-mc-img{height:220px;overflow:hidden;position:relative}
.news-main-card .n-mc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news-main-card:hover .n-mc-img img{transform:scale(1.05)}
.news-main-card .n-mc-body{padding:15px 20px;display:flex;flex-direction:column;justify-content:center}
.news-mc-date{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:13px;font-weight:500;margin-bottom:12px}
.news-mc-date .n-day{font-size:28px;font-weight:800;line-height:1}
.news-mc-date .n-ym{font-size:13px;color:var(--text-light)}
.news-main-card h3{font-size:20px;font-weight:700;color:var(--dark);margin-bottom:12px;line-height:1.5;transition:.2s}
.news-main-card:hover h3{color:var(--primary)}
.news-main-card p{font-size:14px;color:var(--text-light);line-height:1.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.news-list-tj{padding:4px 0}
.news-item-tj{display:flex;gap:16px;padding:14px 30px;border-bottom:1px dashed var(--gray-200);cursor:pointer;transition:.2s;align-items:flex-start}
.news-item-tj:last-child{border-bottom:none}
.news-item-tj:hover{background:#fafbff}
.news-item-tj:hover h4{color:var(--primary)}
.n-it-date{flex-shrink:0;text-align:center;border-right:1px solid var(--gray-200);padding-right:16px;min-width:60px}
.n-it-date .nit-day{font-size:22px;font-weight:800;color:var(--secondary);line-height:1}
.n-it-date .nit-ym{font-size:12px;color:var(--text-light);margin-top:4px}
.n-it-text{flex:1;min-width:0}
.n-it-text h4{font-size:16px;font-weight:600;color:var(--dark);margin-bottom:6px;line-height:1.5;transition:.2s}
.n-it-text p{font-size:13px;color:var(--text-light);line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0}
.news-sidebar{display:flex;flex-direction:column}
.ns-block{background:#fff;border-radius:8px;padding:20px 25px;box-shadow:0 4px 20px rgba(0,0,0,.05);height:100%}
.ns-title{font-size:18px;font-weight:700;color:var(--dark);padding-bottom:14px;margin-bottom:20px;border-bottom:2px solid var(--gray-200);position:relative}
.ns-title::after{content:'';position:absolute;bottom:-2px;left:0;width:50px;height:2px;background:var(--primary)}
.qa-list-tj{list-style:none}
.qa-item{padding:14px 0;border-bottom:1px dashed var(--gray-200)}
.qa-item:last-child{border-bottom:none}
.qa-q{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.qa-q .qa-tag{flex-shrink:0;width:22px;height:22px;background:var(--primary);color:#fff;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:2px}
.qa-q .q-text{font-size:16px;font-weight:600;color:#333;line-height:1.7;flex:1}
.qa-a{margin-top:10px;font-size:13px;color:var(--text-light);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qa-a .a-tag{display:inline-block;width:20px;height:20px;background:var(--secondary);color:#fff;border-radius:3px;text-align:center;line-height:20px;font-size:11px;font-weight:700;margin-right:6px;vertical-align:middle}

/* ============ Responsive ============ */
@media(max-width:1200px){
  .banner-stats{width:92%}
  .news-wrap{grid-template-columns:1fr}
  .process-steps{grid-template-columns:repeat(3,1fr);gap:28px}
  .step-item:not(:last-child)::after{display:none}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .about-float{left:0;bottom:-20px}
}
@media(max-width:992px){
  .banner{height:100vh;height:100svh}
  .banner-dots{right:5%;top:auto;bottom:100px;transform:none;flex-direction:row;gap:10px}
  .banner-dots .dot{width:30px;height:4px}
  .banner-dots .dot.active{width:40px;height:4px}
  .banner-content h1{font-size:36px}
  .banner-content p{font-size:15px}
  .banner-stats{grid-template-columns:repeat(2,1fr)}
  .banner-stats .stat{padding:16px;border-bottom:1px solid var(--border)}
  .banner-stats .stat:nth-child(2){border-right:none}
  .business{grid-template-columns:repeat(2,1fr);width:100%;margin-left:0}
  .biz-card{height:420px}
  .adv-wrap{grid-template-columns:1fr;gap:40px}
  .about-wrap{grid-template-columns:1fr;gap:40px}
  .about-right img{height:380px}
  .cta-wrap{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .news-main-card{grid-template-columns:1fr}
  .news-main-card .n-mc-img{height:220px}
  .case-grid{grid-template-columns: repeat(2, 1fr);}
}
@media(max-width:768px){
  .section{padding:60px 0}
  .business-section{padding:60px 0 0}
  .banner-content h1{font-size:28px;letter-spacing:1px}
  .banner-content p{font-size:14px}
  .banner-arrow{display:none}
  .business{grid-template-columns:1fr}
  .biz-card{height:320px}
  .adv-right{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .section-header{flex-direction:column;align-items:flex-start}
  .section-header .sh-left h2,.adv-left h2,.about-left h2,.cta-left h2,.process .process-title h2,.business-head h2,.sec-head h2,.section-title-lite h2{font-size:26px}
  .team-grid{grid-template-columns:1fr}
  .about-services{grid-template-columns:1fr}
  .about-float{padding:18px 22px;left:20px;bottom:-20px}
  .about-float .af-num{font-size:30px}
  .cta-info{grid-template-columns:1fr}
  .form-row.two{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .float-actions{display:none}
  .mobile-bottom-bar{display:grid}
  .case-tabs .ctab{padding:6px 14px;font-size:13px}
  .adv-left .promise-grid{grid-template-columns:1fr}
  /* 六大优势手机端：图标在上文字在下，文字居中 */
  .adv-item{flex-direction:column;text-align:center}
  .adv-item .adv-icon{margin-bottom:4px}
  /* 关于服务项手机端 */
  .as-item{padding:16px}
}
@media(max-width:480px){
  .case-grid{grid-template-columns: repeat(1, 1fr);}
  .banner{height:82vh;height:82svh}
  .banner-stats .stat{padding:12px 8px}
  .banner-stats .stat .num{font-size:24px}
}
/* 手机横屏（高度受限）：压缩 banner 与统计条，避免内容溢出 */
@media(max-width:992px) and (max-height:500px) and (orientation:landscape){
  .banner{height:auto;min-height:420px}
  .banner-stats{position:relative;bottom:auto;transform:none;margin-top:-40px}
  .banner-content h1{font-size:30px}
}