/* MVI 커머스 플랫폼 new css */
/* 전체 */
* > a:hover,
* > a:focus {
  text-decoration: none;
}
@font-face {
  font-family: "KoddiUDOnGothic-Regular";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/KoddiUDOnGothic-Regular.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
html,
body {
  font-family: "KoddiUDOnGothic-Regular";
}
body {
  background: rgba(var(--bs-theme-rgb), 0.2);
  position: relative;
}
body::after {
  position: fixed;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: rgba(var(--bs-theme-rgb), 0.4);
  z-index: -1;
}
img {
  width: 100%;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}
p {
  margin: 0;
}
ul li {
  list-style-type: none;
}
figure {
  margin: 0;
}
.pb-12px {
  padding-bottom: 12px;
}
.parsley-required {
  color: var(--bs-danger);
}
.h-auto {
  height: auto;
}
.flex-1 {
  flex: 1;
}
.gap-8px {
  gap: 8px;
}
.border-gray {
  border-color: #999 !important;
  color: #666 !important;
}
.border-theme {
  border-color: var(--bs-theme) !important;
}
.mw-100 {
  max-width: 100;
}
.theme-color {
  color: var(--bs-theme-bold);
}
.mt-100 {
  margin-top: 100% !important;
}
.w-20 {
  width: 20% !important;
}
.m-w-50 {
  min-width: 50% !important;
}
.border-none {
  border: none !important;
}

/* 인풋 Input : 체크박스, 라디오박스, 텍스트 */
input[type="checkbox"],
.shop-checkBox {
  position: relative;
  padding: 0 0 1px 1px;
  width: 14px;
  height: 14px;
  transform: translate(2px, 1px);
}
input[type="checkbox"]::after,
.shop-checkBox::after {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
  background-color: #fff;
  z-index: 1;
  transform: translate(-2px, -2px);
}
input[type="checkbox"]:checked::after,
.shop-checkBox:checked::after {
  border: none;
  background-color: rgba(var(--bs-theme-rgb), 1);
}
input[type="checkbox"]:checked::before,
.shop-checkBox:checked::before {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: "\f00c";
  width: 16px;
  height: 16px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  z-index: 2;
  transform: translate(-1px, 0px);
}
input[type="radio"],
.shop-radio {
  position: relative;
  padding: 0 0 1px 1px;
  width: 14px;
  height: 14px;
  transform: translate(2px, 1px);
}
input[type="radio"]::after,
.shop-radio::after {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  border: solid 1px var(--bs-theme);
  border-radius: 100px;
  background-color: #fff;
  z-index: 1;
  transform: translate(-2px, -2px);
}
input[type="radio"]:checked::after,
.shop-radio:checked::after {
  border: solid 1px var(--bs-theme);
  background-color: #fff;
}
input[type="radio"]:checked::before,
.shop-radio:checked::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background-color: var(--bs-theme);
  z-index: 2;
  transform: translate(2px, 2px);
}
input[type="text"],
input[type="number"],
input[type="password"],
.shop-text {
  width: 100%;
  height: 56px;
  padding-left: 16px;
  padding-right: 12px;
  display: flex;
  align-items: center;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
  font-size: 16px;
}
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
.shop-text::placeholder {
  font-size: 16px;
  color: #666;
}
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
.shop-text[readonly] {
  background-color: #dcdcdc;
}

/* shop 전용 modal창 관련 css */
.modal-dialog {
  max-width: 480px !important;
  height: 100%;
  margin: 0 auto !important;
}
.modal-dialog-end {
  display: flex;
  align-items: flex-end;
}
#iframe.modal.fade .modal-dialog,
#checkIframe.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, 100dvh);
  transform: translate(0, calc(var(--vh, 1vh) * 100));
}
#iframe.modal.show .modal-dialog,
#checkIframe.modal.show .modal-dialog {
  transform: none;
}
/* 서브 모달 제자리에서 생성 - 시작 */
#subIframe.modal.fade .modal-dialog {
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}
#subIframe.modal.show .modal-dialog {
  transform: none;
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 480px) {
  #subIframe.modal.fade .modal-dialog {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.3s ease-out;
    transform: translate(100vw, 0);
  }
  #subIframe.modal.show .modal-dialog {
    transform: none;
  }
}
/* 서브 모달 제자리에서 생성 - 끝 */
#iframe .modal-content,
#checkIframe .modal-content {
  max-height: calc(100dvh - 64px);
  max-height: calc((var(--vh, 1vh) * 100) - 64px);
  height: auto;
  overflow: visible;
  border-radius: 4px 4px 0 0;
}
#iframe .modal-content:has(.popup-swiper) {
  overflow: hidden;
}
#iframe .modal-footer,
#checkIframe .modal-footer,
#subIframe .modal-footer {
  padding: 8px 12px;
  border: none;
  justify-content: flex-start;
}
#subIframe .modal-footer {
  border-bottom: solid 1px #dcdcdc;
}
#iframe .modal-footer > *,
#checkIframe .modal-footer > *,
#subIframe .modal-footer > * {
  margin: 0;
}
/* 주문/결제 -> 카드관리 및 추가 눌렀을 때 뜨는 모달창이 있을 시 아래 스타일 적용 */
body:has(.delivery-box) #checkIframe .modal-dialog,
body:has(.delivery-cont) #checkIframe .modal-dialog {
  background-color: rgba(0, 0, 0, 0.2);
}
.modal-check-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 700;
}
.modal-check-content > div {
  word-break: keep-all;
  text-align: center;
}
.modal-content.shop .modal-body {
  height: calc(100% - 119px);
}
@media (max-width: 420px) {
  .modal-content.shop .modal-body {
    height: calc(100% - 107px);
  }
}
.icon-box {
  background-color: #333;
  color: #fff;
  font-size: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  padding: 12px;
  width: 64px;
  height: 64px;
}
.icon-box.suc {
  background-color: #159a7b;
}
.icon-box.fail {
  background-color: var(--bs-danger);
}
.shop-header {
  position: relative;
  width: 100%;
  height: 16px;
}
.shop-header .shop-closeBtn {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  background: none;
  border-bottom: 24px solid #fff;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-radius: 4px;
  height: 0;
  width: 100px;
  opacity: 1;
}
.shop-header .shop-closeBtn::before {
  position: absolute;
  content: "";
  width: 60px;
  height: 3px;
  border-radius: 10px;
  background-color: #666;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
}
.addressInfo-box {
  border: solid 1px #dcdcdc;
  border-radius: 4px;
  padding: 0 12px;
}
.addressInfo-box .box {
  padding: 10px 0;
  border-bottom: dashed 1px #dcdcdc;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.addressInfo-box .box:nth-last-child(1) {
  border: none;
}
.braille-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  padding-top: 12px;
}
.braille-select .tit {
  font-weight: 700;
  margin: 0;
}
.radio-box {
  display: flex;
  font-size: 16px;
  gap: 20px;
}
.radio-btnBox {
  display: flex;
  font-size: 16px;
  gap: 12px;
}
.radio-btnBox input {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.radio-btnBox .button-box {
  flex: 1;
  border: none;
  /* background-color: #eee; */
  border-radius: 4px;
  color: #000;
  font-weight: 700;
}
.radio-btnBox .button-box label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  text-align: center;
  background-color: #eee;
  color: #000;
  border-radius: 5px;
  cursor: pointer;
  word-break: keep-all;
}
.radio-btnBox .button-box:has(input:checked) label {
  background-color: var(--bs-theme-bold);
  color: #fff;
}
.radio-btnBox .button-box:focus-within label {
  border: solid 4px #000;
  outline: none;
}
.easy-selectBox {
  width: 100%;
  padding: 8px 0;
}
.easy-selectBox:nth-last-child(1) {
  padding-bottom: 0;
}
.easy-selectBtn {
  border-radius: 4px;
}

/* 광고 팝업 모달창 (높이 자유 버전 / 높이 고정 버전의 경우 기존 max-height 주석 후 아래 주석 해제) */
.modal-content.today-popup .modal-body {
  max-height: calc(100% - 119px);
  position: relative;
  /* height: 500px;
  display: flex;
  align-items: center; */
}
.modal-content.today-popup .modal-body .popup-pagination {
  position: absolute;
  bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 0 4px #fff;
  text-align: center;
  z-index: 1;
}
.popup-swiper .swiper-slide {
  height: 40dvh;
  height: calc((var(--vh, 1vh) * 40));
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-swiper .swiper-slide > div,
.popup-swiper .swiper-slide a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-swiper .swiper-slide img {
  height: 100%;
  object-fit: contain;
}
@media (max-width: 420px) {
  .modal-content.today-popup .modal-body {
    max-height: calc(100% - 107px);
    /* height: 500px; */
  }
}

/* 좌우 padding이 12px일 때 구분 바 */
.blanBar {
  width: calc(100% + 24px);
  transform: translateX(-12px);
  height: 6px;
  background-color: #dcdcdc;
}
.subMy-page .blanBar,
.member-page .blanBar,
.my-page .blanBar,
.cart-page .blanBar,
.payment-page .blanBar,
.login-page .blanBar {
  width: 100%;
  transform: translateX(0);
}

@media (max-width: 480px) {
  .modal-dialog {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-dialog .modal-body {
    overflow-y: auto;
  }
  .modal-dialog .modal-content {
    height: 100%;
    border: 0;
    /* border-radius: 0; */
  }
  /* .modal-dialog .modal-header, */
  .modal-dialog .modal-footer {
    border-radius: 0;
  }
}
/* 결제 오류용 커스텀 modal 관련 css */
#OverlayBlocker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
#OverlayBlocker::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #ccc;
}

/* layput > main.php 관련 css */
#wrap {
  position: relative;
  /*max-width: 1280px;*/
  margin: 0 auto;
}
#app-wrap {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  background-color: #fff;
}
#content-wrap {
  position: relative;
  min-height: 100dvh;
  min-height: calc(var(--vh, 1vh) * 100);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
}
.pc-app-download {
  position: fixed;
  top: 50%;
  left: calc(50% + 280px);
  transform: translateY(-50%);
}
.logo-box {
  width: 120px;
}
.qr-code {
  width: 104px;
  height: 104px;
  background-color: #000;
}
.pc-app-download p {
  margin-bottom: 0;
}
.pc-app-download .txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 16px;
}
@media (max-width: 1240px) {
  .pc-app-download {
    display: none;
  }
}

/* 접근성 바로가기 */
#accessibility {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 11;
}
#accessibility li a {
  position: fixed;
  display: block;
  top: -128px;
  max-width: 480px;
  width: 100%;
  padding: 12px 16px;
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 16px;
}
#accessibility li a:focus,
#accessibility li a:active,
#accessibility li a:focus-visible {
  top: 0;
}
@media screen and (max-device-width: 768px) {
  body:has(.navi-cont) #accessibility:has(li a) {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 48px;
    position: relative;
    top: 0;
    z-index: 11;
    background: #000;
  }
  body:has(.navi-cont) #accessibility li a {
    padding: 12px 16px;
    background: #333;
    color: #fff;
    text-align: center;
    display: block;
    position: fixed;
    top: 0;
    max-width: 480px;
    width: 100%;
    text-decoration: none;
  }
}
/* #accessibility li a {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  width: 100%;
  padding: 12px 16px;
  background: #333;
  color: #fff;
  text-align: center;
  z-index: 10000;
}
#accessibility li a:focus,
#accessibility li a:focus-visible {
  transform: translateY(0);
} */

/* 스크롤바 없애기 */
body {
  -ms-overflow-style: none;
}
::-webkit-scrollbar {
  display: none;
}

/* 왜 있는지 모르겠는 css */
#mainContainer {
  min-height: 100dvh;
  min-height: calc(var(--vh, 1vh) * 100);
}

/* header */
.header-bar {
  position: relative;
  max-width: 480px;
  width: 100%;
  height: 64px;
  z-index: 10;
}
.header-container {
  position: fixed;
  width: 100%;
  max-width: 480px;

  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: solid 1px #ddd;
  padding: 0 8px;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;

  z-index: 1001;
}
/* .header-container.shopHeader-opacity {
  background: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0);
} */
.header-bar .tit-box img {
  width: 120px;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.header-centerTxt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  width: max-content;
}
@media (max-width: 420px) {
  .header-bar,
  .header-container {
    height: 52px;
  }
  .header-bar .tit-box img {
    width: 90px;
  }
}

/* 여기 아래부턴 header style 정해놓고 수정해야할듯 */
.header-bar .header-left,
.header-bar .equ-box {
  display: flex;
  gap: 4px;
}
.header-bar .equ-box button,
.header-bar .equ-box a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  border: none;
  background-color: transparent;
  font-size: 22px;
}
.back-btn,
.close-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  width: 56px;
  height: 56px;
  font-size: 24px;
  background-color: transparent;
  text-decoration: none;
  color: #000;
}
.back-btn:hover,
.back-btn:active,
.back-btn:focus,
.close-btn:hover,
.close-btn:active,
.close-btn:focus {
  color: #000;
}
@media (max-width: 420px) {
  .header-bar .equ-box button,
  .header-bar .equ-box a,
  .back-btn,
  .close-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* login */
.form-body {
  overflow: auto;
  flex: 1 1 0%;
  padding: 24px 16px 24px;
}
.member-form-list .member-form-item {
  margin-bottom: 20px;
}
.member-form-input {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #505050;
  padding: 8px 20px;
  border: 0;
  border-bottom: 4px solid #f1f1f1;
  outline: none;
}
.idpw-find {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  font-weight: 700;
  color: #505050;
  font-weight: 700;
}
.idpw-find a {
  display: inline-flex;
  align-items: center;
}
.idpw-find > a + a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #ccc;
  margin: 0 12px;
}
.join-footer {
  padding: 20px 16px 32px;
  position: fixed;
  bottom: 0;
  max-width: 480px;
  width: 100%;
  background-color: #fff;
}
.login-btn-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  color: #202020;
  border: 0;
  font-size: 16px;
  background-color: #395c8c !important;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* main banner */
.mobile-banner {
  border-bottom: solid 1px #ddd;
}
.main-banner-swiper {
  width: 100%;
  height: auto;
}
.main-banner-swiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #dcdcdc;
  /* background-size: cover; */
  /* background-size: auto 100%; */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 180px;
}
.popup-swiper .swiper-slide {
  background: #dcdcdc;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.main-banner-swiper .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: left;
  display: flex;
  align-items: center;
  background-position: top center;
  background-repeat: no-repeat;
}
.main-banner-swiper .inner .text-area {
  height: 200px;
  width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
  padding: 0 20px;
  color: #fff;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
  position: relative;

  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.main-banner-swiper .inner .text-area.animate {
  opacity: 1;
  transform: translateY(0);
}
.swiper-controls {
  position: relative;
}
.swiper-controls .arrow-box {
  position: absolute;
  top: -90px;
  left: 0;
  width: 100%;
}
.popup-swiper .arrow-box {
  top: calc((var(--vh, 1vh) * -20));
}
.product-swiper .arrow-box {
  top: -240px;
}
.main-banner-swiper .swiper-button-next,
.main-banner-swiper .swiper-button-prev,
.popup-swiper .swiper-button-next,
.popup-swiper .swiper-button-prev,
.product-swiper .swiper-button-next,
.product-swiper .swiper-button-prev {
  /* background-image: none !important; */
  /* height: 40px; */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%2312856a'/%3E%3C/svg%3E") !important;
  color: var(--bs-theme);
  font-weight: 700;
}
.main-banner-swiper .swiper-button-prev,
.popup-swiper .swiper-button-prev,
.product-swiper .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2312856a'%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-pagination {
  position: absolute;
  bottom: 4px;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: fit-content !important;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.swiper-pagination span {
  /* background-color: var(--bs-theme); */
  /* box-shadow: 0 0 4px #fff; */
}
.popup-swiper-button-play-pause,
.swiper-button-play-pause {
  border: none;
  border-radius: 0 0 8px 0;
  background-color: rgba(255, 255, 255, 0.8);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

/* navi */
.navi-bar {
  max-width: 480px;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 10;
}
.navi-cont {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  border-top: solid 1px #f0f0f0;
  overflow: hidden;
}
.navi-cont a {
  width: 25%;
  height: 100%;
  padding: 4px;
  border-right: dashed 0.5px #eee;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
}
.navi-cont a i {
  font-size: 20px;
  padding-bottom: 4px;
}
.navi-cont a p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}
.navi-cont a:nth-last-child(1) {
  border: none;
}
.navi-cont a:hover,
.navi-cont a:focus {
  text-decoration: none;
  background-color: #eee;
}
.navi-cont a.active {
  color: rgba(var(--bs-theme-rgb), 1);
}

/* 메인페이지 카테고리 */
.main-category-list {
  padding: 16px 12px;
  border-bottom: solid 1px #dcdcdc;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.button-list {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.shopBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: none;
  color: #fff;
  background-color: var(--bs-theme-bold);
  font-size: 16px;
  font-weight: 700;
  /* padding: 12px 16px; */
  padding: 12px;
  height: 48px;
  text-decoration: none;
}
.shopBtn.btn-close {
  box-sizing: inherit !important;
  background: var(--bs-theme-bold) !important;
  opacity: 1 !important;
}
.shopBtn.shopBtn-border {
  border: solid 1px var(--bs-theme-bold);
  color: var(--bs-theme-bold);
  background-color: #fff;
}
.shopBtn.shopBtn-border.b-none {
  border: none;
  padding: 4px 8px;
  height: auto;
}
.shopBtn.shopBtn-gray {
  border: solid 1px #dcdcdc;
  color: #666666;
  background-color: #f9f9f9;
}
.shopBtn.shopBtn-sub {
  background-color: var(--bs-theme-light);
  color: var(--bs-theme-bold);
  border: solid 1px rgba(var(--bs-theme-bold-rgb), 0.2);
}
.shopBtn.shopBtn-wish {
  border: none;
  background-color: transparent;
  color: var(--bs-theme-bold);
  padding: 4px;
  font-size: 20px;
}
.shopBtn.shopBtn-search {
  border: solid 1px var(--bs-theme-bold);
  border-radius: 100px;
  color: var(--bs-theme-bold);
  background-color: transparent;
  padding: 12px 16px;
}
.shopBtn:hover,
.shopBtn:active,
.shopBtn:focus {
  text-decoration: none;
  color: #fff;
}
.shopBtn.shopBtn-border:hover,
.shopBtn.shopBtn-border:active,
.shopBtn.shopBtn-border:focus {
  color: var(--bs-theme-bold);
}
.shopBtn.shopBtn-gray:hover,
.shopBtn.shopBtn-gray:active,
.shopBtn.shopBtn-gray:focus {
  color: #666666;
}
.shopBtn.shopBtn-sub:hover,
.shopBtn.shopBtn-sub:active,
.shopBtn.shopBtn-sub:focus {
  color: var(--bs-theme-bold);
}
.shopBtn.shopBtn-danger {
  background-color: var(--bs-danger);
}
.shopBtn.shopBtn-border.border-danger {
  border: solid 1px var(--bs-danger);
  color: var(--bs-danger);
}
.shopBtn.shopBtn-border.border-danger:hover,
.shopBtn.shopBtn-border.border-danger:active,
.shopBtn.shopBtn-border.border-danger:focus {
  border: solid 1px var(--bs-danger);
  color: var(--bs-danger);
}
.shopBtn.shopBtn-wish:hover,
.shopBtn.shopBtn-wish:active,
.shopBtn.shopBtn-wish:focus {
  border: none;
  color: var(--bs-theme-bold);
}
.shopBtn.shopBtn-search:hover,
.shopBtn.shopBtn-search:active,
.shopBtn.shopBtn-search:focus {
  color: var(--bs-theme-bold);
}
.shopPagination {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  /* border-top: dashed 1px #dcdcdc; */
}
.shopPagination .pagination {
  display: flex;
  gap: 4px;
}
.shopPagination .pagination li {
  width: 44px;
  height: 44px;
}
.shopPagination .pagination li a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #000;
  width: 100%;
  height: 100%;
  font-size: 16px;
  border-radius: 4px;
}
.shopPagination .pagination li.active a {
  background-color: var(--bs-theme-bold);
  color: #fff;
  font-weight: 700;
}
.shopPagination .pagination li a:hover {
  background-color: rgba(var(--bs-theme-rgb), 0.2);
}
.shopPagination .pagination li.active a:hover {
  background-color: var(--bs-theme-bold);
}
.shopSelect {
  width: 130px;
  height: auto;
  border-radius: 4px;
  border: solid 1px #dcdcdc;
  padding: 12px 12px;
  font-size: 16px;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath fill='%23333' d='M0 0l6 6 6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.shopSelect option {
  background-color: #fff;
  border-radius: 4px;
}
.shopSelect option:active {
  background-color: var(--bs-theme-light);
}
.shopFont {
  color: var(--bs-theme-bold);
}
.select-btnBox {
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.select-btnBox.w-half > a,
.select-btnBox.w-half > button {
  flex: 1;
}

/* 상세페이지 하단 */
.order-cont {
  height: 64px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-top: solid 1px #f0f0f0;
}
.order-cont > a,
.order-cont > button {
  flex: 1;
}

/* 내부 공통 */
.store-section {
  padding: 24px 12px;
}
.store-section.navi-on {
  padding: 24px 12px 76px 12px;
}
.store-section.navi-on.main {
  padding: 24px 12px 36px 12px;
}
body:has(.navi-on) .navi-bar .navi-cont,
body:has(.order-on) .navi-bar .order-cont {
  display: flex;
}

/* 메인페이지 */
.goods-cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: dashed 1px #ddd;
}
.goods-cont .goods-box {
  width: calc(100% - 60px);
  /* flex: 1; */
  margin-right: 20px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  text-decoration: none;
}
.goods-cont .goods-box:hover,
.goods-cont .goods-box:focus {
  text-decoration: none;
}
.goods-cont .goods-txt {
  font-weight: 500;
  padding-left: 8px;
}
.goods-cont .goods-txt .price {
  padding-top: 4px;
  font-weight: 700;
  color: #000;
  margin: 0;
}
.goods-box .goods-name {
  width: 100%;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #000;
}
.goods-cont .add-cart {
  /*padding: 32px 0;*/
  max-width: 18%;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-color: rgba(var(--bs-theme-rgb), 1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: none;
}
.goods-cont .img-box {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: solid 1px #ddd;
  overflow: hidden;
}
.goods-cont .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.goods-cont .txt-box {
  width: calc(100% - 86px);
  /* flex: 1; */
  padding: 4px 0;
}

.goods-none {
  width: 100%;
  display: flex;
  gap: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  font-size: 24px;
  font-weight: 700;
}
.goods-none i {
  font-size: 64px;
}

/* 상세페이지 */
.goods-info {
  /* margin-top: -64px; */
}
.goods-info.sub {
  margin-top: 0;
}
.goods-page .img-box {
  width: 100%;
  /* padding-bottom: 100%; */
  position: relative;
  overflow: hidden;
}
.goods-page .img-box img {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: contain;
}
.goods-page .txt-box {
  border-top: solid 1px #dcdcdc;
  border-bottom: solid 1px #dcdcdc;
  width: 100%;
  padding: 20px 12px;
}
.goods-page .txt-box p {
  margin: 0;
}
.goods-page .goods-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px !important;
}
.goods-page .price {
  font-size: 16px;
  font-weight: 700;
}
.detail-cont {
  min-height: 100%;
}
.detail-cont .tit {
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-bottom: solid 1px #ddd;
  display: flex;
  align-items: center;
  z-index: 1;
  position: sticky;
  top: 64px;
  left: 0;
  background: #f9f9f9;
}
.detail-cont .detail-txt {
  padding: 16px;
  padding-bottom: 96px;
  font-size: 16px;
  font-weight: 300;
  line-height: 2rem;
  height: calc(100% - 56px);
}

#wrap.accessibility-on .goods-info {
  margin-top: 0;
  width: 100%;
  display: flex;
  padding: 16px 12px;
  border-top: solid 1px #dcdcdc;
  border-bottom: solid 1px #dcdcdc;
}
#wrap.accessibility-on .goods-page .img-box {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  border: solid 1px #dcdcdc;
}
#wrap.accessibility-on .goods-page .txt-box {
  width: auto;
  padding: 4px 0 0 8px;
  border: none;
}
@media (max-width: 480px) {
  .goods-info {
    /* margin-top: -52px; */
  }
  .detail-cont .tit {
    top: 52px;
  }
  #wrap.accessibility-on .goods-info {
    margin-top: 0;
  }
}

/* 세부페이지 장바구니 팝업 modal창 */
.modal-body .goods-detailPage {
  padding: 0 12px 4px 12px;
}
.goods-detailPage .goods-info {
  display: block !important;
  width: 100% !important;
  padding: 8px 0 !important;
  border: none !important;
  align-items: flex-end;
}
.goods-detailPage .img-box {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}
.goods-detailPage .img-box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.goods-detailPage .txt-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.goods-detailPage .txt-box p {
  margin: 0;
}
.goods-detailPage .goods-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px !important;
}
.goods-detailPage .price {
  font-size: 16px;
  font-weight: 700;
}
.goods-detailPage .total-price {
  width: 100%;
  padding: 0 12px;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eeeeee;
  border: none;
  border-radius: 8px;
  transform: none;
}
.goods-detailPage .total-price p {
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}
.goods-detailPage .total-price .totalTxt,
.pay-label {
  font-weight: 700;
}
.pay-address {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pay-cardType {
  padding: 2px 4px;
  font-size: 14px;
  background: var(--bs-theme);
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
}
.edit-btn {
  height: 44px;
  border: none;
  background-color: transparent;
  padding: 0 12px;
  margin-left: 12px;
}
.totalPay-price {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 700;
}
.totalPay-price > div {
  display: flex;
  gap: 4px;
}
.totalPay-price .totalpay-txt {
  font-size: 20px;
  color: var(--bs-danger);
}
.agreement-box {
  font-size: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}

/* 장바구니 */
.check-box {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.check-box input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
}
.check-box label {
  margin: 0;
}
.cart-relative {
  position: relative;
  height: 56px;
}
.cart-top {
  position: fixed;
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 14px 12px;
  background: #fff;
  max-width: 480px;
  z-index: 2;
  border-bottom: solid 1px #dcdcdc;
}
.allDel-Btn {
  font-size: 16px;
  font-weight: 700;
  color: #666666;
  border: none;
  background-color: transparent;
}
.allDel-Btn:hover,
.allDel-Btn:focus {
  font-weight: 700;
  color: #666666;
  text-decoration: none;
}
.goods-wrap {
  margin: 20px 12px;
  padding: 12px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
}
.company-list {
  font-size: 16px;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: solid 1px #dcdcdc;
}
.cart-goods-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-bottom: dashed 1px #ddd;
  padding: 16px 0;
}
.cart-goods-box:nth-last-child(1) {
  border-bottom: none;
}
.cart-goods-topInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
}
.cart-goods-topInfo .check-box {
  width: calc(100% - 24px);
  gap: 12px;
}
.goods-list .goods-info {
  padding: 0;
  width: calc(100% - 120px);
}
.goods-list a,
.goods-list .goods-name,
.goods-list .price {
  font-size: 16px;
  color: #000;
  text-decoration: none;
  font-weight: 500;
}
.cart-goods-topInfo .goods-name {
  width: 100%;
  max-width: calc(100% - 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-goods-info {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.cart-priceBox {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-priceBox .price {
  font-weight: 700;
}
.cart-page {
  padding-bottom: 64px;
}
.cart-page .img-box {
  width: 80px;
  height: 80px;
  border: solid 1px #dcdcdc;
  overflow: hidden;
  border-radius: 4px;
}
.goods-list .goods-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  width: 120px;
}
.goods-list .goods-num button {
  border: none;
  font-size: 24px;
}
.del-btn {
  border: none;
  font-size: 18px;
  display: flex;
  background-color: transparent;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
}
.goods-num {
  position: relative;
  z-index: 1;
}
.goods-num .inputAmount {
  text-align: center !important;
  font-weight: 700;
  background-color: #fff;
  font-size: 16px;
  width: 120px;
  height: 40px;
  border-radius: 100px !important;
  border: solid 1px #dcdcdc;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox  */
input[type="number"] {
  -moz-appearance: textfield;
}
.goods-num .input-group-text {
  position: absolute;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;

  font-size: 18px !important;
  width: 40px;
  height: 40px;
  background-color: transparent;
  color: #666;
  border: none;
}
.goods-num .input-group-text.one {
  color: #dcdcdc;
}
.goods-num .decreaseAmount {
  top: 0;
  left: 0;
  z-index: 3;
}
.goods-num .increaseAmount {
  top: 0;
  right: 0;
  z-index: 2;
}
.goods-wrap-total {
  background-color: #eeeeee;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 16px;

  display: flex;
  flex-direction: column;
  gap: 8px;
}
.goods-wrap-total .top {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.goods-wrap-total .top > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.goods-wrap-total .under {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.total-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% + 24px);
  transform: translateX(-12px);
  height: 56px;
  font-weight: 700;
  padding: 0 12px;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}
.cart-page .order-cont {
  justify-content: space-between;
}
.cart-footerinfo {
  display: flex;
  gap: 8px;
  font-size: 14px;
  flex: 1;
  max-width: 150px;
  justify-content: center;
}
@media (min-width: 480px) {
  .goods-wrap-total .top > div {
    flex-direction: row;
    gap: 8px;
  }
}
@media (min-width: 400px) {
  .cart-footerinfo {
    font-size: 16px;
  }
}
.cart-page .shopBtn {
  width: 100%;
  max-width: calc(100% - 120px);
  min-width: 180px;
  flex: 1;
}

/* 주문/결제 페이지 */
.payment-page {
  padding-bottom: 64px;
}
.payment-box {
  padding: 20px 12px;
}
.payment-box .goods-wrap {
  margin-left: 0;
  margin-right: 0;
}
.payment-page.order .payment-box .goods-wrap {
  border: solid 4px var(--bs-theme);
}
.payment-box .goods-wrap:nth-last-child(1) {
  margin-bottom: 0;
}
.payment-box .goods-cont {
  margin: 0;
  padding: 8px 0;
  border-bottom: dashed 1px #dcdcdc;
  align-items: flex-start;
  justify-content: flex-start;
}
.payment-box .company-list {
  margin-bottom: 8px;
}
.payment-box .goods-cont:nth-child(1) {
  padding-top: 0;
}
.payment-box .goods-cont:nth-last-child(1) {
  padding-bottom: 0;
  border: none;
}
.payment-box .goods-cont .img-box {
  width: 64px;
  height: 64px;
}
.payment-box .goods-cont .txt-box {
  padding: 0;
  margin-left: 8px;
}
.txt-box .detail-info {
  display: flex;
  gap: 16px;
  font-size: 16px;
  align-items: center;
}
.txt-box .detail-info .price {
  font-weight: 700;
}
.txt-box .detail-info .num {
  color: #666;
}
.payment-box .company-list {
  font-weight: 700;
}
.payment-box .title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
}
.payment-box.guide {
  font-size: 16px;
}
.payment-box.guide .total-gui {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: solid 1px #dcdcdc;
}
.payment-box.guide .total-gui > div {
  display: flex;
  justify-content: space-between;
}
.payment-box.guide .total-guiPay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
}
.payment-box.guide .total-guiPay .price {
  color: var(--bs-theme);
}
.delivery-button {
  width: 100%;
  padding: 16px;
  border-radius: 4px;
  background-color: #f9f9f9;
  border: solid 1px #dcdcdc;
  display: flex;
  justify-content: space-between;
  text-align: left;
  font-size: 16px;
}
.button-box {
  width: calc(100% - 20px);
}
.button-titBox {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 700;
}
.button-badge {
  font-size: 14px;
  font-weight: 700;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(var(--bs-theme-rgb), 0.2);
}
.button-subBox {
  color: #666;
  font-weight: 700;
}
.button-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.write-width {
  width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.right-button {
  display: flex;
  align-items: center;
  font-size: 20px;
}
.box.important-alert {
  font-size: 16px;
  padding: 16px;
  background-color: #eee;
  border-radius: 4px;
}
.box.important-alert .tit {
  font-weight: 700;
  font-size: 18px;
  color: var(--bs-danger);
}

/* 배송지 관리 */
.delivery-Page {
  padding: 20px 12px;
}
.delivery-cont {
  padding: 16px 12px;
  font-size: 16px;
  border-bottom: solid 1px #dcdcdc;
}
.delivery-box {
  padding: 16px;
  font-size: 16px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
  margin-bottom: 16px;
}
.delivery-box .button-badge {
  margin-bottom: 8px;
}
.delivery-box .txt-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.delivery-box .name {
  display: flex;
  gap: 8px;
  font-weight: 700;
}
.delivery-box .info {
  color: #666;
}
.delivery-cont .sub-label {
  color: #000;
  width: max-content;
}
/* 배송요청사항 */
.request-cont {
  border: solid 1px #dcdcdc;
  border-radius: 4px;
  overflow: hidden;
}
.request-cont .request-box {
  border-bottom: solid 1px #dcdcdc;
}
.request-cont .request-box:nth-last-child(1) {
  border: none;
}
.request-cont .request-box label {
  display: flex;
  padding: 20px 12px;
  flex-direction: column;
  gap: 8px;
}
.request-cont.return .request-box > .title {
  font-weight: 700;
  padding: 8px 12px;
  margin: 0;
  background-color: #eee;
}
.request-cont.return .request-box label {
  border-top: dashed 1px #dcdcdc;
}
.request-cont .request-box label:has(input[type="radio"]:checked) {
  background-color: rgba(var(--bs-theme-rgb), 0.2);
}
.request-item .title {
  font-size: 16px;
  font-weight: 700;
}
/* 카드 관리 */
.card-cont {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
}
.card-box {
  display: flex;
  gap: 12px;
}
.fake-input {
  width: 100%;
  height: 56px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
  font-size: 16px;

  cursor: pointer;
  user-select: none;
}
.card-cont .fake-input,
.card-cont .card-input {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  padding: 4px 8px 0 8px;
  border: none;
  border-bottom: solid 1px #dcdcdc;
  border-radius: 0;
}
/* .card-input:active, */
.card-input:focus,
.fake-input.active,
.fake-input.active:focus {
  background-color: rgba(var(--bs-theme-rgb), 0.2);
}
.date-box {
  display: flex;
  font-size: 16px;
  gap: 20px;
}
.date-box .card-input {
  width: 50%;
}

/* 하단 배치 키패드 */
.keypad {
  max-width: 480px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-top: solid 1px #dcdcdc;
  /* background-color: var(--bs-theme-light); */
  padding: 4px;
  background-color: #dcdcdc;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.keypad button {
  width: 25%;
  padding: 16px;
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-right: solid 1px #e0e0e0;
  border-bottom: solid 1px #e0e0e0;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.keypad button.del,
.keypad button.close-keypad {
  background-color: #f2f2f2;
}
.keypad button:hover,
.keypad button:active,
.keypad button.del:hover,
.keypad button.del:active,
.keypad button.close-keypad:hover,
.keypad button.close-keypad:active {
  background-color: #dcdcdc;
}
.keypad button:nth-child(4n) {
  border-right: none;
}
.keypad button:nth-child(n + 9) {
  border-bottom: none;
}

/* 카테고리 */
.shop-list-area {
  font-size: 16px;
}
.shop-list-area > .deps-list {
  display: flex;
  flex-wrap: wrap;
}
.shop-list-area > .deps-list > li {
  width: 50%;
  padding: 0 4px;
}
.shop-list-area > .deps-list > li > a {
  position: relative;
  display: block;
  padding: 12px 20px 12px 12px;
  border-radius: 4px 4px 0 0;
  /* border-bottom: 1px solid #dfdfdf; */
  font-size: 16px;
  font-weight: 600;
  color: #505050;
  transition: 0s;
}
.shop-list-area > .deps-list > li > a,
.shop-list-area .deps2-list > li > a {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.shop-list-area > .deps-list > li > a:hover,
.shop-list-area > .deps-list > li > a:active,
.shop-list-area > .deps-list > li > a:focus,
.shop-list-area .deps2-list > li > a:hover,
.shop-list-area .deps2-list > li > a:active,
.shop-list-area .deps2-list > li > a:focus {
  text-decoration: none;
}
.shop-list-area > .deps1-list > li > a::before {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  font-family: "Font Awesome 6 pro";
  font-weight: 900;
  content: "\f0d7";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.shop-list-area .deps1-list > li.active > a {
  /* background: #f4f4f7; */
  background-color: rgba(var(--bs-theme-rgb), 0.1);
  border: 0;
  font-weight: 700;
}
.shop-list-area .deps1-list > li.active:nth-child(-n + 2) > a {
  border-radius: 4px 4px 0 0;
}
.shop-list-area .deps1-list > li.active > a::before {
  transform: translateY(-50%) rotate(180deg);
}
.shop-list-area .deps2-list {
  display: none;
  position: relative;
  width: calc(200% + 8px);
  /* background: #f4f4f7; */
  background-color: rgba(var(--bs-theme-rgb), 0.1);
  flex-wrap: wrap;
  padding: 4px 0px;
  border-radius: 0px 4px 4px 4px;
  z-index: 1;
}
.shop-list-area .deps1-list > li:nth-child(2n) .deps2-list {
  left: calc(-100% - 8px);
  border-radius: 4px 0px 4px 4px;
}
.shop-list-area li.active .deps2-list {
  display: flex !important;
}
.shop-list-area .deps2-list > li {
  width: calc(50%);
}
.shop-list-area .deps2-list > li > a {
  display: block;
  padding: 12px 16px;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

/* 마이페이지 */
#mainContainer:has(.my-page) {
  background-color: #f9f9f9;
}
.my-page {
  background-color: #fff;
}
.mypage-title-wrap {
  /* padding: 24px 12px 20px 12px; */
}
.mypage-title-wrap > a:focus {
  background-color: #eee;
}
.mypage-login-after,
.mypage-login-after:hover,
.mypage-login-after:focus,
.mypage-login-after:active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #000;
  padding: 24px 12px 20px 12px;
}
.mypage-login-after .left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mypage-login-after .nickname {
  font-size: 20px;
  font-weight: 700;
  color: #000;
}
.mypage-login-after .login-info {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 16px;
}
.right-btn {
  font-size: 20px;
  color: #000;
  padding: 12px 0 12px 20px;
}
.right-btn:hover,
.right-btn:focus,
.right-btn:active {
  color: #000;
}
.mypage-menu .title {
  font-size: 16px;
  font-weight: 700;
  padding: 8px 12px;
  background: #f0f0f0;
}
.mypage-menu:nth-last-child(1) {
  border-bottom: solid 1px #dcdcdc;
}
.mypage-menu li a,
.mypage-menu li > div {
  padding: 0 12px;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  border-bottom: solid 1px #dcdcdc;
  text-decoration: none;
  color: #000;
}
.mypage-menu li a:hover,
.mypage-menu li a:focus,
.mypage-menu li a:active {
  text-decoration: none;
  color: #000;
}
.mypage-menu li a:focus,
.mypage-menu li > div:focus {
  background-color: #eee;
}
.mypage-menu li:nth-last-child(1) a {
  border: none;
}
.logout-btn,
.logout-btn:hover,
.logout-btn:focus,
.logout-btn:active {
  padding: 6px 16px;
  font-size: 16px;
  border: solid 1px #dcdcdc;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  margin: 16px 0 76px 0;
}
.on-off-btn .switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 44px;
}
.on-off-btn .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.on-off-btn .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: var(--bs-theme-bold); */
  background-color: #fff;
  transition: 0.4s;
  border-radius: 34px;
  border: solid 2px var(--bs-theme-bold);
}
.on-off-btn .slider:focus {
}
.on-off-btn .slider::before {
  position: absolute;
  content: "일반";
  height: 36px;
  width: 66px;
  left: 2px;
  bottom: 2px;
  background-color: var(--bs-theme-bold);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: 0.4s;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.on-off-btn input:checked + .slider {
  background-color: var(--bs-theme-bold);
}
.on-off-btn input:focus + .slider {
  box-shadow: 0 0 6px 0 rgba(var(--bs-theme-rgb), 0.8);
}
.on-off-btn input:checked + .slider::before {
  transform: translateX(26px);
  content: "접근성";
  background-color: #fff !important;
  color: var(--bs-theme-bold) !important;
}
.on-off-btn.not-text .switch {
  width: 70px;
}
.on-off-btn.not-text .slider::before,
.on-off-btn.not-text input:checked + .slider::before {
  content: "";
  width: 36px;
}

/* 마이페이지 > 회원정보확인 페이지 */
.member-topCont {
  font-size: 16px;
  padding: 24px 12px 20px 12px;
}
.member-topCont h2 {
  font-weight: 700;
  font-size: 18px !important;
  margin-bottom: 4px;
}
#searchDiv .member-topCont h2 {
  margin-bottom: 0;
}
.form-cont {
  padding: 0 12px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.input-cont,
.id-box,
.pw-box {
  display: flex;
  align-items: center;
}
.input-cont .input-cont-tit,
.id-box .id,
.pw-box .pw {
  width: 80px;
  font-weight: 700;
  color: #666;
}
.pw-box .input-cont {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: calc(100% - 80px);
  max-width: 100%;
}
.pw-box input {
  flex: 1;
  height: 56px;
  padding-left: 16px;
  display: flex;
  align-items: center;
  border: solid 1px #dcdcdc;
}
.input-cont .mb_password_error_chk {
  color: var(--bs-danger);
  max-width: calc(100% - 80px);
}

/* 마이페이지 > 회원정보 수정 페이지 */
.member-cont {
  padding: 16px 12px;
  font-size: 16px;
  border-bottom: solid 1px #dcdcdc;
}
.member-topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.member-topBox .nickname {
  font-weight: 700;
}
.link-btn,
.link-btn:hover,
.link-btn:active,
.link-btn:focus {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-theme-bold);
  text-decoration: none;
}
.member-underBox {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: space-between;
}
.modal .member-underBox {
  height: auto;
}
.member-underBox .box {
  display: flex;
}
.member-underBox .box.cert {
  flex-direction: column;
}
.edit-item {
  width: 100%;
}
.edit-item .edit-cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edit-item .edit-box {
  display: flex;
  width: calc(100% - 70px);
}
.edit-item .edit-box .sub {
  width: calc(100% - 80px);
  word-break: break-all;
}
.member-underBox .box .tit {
  min-width: 80px;
  color: #666;
}
/* .member-underBox .box > div {
  line-height: 32px;
} */
.member-page {
  padding-bottom: 56px;
}
.adv-txt {
  color: #666;
}
.etc-box {
  background-color: #eee;
  padding: 12px;
  border-radius: 4px;
}

/* 인증번호 남은 시간 관련 */
.cert-input {
  position: relative;
}
.cert-time {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  margin-top: 2px;
  color: var(--bs-error-color);
  font-weight: 700;
}
.sub-label {
  font-size: 16px;
  font-weight: 700;
  color: #666;
  margin-bottom: 4px;
}
.cert-btnBox {
  display: flex;
  margin: 8px 0;
  gap: 8px;
}
.cert-btnBox .left {
  flex: 1;
}
.cert-btnBox .right {
  flex: 1;
}

/* 결제완료 페이지 */
.final-deliveryCont {
  padding: 16px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
  font-size: 16px;
}
.delivery-info {
  border-bottom: solid 1px #dcdcdc;
  padding-bottom: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.delivery-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.delivery-add .box {
  display: flex;
  gap: 4px;
}
.delivery-add .box.col {
  flex-direction: column;
}
.delivery-add .box .tit {
  font-weight: 700;
}

/* 주문내역 페이지 */
.order-historyPage {
  padding: 20px 12px;
}
.history-box {
  font-size: 16px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-box .top,
.history-box .under .on {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-box .top .tit {
  font-weight: 700;
  font-size: 24px;
}
.history-box .under {
  padding: 12px 16px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
}
.history-box .under .on {
  border-bottom: solid 1px #dcdcdc;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.history-box .under .on .tit {
  font-weight: 700;
  font-size: 18px;
}
.history-box .under .info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-box .under .info > div {
  display: flex;
  justify-content: space-between;
}
.history-box .under .info > div .num {
  font-weight: 700;
  color: #666;
}

/* 회원탈퇴 */
.modal-body:has(.withdrawal-box) {
  padding: 0;
}
.withdrawal-box {
  font-size: 16px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 700;
}
.withdrawal-box li {
  padding-left: 12px;
  position: relative;
}
.withdrawal-box li::before {
  position: absolute;
  content: "";
  top: 12px;
  left: 2px;
  width: 6px;
  height: 2px;
  background-color: #000;
}

/* 카테고리 2dept 페이지 */
body:has(.dept2_accessibility) #accessibility {
  display: none;
}
.category-page {
  padding: 0 12px;
  font-family: "KoddiUDOnGothic-Regular";
}
.category-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 16px;
  padding: 8px 0;
}
.category-selectBox {
  width: calc(50% - 12px);
}
.category-selectBox a.ui-button:active,
.category-selectBox .ui-button:active {
  border: solid 1px #dcdcdc;
}
.category-selectBox .ui-selectmenu-button.ui-button,
#depth2Select,
#depth3Select {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  padding: 13px 8px 13px 12px;
  background-color: #fff;
  border: solid 1px #dcdcdc;
  border-radius: 4px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#depth2Select,
#depth3Select {
  padding: 9px 30px 9px 12px;
}
/* .category-selectBox .ui-selectmenu-button.ui-button:hover, */
.category-selectBox .ui-selectmenu-button.ui-button:active,
.category-selectBox .ui-selectmenu-button.ui-button:focus {
  background-color: var(--bs-theme-light);
  color: #000;
}
.category-selectBox .ui-icon {
  width: 20px;
  height: 16px;
  scale: 1.6;
}
.category-selectBox .ui-selectmenu-text {
  margin-top: -2px;
  margin-right: 4px;
  width: calc(100% - 20px);
  font-family: "KoddiUDOnGothic-Regular";
}
.filter-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  font-size: 16px;
}
.filter-cont .left-txt {
  display: flex;
}
.ui-selectmenu-menu {
  top: 132px !important;
  width: 480px;
  left: 50% !important;
  transform: translateX(-50%);
  height: calc(100dvh - 132px);
  height: calc((var(--vh, 1vh) * 100) - 132px);
}
.ui-widget.ui-widget-content {
  border: none;
  width: calc(100% - 1px);
}
.ui-menu .ui-menu-item-wrapper {
  font-size: 16px;
  padding: 14px 12px 14px 20px;
}
.ui-selectmenu-menu .ui-menu {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-items: flex-start;
  align-content: flex-start;
  background-color: #f9f9f9;
}
.ui-menu .ui-menu-item {
  width: 50%;
  height: fit-content;
}
.ui-menu .ui-menu-item div {
  background-color: #fff;
  border-bottom: solid 1px #dcdcdc !important;
  border-right: solid 1px #dcdcdc !important;
  font-family: "KoddiUDOnGothic-Regular";
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  /* background: rgba(var(--bs-theme-rgb), 0.2); */
  background-color: var(--bs-theme-light) !important;
  font-weight: 700;
  color: #000;
  position: relative;
  /* border: none; */
  border-color: #dcdcdc;
}
.ui-state-active::before,
.ui-widget-content .ui-state-active::before,
.ui-widget-header .ui-state-active::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 8px;
  transform: translateY(-50%); /* 수직 중앙 정렬 */
  width: 0;
  height: 0;
  border-top: calc(12px / 2) solid transparent;
  border-bottom: calc(12px / 2) solid transparent;
  border-left: calc(8px * 0.8660254) solid var(--bs-theme-bold);
}
.ui-button:active .ui-icon,
.ui-state-active .ui-icon,
.ui-button .ui-icon {
  background-image: url(../../admin/css/images/ui-icons_444444_256x240.png) !important;
}
@media (max-width: 480px) {
  .ui-selectmenu-menu {
    top: 120px !important;
    left: 0 !important;
    width: 100%;
    transform: translateX(0);
    height: calc(100dvh - 120px);
    height: calc((var(--vh, 1vh) * 100) - 120px);
  }
}

/* 마이페이지 주문내역 관련 (환불) */
.subMy-page {
}
.step {
  display: none;
}
.step.active {
  display: block;
}
.progressbar {
  display: flex;
  justify-content: space-between;
  counter-reset: step;
  padding-left: 0;
  list-style-type: none;
  position: relative;
}
.progressbar li {
  position: relative;
  text-align: center;
  flex: 1;
  color: var(--bs-theme);
  font-size: 16px;
  font-weight: 700;
  word-break: keep-all;
}
.progressbar li::before {
  content: counter(step);
  counter-increment: step;
  width: 32px;
  height: 32px;
  line-height: 28px;
  border: 2px solid var(--bs-theme);
  display: block;
  text-align: center;
  margin: 0 auto 4px auto;
  border-radius: 50%;
  background-color: #fff;
  color: var(--bs-theme);
  font-size: 16px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.progressbar li.active::before {
  background-color: var(--bs-theme);
  color: white;
}
.progressbar li.active + li::before {
  border-color: var(--bs-theme);
}
.progressbar li::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--bs-theme);
  z-index: 0;
}
.progressbar li:nth-child(1)::after {
  position: static;
}
.h-button-onBox {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 12px;
}
.h-button-underBox {
  display: flex;
  gap: 8px;
}
.h-button-underBox:has(.shopBtn) {
  padding-top: 8px;
  margin-top: 8px;
  border-top: dashed 1px rgba(var(--bs-theme-bold-rgb), 0.6);
}

/* 마이페이지 결제수단 관리 > 결제 비밀번호 수정 */
/* 상단 안내 영역 포함 키패드 */
#keypad_cont {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  width: 100%;
  height: 100%;
  background: #fff;
  display: none;
  z-index: 10;
  flex-direction: column;
}
#keypad_cont #keypad-header {
  height: 45dvh;
  height: calc(var(--vh, 1vh) * 45);
  border-bottom: 1px solid #ccc;
}
#keypad_cont #keypad-header p {
  font-size: 16px;
  margin-bottom: 20px;
}
#keypad_cont .pin-cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 64px);
  font-weight: 700;
  padding: 0 16px;
}
#keypad_cont #pin-indicator {
  display: flex;
  justify-content: center;
  gap: 10px;
}
#keypad_cont #pin-indicator .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #dcdcdc;
}
#keypad_cont #pin-indicator .dot.filled {
  background: var(--bs-theme);
}
#keypad_cont #keypad {
  height: 55dvh;
  height: calc(var(--vh, 1vh) * 55);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  background: var(--bs-theme-light);
}
#keypad_cont #keypad button {
  padding: 10px 0;
  font-size: 24px;
  font-weight: 700;
  background: var(--bs-theme-light);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.1s,
    color 0.1s;
}
#keypad_cont #keypad .clear-all {
  font-size: 16px;
}
#keypad_cont #keypad .key.pressed,
#keypad_cont #keypad .clear-all:active,
#keypad_cont #keypad .del:active {
  background: var(--bs-theme);
  color: #fff;
  transition:
    background-color 0.1s,
    color 0.1s;
}
#keypad_cont .delivery-cont {
  height: calc(100dvh - 64px);
  height: calc((var(--vh, 1vh) * 100) - 64px);
}
#keypad_cont .delivery-cont > form {
  height: 100%;
}
@media (max-width: 480px) {
  #keypad_cont .delivery-cont {
    height: calc(100dvh - 52px);
    height: calc((var(--vh, 1vh) * 100) - 52px);
  }
}

/* 찜 리스트 wishlist, 최근 본 상품 recent */
.wishlist-wrap .goods-cont .add-cart,
.recent-wrap .goods-cont .add-cart {
  max-width: 100%;
}
.wishlist-wrap .btn-box,
.recent-wrap .btn-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.wish-del,
.recent-del {
  border: none;
  background-color: transparent;
  color: #000;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

/* 검색 search */
.search-cont {
  width: 100%;
  border: solid 1px #dcdcdc;
  border-radius: 100px;
  display: flex;
  gap: 4px;
  overflow: hidden;
  padding-right: 50px;
  margin-left: 8px;

  position: relative;
}
.search-cont input {
  height: 44px;
  border: none;
  width: 100%;
  border-radius: 100px 0 0 100px;
}
.search-cont:not(:has(.d-none)) {
  padding-right: 100px;
}
.search-btnBox {
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 100%;
  font-size: 16px;
}
.search-btnBox > button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 100%;
  border: none;
  background-color: transparent;
}
.search-btnBox > button:nth-last-child(1) {
  border-radius: 0 100px 100px 0;
}
/* dropdown 드롭다운 */
.dropdown-item {
  padding: 1rem;
}
/* 검색 슬라이드 부분 */
.search-menu-wrap {
  margin-bottom: 20px;
  padding: 0 16px;
}
.search-swiper-category .swiper-slide {
  width: auto;
}
.search-swiper-category .swiper-slide:nth-last-child(1) button {
  margin-right: 0 !important;
}
.search-link {
  display: block;
  text-align: center;
  margin: 0 10px;
}
.search-goods-cont {
  width: 33%;
  margin: 4px 8px 4px 0;
}
.search-goods-cont:nth-last-child(1) {
  margin-right: 0;
}
.search-goods-cont .goods-box {
  text-decoration: none;
  color: #000;
  font-size: 16px;
}
.search-goods-cont .goods-box:hover,
.search-goods-cont .goods-box:focus,
.search-goods-cont .goods-box:active {
  text-decoration: none;
  color: #000;
}
.search-goods-cont .img-box {
  width: 100%;
  border-radius: 8px;
  border: solid 1px #ddd;
  overflow: hidden;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.search-goods-cont .img-box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
.search-goods-cont .goods-txt {
  margin-top: 8px;
}
.search-goods-cont .goods-txt .price {
  font-weight: 700;
}

.required {
  position: relative;
}
.required::after {
  right: -8px;
  top: 0;
  content: "*";
  position: absolute;
  color: #f00;
}

/* alertIframe 알럿 모달창 */
#alertIframe .modal-content {
  font-size: 16px;
}
#alertIframe .modal-body {
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#alertIframe .modal-footer {
  padding: 0.5rem;
}
#alertIframe .modal-footer > * {
  margin: 0;
}
@media (max-width: 480px) {
  #alertIframe .modal-content {
    min-height: 20%;
    height: fit-content;
    border-radius: 4px 4px 0 0;
  }
  #alertIframe .modal-dialog {
    max-width: 480px !important;
    height: 100%;
    margin: 0 auto !important;
    display: flex;
    align-items: flex-end;
  }
  #alertIframe.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, 100dvh);
    transform: translate(0, calc(var(--vh, 1vh) * 100));
  }
  #alertIframe.modal.show .modal-dialog {
    transform: none;
  }
}

/* 영수증 조회 */
.receipt-add .sub {
  width: 80%;
  text-align: right;
}

/* 배송조회 */
.delivery-process {
  padding: 16px 0;
}
.delivery-process .title {
  padding: 0 12px;
  font-size: 16px;
  text-align: center;
  font-weight: 700;
}
.delivery-process .process-cont {
  display: flex;
}
.delivery-process .process-box {
  width: 25%;
  padding: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.delivery-process .process-box.on {
  color: var(--bs-theme-bold);
  font-weight: 700;
}
.delivery-process .process-box::before {
  position: absolute;
  content: "";
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background-color: #fff;
  border: solid 2px var(--bs-theme-bold);
  border-radius: 50px;
  z-index: 1;
}
.delivery-process .process-box.on::before {
  background-color: var(--bs-theme-bold);
}
.delivery-process .process-box::after {
  position: absolute;
  content: "";
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--bs-theme-bold);
}
.delivery-process .process-box:nth-last-child(1)::after {
  display: none;
}
.delivery-process .process-box > div {
  padding-top: 32px;
  text-align: center;
}
.tracking-table {
  font-size: 16px;
  width: 100%;
}
.tracking-table th,
.tracking-table td {
  padding: 8px 12px;
  word-break: keep-all;
}
.tracking-table thead th {
  background-color: #eee;
  padding: 12px 8px;
  text-align: center;
  border-right: dashed 1px #dcdcdc;
}
.tracking-table thead th:nth-last-child(1) {
  border: none;
}
.tracking-table tbody td {
  border-right: dashed 1px #eee;
}
.tracking-table tbody td:nth-last-child(1) {
  border: none;
}
.tracking-table tbody tr {
  border-bottom: solid 1px #eee;
}
.tracking-table tbody tr:nth-last-child(1) {
  border-bottom: solid 1px #dcdcdc;
  font-weight: 700;
}
.tracking-table tbody tr td:nth-child(1),
.tracking-table tbody tr td:nth-last-child(1) {
  text-align: center;
}

/* footer */
.footer-area {
  background-color: #eee;
  padding: 24px 16px 76px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  color: #666;
}
.footer-area a {
  color: #666;
  font-weight: 700;
  text-decoration: none;
}
.footer-area a:hover {
  text-decoration: none;
}

/* 주소 검색 */
#addressWrap {
  display: none;
  border: solid 1px #767676;
  width: 100%;
  margin-top: 40px;
  position: relative;
}
.addressClose {
  width: 40px;
  height: 40px;
  border-radius: 4px 4px 0 0;
  position: absolute;
  right: -1px;
  top: -40px;
  z-index: 1;
}

/* 공지사항 (게시판) 시작 */
.noti-add .badge {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 4px;
  background-color: #eee;
  color: #202020;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.noti-add a {
  color: #000;
  text-decoration: none;
}
.noti-add a:hover,
.noti-add a:focus {
  cursor: pointer;
  text-decoration: none;
  color: #000;
}
.noti-add .noti-list > li {
  border-bottom: 1px solid #f1f1f1;
}
.noti-add .noti-list > li > a {
  position: relative;
  display: block;
  padding: 20px 16px;
}
.noti-add .noti-list > li > a:hover {
  background-color: #f9f9f9;
}
.noti-add .noti-list > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.noti-add .noti-info {
  flex: 1;
}
.noti-add .noti-info .noti-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
}
.noti-add .noti-info .noti-date {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #767676;
}
/* 공지사항(게시판) 끝 */

/* 공지사항(게시판) 상세 시작 */
.board-add .board-view-header {
  position: relative;
  padding: 16px 20px;
  border-bottom: 1px solid #dcdcdc;
}
.board-add .board-view-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.board-add .board-view-info {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.board-add .board-view-info .board-view-info-item {
  margin-top: 4px;
  position: relative;
  font-size: 16px;
  color: #767676;
}
.board-add .board-view-info .board-view-info-item::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 49%;
  background-color: #ccc;
  margin: 0 8px;
}
.board-add .board-view-info .board-view-info-item:last-child::after {
  display: none;
}
.board-add .board-view-body {
  padding: 20px 16px;
}
.board-add .board-view-body .article-editor video {
  max-width: 100%;
}
.board-add .board-view-body .article-editor {
  font-size: 15px;
}
.board-add .article-editor * {
  word-break: break-all;
  font-size: 16px;
}
.board-add .article-editor .media {
  position: relative;
}
.board-add .article-editor .youtube_img {
  width: 100%;
  padding-bottom: 56.25%;
}
.board-add .article-editor .play::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
  cursor: pointer;
}
.board-add .article-editor .play::after {
  content: "\f144";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 80px;
  color: #fff;
  cursor: pointer;
}
.board-add .article-editor .thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.board-add .view-download-list {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
  margin: 30px 0 0;
}
.board-add .view-download-list .view-download-tit {
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 12px;
  color: #909090;
}
.board-add .view-download-list .view-download-box {
  flex: 1;
}
.board-add .view-download-list .view-download-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin-bottom: 8px;
  word-break: break-all;
}
.board-add .view-download-list .view-download-item .file-size {
  font-weight: 400;
  flex: none;
  margin-left: 4px;
  color: #909090;
}
.board-add .view-tag {
  display: flex;
  position: relative;
  margin-top: 12px;
  gap: 4px;
}
.board-add .view-tag .view-tag-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 12px;
  background-color: #eee;
  border-radius: 0px;
  border-radius: 99px;
  padding: 0 12px;
  color: #000;
}
/* 공지사항(게시판) 상세 끝 */

input[type="text"] {
  -webkit-ime-mode: active;
  -moz-ime-mode: active;
  -ms-ime-mode: active;
  ime-mode: active;
}

/* 자주묻는질문 */
.category-slide .category-list {
  width: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
  background-color: #f9f9f9;
  border-bottom: solid 1px #ddd;
}
.category-slide .category-list .swiper-wrapper {
  width: 100%;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
}
.category-slide .category-list .swiper-slide {
  border: none;
  display: block;
  width: auto;
  height: auto;
  font-size: 16px;
  font-weight: 500;
  background-color: transparent;
  height: 100%;
  padding: 12px 16px;
  position: relative;
}
.category-slide .category-list .swiper-slide.active {
  color: #333;
  font-weight: 700;
}
.category-slide .category-list .swiper-slide.active::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
}
.faq-accordion .faq-item {
  border-bottom: 1px solid #ddd;
}
.faq-accordion .faq-item .accordion-toggle {
  position: relative;
  display: flex;
  width: 100%;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  padding: 16px;
}
.faq-accordion .faq-item .accordion-toggle .txt {
  flex: 1;
}
.faq-accordion .faq-item .accordion-toggle .faq-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.faq-accordion .faq-item .accordion-toggle .arrow {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
.faq-accordion .faq-item .accordion-toggle .arrow i {
  transform: rotate(0deg);
  transition: all 0.25s ease;
}
.faq-accordion .faq-item .accordion-toggle[aria-expanded="true"] .arrow i {
  transform: rotate(-180deg);
  transition: all 0.25s ease;
}
.faq-accordion .faq-item .faq-item-body .question-content {
  padding: 0 16px 16px;
}
.faq-accordion .faq-item .faq-item-body .question-content .cont {
  font-size: 15px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 10px;
  color: #000;
}
/* 자주묻는질문 - 끝 */