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

   XIWEIER PREMIUM WEBSITE CSS

   Luxury Custom Home Design

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


/* =========================
   GLOBAL RESET
========================= */


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:

    "Helvetica Neue",
    Arial,
    sans-serif;

    color:#182033;

    background:#fff;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

}



.container{

    width:1200px;

    max-width:90%;

    margin:auto;

}







/* =====================================================
   TESTIMONIAL SECTION
   客户评价
===================================================== */


.testimonial-section{


    height:500px;

    background:#f6f4ef;

    display:flex;

    align-items:center;

    overflow:hidden;


}



.testimonial-header{


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;


}



.testimonial-header span{


    font-size:11px;

    letter-spacing:5px;

    color:#b9985a;

    font-weight:600;


}



.testimonial-header h2{


    font-family:Georgia,serif;

    font-size:42px;

    font-weight:400;

    line-height:1.15;

    margin-top:10px;

    color:#182033;


}



.testimonial-header p{


    width:300px;

    font-size:14px;

    line-height:1.7;

    color:#777;


}




/* Slider */


.testimonial-wrapper{


    display:flex;

    align-items:center;

    gap:20px;


}



.testimonial-slider{


    overflow:hidden;

    width:100%;


}



.testimonial-track{


    display:flex;

    gap:25px;

    transition:.5s;


}




/* Card */


.testimonial-card{


    height:210px;

    min-width:calc((100% - 75px)/4);

    background:#fff;

    padding:25px;

    position:relative;

    border-radius:6px;


    border:1px solid rgba(0,0,0,.05);


    box-shadow:

    0 10px 30px rgba(0,0,0,.05);


    transition:.4s;


}



.testimonial-card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.12);


}





.quote{


    position:absolute;

    right:20px;

    top:-10px;

    font-size:75px;

    font-family:Georgia;

    color:#eee0c5;


}



.testimonial-card p{


    font-size:14px;

    line-height:1.7;

    color:#666;

    height:80px;

    margin-top:15px;


}




.customer{


    display:flex;

    align-items:center;

    gap:15px;


}



.customer img{


    width:52px;

    height:52px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #c6a15b;


}



.customer h4{


    margin:0;

    font-size:15px;

    color:#182033;


}



.customer span{


    font-size:12px;

    color:#999;


}



.stars{


    font-size:14px;

    letter-spacing:2px;

    color:#c99b42;

    margin-top:4px;


}




/* Buttons */


.testimonial-prev,
.testimonial-next{


    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    border:1px solid #c6a15b;

    color:#c6a15b;

    cursor:pointer;

    font-size:18px;

    transition:.3s;


}



.testimonial-prev:hover,
.testimonial-next:hover{


    background:#c6a15b;

    color:#fff;


}









/* =====================================================
   PURPOSE SECTION
   品牌理念
===================================================== */


.purpose-section{


    padding:120px 0;

    background:#fff;


}




.purpose-header{


    text-align:center;

    max-width:750px;

    margin:auto;

    margin-bottom:70px;


}




.purpose-header span{


    font-size:12px;

    letter-spacing:5px;

    color:#c7a15a;

    font-weight:600;


}



.purpose-header h2{


    font-family:Georgia,serif;

    font-size:52px;

    font-weight:400;

    margin:20px 0;


}



.purpose-header p{


    font-size:16px;

    color:#777;

    line-height:1.8;


}






/* Grid */


.purpose-grid{


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;


}




.purpose-card{


    background:#fff;

    overflow:hidden;

    transition:.5s;


}



.purpose-card:hover{


    transform:translateY(-12px);


}





/* Image */


.purpose-img{


    height:280px;

    position:relative;

    overflow:hidden;


}



.purpose-img img{


    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;


}



.purpose-card:hover img{


    transform:scale(1.08);


}





.overlay{


    position:absolute;

    right:20px;

    bottom:20px;


}



.overlay span{


    font-size:55px;

    font-family:Georgia,serif;

    font-weight:bold;

    color:rgba(255,255,255,.65);


}







/* Content */


.purpose-content{


    padding:30px 25px;

    border:1px solid #eee;

    border-top:none;


}



.purpose-content h3{


    font-family:Georgia,serif;

    font-size:26px;

    margin-bottom:15px;


}



.purpose-content p{


    font-size:14px;

    color:#777;

    line-height:1.7;

    height:50px;


}



.purpose-content a{


    display:inline-block;

    margin-top:20px;

    font-size:13px;

    letter-spacing:1px;

    color:#b18b45;

    font-weight:bold;


}
/* =====================================================
   FAQ SECTION
   常见问题
===================================================== */


.faq-section{


    background:#f8f7f3;

    padding:90px 0;


}




.faq-content{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;


}




.faq-list h2{


    font-family:Georgia,serif;

    font-size:42px;

    font-weight:400;

    margin-bottom:35px;

    color:#182033;


}




.faq-box{


    border-bottom:1px solid #ddd;


}



.faq-title{


    padding:20px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:15px;

    color:#222;


}



.faq-title span{


    font-size:22px;

    transition:.3s;

    color:#c6a15b;


}




.faq-box p{


    max-height:0;

    overflow:hidden;

    opacity:0;

    color:#777;

    font-size:14px;

    line-height:1.8;

    margin:0;

    padding:0;

    transition:.4s;


}





.faq-box.active p{


    max-height:180px;

    opacity:1;

    padding-bottom:20px;


}




.faq-box.active .faq-title span{


    transform:rotate(45deg);


}







.faq-image img{


    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:8px;


}









/* =====================================================
   NEWS SECTION
   新闻资讯
===================================================== */


.news-section{


    padding:120px 0;

    background:#fff;


}





.news-header{


    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:60px;


}




.news-header span{


    font-size:12px;

    letter-spacing:5px;

    color:#c6a15b;

    font-weight:bold;


}




.news-header h2{


    font-family:Georgia,serif;

    font-size:55px;

    font-weight:400;

    line-height:1.2;

    margin-top:20px;

    color:#182033;


}







/* 新闻按钮 */


.news-control button{


    width:55px;

    height:55px;


    border:1px solid #c6a15b;


    background:#fff;


    font-size:22px;


    cursor:pointer;


    margin-left:10px;


    transition:.3s;


}



.news-control button:hover{


    background:#c6a15b;

    color:#fff;


}







/* 新闻滑动区域 */


.news-slider{


    overflow:hidden;


}



.news-track{


    display:flex;

    gap:30px;

    transition:.5s;


}







/* 新闻卡片 */


.news-card{


    min-width:calc((100% - 60px)/3);

    background:#fff;

    border:1px solid #eee;

    transition:.4s;


}




.news-card:hover{


    transform:translateY(-10px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.1);


}







/* 新闻图片 */


.news-img{


    height:260px;

    overflow:hidden;


}



.news-img img{


    width:100%;

    height:100%;


    object-fit:cover;


    transition:.7s;


}



.news-card:hover .news-img img{


    transform:scale(1.08);


}







/* 新闻内容 */


.news-content{


    padding:30px;


}



.news-content span{


    font-size:12px;

    letter-spacing:2px;

    color:#c6a15b;


}




.news-content h3{


    font-family:Georgia,serif;

    font-size:25px;

    line-height:1.4;

    font-weight:400;

    margin:15px 0;


}



.news-content p{


    font-size:15px;

    line-height:1.8;

    color:#777;


}




.news-meta{


    margin:20px 0;

    font-size:13px;

    color:#999;


}




.news-content a{


    color:#b18b45;

    font-size:14px;


}






/* =====================================================
   RESPONSIVE FAQ + NEWS
===================================================== */


@media(max-width:900px){


.faq-content{


    grid-template-columns:1fr;


}




.faq-image img{


    height:300px;


}




.news-header{


    flex-direction:column;

    align-items:flex-start;


}



.news-header h2{


    font-size:38px;


}



.news-card{


    min-width:100%;


}


}
/* =====================================================
   CTA SECTION
   联系我们
===================================================== */


.cta-section{


    height:420px;


    position:relative;


    background-image:url(
    "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1600&q=80"
    );


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


    overflow:hidden;


}





/* 遮罩 */


.cta-overlay{


    position:absolute;


    left:0;


    top:0;


    width:100%;


    height:100%;


    background:rgba(0,0,0,.55);


}





/* 内容 */


.cta-container{


    position:relative;


    z-index:2;


    width:800px;


    max-width:90%;


    color:#fff;


}




.cta-label{


    font-size:12px;


    letter-spacing:5px;


    color:#d5b06a;


    font-weight:600;


}





.cta-container h2{


    font-family:Georgia,serif;


    font-size:58px;


    font-weight:400;


    line-height:1.15;


    margin:20px 0;


}





.cta-container p{


    font-size:17px;


    line-height:1.8;


    color:#eee;


    max-width:600px;


    margin:0 auto 35px;


}





/* CTA按钮 */


.cta-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


}




.cta-buttons a{


    padding:15px 38px;


    font-size:14px;


    text-decoration:none;


    transition:.3s;


}





.btn-primary{


    background:#c9a15a;


    color:#fff;


}





.btn-primary:hover{


    background:#b28a42;


}





.btn-outline{


    border:1px solid #fff;


    color:#fff;


}





.btn-outline:hover{


    background:#fff;


    color:#111;


}









/* =====================================================
   COMMON BUTTON STYLE
   全站按钮统一
===================================================== */


.xi-btn{


    display:inline-block;


    padding:14px 35px;


    background:#c6a15b;


    color:#fff;


    font-size:14px;


    letter-spacing:1px;


    transition:.3s;


}




.xi-btn:hover{


    background:#182033;


    color:#fff;


}









/* =====================================================
   SECTION TITLE
   通用标题
===================================================== */


.section-title{


    text-align:center;


    margin-bottom:45px;


}



.section-title span{


    font-size:12px;


    letter-spacing:3px;


    color:#c6a15b;


}




.section-title h2{


    font-family:Georgia,serif;


    font-size:38px;


    font-weight:500;


    margin-top:15px;


}









/* =====================================================
   GLOBAL ANIMATION
===================================================== */


.fade-up{


    animation:fadeUp .8s ease;


}




@keyframes fadeUp{


    from{


        opacity:0;


        transform:translateY(30px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}









/* =====================================================
   TABLET
===================================================== */


@media(max-width:1200px){



.container{


    width:90%;


}



.purpose-grid{


    grid-template-columns:repeat(2,1fr);


}




.testimonial-card{


    min-width:calc((100% - 25px)/2);


}



}









/* =====================================================
   MOBILE
===================================================== */


@media(max-width:768px){



.container{


    max-width:92%;


}





/* testimonial */


.testimonial-section{


    height:auto;


    padding:70px 0;


}



.testimonial-header{


    display:block;


}



.testimonial-header h2{


    font-size:35px;


}



.testimonial-header p{


    width:100%;


    margin-top:20px;


}



.testimonial-card{


    min-width:100%;


}






/* purpose */


.purpose-section{


    padding:70px 0;


}



.purpose-grid{


    grid-template-columns:1fr;


}



.purpose-header h2{


    font-size:35px;


}




.purpose-img{


    height:240px;


}







/* FAQ */


.faq-section{


    padding:60px 0;


}



.faq-list h2{


    font-size:32px;


}





/* NEWS */


.news-section{


    padding:70px 0;


}



.news-header h2{


    font-size:36px;


}



.news-content h3{


    font-size:22px;


}






/* CTA */


.cta-section{


    height:380px;


}



.cta-container h2{


    font-size:38px;


}



.cta-container p{


    font-size:14px;


}



.cta-buttons{


    flex-direction:column;


    align-items:center;


}



.cta-buttons a{


    width:200px;


}




}








/* =====================================================
   SMALL MOBILE
===================================================== */


@media(max-width:480px){



.purpose-content h3{


    font-size:22px;


}



.news-content{


    padding:20px;


}



.cta-container h2{


    font-size:32px;


}



}