@charset "utf-8";
html{overflow-x: hidden;}
.pcbr{ display: block;}
.mbr{ display: none;}

/* header */
#header{ width: 100%; height: 100px; border-bottom: 3px solid #66ad93; position: fixed; top: 0; left: 0; z-index: 999999; }
#header.scroll{ background: #fff;}
#header .headerIn{ width: calc( 100% - 160px); height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.headerIn .headLogo{ display: inline-block;}
.headLogo a{ display: flex; align-items: center; width: 100%; height: 100%; }
.headLogo a img{ width: 240px;}

#header .pcMenu{ height: 100%; }
.pcMenu .pcMenuIn{ display: flex; justify-content: center; align-items: center;  }
.pcMenuIn > li{ padding: 0 20px; position: relative; line-height: 100px;}
.pcMenuIn > li > a{ font-size: 18px; color: #000; cursor: pointer; height: 100%;}
.pcMenuIn > li .subMenu{ display: none; opacity: 0; width: 100%; position: absolute; top: 100px; left: 0; background: #66ad93; transition: all 0.5s ease-in-out; z-index: 99; padding: 10px 0;}
.pcMenuIn > li:hover .subMenu{ display: block; opacity: 1;}
.subMenu > li{ padding: 15px 0; text-align: center;}
.subMenu > li > a{ text-align: center; color: #f0f2f5;}

.headerIn .icoMenu{ height: 100%; display: flex; justify-content: space-between; align-items: center; }
.iconBtn a{ display: flex; justify-content: space-evenly; width: 100%; flex-direction: column; align-items: center; }
.iconBtn a img{ width: 30px;  margin: 0 15px;}
.iconBtn a span{ padding-top: 5px; opacity: 0; text-align: center; font-size: 10px; transition: all 0.3s ease-in-out;}
.iconBtn.kakao a img{ width: 33px;}
.iconBtn.kakao a:hover img{ content: url(../img/kakao.png); width: 33px;}
.iconBtn.naver a img{ width: 35px;}
.iconBtn.naver a:hover img{ content: url(../img/naver.png); width: 35px;}
.iconBtn.youtube a img{ padding-top: 0; width: 42px;}
.iconBtn.youtube a:hover img{ content: url(../img/yoitube.png); width: 42px;}
.iconBtn.insta a img{ width: 30px;}
.iconBtn.insta a:hover img{ content: url(../img/insta.png); width: 30px;}

.hamBtn{ position: relative; top: 0; width: 30px; background: transparent; border: none; cursor: pointer; z-index: 999; margin-left: 15px;}
.hamBtn::before, .hamBtn::after, .hamBtn div{ content: ''; display: block; height: 2px; margin: 8px 0; transition: all 0.3s ease-in-out; background: #000; border-radius: 2px;}
.hamBtnOn .hamBtn::before{ transform: translateY(9px) rotate(135deg); background-color: #000;}
.hamBtnOn .hamBtn::after{ transform: translateY(-11px) rotate(-135deg); background-color: #000; width: 100%;}
.hamBtnOn .hamBtn div{ transform: scale(0); opacity: 0;}

#header .allMenu{ width: 100%; position: fixed; top: 100px; left: 0; background: #66ad93; z-index: 9999; display: none; opacity: 0; transition: all 0.3s ease-in-out;}
.allMenu .allMenuIn{ display: flex; justify-content: center; margin: 20px 0;}
.allMenuIn > li{ padding: 0; margin: 10px 30px; }
.allMenuIn > li > span{  font-size: 16px; font-weight: 600; color: #e9c775;}
/* .allSubMenu > li{ text-align: center;} */
.allSubMenu > li a{ display: block; color: #f0f2f5; padding: 5px 0;}
#header.hamBtnOn .allMenu{ display: block; opacity: 1;}
#header.hamBtnOn .pcMenu{ opacity: 0; transition: all 0.1s ease-in-out;}

/* footer */
footer{ padding: 64px 0; background: #eff3f1;}

footer .footerIn{ width: calc(100% - 160px); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end;}
.footerIn .footConWrap{ width: 50%;}
.footConWrap .footLogo img{ width: 280px;}
.footConWrap .footInfo{ margin-top: 30px;}
.footInfo p{ font-family: 'Pretendard Variable'; font-size: 16px; line-height: 1.5em;}
.footConWrap .footMenu{ margin-bottom: 10px;}
.footMenu .footMenuIn{ display: flex; justify-content: flex-end;}
.footMenuIn li{ font-family: 'Pretendard Variable'; margin: 0 10px;}
.footMenuIn li:last-child{ margin-right: 0;}
.footMenuIn li a{ font-family: 'Pretendard Variable';}
.footConWrap .copyright{ font-family: 'Pretendard Variable'; text-align: right; }
/* 반응형 */
@media all and (max-width: 1600px){
   .pcMenuIn > li{ padding: 0 10px;}
}
@media all and (max-width: 1440px){
    #header .headerIn{ width: calc(100% - 60px);}
    .headLogo a img{ width: 200px;}
    .pcMenuIn > li > a{ font-size: 16px;}

    footer .footerIn{ width: calc( 100% - 60px); }
}
@media all and (max-width: 1280px){
    .pcMenuIn > li{ padding: 0 10px;}
}

@media all and (max-width: 1024px){
    #header .pcMenu{ display: none;}
    
}

@media all and (max-width:768px){
    .allMenu .allMenuIn{ justify-content: space-evenly;}
    .allMenuIn > li{ margin:10px;}
    .footMenuIn li a{ font-size: 12px;}
    .footConWrap .copyright{ font-size: 12px;}
}

@media all and (max-width: 520px){
    .pcbr{display: none;}
    .mbr{display: block;}

    #header{ height: 80px;}
    #header.hamBtnOn{ background-color: #fff;}
    #header .headerIn{ width: calc( 100% - 20px);}
    .headLogo a img{ width: 130px;}
    .iconBtn a img{ margin: 0 5px;}
    .hamBtn{ margin-left: 8px;}
    .iconBtn.kakao a img, 
    .iconBtn.naver a img, 
    .iconBtn.youtube a img,
    .iconBtn.insta a img{ width: 24px;}

    .iconBtn.kakao a:hover img, 
    .iconBtn.naver a:hover img, 
    .iconBtn.youtube a:hover img,
    .iconBtn.insta a:hover img{ width: 24px;}

    #header .allMenu{ top: 80px; height: 100%;}
    .allMenu .allMenuIn{ justify-content: space-around; flex-wrap: wrap; }
    .allMenuIn > li{ width: 40%; margin: 20px 10px;}
    .allMenuIn > li > span{ font-size: 14px;}
    .allSubMenu > li a{ font-size: 12px;}

    footer .footerIn{ width: calc( 100% - 20px); flex-direction: column; align-items: flex-start; }
    .footerIn .footConWrap{ width: 100%;}
    .footConWrap .footLogo img{ width: 240px;}
    .footInfo p{ font-size: 13px;}
    #ft p{ margin-bottom: 0;}
    .footMenu .footMenuIn{ justify-content: flex-start; margin-top: 30px;}
    .footMenuIn li{ margin: 0 5px;}
    .footMenuIn li:first-child{ margin-left: 0;}
    .footConWrap .footMenu{ margin-bottom: 5px;}
    .footConWrap .copyright{ text-align: left;}

}
@media all and (max-width: 320px){
    .headLogo a img{ width: 120px;}
    
}