@charset "utf-8";

body{ background: #FAF9F4;}
.pcbr{ display: block;}
.mbr{ display: none;}

/* header */
header{ width: 100%; height: 80px; padding: 0 60px; margin: 0 auto; position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center;  background: transparent; z-index: 9999;}
.gnbLogo img{ position: relative; width: 120px; z-index: 99999; filter: invert(1);}
#gnb .pcGnb{ height: 80px; display: flex; justify-content: space-between; align-items: center;} 
.pcGnb>li{ height: 100%; padding: 0 25px;  position: relative;}
.pcGnb>li > a{ width: 100%; line-height: 80px;  font-family: 'iceHimchan'; font-size: 18px; color: #FAF9F4;}
.pcGnb>li.resBtn{ height: 40px; padding: 5px 20px; background: #A77C52; border-radius: 5px; margin-left: 25px;}
.pcGnb>li.resBtn > a{ line-height: 0;}

header:hover{ background-color: rgba(250, 249, 244, 0.55);}
header:hover .pcGnb  > li > a{ color: #100E09;}
header:hover .pcGnb  > li.resBtn > a{ color: #FAF9F4;}

header:hover .gnbLogo img{ filter: invert(0);}

header.scroll{ background-color: rgba(250, 249, 244, 0.85);}
header.scroll .pcGnb  > li > a{ color: #100E09;}
header.scroll .pcGnb  > li.resBtn > a{ color: #FAF9F4;}
header.scroll .gnbLogo img{ filter: invert(0);}

.pcGnb > li .subMenu{ display: none;  opacity: 0; transition: all 0.3s ease-in-out; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease-in-out; background: #A77C52; padding: 10px 0;}
.subMenu li{  width: 7em;}
.subMenu li a{ display: block; width: 100vh; padding: 5px 10px; width: 100%; font-size: 14px; text-align: center; color: #FAF9F4;}
.pcGnb > li:hover .subMenu{  display: block; opacity: 1;}

/* mobileGnb */

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



/* footer */
footer{ width: 100%; padding: 60px; margin: 0 auto; display: flex; justify-content: space-between; border-top: 1px solid #EDE1D1;}
footer .footHalf{ display: flex; flex-direction: column; }
.footHalf .logo img{ width: 180px; }
.footHalf > p{ font-family: 'iceHimchan'; font-size: 20px; color: #333333; }
.footHalf .logo{ margin-bottom: 30px;}
.footHalf .footTxt{ margin-bottom:  20px; }
.footHalf .footTxt p{ font-size: 14px; color: #333333;  text-align: right;}
.footHalf .footLink { display: flex; flex-direction: column; align-items: flex-end;}
.footLink img{ width: 30px; margin-bottom: 10px;}
.footLink p{ font-size: 14px; color: #333;}
.footLink p a{ color: #333;}

/* 반응형 */

@media all and (max-width: 1024px){
    header{ padding: 0 30px}
    footer{ padding: 40px 30px;}
}

@media all and (max-width: 768px){
    .pcGnb>li{ padding: 0 15px;}
    .pcGnb>li.resBtn{ height: 35px; padding: 3px 10px; margin-left: 15px;}

    /* footer */
    .footLink img{ width: 24px;}
    .footHalf > p{ font-size: 16px;}
    .footHalf .footTxt p{ font-size: 12px;}
}

@media all and (max-width: 520px){
    .pcbr{ display: none;}
    .mbr{ display: block;}
    /* header */
    header{ padding: 0 20px;}
    #gnb{ display: none;}
    .gnbLogo img{ width: 130px;}
    .mBtnArea{ display: flex; align-items: center; z-index: 99999;}
    .mBtnArea .resBtn{ display: flex; justify-content: center; flex-direction: column; align-items: center; margin-right: 15px; width: 85px; height: 38px; background:  #A77C52; border-radius: 5px;}
    .resBtn a{  color: #FAF9F4; font-weight: 700; font-size: 14px; text-align: center;}
    .resBtn a i{ font-size: 24px; color: #100E09; text-align: center;}
    .resBtn a span{ font-size: 12px; color: #100E09; padding-top: 5px;}

    /* header.scroll .resBtn a{ color: #100E09; } */

    .hamBtnOn .resBtn{ background: #EDE1D1;}
    .hamBtnOn .resBtn a{ color: #A77C52;}

    
    
    header.scroll .hamBtn::before, 
    header.scroll .hamBtn::after, 
    header.scroll .hamBtn div{ background: #100E09;}
    
    header:hover .hamBtn::before, 
    header:hover .hamBtn::after, 
    header:hover .hamBtn div{ background: #100E09;}

    header.hamBtnOn .hamBtn::before, 
    header.hamBtnOn .hamBtn::after, 
    header.hamBtnOn .hamBtn div{ background: #EDE1D1;}

    /* header.scroll .resBtn a i{ color: #100E09;} */

    /* 모바일 메뉴 */
    .mobileMenu{ opacity: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; position: fixed; top: 0px; left: 0; z-index: 998; background: #A77C52; transition: all 0.3s ease-in-out; }
    header.hamBtnOn .mobileMenu{ opacity: 1; pointer-events: all; z-index: 999; }
    .mobileMenu > ul{ width: 40%; padding: 0 20px; display: flex; flex-direction: column; align-items: center; }
    .mobileMenu > ul > li{ margin-bottom: 15px; text-align: center; position: relative; width: 100%; }
    .mobileMenu > ul > li > a{ display: block; width: 100%; font-weight: 600;color: #EDE1D1; font-size: 18px; cursor: pointer; margin-bottom: 10px; }
    .mobileMenu > ul > li:nth-child(2)::after{ content:'+'; position: absolute; top: 0; right: 20px; transition: all 0.3s ease-in-out; color: #FAF9F4; opacity: 0;}
    .mobileMenu > ul > li:nth-child(3)::after{ content:'+'; position: absolute; top: 0; right: 20px; transition: all 0.3s ease-in-out; color: #FAF9F4; opacity: 0;}
    .mobileMenu > ul > li:nth-child(4)::after{ content:'+'; position: absolute; top: 0; right: 20px; transition: all 0.3s ease-in-out; color: #FAF9F4; opacity: 0;}
    .mobileMenu > ul > li.active{ margin-bottom: 30px;}
    .mobileMenu > ul > li.active::after{ content: '+'; transform: rotate(135deg); opacity: 1;}
    .mobileMenu > ul > li > .mSub{ display: none;}
    .mSub > li > a{  font-size: 14px; color: #FAF9F4;}

    

    /* footer */
    footer{ flex-direction: column; }
    .footHalf .logo{ margin-bottom: 10px;}
    .footHalf > p{ font-size: 18px;}
    .footHalf .footTxt p{ font-size: 14px;}
    .footHalf .footTxt{ margin-top: 20px;}
    .footHalf .footTxt p{ text-align: left;}
    .footHalf .footLink{ align-items: flex-start;}
}