/* =========================
  header
========================= */
#header{position:fixed;top:0;left:0;width:100%;height:5rem;z-index:999;background:var(--white);transform:translateY(0);transition:transform .4s ease, background .3s ease;}
#header.hide{transform:translateY(-100%);}
#header .headerBg{position:absolute;top:0;left:0;width:100%;height:22.5rem;background:var(--white);backdrop-filter:blur(10px);opacity:0;visibility:hidden;box-shadow:0 8px 20px rgba(0,0,0,.05);transition:var(--transition);}
#header .headerLine{position:absolute;top:100%;left:0;width:100%;height:1px;background:var(--borderBase);opacity:1;visibility:hidden;}
#header .layoutContainer{display:flex;justify-content:space-between;align-items:center;height:100%;}
.logo{display:block;width:10rem;}

#header .nav{height:100%;}
#header .nav .topBox{display:none;position:relative;width:100%;height:5rem;padding:0 2.5rem;justify-content:space-between;align-items:center;}
#header .gnb{display:flex;align-items:center;height:100%;}

/* depth1 */
#header .depth1{position:relative;z-index:99;height:100%;padding:0 2rem;transition:var(--transition);}
#header .depth1::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--pointBase);transition:var(--transition);}
#header .depth1>a{display:flex;align-items:center;height:100%;font-size:1.125rem;font-weight:500;}

/* depth2 */
#header .depth2{position:absolute;top:100%;left:0;z-index:98;width:100%;padding:1.25rem 0;opacity:0;visibility:hidden;transition:var(--transition);}
#header .depth2>li{text-align:center;transition:var(--transition);}
#header .depth2>li>a{display:block;width:100%;padding:.5rem 0;color:var(--textBody);}
#header .depth2>li>a span{position:relative;display:inline-block;}
#header .depth2>li>a span::after{content:'';position:absolute;top:50%;left:-20%;width:4px;height:4px;border-radius:50%;background:var(--pointBase);opacity:0;transform:translateY(-50%);transition:var(--transition);}

/* hamBtn */
.hamBtn{position:relative;z-index:1001;display:flex;flex-direction:column;gap:8px;width:24px;height:22px;cursor:pointer;}
.hamBtn span{position:absolute;left:0;width:100%;height:2px;background:var(--black);border-radius:2px;transition:var(--transition);}
.hamBtn span:nth-child(1){top:0;}
.hamBtn span:nth-child(2){top:10px;width:18px;}
.hamBtn span:nth-child(3){bottom:0;}
#header.allMenu .hamBtn span:nth-child(1){top:10px;transform:rotate(45deg);}
#header.allMenu .hamBtn span:nth-child(2){opacity:0;}
#header.allMenu .hamBtn span:nth-child(3){bottom:10px;transform:rotate(-45deg);}

/* hover */
#header .gnb:hover>.depth1,#header.menuOpen .gnb>.depth1{padding:0 2.5rem;}
#header .gnb:hover .depth2,#header.menuOpen .depth2{opacity:1;visibility:visible;}
#header .depth1:hover::after{width:100%;}
#header .depth1:hover>a,#header .depth2>li>a:hover{color:var(--pointBase);}
#header .depth2>li>a:hover span::after{left:-.5rem;opacity:1;}

/* active */
#header .headerBg.active{opacity:1;visibility:visible;}
#header .headerLine.active{opacity:1;visibility:visible;}

#header.menuOpen .headerBg{opacity:1;visibility:visible;}
#header.menuOpen .headerLine{opacity:1;visibility:visible;}

#header.menuOpen .gnb>.depth1{padding:0 2.5rem;}
#header.menuOpen .depth2{opacity:1;visibility:visible;}

@media (max-width:1240px){
  #header .nav{display:none;}
  .logo{width:9rem;}
}

/* =========================
  allMenu
========================= */
.allMenu{position:fixed;top:0;right:0;width:100%;max-width:100vw;height:100vh;background:var(--pointBase);transform:translateX(100%);transition:var(--transition);z-index:2000;overflow-y:auto;}
.allMenu.open{transform:translateX(0);visibility:visible;}

.allMenu .topBox{display:flex;justify-content:space-between;align-items:center;height:5rem;padding:0 20px;}
.allMenu .closeBtn{position:relative;width:24px;height:24px;}
.allMenu .closeBtn span{position:absolute;top:50%;left:50%;width:100%;height:2px;background:var(--white);}
.allMenu .closeBtn span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
.allMenu .closeBtn span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}

.allMenuGnb .depth1>a{display:flex;align-items:center;width:100%;padding:1rem 20px;color:var(--white);font-size:1.25rem;font-weight:700;}

.allMenuGnb .depth2{display:none;position:static;padding:0 2rem 1rem;opacity:1;visibility:visible;}
.allMenuGnb .depth2 a{display:block;padding:.5rem 0;color:var(--textWhiteBody)}
.allMenuGnb .depth2 a:hover{color:var(--white)}
.allMenuGnb .depth2 a span{font-size:16px;}
.allMenuGnb .depth2 a span br{dispaly:none;}
@media (max-width:1024px){}


/* =========================
  footer
========================= */
#footer{background: var(--bgBlack); padding: 3.75rem 0 4.25rem; }

#footer .footerTop::after{content:'';display:block;width:100%;height:1px;background:var(--white);margin:2rem 0;opacity:.3;}
#footer .footerInfo {display:flex;flex-wrap:wrap;flex-direction:row;gap:1.5rem; margin-top:2rem;}
#footer .footerInfo li {display:flex;gap:12px;font-size:1rem;}
#footer .footerInfo li b {color:var(--white);}
#footer .footerInfo li p {color:var(--textWhiteBody);}

#footer .footerBottom {display:flex; justify-content:space-between;align-items:flex-end;}
#footer .footerBottomLeft {display:flex; flex-direction:column; gap:1rem;}
#footer .footerBottomLeft ul {display:flex; gap:1.5rem;}
#footer .footerBottomLeft ul li a{fzont-size:1rem; color:var(--white);}
#footer .footerBottomLeft .copyright{line-height:1.5;color:var(--textMuted);}
#footer .footerBottomRight {display:flex; gap:.5rem;}
#footer .footerBottomRight .sns {width:2.5rem;height:2.5rem;;background:no-repeat center/cover;}
#footer .footerBottomRight .insta{background-image: url(/img/main/snsInsta.png);}
#footer .footerBottomRight .blog{background-image: url(/img/main/snsBlog.png);}
#footer .footerBottomRight .youtube{background-image: url(/img/main/snsYoutube.png);}
#footer .footerBottomRight .kakaochannel{background-image: url(/img/main/snsKakaochannel.png);}

@media (max-width:768px){
  #footer .footerBottom {flex-direction: column;align-items:flex-start;gap:2rem;}
}

/* =========================
   Quick-menu
========================= */
.quick-menu{position:fixed;top:30%;right:0;z-index:998;display:flex;flex-direction:column;align-items:center;gap:20px;width:95px;transition:var(--transition);}
.quick-menu ul{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center;overflow:hidden;border-radius:20px 0 0 20px;box-shadow:0 0 20px 5px #9999991a;}
.quick-menu ul li{width:100%;background:var(--white);}
.quick-menu ul li a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px;}
.quick-menu ul li figure{position:relative;width:60px;height:60px;border-radius:100px;}
.quick-menu ul li img{width:100%;height:100%;object-fit:contain;display:block;}
.quick-menu ul li span{font-size:1rem;font-weight:700;}
.top-directions{display:none;}
.quick-menu ul .top-24h a{padding:20px 10px;color:var(--white);background:var(--pointBase);}
.quick-menu ul .top-24h figure{width:40px;height:40px;}
.quick-menu ul .top-call a{padding:20px 10px 10px;}
.quick-menu ul .top-case a{padding:10px 10px 20px;}
#top-btn{display:flex;align-items:center;justify-content:center;width:60px;height:60px;min-width:44px;min-height:44px;border-radius:100px;background:var(--pointBase);color:var(--white);cursor:pointer;transition:var(--transition);}
#top-btn svg{transform: rotate(-90deg); fill:#fff;}    
@media (max-width:1440px){
.quick-menu{top:38%;width:80px;}
.quick-menu ul li figure{width:50px;height:50px;}
.quick-menu ul .top-24h figure{width:35px;height:35px;}
}

@media (max-width:1280px){
.quick-menu{top:42%;}
.quick-menu ul li figure{width:40px;height:40px;}
.quick-menu ul .top-24h figure{width:30px;height:30px;}
#top-btn{width:55px;height:55px;}
}

@media (max-width:1024px){
.quick-menu{top:50%;gap:15px;width:65px;}
.quick-menu ul li figure{width:35px;height:35px;}
.quick-menu ul li a{gap:8px;padding:7.5px 5px;}
.quick-menu ul .top-24h a{padding:15px 5px;}
.quick-menu ul .top-24h figure{width:28px;height:28px;}
.quick-menu ul .top-call a{padding:15px 5px 7.5px;}
.quick-menu ul .top-case a{padding:7.5px 5px 15px;}
#top-btn{width:50px;height:50px;}
}

@media (max-width:768px){
.quick-menu{top:auto;bottom:0;right:0;width:100%;gap:15px;flex-direction:column-reverse;align-items:flex-end;}
.quick-menu ul{flex-direction:row;align-items:stretch;border-radius:0;}
.quick-menu ul li{flex:1;}
.quick-menu ul li:not(:last-child){border-right:1px solid #eee;}
.top-directions{display:block;}
.quick-menu ul .top-24h a{height:100%;padding:0;}
.quick-menu ul .top-call a,.quick-menu ul .top-case a,.quick-menu ul li a{padding:10px;justify-content:center;}
#top-btn{width:45px;height:45px;margin-right:15px;}
}

@media (max-width:480px){
.quick-menu ul .top-call a,.quick-menu ul .top-case a,.quick-menu ul li a{gap:5px;padding:10px 5px;}
#top-btn{width:35px;height:35px;}
}