@charset "utf-8";

/* mainBn */
#mainBn{ width: 100%; height: calc(65vh + 150px); background: #fdf3dd; overflow: hidden; }
#mainBn .mainBnIn{ width: calc(100% - 160px); height: calc(100% + 100px); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; position: relative;}
.mainBnIn .mainBnImgWrap{ width: 50%; height: 100%; padding: 0 0px; display: flex; justify-content: center; align-items: flex-end; }
.mainBnImgWrap img{ width: 90%; margin-bottom: 80px;}
.mainBnIn .mainBnTxtWrap{ width: 50%;}
.mainBnTxtWrap h3{ font-size: 36px;}
.mainBnTxtWrap .mainBnTit{ display: flex; justify-content: flex-start; align-items: center;}
.mainBnTit h2{ font-size: 96px; font-weight: 800; color: #66ad93; line-height: 1.25em;}
.mainBnTit h2:last-child{ color: #555;}
.mainBnTxtWrap .mainBnTxt{ margin: 20px 0;}
.mainBnTxt p{ line-height: 1.5em;}
.mainBnTxtWrap .mainBnBtn{ display: inline-block;}
.mainBnBtn a{ display: block; width: 100%; color: #66ad93;  padding: 20px 30px;  border:1px solid #66ad93; border-radius: 10px; transition: all 0.3s ease-in-out;}
.mainBnBtn a:hover{ background: #66ad93; color: #f0f2f5;}


/* LNB */
#LNB{ width: calc(100% - 160px); height: 70px; margin: 0 auto; position: relative;}
#LNB .LNBIn{ width: 100%; height: 70px; position: absolute; top: -50%; left: 0; display: flex; justify-content: space-between; border-top: 2px solid #e9c775; border-bottom: 2px solid #e9c775; background: #fff;}
.LNBIn div{ width: 25%; background-color: #fff; }
.LNBIn div a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 400;}
.LNBIn div.LNBOn{ background-color: #e9c775;}
.LNBIn div.LNBOn a{ color: #fff; font-weight: 600;}

/* 반응형 */
@media all and (max-width: 1600px){
   .mainBnTit h2{ font-size: 6rem;}
}
@media all and (max-width: 1440px){
    #mainBn .mainBnIn{ width: calc(100% - 80px);}
    #LNB{ width: calc(100% - 80px);}
    .mainBnTit h2{ font-size: 4.5rem;}
    .mainBnImgWrap img{ width: 100%;}
}
@media all and (max-width: 1024px){

    #mainBn{ width: 100%; height: 62vh;}
    #mainBn .mainBnIn{ width: calc(100% - 60px);}
    .mainBnTit h2{ font-size: 72px;}

    #LNB{ width: calc( 100% - 60px); height: 60px;  }
    #LNB .LNBIn{ height: 60px;}
    .LNBIn div a{ font-size: 14px;}
}
@media all and (max-width: 768px){
    #mainBn{ height: 65vh;}
    #mainBn .mainBnIn{ align-items: center;}
    .mainBnTit h2{ font-size: 48px;}
    .mainBnTxt p{ font-size: 12px;}
    .mainBnImgWrap img{ margin-bottom: 100px;}

}
@media all and (max-width: 520px){
    #mainBn .mainBnIn{ width: calc(100% - 20px); padding-top: 100px; flex-direction: column;}
    .mainBnIn .mainBnTxtWrap{ width: 100%;}
    .mainBnIn .mainBnImgWrap{ width: 100%; align-items: center;}

    #LNB{ width: calc( 100% - 20px); height: 120px;}
    #LNB .LNBIn{ flex-wrap: wrap; justify-content: flex-start; height: auto;}
    .LNBIn div{ width: 50%; padding: 15px 0;}
    .LNBIn div a{ font-size: 13px; text-align: center;}

    .mainBnTit h2{ font-size: 36px;}

    
}

@media all and (max-width: 320px){
    
}