/* footer & header styles */
.mo{ display: none; }
.header{width:100%;position:fixed;top:0;left:0;z-index:999;font-family:'roboto';transition:.4s;background:#f6f2eb;color:#3a3a3a;}
.header a{color:inherit;}
.header::before{content:'';width:100%;height:1px;background:#3a3a3a;position:absolute;bottom:0;}
.header.wh{background:transparent; color:#fff;}
.header.wh .wrap::before{content:'';width:100%;height:1px;background:#fff;position:absolute;bottom:0;}
.header.wh::before{display:none;}
.header.wh:hover{background:#f6f2eb;color:#3a3a3a;}
.header.wh:hover::before{display:block;}
.header.wh:hover .wrap::before{display:none;}
.header.wh:hover .s_gnb{background:#f6f2eb; }
.header .wrap{min-height: var(--headerH);  display:flex;padding:20px 0;box-sizing:border-box;align-items:center;justify-content:space-between;position:relative;}
.header .nav > ul > li:hover > a{ font-weight: 700; }
.header .nav_wrap{flex:1;}
.header .nav>ul{display:flex;gap:30px;letter-spacing:-0.025em;}
.header .nav>ul li{font-size:17px;line-height:1.7;}
.header .sub{position:relative;}
.header .sub>a{display:flex;align-items:baseline;}
.header .s_gnb{
    display:none;width:100%;position:absolute;background:#f6f2eb; 
    padding: 0 16px; top: 100%; left: 0; box-sizing: border-box; 
    box-shadow: 0 12px 32px rgba(58, 58, 58, 0.15), 0 4px 12px rgba(58, 58, 58, 0.1);
 }
.header .s_gnb ul{width:100%;display:flex;flex-direction:column;gap:16px;padding:16px 0;}
.header .s_gnb li{text-align:center;}
.header .s_gnb li:hover{font-weight: 700;}
.header .logo{max-width:127px;position:absolute;left:50%;transform:translateX(-50%);z-index:1000;}
.header .logo img{width:100%;}
.header .contactBtn{border-radius:20px;border:1px solid #3a3a3a;width:100px;height:40px;text-align:center;align-content:center;cursor:pointer;}
.header .contactBtn a{font-size:16px;line-height:1.8;font-weight:500;}
.header .contactBtn:hover{border:1px solid #a9b8a3;background:#a9b8a3;transition:.3s;}
.header.wh .contactBtn{ border: 1px solid #fff; }
.header.wh:hover .contactBtn{ border: 1px solid #3a3a3a; }
.header .ham_wrap{width:24px;display:none;justify-content:center;align-items:center;cursor:pointer;}
.header .hambtn{position:relative;width:100%;height:10px;z-index:1000;}
.header .hambtn span{width:100%;height:2px;background:#3a3a3a;position:absolute;left:0;transition:.4s;}
.header .hambtn span:nth-child(1){ top:0; }
.header .hambtn span:nth-child(2){ bottom:0; }
.header.ham .hambtn span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
.header.ham .hambtn span:nth-child(2){top:50%;transform:translateY(-50%) rotate(-45deg);}


/* footer */
footer{ position: relative; background: #ded6c8; color: #3a3a3a; font-family: 'roboto'; letter-spacing: -0.025em; box-sizing: border-box; padding: 77px 0 50px; }
footer .wrap{ text-align: center; }
footer .wrap .info{ font-size: 16px; line-height: calc(26 / 16); margin: 50px 0;  display: flex; flex-direction: column; gap: 35px; }
footer .wrap .info dl .tit{ font-weight: 600; }
footer .topBtn{ 
    width: 54px; aspect-ratio: 1/1; border-radius: 50%; background: #a9b8a3; 
    display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 20px;
    position: absolute; top: -5%; left: 50%; transform: translateX(-50%); transition: scale .3s ease;
 }
footer .topBtn .xi-arrow-up:before{ color: #fff; }
footer .topBtn:hover { transform: translateX(-50%) scale(1.1); }

/* 
@media (max-width: 1024px) {
    .header .wrap .ham_wrap { display: flex; order: 1; }
    .header .nav_wrap { display: none; }
    .header .nav_wrap.on { display: block; position: fixed; top: 110px; left: 0; width: 100%; background: #f6f2eb; color: #333; }
    .header .logo { order: 2; max-width: 80px; }
    .header .contactBtn { order: 3; }
}

@media (min-width: 1025px) {
    .header .nav_wrap { display: block; }
} */
@media screen and (max-width: 1280px){
    .header .nav>ul{ gap: 16px; }
    .header .nav>ul li{ font-size: 15px; }
}
@media screen and (max-width: 1024px){
    .header .wrap{ padding: 16px 0; }
    .header .logo{ max-width: 80px; }
    .header .nav_wrap .nav>ul{ gap: 20px; }
    .header .nav_wrap .nav>ul li{ font-size: 14px; }
    .header{background:#f6f2eb;color:#3a3a3a;}
    .header::before{background:#3a3a3a;}
    .header .contactBtn{border:1px solid #3a3a3a; width: 92px; }
    .header .hambtn span{background:#3a3a3a;}
    .header .contactBtn a{ font-size : 14px; }
}
@media screen and (max-width: 820px){
    .pc{ display: none; }
    .mo{ display: block; }
    .header .wrap .ham_wrap{ display: block; }
    .header .wrap{ padding: 16px 0; }
    .header .wrap .ham_wrap{ display: block; }
    .header .nav_wrap{ display: none; }
    .header .nav_wrap.on{ display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #f6f2eb; color: #3a3a3a; justify-content: center; align-items: center; z-index:990;  }
    .header .nav_wrap.on .nav > ul{ padding-top: 160px; flex-direction: column; align-items: center; }
    .header .nav_wrap .nav>ul{ gap: 48px; }
    .header .nav_wrap .nav>ul li{ font-size: 26px; }
}
@media screen and (max-width: 500px){
    .header .contactBtn{ width: 90px; height: 32px; }
    .header .contactBtn a{ font-size: 14px; }

    footer .wrap .info dl .tit{ font-size: 15px; }
    footer .wrap .info dl{ font-size: 14px; }
}
@media screen and (max-width: 360px){
    .header .contactBtn{ width: 78px; }
}

.header .langBtn{ display: flex; gap: 10px; align-items: center; }
.header .langBtn a{ font-size: 14px; }
.header .langBtn span{ font-size: 14px; color: #3a3a3a; padding: 0 10px; }
@media screen and (min-width: 821px) {
    .header .langBtn a:hover {font-weight: 700;}
}
@media screen and (max-width: 820px) {
    .header .langBtn{ gap: 5px; }
}
@media screen and (max-width: 360px) {
    .header .langBtn{ gap: 0px; }
}