@charset "utf-8";
/* 메인 상품 목록 스킨 30 */
.smt_55 .sct_txt_wr {
   padding: 0px 4px 4px;
   text-align: left;
}
.smt_55 .sct_txt_wr {
   overflow: hidden;
   white-space: nowrap;
}
.main77.sct_wrap {
   position: relative;
}
.smt_55 .sct_cost {
   font-weight: 700;
   display: inline-block;
   padding: 6px 6px;
   color: var(--subcolor1);
   font-size: 14px;
}
.smt_55 .btn_wish {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 50px;
   height: 50px;
   color: #c1c4c6;
   border: 0;
   background: none;
   font-size: 18px;
}
.smt_55 .btn_wish:hover {
   color: #ff0000;
}
.smt_55 .sct_li {
   /* border: 1px solid #ddd; */
   overflow: hidden;
   /* min-height: 420px; */
}
.smt_55 .sct_li:hover {
   /* border: 1px solid #b8b1b1; */
}
.smt_55 .sct_img {
   overflow: hidden;
   border: 1px solid #ddd;
}
.smt_55 .sct_li:hover .sct_img img {
   transform: scale(1.05);
   opacity: 0.9;
}
.smt_55 .sct_txt_wr img {
   max-width: 80px;
}
.smt_55 .sct_id {
   margin: 5px 0;
   font-size: 0.92em;
   color: #666;
}
.main77.main_bxslide .bx-wrapper {
   margin: auto;
}
.main77.main_bxslide .imagewrap {
   margin-top: 40px;
}
.main77.main_bxslide .bx-pager-link {
   width: 18px;
   height: 4px;
   display: block;
   color: transparent;
   transition: all 0.2s;
   background-color: #ddd;
}
.main77.main_bxslide .bx-pager-link.active {
   width: 36px;
   background-color: #666;
}
.main77.main_bxslide .bx-pager-item {
   margin: 0 2px;
}
.main77 .bx-controls {
   position: relative;
}
.main77.main_bxslide .bx-pager {
   position: absolute;
   left: 50%;
   top: 30px;
   transform: translate(-50%, 0);
   display: flex;
}
.main77 .bx-controls-direction {
   position: absolute;
   display: flex;
   justify-content: space-between;
   width: 100%;
   transform: translateY(-150px);
}
/* 공통 컨테이너 위치 */
.main77.sct_wrap .bx-controls-direction .bx-next {
   right: -30px;
}
.main77.sct_wrap .bx-controls-direction .bx-prev {
   left: -60px;
}
/* 공통: 버튼 기본 숨김 */
.main77.sct_wrap .bx-controls-direction .bx-next,
.main77.sct_wrap .bx-controls-direction .bx-prev {
   color: transparent;
   position: absolute;
}
/* 공통: after 스타일 */
.main77.sct_wrap .bx-controls-direction .bx-next::after,
.main77.sct_wrap .bx-controls-direction .bx-prev::after {
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   color: #979797;
   font-size: 20px;
   opacity: 0.6;
   border: 1px solid #979797;
   border-radius: 50%;
   transition:
      background 0.3s,
      color 0.3s;
   width: 40px;
   height: 40px;
   line-height: 40px;
   display: inline-block;
}
/* 아이콘만 구분 */
.main77.sct_wrap .bx-controls-direction .bx-next::after {
   content: "\f061"; /* → next icon */
}
.main77.sct_wrap .bx-controls-direction .bx-prev::after {
   content: "\f060"; /* ← prev icon */
}

.main77.sct_wrap .bx-controls-direction .bx-prev:hover::after,
.main77.sct_wrap .bx-controls-direction .bx-next:hover::after {
   color: #757575;
   opacity: 0.8;
}
.smt_55 .sct_txt {
   display: block;
   margin: 0 0 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
   text-align: center;
}
.smt_55 .sct_name {
   padding: 4px 6px;
   height: 50px;
   margin-bottom: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
   position: relative;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-size: 15px;
}
.smt_55 .sct_li .sct_name::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 0;
   height: 1px;
   background: var(--subcolor2);
   transition: all 0.3s ease;
   transform: translateX(-50%);
}
.smt_55 .sct_li:hover .sct_name::after {
   width: 50%;
}
.smt_55 .sct_txt a {
   color: var(--fontcolor);
   text-decoration: none;
   /* font-size: 1.0rem; */
}
.smt_55 .sct_basic {
   color: var(--fontcolordown);
   line-height: 1.5;
   font-weight: 400;
   white-space: normal;
   max-height: 45px;
   overflow: hidden;
   padding: 4px 6px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   /* margin-bottom: 10px; */
   font-size: 13px;
}
/* .smt_55 .sct_li:nth-child(4n + 1) {
  border: 1px solid red;
  width: 520px !important;
}
.smt_55 .sct_li:nth-child(4n + 2) {
  width: 170px !important;
}
.smt_55 .sct_li:nth-child(4n + 3) {
  width: 170px !important;
}
.smt_55 .sct_li:nth-child(4n + 0) {
  width: 170px !important;
} */
.smt_55 .sct_cust_price {
   font-size: 13px;
   color: #959595;
   font-weight: normal;
   text-decoration: line-through;
   margin-right: 5px;
}
.smt_55 .sale_per {
   position: absolute;
   top: 0px;
   right: 0px;
   background: var(--maincolor);
   color: #fff;
   clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
   line-height: 40px;
   text-align: center;
   padding: 10px 6px;
   min-width: 36px;
   opacity: 0.8;
}
@media (max-width: 576px) {
   .smt_55 .sct_txt_wr img {
      max-width: 50px;
   }
   .smt_55 .sct_id {
      font-size: 0.85em;
   }
   .main77.sct_wrap .bx-controls-direction .bx-next {
      right: -10px;
   }
   .main77.sct_wrap .bx-controls-direction .bx-prev {
      left: -40px;
   }
   .main77.main_bxslide .bx-pager-link {
      width: 18px;
   }
   .main77.main_bxslide .bx-pager-link.active {
      width: 36px;
   }
}
#widecontainer {
   /* background-color: var(--pointcolor); */
}
@media (min-width: 1200px) {
   #widecontainer {
      max-width: 100%;
   }
}