/* sitemap.css */
.sitemap {position: fixed; width: 100%; height: 100vh; left: 0; top: 0; background-color: #fff1f1f9; z-index: 222; transition: all 0.3s; background: url(../img/main_symbol_bg_btm.png) right bottom  no-repeat #fff1f1f9; }

/* .sitemap{animation: slide .2s forwards ease-out;}
.sitemap.fadeout{animation: slide-fade .2s forwards ease-out;} */

@keyframes slide {
   0% {
       transform: translateX(100%);
       opacity: .5;
   }
   100% {
       transform: translateX(0%);
       opacity: 1;
   }
}

@keyframes slide-fade {
   0% {
      transform: translateX(0%);
      opacity: 1;
   }

   100% {
       transform: translateX(100%);
       opacity: 0;
   }
}

.sitemap > div {padding-top: 60px; padding-bottom: 60px;} 
.sitemap > div > .top_sitemap {display: flex; align-items: center; justify-content: space-between; padding-bottom: 2rem; border-bottom: 1px solid #ff6875;;}
.sitemap > div > .top_sitemap > div {position: relative;}
.sitemap > div > .top_sitemap > div.sit_tit {width: 100%;}
.sitemap > div > .top_sitemap p {font-size: 2rem; display: block; width: 100%; font-weight: 500; color: #333;}
.sitemap > div > .top_sitemap p > b { font-size: 2.2rem; width: 100%; font-weight: 700; color: #333;}
.sitemap > div > ul {height: 620px; display: flex; justify-content: flex-start; gap: 3rem 2rem; margin-top: 2.5rem; flex-wrap: wrap; overflow-y: scroll; overflow-x: hidden; padding: 16px;}
.sitemap > div > ul a {display: block; margin-bottom: .9rem; font-size: 1.8rem; font-weight: 700; cursor: default; color: #333;}
.sitemap > div > ul > li {width: calc(100% / 6); text-align: left;}
.sitemap > div > ul > li li {padding: 10px 0; font-size: 1.2rem; color: #333; font-weight: 500; cursor: pointer; color: #362a2abb;}
/* .sitemap > div > ul > li li:hover { color: #ff6875; font-weight: 500; background-color: #ffe4e8; border-radius: .6rem; opacity: 1;} */
.sitemap > div > ul > li li:hover { color: #ff6875; font-weight: 500; opacity: 1;}

/* .dep2_ul{margin-top: 10px; border-radius: 8px; gap: 10px; padding: 10px 14px; background-color: #ffe4e8; display: none; } */
.dep2_ul{margin-top: 10px; border-radius: 8px; gap: 4px; padding: 0;  display: block; }
.dep2_ul li.dep2_list{padding:0; position: relative; opacity: .7;}
.dep2_ul li.dep2_list a:before{content: '-'; display: inline-block; position: relative; margin: 0 6px; width: max-content; }
.dep2_ul li.dep2_list a{font-size: .9em; margin-bottom: 0; cursor: pointer; padding: 8px 0;font-weight: 500}
.more_list span{color: #FF859E; font-weight: 300; font-size: 1.2em;}

.sitemap .top_sitemap > div > button {
   display: block;
   font-size: 30px;
   aspect-ratio: 1;
   color: #666;
   border-radius: 50%;
}

.sitemap .sit_login { position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.sitemap .sit_login > ul {display: flex;}
.sitemap .sit_login > ul > li {font-weight: 500; padding: 6px 16px; background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; margin-right: 8px;}
.sitemap .sit_login > ul > li.sitemap_btn01{background-color: #FF859E; border-color: #FF859E; color: #fff;}
.sitemap .sit_login > ul > li.sitemap_btn02{border-color: #FF859E; color: #FF859E;}



.sitemap .middle_sitemap {display: none;}

.sitemap > div > ul::-webkit-scrollbar {
   width: 3px; /* 스크롤바 너비 */
}

/* 스크롤바 트랙 */
.sitemap > div > ul::-webkit-scrollbar-track {
   background: #e9e9e9; /* 트랙 배경색 */
}

/* 스크롤바 핸들 */
.sitemap > div > ul::-webkit-scrollbar-thumb {
   background: #ff6875; /* 스크롤바 핸들 색상 */
   border-radius: 6px; /* 둥근 모서리 */
}

.sitemap > div > ul.mo_sitemap{display: none;}



/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1600px) {



 }

/* ********************************************* *
 * 1440px
 * ********************************************* */
 @media screen and (max-width: 1440px) {

    header .login_btn_wrap {display: none;}



}


 /* ********************************************* *
 * 1200px
 * ********************************************* */
 @media screen and (max-width: 1200px) {


    
}


 /* ********************************************* *
 * 1240px
 * ********************************************* */
 @media screen and (max-width: 1280px) {

  

}





 /* ********************************************* *
 * 1080px
 * ********************************************* */
 @media screen and (max-width: 1080px) {


}


 /* ********************************************* *
 * 960px
 * ********************************************* */
 @media screen and (max-width: 960px) {

   /* .sitemap {background-color: #fff6f6; } */
   .sitemap {background-color: #fff; }

   .sitemap > div {padding: 0;}

   .sitemap > div > .top_sitemap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 2rem;
      padding-top: 2rem;
      padding-right: 16px;
      padding-left: 16px;
      background: #ff859e;
      border-bottom: 1px solid #ff6875;
  }

  .sitemap > div > ul.web_sitemap{display: none;}
  .sitemap > div > ul.mo_sitemap{display: block;}


   /* 모바일 사이트맵 슬라이드 */
   .sitemap > div > ul.mo_sitemap{margin-top: 16px; gap: 5px;}
   .sitemap > div > ul.mo_sitemap a.arrow{padding: 16px 20px; margin-bottom: 0; position: relative; font-weight: 600;color: #555; font-size: 20px;}
   .sitemap > div > ul.mo_sitemap a.arrow::after{content: ''; position: absolute; display: block; top: 50%; right: 16px; transform: translateY(-50%) rotate(135deg); width: 10px; height: 10px; border-top: 2px solid #ff859eaa; border-right: 2px solid #ff859eaa; transition: all .15s;}
   .sitemap > div > ul.mo_sitemap > li > ul{padding: 0 20px; display: none; background-color: #fff3f6;}
   .sitemap > div > ul.mo_sitemap a.arrow.rotate{color: #ff6875; }
   .sitemap > div > ul.mo_sitemap a.arrow.rotate:after{border-color: #ff6875;  transform: translateY(-50%) rotate(-45deg);}
   .sitemap > div > ul.mo_sitemap .dep2_ul{display: none; }
   .sitemap > div > ul.mo_sitemap .dep2_ul{display: block; }
   .sitemap > div > ul.mo_sitemap .dep2_ul li.dep2_list{padding: 0;}
   .sitemap > div > ul.mo_sitemap .dep2_ul li.dep2_list a{padding: 8px 16px;font-weight: 500; opacity: 1;}
   .sitemap > div > ul.mo_sitemap > li li{padding: 8px 16px;}


   .sitemap > div > ul {height: 80vh; padding: 0 0 16px; overflow-y: auto; flex-direction: column; flex-wrap: nowrap; margin-bottom: 3rem;}
   .sitemap > div > ul a{padding: 0 16px;}
   .sitemap > div > ul > li li{padding-right: 16px; padding-left: 16px;}
   .sitemap > div > ul > li {width: 100%; text-align: left;}

   .sitemap > div > .top_sitemap p {font-size: 1.6rem; color: #fff;}
   .sitemap > div > .top_sitemap p > b {font-size: 1.9rem; color: #fff;}

   .sitemap .top_sitemap > div > button {filter: brightness(100);}

   .sitemap .sit_login {right: 4px;}
   .sitemap .sit_login > ul > li{font-size: 1rem;}
   .sitemap .sit_login > ul > li.sitemap_btn01{border-color: #fff; background-color: #fff; color: #ff859e;}
   .sitemap .sit_login > ul > li.sitemap_btn02{border-color: #fff; background-color: #ff859e; color: #fff;}
   /* .sitemap > div > ul{gap: 0; margin-top: 16px;}
   .sitemap > div > ul > li{position: relative;}
   .sitemap > div > ul > li {border-bottom: 1px solid #ff859e40;}
   .sitemap > div > ul a{margin-bottom: 0; padding: 1rem 0;}
   .sitemap > div > ul > li > a:after{content: ''; position: absolute; display: block; top: 50%; right: .4em; transform: translateY(-50%) rotate(135deg); width: 8px; height: 8px; border-top: 1px solid #999; border-right: 1px solid #999; }
   .sitemap > div > ul > li > ul{display: none;} */
}



 /* ********************************************* *
 * 850px
 * ********************************************* */
 @media screen and (max-width: 850px) {


   
}

 /* ********************************************* *
 * 768px
 * ********************************************* */
 @media screen and (max-width: 768px){

   .sitemap{background-size: 50%;}


}

 /* ********************************************* *
 * 640px
 * ********************************************* */
 @media screen and (max-width: 640px){



   }
   
  
 /* ********************************************* *
 * 500px
 * ********************************************* */
 @media screen and (max-width: 500px){

   .sitemap .sit_login {display: none;}

   .sitemap .middle_sitemap {display: block; width: 100%;}
   .sitemap .middle_sitemap > ul {display: flex; width: 100%;} 
   .sitemap .middle_sitemap > ul > li { width: calc(100% / 2 ); text-align: center; padding: 10px 0; border: 1px solid #ff6875; border-top: 0; background-color: #ff859e; font-size: 1.1rem; color: #fff; cursor: pointer; transition: all 0.3s;}
   .sitemap .middle_sitemap > ul > li:first-child{border-right: 1px solid #ff6875; border-left: none;}
   .sitemap .middle_sitemap > ul > li:nth-child(2){ border-right: none;}
   .sitemap .middle_sitemap > ul > li:hover{background-color: #ffd4dd; color: #ff6875;}
   .sitemap .middle_sitemap > ul > li:last-child {border-left: 0;}
   .sitemap > div > ul{margin: 2rem 0; gap: 2.5rem;}
   .sitemap > div > ul > li li {padding: 12px 16px;}
 
   .sitemap .top_sitemap > div > button{font-size: 24px; padding-right: 0; padding-left: 16px; position: absolute; top: -30px; right: 0px;}
   .sitemap > div > .top_sitemap{padding: 1.4rem 16px ; border-bottom: 1px solid #ff6875 ;}

   .sitemap > div > .top_sitemap p{font-size: 1.5rem;}
   .sitemap > div > ul a{font-size: 1.4rem;}


   /* 모바일 사이트맵 슬라이드 */
   .sitemap > div > ul.mo_sitemap{margin-top: 0;}
   .sitemap > div > ul.mo_sitemap a.arrow{padding: 15px 18px; font-size: 17px; font-weight: 600;}
   .sitemap > div > ul.mo_sitemap a.arrow::after{width: 7px; height: 7px; border-top: 2px solid #ff859eaa; border-width: 1px; width: 8px; height: 8px;}
   .sitemap > div > ul.mo_sitemap > li li{padding: 7px 14px; font-size: 15px;}
   .sitemap > div > ul.mo_sitemap > li > ul{padding: 10px 16px; border-top: 1px solid #ffeaef;} 
   .sitemap > div > ul.mo_sitemap .dep2_ul li.dep2_list a{padding: 6px 0; font-size: 14px;}
   .sitemap > div > ul.mo_sitemap > li {border-bottom: 1px solid #ffeaef;}

}


 /* ********************************************* *
 * 450px
 * ********************************************* */
 @media screen and (max-width: 450px) {

}




/* -------- 350px -------- */
@media screen and (max-width: 350px) {

}