/* ==========================
   ABOUT PAGE
========================== */

.aboutPage{
    background:#F8F5F0;
}

/* 共用 */

.aboutPage section{
    padding:90px 0;
}

.aboutPage .container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 30px;
}

.aboutPage .subTitle{
    display:block;

    margin-bottom:12px;

    color:#C5A36A;

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;
}

.aboutPage h2{
    margin:0 0 30px;

    color:#3D352B;

    font-size:48px;

    font-weight:300;

    line-height:1.3;
}

.aboutPage p{
    margin:0;

    color:#666;

    font-size:16px;

    line-height:2;
}

/* ==========================
   BRAND STORY
========================== */

.aboutStory{

}

.aboutStory .container{
    max-width:1000px;
}

.storyText{
    /*display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;*/
}

/* ==========================
   HEALTHY GREEN HOME
========================== */

.greenConcept{
    background:#fff;
}

.greenConcept .container{
    display:grid;

    grid-template-columns:52% 1fr;

    gap:60px;

    align-items:center;
}

.imgBox{
    overflow:hidden;
}

.imgBox img{
    width:100%;
    display:block;
}

.txtBox ul{
    margin:30px 0 0;

    padding:0;

    list-style:none;
}

.txtBox li{
    position:relative;

    padding-left:22px;

    margin-bottom:14px;

    color:#3D352B;
}

.txtBox li:before{
    content:"";

    position:absolute;

    left:0;
    top:11px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#C5A36A;
}

/* ==========================
   DESIGNER
========================== */

.designer{

}

.designer .container{
    display:grid;

    grid-template-columns:40% 1fr;

    gap:60px;

    align-items:center;
}

.designerPhoto img{
    width:100%;
    display:block;
}

.designerInfo h3{
    margin:0 0 25px;

    color:#A88349;

    font-size:18px;

    font-weight:400;
}

.expList{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-top:35px;
}

.expList div{
    padding:15px 18px;

    border-left:2px solid #C5A36A;

    background:#fff;

    font-size:15px;
}

/* ==========================
   LICENSE
========================== */

.licenseArea{
    background:#fff;
}

.titleBox.center{
    text-align:center;

    margin-bottom:40px;
}

.licenseGrid{
    display:grid;

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

    gap:18px;
}

.licenseItem{
    padding:25px 20px;

    background:#F8F5F0;

    border:1px solid rgba(197,163,106,.25);

    text-align:center;

    line-height:1.8;

    transition:.3s;
}

.licenseItem:hover{
    border-color:#C5A36A;

    transform:translateY(-3px);
}

/* ==========================
   ADVANTAGE
========================== */

.advantage{
    background:#3D352B;
}

.advGrid{
    display:grid;

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

.advItem{
    padding:45px 20px;

    text-align:center;

    border-right:1px solid rgba(255,255,255,.12);
}

.advItem:last-child{
    border-right:none;
}

.advItem h3{
    margin:0 0 10px;

    color:#C5A36A;

    font-size:42px;

    font-weight:300;
}

.advItem p{
    color:rgba(255,255,255,.75);

    letter-spacing:1px;
}

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

@media(max-width:991px){

    .aboutPage section{
        padding:70px 0;
    }

    .aboutPage h2{
        font-size:38px;
    }

    .storyText{
        /*grid-template-columns:1fr;
        gap:20px;*/
    }

    .greenConcept .container,
    .designer .container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .licenseGrid{
        grid-template-columns:repeat(2,1fr);
    }

    .advGrid{
        grid-template-columns:repeat(2,1fr);
    }

    .advItem:nth-child(2){
        border-right:none;
    }

    .advItem:nth-child(1),
    .advItem:nth-child(2){
        border-bottom:1px solid rgba(255,255,255,.12);
    }

}

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

@media(max-width:767px){

    .aboutPage .container{
        padding:0 20px;
    }

    .aboutPage section{
        padding:55px 0;
    }

    .aboutPage .subTitle{
        font-size:11px;

        letter-spacing:3px;

        margin-bottom:10px;
    }

    .aboutPage h2{
        font-size:30px;

        margin-bottom:20px;
    }

    .aboutPage p{
        font-size:15px;
    }

    .expList{
        grid-template-columns:1fr;
    }

    .licenseGrid{
        grid-template-columns:1fr;
    }

    .advGrid{
        grid-template-columns:1fr 1fr;
    }

    .advItem{
        padding:35px 15px;
    }

    .advItem h3{
        font-size:32px;
    }

    .advItem p{
        font-size:13px;
    }

}