@charset "UTF-8";
:root {
  --color-gray1: #fafafa;
  --color-gray2: #f2f2f2;
  --color-gray3: #eaeaee;
  --color-gray4: #bfbec7;
  --color-gray5: #85838f;
  --color-d-gray: #85838f;
  --color-main: #87090a;
  --color-pink: #fff2f2;
  --color-serve: #fffcf4;
  --color-black: #1c1c1c;
}

/*--------- 메인 ---------- */
.main .banner {
  margin-top: 30px;
  padding: 16px 20px;
  border-radius: 14px;
  background-color: var(--color-black);
}
.main .banner p {
  position: relative;
  padding-left: 28px;
  color: #fff;
}
.main .banner p::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_Exclude.png") no-repeat center/cover;
}
.main .banner p::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_prev_white_18px.png") no-repeat center/cover;
}
.main .taste_note {
  margin-top: 30px;
}
.main .recommend {
  margin-top: 30px;
}
.main .recent {
  margin-top: 30px;
}

/*--------- 공통 ---------- */
/* css 초기화 */
* {
  margin: 0;
  padding: 0;
}

body {
  max-width: 576px;
  margin: 0 auto !important;
  font-family: "Pretendard" !important;
}

ul,
li,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none !important;
  color: inherit;
}

p {
  margin: 0;
  color: #1c1c1c;
}

em {
  font-style: normal;
}

.sub_title {
  position: relative;
  padding-left: 30px;
  margin-left: 20px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
}
.sub_title.star::before {
  content: "";
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_star_color_24px.png") no-repeat center/cover;
}
.sub_title.wine::before {
  content: "";
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_wine_24px.png") no-repeat center/cover;
}

/* css 초기화 */
/* 레이아웃 */
.contents {
  position: relative;
}

.inner {
  position: relative;
  max-width: 576px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.position_center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.position_center .inner .img_con {
  margin-bottom: 10px;
  text-align: center;
}
.position_center .inner .txt_con {
  text-align: center;
}
.position_center .inner .txt_con .txt01 {
  margin-bottom: 10px;
}
.position_center .inner .txt_con .txt02 {
  color: var(--color-gray4);
}

.fixed_menu {
  position: fixed;
  width: 70px;
  height: 70px;
  right: 20px;
  bottom: 100px;
  border-radius: 50%;
  z-index: 99;
}
.fixed_menu img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.col-3 .btn {
  width: 100%;
}

.bg_gray1 {
  background-color: var(--color-gray1);
}

.non_data .img_con {
  text-align: center;
}
.non_data .img_con .non_img {
  width: 150px;
}
.non_data .img_con .txt {
  font-size: 14px;
  font-weight: 500;
}

.btn_style01 {
  width: 100%;
}
.btn_style01 .link_arr {
  position: relative;
  display: block;
  text-align: left;
}
.btn_style01 .link_arr::after {
  content: "\f105";
  position: absolute;
  display: block;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
}

/* 레이아웃 */
.height_100 {
  height: 100vh;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-115 {
  padding-top: 115px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

/* font size */
.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 14px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-24 {
  font-size: 24px;
}

.text1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.text2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 480px) {
  p {
    font-size: 0.9rem;
  }
  .sub_title {
    font-size: 1rem;
  }
  .fs-12 {
    font-size: 0.6rem;
  }
  .fs-14 {
    font-size: 0.7rem;
  }
  .fs-16 {
    font-size: 0.8rem;
  }
  .fs-18 {
    font-size: 0.9rem;
  }
  .fs-20 {
    font-size: 1rem;
  }
  .fs-24 {
    font-size: 1.1rem;
  }
  .fs-6 {
    font-size: 0.8rem !important;
  }
}
/*--------- 폰트 ---------- */
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url("../fonts/Pretendard-Black.woff2") format("woff2"), url("./woff/Pretendard-Black.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("../fonts/Pretendard-ExtraBold.woff2") format("woff2"), url("./woff/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("../fonts/Pretendard-Bold.woff2") format("woff2"), url("./woff/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("../fonts/Pretendard-SemiBold.woff2") format("woff2"), url("./woff/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("../fonts/Pretendard-Medium.woff2") format("woff2"), url("./woff/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("../fonts/Pretendard-Regular.woff2") format("woff2"), url("./woff/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"), url("../fonts/Pretendard-Light.woff2") format("woff2"), url("./woff/Pretendard-Light.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"), url("../fonts/Pretendard-ExtraLight.woff2") format("woff2"), url("./woff/Pretendard-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"), url("../fonts/Pretendard-Thin.woff2") format("woff2"), url("./woff/Pretendard-Thin.woff") format("woff");
}
/*--------- 로그인 ---------- */
.login {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../img/img_login.jpg") no-repeat center/cover;
}
.login::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}
.login .logo_img {
  position: absolute;
  top: calc(50% - 300px);
  left: 50%;
  transform: translateX(-50%);
}
.login .inner {
  height: 100%;
}
.login .inner .login_btn_con {
  position: absolute;
  width: 100%;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 20px;
}
.login .inner .login_btn_con .btn {
  width: 100%;
  margin-bottom: 10px;
}
.login .inner .login_btn_con .login_white {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.login .inner .login_btn_con .login_black {
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.61);
}
.login .inner .login_btn_con .second {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
  padding: 8px 10px;
  border-radius: 20px;
  background-color: var(--color-black);
}
.login .inner .login_btn_con .second::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 10px 0px 10px;
  border-color: var(--color-black) transparent transparent transparent;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
}
.login .inner .login_btn_con .second p {
  color: #fff;
  margin: 0;
}
.login .inner .login_btn_con .sns_link {
  gap: 20px;
  margin-top: 16px;
  padding-left: 0;
}
.login .inner .login_btn_con .sns_link .link {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.login .inner .login_btn_con .sns_link .link.google {
  background-color: #fff;
}
.login .inner .login_btn_con .sns_link .link.apple {
  background-color: var(--color-black);
}
.login .inner .login_btn_con .sns_link .link img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login_email .inner {
  width: 100%;
}
.login_email .inner .logo_con {
  margin-bottom: 80px;
  text-align: center;
}
.login_email .inner .login_input input {
  position: relative;
  padding-left: 45px;
}
.login_email .inner .login_input input::placeholder {
  color: #bfbec7;
}
.login_email .inner .login_input .id_input {
  background: url("../img/icon/ico_email24px.png") no-repeat;
  background-size: 24px;
  background-position: 18px center;
}
.login_email .inner .login_input .pw_input {
  background: url("../img/icon/ico_pw_24px.png") no-repeat;
  background-size: 24px;
  background-position: 18px center;
}
.login_email .inner .form-check {
  margin: 20px 0 66px;
}
.login_email .inner .find_account {
  display: block;
  margin-top: 30px;
  text-align: center;
}
.login_email .not_member {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 162px;
  margin: 0 auto;
  padding: 7px 0;
  border: 1px solid #bfbec7;
  border-radius: 100px;
  text-align: center;
}
.login_email .not_member a {
  position: relative;
  display: inline-block;
  padding-left: 15px;
  font-size: 12px;
  color: #85838f !important;
}
.login_email .not_member a::before {
  content: "";
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_men_14px.png") no-repeat center/cover;
}

/*--------- 회원가입 ---------- */
.membership .member_txt {
  margin-bottom: 40px;
}
.membership.step01 .agree_all {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: #f2f2f2;
}
.membership.step01 .agree_all .form-check .form-check-input[type=checkbox] + .form-check-label::before {
  width: 30px;
  height: 30px;
}
.membership.step01 .agree_all .form-check .form-check-input[type=checkbox]:checked + .form-check-label::before {
  width: 30px;
  height: 30px;
}
.membership.step01 .check_con .list {
  margin-bottom: 5px;
}
.membership.step01 .check_con .list .form-check .form-check-label span {
  color: var(--color-main);
}
.membership.step01 .check_con .list .popup {
  width: 20px;
  height: 20px;
}
.membership.step02 .col-9 {
  flex-shrink: 1;
}
.membership.step03 .input_con .list {
  margin-bottom: 40px;
}
.membership.step03 .input_con .g-3 .d-flex {
  gap: 10px;
}
.membership.step03 .input_con .g-3 .d-flex .certi {
  width: 100%;
}

/*--------- 아이디 찾기 ---------- */
.find_id .tab_con {
  margin-bottom: 30px;
}

/*--------- 비밀번호 찾기 ---------- */
.find_pw .tab_con {
  margin-bottom: 30px;
}

/*--------- 새 비밀번호 ---------- */
.new_pw .member_txt {
  margin-top: 30px;
}
.new_pw .input_con .list {
  margin-bottom: 10px;
}

/*--------- 아이디 찾기 성공 ---------- */
.find_id_success .position_center .txt_con .list_con {
  max-width: 390px;
  margin: 50px auto 0;
  text-align: left;
}
.find_id_success .position_center .txt_con .list_con .list {
  max-width: 330px;
  margin: 0 auto;
}
.find_id_success .position_center .txt_con .list_con .list .txt03 {
  width: 100px;
  margin-bottom: 20px;
  color: var(--color-d-gray);
}
/*--------- 검색 ---------- */
.recent_search {
  margin-top: 10px;
}
.recent_search .inner .words {
  color: var(--color-gray5);
}
.recent_search .inner .close {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray5);
}
.recent_search .inner .close::before {
  content: "";
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  background: url("../img/icon/ico_search_close.svg") no-repeat center/cover;
}
.recent_search .inner .words_con .list {
  border-bottom: 1px solid var(--color-gray3);
}
.recent_search .inner .words_con .list a {
  padding: 25px 0;
}
.recent_search .recent_inner .words_con .list {
  border-bottom: 1px solid var(--color-gray3);
}
.recent_search .recent_inner .words_con .list a {
  padding: 25px 0;
}
.recent_search.none {
  height: 100%;
}
.recent_search.none .img_con {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*--------- 와인정보 ---------- */
.wine_info {
  position: relative;
}
.wine_info .filter_btn {
  position: absolute;
  top: 0;
  right: 20px;
  border: none;
  z-index: 2;
}
.wine_info .select_con {
  position: relative;
  margin-top: 10px;
  padding-right: 50px;
}
.wine_info .wine_list {
  margin-top: 10px;
}
.wine_info .wine_list .inner {
  padding: 3px 20px;
}
.wine_info .wine_list .inner .sum {
  color: var(--color-gray5);
}
.wine_info .wine_list .inner .filter {
  gap: 10px;
}
.wine_info .wine_list .list_item {
  margin-top: 10px;
}

/*--------- 와인상세정보 ---------- */
.wine_detail .wine_img {
  position: relative;
}
.wine_detail .wine_img::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.wine_detail .wine_img .thumb {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.wine_detail .wine_img .side_menu {
  position: absolute;
  bottom: 30px;
  right: 20px;
}
.wine_detail .wine_img .side_menu .menu {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 50%;
}
.wine_detail .wine_img .side_menu .menu .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
}
.wine_detail .wine_img .side_menu .menu .btn .add_cart {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/icon/ico_empty_heart.png") no-repeat center/cover;
}
.wine_detail .wine_img .side_menu .menu .btn.active .add_cart {
  background: url("../img/icon/ico_full_heart.png") no-repeat center/cover;
}
.wine_detail .wine_img .side_menu .menu .btn.active .save {
  background: url("../img/icon/ico_wine_plus_on_30px.png") no-repeat center/cover;
}
.wine_detail .wine_img .side_menu .menu .btn .save {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/icon/ico_wine_plus_30px.png") no-repeat center/cover;
}
.wine_detail .wine_img .side_menu .menu:last-child {
  margin-bottom: 0;
}
.wine_detail .wine_img .side_menu .menu img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wine_detail .name_con {
  margin-top: 20px;
}
.wine_detail .name_con .txt_con .cate {
  color: var(--color-main);
}
.wine_detail .name_con .txt_con .eng_name {
  color: var(--color-gray5);
}
.wine_detail .name_con .rating_con {
  gap: 10px;
  margin-top: 20px;
}
.wine_detail .name_con .rating_con .rating {
  position: relative;
  padding-left: 20px;
}
.wine_detail .name_con .rating_con .rating::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_star_20px.png") no-repeat center/cover;
}
.wine_detail .name_con .rating_con .review {
  position: relative;
  padding-left: 20px;
}
.wine_detail .name_con .rating_con .review::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_review.png") no-repeat center/cover;
}
.wine_detail .feature {
  margin-top: 30px;
}
.wine_detail .feature .inner .vintage .vintage_con {
  margin-top: 10px;
  gap: 10px;
  flex-wrap: nowrap;
}
.wine_detail .feature .inner .vintage .vintage_con .year {
  padding: 5px 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 100px;
  flex-shrink: 0;
}
.wine_detail .feature .note {
  margin-top: 30px;
}
.wine_detail .feature .note .btn.gray {
  position: relative;
  width: 100%;
}
.wine_detail .feature .note .btn.gray span {
  position: relative;
  display: inline-block;
}
.wine_detail .feature .note .btn.gray span::after {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  background: url("../img/icon/ico_prev_gray_18px.png") no-repeat center/cover;
}
.wine_detail .similar {
  margin-top: 30px;
}
.wine_detail .similar .list_item {
  margin-top: 15px;
}
.wine_detail .btn_con {
  position: fixed;
}
.wine_detail .btn_con .inner {
  gap: 14px;
}
.wine_detail .btn_con .inner .gray {
  position: relative;
  width: 60px;
  height: 60px;
  background-color: var(--color-gray2) !important;
  border: 1px solid var(--color-gray3) !important;
}
.wine_detail .btn_con .inner .gray img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wine_detail .btn_con .inner .review {
  flex-grow: 1;
}

@media (max-width: 480px) {
  .wine_detail .feature .inner .vintage .vintage_con .year {
    font-size: 0.9rem;
  }
  .wine_detail .btn_con {
    position: fixed;
  }
  .wine_detail .btn_con .inner .gray {
    width: 45px;
    height: 45px;
  }
  .wine_detail .btn_con .inner .review {
    padding-block: 10px;
  }
}
/*--------- 와인테이스팅 ---------- */
.wine_tasting .filter_con {
  margin: 20px 0;
}
.wine_tasting .list_item_sty01 .img_con img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*--------- 와인리스트 ---------- */
.wine_list .sub_tit {
  margin-bottom: 10px;
}
.wine_list .count_box .list_con {
  padding: 20px 0;
  border: 1px solid var(--color-gray3);
  border-radius: 10px;
  background-color: var(--color-gray1);
}
.wine_list .count_box .list_con .list {
  position: relative;
  width: 33.3333333333%;
  padding-top: 20px;
  text-align: center;
}
.wine_list .count_box .list_con .list::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.wine_list .count_box .list_con .list::after {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 30px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: var(--color-gray3);
}
.wine_list .count_box .list_con .list:last-child::after {
  display: none;
}
.wine_list .count_box .list_con .list .tit {
  color: var(--color-gray5);
}
.wine_list .count_box .list_con .list.cart::before {
  background: url("../img/icon/ico_full_heart.png") no-repeat center/cover;
}
.wine_list .count_box .list_con .list.save::before {
  background: url("../img/icon/ico_wine_red_20px.png") no-repeat center/cover;
}
.wine_list .count_box .list_con .list.review::before {
  background: url("../img/icon/ico_note_24px.png") no-repeat center/cover;
}
.wine_list .recent_view {
  margin-top: 30px;
}
.wine_list .recent_review {
  margin-top: 30px;
}

/*--------- 셀러정보 찜한와인 ---------- */
.cellar_info_cart .sum_con {
  margin: 20px 0;
  padding: 13px 24px;
  background-color: var(--color-gray1);
  text-align: center;
}
.cellar_info_cart .sum_con P .point {
  color: var(--color-main);
}
.cellar_info_cart.none {
  height: 100vh;
}
.cellar_info_cart.none .list_item_info {
  position: relative;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cellar_info_cart.none .list_item_info .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.cellar_info_cart.none .list_item_info .box p {
  margin-top: 10px;
  color: var(--color-gray5);
}

/*--------- 셀러정보 보관와인 ---------- */
.cellar_info_save .sum_con {
  margin: 20px 0;
  padding: 13px 24px;
  background-color: var(--color-gray1);
  text-align: center;
}
.cellar_info_save .sum_con P .point {
  color: var(--color-main);
}
.cellar_info_save.none {
  height: 100vh;
}
.cellar_info_save.none .list_item_info {
  position: relative;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cellar_info_save.none .list_item_info .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.cellar_info_save.none .list_item_info .box p {
  margin-top: 10px;
  color: var(--color-gray5);
}

/*--------- 셀러정보 리뷰와인 ---------- */
.cellar_info_review .sum_con {
  margin: 20px 0;
  padding: 13px 24px;
  background-color: var(--color-gray1);
  text-align: center;
}
.cellar_info_review .sum_con P .point {
  color: var(--color-main);
}
.cellar_info_review.none {
  height: 100vh;
}
.cellar_info_review.none .list_item_info {
  position: relative;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cellar_info_review.none .list_item_info .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.cellar_info_review.none .list_item_info .box p {
  margin-top: 10px;
  color: var(--color-gray5);
}

/*--------- 테이스팅노트작성 ---------- */
.wine_note .wine_img {
  position: relative;
  height: 470px;
  background-color: bisque;
}
.wine_note .wine_img .fixed_menu {
  position: absolute;
  bottom: 30px;
  right: 20px;
}
.wine_note .wine_img .fixed_menu .menu {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 50%;
}
.wine_note .wine_img .fixed_menu .menu:last-child {
  margin-bottom: 0;
}
.wine_note .wine_img .fixed_menu .menu img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wine_note .follower_con {
  padding: 13px 0;
  border-bottom: 1px solid var(--color-gray3);
}
.wine_note .follower_con .writer_con .name {
  color: var(--color-gray5);
}
.wine_note .follower_con .writer_con .follower {
  color: var(--color-main);
}
.wine_note .follower_con .date {
  color: var(--color-gray5);
}
.wine_note .name_con {
  margin-top: 20px;
  gap: 20px;
  justify-content: space-between;
}
.wine_note .name_con .txt_con .cate {
  color: var(--color-main);
}
.wine_note .name_con .txt_con .eng_name {
  color: var(--color-gray5);
}
.wine_note .name_con .txt_con .info_con {
  margin-top: 10px;
}
.wine_note .name_con .txt_con .info_con .list .tit {
  width: 60px;
  color: var(--color-gray5);
}
.wine_note .name_con .txt_con .info_con .list .rating {
  position: relative;
  padding-left: 20px;
}
.wine_note .name_con .txt_con .info_con .list .rating::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("../img/icon/ico_star_20px.png") no-repeat center/cover;
}
.wine_note .name_con .img_con {
  width: 140px;
  height: 190px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.wine_note .name_con .img_con img {
  width: 140px;
  height: 190px;
  object-fit: contain;
}
.wine_note .banner {
  margin-top: 30px;
  padding: 16px 20px;
  border-radius: 14px;
  background-color: var(--color-black);
}
.wine_note .banner p {
  position: relative;
  padding-left: 28px;
  color: #fff;
}
.wine_note .banner p::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_wine_white_20px.png") no-repeat center/cover;
}
.wine_note .banner p::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_prev_white_18px.png") no-repeat center/cover;
}
.wine_note .comment_con .my_comment_con {
  margin-top: 30px;
  border-bottom: 1px solid var(--color-gray4);
}
.wine_note .comment_con .my_comment_con .my_comment .thumb {
  margin-bottom: 10px;
}
.wine_note .comment_con .my_comment_con .my_comment .thumb .my {
  position: relative;
  padding-left: 18px;
}
.wine_note .comment_con .my_comment_con .my_comment .thumb .my::before {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  top: 0;
  left: 0;
  background: url("../img/icon/ico_men_18px.png") no-repeat center/cover;
}
.wine_note .comment_con .my_comment_con .my_comment .comment_txt {
  margin-bottom: 20px;
}
.wine_note .comment_con .my_comment_con .my_comment .img_con {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-gray4);
  gap: 15px;
}
.wine_note .comment_con .my_comment_con .my_comment .img_con .list {
  position: relative;
  width: calc(33.3333333333% - 10px);
  border-radius: 10px;
  overflow: hidden;
}
.wine_note .comment_con .my_comment_con .my_comment .img_con .list::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.wine_note .comment_con .my_comment_con .my_comment .img_con .list img {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.wine_note .comment_con .my_comment_con .my_comment .img_con .list.blur {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.3333333333% - 23px);
  right: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
.wine_note .comment_con .my_comment_con .my_comment .img_con .list.blur span {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}
.wine_note .comment_con .my_comment_con .my_comment .num_con {
  margin-top: 15px;
  padding-bottom: 15px;
  gap: 30px;
}
.wine_note .comment_con .my_comment_con .my_comment .num_con .list p {
  position: relative;
  padding-left: 35px;
  color: var(--color-gray5);
}
.wine_note .comment_con .my_comment_con .my_comment .num_con .list p::before {
  content: "";
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
}
.wine_note .comment_con .my_comment_con .my_comment .num_con .list .mark_num::before {
  background: url("../img/icon/ico_gray_mark.png") no-repeat center/cover;
}
.wine_note .comment_con .my_comment_con .my_comment .num_con .list .review_num::before {
  background: url("../img/icon/ico_talk_gray_30px.png") no-repeat center/cover;
}

.tasting_note_write .wine_img {
  position: relative;
  width: calc(100% - 120px);
  border-radius: 20px;
  margin: 0 auto;
  overflow: hidden;
}
.tasting_note_write .wine_img::before {
  content: "";
  display: block;
  padding-bottom: 140%;
  overflow: hidden;
}
.tasting_note_write .wine_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.tasting_note_write .made_in {
  margin-top: 5px;
  background-color: var(--color-gray1);
}
.tasting_note_write .made_in .make_con .list {
  margin-bottom: 10px;
}
.tasting_note_write .made_in .make_con .list .tit {
  width: 90px;
  margin-right: 20px;
  color: var(--color-gray5);
}
.tasting_note_write .name_con {
  margin-top: 5px;
}
.tasting_note_write .name_con .txt_con .cate {
  color: var(--color-main);
}
.tasting_note_write .name_con .txt_con .eng_name {
  color: var(--color-gray5);
}
.tasting_note_write .btn_box {
  margin-block: 20px 30px;
}

.tasting_note_write_step01 .search_con {
  display: flex;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--color-gray3);
  border-radius: 100px;
  background-color: var(--color-gray1);
}
.tasting_note_write_step01 .search_con button {
  margin-right: 6px;
  border: none;
  background: none;
}
.tasting_note_write_step01 .search_con .search {
  width: 100%;
  border: none;
  background: none;
  outline: none;
}
.tasting_note_write_step01 .search_con .search::placeholder {
  color: var(--color-gray4);
}
.tasting_note_write_step01 .btn_con {
  position: fixed;
}
.tasting_note_write_step01 .btn_con .btn {
  width: 100%;
}

.tasting_note_write_step02 .input_list .list {
  margin-bottom: 30px;
}
.tasting_note_write_step02 .input_list .list .sub_tit {
  margin-bottom: 10px;
}
.tasting_note_write_step02 .input_list.able .list .sub_tit {
  padding-left: 0;
}
.tasting_note_write_step02 .input_list.able .list .temperature {
  position: relative;
  background: url("../icon/ico_degree.png") no-repeat;
  background-size: 18px;
  background-position: 95% center;
}

.tasting_note_write_step03 .tit {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
.tasting_note_write_step03 .tasting_txt {
  margin-bottom: 20px;
}
.tasting_note_write_step03 .rating_check {
  margin-bottom: 20px;
}
.tasting_note_write_step03 .rating_check .rating_sum {
  padding: 8px 23px;
  background-color: #fffcf4;
  border-radius: 100px;
}
.tasting_note_write_step03 .form-control {
  height: 350px;
  padding: 20px;
}
.tasting_note_write_step03 .form-control::placeholder {
  color: var(--color-gray4);
}
.tasting_note_write_step03 .img_upload {
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-gray3);
}
.tasting_note_write_step03 .img_upload #fileInput {
  display: none;
}
.tasting_note_write_step03 .img_upload .upload-label {
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  background: url("../img/img_plus_125px.png") no-repeat center/cover;
}
.tasting_note_write_step03 .img_upload .preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.tasting_note_write_step03 .img_upload .preview-item {
  position: relative;
  display: inline-block;
}
.tasting_note_write_step03 .img_upload .preview-item img {
  width: 125px;
  height: 125px;
  border-radius: 10px;
  object-fit: cover;
}
.tasting_note_write_step03 .img_upload .delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.tasting_note_write_step03 .repurchase {
  margin: 20px 0 30px;
}
.tasting_note_write_step03 .repurchase > .d-flex {
  gap: 10px;
}
.tasting_note_write_step03 .repurchase > .d-flex .form-check {
  width: 50%;
  padding: 17px 20px 17px 45px;
  border: 1px solid var(--color-gray3);
  border-radius: 10px;
}
.tasting_note_write_step03 .repurchase > .d-flex .form-check .form-check-label {
  font-size: 18px;
}
.tasting_note_write_step03 .repurchase > .d-flex .form-check .form-check-label::before {
  left: 20px;
  width: 30px;
  height: 30px;
}
.tasting_note_write_step03 .repurchase > .d-flex .form-check.active {
  border: 1px solid var(--color-main);
  background-color: var(--color-pink);
}

/*--------- 뉴스피드 ---------- */
.news_feed .sub_tit {
  margin-bottom: 15px;
  padding-left: 30px;
  font-size: 18px;
  font-weight: 700;
}
.news_feed .sub_tit::before {
  width: 24px;
  height: 24px;
}
.news_feed .name_con {
  margin-top: 20px;
  padding: 20px;
  gap: 20px;
  background-color: var(--color-serve);
  border-radius: 15px;
}
.news_feed .name_con .txt_con .cate {
  color: var(--color-main);
}
.news_feed .name_con .txt_con .eng_name {
  color: var(--color-gray5);
}
.news_feed .name_con .img_con {
  width: 140px;
  height: 190px;
}
.news_feed .name_con .img_con img {
  width: 140px;
  height: 190px;
}
.news_feed .name_con .food_list {
  margin-top: 10px;
}
.news_feed .name_con .food_list .list {
  gap: 10px;
  margin-bottom: 5px;
}
.news_feed .name_con .food_list .list:last-child {
  margin-bottom: 0;
}
.news_feed .name_con .banner {
  margin-top: 30px;
  padding: 16px 20px;
  border-radius: 14px;
  background-color: var(--color-black);
}
.news_feed .name_con .banner p {
  position: relative;
  color: #fff;
}
.news_feed .name_con .banner p::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_prev_white_18px.png") no-repeat center/cover;
}
.news_feed .weekly_best {
  margin-top: 30px;
}
.news_feed .review_feed {
  margin-top: 30px;
}
.news_feed .wine_info {
  margin-top: 30px;
}
.news_feed .event_con {
  margin-top: 30px;
}
.news_feed .event_con .event_thumb .img_con {
  border-radius: 10px;
  overflow: hidden;
}
.news_feed .event_con .event_thumb .img_con img {
  width: 100%;
  height: 110px;
}

/*--------- 리뷰피드 ---------- */
/*--------- 이벤트 ---------- */
.event .event_list .list {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-gray3);
}
.event .event_list .list a .img_con {
  position: relative;
  margin-bottom: 10px;
}
.event .event_list .list a .img_con::before {
  content: "";
  display: block;
  padding-bottom: 30%;
}
.event .event_list .list a .img_con img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.event .event_list .list a .txt_con .title {
  margin-bottom: 0;
}
.event .event_list .list a .txt_con .date {
  color: var(--color-gray5);
}

/*--------- 마이페이지 ---------- */
.my_profile .banner {
  width: 100%;
  height: 70px;
  margin-top: 30px;
  padding-inline: 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 14px;
  background-color: var(--color-gray1);
}
.my_profile .banner a {
  position: relative;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}
.my_profile .banner a::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.my_profile .banner a p {
  position: relative;
  padding-left: 28px;
}
.my_profile .banner a p::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.my_profile .banner a .point {
  font-size: 18px;
  font-weight: 500;
}
.my_profile .banner a .num {
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 100px;
  background-color: var(--color-pink);
  color: var(--color-main);
}
.my_profile .banner.badge a::after {
  background: url("../img/icon/ico_prev_gray_18px.png") no-repeat center/cover;
}
.my_profile .banner.badge a .tit::before {
  background: url("../img/icon/ico_badge_20px.png") no-repeat center/cover;
}
.my_profile .banner.corco a .tit::before {
  width: 24px;
  height: 24px;
  background: url("../img/img_corco_24px.png") no-repeat center/cover;
}
.my_profile .menu_list {
  margin-top: 30px;
  padding: 15px 25px;
  border: 1px solid var(--color-gray3);
  border-radius: 20px;
}
.my_profile .menu_list .list {
  border-bottom: 1px solid var(--color-gray2);
}
.my_profile .menu_list .list.alarm a::before {
  background: url("../img/icon/ico_alarm_20px.png") no-repeat center/cover;
}
.my_profile .menu_list .list.notice a::before {
  background: url("../img/icon/ico_sound_20px.png") no-repeat center/cover;
}
.my_profile .menu_list .list.update a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my_profile .menu_list .list.update a::before {
  background: url("../img/icon/ico_inport_20px.png") no-repeat center/cover;
}
.my_profile .menu_list .list.update a::after {
  display: none;
}
.my_profile .menu_list .list.update a .version {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-main);
}
.my_profile .menu_list .list.inquire a::before {
  background: url("../img/icon/ico_inquire_20px.png") no-repeat center/cover;
}
.my_profile .menu_list .list.lang a::before {
  background: url("../img/icon/ico_language_20px.png") no-repeat center/cover;
}
.my_profile .menu_list .list a {
  position: relative;
  display: block;
  padding: 25px 0;
}
.my_profile .menu_list .list a::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.my_profile .menu_list .list a::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_prev_gray_18px.png") no-repeat center/cover;
}
.my_profile .menu_list .list a .tit {
  padding-left: 30px;
}

/*--------- 마이페이지 리뷰 ---------- */
.my_profile_review .banner {
  width: 100%;
  height: 70px;
  padding-inline: 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 14px;
  background-color: var(--color-gray1);
}
.my_profile_review .banner a {
  position: relative;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}
.my_profile_review .banner a::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.my_profile_review .banner a p {
  position: relative;
  padding-left: 28px;
}
.my_profile_review .banner a p::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.my_profile_review .banner a .point {
  font-size: 18px;
  font-weight: 500;
}
.my_profile_review .banner a .num {
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 100px;
  background-color: var(--color-pink);
  color: var(--color-main);
}
.my_profile_review .banner.badge a::after {
  background: url("../img/icon/ico_prev_gray_18px.png") no-repeat center/cover;
}
.my_profile_review .banner.badge a .tit::before {
  background: url("../img/icon/ico_badge_20px.png") no-repeat center/cover;
}
.my_profile_review .banner.corco a .tit::before {
  width: 24px;
  height: 24px;
  background: url("../img/img_corco_24px.png") no-repeat center/cover;
}
.my_profile_review .review_tab {
  margin-top: 7px;
}
.my_profile_review .review_tab .sum_con {
  margin: 20px 0;
  padding: 13px 24px;
  background-color: var(--color-gray1);
  text-align: center;
}
.my_profile_review .review_tab .sum_con P .point {
  color: var(--color-main);
}
.my_profile_review .review_tab .list_item {
  margin-top: 20px;
  padding: 0;
}

/*--------- 팔로우 리스트 ---------- */
.follow_list .list_con .list {
  padding: 20px 0;
}
.follow_list .list_con .list .thumb {
  gap: 10px;
}
.follow_list .list_con .list .thumb .img_con {
  width: 40px;
}
.follow_list .list_con .list .thumb .img_con img {
  width: 100%;
}
.follow_list .list_con .list .delete {
  padding: 8px 10px !important;
}
.follow_list .list_con .list .delete span {
  color: #fff;
}

/*--------- 프로필 설정 ---------- */
.profile_setting .header_menu .save_btn {
  color: var(--color-main);
}
.profile_setting .thumb {
  position: relative;
  margin-bottom: 30px;
  text-align: center;
}
.profile_setting .thumb .img_con {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
}
.profile_setting .thumb .img_con::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.profile_setting .thumb .img_con img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile_setting .input_con .sub_tit {
  margin-bottom: 10px;
}
.profile_setting .input_con .d-flex {
  gap: 10px;
}
.profile_setting .input_con .d-flex .certi {
  width: 100%;
  font-weight: 700;
  border: 2px solid var(--color-main);
}
.profile_setting .input_con .caution {
  margin-top: 10px;
  color: #3bc347;
}

/*--------- 알람 설정 ---------- */
.alarm_setting .toggle_con .all_check {
  padding: 30px 20px;
  border-radius: 10px;
  background-color: var(--color-gray2);
}
.alarm_setting .toggle_con .check_list {
  margin-top: 20px;
}
.alarm_setting .toggle_con .check_list .list {
  padding: 28px 0;
}

/*--------- 공지사항 ---------- */
.notice {
  border-top: 1px solid var(--color-gray3);
}
.notice .notice_list .notice_item .list {
  border-bottom: 1px solid var(--color-gray3);
}
.notice .notice_list .notice_item .list:last-child {
  border-bottom: none;
}
.notice .notice_list .notice_item .list a {
  position: relative;
  display: block;
  padding: 25px 20px;
}
.notice .notice_list .notice_item .list a::after {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url(../img/icon/ico_prev_gray_18px.png);
}
.notice .notice_list .notice_item .list a .date {
  margin-top: 5px;
  color: var(--color-gray5);
}

.notice_detail .notice_title {
  padding: 25px 0;
  border-bottom: 1px solid var(--color-gray3);
}
.notice_detail .notice_title .tit {
  margin-bottom: 5px;
}
.notice_detail .notice_title .date {
  color: var(--color-gray5);
}
.notice_detail .contents {
  padding: 20px 0;
}

/*--------- 문의하기 ---------- */
.inquiry .inquiry_con .list {
  padding: 25px 0;
  border-bottom: 1px solid var(--color-gray3);
}
.inquiry .inquiry_con .list a {
  position: relative;
  display: block;
  padding: 0 20px;
}
.inquiry .inquiry_con .list a::after {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url(../icon/ico_prev_gray_18px.png);
}
.inquiry .inquiry_con .list a .condition {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 100px;
  background-color: var(--color-gray2);
}
.inquiry .inquiry_con .list a .condition p {
  color: var(--color-gray5);
}
.inquiry .inquiry_con .list a .date {
  margin-top: 10px;
  color: var(--color-gray5);
}
.inquiry .inquiry_con .list.wait a .condition {
  background-color: var(--color-pink);
}
.inquiry .inquiry_con .list.wait a .condition p {
  color: var(--color-main);
}

.fixed_menu.inquiry {
  bottom: 20px;
}

.inquiry_detail .inquiry_title {
  padding: 25px 0;
  border-bottom: 1px solid var(--color-gray3);
}
.inquiry_detail .inquiry_title .condition {
  display: inline-block;
  flex-shrink: 0;
  margin-bottom: 5px;
  padding: 7px 13px;
  border-radius: 100px;
  background-color: var(--color-gray2);
}
.inquiry_detail .inquiry_title .condition p {
  color: var(--color-gray5);
}
.inquiry_detail .inquiry_title .tit {
  margin-bottom: 5px;
}
.inquiry_detail .inquiry_title .date {
  color: var(--color-gray5);
}
.inquiry_detail .contents {
  padding: 20px 0;
}
.inquiry_detail .img_con {
  gap: 10px;
  margin: 30px 0;
  overflow-x: scroll;
}
.inquiry_detail .img_con .list {
  position: relative;
  flex-shrink: 0;
  width: calc(33.3333333333% - 10px);
  border-radius: 15px;
  overflow: hidden;
}
.inquiry_detail .img_con .list::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.inquiry_detail .img_con .list img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.inquiry_detail .answer {
  padding: 20px 0;
}
.inquiry_detail .answer .sut_tit {
  margin-bottom: 10px;
}

.inquiry_write .tit {
  margin-bottom: 10px;
}
.inquiry_write .form-control.txtarea {
  height: 350px;
  padding: 20px;
}
.inquiry_write .form-control.txtarea::placeholder {
  color: var(--color-gray4);
}
.inquiry_write .img_upload {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-gray3);
  overflow-x: scroll;
}
.inquiry_write .img_upload #fileInput {
  display: none;
}
.inquiry_write .img_upload .upload-label {
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  background: url("../img/img_plus_125px.png") no-repeat center/cover;
}
.inquiry_write .img_upload .preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.inquiry_write .img_upload .preview-item {
  position: relative;
  display: inline-block;
}
.inquiry_write .img_upload .preview-item img {
  width: 125px;
  height: 125px;
  border-radius: 10px;
  object-fit: cover;
}
.inquiry_write .img_upload .delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.inquiry_write .repurchase {
  margin: 20px 0 30px;
}
.inquiry_write .repurchase > .d-flex {
  gap: 10px;
}
.inquiry_write .repurchase > .d-flex .form-check {
  width: 50%;
  padding: 17px 20px 17px 45px;
  border: 1px solid var(--color-gray3);
  border-radius: 10px;
}
.inquiry_write .repurchase > .d-flex .form-check .form-check-label {
  font-size: 18px;
}
.inquiry_write .repurchase > .d-flex .form-check .form-check-label::before {
  left: 20px;
  width: 30px;
  height: 30px;
}
.inquiry_write .repurchase > .d-flex .form-check.active {
  border: 1px solid var(--color-main);
  background-color: var(--color-pink);
}
.inquiry_write .policy_con {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 30px;
}

/*--------- 스플래쉬 ---------- */
.splash {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, var(--color-main) 0%, #87090a);
}
.splash img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*--------- 테이스팅 노트 옵션 ---------- */
.tasting_option .big_txt {
  margin-bottom: 10px;
}
.tasting_option .btn {
  border: none;
}
.tasting_option .option_con .pill_option .btn {
  padding: 0;
}
.tasting_option .option_con .pill_option .btn .option_txt span {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
}
.tasting_option.taste .tab-content .option_con .pill_option .option_txt {
  padding: 0;
}
.tasting_option.food .food_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.tasting_option.food .food_list .food {
  width: calc(25% - 10px);
  margin-bottom: 15px;
  text-align: center;
}
.tasting_option.food .food_list .food .btn {
  width: 100%;
}
.tasting_option.food .food_list .food .btn .img_con {
  position: relative;
  width: 100%;
  height: auto;
}
.tasting_option.food .food_list .food .btn .img_con::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-1 {
  background: url("../img/img_beef_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-2 {
  background: url("../img/img_pork_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-3 {
  background: url("../img/img_chicken_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-4 {
  background: url("../img/img_fish_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-5 {
  background: url("../img/img_sea_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-6 {
  background: url("../img/img_salad_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-7 {
  background: url("../img/img_fried_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-8 {
  background: url("../img/img_cheese_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-9 {
  background: url("../img/img_fruit_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-10 {
  background: url("../img/img_dessert_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-11 {
  background: url("../img/img_korea_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-12 {
  background: url("../img/img_pizza_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-13 {
  background: url("../img/img_asia_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-14 {
  background: url("../img/img_chinese_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-15 {
  background: url("../img/img_before_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .btn.active .img_con.pairing-16 {
  background: url("../img/img_dry_on_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con {
  width: 90px;
  height: 90px;
}
.tasting_option.food .food_list .food .img_con.pairing-1 {
  background: url("../img/img_beef_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-2 {
  background: url("../img/img_pork_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-3 {
  background: url("../img/img_chicken_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-4 {
  background: url("../img/img_fish_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-5 {
  background: url("../img/img_sea_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-6 {
  background: url("../img/img_salad_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-7 {
  background: url("../img/img_fried_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-8 {
  background: url("../img/img_cheese_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-9 {
  background: url("../img/img_fruit_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-10 {
  background: url("../img/img_dessert_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-11 {
  background: url("../img/img_korea_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-12 {
  background: url("../img/img_pizza_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-13 {
  background: url("../img/img_asia_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-14 {
  background: url("../img/img_chinese_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-15 {
  background: url("../img/img_before_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .img_con.pairing-16 {
  background: url("../img/img_dry_90px.png") no-repeat center/cover;
}
.tasting_option.food .food_list .food .name {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
}
@media (max-width: 480px) {
  .tasting_option.food .food_list .food .btn {
    padding: 0;
  }
  .tasting_option.food .food_list .food .btn .name {
    font-size: 12px;
  }
}
.tasting_option.food .detail {
  margin: 35px 0 150px;
}
.tasting_option.food .detail .input_con .list {
  margin-bottom: 30px;
}
.tasting_option.food .detail .input_con .list .label_txt {
  padding-left: 0;
}
@media (max-width: 480px) {
  .tasting_option.food .detail .input_con .list .form-control::placeholder {
    font-size: 14px;
  }
}

/*--------- 언어설정 ---------- */
.language {
  margin-top: 20px;
}
.language .option {
  margin-bottom: 20px;
}
.language .option .btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 12px;
}
.language .option .btn .check_img {
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/img_notcheck_btn.png) no-repeat center;
  background-size: 24px;
}
.language .option .btn .opt {
  color: var(--color-gray5);
}
.language .option .btn.active {
  border: 1px solid var(--color-main);
  background-color: var(--color-pink);
}
.language .option .btn.active .check_img {
  background: url(../img/img_checked_btn.png) no-repeat center;
}
.language .option .btn.active .opt {
  color: var(--color-main);
}
.language .option:last-child {
  margin-bottom: 0;
}

/*--------- 뱃지 ---------- */
.badge_con .sub_tit {
  padding-block: 20px;
}
.badge_con .filter {
  gap: 10px;
}
.badge_con .top_badge {
  width: 160px;
  margin: 15px auto;
  text-align: center;
}
.badge_con .top_badge .img_con {
  position: relative;
  border-radius: 20px;
  background-color: var(--color-gray2);
}
.badge_con .top_badge .img_con::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.badge_con .top_badge .img_con img {
  position: absolute;
  height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.badge_con .top_badge p {
  margin-top: 10px;
  color: var(--color-gray5);
}
.badge_con .badge_list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  text-align: center;
}
.badge_con .badge_list .list {
  position: relative;
  width: calc(33.3333333333% - 15px);
}
.badge_con .badge_list .list .img_con {
  position: relative;
  border-radius: 20px;
  background-color: var(--color-gray2);
}
.badge_con .badge_list .list .img_con::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.badge_con .badge_list .list .img_con img {
  position: absolute;
  height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.badge_con .badge_list .list .badge_tit {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray5);
  line-height: 1;
}
/*--------- 알림창 ---------- */
.alarm .list_con {
  margin-top: 20px;
}
.alarm .list_con .list {
  margin-bottom: 30px;
}
.alarm .list_con .list a {
  display: flex;
  align-items: center;
  gap: 15px;
}
.alarm .list_con .list a .txt_con .tit {
  font-size: 16px;
  font-weight: 500;
}
.alarm .list_con .list a .txt_con .date {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray5);
}

/*--------- 코르코 상점 ---------- */
.cork_shop .own_cork {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cork_shop .own_cork .txt_con .t1 {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray5);
}
.cork_shop .own_cork .txt_con .t2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.cork_shop .cork_buy {
  margin-top: 30px;
}
.cork_shop .cork_buy .degree {
  display: inline-block;
  padding: 4.5px 10px;
  border-radius: 2px;
}
.cork_shop .cork_buy .degree p {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-main);
}
.cork_shop .cork_buy .degree.member {
  background-color: #fff2f2;
}
.cork_shop .cork_buy .degree.all {
  margin-top: 30px;
  background-color: #fffcf4;
}
.cork_shop .cork_buy .cork_list .list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 30px;
  border-bottom: 1px solid var(--color-gray2);
}
.cork_shop .cork_buy .cork_list .list .tit {
  position: relative;
  padding-left: 30px;
  font-size: 18px;
  font-weight: 600;
}
.cork_shop .cork_buy .cork_list .list .tit::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/img_corco_24px.png") no-repeat center/cover;
}
.cork_shop .cork_buy .cork_list .list .tit.premium::before {
  background: url("../img/icon/ico_premium.png") no-repeat center/cover;
}
.cork_shop .cork_buy .cork_list .list .tit.annual::before {
  background: url("../img/icon/ico_annual.png") no-repeat center/cover;
}
.cork_shop .cork_buy .cork_list .list .btn.member {
  width: 110px;
}
.cork_shop .cork_buy .cork_list .list .btn.all {
  width: 90px;
}

/*--------- 카메라 ---------- */
.camera .corner-box {
  position: absolute;
  width: calc(100% - 40px);
  max-width: 370px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.camera .corner-box::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.camera .corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
}
.camera .corner.top-left {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.camera .corner.top-right {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}
.camera .corner.bottom-left {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}
.camera .corner.bottom-right {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
.camera .alarm_toast_con {
  position: absolute;
  left: 50%;
  bottom: 95px;
  transform: translateX(-50%);
  display: inline-block;
}
.camera .alarm_toast_con .alarm_toast {
  position: relative;
  left: initial;
  bottom: initial;
  transform: none;
}
.camera .alarm_toast_con .img_con {
  position: relative;
  display: inline-block;
  margin-top: 30px;
  padding: 8px 15px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.75);
  left: 50%;
  transform: translateX(-50%);
}
.camera .alarm_toast_con .img_con .cork_reward {
  font-size: 18px;
  font-weight: 500;
}

/*--------- 포르타셀러 ---------- */
.cellar .thumb_con {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 30px;
}
.cellar .thumb_con .img_con {
  position: relative;
  width: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.cellar .thumb_con .img_con::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.cellar .thumb_con .img_con img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cellar .thumb_con .info_con {
  width: 100%;
  margin-bottom: 10px;
}
.cellar .thumb_con .info_con .use_info {
  display: flex;
  justify-content: space-between;
}
.cellar .thumb_con .info_con .use_info .use_time {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cellar .thumb_con .info_con .use_info .use_time .percent {
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  font-weight: 500;
}
.cellar .thumb_con .info_con .use_info .use_time .percent::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_battery_20px.png") no-repeat center/cover;
}
.cellar .thumb_con .info_con .use_info .use_time .time {
  padding: 2px 10px;
  background-color: var(--color-pink);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-main);
}
.cellar .thumb_con .cellar_name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cellar .thumb_con .cellar_name .name {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 500;
}
.cellar .thumb_con .cellar_name .kind {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray5);
}
.cellar .temperature {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 30px 16px;
  background-color: var(--color-gray1);
  border-radius: 10px;
}
.cellar .temperature .current_temp {
  display: flex;
  align-items: center;
  gap: 50px;
}
.cellar .temperature .current_temp .temp {
  position: relative;
  padding-left: 25px;
  font-size: 18px;
  font-weight: 500;
}
.cellar .temperature .current_temp .temp::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_temperature.png") no-repeat center/cover;
}
.cellar .temperature .current_temp .num {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-main);
}
.cellar .temperature .current_temp .num::before {
  font-size: 16px;
}
.cellar .temperature .setting_temp {
  position: relative;
  padding-block: 4px;
  margin-right: 20px;
  border: 1px solid var(--color-gray3);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray5);
}
.cellar .temperature .setting_temp::before {
  content: "\f105";
  position: absolute;
  display: block;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--color-gray4);
}
.cellar .temperature .degrees {
  position: relative;
  padding-right: 25px;
}
.cellar .temperature .degrees::before {
  content: "℃";
  position: absolute;
  display: block;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 500;
}
.cellar .setting .list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 25px;
  border-bottom: 1px solid var(--color-gray3);
}
.cellar .setting .list.arr_link {
  position: relative;
}
.cellar .setting .list.arr_link::after {
  content: "\f105";
  position: absolute;
  display: block;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--color-gray4);
}
.cellar .setting .list .tit {
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  font-weight: 500;
}
.cellar .setting .list .tit::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.cellar .setting .list .tit.alarm::before {
  background: url("../img/icon/ico_inport_20px.png") no-repeat center/cover;
}
.cellar .setting .list .tit.led::before {
  background: url("../img/icon/ico_LED.png") no-repeat center/cover;
}
.cellar .setting .list .tit.sound::before {
  background: url("../img/icon/ico_sound.png") no-repeat center/cover;
}
.cellar .setting .list .alarm_btn {
  margin-right: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray5);
}
.cellar .list_item {
  margin-top: 15px;
  padding-left: 0;
}
.cellar.none .inner {
  position: static;
  text-align: center;
}
.cellar.none .inner .txt_con .t1 {
  font-size: 20px;
  font-weight: 600;
}
.cellar.none .inner .banner {
  width: calc(100% - 40px);
  margin: 50px auto 0;
  padding-block: 15px;
  background-color: #1c1c1c;
  border-radius: 14px;
}
.cellar.none .inner .banner a .t1 {
  position: relative;
  display: inline-block;
  padding-right: 28px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.cellar.none .inner .banner a .t1::after {
  content: "\f105"; /* 유니코드는 백슬래시 포함해서 입력 */
  position: absolute;
  display: block;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
@media (max-width: 530px) {
  .cellar .temperature .current_temp {
    gap: 15px;
  }
  .cellar .temperature .current_temp .temp {
    font-size: 0.9rem;
  }
  .cellar .temperature .current_temp .num {
    font-size: 0.9rem;
    color: var(--color-main);
  }
  .cellar .temperature .current_temp .num::before {
    font-size: 0.8rem;
  }
  .cellar .temperature .setting_temp {
    font-size: 0.8rem;
  }
  .cellar .temperature .degrees::before {
    font-size: 0.9rem;
  }
}
@media (max-width: 530px) and (max-width: 480px) {
  .cellar .thumb_con {
    align-items: center;
  }
  .cellar .thumb_con .cellar_name {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .cellar .thumb_con .cellar_name .name {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1.2rem;
  }
  .cellar .thumb_con .cellar_name .kind {
    font-size: 0.8rem;
  }
  .cellar .temperature .current_temp {
    gap: 15px;
  }
  .cellar .temperature .current_temp .temp {
    font-size: 0.8rem;
  }
  .cellar .temperature .current_temp .num {
    font-size: 0.8rem;
    color: var(--color-main);
  }
  .cellar .temperature .current_temp .num::before {
    font-size: 0.7rem;
  }
  .cellar .temperature .setting_temp {
    font-size: 0.7rem;
  }
  .cellar .temperature .degrees {
    padding-right: 15px;
  }
  .cellar .temperature .degrees::before {
    font-size: 0.8rem;
  }
  .cellar .setting .list .tit {
    font-size: 0.8rem;
  }
  .cellar .setting .list .alarm_btn {
    font-size: 0.8rem;
  }
}
@media (max-width: 530px) and (max-width: 420px) {
  .cellar .thumb_con .info_con .use_info .use_time {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
@media (max-width: 530px) and (max-width: 400px) {
  .cellar .temperature {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/*--------- 포르타셀러 연동중  ---------- */
.cellar_connecting .circle-progress {
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  margin: 0 auto;
  background: conic-gradient(var(--color-main) calc(var(--progress) * 1%), var(--color-gray1) 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  --progress: 75;
  z-index: -1;
}
.cellar_connecting .circle-progress::before {
  content: "";
  position: absolute;
  display: block;
  width: 220px;
  height: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #fff;
}
.cellar_connecting .circle-progress .value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}
.cellar_connecting .img_con {
  position: relative;
}
.cellar_connecting .img_con img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cellar_connecting .percent {
  position: relative;
  display: inline-block;
  min-width: 70px;
  left: 50%;
  transform: translateX(-50%);
  margin-block: 20px 10px;
  padding: 4px 15px;
  background-color: var(--color-pink);
  border-radius: 50px;
}
.cellar_connecting .percent .counter {
  font-size: 18px;
  font-weight: 600;
}

/*--------- 포르타셀러 정보확인  ---------- */
.cellar_connection_info .img_con {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 30px;
  padding: 20px 35px 55px;
  background-color: var(--color-gray1);
  border-radius: 20px;
}
.cellar_connection_info .img_con .name {
  margin-top: 15px;
  font-size: 18px;
  font-weight: 500;
}

/*--------- 포르타셀러 온도설정  ---------- */
.cellar_temp_setting .banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 23px 20px;
  background-color: var(--color-gray1);
  border-radius: 15px;
}
.cellar_temp_setting .banner .battery {
  position: relative;
  padding-left: 25px;
  font-size: 18px;
  font-weight: 500;
}
.cellar_temp_setting .banner .battery::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_battery_20px.png") no-repeat center/cover;
}
.cellar_temp_setting .banner .condition {
  font-size: 18px;
  font-weight: 600;
}
.cellar_temp_setting .banner .condition.good {
  color: #00bc10;
}
.cellar_temp_setting .banner .condition.normal {
  color: #5196ef;
}
.cellar_temp_setting .banner .condition.bad {
  color: var(--color-main);
}
.cellar_temp_setting .ai_recommend {
  padding-block: 20px;
  background-color: var(--color-pink);
}
.cellar_temp_setting .ai_recommend .banner {
  justify-content: center;
}
.cellar_temp_setting .ai_recommend .banner .t1 {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  font-font-weight: 500;
}
.cellar_temp_setting .ai_recommend .banner .t1 .point {
  color: var(--color-main);
}
.cellar_temp_setting .ai_recommend .banner .t1::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_inport_on_20px.png") no-repeat center/cover;
}
.cellar_temp_setting .ai_recommend .txt_con {
  margin-top: 10px;
}
.cellar_temp_setting .ai_recommend .txt_con .t1 {
  font-size: 16px;
  font-weight: 400;
}
.cellar_temp_setting .ai_recommend .txt_con .t1 .point {
  color: var(--color-main);
}

/*--------- 포르타셀러 설정  ---------- */
.cellar_setting .img_upload {
  margin-top: 20px;
  padding-bottom: 20px;
}
.cellar_setting .img_upload #fileInput {
  display: none;
}
.cellar_setting .img_upload .upload-label {
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  background: url("../img/img_plus_125px.png") no-repeat center/cover;
}
.cellar_setting .img_upload .preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.cellar_setting .img_upload .preview-item {
  position: relative;
  display: inline-block;
}
.cellar_setting .img_upload .preview-item img {
  width: 125px;
  height: 125px;
  border-radius: 10px;
  object-fit: cover;
}
.cellar_setting .img_upload .delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.cellar_setting .cellar_name .form-control {
  margin-top: 10px;
  background: var(--color-gray1);
}

/*--------- 해더 ---------- */
.header_menu {
  position: relative;
  width: 100%;
  background-color: #fff;
  text-align: center;
  z-index: 10;
}
.header_menu .fixed {
  position: fixed;
  height: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.header_menu .fixed.active {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}
.header_menu .fixed .link_con .icon .btn {
  padding: 0;
  border: none;
}
.header_menu .fixed .link_con .icon .btn .add_mark {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/icon/ico_empty_mark.png") no-repeat center/cover;
}
.header_menu .fixed .link_con .icon .btn.active .add_mark {
  background: url("../img/icon/ico_full_mark.png") no-repeat center/cover;
}
.header_menu .fixed .logo_con {
  gap: 10px;
}
.header_menu .fixed .logo_con .logo {
  width: 60px;
}
.header_menu .fixed .logo_con p {
  flex-shrink: 0;
}
.header_menu .fixed .logo_con .maximum {
  position: relative;
  flex-shrink: 1;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray5);
}
.header_menu .fixed .logo_con .maximum::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 0%;
  left: 0;
  background: url("../img/icon/ico_inport_20px.png") no-repeat center/cover;
}
@media (max-width: 480px) {
  .header_menu .fixed .logo_con .maximum {
    font-size: 0.8rem;
  }
}
.header_menu .inner {
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
}
.header_menu .inner .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header_menu .inner .back {
  border: none;
  outline: none;
  background: none;
}
.header_menu .inner .btn.follow.active {
  background: var(--color-gray4);
  border: 1px solid var(--color-gray4);
}
.header_menu .search_con {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 12px 25px 12px 15px;
  border-radius: 100px;
  flex-grow: 1;
  background-color: var(--color-gray1) !important;
  border: 1px solid var(--color-gray3) !important;
  background: url("../img/icon/ico_search_24px.png") no-repeat 15px center/contain, #fff;
  background-size: 24px;
}
.header_menu .search_con .search {
  width: 100%;
  padding-left: 25px;
  border: none;
  background: none;
}
.header_menu .search_con .search::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray4);
}
.header_menu .search_con .search:focus {
  border: none;
  outline: none;
}
.header_menu .search_con .btn {
  padding: 0;
}
.header_menu.search_page .inner {
  gap: 20px;
}
.header_menu.search_page .inner .search_con {
  display: flex;
  justify-content: space-between;
  padding: 12px 25px 12px 15px;
  border-radius: 100px;
  flex-grow: 1;
  background-color: var(--color-gray1) !important;
  border: 1px solid var(--color-gray3) !important;
  background: url("../img/icon/ico_search_24px.png") no-repeat 15px center/contain, #fff;
  background-size: 24px;
}
.header_menu.search_page .inner .search_con .search {
  width: 80%;
  padding-left: 25px;
  border: none;
  background: none;
}
.header_menu.search_page .inner .search_con .search::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray4);
}
.header_menu.search_page .inner .search_con .search:focus {
  border: none;
  outline: none;
}
.header_menu.search_page .inner .search_con .btn {
  padding: 0;
}
.header_menu .feed .link_con {
  gap: 20px;
}

.filter_header {
  position: relative;
  width: 100%;
  height: 70px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 1;
}
.filter_header .fixed {
  position: fixed;
  height: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.filter_header .fixed.active {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}
.filter_header .inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}
.filter_header .inner .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.filter_header .inner button {
  border: none;
  outline: none;
  background: none;
}

.wine_note .filter_header .link_con {
  gap: 10px;
}

.header_menu .search_bar {
  position: fixed;
  padding-block: 10px;
  background-color: #fff;
  z-index: 101;
}
.header_menu .filter {
  padding-top: 70px;
}
.header_menu .filter .filter_btn {
  position: absolute;
  right: 20px;
  top: 81px;
}
.header_menu .search_txt {
  position: relative;
  padding: 7px 20px;
  border-radius: 25px;
  background-color: #353535;
}
.header_menu .search_txt::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 10px 0px 10px;
  border-color: #353535 transparent transparent transparent;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  right: -10px;
}
.header_menu .search_txt p {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.header_menu .camera_search {
  position: relative;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background-color: var(--color-main);
}
.header_menu .camera_search img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 480px) {
  .header_menu .search_con .search::placeholder {
    font-size: 0.8rem;
  }
}

/*--------- 퀵메뉴 ---------- */
.quick_menu {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 100;
}
.quick_menu .menu_con .list a {
  text-align: center;
}
.quick_menu .menu_con .list a .img_con {
  text-align: center;
}
.quick_menu .menu_con .list a p {
  color: var(--color-d-gray);
  text-align: center;
}
.quick_menu .menu_con .list.center {
  position: relative;
  width: 70px;
  height: 70px;
  top: -15px;
  background: linear-gradient(to right, #780001, #c92325);
  border-radius: 50%;
}
.quick_menu .menu_con .list.center a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*--------- 아이템리스트 ---------- */
.list_item {
  display: flex;
  gap: 20px;
  padding-left: 20px;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}
.list_item .list {
  width: calc(50% - 45px);
  flex-shrink: 0;
}
.list_item .list a .img_con {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.list_item .list a .img_con::before {
  content: "";
  display: block;
  padding-bottom: 119%;
}
.list_item .list a .img_con .item_img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list_item .list a .img_con .btn {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  right: 10px;
  padding: 0;
  border: none;
}
.list_item .list a .img_con .btn .add_cart {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/icon/ico_empty_heart.png") no-repeat center/cover;
}
.list_item .list a .img_con .btn.active .add_cart {
  background: url("../img/icon/ico_full_heart.png") no-repeat center/cover;
}
.list_item .list a .txt_con {
  margin-top: 10px;
}
.list_item .list a .txt_con .writer {
  position: relative;
  margin-bottom: 3px;
  padding-left: 15px;
  color: var(--color-d-gray);
}
.list_item .list a .txt_con .writer::before {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_writer.png") no-repeat center/cover;
}
.list_item .list a .txt_con .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.list_item .list a .txt_con .tit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.list_item.cart .list {
  width: calc(50% - 10px);
  flex-shrink: 0;
}
.list_item.cart .list a .img_con {
  position: relative;
}
.list_item.cart .list a .img_con .btn {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  right: 10px;
  padding: 0;
  border: none;
}
.list_item.cart .list a .img_con .btn .add_cart {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/icon/ico_empty_heart.png") no-repeat center/cover;
}
.list_item.cart .list a .img_con .btn.active .add_cart {
  background: url("../img/icon/ico_full_heart.png") no-repeat center/cover;
}
.list_item.cart .list a .txt_con .writer {
  padding: 0;
}
.list_item.cart .list a .txt_con .writer::before {
  display: none;
}

.list_item_sty01 {
  margin-top: 15px;
}
.list_item_sty01 > .d-flex {
  align-items: start;
  gap: 15px;
  margin-bottom: 15px;
}
.list_item_sty01 > .d-flex:last-child {
  margin-bottom: 0;
}
.list_item_sty01 > .d-flex .img_con {
  position: relative;
  width: 120px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}
.list_item_sty01 > .d-flex .img_con::before {
  content: "";
  display: block;
  padding-bottom: 119%;
}
.list_item_sty01 > .d-flex .img_con .item_img {
  position: absolute;
  width: 100% !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.list_item_sty01 > .d-flex .info_con .writer {
  position: relative;
  padding-left: 12px;
  color: var(--color-gray5);
}
.list_item_sty01 > .d-flex .info_con .writer::before {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_writer.png") no-repeat center/cover;
}
.list_item_sty01 > .d-flex .info_con .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.list_item_sty01 > .d-flex .info_con .date {
  margin-top: 20px;
  color: var(--color-gray5);
}
.list_item_sty01 > .d-flex .info_con .rating_con {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}
.list_item_sty01 > .d-flex .info_con .rating_con .rating {
  position: relative;
  padding-left: 20px;
}
.list_item_sty01 > .d-flex .info_con .rating_con .rating::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_star_20px.png") no-repeat center/cover;
}
.list_item_sty01 > .d-flex .info_con .rating_con .review_num {
  position: relative;
  padding-left: 20px;
}
.list_item_sty01 > .d-flex .info_con .rating_con .review_num::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_review.png") no-repeat center/cover;
}
.list_item_sty01.review .list {
  margin-bottom: 15px;
}
.list_item_sty01.review .list a {
  display: flex;
  gap: 15px;
}
.list_item_sty01.review .list a .img_con {
  position: relative;
  flex-shrink: 0;
}
.list_item_sty01.review .list a .img_con .item_img {
  width: 120px;
  height: 150px;
  border-radius: 10px;
  object-fit: contain;
}
.list_item_sty01.review .list a .img_con .btn {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  right: 10px;
  padding: 0;
  border: none;
}
.list_item_sty01.review .list a .img_con .btn .add_mark {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/icon/ico_empty_mark.png") no-repeat center/cover;
}
.list_item_sty01.review .list a .img_con .btn.active .add_mark {
  background: url("../img/icon/ico_full_mark.png") no-repeat center/cover;
}
.list_item_sty01.review .list a .info_con .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.list_item_info .list_con {
  gap: 10px;
}
.list_item_info .list_con .list {
  width: calc(50% - 5px);
  margin-bottom: 15px;
}
.list_item_info .list_con .list .img_con {
  position: relative;
}
.list_item_info .list_con .list .img_con::before {
  content: "";
  display: block;
  padding-bottom: 116%;
}
.list_item_info .list_con .list .img_con .item_img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list_item_info .list_con .list .img_con .btn {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  right: 10px;
  padding: 0;
  border: none;
}
.list_item_info .list_con .list .img_con .btn .add_cart {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/icon/ico_empty_heart.png") no-repeat center/cover;
}
.list_item_info .list_con .list .img_con .btn.active .add_cart {
  background: url("../img/icon/ico_full_heart.png") no-repeat center/cover;
}
.list_item_info .list_con .list .txt_con {
  margin-top: 10px;
}
.list_item_info .list_con .list .txt_con .cate {
  color: var(--color-gray5);
}
.list_item_info .list_con .list .item_btn {
  gap: 10px;
  margin-top: 15px;
}
.list_item_info .list_con .list .item_btn .cellar_btn {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-gray3);
  border-radius: 5px;
  background-color: var(--color-gray2);
}
.list_item_info .list_con .list .item_btn .cellar_btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}
.list_item_info .list_con .list .item_btn .review_btn {
  width: 100%;
  padding: 8px 0 !important;
  background-color: var(--color-main);
}

.list_item_save .list_con .list {
  margin-bottom: 30px;
}
.list_item_save .list_con .list .info_con {
  gap: 10px;
}
.list_item_save .list_con .list .info_con .img_con {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 190px;
}
.list_item_save .list_con .list .info_con .img_con .item_img {
  width: 100%;
  object-fit: contain;
}
.list_item_save .list_con .list .info_con .img_con .btn {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  right: 10px;
  padding: 0;
  border: none;
}
.list_item_save .list_con .list .info_con .img_con .btn .add_cart {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/icon/ico_empty_heart.png") no-repeat center/cover;
}
.list_item_save .list_con .list .info_con .img_con .btn.active .add_cart {
  background: url("../img/icon/ico_full_heart.png") no-repeat center/cover;
}
.list_item_save .list_con .list .info_con .txt_con .cate {
  color: var(--color-gray5);
}
.list_item_save .list_con .list .info_con .txt_con .tit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.list_item_save .list_con .list .info_con .txt_con .eng_tit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--color-gray5);
}
.list_item_save .list_con .list .info_con .txt_con .count_num {
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid var(--color-gray3);
  border-radius: 10px;
}
.list_item_save .list_con .list .info_con .txt_con .count_num .box button {
  border: none;
  outline: none;
}
.list_item_save .list_con .list .item_btn {
  gap: 10px;
  margin-top: 15px;
}
.list_item_save .list_con .list .item_btn .cellar_btn {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-gray3);
  border-radius: 5px;
  background-color: var(--color-gray2);
}
.list_item_save .list_con .list .item_btn .cellar_btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}
.list_item_save .list_con .list .item_btn .review_btn {
  width: 100%;
  padding: 8px 0 !important;
  background-color: var(--color-main);
}

.rating_con {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.rating_con .rating {
  position: relative;
  padding-left: 20px;
}
.rating_con .rating::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_star_20px.png") no-repeat center/cover;
}
.rating_con .review_num {
  position: relative;
  padding-left: 20px;
}
.rating_con .review_num::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_review.png") no-repeat center/cover;
}

.item_list_tasting {
  margin-top: 50px;
}
.item_list_tasting .list {
  gap: 10px;
  margin-bottom: 15px;
}
.item_list_tasting .list .box {
  gap: 15px;
}
.item_list_tasting .list .box .img_con {
  flex-shrink: 0;
  width: 100px;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
}
.item_list_tasting .list .box .img_con img {
  width: 100%;
}
.item_list_tasting .txt_con .cate {
  color: var(--color-main);
}
.item_list_tasting .txt_con .eng_name {
  color: var(--color-gray5);
}
.item_list_tasting .form-check-label::before {
  width: 30px;
  height: 30px;
}

/*--------- input ---------- */
.form-control.sty01.disabled {
  background-color: var(--color-gray3f) !important;
}
.form-control.sty01.readonly {
  background-color: var(--color-gray3) !important;
}

.input_con.sty01 .label_txt {
  position: relative;
  padding-left: 23px;
}

.input_con.sty01 .label_txt::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.input_con.sty01 .label_txt.email::before {
  background: url("../img/icon/ico_email20px.png") no-repeat center/cover;
}

.input_con.sty01 .label_txt.pw::before {
  background: url("../img/icon/ico_pw_20px.png") no-repeat center/cover;
}

.input_con.sty01 .label_txt.phone_num::before {
  background: url("../img/icon/ico_phone_20px.png") no-repeat center/cover;
}

.input_con.sty01 .label_txt.certi_num::before {
  background: url("../img/icon/ico_shap.png") no-repeat center/cover;
}

.input_con.sty01 .label_txt.name::before {
  background: url("../img/icon/ico_men_20px.png") no-repeat center/cover;
}

.input_con.sty01 .label_txt.nickname::before {
  background: url("../img/icon/ico_name_20px.png") no-repeat center/cover;
}

.input_con .list {
  margin-bottom: 40px;
}
.input_con .g-3 .d-flex {
  gap: 10px;
}
.input_con .g-3 .d-flex .certi {
  width: 100%;
  border-width: 2px;
}

/*--------- 체크박스 ---------- */
.form-check {
  position: relative;
}

.check_type {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check_label {
  display: inline-block;
  padding-left: 10px;
  cursor: pointer;
}

.check_label::before {
  content: "";
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/img_notcheck_btn.png") no-repeat center/cover;
  transition: background 0.3s;
}

.check_type:checked + .check_label::before {
  background: url("../img/img_checked_btn.png") no-repeat center/cover;
}

.radio_type {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio_label {
  display: inline-block;
  padding-left: 10px;
  cursor: pointer;
}

.radio_label::before {
  content: "";
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/img_notcheck_btn.png") no-repeat center/cover;
  transition: background 0.3s;
}

.radio_type:checked + .radio_label::before {
  background: url("../img/img_checked_btn.png") no-repeat center/cover;
}

/*--------- 버튼 ---------- */
.btn_con {
  position: fixed;
  max-width: 576px;
  width: 100%;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
}
.btn_con.inner {
  padding: 0 20px;
}
.btn_con.two {
  display: flex;
  gap: 10px;
}
.btn_con.two .btn {
  width: 50%;
}
.btn_con.two .btn.btn-secondary {
  color: var(--color-gray4);
}

.btn.basic {
  padding: 15px 0;
  font-size: 18px;
  font-weight: 600;
}

.btn.readonly,
.btn.disabled {
  background-color: var(--color-gray4);
  border: var(--color-gray4);
}

.btn.btn-outline-primary.readonly,
.btn.btn-outline-primary.disabled {
  background: none;
  border: 1px solid var(--color-gray4);
  color: var(--color-gray5);
}

.btn.gray {
  background-color: var(--color-gray4) !important;
  border: var(--color-gray4) !important;
}

.btn.btn-outline-primary.gray {
  background: none !important;
  border: 1px solid var(--color-gray4) !important;
  color: var(--color-gray5) !important;
}

.btn_box {
  display: flex;
  gap: 10px;
}
.btn_box.one button {
  width: 100%;
}
.btn_box.two button {
  width: 50%;
}

@media (max-width: 480px) {
  .btn {
    font-size: 0.8rem;
  }
}
/*--------- 탭버튼 ---------- */
.tab_con .list_con .list {
  padding: 13px 0px;
  border-bottom: 1px solid #f2f2f2;
  text-align: center;
}
.tab_con .list_con .list.active {
  border-bottom: 1px solid var(--color-main);
}
.tab_con .list_con .list.active a {
  color: var(--color-main);
}
.tab_con .list_con .list a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray4);
}
.tab_con .list_con .list a span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tab_con.two .list_con .list {
  width: 50%;
}
.tab_con.three .list_con .list {
  width: 33.3333333333%;
}
.tab_con.five .list_con .list {
  width: 20%;
}
@media (max-width: 480px) {
  .tab_con .list_con .list a {
    font-size: 0.8rem;
  }
}

/*--------- 부트스트랩 탭 ---------- */
:root {
  --light-scarlet: #ffa7a7;
  --light-ruby: #fbacac;
  --cherry-red: #b22349;
  --ruby-red: #b41e2c;
  --dark-ruby: #8c020e;
  --scarlet: #ef123d;
  --garnet: #78001f;
  --brown-red: #813027;
  --mahogany: #430e0a;
  --oxblood: #4b0505;
  --black-cherry: #2f0f27;
  --light-yellow: #fffee1;
  --light-gold: #ffe6b7;
  --orangish-light-yellow: #ffe082;
  --golden-yellow: #ffd701;
  --amber: #fda902;
  --orangish-amber: #ff6f01;
  --lemon: #fff673;
  --light-lime: #f0ff85;
  --pale-beige: #f5e3c3;
  --medium-gold: #eaca66;
  --light-pink: #ffc0cb;
  --salmon: #ff8a7e;
  --dark-salmon: #ee8f6f;
  --coral: #ff7a47;
  --orange: #ffa32a;
  --light-orange: #ffc476;
  --peach: #ffe5b4;
  --dark-pink: #ff74a7;
  --copper: #d47744;
  --raspberry: #e40c1e;
  --rose-gold: #c55667;
  --light-amber: #ffc390;
  --golden-orange: #eba74f;
  --burnt-orange: #cd5602;
  --rich-tawny: #c77931;
  --dark-tawny: #8c4613;
  --mahogany-brown: #5e3630;
  --chestnut-brown: #967255;
  --molasses-brown: #3e2415;
  --golden-brown: #c4916d;
}

.tab-content .option_con {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.tab-content .option_con .pill_option {
  display: inline-block;
}
.tab-content .option_con .pill_option .btn {
  padding: 10px 20px 10px 15px;
  border: 1px solid var(--color-gray3);
  border-radius: 100px;
}
.tab-content .option_con .pill_option .btn.on {
  background-color: #fff2f2;
  border: 1px solid #87090a;
}
.tab-content .option_con .pill_option .option_txt {
  position: relative;
  display: flex;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
.tab-content .option_con .pill_option .option_txt.light-scarlet::before {
  background-color: var(--light-scarlet);
}
.tab-content .option_con .pill_option .option_txt.light-ruby::before {
  background-color: var(--light-ruby);
}
.tab-content .option_con .pill_option .option_txt.cherry-red::before {
  background-color: var(--cherry-red);
}
.tab-content .option_con .pill_option .option_txt.ruby-red::before {
  background-color: var(--ruby-red);
}
.tab-content .option_con .pill_option .option_txt.dark-ruby::before {
  background-color: var(--dark-ruby);
}
.tab-content .option_con .pill_option .option_txt.scarlet::before {
  background-color: var(--scarlet);
}
.tab-content .option_con .pill_option .option_txt.garnet::before {
  background-color: var(--garnet);
}
.tab-content .option_con .pill_option .option_txt.brown-red::before {
  background-color: var(--brown-red);
}
.tab-content .option_con .pill_option .option_txt.mahogany::before {
  background-color: var(--mahogany);
}
.tab-content .option_con .pill_option .option_txt.oxblood::before {
  background-color: var(--oxblood);
}
.tab-content .option_con .pill_option .option_txt.black-cherry::before {
  background-color: var(--black-cherry);
}
.tab-content .option_con .pill_option .option_txt.light-yellow::before {
  background-color: var(--light-yellow);
}
.tab-content .option_con .pill_option .option_txt.light-gold::before {
  background-color: var(--light-gold);
}
.tab-content .option_con .pill_option .option_txt.orangish-light-yellow::before {
  background-color: var(--orangish-light-yellow);
}
.tab-content .option_con .pill_option .option_txt.golden-yellow::before {
  background-color: var(--golden-yellow);
}
.tab-content .option_con .pill_option .option_txt.amber::before {
  background-color: var(--amber);
}
.tab-content .option_con .pill_option .option_txt.orangish-amber::before {
  background-color: var(--orangish-amber);
}
.tab-content .option_con .pill_option .option_txt.lemon::before {
  background-color: var(--lemon);
}
.tab-content .option_con .pill_option .option_txt.light-lime::before {
  background-color: var(--light-lime);
}
.tab-content .option_con .pill_option .option_txt.pale-beige::before {
  background-color: var(--pale-beige);
}
.tab-content .option_con .pill_option .option_txt.medium-gold::before {
  background-color: var(--medium-gold);
}
.tab-content .option_con .pill_option .option_txt.black-cherry::before {
  background-color: var(--black-cherry);
}
.tab-content .option_con .pill_option .option_txt.light-pink::before {
  background-color: var(--light-pink);
}
.tab-content .option_con .pill_option .option_txt.salmon::before {
  background-color: var(--salmon);
}
.tab-content .option_con .pill_option .option_txt.dark-salmon::before {
  background-color: var(--dark-salmon);
}
.tab-content .option_con .pill_option .option_txt.coral::before {
  background-color: var(--coral);
}
.tab-content .option_con .pill_option .option_txt.orange::before {
  background-color: var(--orange);
}
.tab-content .option_con .pill_option .option_txt.light-orange::before {
  background-color: var(--light-orange);
}
.tab-content .option_con .pill_option .option_txt.peach::before {
  background-color: var(--peach);
}
.tab-content .option_con .pill_option .option_txt.dark-pink::before {
  background-color: var(--dark-pink);
}
.tab-content .option_con .pill_option .option_txt.copper::before {
  background-color: var(--copper);
}
.tab-content .option_con .pill_option .option_txt.raspberry::before {
  background-color: var(--raspberry);
}
.tab-content .option_con .pill_option .option_txt.rose-gold::before {
  background-color: var(--rose-gold);
}
.tab-content .option_con .pill_option .option_txt.light-amber::before {
  background-color: var(--light-amber);
}
.tab-content .option_con .pill_option .option_txt.golden-orange::before {
  background-color: var(--golden-orange);
}
.tab-content .option_con .pill_option .option_txt.burnt-orange::before {
  background-color: var(--burnt-orange);
}
.tab-content .option_con .pill_option .option_txt.rich-tawny::before {
  background-color: var(--rich-tawny);
}
.tab-content .option_con .pill_option .option_txt.dark-tawny::before {
  background-color: var(--dark-tawny);
}
.tab-content .option_con .pill_option .option_txt.mahogany-brown::before {
  background-color: var(--mahogany-brown);
}
.tab-content .option_con .pill_option .option_txt.chestnut-brown::before {
  background-color: var(--chestnut-brown);
}
.tab-content .option_con .pill_option .option_txt.molasses-brown::before {
  background-color: var(--molasses-brown);
}
.tab-content .option_con .pill_option .option_txt.golden-brown::before {
  background-color: var(--golden-brown);
}

/*--------- select ---------- */
.select_con {
  gap: 10px;
  margin: 10px 0;
  padding-right: 50px;
  overflow-x: scroll;
}
.select_con .select_btn {
  flex-shrink: 0;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid var(--color-gray3);
  border-radius: 100px;
  color: var(--color-gray4);
}
.select_con .select_btn.active {
  background-color: var(--color-main);
  color: #fff;
}

/*--------- 토스트 팝업 ---------- */
.bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 100;
}
.bottom-sheet-overlay.active {
  opacity: 1;
  visibility: visible;
}

.bottom-sheet {
  position: fixed;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 576px;
  margin: 0 auto;
  background: white;
  border-radius: 15px 15px 0 0;
  padding: 15px;
  box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.2);
  transition: bottom 0.3s ease-in-out;
  z-index: 101;
}
.bottom-sheet.active {
  bottom: 0;
}
.bottom-sheet .bottom-sheet-header {
  width: 50px;
  height: 5px;
  background: lightgray;
  margin: 0 auto 20px;
  border-radius: 5px;
}
.bottom-sheet.filter_con .header_menu .inner {
  padding: 0;
}
.bottom-sheet.filter_con .header_menu .inner .title {
  position: relative;
  top: initial;
  left: initial;
  transform: translate(0, 0);
}
.bottom-sheet.filter_con .filter_box {
  padding: 0;
}
.bottom-sheet.filter_con .filter_box .list_con .list {
  border-bottom: 1px solid var(--color-gray3);
}
.bottom-sheet.filter_con .filter_box .list_con .list a {
  position: relative;
  display: block;
  padding: 25px 20px;
}
.bottom-sheet.filter_con .filter_box .list_con .list a::after {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_prev_gray_18px.png") no-repeat center/cover;
}
.bottom-sheet.filter_con .filter_box .list_con .list a .txt {
  padding-left: 10px;
}
.bottom-sheet.filter_con .filter_box .list_con .list a .txt::before {
  content: "";
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.bottom-sheet.filter_con .filter_box .list_con .list a .txt .num {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 12px;
  border-radius: 100px;
  background-color: var(--color-pink);
  color: var(--color-main);
}
.bottom-sheet.filter_con .filter_box .list_con .list.info .txt::before {
  background: url("../img/icon/ico_wine_gray_24px.png") no-repeat center/cover;
}
.bottom-sheet.filter_con .filter_box .list_con .list.grape .txt::before {
  background: url("../img/icon/ico_grape_24px.png") no-repeat center/cover;
}
.bottom-sheet.filter_con .filter_box .list_con .list.country .txt::before {
  background: url("../img/icon/ico_country_24px.png") no-repeat center/cover;
}
.bottom-sheet.filter_con .filter_box .list_con .list.favor .txt::before {
  background: url("../img/icon/ico_favor_24px.png") no-repeat center/cover;
}
.bottom-sheet.filter_con .filter_box .list_con .list.food .txt::before {
  background: url("../img/icon/ico_food_24px.png") no-repeat center/cover;
}
.bottom-sheet.filter_con .filter_box .list_con .list.money .txt::before {
  background: url("../img/icon/ico_money_24px.png") no-repeat center/cover;
}
.bottom-sheet.array_list .option {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 12px;
}
.bottom-sheet.array_list .option:last-child {
  margin-bottom: 0;
}
.bottom-sheet.array_list .option.active {
  border: 1px solid var(--color-main);
  background-color: var(--color-pink);
}
.bottom-sheet.array_list .option.active .form-check .form-check-label {
  color: var(--color-main);
}
.bottom-sheet.array_list .option .form-check .form-check-label {
  display: block;
  width: 100%;
  color: var(--color-gray5);
}
.bottom-sheet.array_list .option .form-check .form-check-label::before {
  width: 30px;
  height: 30px;
}
.bottom-sheet.array_list .bottom-sheet-footer {
  margin-top: 40px;
}
.bottom-sheet.array_list .bottom-sheet-footer .cancel-btn {
  background-color: var(--color-gray2) !important;
  color: var(--color-gray4);
}
.bottom-sheet.array_list .bottom-sheet-footer.two {
  gap: 10px;
}
.bottom-sheet.array_list .bottom-sheet-footer.two button {
  width: 50%;
}
.bottom-sheet.pill_con .header_menu .inner {
  padding: 0;
}
.bottom-sheet.pill_con .pill_box {
  margin: 30px 0 35px;
}
.bottom-sheet.pill_con .pill_box .cate {
  margin-bottom: 15px;
}
.bottom-sheet.pill_con .pill_box .pill_list {
  gap: 15px;
}
.bottom-sheet.pill_con .pill_box .pill_list .list .btn {
  padding: 8px 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 100px;
}
.bottom-sheet.pill_con .pill_box .pill_list .list .btn.active {
  border: 1px solid var(--color-main);
  background-color: var(--color-pink);
  color: var(--color-main);
}
.bottom-sheet.pill_con .pill_box:last-child {
  margin-bottom: 0;
}
.bottom-sheet.pill_con .bottom-sheet-footer {
  margin-top: 40px;
}
.bottom-sheet.pill_con .bottom-sheet-footer .cancel-btn {
  background-color: var(--color-gray2) !important;
  color: var(--color-gray4);
}
.bottom-sheet.pill_con .bottom-sheet-footer.two {
  gap: 10px;
}
.bottom-sheet.pill_con .bottom-sheet-footer.two .cancel-btn {
  flex-grow: 1;
}
.bottom-sheet.pill_con .bottom-sheet-footer.two .confirm-btn {
  flex-grow: 3;
}
.bottom-sheet.circle_con .bottom-sheet {
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.bottom-sheet.circle_con .food_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.bottom-sheet.circle_con .food_list .list {
  width: calc(25% - 10px);
  text-align: center;
}
.bottom-sheet.circle_con .food_list .list .btn {
  border: none;
}
.bottom-sheet.circle_con .food_list .list .btn img {
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}
.bottom-sheet.circle_con .food_list .list .btn p {
  margin-top: 5px;
}
.bottom-sheet.circle_con .bottom-sheet-footer {
  margin-top: 40px;
}
.bottom-sheet.circle_con .bottom-sheet-footer .cancel-btn {
  background-color: var(--color-gray2) !important;
  color: var(--color-gray4);
}
.bottom-sheet.circle_con .bottom-sheet-footer.two {
  gap: 10px;
}
.bottom-sheet.circle_con .bottom-sheet-footer.two .cancel-btn {
  flex-grow: 1;
}
.bottom-sheet.circle_con .bottom-sheet-footer.two .confirm-btn {
  flex-grow: 3;
}
.alarm_toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  padding: 7px 16px 7px 8px;
  background-color: rgba(28, 28, 28, 0.75);
  border-radius: 100px;
  text-align: center;
  z-index: 10;
}
.alarm_toast p {
  position: relative;
  margin: 0;
  padding-left: 21px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
}
.alarm_toast p::before {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_toast.svg") no-repeat center/cover;
}

/*--------- sub_title ---------- */
.sub_tit {
  position: relative;
  padding-left: 23px;
  font-size: 16px;
  font-weight: 500;
}
.sub_tit::before {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.sub_tit.calendar::before {
  background: url("../img/icon/ico_day_18px.png") no-repeat center/cover;
}
.sub_tit.ages::before {
  background: url("../img/icon/ico_men_18px.png") no-repeat center/cover;
}
.sub_tit.paltte::before {
  background: url("../img/icon/ico_color_18px.png") no-repeat center/cover;
}
.sub_tit.fragrance::before {
  background: url("../img/icon/ico_smell_18px.png") no-repeat center/cover;
}
.sub_tit.flavor::before {
  background: url("../img/icon/ico_favor_18px.png") no-repeat center/cover;
}
.sub_tit.food::before {
  background: url("../img/icon/ico_dish_18px.png") no-repeat center/cover;
}
.sub_tit.paper::before {
  background: url("../img/icon/ico_note_24px.png") no-repeat center/cover;
}
.sub_tit.wine::before {
  background: url("../img/icon/ico_wine_24px.png") no-repeat center/cover;
}
.sub_tit.black_wine::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_wine_black_20px.png") no-repeat center/cover;
}
.sub_tit.grape::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_grape_24px.png") no-repeat center/cover;
}
.sub_tit.country::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_country_20px.png") no-repeat center/cover;
}
.sub_tit.heart::before {
  width: 24px;
  height: 24px;
  background: url("../img/icon/ico_full_heart.png") no-repeat center/cover;
}
.sub_tit.star::before {
  width: 24px;
  height: 24px;
  background: url("../img/icon/ico_full_star_50px.png") no-repeat center/cover;
}
.sub_tit.name::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_name_20px.png") no-repeat center/cover;
}
.sub_tit.talk::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_talk_red20px.png") no-repeat center/cover;
}
.sub_tit.inquiry::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_inquire_20px.png") no-repeat center/cover;
}
.sub_tit.temp::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_graph_20px.png") no-repeat center/cover;
}
.sub_tit.red_star {
  color: var(--color-main);
}
.sub_tit.red_star::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_star_red_20px.png") no-repeat center/cover;
}
.sub_tit.camera::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_camera_20px.png") no-repeat center/cover;
}
.sub_tit.door::before {
  width: 20px;
  height: 20px;
  background: url("../img/icon/ico_door_20px.png") no-repeat center/cover;
}

@media (max-width: 480px) {
  .sub_tit {
    font-size: 1rem !important;
  }
}
/*--------- 상세정보 ---------- */
.made_in {
  padding: 20px 0;
  background-color: var(--color-gray1);
}
.made_in .make_con .list {
  margin-bottom: 10px;
}
.made_in .make_con .list:last-child {
  margin-bottom: 0;
}
.made_in .make_con .list .tit {
  width: 90px;
  margin-right: 20px;
  color: var(--color-gray5);
}
.age {
  margin-top: 30px;
}
.age .d-flex {
  margin-top: 10px;
  gap: 40px;
}

.color {
  margin-top: 30px;
}
.color .box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 17px 20px;
  border-radius: 10px;
  border: 1px solid var(--color-gray3);
}
.color .box .v-color {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--color-main);
}
.smell {
  margin-top: 30px;
}
.smell .smell_con {
  gap: 10px;
  margin-top: 10px;
}
.smell .smell_con .list {
  padding: 5px 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 100px;
}

.taste {
  margin-top: 30px;
}
.taste .flavor_con {
  margin-top: 15px;
}
.taste .flavor_con .list {
  gap: 15px;
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid var(--color-gray3);
  border-radius: 15px;
}
.taste .flavor_con .list:last-child {
  margin-bottom: 0;
}
.taste .flavor_con .list .progress_con {
  width: 100%;
}
.taste .flavor_con .list .progress_con .txt_con {
  margin-bottom: 15px;
}
.taste .flavor_con .list .progress_con .txt_con .txt02 {
  color: var(--color-main);
}

.pairing {
  margin-top: 30px;
}
.pairing .food_con {
  gap: 10px;
  overflow-x: scroll;
}
.pairing .food_con .list {
  flex-shrink: 0;
  text-align: center;
}
.pairing .food_con .list .img_con {
  width: 90px;
  height: 90px;
}
.pairing .food_con .list .img_con.pairing-1 {
  background: url("../img/img_cow_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-2 {
  background: url("../img/img_pig_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-3 {
  background: url("../img/img_hen_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-4 {
  background: url("../img/img_fish01_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-5 {
  background: url("../img/img_seashell_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-6 {
  background: url("../img/img_salad01_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-7 {
  background: url("../img/img_fry_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-8 {
  background: url("../img/img_cheese1_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-9 {
  background: url("../img/img_apple_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-10 {
  background: url("../img/img_salad01_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-11 {
  background: url("../img/img_korean_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-12 {
  background: url("../img/img_pizza01_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-13 {
  background: url("../img/img_asian_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-14 {
  background: url("../img/img_china_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-15 {
  background: url("../img/img_before01_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con.pairing-16 {
  background: url("../img/img_biltong_90px.png") no-repeat center/cover;
}
.pairing .food_con .list .img_con img {
  width: 100%;
}
.pairing .food_con .list p {
  margin-top: 5px;
}

/*--------- 댓글 ---------- */
.re_comment_con .comment_menu {
  padding: 10px 0;
}
.re_comment_con .comment_menu .sum {
  color: var(--color-gray5);
}
.re_comment_con .comment_menu .array {
  position: relative;
  padding-right: 22px;
}
.re_comment_con .comment_menu .array::after {
  content: "";
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url("../img/icon/ico_down_gray_12px.png") no-repeat center/cover;
}
.re_comment_con .re_comment_list .list {
  margin-bottom: 20px;
}
.re_comment_con .re_comment_list .list .thumb {
  margin-bottom: 10px;
  gap: 10px;
}
.re_comment_con .re_comment_list .list .thumb .thumb_img {
  position: relative;
}
.re_comment_con .re_comment_list .list .thumb .thumb_img .btn {
  position: relative;
  display: block;
  width: 40px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}
.re_comment_con .re_comment_list .list .thumb .thumb_img .btn::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.re_comment_con .re_comment_list .list .thumb .thumb_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.re_comment_con .re_comment_list .list .thumb .txt_con .date {
  color: var(--color-gray5);
}
.re_comment_con .re_comment_list .list .comment_txt {
  margin-bottom: 30px;
}
.re_comment_con .re_comment_list .list .comment_btn {
  gap: 10px;
}
.re_comment_con .re_comment_list .list .comment_btn .btn {
  position: relative;
  padding: 1px 8px !important;
}
.re_comment_con .re_comment_list .list .comment_btn .btn em {
  padding-left: 5px;
}
.re_comment_con .re_comment_list .list .comment_btn .good_btn span {
  display: inline-block;
  padding-left: 20px;
}
.re_comment_con .re_comment_list .list .comment_btn .good_btn::before {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 8px;
  top: 52%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_good_18px.png") no-repeat center/cover;
}
.re_comment_con .re_comment_list .list .comment_btn .good_btn.on::before {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 8px;
  top: 52%;
  transform: translateY(-50%);
  background: url("../img/icon/ico_good_on_18px.png") no-repeat center/cover;
}
.re_comment_con.detail .inner {
  padding: 0;
}
.re_comment_con.detail .re_comment_list .list {
  padding: 15px 20px;
}
.re_comment_con.detail .re_comment_list .list.re {
  padding-left: 30px;
  background-color: var(--color-gray1);
}

.send_con {
  gap: 10px;
}
.send_con input {
  width: 100%;
}
.send_con .send {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  padding: 0;
}
.send_con .send img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*--------- 토글 스위치 ---------- */
.toggleSwitch {
  position: relative;
  display: block;
  width: 90px;
  height: 30px;
  border-radius: 30px;
  background: var(--color-gray4);
  box-shadow: 0 0 16px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.toggleSwitch::before {
  content: "ON";
  position: absolute;
  display: block;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  z-index: 10;
}
.toggleSwitch::after {
  content: "OFF";
  position: absolute;
  display: block;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray4);
  z-index: 10;
}
.toggleSwitch.active {
  background-color: var(--color-main);
}
.toggleSwitch.active::before {
  color: var(--color-main);
}
.toggleSwitch.active::after {
  color: #fff;
}
.toggleSwitch.active .toggleButton {
  left: 4px;
  background: #fff !important;
}
.toggleSwitch .toggleButton {
  width: 37px;
  height: 22px;
  position: absolute;
  top: 50%;
  left: calc(100% - 44px);
  transform: translateY(-50%);
  border-radius: 12px;
  background: #fff;
}

.toggleSwitch,
.toggleButton {
  transition: all 0.2s ease-in;
}

/*--------- 모달 ---------- */
.modal_list .modal-header {
  font-size: 18px;
  font-weight: 700;
}
.modal_list .modal-body {
  padding-block: 60px 50px;
}
.modal_list .modal-body .img_con {
  margin-bottom: 15px;
  text-align: center;
}
.modal_list .modal-body .txt_con {
  text-align: center;
}
.modal_list .modal-body .txt_con .t1 {
  font-size: 16px;
  font-weight: 500;
}
.modal_list .modal-footer .btn {
  width: 50%;
  border-radius: 0;
}
.modal_list .modal-footer .btn.btn-secondary {
  border: none;
  background-color: var(--color-gray2);
  color: var(--color-gray4);
}
.modal_list .modal-footer.one .btn {
  width: 100%;
}

.tastingNoteAdd .modal_btn {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 40px;
}
.tastingNoteAdd .modal_btn .add {
  border: 1px solid var(--color-gray3);
  border-radius: 10px;
  background-color: var(--color-pink);
  color: var(--color-main);
}
.tastingNoteAdd .modal_btn .review {
  border: 1px solid var(--color-gray3);
  border-radius: 10px;
  background-color: var(--color-gray1);
  color: var(--color-main);
}

.complaintModal .modal_list .modal-body {
  padding: 1rem;
}
.complaintModal .option {
  margin-bottom: 20px;
}
.complaintModal .option .btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 12px;
}
.complaintModal .option .btn .check_img {
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/img_notcheck_btn.png) no-repeat center;
  background-size: 24px;
}
.complaintModal .option .btn .opt {
  color: var(--color-gray5);
}
.complaintModal .option .btn.active {
  border: 1px solid var(--color-main);
  background-color: var(--color-pink);
}
.complaintModal .option .btn.active .check_img {
  background: url(../img/img_checked_btn.png) no-repeat center;
}
.complaintModal .option .btn.active .opt {
  color: var(--color-main);
}
.complaintModal .option:last-child {
  margin-bottom: 0;
}

.declaration .modal_list .modal-body {
  padding-block: 20px;
}
.declaration .modal_list .modal-body .txt_con {
  text-align: left;
}
.declaration .modal_list .modal-body .txt_con .t1 {
  padding-block: 25px;
  border-bottom: 1px solid var(--color-gray3);
  size: 18px;
  weight: 500;
}
.declaration .modal_list .modal-body .txt_con .t1:last-child {
  border-bottom: none;
}
.declaration .modal_list .modal-body .txt_con .t1 .btn {
  padding: 0;
}
.leave .modal_list .modal-body {
  padding: 1rem;
}
.leave .modal_list .modal-body textarea.form-control-lg::placeholder {
  font-size: 14px;
  font-weight: 500;
}
.leave .modal-footer .form-check {
  padding: 16px 0 16px 40px;
}
.leave .modal-footer .form-check .check_label::before {
  left: 16px;
}

.corkUseModal .recharge_txt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 50%;
  margin: 0 auto;
  padding: 20px 22px;
  border-radius: 10px;
  background-color: var(--color-gray1);
}
.corkUseModal .recharge_txt p {
  font-size: 16px;
  flex-shrink: 0;
}
.corkUseModal .recharge_txt .cork_amount {
  position: relative;
  padding-left: 25px;
  font-weight: 500;
}
.corkUseModal .recharge_txt .cork_amount::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("../img/img_corco_24px.png") no-repeat center/cover;
}
.corkUseModal .recharge_txt .dollar {
  font-weight: 600;
  color: #89090a;
}

.cellarEdit .modal_list .modal-body {
  padding-block: 20px;
}
.cellarEdit .modal_list .modal-body .txt_con {
  text-align: left;
}
.cellarEdit .modal_list .modal-body .txt_con .t1 {
  padding-block: 25px;
  border-bottom: 1px solid var(--color-gray3);
  size: 18px;
  weight: 500;
}
.cellarEdit .modal_list .modal-body .txt_con .t1.point {
  color: var(--color-main);
}
.cellarEdit .modal_list .modal-body .txt_con .t1:last-child {
  border-bottom: none;
}
.cellarEdit .modal_list .modal-body .txt_con .t1 .btn {
  padding: 0;
}
#wineResultModal .modal_list .modal-body {
  padding-block: 10px 20px;
}

/*--------- progress ---------- */
/*--------- 사용자 정보 ---------- */
.user_info {
  gap: 20px;
  margin-bottom: 30px;
}
.user_info .thumb_con {
  position: relative;
  width: 30%;
  border-radius: 50%;
  overflow: hidden;
}
.user_info .thumb_con::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.user_info .thumb_con .rounded-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user_info .thumb_con img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user_info .info {
  width: 100%;
}
.user_info .info .top_box {
  margin-bottom: 15px;
}
.user_info .info .top_box .nickname {
  gap: 10px;
}
.user_info .info .top_box .nickname span {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 2px;
  padding-right: 5px;
  border-radius: 100px;
  background-color: var(--color-pink);
  color: var(--color-main);
}
.user_info .info .top_box .nickname span::after {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: url("../img/icon/ico_prev_12px.png") no-repeat center/cover;
}
.user_info .info .top_box .nickname span a {
  position: relative;
  display: inline-block;
  left: 10px;
  width: 100%;
  padding-right: 30px;
}
.user_info .info .follow_num {
  padding: 13px 20px;
  border: 1px solid var(--color-gray3);
  border-radius: 10px;
  background-color: var(--color-gray1);
}
.user_info .info .follow_num .box {
  position: relative;
  width: 50%;
  text-align: center;
}
.user_info .info .follow_num .box::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background-color: var(--color-gray3);
}
.user_info .info .follow_num .box:last-child::before {
  display: none;
}
.user_info .info .follow_num .box .num {
  margin-bottom: 10px;
}
.user_info .info .follow_num .box .txt {
  color: var(--color-gray5);
}