/* 상품 목록 스킨 88 css ========================================== */
:root {
   --box_color: #ddd;
   --box_on_color: #aaa;
}
.sct_88.sct {
   display: flex;
   flex-wrap: wrap;
   padding: 0 1px;
}
.sct_88 .sct_li {
   float: left;
   text-align: left;
   width: 25%;
   padding: 10px 10px 10px 10px;
   margin: 10px 0 0;
}
.tab_item .sct_88 .sct_li {
   /* width: 20%; */
}
.sct_88 .sct_li .sct_name {
   width: 100%;
   position: relative;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* 표시할 줄 수 */
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-size: 15px;
}
.sct_88 .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%);
}
.sct_88 .sct_li:hover .sct_name::after {
   width: 50%;
}
.sct_88 .sct_li:nth-child(4n + 1) {
   /* clear: both */
}
.sct_88 .sct_li .li_wr {
   position: relative;
   padding: 5px;
}
.sct_88 .sct_img {
   position: relative;
   overflow: hidden;
   border: 1px solid #ddd;
   /* max-width: 245px; */
   box-sizing: border-box;
}
.sct_88 .sct_img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
}
.sct_88 .sct_li:hover .sct_img img {
   transform: scale(1.05);
   opacity: 0.9;
}
.sct_88 .sct_id {
   margin: 5px 0;
   font-size: 0.92em;
   color: #666;
}
.sct_88 .txt_wr {
   min-height: 100px;
}
.sct_88 .txt_wr img {
   max-width: 80px;
}
.sct_88 .sct_txt {
   display: block;
   margin: 0 0 10px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
}
.sct_88 .sct_txt a {
   color: var(--fontcolor);
   text-decoration: none;
   white-space: normal;
}
.sct_88 .sct_li:hover .sct_txt a {
   /* color: var(--subcolor2); */
}
.sct_88 .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;
}
.sct_88 .sct_name {
   padding: 4px 6px;
   /* border-bottom: 1px solid #ddd; */
   height: 50px;
   overflow: hidden;
   /* white-space: nowrap; */
   text-overflow: ellipsis;
}
.sct_88 .sct_cost {
   font-weight: 700;
   display: inline-block;
   padding: 6px 6px;
   color: var(--subcolor1);
   font-size: 14px;
}
.sct_88 .sct_sns {
}
.sct_88 .sct_icon {
}
.sct_88 .sct_icon .shop_icon_1 {
}
/* 히트 아이콘 */
.sct_88 .sct_icon .shop_icon_2 {
}
/* 추천 아이콘 */
.sct_88 .sct_icon .shop_icon_3 {
}
/* 최신 아이콘 */
.sct_88 .sct_icon .shop_icon_4 {
   padding: 0 5px;
   line-height: 20px;
   position: absolute;
   top: 0;
   left: 0;
   background: #fb5861;
   color: #fff;
   font-size: 12px;
   border: 0;
}
/* BEST 아이콘 */
.sct_88 .sct_icon .shop_icon_5 {
}
/* 할인 아이콘 */
.sct_88 .btn_wish {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 50px;
   height: 50px;
   color: #c1c4c6;
   border: 0;
   background: none;
   font-size: 18px;
}
.sct_88 .btn_wish:hover {
   color: #ff0000;
}
.sct_88 .btn_cart {
   position: absolute;
   bottom: 0px;
   /* left: 0; */
   right: 0;
   border: 0;
   border-radius: 50%;
   background: #000;
   /* background: rgba(0, 0, 0, 0.8); */
   background: rgba(255, 69, 0, 0.9);
   color: #fff;
   font-weight: 500;
   display: block;
   height: 60px;
   line-height: 60px;
   /* width: 100%; */
   width: 60px;
   text-align: center;
   -webkit-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
   -webkit-transform: translateY(60px);
   -moz-transform: translateY(60px);
   -ms-transform: translateY(60px);
   -o-transform: translateY(60px);
}
.sct_88 .sct_li:hover .btn_cart {
   transition: all 0.3s 0.1s;
   opacity: 1;
   filter: alpha(opacity=100);
   -webkit-transform: translateY(0);
   -moz-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
   font-size: 30px;
}
.sct_cartop {
   display: none;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
}
.cartop_bg {
   background: #000;
   background: rgba(0, 0, 0, 0.1);
   width: 100%;
   height: 100%;
}
.sct_cartop_wr {
   position: absolute;
   top: 50%;
   left: 50%;
   background: #fff;
   text-align: left;
   width: 300px;
   max-height: 400px;
   margin-left: -150px;
   margin-top: -200px;
   overflow-y: auto;
   -webkit-box-shadow: 1px 1px 18px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 1px 1px 18px rgba(0, 0, 0, 0.2);
   box-shadow: 1px 1px 18px rgba(0, 0, 0, 0.2);
}
.sct_cartop_wr h3 {
   font-size: 1.154em;
   padding: 0 20px;
   line-height: 50px;
   border-bottom: 1px solid #eee;
}
.sct_cartop_wr form {
   padding: 20px;
}
.sct_cartop_wr label {
   display: block;
   margin: 5px 0;
   color: #777;
}
.sct_cartop_wr select {
   width: 100%;
   height: 40px;
   background: none;
   border: 1px solid #d8dee5;
   font-size: 1.077em;
   margin-bottom: 10px;
   -webkit-box-shadow: 0 2px 2px #f3f3f3;
   -moz-box-shadow: 0 2px 2px #f3f3f3;
   box-shadow: 0 2px 2px #f3f3f3;
}
.cartopt_cart_btn {
   width: 100%;
   height: 42px;
}
.cartopt_close_btn {
   position: absolute;
   top: 0;
   right: 0;
   background: none;
   color: #888;
   border: 0;
   width: 50px;
   height: 50px;
   font-size: 15px;
}
.cartopt_close_btn:hover {
   color: #000;
}
#item_load_msg {
   display: none;
}
#btn_more_item {
   height: 43px;
   width: 100%;
   background: #fff;
   border: 0;
   border-radius: 5px;
   font-size: 1.167em;
   color: #282828;
   line-height: 43px;
}

.up_992 {
   display: block;
}
.down_991 {
   display: none;
}

/* highlight css ========================================== */
.tab_wrpper {
   max-width: 1200px;
   margin: auto;
}
.tab_menu {
   padding-left: 0;
   position: relative;
   margin-bottom: 0;
   display: flex;
   width: 100%;
   /* border: 1px solid #ddd; */
}
.tab_menu::after {
   content: "";
   display: block;
   clear: both;
}
.tab_menu li {
   float: left;
   list-style: none;
   margin-right: -1px;
   /* padding: 8px 12px; */
   /* background-color: var(--subcolor1down); */
   background-color: #7a867a;
   flex: 1;
   /* border-top: 1px solid #ddd; */
   border-top: 1px solid #1c9bec;
   border-top: 1px solid var(--main_color1);
   border-left: 1px solid #ddd;
   cursor: pointer;
   height: 50px;
   line-height: 50px;
   transition: all 0.2s;
}
.tab_menu li:hover {
   background-color: #8e9c8e;
}
.tab_menu li img {
   width: 36px;
   height: 36px;
   margin-right: 10px;
   margin-top: -6px;
}

.tab_menu li:first-child {
   /* border-left: none; */
}
.tab_menu li:last-child {
   border-right: 1px solid #1c9bec;
   border-right: 1px solid var(--main_color1);
}
.tab_menu li:hover {
   border-bottom: none;
}
.tab_menu li.on {
   border-top: 1px solid var(--box_color);
   /* border-left: 1px solid var(--box_color); */
   border-right: 1px solid var(--box_color);
   border-bottom: none;
   z-index: 1;
   position: relative;
   /* margin-bottom: -1px; */
   background: #fff;
}
.tab_menu li.on::after {
   content: "";
   position: absolute;
   bottom: 0px;
   left: 22px;
   /* background-color: #1c9bec; */
   background-color: #444b44;
   width: 80%;
   height: 2px;
}
.down_991 .tab_menu li {
   border-top: 1px solid #1c9bec;
   border-left: 1px solid #1c9bec;
   border-right: 1px solid #1c9bec;
   border-bottom: none;
   z-index: 1;
   position: relative;
   margin-bottom: -1px;
   /* background: #FFF; */
}
.tab_menu li span {
   text-transform: uppercase;
   display: inline-block;
   font-size: 16px;
   line-height: 27px;
   text-decoration: none;
}
.tab_menu li span {
   color: #fff;
   text-decoration: none;
   background-color: inherit;
}
.down_991 .tab_menu li span {
   color: #fff;
}
.tab_menu li.on span {
   color: #000;
}
#tab_content {
   /* border-left: 1px solid var(--box_color);
    border-right: 1px solid var(--box_color);
    border-bottom: 1px solid var(--box_color); */
   position: relative;
   transition: all 0.3s;
   /* (추가) */
   min-height: 460px;
}
/* ============================== */
.list_box {
   margin-bottom: 40px;
   /* border: 1px solid var(--box_color); */
   border-left: 1px solid var(--box_color);
   border-right: 1px solid var(--box_color);
   border-bottom: 1px solid var(--box_color);
}
.tab_item .list_box {
   /* min-height: 461px; */
}
#tab_content .tab_item {
   /* (당초) */
   /* display: none; */
   /* (변경) */
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.4s ease;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}
#tab_content .tab_item:first-child {
   /* display: block; */
}
#tab_content #first_tab_item.tab_item {
   /* (당초) */
   /* display: block; */
   /* (변경) */
   /* 없음 */
}
#tab_content .tab_item.view {
   /* (당초) */
   /* 없음 */
   /* (변경) */
   opacity: 1;
   visibility: visible;
}
/* ============================== */
.tab_menu li a.active {
   color: #fff;
}
.tab_wrpper .nav {
   position: relative;
   /* margin-bottom: -1px; */
}
.tab_wrpper .fa-solid {
   margin-right: 10px;
}
.highlight {
   position: absolute;
   width: 121px;
   top: 0;
   left: 0;
   bottom: 0;
   background: #000;
   transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.sct_88 .sct_cust_price {
   font-size: 13px;
   color: #959595;
   font-weight: normal;
   text-decoration: line-through;
   margin-right: 5px;
   /* display: inline-block; */
}
.sct_88 .sale_per {
   position: absolute;
   top: 5px;
   right: 5px;
   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) {
   .sct_88 .txt_wr img {
      max-width: 50px;
   }
   .sct_88 .sct_id {
      font-size: 0.85em;
   }
   .sct_88 .sct_li:nth-child(2n + 1) {
      /* clear: both */
   }
   .sct_88 .sct_li {
      margin: 6px 0;
   }
}
@media (max-width: 767px) {
   .sct_88 .sct_li {
      width: 50% !important;
   }
}
@media (max-width: 991px) {
   .up_992 {
      display: none !important;
   }
   .down_991 {
      display: block;
   }
   .sct_88 .sct_li {
      width: 25%;
   }
   .sct_88 .sct_li:nth-child(5) {
      /* display: none; */
   }
   #tab_content {
      min-height: auto;
   }
   #tab_content .tab_item {
      position: relative;
      visibility: visible;
      opacity: 1;
   }
   .sct_88 .txt_wr img {
      max-width: 60px;
   }
   .sct_88 .sct_basic {
      margin-bottom: 6px;
   }
   .sct_88 .sct_cost {
      padding: 2px 6px;
   }
   .sct_88 .sct_li {
      padding: 10px 10px 2px 10px;
   }
}