@charset "utf-8";
:root{
  --main_color: #007BE5;
}


/*=============헤더==================*/


/*로그인*/
.login_tab_menu {
    display: flex;
    list-style: none;
    padding: 0;
  }
  
  .login_tab_menu li {
    flex: 1;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    background: #f5f5f5;
    color: #666;
    font-weight: 500;
    border: 1px solid #DEDEDE;
    text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .login_tab_menu li:first-child {
    border-radius: 8px 0 0 0;
  }
  
  .login_tab_menu li:last-child {
    border-radius: 0 8px 0 0;
  }
  
  .login_tab_menu li.active {
      background: #fff;
      color: var(--main_color);
      font-weight: 600;
      border-bottom: 1px solid #fff;
      height: 60px;
  }
.new_login_wrapper{padding: 0;}

.login{padding: 36px; border: 1px solid #DEDEDE; border-top: none; border-radius: 0 0 8px 8px; background: #fff;}

.new_login_wrapper .logo_box{padding: 72px 0; background: #FAFAFA; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:9px;}


/*인풋 커스텀*/

.login_input_form_box01 {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #ddd; /* 옅은 회색 테두리 */
  border-radius: 10px; /* 둥근 모서리 */
  background-color: #fafafa; /* 박스 배경 */
  display: flex;
  align-items: center; /* input 세로 가운데 정렬 */
  box-sizing: border-box;
}

.login_input_form_box01 input {
  flex: 1; /* 박스 너비 채우기 */
  border: none; /* input 자체 테두리 제거 */
  background: transparent; /* input 배경 제거 */
  font-size: 14px;
  color: #333;
  outline: none;
}

.login_input_form_box01 input::placeholder {
  color: #8e8e8e;
}

.id_save_box input{background-color: #FAFAFA; border-radius: 50%; border: 1px solid #e9e9e9 !important;}

.a.login_chk_btn01, .login_chk_btn01{background: var(--main_color) !important; border-radius: 999px !important; margin-bottom: 36px;}


.login_btm_wrapper{padding-top: 36px; border-top:2px solid #DEDEDE}

.sign_up_ment{color: var(--main_color) !important; font-size: 16px;}

.write_btn {
  all: unset !important;                 /* 기본 브라우저/모듈 스타일 전부 초기화 */
  display: inline-block !important;      /* 버튼 모양 만들기 */
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--main_color) !important;
  border: 1px solid var(--main_color) !important;
  border-radius: 10px !important;
  background: #fff !important;
  text-align: center !important;
  cursor: pointer !important;
  line-height: 1 !important;             /* 불필요한 높이 방지 */
  transition: 0.3s !important;
  width: 20% !important;
}

.write_btn:hover{
  background: var(--main_color) !important;
  color: #fff !important;
}


.category_list { list-style: none; padding: 0; margin: 0; }
.category_list li { margin-bottom: 15px; }
.category_list a { display: block; padding: 15px 0; text-align: center; font-size: 16px; font-weight: 500; color: #555; background: #fff; border: 1px solid #ddd; border-radius: 30px; text-decoration: none; transition: all 0.3s; }
.category_list a:hover { background: var(--main_color); color: #fff; border-color: var(--main_color); }


.shop_wrapper{display: flex; gap: 55px;}
.category_wrapper{flex: 1 1 20%;}
.category_wrapper>h2{
  color: #222;
  font-family: "Noto Sans KR";
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.42px;
}
.category_wrapper>p{
  color: #222;
  font-family: "Noto Sans KR";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.22px; 
  text-align: left;
  padding-bottom: 72px;
}

.shop_wrapper .discount01{display: none;}

.shop_wrapper .prd_right_box01{flex:1 1 80%;}

a.prd_page_nav_num.active{
  background-color: var(--main_color);
  border-color: var(--main_color);
  border-radius: 50%;
}

a.prd_page_nav_num{border-radius: 50% !important;}

.shop_item_detail_alt_box01 .option_box01 .option_alt{justify-content: flex-end;}
.shop_item_detail_alt_box01 .option_box01 .option_alt .discount01{display: none;}


.brand_text{width: 100%; display: flex; justify-content: space-between; align-items: center;}
.brand_text span{
  color: #222;
  font-family: "Noto Sans KR";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.16px;
}

.fff_hover__btn {
  color: var(--main_color) !important;
  background-color: #fff !important;
  border: 1px solid var(--main_color) !important;
  transition: all 0.3s ease; /* transform, box-shadow, 색상 전환까지 부드럽게 */
}

.fff_hover__btn:hover {
  color: #fff !important;
  background-color: var(--main_color) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* 그림자 추가 */
}

.fff_btn {
  color: var(--main_color) !important;
  background-color: #fff !important;
  border: 1px solid var(--main_color) !important;
  transition: all 0.3s ease; /* transform, box-shadow, 색상 전환까지 부드럽게 */
}

/* .shop_list_con_box01.item04 .shop_list_item01{
      display: grid
} */

.shop_list_con_box01.item04 .shop_list_item01 .price_box01{
  align-self: end;
  height: 28px;
}
.evaluation_box01 .graph_box_wrapper01 .graph_box01.active .bar,
.evaluation_box01 .graph_box_wrapper01 .graph_box01.active .bar::after{background-color: var(--main_color);}

.evaluation_tab_menu01.active{
  border-color: var(--main_color);
  color: var(--main_color);
}

.shop_item_evaluation_txt_box_con_box01 .evaluation_box01 .alt_box .icon01.active{background: url(/img/evaluation_icon_active_y.png) no-repeat center / cover;}

.secret_review_box01 .secret_btn_box01 a.secret_btn01, .secret_review_box01 .secret_btn_box01 .secret_btn01{border-radius: 50px;background: var(--main_color);color: #fff;}

.programPage a{border:none; color:#888888;}
.programPage a.active {border: 1px solid var(--main_color);border-radius: 50px;background-color: var(--main_color);color: #fff;}
.qanda_btn input{border-radius: 10px;}

.prd_tab_slide_box01 .item.active{border-color: var(--main_color); color:var(--main_color)}

.fa-heart:before{display: none;}

.review_desc p{text-align: left; color: #888;}

.review_right p{color: #888;}


.depth02 .icon img{
  filter: invert(38%) sepia(79%) saturate(2896%) hue-rotate(189deg) brightness(101%) contrast(102%);
}

.prd_tab_slide_box01 .item.active h3 {
  color: var(--main_color) !important;
  font-weight: 600 !important;
}

.sub_sty_change a.on {
  border-color: var(--main_color);
}

.sub_sty_change a.on img,.arrow_icon img,#m_menu .bottom-nav li.active img {
  filter: invert(38%) sepia(79%) saturate(2896%) hue-rotate(189deg) brightness(101%) contrast(102%);

}

.faq_wrapper01 .faq_table > tbody > tr > th .label01 {
  margin-bottom: 20px;
  color:var(--main_color);
  font-size: 17px;
  font-weight: 400;
}