/* =================================

翡翠私人订制落地页

基础样式

================================= */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

font-size:16px;

}



body{

background:#f7f7f7;

font-family:

"PingFang SC",
"Microsoft YaHei",
Arial,
sans-serif;

color:#333;

}





a{

text-decoration:none;

color:inherit;

}





img{

width:100%;

display:block;

}





/* =================================

页面主体

================================= */


.page-container{


width:100%;

max-width:750px;

margin:0 auto;

background:#fff;

min-height:100vh;

padding-bottom:90px;


}






/* =================================

顶部入口区域

================================= */


.top-entry{


display:flex;

gap:14px;

padding:20px 16px;


}





/* 两个卡片 */


.entry-card{


width:50%;

background:#fff;

border:1px solid #e8e8e8;

border-radius:14px;

overflow:hidden;

box-shadow:

0 3px 12px rgba(0,0,0,0.06);


}





.entry-card img{


height:212px;

object-fit:cover;


}





.entry-content{


text-align:center;

padding:15px 8px 18px;


}





.entry-content h3{


font-size:20px;

font-weight:700;

color:#222;

margin-bottom:8px;


}





.entry-content p{


font-size:15px;

color:#777;

margin-bottom:15px;


}





/* 顶部红色按钮 */


.entry-btn{


display:inline-flex;

justify-content:center;

align-items:center;

background:#f04422;

color:#fff;

height:42px;

padding:0 28px;

border-radius:8px;

font-size:16px;

font-weight:bold;


}





/* =================================

绿色标题区域

================================= */


.slogan{


display:flex;

justify-content:center;

align-items:center;

gap:70px;

padding:25px 10px;


}





.slogan-item{


font-size:28px;

font-weight:bold;

color:#527b16;


}





/* =================================

私人订制标题

================================= */


.custom-title{


padding:5px 20px 20px;


}




.title-decoration{


display:flex;

align-items:center;

justify-content:center;

gap:10px;


}




.title-decoration span{


height:3px;

background:#527b16;

flex:1;


}



.title-decoration h2{


font-size:25px;

color:#527b16;

font-weight:bold;

white-space:nowrap;


}





/* =================================

产品分类区域

================================= */


.product-category{


display:flex;

justify-content:space-between;

padding:0 12px;

gap:8px;


}





.category-item{


flex:1;

text-align:center;


}




.category-item img{


height:85px;

object-fit:cover;

border-radius:8px;


}




.category-name{


margin-top:8px;

font-size:15px;

font-weight:bold;

color:#fff;

background:#327b5b;

border-radius:20px;

padding:5px 0;


}




/* ================================

移动端适配

================================ */


@media(max-width:480px){



.entry-card img{


height:135px;


}



.entry-content h3{


font-size:17px;


}



.entry-content p{


font-size:13px;


}



.entry-btn{


height:38px;

padding:0 22px;

font-size:14px;


}



.slogan{


gap:45px;


}



.slogan-item{


font-size:24px;


}



.title-decoration h2{


font-size:21px;


}



.category-item img{


height:65px;


}


}
/* =================================

主CTA按钮区域

================================= */


.main-contact{


padding:25px 20px;

text-align:center;


}




.main-btn{


display:flex;

align-items:center;

justify-content:center;


height:55px;


background:#e93419;


border-radius:30px;


color:#fff;


font-size:20px;


font-weight:bold;


box-shadow:

0 5px 15px rgba(233,52,25,0.35);


}





.main-btn:active{


transform:scale(0.96);


}






/* =================================

售后保障

================================= */


.service-guarantee{


text-align:center;


padding:0px 20px 25px;


}




.service-guarantee p{


display:inline-block;


background:#faf4e8;


color:#9a6b25;


font-size:16px;


padding:12px 35px;


border-radius:30px;


font-weight:bold;


}






/* =================================

咨询顾问区域

================================= */


.consult-box{


margin:0 16px;


background:#fff;


border-radius:15px;


padding:15px;


display:flex;


align-items:center;


gap:12px;


box-shadow:

0 4px 15px rgba(0,0,0,0.08);


}





.consult-avatar{


width:65px;


height:65px;


border-radius:50%;


overflow:hidden;


flex-shrink:0;


}





.consult-avatar img{


width:100%;


height:100%;


object-fit:cover;


}





.consult-info{


flex:1;


}





.consult-info h3{


font-size:17px;


color:#222;


margin-bottom:8px;


}




.consult-info p{


font-size:13px;


color:#777;


line-height:1.5;


}





.consult-btn{


background:#e9361d;


color:#fff;


height:42px;


padding:0 18px;


border-radius:22px;


display:flex;


align-items:center;


justify-content:center;


font-weight:bold;


font-size:15px;


}








/* =================================

底部信息

================================= */


.footer{


text-align:center;


padding:0px 10px;


font-size:12px;


color:#999;


}







/* =================================

底部固定悬浮咨询栏

================================= */


.fixed-contact{


position:fixed;


bottom:0;


left:50%;


transform:translateX(-50%);


width:100%;


max-width:750px;


height:75px;


background:#fff;


box-shadow:

0 -3px 15px rgba(0,0,0,0.12);


display:flex;


align-items:center;


justify-content:space-between;


padding:10px 15px;


z-index:999;



}





.fixed-left{


display:flex;


align-items:center;


gap:10px;


}





.fixed-left img{


width:48px;


height:48px;


border-radius:50%;


object-fit:cover;


}




.fixed-left h4{


font-size:16px;


color:#222;


margin-bottom:5px;


}





.fixed-left p{


font-size:12px;


color:#777;


}





.fixed-btn{


height:45px;


padding:0 28px;


display:flex;


align-items:center;


justify-content:center;


background:#e9361d;


border-radius:25px;


color:#fff;


font-size:16px;


font-weight:bold;


}







/* =================================

按钮呼吸动画

提高点击率

================================= */


.fixed-btn,
.main-btn{


animation:

pulse 2s infinite;


}




@keyframes pulse{


0%{


transform:scale(1);


}



50%{


transform:scale(1.05);


}



100%{


transform:scale(1);


}


}







/* =================================

手机端进一步优化

================================= */


@media(max-width:480px){



.main-btn{


height:50px;


font-size:18px;


}





.service-guarantee p{


font-size:14px;


padding:10px 25px;


}





.consult-box{


padding:12px;


}





.consult-info h3{


font-size:15px;


}





.consult-btn{


height:38px;


font-size:14px;


padding:0 15px;


}





.fixed-contact{


height:68px;


padding:8px 12px;


}





.fixed-left img{


width:42px;


height:42px;


}





.fixed-btn{


height:40px;


padding:0 22px;


font-size:14px;


}



}