@charset "utf-8";
/*헤더 서식*/

body,html{
  scroll-behavior: smooth;
  font-family: 'Gmarket Sans', sans-serif, "Noto Sans KR";
  font-size: clamp(12px, 2vw, 18px) !important;
}

#mobile_logo{display: none;}
a{text-decoration: none; color:#424242;}
a:hover{color:#424242;}
header{
  width:100%;
  margin:0 auto;
  position: relative;
}
.h1_mobile{display:none;}


header .search_box{
  width: 400px;
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -48%)
}
.search_box{position:relative;}
.search_box button{background-color: rgba(255, 255, 255, 0); border:none; top:2px; right: -26px; position: absolute;}
.search_box .fa-search{padding:5px; font-size: 27px; color:#0077ff;}
.search_box #search{width: 435px; border-radius: 30px; padding:12px; text-indent: 20px; border: 2px solid #0077ff;}
.search_box #search:focus{outline:none;}

.header_box{width:1200px; height: 100px; position:relative; margin:0 auto; top:0px;}
#main_logo{width:250px; position: relative; top:-10px;  }
.user-menu{
  display: flex;
  position: absolute;
  /* width: 300px; */
  gap: 20px;
  right: 0px;
  top: 50px;
}
.user-menu > li > a{
  text-decoration: none; 
  color:#424242; 
  font-weight: bold;
}
.gnb_box{width:100%; margin:0 auto;}
.fa-bars{
  color:white;
  font-size: 40px; 
  cursor: pointer;
  position: absolute;
  top: 106px;
  left: 400px;
}
.gnb{background-color: #10af29;}
.gnb>ul{
  display:flex; 
  width:1200px;
  margin:0 auto;
  padding-left: 50px;
}
.gnb>ul>li>a{
  line-height:50px; 
  color:white; 
  font-weight: bold; 
  text-decoration: none;
}
.gnb>ul>li{margin-left:67px;}

.cate{
  display:none; 
  position:absolute; 
  width:230px; 
  background-color: white; 
  top:150px;}

.cate>li>a{
  color:white;
  display:block; 
  width:100%; 
  line-height:50px; 
  text-align: center;
}
.cate >li{background-color: #10af29;}

.cate>li>a:hover{
  text-decoration: none; 
  background-color: white; 
  color:#10af29;
}



.cate_box1{position:absolute; height:450px; left:230px; top:0px; background-color: white; z-index: 100;}
.cate_box1 a{color:#250404;}
.small_title{padding-top:40px; text-align:left; margin-left:42px;}

.cate_list_title>ul{padding: 0px 20px; height: 300px;}
.cate_list_title ul>li{line-height: 40px; font-size: 15px;}
.cate_box1 ul{text-align: left; margin:0px 20px;}
.cate_box1 p{font-weight: bold; font-size: 18px; text-align: left;}
.cate_list_1depth1{display:flex; width:700px;  text-align: center;}
.cate_list_1depth2{display:flex; width:700px;  text-align: center;}
.cate_list_1depth3{display:flex; width:700px;  text-align: center;}
.cate_list_1depth4{display:flex; width:700px;  text-align: center;}
.cate_list_1depth5{display:flex; width:700px;  text-align: center;}
.cate_list_1depth6{display:flex; width:700px;  text-align: center;}
.cate_list_1depth7{display:flex; width:700px;  text-align: center;}
.cate_list_1depth8{display:flex; width:700px;  text-align: center;}
.cate_list_1depth9{display:flex; width:700px;  text-align: center;}

.user-menu-tablet{display:none;}

.user-menu-mobile{display: none;}

/*태블릿*/
@media screen and (min-width:768px) and (max-width:1024px) {
  
    
   .h1_mobile{position:relative; display:none;}
    .header_box{width: 100%;}
    .gnb > ul {width: 90%;}
    #main_logo{left:-7%; position:relative; width:12rem;}
    .search_box button{background-color: rgba(255, 255, 255, 0); border:none; top:4px; right: 2.5rem; position: absolute;}
    .user-menu{display:none;}
    .user-menu-tablet{display: flex;
      position:absolute; 
      width: 9rem; 
      justify-content: center;
      right: -5%;
      top:2.2rem;}
    .user-menu-tablet i{font-size: 1rem; margin:0px 10px 0px 10px;}
    .search_box {width: 18rem !important; position: relative;  margin:0 auto !important;}
    .search_box #search{width:22rem;}
    .search_box i{position: absolute; left:4rem;}
    .user-menu {
      width: auto;
      gap: 0.8rem;
      right: 0.8rem;
    }
  
    .fa-bars{
      color:white;
      font-size: 2rem; 
      position:absolute;
      left:3%;
      top: 110px;
    }

    .gnb>ul{
      display:flex; 
      width: 64rem;
      margin:0 auto;
      padding-left: 3rem;
      height: 3rem;
    }
    .gnb>ul>li>a{
      line-height:3.3rem; 
      color:white; 
      font-weight: bold; 
      text-decoration: none !important;
    }
    .gnb>ul>li{margin-left:2.5rem;}
    .cate{
      display:none; 
      position:absolute; 
      width:14.4rem; 
      background-color: white; 
      top: 154px; 
      left: 25px;
}
    .cate a{font-size: 0.9rem;}
    .cate_list_1depth1,
    .cate_list_1depth2,
    .cate_list_1depth3,
    .cate_list_1depth4,
    .cate_list_1depth5,
    .cate_list_1depth6,
    .cate_list_1depth7,
    .cate_list_1depth8,
    .cate_list_1depth9 {
      width: 34rem;
    
    }

  h2{font-size: 1rem; font-weight: bold;}

  .cate_box1{position:absolute; height: 25.05rem; left:14.4rem; top:0rem; background-color: white; z-index: 100;}
  .cate_box1 a{color:#250404;}
  .small_title{padding-top:2.5rem; text-align:left; margin-left:2.5rem;}

  .user-menu-mobile{display: none;}

  }


/*모바일 414*/
@media screen and (max-width:767px) {
  header{position: relative;}
  .header_box{height:80px; width: 100%;}
  #mobile_logo{position: absolute; top:20px; left:0; width:60px; display: block;}
  #main_logo{display:none !important;}
  .gnb_box{display: none;}
  .header_box,
  .gnb > ul {
    width: 90%;
    padding:1rem 0rem;
    
  }


  .user-menu{display:none;}
  .user-menu li:first-child{display: block;}
  .user-menu-tablet{display:none;}
  .user-menu-tablet{display: flex;
    position:absolute; 
    width: 12rem; 
    justify-content: space-evenly;
    right: -6%;
    top:1.2rem;}
    .user-menu-tablet i{font-size: 1rem;}
  
.search_box{position:relative; width:18rem; left:76% !important; top:56% !important; transform: translate(-70%, -20%) !important;}
.search_box button{background-color: rgba(255, 255, 255, 0); border:none; top:2px; right:50px; position: absolute;}
.search_box .fa-search{font-size: 1.4rem; color:rgb(0, 0, 129); position:absolute; right:3rem;}
.search_box #search{width:20rem; height:2.4rem;  border-radius: 1.5rem; padding:3px; text-indent: 10px;}

  .user-menu {
    width: auto;
    gap: 0.8rem;
    right: 0.8rem;
  }

  .fa-bars{
    color:white;
    font-size: 1.6rem !important; 
    position:absolute;
    left:5%;
    top:128px;
  }

  .gnb>ul{
    display:flex; 
    width:55rem;
    margin:0 auto;
    padding-left: 3rem;
  }
  .gnb>ul>li>a{
    font-size: 0.8rem;
    line-height:1rem; 
    color:white; 
    font-weight: bold; 
    text-decoration: none !important;
  }
  .gnb>ul>li{margin-left:1.5rem;}
  
  .cate{display:none; position:absolute; width:9rem; background-color: white; top:9.4rem; left:0%;}
  .cate a{font-size: 0.7rem;}
  .cate_list_1depth1,
  .cate_list_1depth2,
  .cate_list_1depth3,
  .cate_list_1depth4,
  .cate_list_1depth5,
  .cate_list_1depth6,
  .cate_list_1depth7,
  .cate_list_1depth8,
  .cate_list_1depth9 
  {width: 34rem;}

  h2{font-size: 1rem; font-weight: bold;}

  .cate_box1{ position:absolute; height:30.05rem; left:9rem; top:0rem; }
  .cate_box1 img{width:11rem !important; position:absolute; top:2rem; left:12rem;}
  .cate_box1 a{color:#250404;}
  .small_title{padding-top:2.5rem; text-align:left; font-size: 0.9em !important; margin-left:2.2rem;}
  .cate_box1 ul{display: block;}
  .cate_list_title ul>li{line-height:2rem;}
  
  

  .cate_list_title li{
  padding: 0px 20px;
  height: 1.6rem;}
  
  .cate_box1 ul {margin:0px 0px;}
  
 
  .cate_list_1depth3 ul,
  .cate_list_1depth4 ul,
  .cate_list_1depth5 ul,
  .cate_list_1depth7 ul,
  .cate_list_1depth9 ul{height:8rem;}
.cate_list_1depth8 ul{height:12rem;}
.cate_list_1depth1 ul{height:5rem;}
.cate_list_1depth2 ul{height:6rem;}
.cate_list_1depth9 ul
{height:10rem !important;}
.cate_list_1depth6 ul{height:9rem;}
.cate_list_1depth6 >li:last-child ul{height:20px !important;}
.cate_list_1depth7 ul
.cate_list_1depth6 ul,
.cate_list_1depth5 ul{
  height:9rem !important;
}
.si{
  height:3rem !important;
}
.user-menu-tablet{display: none;}
.user-menu-mobile{display: block; 
  position: relative; top:40px; display:flex; justify-content: right;}
.user-menu-mobile li{margin-left:10px;}
.user-menu-mobile i{font-size: 2.5rem;}


}