:root {
  --csb-width: 100%;
}

@font-face {
  font-family: "Pretendard Std Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("../EXT/Font/PretendardStdVariable.woff2") format("woff2-variations");
}

.form_container {
  display: flex;
  flex-direction: column;
  margin-left: 2%;
  margin-right: 2%;
}

/* 서밋버튼 디자인*/
.submit__customButton__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

.submit__customButton__button {
  background-color: #000000; /* Black */
  border: none;
  width: 100%;
  color: #ffffff; /* White */
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: clamp(14px, 3vw, 18px);
  font-weight: bold; /* Bold font */
  margin: 10px 0px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.submit__customButton__button:hover {
  background-color: #333333; /* Darker black */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
}

.submit__customButton__button:active {
  background-color: #555555; /* Even darker black */
  box-shadow: none;
}

.submit__customButton__button:focus {
  outline: none;
}

.submit__customButton__button:disabled {
  background-color: #cccccc; /* Grey background for disabled state */
  cursor: not-allowed; /* Change cursor to not-allowed */
  box-shadow: none; /* Remove shadow for disabled state */
}

/* 커스텀 셀렉트 박스 스타일 */
.csb_selectedOptionText {
  font-size: clamp(12px, 2.5vw, 16px);
}

.csb_customSelect {
  position: relative;
  display: inline-block;
  border: 1px solid #bbbbbb;
  border-radius: 3px;
  width: var(--csb-width);
  box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.1);
}

/* emphasis 클래스가 추가될 경우 깜박이는 애니메이션 적용 */
@keyframes blinkBorder {
  0% {
    border-color: #ddd;
    border: solid 1px #ddd;
    box-shadow: 0 0 10px #ddd;
  }

  50% {
    border-color: red;
    box-shadow: 0 0 10px red;
  }

  100% {
    border-color: #ddd;
    box-shadow: 0 0 10px #ddd;
  }
}

/* emphasis 클래스 정의 */
.emphasis {
  animation: blinkBorder 1s infinite;
  /* 1초 간격으로 반복 */
  border-color: red;
  color: red;
  /* box-shadow: 0 0 10px red; */
}

/* 선택된 옵션 스타일 */
.csb_selectedOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  /* border: 1px solid #ccc;
  border-radius: 3px; */
  cursor: pointer;
  font-weight: bold;
}

/* 이미지 박스 스타일 */
.csb_imageBox {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #ccc;
  background-size: cover;
  background-position: center;
}

/* 컬러 박스 스타일 */
.csb_colorBox {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #ccc;
}

/* 텍스트 박스 스타일 (경계선 투명) */
.csb_textBox {
  width: 0px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid transparent;
}

/* 화살표 스타일 */
.csb_arrow {
  margin-left: 10px;
  font-size: 12px;
}

/* 옵션 리스트 스타일 */
.csb_optionsList {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  display: none;
  z-index: 1;
  background-color: white;
}

/* 개별 옵션 스타일 */
.csb_option {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: clamp(12px, 2.5vw, 16px);
}

/* 옵션 호버 스타일 */
.csb_option:hover {
  background-color: #f0f0f0;
}

/* 포커스된 커스텀 셀렉트 박스 스타일 */
.csb_customSelect.focused {
  border: 1px solid #007bff;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* HTML 페이지의 모든 텍스트 요소들에 드래그 방지 설정 */
body,
body * {
  -webkit-user-select: none; /* Safari 구형 지원 */
  -moz-user-select: none; /* Firefox 구형 지원 */
  -ms-user-select: none; /* Internet Explorer 지원 */
  user-select: none; /* 최신 브라우저 */
  font-family: "Pretendard Std Variable", sans-serif;
}

body {
  margin: 0 auto;
}

main {
  margin: 0 auto;
}

a {
  text-decoration: none;
  color: #000;
}

p {
  margin: 0;
}

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

.csb_infomation_text {
  font-size: clamp(12px, 2.5vw, 16px);
  padding: 0px 5px;
}

/** 네비게이션 스타일 시작*/

.nav__container {
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: #3b4956; /* 블루그레이 */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18);
}

/* ✅ 네비 배경은 이제 의미 없음, 제거 가능 */
.nav__background {
  background-color: transparent;
}

/* ✅ 메뉴 리스트 */
.nav__menu {
  border-bottom: 1px solid #444;
  background-color: #3b4956;
  padding: 10px 0;
}

.nav__description {
  font-size: 16px;
  font-weight: bold;
  background-color: #3b4956;
  color: #ffd700;
  text-align: center;
  padding-top: 10px;
}

.nav__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px; /* 메뉴간 여유 */
}

/* ✅ 로고 그룹 */
.nav__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px; /* 여유있는 간격 */
  background-color: #333;
}

.nav__logo {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
}

.nav__logo_link {
  padding: 5px;
  transition: color 0.3s ease;
}

.nav__logo_link:hover {
  color: #ffd700; /* 부드러운 금색 터치 */
  transform: translateY(-2px);
}

/*kakaoLink*/

/* ✅ 카카오 버튼 */
.nav__logo_kakao {
  display: flex;
  align-items: center;
  background-color: #ffe812;
  color: #3c1e1e;
  padding: 2px 7px;
  height: 30px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 13px;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.nav__logo_kakao:hover {
  background-color: #ffd500;
}

.kakao_icon_image {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background-image: url(https://t1.kakaocdn.net/kakaobusiness/public/img/ico_bizservice_231214.png);
  background-size: 500px 200px;
  background-repeat: no-repeat;
}

.kakao_text {
  font-weight: 600;
  color: #3c1e1e;
  font-size: 18px;
}

/*카카오링크 종료*/

.hide {
  display: none;
}

.nav__item {
  flex-grow: 0;
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.nav__item:hover {
  background-color: #26323d;
  color: #ffd700;
  transform: scale(1.02);
}

.nav__item__click {
  background-color: #1f2a35;
  color: #ffd700;
}

/** 네비게이션 스타일 종료*/

/* Swiper 이미지 스타일 */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner__container.swiper-container {
  overflow: hidden;
  /* 슬라이더 외부로 넘쳐나가는 슬라이드를 숨김 */
}

.banner__click {
  cursor: pointer;
}

.main__content {
  display: flex;
  flex-direction: column;
  margin-left: 2%;
  margin-right: 2%;
}

.main__notice_title {
  font-size: 1.5em;
  color: black;
  font-weight: 700;
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}

.main__notice_content {
  font-weight: 600;
  color: black;
  font-size: 1em;
  text-align: center;
}

.main__notice_content_loading {
  height: 200px;
}

/** 카드 스타일 START*/

.main__card_container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(0, 150px)); */
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  /* grid-template-columns: repeat(2, 1fr); */
  gap: 10px;
  justify-items: center;
  align-self: center;
  max-width: 100%;
  padding: 10px;
}

.main__card_item {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  list-style: none;
  position: relative;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.main__card_item:hover {
  /* transform: translateY(-10px); */
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.5);
  border: 1px solid #007bff;
  cursor: pointer;
  /* background-color: #e9e9e9; */
}

.main__card_item .main__card_item_group_per_ico {
  position: absolute;
  display: none;
  top: 0px;
  right: 0px;
  font-size: 11px;
  width: 38px;
  height: 36px;
  background: black;
  color: #fff;
  text-align: center;
  line-height: 35px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 8px;
  opacity: 0.9;
}

.main__card_item .main__card_item_group_per_ico > b {
  font-size: 14px;
  font-weight: 400;
}

.main__card_item .main__card_item_company_logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: clamp(25px, 5vw, 50px);
  z-index: 90;
}

.main__card_item_status {
  position: absolute;
  /* border: solid 1px #ddd; */
  border-radius: 5px;
  background-color: #000;
  color: #ffd700;
  padding: 2px 5px;
  top: 10px;
  right: 10px;
  font-size: clamp(8px, 2vw, 13px);
  text-align: end;
  z-index: 90;
}

.main__card_item_group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  height: 100%;
}

.main__card_item_group_img {
  width: 80%;
  position: relative;
  margin-bottom: 10px;
}

.main__card_item_group_img > img {
  width: 100%;
  border-radius: 8px;
}

.main__card_item_group_item_color {
  position: absolute;
  right: -5px;
  transform: translateY(-50%);
  top: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}

.main__card_item_group_item_color .color_bg {
  width: clamp(8px, 2vw, 14px);
  height: clamp(8px, 2vw, 14px);
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #ddd;
}

.main__card_item_group_list_item {
  width: 100%;
}

.main__card_item_group_list_name {
  border: 1px solid transparent;
  margin: 5px 0px;
}

.main__card_item_group_list_name > p {
  text-align: center;
  font-size: clamp(12px, 3vw, 22px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main__card_item_group_Capacity {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 1px solid transparent;
  margin-bottom: 2px;
  position: absolute;
  bottom: -10px;
  transform: translateX(50%);
  right: 50%;
}

.main__card_item_group_Capacity .Capacity {
  display: inline-block;
  font-size: clamp(8px, 2vw, 15px);
  background-color: #000;
  color: #ffd700;
  border-radius: 5px;
  padding: 2px 6px;
  margin: 0 3px;
  font-weight: 600;
  letter-spacing: -1px;
}

.main__card_item_group_list_exp > p {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(8px, 2vw, 15px);
  font-weight: 600;
  background-color: #f1f1f1;
  border-radius: 0.25rem;
  justify-content: center;
}

.main__card_item_group_list_exp > p > span {
  position: relative;
  margin-right: 10px;
  align-content: center;
}

.main__card_item_group_list_exp > p > span:after {
  position: absolute;
  display: inline-block;
  content: "";
  top: 56%;
  left: calc(100% + 5px);
  width: 1px;
  height: 11px;
  background: #636363;
  border: 0;
  padding: 0;
  transform: translateY(-50%);
}

.main__card_item_group_list_exp > p > span:last-of-type:after {
  content: none;
}

.main__card_item_group_list_sale {
  text-align: center;
  font-size: clamp(8px, 2.5vw, 18px);
}

.sale-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  margin: 2px 0;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  position: relative;
}

.sale-item span {
  font-weight: bold;
  color: #333;
}

.sale-item .price {
  color: #333333;
}

.sale-item__original {
  color: gray;
  text-decoration: line-through;
  font-size: clamp(8px, 2vw, 15px);
}

.sale-item__mno {
  background-color: #e7f3ff;
}

.sale-item__mvno {
  background-color: #fce7ff;
}

.sale-item__change {
  background-color: #e7ffe7;
}

.sale-item__new {
  background-color: #fff7e7;
}

.sale-item:hover {
  background-color: #f0f0f0;
}

/** 카드 스타일 END*/

/** 푸터 스타일 시작 */

.footer__container {
  background-color: #f9f9f9;
  color: #333333;
  padding: 10px;
  font-family: "Pretendard Std Variable", sans-serif;
  border-top: 1px solid #e0e0e0;
}

.footer__ciwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 1024px;
  margin: 0 auto;
}

.footer__customer,
.footer__cert,
.footer__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer__title {
  font-size: clamp(16px, 4vw, 20px);
  font-weight: bold;
  margin-bottom: 5px;
  color: #222;
}

.footer__tel {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: bold;
  color: #e74c3c;
}

.footer__info-text {
  font-size: clamp(12px, 2.5vw, 14px);
  color: #555555;
}

.footer__cert {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 15px 0 10px 0;
}

.footer__link__ictmarket img,
.footer__link__ibk img {
  width: 80px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}

.footer__link__ictmarket img:hover,
.footer__link__ibk img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.footer__info {
  padding-top: 10px;
  line-height: 1.5;
}

.footer__info p {
  margin: 2px 0;
  color: #555555;
  font-size: clamp(11px, 2.5vw, 14px);
}

.footer__info span {
  font-weight: bold;
  color: #999999;
  font-size: clamp(9px, 2vw, 11px);
}

@media (max-width: 768px) {
  .footer__ciwrap {
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  .footer__cert {
    flex-direction: row;
    justify-content: center;
    margin: 0;
  }
}

/** 푸터 스타일 종료 */

.loading_container {
  text-align: center;
  font-size: calc(1em + 0.5vw); /* Viewport width에 따라 글자 크기 조정 */
}

/* 로딩 애니메이션 스타일 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* 반투명한 검정 배경 */
  display: block;
  /* 초기 상태에서는 숨겨져 있음 */
  z-index: 9999;
  /* 상위에 위치 */
}

.loader {
  border: 8px solid #f3f3f3;
  /* Light grey */
  border-top: 8px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  position: fixed;
  top: 35%;
  left: 42%;
  transform: translate(-50%, -50%);

  /* 텍스트를 중앙에 정렬하는 스타일 추가 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6em;
  /* 원하는 텍스트 크기로 조절 */
  color: #000;
  /* 원하는 텍스트 색상으로 조절 */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*cv : 고객입력창설정세트*/

.cv__card__model__group {
  display: flex;
  justify-content: space-between;
  padding: 0px 15px;
}

.cv__card__model__group__1 {
  position: relative;
  width: 25%;
}

.cv__card__model__group__2 {
  flex-grow: 1;
  align-content: end;
}

#cv__card__image__input {
  width: 100%;
}

.cv__container {
  display: grid;
  justify-items: center; /* 카드를 수평으로 가운데 정렬 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 5px;
  /* 카드 사이의 간격을 설정. 원하는 값으로 조정하실 수 있습니다. */
  max-width: 100%;
  /* 컨테이너의 최대 너비를 설정 */
}

.cv__card_item {
  border: 2px solid transparent;
  list-style: none;
  width: 100%;
}

.cv__card_item_2 {
  border: 2px solid transparent;
  /* min-width: 245px;
min-height: 380px; */
  list-style: none;
  /* 리스트 스타일 제거 */
  width: 100%;
  position: relative;
}

.cv__card_item_capacity_ico {
  position: absolute;
  align-content: center;
  /* display: block; */
  display: none;
  bottom: 5px;
  right: 5px;
  width: clamp(40px, 9vw, 70px);
  height: 40px;
  background: black;
  color: yellow;
  text-align: center;
  line-height: 35px;
  border-radius: 5px;
  opacity: 0.8;
  font-size: clamp(8px, 2vw, 16px);
}

.cv__card_item_info_group {
  padding: 0px 15px;
}

.cv__card_item_info_group__title {
  font-size: clamp(12px, 3vw, 20px);
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  padding: 2px 4px;
  margin-bottom: 5px;
}

.cv__card_item_info_group__title_first {
  background-color: #e1e1e1;
  border-radius: 3px;
  margin-bottom: 5px;
  display: flex;
}

.cv__card_item_info_group__title_sec {
  background-color: #d1d1d1;
  border-radius: 3px;
  margin-bottom: 5px;
  display: flex;
}

.cv__card_item_info_group__title_first__span {
  overflow-clip-margin: content-box;
  overflow: clip;
  width: 60px;
  padding: 5px;
}

.cv__card_item_info_group__title_first__p {
  font-weight: 800;
  font-size: 19px;
  align-content: center;
}

.cv__card_item_info_group__contents {
  font-size: clamp(12px, 2.5vw, 16px);
  padding-bottom: 3px;
}

.cv__card_item_info_group__contents__container {
  display: flex;
  margin: 2px;
}

.cv__card_item .cv__card_item_group_per_ico {
  position: absolute;
  display: block;
  top: -2px;
  right: -2px;
  font-size: 8px;
  width: 36px;
  height: 36px;
  background: black;
  color: #fff;
  text-align: center;
  line-height: 35px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 8px;
  opacity: 0.9;
}

.cv__card_item .cv__card_item_group_per_ico > b {
  font-size: 10px;
  font-weight: 400;
}

.cv__card_item_company_logo {
  position: absolute;
  display: none;
  top: 5px;
  left: 5px;
  width: clamp(20px, 10vw, 50px);
  background-color: white;
  border-radius: 5px;
  opacity: 0.8;
}

.cv__card_item > a {
  display: block;
  /* 링크가 카드 전체를 채우도록 설정 */
  height: 100%;
  text-decoration: none;
  /* 링크의 밑줄 제거 */
  color: inherit;
  /* 텍스트 색상을 상속받음 */
}

.cv__card_item_group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.cv__card_item_group_img {
  width: 50%;
}

.cv__card_item_group_img > img {
  width: 100%;
}

.cv__card_item_group_item_color {
  display: flex;
  margin: 5px auto 5px auto;
  justify-content: center;
}

.cv__card_item_group_item_color .color_bg {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
}

.cv__card_item_group_item_color .modelCapacity {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
}

.cv__card_item_group_list_item {
  width: 100%;
}

.cv__card_item_group_Capacity {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 1px solid transparent;
  margin-bottom: 5px;
}

.cv__card_item_group_Capacity .Capacaity {
  display: inline-block;
  font-size: calc(0.7em + 0.5vw);
  background-color: #000;
  /* 배경색을 검정색으로 */
  color: #ffd700;
  /* 글씨를 노란색으로 */
  border-radius: 5px;
  /* 둥근 모서리 */
  padding: 2px 6px;
  /* 네모의 패딩 */
  margin: 0 3px;
  /* 네모간의 마진 */
  font-weight: 600;
  letter-spacing: -1px;
}

.cv__card_item_group_list_exp > p {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(0.5em + 0.5vw);
  font-weight: 700;
  background-color: #f1f1f1;
  border-radius: 0.25rem;
  justify-content: center;
}

.cv__card_item_group_list_exp > p > span {
  position: relative;
  margin-right: 10px;
}

.cv__card_item_group_list_exp > p > span:after {
  position: absolute;
  display: inline-block;
  content: "";
  top: 50%;
  /* 중앙으로 이동 */
  left: calc(100% + 5px);
  width: 1px;
  height: 11px;
  background: #636363;
  border: 0;
  padding: 0;
  transform: translateY(-50%);
  /* 자신의 높이의 50%만큼 위로 올림 */
}

.cv__card_item_group_list_exp > p > span:last-of-type:after {
  content: none;
}

.cv__card_item_group_list_sale {
  margin: 3px;
  text-align: center;
  font-size: calc(0.6em + 0.4vw);
}

.cv__card_item_group_list_sale > ul > li > b {
  font-size: calc(0.9em + 0.4vw);
}

.cv__card_item_group_list_sale__li__0 {
  color: gray;
  /* margin-bottom: 5px; */
  text-decoration: line-through;
  font-size: calc(0.8em + 0.4vw);
}

.cv__card_item_group_list_sale__li__1 {
  color: blue;
  /* margin-bottom: 5px; */
}

.cv__card_item_group_list_sale__li__2 {
  color: 660000;
  /* margin-bottom: 5px; */
}

.cv__card_item_group_list_sale__li__3 {
  color: purple;
}

.cv__selectbox__group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.cv__selectbox__group__contents {
  margin: 5px;
}

.cv__selectbox__group__contents_chknw {
  margin: 5px 1px 5px 5px;
}

.cv__selectbox__group__contents_nw {
  margin: 5px;
  display: flex;
  border: solid 1px transparent;
  /* flex-wrap: wrap; */
}

/* 커스텀 체크박스 디자인 cus_chk_*/
.cus_chk_form-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
}

.cus_chk_label {
  padding: 5px;
  background-color: #e0e0e0;
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: solid 1px black;
  border-radius: 5px;
}

.cus_chk_custom-checkbox {
  display: flex;
  padding: 10px;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cus_chk_custom-checkbox_wrap {
  display: flex;
}

.cus_chk_checkbox-box {
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 4px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  margin-top: 5px;
  margin-bottom: 5px;
}

.cus_chk_checkbox-box.checked {
  background-color: #000;
  border-color: #000;
}

.cus_chk_checkbox-box.checked::before {
  content: "✔";
  color: #fff;
  font-size: 14px;
}

.cus_chk_custom-checkbox span {
  font-size: clamp(12px, 2.5vw, 16px);
  align-content: center;
  color: #333;
}

.cus_text_input {
  border: 1px solid #bbbbbb;
  width: var(--csb-width, 100%);
  padding: 12px 0px;
  padding-left: 9px;
  box-sizing: border-box;
  border-radius: 3px;
  font-size: 16px;
  background-color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 5px 6px 2px 0px rgba(0, 0, 0, 0.1);
}

.cus_text_input:focus {
  border-color: #007bff !important; /* Use border-color instead of border */
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  outline: none; /* Ensure no default outline is shown */
}

.cus_text_input_nw {
  flex-grow: 1;
  border: 1px solid #00000000;
  padding: 12px 0px;
  padding-left: 9px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  background-color: #f5f5f5;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cus_text_input_nw:focus {
  border-color: #007bff !important; /* Use border-color instead of border */
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  outline: none; /* Ensure no default outline is shown */
}

.csb_label {
  /* border: solid 1px black; */
  /* border-radius: 3px 3px 0px 0px; */
  /* margin-bottom: -2px; */
  /* background-color: #e0e0e0; */
  /* text-align: center; */
  display: block;
  padding: 5px;
  font-size: clamp(14px, 3vw, 18px);
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  /* letter-spacing: 0.5px; */
}

.csb_label_nw {
  align-content: center;
  width: 90px;
  text-align: center;
  background-color: #e0e0e0;
  padding: 12px 0px;
  display: block;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cus_address_searchbtn {
  display: inline-block;
  padding: 0.3em 0.6em;
  background-color: #001a36;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.cus_secoundFromInfo_URL_searchbtn {
  display: inline-block;
  padding: 0.3em 0.6em;
  background-color: #001a36;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: calc(1.3em + 0.5vw);
}

#submit_complete {
  display: none;
  font-size: clamp(12px, 3vw, 20px);
  font-weight: 500;
  text-align: center;
  margin: 15px 0px;
  background-color: #3f3f3f;
  padding: 11px;
  color: white;
  border-radius: 5px;
}

#secoundFromInfo_1 {
  background-color: 660000;
  color: white;
}

/* 주소창 오버레이 스타일 */
.address_overlay {
  display: none; /* 초기에는 숨김 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정색 배경 */
  z-index: 99; /* 레이어보다 낮은 z-index */
}

#cus_address_layer {
  display: none;
  position: fixed;
  width: 85%;
  max-width: 500px;
  height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  overflow: hidden;
}

#cus_address_layer .header {
  background-color: #001a36;
  color: white;
  padding: 10px;
  position: relative;
  font-size: 18px;
}

#cus_address_layer .close-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: none;
  color: white;
  border: none;
  font-size: 20px;
  line-height: 1;
}

/* 오버레이 스타일 */
.overlay {
  display: none; /* 초기에는 숨김 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정색 배경 */
  z-index: 99; /* 레이어보다 낮은 z-index */
}

#cus_capacity_layer {
  display: none;
  position: fixed;
  width: 200px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;

  overflow: hidden;
}

#cus_capacity_layer .header {
  background-color: #001a36;
  color: white;
  padding: 10px;
  position: relative;
  font-size: 18px;
}

#cus_capacity_layer .close-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: none;
  color: white;
  border: none;
  font-size: 20px;
  line-height: 1;
}

#layer_capacity_content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

#layer_capacity_content .Capacity {
  display: flex;
  justify-content: center;
  align-items: center;
  /* font-size: calc(1.3em + 0.4vw); */
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: bold;
  background-color: #000;
  color: #ffd700;
  border-radius: 5px;
  padding: 10px 5px;
  width: 70%;
  margin: 10px 0;
}

#product_info_image_src {
  width: 100%;
}

@media (max-width: 550px) {
  .main__card_container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .banner__container,
  .nav__container,
  main,
  .footer__menu,
  .footer__ciwrap,
  .product_nav_html_container {
    width: 100%;
    max-width: 1024px;
    /* 웹 페이지의 최대 너비를 제한 */
    margin: 0 auto;
    /* 중앙 정렬 */
  }

  .nav__menu {
    width: 100%;
    max-width: 1024px;
    /* 웹 페이지의 최대 너비를 제한 */
  }

  .noticeBar__container {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
  }

  .swiper-slide img {
    max-width: 1024px;
  }

  footer {
    /* position: sticky;
    bottom: 0;
    width: 100%; */
    max-width: 1024px;
    margin: 0 auto;
    z-index: 95;
  }

  .footer__hiedden__container {
    bottom: 0;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
  }
}

#cus_textbox_privacy {
  font-size: 12px;
}

/** 공지사항 바스타일 */
.noticeBar__container {
  background-color: #fff;
  /* border-radius: 10px; */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* width: 100%;
  max-width: 600px; */
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  max-height: 200px;
}

.noticeBar__header {
  font-size: 17px;
  font-weight: bold;
  padding: 5px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.noticeBar__close-btn {
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: clamp(14px, 3vw, 20px);
  cursor: pointer;
}

.noticeBar__content {
  padding: 10px;
  background-color: #fff;
}

.noticeBar__text {
  font-size: clamp(8px, 2.5vw, 13px);
  color: #666;
}

.noticeBar__container.collapsed {
  max-height: 35px;
}

/** 푸터히든메뉴 */

/** 공지사항 바스타일 */
.footer__hiedden__container {
  background-color: #fff;
  /* border-radius: 10px; */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* width: 100%;
  max-width: 600px; */
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  max-height: 200px;
}

.footer__hiedden__header {
  font-size: 1em;
  font-weight: bold;
  padding: 5px;
  background-color: #333333;
  color: #fff;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__hiedden__close-btn {
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.footer__hiedden__content {
  /* padding: 20px; */
  background-color: #fff;
}

.footer__hiedden__text {
  font-size: 1em;
  color: #666;
  text-align: center;
}

.footer__hiedden__container.collapsed {
  max-height: 35px;
}

/** 공통옵션 클레스 */
.display__none {
  display: none;
}

.product_info_html_container_st {
  font-size: 16px;
  position: relative;
}

.share_button {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
}

.product_info_html_title {
  border-left: 12px solid #353535;
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 700;
  padding: 3px 0 10px 10px;
  margin: 20px 0px 5px 0px;
}

/** 테이블 우측 */
.tableRight {
  border-right: solid 1px #a8a8a8;
}

/** 테이블 좌측 */
.tableLeft {
  border-left: 1px solid #a8a8a8;
}

/** 테이블 상단 */
.tableTop {
  border-top: 1px solid #a8a8a8;
}

/** 테이블 하단 */
.tableBottom {
  border-bottom: 1px solid #a8a8a8;
}

/** 테이블 전체 */
.tableAll {
  border: 1px solid #a8a8a8;
  padding: 2px;
}

/** ipName */
.ipName {
  font-size: clamp(10px, 2.2vw, 16px);
}

.ipName_G {
  font-size: clamp(10px, 2.2vw, 16px);
}

.ipName_S {
  font-size: clamp(10px, 2.2vw, 16px);
}
/** 테이블 제목 */
.tableTitle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 5px 0px 5px 0px;
  padding: 5px;
  font-size: clamp(14px, 2.5vw, 18px);
}

/** 테이블 테그 스타일 */
.tableStyle {
  font-size: clamp(10px, 2.2vw, 16px);
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  table-layout: auto;
  /* margin-bottom: 10px; */
}

/** 테이블설명 */
.price_ment_style {
  font-size: clamp(8px, 2vw, 12px);
  color: #ff3c3c;
}

.price_ment_style_container {
  display: flex;
  justify-content: start;
  margin: 2px;
  font-size: clamp(10px, 2vw, 14px);
}

.price_ment_style_title {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: #ffe9e9;
  border: 1px solid #ffd3d3;
  border-radius: 2px;
  color: #ff3c3c;
  box-sizing: border-box;
  line-height: 1;
  font-weight: 700;
  margin: 3px;
  flex-shrink: 0;
}

.price_ment_style_content {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #ff3c3c;
  box-sizing: border-box;
  line-height: 1;
  font-weight: 400;
  margin: 3px;
}

/** TD테그 스타일 */
.tdStyle {
  font-size: clamp(8px, 2.5vw, 14px);
}

/** TH테그 스펜 스타일 */
th > span {
  font-size: clamp(7px, 2vw, 12px);
}

/** 첫번째 TD테그 스타일 */
.tdFirstStyle {
  font-size: clamp(8px, 2vw, 14px);
  font-weight: bold;
}

/** 테이블 네비게이션 컨테이너 */

.product_nav_html_container {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: none;
}

.product_nav_html {
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: space-around;
  padding-left: 0;
}

.product_nav_html_menu {
  flex-grow: 1;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
  padding: 10px 15px; /* 상하 패딩을 줄이고 좌우 패딩 추가 */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; /* 배경색과 글자색 전환 애니메이션 */
  background-color: white;
}

.product_nav_html_menu:hover {
  background-color: #f1f1f1;
  color: #333;
}

.product_nav_html_menu.active {
  background-color: #333;
  color: #fff;
}

/** 제조사 선택 메뉴 */
.Manufacturer_select_container {
  border: 1px solid #ddd;
  margin: 0px 5px 5px 10px;
}

.Manufacturer_select_nav_html {
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: space-around;
  padding-left: 0;
}

.Manufacturer_select_menu {
  flex-grow: 1;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
  padding: 10px 15px; /* 상하 패딩을 줄이고 좌우 패딩 추가 */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; /* 배경색과 글자색 전환 애니메이션 */
}

.Manufacturer_select_menu:hover {
  background-color: #f1f1f1;
  color: #333;
}

.Manufacturer_select_menu.active {
  background-color: #333;
  color: #fff;
}

/** 구매정보 테이블 컨테이너 ======================== start */
.product_info_image_input {
  width: 100%;
  max-width: 200px;
}

.product_info_item_capacity_ico {
  position: absolute;
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: center;
  bottom: 5px;
  right: 5px;
  /* left: 50%;
  transform: translateX(-50%); */
  width: clamp(60px, 5vw, 80px);
  height: clamp(30px, 3vw, 40px);
  background: black;
  color: yellow;
  border-radius: 5px;
  opacity: 0.8;
  font-size: clamp(12px, 2vw, 16px);
}

.product__model__group {
  display: flex;
}

.product__card__model__group__1 {
  flex: 1;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.product__card__model__group__2 {
  flex: 1.6;
  align-content: center;
}

.price_info_container_softToggle {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.price_info_container {
  display: none;
  margin: 15px 5px 5px 5px;
}

.price_info_container_main {
  width: var(--csb-width);
  box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.1);
}

.price_info_container_0 {
  border: 1px solid #bbbbbb;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.price_info_box_detail {
  background-color: white;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.price_info_box_detail_text {
  width: 30%;
  color: rgb(104, 104, 104);
  text-align: center;
  font-size: clamp(8px, 2vw, 12px);
  padding: 3px 0;
  font-weight: 800;
}

.price_info_box_detail_text_2 {
  width: 70%;
  color: rgb(56, 56, 56);
  text-align: center;
  font-size: clamp(10px, 2vw, 16px);
  padding: 3px 0;
  font-weight: 800;
}

.price_info_box_0 {
  background-color: white;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.price_info_box_0_text {
  width: 30%;
  color: black;
  text-align: center;
  font-size: clamp(14px, 3vw, 20px);
  padding: 3px 0;
  font-weight: 800;
}

.price_info_box_0_text_2 {
  width: 70%;
  color: black;
  text-align: center;
  font-size: clamp(14px, 3vw, 20px);
  padding: 3px 0;
  font-weight: 800;
}

.price_info_box_0_text_span {
  display: block;
  margin: 0;
  font-size: clamp(8px, 2vw, 12px);
}

.price_info_container_1 {
  border: 1px solid #555555;
}

.price_info_box_1 {
  background-color: #555555;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.price_info_box_1_text {
  flex-basis: 30%;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: clamp(13px, 3vw, 17px);
  padding: 3px 0;
}

.price_info_box_1_text_span {
  display: block;
  margin: 0;
  font-size: clamp(8px, 2vw, 12px);
}

.price_info_box_1_loc {
  flex-basis: 5%;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: clamp(14px, 2vw, 25px);
  padding: 3px 0;
}

.price_info_container_2 {
  border: 1px solid #bbbbbb;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top: 0;
}

.price_info_box_2 {
  background-color: white;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.price_info_box_2_text {
  width: 30%;
  color: black;
  text-align: center;
  font-size: clamp(14px, 3vw, 20px);
  padding: 8px 0;
  font-weight: 800;
}

.price_info_box_2_loc {
  width: 5%;
  color: black;
  text-align: center;
  font-size: clamp(14px, 2vw, 25px);
  padding: 8px 0;
}

/** 구매정보 테이블 컨테이너 ======================== END */

/** 테이블 컨텐트 컨테이너 */
.product_info_html_content_container {
  display: flex;
  flex-direction: row;
}

/** 테이블 컨텐트 컨테이너 TOP [1]*/
.product_info_html_content_top_type_1 {
  background-color: #806000;
  color: white;
  font-size: clamp(12px, 2.5vw, 16px);
  padding: 5px 5px 5px 30px;
  margin-top: 15px;
}

/** 테이블 컨텐트 컨테이너 TOP [2]*/
.product_info_html_content_top_type_2 {
  background-color: #203764;
  color: white;
  font-size: clamp(12px, 2.5vw, 16px);
  padding: 5px 5px 5px 30px;
  margin-top: 15px;
}

/** 테이블 컨텐트 컨테이너 TOP [3]*/
.product_info_html_content_top_type_3 {
  background-color: #375623;
  color: white;
  font-size: clamp(12px, 2.5vw, 16px);
  padding: 5px 5px 5px 30px;
  margin-top: 15px;
}

/** 테이블 컨텐트 컨테이너 TOP [4]*/
.product_info_html_content_top_type_4 {
  background-color: #833c0c;
  color: white;
  font-size: clamp(12px, 2.5vw, 16px);
  padding: 5px 5px 5px 30px;
  margin-top: 15px;
}

.product_info_html_content {
  width: 100%;
}

/** 수직축 스타일링*/
.product_info_html_content_vertical_line_type1 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(11px, 2vw, 16px);
  padding: 30px 5px 10px 5px;
  /* border-radius: 5px; */
  background-color: #806000;
  color: white;
  margin-right: 5px;
}

.product_info_html_content_vertical_line_type2 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(11px, 2vw, 16px);
  padding: 30px 5px 10px 5px;
  /* border-radius: 5px; */
  background-color: #203764;
  color: white;
  margin-right: 5px;
}

.product_info_html_content_vertical_line_type3 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(11px, 2vw, 16px);
  padding: 30px 5px 10px 5px;
  /* border-radius: 5px; */
  background-color: #375623;
  color: white;
  margin-right: 5px;
}

.product_info_html_content_vertical_line_type4 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(11px, 2vw, 16px);
  padding: 30px 5px 10px 5px;
  /* border-radius: 5px; */
  background-color: #833c0c;
  color: white;
  margin-right: 5px;
}

/** 테이블 가격정보 스타일 */
.product_info_html_content_price {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 5px 0px 5px 0px;
}

.product_info_html_content_price > div:nth-child(1) {
  margin: 0px 5px 0px 5px;
  font-weight: 600;
  align-content: center;
}

.product_info_html_content_price > div:nth-child(2) {
  margin: 0px 5px 0px 5px;
  align-content: center;
  color: red;
}

/** HTML 모델정보 구성요소 */
.product_info_html_title_modelinfo {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/** HTML 모델정보 구성요소1 */
.product_info_html_title_modelinfo_1 {
  flex: 1;
  position: relative;
}

.product_info_html_title_modelinfo_GAP {
  flex: 0.1;
}

.product_info_html_title_modelinfo_2 {
  flex: 1.6;
  display: flex;
  align-items: center;
}

/** HTML 모델정보 구성요소1 */
.product_info_html_title_text {
  align-content: center;
  height: auto;
  font-size: clamp(12px, 2.5vw, 16px);
}

.product_info_html_title_text_2 {
  align-content: center;
  font-size: clamp(12px, 2.5vw, 16px);
  margin-left: 10px;
}

.product_info_html_title_modelinfo_1_logoimage {
  position: absolute;
  top: 5px;
  left: 5px;
  width: clamp(30px, 6vw, 40px);
  background-color: white;
  border-radius: 5px;
  opacity: 0.8;
}

.product_info_html_title_modelinfo_1_capacity_ico {
  position: absolute;
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: center;
  bottom: 10px;
  left: 50%; /* 부모의 수평 중앙 기준으로 이동 */
  transform: translateX(-50%); /* 요소의 절반만큼 왼쪽으로 이동하여 중앙 정렬 */
  width: clamp(60px, 5vw, 80px);
  height: clamp(30px, 3vw, 40px);
  background: black;
  color: yellow;
  border-radius: 5px;
  opacity: 0.8;
  font-size: clamp(12px, 2vw, 16px);
}

.product_info_html_title_content {
  margin: 5px 0px 5px 0px;
  color: #333;
  display: flex;
  justify-content: start;
  align-items: center;
}

.PIHTC_title {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: #c5c5c5;
  border: 1px solid #acacac;
  border-radius: 2px;
  color: #414141;
  box-sizing: border-box;
  line-height: 1;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 700;
  margin-right: 3px;
  flex-shrink: 0;
}

.PIHTC_title_RED {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: #ffe9e9;
  border: 1px solid #ffd3d3;
  border-radius: 2px;
  color: #ff3c3c;
  box-sizing: border-box;
  line-height: 1;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 700;
  margin-right: 3px;
  flex-shrink: 0;
}

.product_info_html_title_content_planInfo {
  margin: 5px 0px 5px 0px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.soft_open {
  opacity: 1;
}

.product_info_html_title_content_button {
  background-color: #f0f0f0;
  color: #333;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: bold;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.product_info_html_title_content_button:hover {
  background-color: #333; /* 호버 시 배경색 어둡게 */
  color: #fff; /* 글씨 색을 흰색으로 */
  border-color: #333; /* 테두리 색도 어둡게 */
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); /* 음영 강화 */
}

.product_info_html_title_content_button:active {
  transform: scale(0.98); /* 클릭 시 살짝 눌리는 효과 */
  box-shadow: none; /* 클릭 시 음영 제거 */
}

.product_info_html_title_modeltitle {
  font-size: clamp(16px, 3vw, 22px);
  font-weight: bold;
  margin: 10px 0;
}
.redBox {
  color: #fff;
  background: #c65911;
}

.redListBox {
  background: #fce4d6;
}

.redLineTop {
  border: 3px solid #c65911;
}

.redLineCenter {
  border-left: 3px solid #c65911;
  border-right: 3px solid #c65911;
}

/* 마지막 tr의 모든 td에 하단 경계선 추가 */

.redLineBottom tr:last-child > td:nth-child(4) {
  border-bottom: 3px solid #c65911;
}

.blueLineTop {
  border: 3px solid #305496;
}

.blueLineCenter {
  border-left: 3px solid #305496;
  border-right: 3px solid #305496;
}

.blueBox {
  color: #fff;
  background: #305496;
}

.blueListBox {
  background: #d9e1f2;
}

.blueLineBottom tr:last-child > td:nth-child(4) {
  border-bottom: 3px solid #305496;
}

/** 구입절차안내 */
.PS__process-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.PS__step-box {
  background-color: #f9f9f9;
  border: 2px solid #ddd;
  border-radius: 2%;
  padding: 5px;
  width: clamp(35px, 20vw, 130px);
  height: clamp(80px, 20vw, 130px);
  text-align: center;
  position: relative;
  margin: 10px 0px;
  position: relative;
}

.PS__step-box .PS__step-number {
  background-color: #000;
  color: #fff;
  font-size: clamp(8px, 2.5vw, 15px);
  font-weight: bold;
  width: clamp(15px, 4vw, 23px);
  height: clamp(15px, 4vw, 23px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -2px;
  top: -2px;
  border-top-left-radius: 2%;
  border-bottom-right-radius: 2%;
  /* opacity: 50%; */
}

.PS__step-box h2 {
  font-size: clamp(7px, 2.5vw, 14px);
  font-weight: bold;
  margin: 15px 0px 5px 0px;
}

.PS__step-box p {
  font-size: clamp(7px, 2vw, 12px);
  line-height: 1.5;
  color: #666;
  text-align: left;
}

.PS__arrow {
  font-size: 24px;
  color: #e63946;
}

.PS__notice {
  color: 660000;
  font-weight: 600;
  text-align: start;
  font-size: clamp(11px, 2.5vw, 16px);
}

.PS__instructions {
  color: #333;
  font-size: clamp(8px, 2vw, 14px);
  text-align: center;
}

.PS__instructions li {
  margin: 3px 0;
  text-align: start;
}

.PS__notice__container {
  margin: 0px 20px;
}

/** 이용약관 스타일링 */
.obligation {
  margin: 20px 0;
}

.obligation h2 {
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: bold;
  margin: 10px 0;
}

.obligation p {
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1.5;
  color: #666;
}

.trheight {
  height: auto;
}

/* emphasis_font and background 클래스가 추가될 경우 백그라운드가 하얀색으로 변경되고 빨간색으로 깜빡이는 클래스 정의 */
@keyframes blinkFontColor {
  0% {
    /* border: 1px solid red !important; */
    color: red;
  }

  50% {
    /* border: 1px solid transparent !important; */
    color: black;
  }

  100% {
    /* border: 1px solid red !important; */
    color: red;
  }
}

/* emphasis_font and background 클래스 정의 */
.emphasis_f {
  animation: blinkFontColor 1s infinite;
  /* 1초 간격으로 반복 */
}

/* emphasis_font and background 클래스가 추가될 경우 백그라운드가 하얀색으로 변경되고 빨간색으로 깜빡이는 클래스 정의 */
@keyframes blinkFontAndBackgroundColor {
  0% {
    color: red;
    background-color: white;
  }

  50% {
    color: transparent;
    background-color: transparent;
  }

  100% {
    color: red;
    background-color: white;
  }
}

.sale_item__absolute {
  position: absolute;
  left: 0;
  color: rgb(172, 0, 0);
  width: 100%;
  padding: 7px 0px;
  font-size: clamp(8px, 2.5vw, 16px);
  font-weight: bold;
  animation: blinkFontAndBackgroundColor 2s infinite;
}

.PICP_container {
  margin-left: 10px;
}

.PICP_card {
  border: 1px solid lightgray;
  border-radius: 5px;
  margin: 5px 0px;
  padding: 5px;
}

.PICP_card_info_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.PICP_card_info_1_planName {
  font-size: clamp(14px, 2.5vw, 20px);
}

.PICP_card_info_1_planInfo {
  text-align: right;
  gap: 5px;
  display: flex;
  flex-direction: column;
}

/* PICP_card_info_1_planInfo 의 첫번째 span 테그선택 */
.PICP_card_info_1_planInfo span:first-child {
  color: red;
  font-size: clamp(14px, 2.5vw, 18px);
}

/* PICP_card_info_1_planInfo 의 두번째 span 테그선택 */
.PICP_card_info_1_planInfo span:nth-child(2) {
  color: rgb(70, 70, 70);
  font-size: clamp(10px, 2vw, 16px);
}

.PICP_card_info_1_planDetail {
  font-size: clamp(8px, 2.5vw, 12px);
  color: rgb(70, 70, 70);
  margin-top: 7px;
}

.PICP_tag {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  font-size: clamp(7px, 2vw, 11px);
  background: #ebe9ff;
  border: 1px solid #d7d3ff;
  border-radius: 2px;
  color: #4e3cff;
  box-sizing: border-box;
  line-height: 1;
}

.PICP_tag_red {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  font-size: clamp(7px, 2vw, 11px);
  background: #ebe9ff;
  border: 1px solid #d7d3ff;
  border-radius: 2px;
  color: #d72922;
  box-sizing: border-box;
  line-height: 1;
}

/* CST 텍스트박스 */
/* 
.cst_textbox_container:focus-within:focus {
  border-color: #007bff;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  outline: none;
} */

/* CST 텍스트박스 */
.cst_textbox_container {
  margin: 5px;
  display: flex;
  border: solid 1px transparent;
  flex-direction: column;
  border: 1px solid #bbbbbb;
  border-radius: 3px;
  box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

/* 인풋박스가 포커싱되었을 때 부모 컨테이너 스타일 변경 */
.cst_textbox_container:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* 라벨 스타일 */
.cst_textbox_up {
  text-align: left;
  display: block;
  font-size: clamp(7px, 2.5vw, 12px);
  font-weight: 600;
  color: #393939;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 12px;
}

/* 인풋박스 스타일 */
.cst_text_inputbox {
  flex-grow: 1;
  border: 0px solid transparent;
  padding: 7px 0px 7px 11px;
  font-size: 16px;
}

/* 인풋박스 포커스 시 스타일 */
.cst_text_inputbox:focus {
  border-color: transparent;
  outline: none;
}