@import url(reset.css);
@import url(variables.css);
@import url(responsive.css);

body{
  background-color: #ffc5b620; margin: 0; padding: 0; box-sizing: border-box; display: block;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
}

/* left_wrap */
#left_wrap{    
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  height: 100%;
  min-height: 660px;
  position: fixed;
  top: 45%;
  right: 55%;
  transform: translateY(-50%);
  box-sizing: border-box;
  margin-right: 400px;
}
.left_fix{padding: 0px 2px;}
.left_fix img{width: 170px;}
.txt_box{margin: 10px 0;}
.left_fix .txt_box h3{
  font-size: 17px;
  font-weight: 400;
  color: #888;
  margin: 16px 0 0;
}
.left_search{
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
.xans_layout{
  position: relative;
  margin: 16px 0;
  padding: 0 30px 0 0;
}
input[type = text], input[type = password]{
  height: 18px;
  line-height: 20px;
  padding: 2px 4px;
  font-size: 12px;
  color: #353535;
  border: 1px solid #d5d5d5;
}
[class*="xi-"],[class^=xi-]{
  font-family: xeicon;
  display: inline-block;
  speak: none;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}
form.search_bar_form{
  margin-top: 0em;
}
.xans_layout_searchheader fieldset input{
  left: 0;
  width: 100%;
  position: absolute;
  border: none;
  background-color: transparent;
  outline: none;
}
input#input_keyword.input_type_text{
  width: 75%;
  height: 50px;
  margin: -12px 16px 0 20px;
  padding: 0;
  border: 0;
  font-size: 15px;
  color: #333;
  font-weight: 400;
  background: none;
  outline: none;
}
.xans_layout_searchheader fieldset i{
  position: absolute;
  right: 0;
  font-size: 20px;
  color: #888;
  cursor: pointer;
}
.xans_layout_searchheader fieldset{
  padding: 0;
  margin: 0;
  width: 260px;
  height: 45px;
  position: relative;
  border-bottom: 2.3px solid #888;
  height: 30px;
}
.als_container{
  width: 100%;
  overflow: hidden;
}
#left_keyword .als_wrapper{
  position: relative;
  list-style: none;
  /* counter-reset: num; */
}
#left_keyword .als_item{
  position: relative;
  width: 100%;
  height: 37px;
  line-height: 37px;
  cursor: pointer;
  display: block;
  padding: 0 16px;
}
#left_keyword .als_item .number{
  font-size: 14px;
  line-height: 20px;
  display: block;
  width: 18px;
  height: 18px;
  color: #fff;
  background-color: var(--pink-point);
  border-radius: 4px;
  margin: 0 10px 0 0;
  text-align: center;
}
#left_keyword .als_item .span_keyword{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  
}
#left_keyword .als_item a{
  font-size: 16px;
  color: #555;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* right_wrap */
#right_wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  height: 100%;
  min-height: 660px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  margin-left: 400px;
}
.right_img_area a{
  display: flex;
  justify-items: center;
  align-items: center;
}
.right_img_area img{
  width: 80%;
  margin: auto;
  border-radius: 50%;
}
#right_wrap .right_img .right_txt{
  text-align: center;
  margin: auto;
}
#right_wrap .right_img .right_txt h2{
  font-size: 28px;
  color: #222;
  font-weight: bold;
  margin: 20px 0 0 0;
}
#right_wrap .right_img .right_txt p{
  font-size: 18px;
  color: var(--silver-black);
  margin: 9px 0 5px 0;
}
.right_sns{
  display: flex;
  justify-content: center;
}
.right_sns .sns{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0 0 0;
}
.right_sns .sns .item{
  width: 40px;
  font-size: 30px;
  margin: 10px;
}
.right_sns .sns .item i{
  color: #ff88736a;
}

/* aside_menu */
aside#aside_menu{
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
  min-width: 225px;
  max-width: 420px;
  background-color: var(--white);
  display: none;
  z-index: 999 !important;
}
#dim_slider{
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background-color: rgba(0, 0, 0, .3);
  display: none;
}
#aside_menu .aside_top_section{
  padding: 16px;
  border-bottom: 1px solid var(--white);
  background-color: var(--pink-point);
}
#aside_menu .aside_member{
  font-size: 14px;
  font-weight: normal;
  color: var(--white);
}
#aside_menu .aside_member p{
  display: inline-block;
  font-size: 16px;
  padding: 0 4px;
  margin: 0 4px 0 0;
}
#aside_menu .xans_myshop{
  border-bottom: 1px solid var(--dim-gray);
  margin: 0 8px;
  padding: 10px 0;
}
#aside_menu .xans_myshop span.icon{
  float: left;
  width: 25%;
}
#aside_menu .xans_myshop a{
  display: block;
  font-size: 11px;
  text-align: center;
  color: var(--black);
  font-weight: 500;
}
#aside_menu .xans_myshop i{
  display: block;
  font-size: 18px;
  margin: 0 0 8px;
}

#aside_menu .aside_top{
  width: 100%;
  padding: 30px;
  display: block;
}
#aside_menu .top_logo img{width: 110px;}
#aside_menu .top_info{
  font-size: 16px;
  font-weight: 500;
  color: var(--dim-black);
  margin: 10px 0 25px 0;
}
#aside_menu .aside_top ul li a{
    position: relative;
    padding: 15px 120px;
    font-weight: 500;
    border-radius: 5px;
    transition: .4s ease-in;
    color: #fff;
    font-size: 18px;
    background-image: linear-gradient(to right, #ff7053, #ff755d,#e46c57 ,#ff5c40);
}
#aside_menu .aside_top ul li a:hover{
    background-image: linear-gradient(to right, #ff5938, #ff8c77,#e46c57 ,#ff4322);
    box-shadow: 0 4px 15px 0 rgb(133 133 133 / 48%);
}

#aside_menu .aside_recomm{
  padding: 0 30px;
  margin: 0 0 20px;
}
#aside_menu .aside_recomm .cate_title{
  margin-top: 20px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}
#aside_menu .aside_recomm ul{font-size: 0;}
#aside_menu .aside_recomm ul li{
  border: 1px solid #EDEDED;
  border-radius: 18px;
  display: inline-block;
  margin: 0 8px 8px 0;
}
#aside_menu .aside_recomm ul li a{
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 400;
  line-height: 34px;
  padding: 0 12px;
  display: inline-block;
}
#aside_menu .aside_recomm ul li:hover{
  background-color: var(--Light-point);
}

#aside_menu .main_cate{
  padding: 0 30px;
}
#aside_menu .main_cate .cate_title{
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}
#aside_menu .main_cate .categoryList{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
}
#aside_menu .main_cate .categoryList li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f3f3f3;
  background: #fff;
  padding-bottom: 16px;
  margin: 0px 8px 16px;
  box-sizing: border-box;
  border-top: none;
}
#aside_menu .main_cate .categoryList li a{
  position: static;
  border: 0;
  padding: 0;
  font-size: 14px;
  line-height: 32px;
  font-weight: 500;
  color: #1a1a1a;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  width: 140px;
}
#aside_menu .main_cate .categoryList li a img{
  width: 25px;
  height: 25px;
  margin-right: 8px;
  vertical-align: middle;
}
#aside_menu .main_cate .categoryList li a i{
  font-size: 20px;
  color: var(--coral-point);
  margin: 0 8px;
}

#aside_menu .side_cs{
  position: relative;
  padding: 0 30px;
  margin: 0 0 30px;
}
#aside_menu .side_cs h3{
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
#aside_menu .side_cs .tel{
  font-size: 26px;
  font-weight: 700;
  color: var(--pink-point);
}
#aside_menu .side_cs .time{
  font-size: 13px;
  font-weight: 400;
  margin: 4px 0 0;
}

#aside_menu .event_banner{
  margin: 16px 30px;
}
#aside_menu .event_banner .event_banner_h3{display: none;}
#aside_menu .event_banner .img_zoom{position: relative;}
#aside_menu .event_banner .round{border-radius: 5px; overflow: hidden;}
#aside_menu .event_banner .img_zoom a img{width: 100%; transition: 0.3s ease-in;}
#aside_menu .event_banner .txt{
  position: absolute;
  left: 5%;
  top: 50px;
  transform: translateY(-50%);
}
#aside_menu .event_banner .txt h3{
  font-size: 20px;
  line-height: 1.3em;
  font-weight: 500;
  letter-spacing: -0.5px;
}
#aside_menu .event_banner .txt p{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: -0.2px;
  margin: 4px 0 0;
}
#aside_menu .btn_close{
  font-size: 24px;
  position: absolute;
  top: 4px;
  right: 19px;
  display: block;
  padding: 8px;
  color: var(--white);
  cursor: pointer;
}
#aside_menu .event_banner .event_banner_h{
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  margin-bottom: 10px;
}

/********* wrap *********/
#wrap{
  position: relative;
  width: 100%;
  max-width: 700px;
  min-height: 100vh;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  margin: 0px auto;
  border-left: 1px solid rgb(225, 225, 225);
  border-right: 1px solid rgb(225, 225, 225);
  overflow: hidden;
  padding: 0px 0px 60px;
}
/* top_banner */
.top_banner{
  position: relative;
  height: 40px;
  overflow: hidden;
  z-index: 0  !important;
}
.top_banner .swiper-slide {
  display: flex;
  align-items: center;
  height: 40px; /* 슬라이드 하나 높이 */
}
.top_banner li.swiper_slide{
  display: block;
  height: 40px;
  background-color: var(--pink-point);
}
.top_banner ul li{
  text-align: center;
}
.top_banner ul li a{
  font-size: 14px;
  line-height: 40px;
  color: var(--white);
}
.top_banner .top_close_btn{
  font-size: 20px;
  line-height: 50%;
  position: absolute;
  right: 5%;
  color: var(--white);
  bottom: 14px;
}

/* header */
/* header 스크롤시에 가장 상단에 붙이기 - 스크립트와 연결되어져 있음*/
.fixed-header {
  position: fixed;
  top: 0;
  z-index: 9999;
  background: white; /* 배경 색상은 사이트 디자인에 맞게 조정 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 선택사항 */
}

#header{
  position: absolute;
  max-width: 700px;
  width: 100%;
  position: fixed;
  z-index: 99;
}
#header .header_inner{
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}
#header .header_top_area{
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  background-color: var(--white);

}
.header_top_side .btn_cate{
  display: block;
  width: 100%;
  height: 100%;
  line-height: 52px;
  cursor: pointer;
}
.header_top_side .btn_cate i{
  font-size: 24px; 
  line-height: 2;
}
.header_logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header_logo img{
  max-width: 180px;
  max-height: 40px;
}
.header_top_rigth_icon{
  display: flex;
  gap: 14px;
}
.search_wrap .search i{
  font-size: 22px;
  animation: blink_i 1s infinite;
}
.search_wrap .user i{
  margin-right: 5px;
  animation: blink_i 1s infinite;
}
.cart_wrap .cart img{
  width: 24px;
}
.cart_wrap .cart .count{
  position: absolute;
  top: 10px;
  right: 15px;
  height: 18px;
  width: 18px;
  line-height: 17px;
  border-radius: 50%;
  text-align: center;
  min-width: 11px;
  padding: 1px;
  background-color: var(--black);
  color: var(--white);
  font-size: 12px;
}

/* #header > #menu_fix */
#menu_fix{
  width: 100%;
  background-color: var(--white);
  margin: 0 auto;
  max-width: 700px;
}
#menu_fix .menu_inner{
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 700px;
}
#menu_fix .menu_top_cate{text-align: center;}
#menu_fix .cate{border-bottom: 1px solid #eee;}
#menu_fix .cate ul{display: flex; justify-content: space-around;}
#menu_fix .cate ul li{padding: 11px 0; width: auto; position: relative;}
#menu_fix .menu_top_cate .cate ul li a::after{
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: var(--pink-point);
  border-radius: 50%;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: .4s;
}
#menu_fix .menu_top_cate .cate ul li:hover a::after{content: ''; opacity: 1;}
#menu_fix .menu_top_cate .cate ul li:hover{font-weight: 600;}

/* go_btn */
#go_btn{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  max-width: 698px;
  margin: 0 auto;
  border-top: 1px solid #eee;
  padding: 10px;
  background-color: var(--white);
  cursor: pointer;
}
#go_btn ul.box{
  display: flex;
  justify-content: space-around;
  padding: 7px 0;
}
#go_btn ul.box li{
  flex-basis: 16%;
  display: flex;
  text-align: center;
  flex-direction: column;
  font-weight: 600;
}
.side .btn_cate{
  font-size: 26px;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
#go_btn ul.box li:hover i{
  transition: .4s ease-in;
  color: var(--pink-point);
}
#go_btn ul.box li:hover i.fa-house-chimney{
  color: var(--coral-point);
}
#go_btn ul.box li i{
  transition: .3s;
  font-size: 24px;
  margin-bottom: 10px;
}
#go_btn ul.box li i.fa-house-chimney{
  color: var(--pink-point);
}

/* visual */
#visual{
  position: relative;
  margin: 0 auto;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  height: 95%;
}
#visual > ul > li{display: block;}
#visual .swiper-slide{
  flex-shrink: 0;
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
}
#visual .img{
  width: 100%;
  overflow: hidden;
  margin: auto;
  display: block;
}
#visual .img img{
  width: 100%;
}
#visual .layer{
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}
#visual .layer h2{
  font-size: 35px;
  font-weight: 600;
  color: var(--white);
  line-height: 2;
}
#visual .layer span{
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .34px;
  line-height: 1.5;
  color: var(--white);
}
#visual .layer button{
  position: absolute;
  background-color: var(--pink-point);
  color: var(--white);
  border-radius: 7px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 30px;
  bottom: -50px;
}
#visual .layer button:hover{
transition: .3s ease-in;
background-color: var(--coral-point);
}
.swiper_container .swiper_pagination .swiper-pagination-bullet{
  position: absolute;
  width: 100%;
  height: 1;
  background-color: var(--white);
  opacity: .3;
  margin: 0;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
}
.swiper-pagination-bullet-active{opacity: 1;}
#visual .swiper-wrapper .swiper-slide .img_bg{background-color: #f83c495c; z-index: 999;}
.swiper_pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px; /* 필요 시 조정 */
}

/** visual cate_banner **/
#container{
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-height: auto !important;
}
#container .cate_banner{
  position: relative;
  width: 100%;
}
.cate_banner .cate_banner_icon_area{
  display: flex;
  flex-wrap: wrap;
  padding: 0 12px;
}
.cate_banner .cate_banner_icon_area .icon{
  width: 20%;
  text-align: center;
  vertical-align: top;
  padding: 4px;
  transition: .4s;
}
.cate_banner .cate_banner_icon_area .icon:hover{
  transform: translateY(-5px);
}
.cate_banner .cate_banner_icon_area .icon > a{
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.cate_banner .cate_banner_icon_area .icon .icon_img{
  max-width: 60px;
  margin: 0 auto;
}
.cate_banner .cate_banner_icon_area .icon .icon_img img{width: 100%; vertical-align: top;}
.cate_banner .cate_banner_icon_area .icon .icon_img i{width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; font-size: 20px;}
.cate_banner .cate_banner_icon_area .icon .icon_txt{font-size: 12px;}

/* #container > best_item_wrap */
#container .best_item_wrap{
  margin-top: 50px;
  position: relative;
  width: 100%;
  clear: both;
  margin-bottom: 40px;
}
#container .product_inner{
  width: 100%;
  padding: 0;
}
.main_title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 0 8px;
    padding: 0 16px;
    gap: 0 16px;
}
.main_title h2 {
    display: flex;
    flex-direction: column;
    font-size: 26px;
    color: #000;
    font-weight: 600;
    letter-spacing: -0.5px;
}
.more_btn{
    font-size: 12px;
    line-height: 1em;
    color: #fff;
    font-weight: 300;
    background: var(--Btn_opacity);
    padding: 5px 12px 4px;
    border-radius: 30px;
    color: #888;
    font-weight: bold;
}
#container .product_inner .swiper-container{
  padding: 0 0 24px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
#container .product_inner .swiper-container .product_list{
  width: 100%;
  margin: 0;
  font-size: 0;
  line-height: 0;
  display: flex;
}
#container .product_inner .swiper-container .product_list > li{
  width: auto !important;
  flex-shrink: 0;
}
#container .product_inner .swiper-container .product_list li .thumbnail{
  margin: 8px 0;
  position: relative;
  margin: 8px;
  text-align: center;
  image-rendering: -webkit-optimize-contrast;
  vertical-align: middle;
}
#container .product_inner .swiper-container .product_list li .thumbnail .product_img{
  position: relative;
  width: 100%;
  overflow: hidden;
}
#container .product_inner .swiper-container .product_list li .thumbnail .product_img img{
  vertical-align: middle;
  max-width: 270px;
  object-fit: fill;
  overflow: hidden;
}
#container .product_list .thumbnail .basket{
  position: absolute;
  right: 20px;
  bottom: 15px;
  z-index: 100;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 100%;
  border: 1px solid #e5e5e5;
  transition: 0.3s;
}
#container .product_list .promotion{
  position: absolute;
  top: 10px;
  left: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.desc{
  display: none;
}

/* skin_care_banner */
.skin_care_banner{
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}
.skin_care_banner .img_area{
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  margin-top: 10px;
}
.skin_care_banner .img_area img{
  width: 100%; 
  transition: .4s ease-in;
}
.skin_care_banner .img_area img:hover{
  transform: scale(1.1);
}
.skin_care_banner .txt{
  position: absolute;
  left: 7%;
  top: 72%;
  transform: translateY(-50%);
  color: #111;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
}

/* product_list */
ul.grid3{
  margin: 0;
  font-size: 0;
  line-height: 0;
  width: 100%;
}
ul.grid3 > li#anchor_box{
  width: 33.33%;
  position: relative;
  display: inline-block;
  margin: 0px 0 24px;
  color: #757575;
  vertical-align: top;
  margin-bottom: 30px;
}
ul.grid3 .thumbnail .product_img{
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}
ul.grid3 .thumbnail .product_img img{
  overflow: hidden;
  max-width: 220px;
  transition: .3s ease-in;
}
ul.grid3 .thumbnail .product_img img:hover{
  transform: scale(1.2);
}
.skin_care_content_desc{
  margin: 16px auto 0;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1.5em;
  text-align: left;
  letter-spacing: -.3px;
}
.skin_care_content_desc .name{
  display: block;
  text-align: left;
  font-weight: normal;
  margin: 0 0 4px;
  font-weight: bold;
  color: var(--dim-black);
}
.skin_care_content_desc .xans-redord-sale span{
  color: var(--pink-point);
  font-weight: bold;
  margin-left: 5px;
}
.skin_care_content_desc .xans-redord-sale h4{
  color: var(--black);
  font-weight: bold;
  margin-top: 7px;
  font-size: 15px;
}
.margin_bt{margin-top: 30px;}

/* coupon_banner */
.coupon_banner{
  position: relative;
  width: 100%;
  margin: 6% auto 0;
  padding: 0 16px;
  box-sizing: border-box;
  margin-bottom: 60px;
}
.coupon_banner .coupon_box{
  position: relative;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}
.coupon_banner .coupon_box::before{
  content: "";
  position: absolute;
  top: -18px;
  right: 27%;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 100%;
  border: 4px solid var(--pink-point);
  z-index: 1;
}
.coupon_banner .coupon_box > div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 24px;
}
.coupon_banner .left{
  flex: 3;
  background: #fff;
  border: 4px solid var(--pink-point);
  border-right: 4px dashed var(--pink-point);
}
.coupon_banner .left h3{
  font-size: 24px;
  color: #222; 
  line-height: 1.3em;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.coupon_banner .left p{
  font-size: 14px;
  color: #555;
  font-weight: 400;
  letter-spacing: -0.2px;
}
.coupon_banner .right{
  flex: 1;
  align-items: center;
  background: var(--pink-point);
}
.coupon_banner .right span{
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  animation: blink 0.7s ease-in-out infinite alternate;
}
.coupon_banner .right i{
  font-size: 60px;
  color: var(--white);
}

/* time deal */
#anchor_box .thumbnail .btn_wrap{
  display: flex;
  margin: 10px 0 8px;
}
#anchor_box .thumbnail .btn_wrap .cart_btn{
  color: var(--white);
  font-weight: 500;
  margin: 0 2px 0 0;
  display: block;
  position: relative;
  max-width: 125px;
  width: 100%;
  height: 30px;
  background-color: var(--pink-point);
  margin: 0 0 0 2px;
  border-radius: 30px;
  text-align: center;
  font-size: 15px;
  line-height: 32px;
  cursor: pointer;
}
#anchor_box .thumbnail .btn_wrap .cart_btn:hover,
#anchor_box .thumbnail .btn_wrap .cart_btn:active
{color: var(--white); background-color: var(--yellow);}
#anchor_box .thumbnail .btn_wrap .buy_btn{
  color: var(--white);
  font-weight: 500;
  margin: 0 2px 0 0;
  display: block;
  position: relative;
  max-width: 110px;
  width: 100%;
  height: 30px;
  background-color: var(--dark-gray);
  margin: 0 0 0 5px;
  gap: 10px;
  border-radius: 30px;
  text-align: center;
  font-size: 15px;
  line-height: 32px;
  cursor: pointer;
}
#anchor_box .thumbnail .btn_wrap .buy_btn:hover,
#anchor_box .thumbnail .btn_wrap .buy_btn:active
{color: var(--white);background-color: var(--coral-point);}

/* time_sale */
#container .time_sale{
  margin: 0px 0 0;
  padding: 0 0 0;
  display: none;
}
#container .time_sale .time_sale_content{
  background: var(--pink-point);
  padding: 75px 15px 105px !important;
}
#container .time_sale .title_area{
  padding-bottom: 37px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 30px;
}
#container .time_sale .title_area span{font-size: 14px;}
#container .time_sale .prod_list{width: 100%; margin-left: 0;}
#container .time_sale .anchorBoxId{
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 17px;
  font-size: 0;
  display: inline-block;
  overflow: hidden;
}
#container .time_sale .prod_list_item{
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
}
#container .time_sale .sale_count{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px 20px 0px 0px;
  background: var(--coral-point);
  line-height: 57px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
#container .time_sale .thumbnail{
  position: relative;
  text-align: center;
  overflow: hidden;
}
#container .time_sale .description{
  padding: 25px 25px 25px;
  text-align: left;
  width: 100%;
  margin: 0 auto;
  padding: 18px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
#container .time_sale .description .name{
  position: relative;
  line-height: 1.4;
  word-wrap: break-word;
  margin: 0;
  font-weight: normal;
  display: block;
}
#container .time_sale .description .spec{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* review */
#container .review{padding-bottom: 30px;}
#container .review .swiper_container{
  overflow: hidden;
  height: 760px;
}
#container .review .swiper-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
#container .review .swiper-slide{
  width: 80%;
  max-width: 600px;
  text-align: center;
  transition: transform .2s ease-in-out;
  transform: scale(.9);
}
#container .review .swiper-slide .desc{
  margin-left: 30px;
  width: 90%;
  letter-spacing: -1px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background-color: #ffc5b618;
  padding: 30px;
  border-radius: 20px;
}
#container .review .swiper-slide img{
  border-radius: 20px;
  max-width: 500px;
  height: auto;
}
#container .review .title_area{
  padding-bottom: 37px;
  font-size: 24px;
  color: var(--coral-point);
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 30px;
  padding: 50px 0 0 0;
}
#container .review .title_area > span{
  font-size: 17px;
  color: var(--dark-black);
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0 0 0;
}
#container .review .more_btn{
    display: block;
    align-items: center;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    justify-content: center;
    margin: 0;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    touch-action: manipulation;
    width: auto;
    font-size: 16px;
    font-weight: 700;
    height: 52px;
    line-height: 50px;
    padding: 0;
    border-radius: 10px;
}
#container .review .more_btn:hover{
  box-shadow: var(--coral-point) 0 1px 4px 0;
}
#container .review .desc .icon_wrap{display: flex; color: var(--yellow);}

/* answer */
#container .answer{
  position: relative;
  padding: 50px 30px;
}
#container .answer .title_area{
  padding-bottom: 37px;
  font-size: 24px;
  color: var(--orange-point);
  text-align: center;
  line-height: 1.2;
  font-weight: 600;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 30px;
  padding: 10px 25px 30px 6px;
}
#container .answer .title_area > span{
  font-size: 17px;
  color: var(--dark-black);
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0 0 0;
}
#container .answer .content{
  line-height: 2.6;
  display: none;
  padding: 20px;
  transition: all 0.3s ease;
  font-weight: 400;
  color: var(--dim-black);
}
#container .answer .toggle > div > .content::before {
  content: 'Answer.  "유노이아의 정성스런 답변입니다." ';
  font-weight: 600;
  font-size: 18px;
  color: var(--orange-point);
}
#container .answer .toggle.active .content{
  display: block;
}
#container .answer .btn{
  position: absolute;
  right: 20px;
  top: 0;
  color: var(--dark-gray);
  cursor: pointer;
  transition: transform 0.3s ease;
}
#container .answer .toggle.active .btn i{
  transform: rotate(180deg); /* 아이콘 회전 */
}
#container .answer .toggle{
  position: relative;
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
}
#container .answer .toggle > div > .title > a{
  font-size: 15px; 
  line-height: 3;
  margin-left: 20px;
  font-weight: 600;
  color: var(--dark-black);
}
#container .answer .toggle > div{
  position: relative;
  display: block;
  border-bottom: 1px solid #ddd;
  line-height: 4;
}
#container .answer .toggle > div > .title > a::before {
  content: 'Q.  ';
  font-weight: 600;
  font-size: 18px;
  line-height: 4;
  color: var(--orange-point);
}

/* footer */
#footer{
    position: relative;
    margin: 7% 0 0;
    background: #fff;
    color: #000;
    border-top: 1px solid var(--main_border);
    padding-top: 16px;
    box-sizing: border-box;
}
#footer .inner{
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
#footer .inner .footer_tit{
  color: var(--pink-point);
  font-size: 20px;
  font-weight: bold;
  padding: 0 16px;
  box-sizing: border-box;
}
#footer .footer01, .footer03{
  margin: 16px 0;
  padding: 0 16px;
  box-sizing: border-box;
}
#footer .footer01 .tel{
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
}
#footer .footer02 .footer_info{
  margin: 16px 0;
  box-sizing: border-box;
}
#footer .footer02 .footer_info #acco{
  position: relative;
  width: 100%;
  margin: 0px auto;
}
#footer .footer02 .footer_info #acco h3{
  font-size: 20px;
  font-weight: 500;
  padding: 0px 16px 10px;
  cursor: pointer;
}
#footer .footer02 .footer_info #acco .info {
  text-decoration: none;
  padding: 0 16px;
  transition: easy-in 0.15s;
}
#footer .footer02 .footer_info #acco .info span{
  padding-right: 10px;
  font-size: 13px;
  line-height: 1.8em;
  font-weight: 500;
}
#footer .footer03 {
  border-top: 1px solid var(--dim-gray);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul.utilMenu{
  display: flex;
  flex-wrap: wrap;
  margin: 16px 0 0;
}
ul.utilMenu li{
  padding-right: 16px;
  font-size: 13px;
  line-height: 1.8em;
  font-weight: 600;
}
.fa-bell{
  color: var(--coral-point);
  font-size: 22px;
  position: absolute;
  left: 170px;
  top: 3PX;
  animation: motion 0.2s linear 0s infinite alternate;
}

@keyframes motion{
  0%{margin-top: -2px;}
  100%{margin-top: 5px;}
}
@keyframes blink{
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes blink_i{
0%{opacity: 1;}
50%{opacity: 0;}
100%{opacity: 1;}
}

/**************************************/
/**************** 💡 sub_container 01 [로그인] */
#sub_container{margin-top: 130px; padding: 30px;}
.login_box_wrap{margin: 0 auto; min-height: 70vh;}
.login_box .login_top{text-align: center;}
.login_box .login_top .logo{margin: 20px 0;}
.login_box .login_top .logo img{width: auto; max-height: 40px;}
.login_box .sns_box{text-align: center;}
.login_box .sns_box .sns_login{
  margin: 10px 0 30px;
  padding: 0;
}

.login_box .sns_box{position: relative;}
.log_contents .member_login .formBox{position: relative;}
.login_box .sns_box .sns_login .kakao_btn{
  background-color: var(--color-kakao);
  background-image: url(../image/sns_kakao_talk.svg);
  background-size: auto 14px;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 48px;
  line-height: 46px;
  padding: 0 10px;
  margin: 0 0 15px;
  font-size: var(--db-font-size-14);
  font-weight: 500;
  text-align: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: auto 18px;
  border-radius: 5px;
}
.sns_box .desc{width: 100%; color: #999; display: block; line-height: 2;}


/* login_tab */
.login_box .login_tab ul{margin: 0 0 20px;}
.login_box .login_tab ul li{float: left; width: 50%;}
.login_box .login_tab ul li:nth-child(1) a{
    border-radius: 5px 0 0 5px;
}
.login_box .login_tab ul li._active a{
    border: 1px solid #000;
    color: #000;
    font-weight: 500;
    cursor: pointer;
  }
  .login_box .login_tab ul li a{
    display: block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-bottom: 15px;
    color: #ccc;
    font-size: var(--db-font-size-13);
    border: 1px solid var(--color-border);
}
fieldset{margin: 0; padding: 0;}
.login_box .tab_cont._active{display: block;}
.login_box .tab_cont{display: none;}

.login_box .member_login .formBox{position: relative;}
.login_box .member_login .formBox .form label{
    display: none;
    font-size: var(--db-font-size-13);
    font-weight: 500;
    margin: 0 7px 0 0;
    min-height: 20px;
    line-height: 20px;
    font-size: 13px;
    vertical-align: middle;
    cursor: pointer;
  }
.login_box .member_login .formBox .form input{
  margin: 10px 0;
  outline: none;
}
.login_box .member_login .formBox .form input::placeholder{
  color: var(--dark-gray);
  font-size: 14px;
}
.login_box .member_login .formBox .option{
    overflow: hidden;
    line-height: 43px;
    font-size: var(--db-font-size-12);
    margin: 0 0 0.8rem;
}
.no_member_checkout{margin: 10px 0 0;}
.displaynone{display: none !important;}
.login_box .member_login .formBox .form input[type="text"]{margin: 0 0 5px;}
.login_box .member_login .formBox .form input[type="text"], 
.login_box .member_login .formBox .form input[type="password"]{
    width: 100%;
    height: 45px;
    font-size: 20px;
    padding: 2px 10px;
    border: 1px solid var(--dark-gray);
    border-radius: 5px;
}
.member_login .formBox .option{
    overflow: hidden;
    line-height: 43px;
    font-size: 18px;
    margin: 0 0 5px;
    vertical-align: middle;
}
.member_login .formBox .option em{margin-left: 3px;}
.member_login .formBox .option .ssl img{
    width: 14px;
    margin: 0 3px 0 0;
    vertical-align: middle;
}
/* placeholder 기본 색상 유지 */
.login_box .member_login .formBox .form input::placeholder {
  color: var(--dark-gray);
  font-size: 14px;
  transition: color 0.3s ease;
}
/* 포커스 시 placeholder 투명 처리 */
.login_box .member_login .formBox .form input:focus::placeholder {
  color: transparent;
}
.formBox .btn_log a{
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0;
    text-align: center;
    background-color: var(--blue-point);
    color: var(--white);
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 10px;
}
.formBox .btn_join a{
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0;
    text-align: center;
    background-color: var(--white);
    border: 1px solid var(--dim-black);
    border-radius: 5px;
    font-weight: 600;
}
.formBox .login_find a{
  display: block;
    font-size: 0;
    line-height: 0;
    margin: 15px 0;
    overflow: hidden;
    text-align: center;
}
.formBox .login_find{display: flex; justify-content: center; align-items: center;}
.formBox .login_find a, .formBox .login_find span{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1;
    color: #999;
    margin: 10px 5px;
}
.snsLogin .btnNaver{
  display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0;
    text-align: center;
    background-color: var(--green-point);
    background-image: url(../image/sns_naver_wh.svg);
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: auto 18px;
    color: var(--white);
    border-radius: 5px;
    font-weight: 600;
    margin-top: 40px;
}
.snsLogin .btnFacebook{
  display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0;
    text-align: center;
    background-color: var(--white);
    border: 1px solid var(--blue-point);
    background-image: url(../image/sns_facebook.svg);
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: auto 18px;
    color: var(--blue-point);
    border-radius: 5px;
    font-weight: 600;
    margin-top: 10px;
}
.snsLogin .btnGoogle{
  display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0;
    text-align: center;
    border: 1px solid var(--orangeDark-point);
    background-image: url(../image/sns_google.svg);
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: auto 18px;
    color: var(--orangeDark-point);
    border-radius: 5px;
    font-weight: 600;
    margin-top: 10px;
}
.snsLogin .btnApple{
  display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0;
    text-align: center;
    border: 1px solid var(--black);
    background-image: url(../image/sns_apple.svg);
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: auto 18px;
    color: var(--black);
    border-radius: 5px;
    font-weight: 600;
    margin-top: 10px;
}
.formBox a:hover{opacity: .8;}

/* sub_page left_wrap */
#left_wrap .piece{
  min-width: 450px;
  padding: 0 0 2rem;
  text-align: center;
}
#left_wrap .piece .piece_content{
  width: 25%;
  display: flex;
  justify-content: space-around;
}
#left_wrap .piece .banner_item{
  display: inline-block;
  vertical-align: top;
  margin: 0.7rem 0;
}
#left_wrap .piece .banner_item a{
  display: block;
  margin: 0 10px 0 0;
}
#left_wrap .piece .banner_item a img{
  width: 100px;
  height: 100px;
  height: auto;
  border: none;
  border-radius: 50%;
}
#left_wrap .piece .banner_item a span{
  display: block;
  font-size: 14px;
  line-height: 1.2em;
  margin: 0.5rem 0 0;
  font-weight: 500;
}
#left_wrap .hashtag{
  text-align: left;
  padding: 0;
}
#left_wrap .hashtag h2.hashtag_banner{
  color: var(--coral-point);
  font-size: 30px;
  line-height: 1.2em;
  font-weight: 400;
  margin: 0 0 15px;
  letter-spacing: 0.03em;
}
#left_wrap .hashtag div.hashtag_banner{
  display: inline-block;
  vertical-align: top;
  margin: 10px 5px 0 0;
}
#left_wrap .hashtag div.hashtag_banner a{
  transition: .4s ease-in-out;
  display: block;
  font-size: var(--db-font-size-14);
  line-height: 1em;
  color: #000;
  border-radius: 20px;
  padding: 0.6em 0.8em 0.4em;
  vertical-align: middle;
}
#left_wrap .hashtag div.hashtag_banner a:hover{
  background-color: var(--coral-point);
  color: var(--white);
}


/**************************************/
/**************** 💡 sub_container 02 [검색창] */

/* sub_search_wrap */
#search_wrap .search_inner .cboth{
  position: relative;
  border-bottom: 1px solid #ededed;
  clear: both;
}
#search_wrap .search_inner .cboth::before{
  content: " ";
  display: block;
  clear: both;
}
#search_wrap .search_inner .cboth .search_close{
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  z-index: 100;
  padding-left: 4%;
  cursor: pointer;
}
#search_wrap .search_inner .cboth .search_close i{
  font-size: 20px;
  margin-top: 5px;
  color: var(--dim-black);
}
#search_wrap .search_inner .cboth .search_form{
  padding: 8px 80px 8px 56px;
}
#search_wrap .search_inner fieldset{position: relative;}
#search_wrap .search_inner fieldset #keyword{
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  padding-left: 20px;
  border-radius: 8px;
  background-color: #f5f5f5;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #9a9a9a;
  outline: none;
}
#search_wrap .search_inner .btn_del{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  text-indent: 100%;
  font-size: 0;
  white-space: nowrap;
  background: url(/image/delate_search01.svg) no-repeat 0 0; 
  background-size: 24px 24px;
}
#search_wrap .search_inner .btn_sear{
  top: 50%;
  transform: translateY(-50%);
  right: -64px;
  position: absolute;
  font-size: 16px;  
  transition: .4s ease-in-out;
}
#search_wrap .search_inner .btn_sear:hover{
  font-weight: bold;
  color: var(--pink-point);
}
#search_wrap input::placeholder {
  transition: opacity 0.3s ease;
  opacity: 1;
}
/* 클릭(포커스),글자 입력 시, placeholder 숨김 */
#search_wrap input:focus::placeholder,
#search_wrap input:not(:placeholder-shown)::placeholder{opacity: 0;}

/* recomm_keyword02 [추천 키워드] */
.recomm_keyword02{
  height: 150px;
  border-bottom: 1px solid #ededed;
}
.recomm_keyword02 .title, .search_recent .title, .recomm_pop .title{
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  color: var(--black);
  padding-right: 16px;
  padding: 30px 0 16px 10px;
}
.recomm_keyword02 .swiper-recomm-word{padding: 20px 0 2px 30px;}
.recomm_keyword02 .swiper-wrapper{
  margin-top: 10px;
  position: relative;
  transition-property: transform;
}
.recomm_keyword02 .swiper-wrapper li{text-align: center;}
.recomm_keyword02 .swiper-recomm-word .swiper-slide{max-width: 130px;}

/* search_recent [최근 본 상품] : 장바구니 담기 기능 X */
.search_recent{position: relative;}
.search_recent .title a{
  justify-content: end;
  font-size: 13px;
  font-weight: 400;
  color: #9a9a9a;
  line-height: 16px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.search_recent_inner i{
  color: var(--light-black);
  font-size: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.search_recent_inner p{
  color: var(--light-black);
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

/* recomm_pop [인기 검색어] */
#sub_container .recomm_pop{
  margin: 0px 0 88px 0;
}
#sub_container .recomm_pop .recomm_pop_sub{
  padding: 8px 0 0;
  margin: 0 -8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
#sub_container .recomm_pop .recomm_pop_sub a{
  width: 270px;
  margin: 0px 8px;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  font-weight: 400;
  font-size: 18px;
  line-height: 48px;
  color: #1a1a1a;
  border-bottom: 1px solid #ededed;
}
#sub_container .recomm_pop .recomm_pop_sub a span{
  margin-right: 4px;
  color: #1a1a1a;
  font-weight: 700;
  width: 20px;
  text-align: center;
  margin-left: 20px;
}
#sub_container .recomm_pop .recomm_pop_sub p{
  margin-left: 20px;
}
#sub_container .recomm_pop .recomm_pop_sub a:nth-child(1) span, #sub_container .recomm_pop .recomm_pop_sub a:nth-child(2) span, #sub_container .recomm_pop .recomm_pop_sub a:nth-child(3) span{color: var(--coral-point);}


/********** popup */
#main .modal-open {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: none;
}
#main .popup_layer {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.popup_wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(129, 129, 129, 0.4);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup_layer{
  background: #fff;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
}
.popup_box{
  padding: 20px;
}
.slider{
  overflow: hidden;
  width: 100%;
  height: auto;
}
.slide-track{
  display: flex;
  transition: transform 0.5s ease;
}
.slide{
  min-width: 100%;
  box-sizing: border-box;
}
.slide img{
  width: 100%;
  border-radius: 8px;
}
.popup_footer{
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
.popup_footer button{
  transition: .4s ease-in-out;
  display: inline-block;
  padding: 15px 20px;
  margin-left: 4px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--dark-gray);
  font-size: 20px;
  text-align: center;
}
.popup_footer button:hover{font-weight: bold;color: var(--dark-gray);}