@charset "utf-8";

/* mainBn */
#mainBn{ width: 100%; height: calc(100vh - 100px); background: #fdf3dd; border-bottom-right-radius: 19.125rem; overflow: hidden; }
#mainBn .mainBnIn{ width: calc(100% - 160px); height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.mainBnIn .mainBnImgWrap{ width: 50%; height: 100%; padding: 0 140px; display: flex; align-items: flex-end; }
.mainBnImgWrap img{ width: 90%;}
.mainBnIn .mainBnTxtWrap{ width: 50%;}
.mainBnTxtWrap h3{ font-size: 36px;}
.mainBnTxtWrap .mainBnTit{ display: flex; justify-content: flex-start; align-items: center;}
.mainBnTit h2{ font-size: 100px; font-weight: 800; color: #66ad93; line-height: 1.25em;}
.mainBnTit h2:last-child{ color: #e9c775;}
.mainBnTxtWrap .mainBnTxt{ margin: 60px 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;}

/* notiLstWrap */
#notiLstWrap{ width: calc(100% - 160px); margin: 80px auto;  display: flex; justify-content: space-between;}
#notiLstWrap .notiLstCon{ width: 50%; margin: 0 30px;}
.notiLstCon .notiConTit{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px;}
.notiConTit h3{ font-size: 18px; font-weight: 600; color: #303030;}
.notiConTit i{ font-size: 16px; color: #303030;}
.notiConTit i a{ display: flex; width: 100%; height: 100%;}
.notiLstCon .notiLst{ width: 100%;}
.notiLst .notiCon{ display: block; width: 100%; padding: 0 0 10px; margin-top: 20px; border-bottom: 1px solid #d5d5d5;}
.notiCon a{ display: flex; justify-content: space-between;align-items: center;}
.notiCon a span{ font-size: 14px; font-weight: 500; color: #646464;}
.notiCon a span:last-child{ font-size: 13px; font-weight: 400;}
.notiLst embed{ width: 100%; aspect-ratio: 16/9; overflow: hidden !important;}


/* mainIconBtnWrap */
#mainIconBtnWrap{ width: calc(100% - 160px); margin: 0 auto; display: flex; align-items: center; padding: 50px 0; }
#mainIconBtnWrap .mainIcon{ width: 12.5%; aspect-ratio: 1; }
.mainIcon a{ width: 100%; height: 100%; display: flex; justify-content: space-evenly; flex-direction: column; align-items: center; transition: all 0.5s ease-in-out;}
.mainIcon a i{ font-size: 5.625rem; color: #898c8b;}
.mainIcon a h3{ font-size: 18px; color: #303030;}
.mainIcon:hover a{ background: #F0CD77; border-radius: 20px;}
.mainIcon:hover a i{ color: #fff; font-weight: 600;}
.mainIcon:hover a h3{ color: #fff; font-weight: 500;}

/* banner */
#banner{ width: calc(100% - 80px); margin: 70px 0 70px auto; display: flex; justify-content: space-between;  }
#banner .banTxtCon{ width: 37.5%; display: flex; justify-content: space-between; flex-direction: column; }
.banTxtCon .banTit{ margin-bottom: 70px;}
.banTit h4{ font-size: 1.125rem; color: #8c8d8c;}
.banTit h2{ font-size: 5.625rem; font-weight: 900; color: #34584b;}
.banTit h3{ font-size: 3.75rem; font-weight: 500; color: #555;}
.banTxt p{ line-height: 1.5em;}
#banner .banImgWrap{ width: 62.5%; aspect-ratio: 1.618/1; background: #303030; border-top-left-radius: 20.625rem; overflow: hidden; transition: transform 0.3s ease-in-out;}
.banImgWrap .banImgSwip{ width: 100%; height: 100%; position: relative;}
.banImgSwip .swiper-slide.bansImg1{ width: 100%; height: 100%; background: url(../img/popup/pop1.jpg) no-repeat 50% 5%/cover;}
.banImgSwip .swiper-slide.bansImg2{ width: 100%; height: 100%; background: url(../img/popup/pop2.jpg) no-repeat 50% 5%/cover;}
.banImgSwip .swiper-slide.bansImg3{ width: 100%; height: 100%; background: url(../img/popup/pop3.jpg) no-repeat 50% 5%/cover;}
.banImgSwip .bannerNxt{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%);  z-index: 99;}
.bannerNxt i{ font-size: 36px; color: #f0f2f5;}
.banImgSwip .bannerPrv{ position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 99;}
.bannerPrv i{ font-size: 36px; color: #f0f2f5;}


/* btnType */
.btnType{ width: 170px; display: inline-block; }
.btnType a{ padding: 10px; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; border-bottom: 2px solid #34584b; transition: all 0.3s ease-in-out; text-align: center; color: #34584b;}
.btnType a i{ font-size: 14px; margin: 0px; color: #34584b;}
.btnType a:hover{ background: #34584b; color: #fff;}
.btnType a:hover i{ color: #fff;}

/* numNoti */
#numNoti{ width: 100vw; aspect-ratio: 16/5.5; background: url(../img/main/noticeBac.jpg) no-repeat 50% 22%; background-size: 100%; position: relative;}
#numNoti .numNotiCon{ width: 48vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.numNotiCon .numNotiTit{ margin-bottom: 70px; }
.numNotiTit h3{ font-size: 2.25rem; font-weight: 300; text-align: center; color: #f0f2f5;}
.numNotiTit h2{ font-size: 6rem; font-weight: 700; text-align: center; color: #f0f2f5;}
.numNotiCon .numNotiTxt{ display: flex; justify-content: space-between; align-items: center;}
.numNotiTxt .numNotiHalf{ width: 50%;}
.numNotiHalf p{ font-size: 3rem; font-weight: 700; color: #f0f2f5;}
.numNotiHalf span{ display: block; font-size: 1.5rem; color: #f0f2f5; text-align: right; line-height: 1.5em;}

/* partners */
.partnerSwip{ height: 100px;}
.partnerSwip .swiper-slide { text-align: center;  display: flex; justify-content: center; align-items: center; width: 15%; height: 100%; transition: transform 0.3s; padding: 20px 0;}
.partnerSwip .swiper-slide img { display: block; width: 6vw; }


/* 반응형 */
@media all and (max-width: 1600px){
   .mainBnTit h2{ font-size: 6rem;}
}
@media all and (max-width: 1440px){
    #mainBn .mainBnIn{ width: calc( 100% - 60px);}
    .mainBnTit h2{ font-size: 4.5rem;}
    .mainBnTxtWrap h3{ font-size: 30px;}
    .mainBnIn .mainBnImgWrap{ padding: 0 50px;}

    #notiLstWrap{ width: calc(100% - 60px);}

    #mainIconBtnWrap{ width: calc(100% - 60px);}
    
    #banner{width: calc(100% - 30px);}
    .banTit h4{ margin-bottom: 0;}
    .banTit h2{ font-size: 60px;}
    .banTit h3{ font-size: 30px;}

    .numNotiTit h3{ font-size: 1.75rem;}
    .numNotiTit h2{ font-size: 4.25rem;}
    .numNotiHalf p{ font-size: 2.25rem;}
    .numNotiHalf span{ font-size: 1.125rem;}
}

@media all and (max-width: 1024px){
    #mainBn{ height: 87vh;}
    .mainBnTit h2{ font-size: 66px;}
    .mainBnIn .mainBnImgWrap{ padding: 0;}
    .mainBnTxtWrap .mainBnTxt{ margin: 30px 0;}
    .mainBnTxtWrap h3{ font-size: 24px;}
    .mainBnBtn a{ padding: 12px 20px;}

    #notiLstWrap .notiLstCon{ margin: 0;}
    #notiLstWrap .notiLstCon:first-child{ margin-right: 20px;}

    .mainIcon a i{ font-size: 3rem;}
    .mainIcon a h3{ font-size: 14px;}

    #banner .banImgWrap{ border-top-left-radius: 14.625rem;}
    .banTxtCon .banTit{ margin-bottom: 40px;}
    .banImgSwip .bannerNxt{ right: 30px;}
    .banImgSwip .bannerPrv{ left: 30px;}

    .numNotiCon .numNotiTit{ margin-bottom: 30px;}
    .numNotiTit h3{ font-size: 1.125rem;}
    .numNotiTit h2{ font-size: 3rem;}
    .numNotiHalf p{ font-size: 1.5rem;}
    .numNotiHalf span{ font-size: 11px;}

    .partnerSwip .swiper-slide img{ width: 10vw; }
}

@media all and (max-width: 768px){
    #mainBn{ height: 77vh;}
    .mainBnTit h2{ font-size: 50px;}
    .mainBnTxtWrap h3{ font-size: 20px;}

    #mainIconBtnWrap{ flex-wrap: wrap; gap: 0 0px;}
    #mainIconBtnWrap .mainIcon{ width: 25%;}

    .notiCon a span{ font-size: 11px;}
    .notiCon a span:last-child{ font-size: 11px;}
    
    #banner{ margin: 70px auto; flex-direction: column;}
    #banner .banTxtCon{ width: 100%; margin-bottom: 30px; flex-direction: row; align-items: flex-end;}
    #banner .banImgWrap{ width: 100%; border-radius: 30px;}
    .btnType a{ height: auto;}
    .banImgSwip .bannerNxt{ right: 20px;}
    .banImgSwip .bannerPrv{ left: 20px;}

    .numNotiCon .numNotiTit{ margin-bottom: 10px;}
    .numNotiTit h3{ font-size: 1.125rem;}
    .numNotiTit h2{ font-size: 2rem;}
    .numNotiCon .numNotiTxt{ flex-direction: column;}
    .numNotiTxt .numNotiHalf{ width: 100%; margin-bottom: 10px;}
    .numNotiTxt .numNotiHalf:last-child{ margin-bottom: 0;}

}

@media all and (max-width: 520px){
    #mainBn { height: calc( 80vh - 80px); border-bottom-right-radius: 7.5rem;}
    #mainBn .mainBnIn{ width: calc(100% - 20px); flex-direction: column; justify-content: flex-end;}
    .mainBnIn .mainBnImgWrap{ width: 56%; height: auto;}
    .mainBnIn .mainBnTxtWrap{ width: 100%;}
    .mainBnTxtWrap .mainBnTxt{ margin: 20px 0;}
    .mainBnTit h2{ font-size: 36px;}
    .mainBnTxtWrap h3{ font-size: 16px;}

    #notiLstWrap{ width: calc( 100% - 20px); flex-direction: column; margin: 40px auto 0;}
    #notiLstWrap .notiLstCon{ width: 100%; margin-bottom: 30px;}
    #notiLstWrap .notiLstCon:first-child{ margin-right: 0;}
    .notiLstCon .notiConTit{ margin-bottom: 10px;}
    .notiCon a span{ font-size: 13px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .notiCon a span:first-child{ width: 80%; display: inline-block;  overflow: hidden; text-overflow: ellipsis;}

    #mainIconBtnWrap{ width: calc(100% - 20px); padding: 30px 0;}
    .mainIcon a h3{ text-align: center;}
    #mainIconBtnWrap .mainIcon{ margin-bottom: 0px;}
    .mainIcon:hover a{ border-radius: 10px;}
    .mainIcon a i{ font-size: 1.875rem; font-weight: 300;}
    .mainIcon a h3{ font-size: 11px; font-weight: 300;}

    #banner{ width: calc(100% - 20px); margin: 40px auto;}
    #banner .banTxtCon{ flex-direction: column; align-items: flex-start;}
    .banTxtCon .banTxtWrap{ margin-bottom: 40px;}
    .banTxtCon .banTit{ margin-bottom: 20px;}
    .banTit h2{ font-size: 48px;}
    .banTit h3{ font-size: 24px;}
    .bannerNxt i, .bannerPrv i{ font-size: 24px;}

    #numNoti{ aspect-ratio: 1.618/1; background: #368a4a;}
    #numNoti .numNotiCon{ width: 90vw;}
    .numNotiHalf p{ text-align: center;}
    .numNotiHalf span{ text-align: center;}
    
    .partnerSwip{ height: 60px;}

}
@media all and (max-width: 375px){
     #mainBn { height: calc( 75vh - 80px);  }

     
}