/** 상품 > 목록 **/
:root {
	--top-banner-height: 200px;
}

.has-cate-swiper .transform-div {
   padding-top: 135px;
}
/* banner */
#top_banner_item,
#bottom_banner_item {
   min-height: 200px;
	position: relative;
	width: 100%;
	overflow: hidden;
}
#bottom_banner_item {
  /* transform: translateY(45px); */
  /* transition : ease-out .1s; */
  padding-top: 45px;
}
.has-cate-swiper #bottom_banner_item {
   /* transform: translateY(135px); */
   padding-top: 135px;
}
.scroll-down #bottom_banner_item {
   /* transform: translateY(45px) !important; */
}
#top_banner_item img,
#bottom_banner_item img,
#top_banner_item video,
#bottom_banner_item video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

main.goods.list { min-height : 100vh; }
main.goods.list > header { width: 100% ; height: 100% ; top : 45px ; left :0 ; transition : ease-out .25s ; border-bottom : solid 1px var(--border-color) ; opacity : 0 }
main.goods.list > header.on { opacity : 1 }

main.goods.list > header nav {
  position: fixed;
  top: 0;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  z-index: 99;
  padding-top: 45px;
  background-color: #FFF;
  transition : ease-out .1s;
}
body.has-top-banner.banner-visible main.goods.list > header nav {
   position: absolute;
   top: unset;
   padding-top: 0;
}
/* body.has-top-banner:not(.scroll-down.banner-visible) main.goods.list > header nav {
   position: fixed;
   top: 0;
   padding-top: 45px;
} */
body.scroll-down.has-top-banner:not(.banner-visible) main.goods.list:not(.has-cate-swiper) > header nav {
   position: fixed;
   top: 0;
   transform: translateY(0);
   padding-top: 0;
}
body.scroll-down.has-top-banner:not(.banner-visible) main.goods.list.has-cate-swiper > header nav {
   position: fixed;
   top: 0;
   transform: translateY(-90px);
   padding-top: 0;
}
body.scroll-down:not(.has-top-banner) main.goods.list > header nav {
   transform: translateY(-45px);
}
body.scroll-down:not(.has-top-banner) main.goods.list.has-cate-swiper > header nav {
   transform: translateY(-135px);
}
main.goods.list > header nav .nav {
  height: 45px;
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: solid 1px var(--border-color);
  padding-left: 30px;
  font-size : 11px;
  line-height: 100%;
  background-color: #FFF;
}
main.goods.list > header nav .nav > ul { display: flex; flex-wrap: wrap; }
main.goods.list > header nav .nav#goods-nav > ul li:after { content: ">"; display: inline-block; vertical-align: middle; margin: -3px 5px 0 5px; }
main.goods.list > header nav .nav#goods-nav > ul li:last-child:after { content: "" }
main.goods.list > header nav .nav#goods-nav-sub > ul li:after { content: ""; display: inline-block; vertical-align: middle; margin: -3px 5px 0 5px; }
main.goods.list > header nav .nav#goods-nav-sub > ul > li > a > span.now { text-decoration: underline; }

main.goods.list > header nav .nav#goods-nav-top > ul li:after { content: ">"; display: inline-block; vertical-align: middle; margin: -3px 5px 0 5px; }
main.goods.list > header nav .nav#goods-nav-top > ul li:last-child:after { content: "" }
main.goods.list > header nav .nav#goods-nav-middle > ul li:after { content: ""; display: inline-block; vertical-align: middle; margin: -3px 5px 0 5px; }
main.goods.list > header nav .nav#goods-nav-middle > ul > li > a > span.now { text-decoration: underline; }
main.goods.list > header nav .nav#goods-nav-bottom > ul li:after { content: ""; display: inline-block; vertical-align: middle; margin: -3px 5px 0 5px; }
main.goods.list > header nav .nav#goods-nav-bottom > ul > li > a > span.now { text-decoration: underline; }

main.goods.list > header nav .category {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: flex-start;
  border-bottom : solid 1px var(--border-color);
  padding-top: 10px;
  padding-left : 30px;
  background-color: #FFF;
}
main.goods.list > header nav .category .swiper-container {
  width: 100%;
  height: 100%;
  max-height: 80px;
  overflow : hidden;
}
main.goods.list > header nav .category .swiper-slide {
  width : 45px;
  text-align : center;
  height: 100%
}
main.goods.list > header nav .category .swiper-slide .image {
  width : 45px ;
  height : 45px ;
  display : flex ;
}
main.goods.list > header nav .category .swiper-slide .image img {
  width : 100% ;
  height : 100% ;
  object-fit : cover ;
}
main.goods.list > header nav .category .swiper-slide a {
  display : flex;
  flex-direction: column;
  align-items: center;
  font-size : 8px;
  gap : 8px;
}
main.goods.list > header nav .category .swiper-slide a .title {
  display : block;
  overflow-wrap: break-word;
  line-height: 150%;
}

/* breadcrumb */
main.goods.list > header nav #goods-breadcrumb {
  display: flex;
  padding-left: 30px;
}
main.goods.list > header nav #goods-breadcrumb > li {
  width: auto;
  height: auto;
  display: flex;
}
main.goods.list > header nav #goods-breadcrumb > li::after {
  content: "/";
  margin: 0 5px;
}
main.goods.list > header nav #goods-breadcrumb > li:last-child::after {
  content: none;
}
main.goods.list > header nav #goods-breadcrumb > li > a {
  display: block;
}

/* tools */
main.goods.list > header nav .tools {
  height: 45px;
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  align-items: center;
  background-color: #FFF;
}
main.goods.list > header nav .tools > ul:not(#goods-breadcrumb) {
   justify-self: end;
   grid-column: 2 / 3;
}
main.goods.list > header nav .tools > ul {
   display : table;
   width: fit-content;
}
main.goods.list > header nav .tools > ul .dropdown {
   position : absolute;
   left : -1px;
   top : 100%;
   width : 400%;
   z-index : -1;
   display : none;
   padding : 0 12px;
}
main.goods.list > header nav .tools > ul .dropdown:after {
   content : "" ;
   display : none ;
   width : 100vw ;
   height: 100vh ;
   position : fixed ;
   z-index : -1 ;
   background : rgba(0,0,0,.15) ;
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px) ;
   top : 0 ;
   left : 0;
   transition : ease-out .1s;
   /* transform: translateY(90px); */

}
.scroll-down main.goods.list > header nav .tools > ul .dropdown:after {
   transform: translateY(45px);
}
.scroll-down main.goods.list.has-cate-swiper > header nav .tools > ul .dropdown:after {
   transform: translateY(135px);
}
main.goods.list > header nav .tools > ul .dropdown > ul {
   margin : 30px 0
}
main.goods.list > header nav .tools > ul .dropdown > ul > li {
   line-height : 15px
}
main.goods.list > header nav .tools > ul .dropdown > ul > li ~ li {
   margin-top : 17px
}
main.goods.list > header nav .tools > ul > li {
   width : 45px ;
   height : 33px ;
   display : table-cell ;
   position : relative ;
   text-align : center;
}
main.goods.list > header nav .tools > ul > li > button {
   height : 33px ;
   line-height : 33px ;
   font-size : 0;
}
main.goods.list > header nav .tools > ul > li > button.filter {
  position: relative;
}
main.goods.list > header nav .tools > ul > li > button.filter .icon.on {
   opacity: 1;
}
main.goods.list > header nav .tools > ul > li > button .icon { background-position : center ;background-repeat : no-repeat ; display : inline-block ; position : relative ; vertical-align : middle ; width : 23px ; height : 33px ; transition : ease-out .2s ; }


main.goods.list > header nav .tools > ul > li > button.on + .dropdown { display : block ; }
main.goods.list > header nav .tools > ul > li > button.on + .dropdown:after { display : block }

/** 정렬 버튼 **/
main.goods.list > header nav .tools > ul > li > button.sort .icon { background-image : url('/images/ico-angle-down.svg') }
main.goods.list > header nav .tools > ul > li > button.sort.on .icon { transform : rotate(180deg) }
/** 필터 버튼 **/
body:has(main.goods.list .tools .filter.on) {
  overflow: hidden;
}
main.goods.list > header nav .tools > ul > li > button.filter #filter-cnt {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 11px;
  left: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 10px;
  line-height: 100%;
  background-color: #808080;
  border-radius: 50%;
  color: #fff;
}
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont { width : 12px ; height: 12px ; display : inline-block ; position : absolute ; top : 10px ; left : 3px }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line { position : absolute ; width : 100% ; left : 0 ; height : 5px }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:before,
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:after { content : "" ; background-color : var(--quick-border) ; display : inline-block ; position : absolute ; left : 0 ; transition : ease-out .2s }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:before { width: 100% ; height : 1px ; top : 1px }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:after { width : 1px ; height : 3px ; top : 0 } 
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:nth-child(1) { top : 2px }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:nth-child(2) { top : 6px }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:nth-child(3) { top : 10px }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:nth-child(1):after { left : 3px }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:nth-child(2):after { left : 8px }
main.goods.list > header nav .tools > ul > li > button.filter .icon .--cont > .--line:nth-child(3):after { left : 5px }
main.goods.list > header nav .tools > ul > li > button.filter.on .icon .--cont > .--line:nth-child(1):after { left : 9px }
main.goods.list > header nav .tools > ul > li > button.filter.on .icon .--cont > .--line:nth-child(2):after { left : 4px }
main.goods.list > header nav .tools > ul > li > button.filter.on .icon .--cont > .--line:nth-child(3):after { left : 7px }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown {
   position : absolute ;
   top: 38px;
   right : -90px ;
   left : initial ;
   width : 25vw ;
   padding : 0 ;
   text-align : left;
   transition: ease-out .1s;
}
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown > * {
   background-color: #fff;
}
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown > header {
   width : 100% ;
   height : 65px ;
   position : relative ;
   border-bottom : solid 1px var(--border-color) ;
   padding : 40px 40px 0 40px ;
   line-height : 1;
}
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown > header img {
   display : inline-block ;
   vertical-align : middle ;
   margin-right : 4px;
}
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown > header button.close {
   top : 37px ;
   right : 40px;
}
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid {
   height: 100%;
   max-height: 750px;
   overflow-y : auto;
}
.has-top-banner main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid {
   height: calc(100vh - var(--top-banner-height) - 200px);
}
body:not(.scroll-down):not(.banner-visible) main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid {
  max-height: calc(100vh - 300px);
}
.has-top-banner:not(.banner-visible) main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid {
  height: 100%;
}
/* .scroll-down main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid {
  height: 100%;
  max-height: calc(100vh - 110px);
} */
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid > ul { width : 100% ; position : relative }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid > ul > li { padding : 20px 40px 40px 40px }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid > ul > li ~ li { border-top : solid 1px var(--border-color) }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid h3 { position : relative ; font-size : var(--fontsize) ; margin-bottom : 18px }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid > ul > li .sort { display : grid ; grid-template-columns : 1fr 1fr ; gap : 20px }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid ul[data-filter] { display : inline-block ; width : 100% }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid ul[data-filter] > li { display : inline-block ; float : left ; margin-right : 30px ; margin-bottom : 10px ; line-height : 25px ; cursor : pointer ; position : relative ; color : var(--gray) }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid ul[data-filter] > li.on { color : var(--black) }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid ul[data-filter] > li.on:before { content : "" ; border : solid 1px var(--black) ; display : inline-block ; position: absolute ; top : 0 ; left : -10px ; width : calc( 100% + 20px ) ; height : 100% }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .buttons {
   width : 100% ;
   display : grid ;
   grid-template-columns : 1fr 1fr ;
   text-align : center ;
   padding : 0 ;
   position : absolute ;
   left : 0;
}
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .buttons button.reset { border-color : var(--border-color) ; border-left : none ; border-right : none }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .buttons button.reset:before { content : "" ; background-image : url('/images/ico-reset.svg') ; width : 14px ;height : 12px ; display : inline-block ; vertical-align : middle ; margin-right : 4px }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .buttons button ~ button { margin-top : 0 }
main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .buttons + .grid { margin-bottom : 45px ; max-height : 815px ; height : calc( 100vh - 155px ) }

/** 아이탬 <-> 착용샷 **/
main.goods.list > header nav .tools > ul > li > button.showing .icon { background-image : url('/images/ico-list-t2.svg') }
main.goods.list > header nav .tools > ul > li > button.showing.on .icon { background-image : url('/images/ico-list-t1.svg') }
main.goods.list > header nav .tools > ul > li > button.showing:not(.on) .on,
main.goods.list > header nav .tools > ul > li > button.showing.on .off { display : none }
/** 2칸 <-> 4칸보기 **/
main.goods.list > header nav .tools > ul > li > button.column .icon { background-image : url('/images/ico-list-grid.svg') ; background-repeat : repeat-x ; width : 12px ; margin : 0 3px ; background-position : left center }
main.goods.list > header nav .tools > ul > li > button.column .icon:after { content : "" ; width : 1px ; height : 14px ; display : inline-block ; position : absolute ; right : 0 ; top : calc( 50% - 7px ) ; background-color : var(--quick-border) }
main.goods.list > header nav .tools > ul > li > button.column.on .icon { width : 23px }
main.goods.list > header nav .tools > ul > li > button.column:not(.on) .on,
main.goods.list > header nav .tools > ul > li > button.column.on .off { display : none }

/** 상품 > 목록 : 기본 4칸보기 **/
main.goods.list ul#list {
  position: relative;
  display : grid;
  grid-template-columns : repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
}
main.goods.list:not(.has-bottom-banner.has-cate-swiper) ul#list {
  padding-top: 45px;
}
main.goods.list.recently > header nav #goods-nav-top {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  padding: 40px 40px 20px;
}
main.goods.list.recently > header nav #goods-nav-top .nav-title {
  display: flex;
  align-items: center;
  gap: 5px;
}
main.goods.list.recently > header nav #goods-nav-top .nav-title .icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
main.goods.list.recently > header nav #goods-nav-top .nav-title .icon svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main.goods.list.recently > header nav #goods-nav-top .nav-title .icon svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main.goods.list.recently > header nav .edit-btn-wrap {
  
}
main.goods.list.recently > header nav .edit-btn-wrap #btn-edit {
  text-decoration: underline;
  cursor: pointer;
}

main.goods.list.recently:not(.has-bottom-banner.has-cate-swiper) ul#list {
  padding-top: 78px;
}

/* 마이페이지 -> 최근본제품 */
@media only screen and (max-width: 1024px) {
  main.goods.list.recently nav #btn-mobile-history-back{ 
    margin-bottom : 0;
  }
  main.goods.list.recently ul#list {
    padding-top: 90px !important;
  }
}
main.goods.list.has-bottom-banner:not(.has-cate-swiper) ul#list {
  padding-top: 0;
}
main.goods.list.has-cate-swiper:not(.has-bottom-banner) ul#list {
   padding-top: 135px;
}
body.has-top-banner main.goods.list ul#list {
   padding-top: 135px;
}
main.goods.list.search  ul#list {
  padding-top: 90px !important;
}
main.goods.list ul#list::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--border-color);
  bottom: 0;
  right: 0;
  position: absolute;
  display: inline-block;
  z-index: 80;
}
main.goods.list ul#list > li {
  position : relative;
  border-bottom : solid 1px var(--border-color);
  border-right : solid 1px var(--border-color);
}
/* main.goods.list ul#list > li.col-4-last {
  border-right : none;
} */
/** 사이즈가 다른 셀 반영을 위해 주석 처리
main.goods.list ul#list > li:nth-child(4n) { border-right : none }
 **/

main.goods.list ul#list > li.h2{ grid-row: span 2; min-height: 100%;}
main.goods.list ul#list > li.w2{ grid-column: span 2;}
main.goods.list ul#list > li.asset { overflow: hidden; position: relative;}
main.goods.list ul#list > li.asset video,
main.goods.list ul#list > li.asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: flex;
}
main.goods.list ul#list > li.asset video { pointer-events: none;}

main.goods.list ul#list > li a { display : block ; width : 100% ; aspect-ratio: 5 / 6 ; position : relative; top : 0 ; left :0 ; overflow : hidden }
main.goods.list ul#list > li a > * { display : block ; width : 100% ; height : 100% ; background-size : cover ; background-position : center ; }
main.goods.list ul#list > li .info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width : 100% ;
  height : 120px ;
  font-size : 11px;
  padding : 15px 40px 0;
}
main.goods.list.recently ul#list > li .info,
main.goods.list.wishlist ul#list > li .info {
  height : auto;
  padding : 15px 40px 24px;
}
main.goods.list ul#list > li .info .info-top { 
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main.goods.list ul#list > li .info > * {
  display : block;
  line-height: 100%;
}
main.goods.list ul#list > li .info > * > ul,
main.my .info > .color ul { display : flex; }
main.goods.list ul#list > li .info > .color > ul > li {
  display : flex;
  align-items: center;
}
main.goods.list ul#list > li .info strong {
  font-size : var(--fontsize);
  font-weight : var(--fontweight-s);
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
main.goods.list ul#list > li .info .price {
  font-size: 10px;
}

/* 2504u28 제갈민혁 - 상품 리스트 품절 */
main.goods.list ul#list > li .info .price .cont .soldout_cont{
  margin-left:12px;
  color : #999999;
  position: relative;
}
main.goods.list ul#list > li .info .price .cont .soldout_cont::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 4px);
  height: 1px;
  background: #343434;
  transform: translate(-50%, -50%);
}

main.goods.list ul#list > li .info > .color ul > li { cursor : pointer ; position : relative }
main.goods.list ul#list > li .info > .color ul > li .name { white-space: nowrap; display : inline-block }
main.goods.list ul#list > li .info > .color ul > li ~ li .name,
main.my .info > .color ul > li ~ li .name { display : none }
main.goods.list ul#list > li .info > .color .colorchip { margin-left : 8px }
main.goods.list ul#list > li .info > .color .colorchip.white { background-color : var(--white) ; border : solid 1px var(--border-color) }

main.goods.list ul#list > li .info > .size ul > li { padding-right : 12px ; line-height : 11px }
main.goods.list ul#list > li .info > .size ul > li.soldout { opacity : .5 }
main.goods.list ul#list > li .info > .size ul > li.reorder { opacity : .5 }

/* 위시리스트, 최근 본 제품 장바구니 추가 */
main.goods.list ul#list > li .btn-variant-modal {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid #eaeaea;
  cursor: pointer;
}
main.goods.list ul#list > li .btn-variant-modal .icon {
  width: 10px;
  height: 14px;
  display: flex;
  margin-bottom: 3px;
}
main.goods.list ul#list > li .btn-variant-modal .icon svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main.goods.list ul#list > li .btn-variant-modal span {
  font-size: 11px;
}
main.goods.list .variant-modal > section {
  width: 400px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
	padding: 20px;
}
main.goods.list .variant-modal > section > section {
	position: relative;
}
main.goods.list .variant-modal > section > button.close {
	width: 12px;
	height: 12px;
	position: relative;
	top: 0;
	left: 0;
	align-self: flex-end;
}
main.goods.list .variant-title {
  display: flex;
  gap: 10px;
  margin-top: 47px;
}
main.goods.list .variant-title .afew-text {
  color: #FF0000;
}
main.goods.list .variant-dropdown,
main.goods.list .variant-list {
  margin-top: 10px;
  margin-bottom: 12px;
}
main.goods.list .variant-list[data-product-type='B'] {
  display: flex;
  flex-wrap: wrap;
}
main.goods.list .variant-list[data-product-type='B'] .size-content {
  position: relative;
}
main.goods.list .variant-list[data-product-type='B'] .size-content.afew::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #FF0000;
}
main.goods.list .variant-list[data-product-type='B'] .size-content.soldout {
  pointer-events: none;
}
/* main.goods.list .variant-list[data-product-type='B'] .size-content.soldout::after,
main.goods.list .variant-list[data-product-type='B'] .size-content.reorder::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 62px;
  height: 1px;
  transform-origin: top right;
  transform: rotate(-45deg);
  background-color: #eaeaea;
} */
/* main.goods.list .variant-list[data-product-type='B'] .size-content.soldout.one-size::after,
main.goods.list .variant-list[data-product-type='B'] .size-content.reorder.one-size::after {
  width: 78px;
  transform: rotate(326deg);
} */
/* main.goods.list .variant-list[data-product-type='B'] .size-content.reorder.on::after {
  background-color: #343434;
} */
main.goods.list .variant-list[data-product-type='B'] .size-content.reorder.on::after {
  background: linear-gradient(
    to bottom right,
    transparent 49.5%,
    #343434 49.5%,
    #343434 50.5%,
    transparent 50.5%
  );
}
main.goods.list .variant-list[data-product-type='B'] .size-content.soldout > label span,
main.goods.list .variant-list[data-product-type='B'] .size-content.reorder > label span {
  color: #c2c2c2;
  background: linear-gradient(
    to bottom right,
    transparent 49.5%,
    #dcdcdc 49.5%,
    #dcdcdc 50.5%,
    transparent 50.5%
  );
}
main.goods.list .variant-list[data-product-type='B'] .size-content > label {
  display: flex;
  align-items: center;
  justify-content: center;
}
main.goods.list .variant-list[data-product-type='B'] .size-content > label span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 45px;
  line-height: 43px;
  border-top: solid 1px #eaeaea;
  border-right: solid 1px #eaeaea;
  border-bottom: solid 1px #eaeaea;
}
main.goods.list .variant-list[data-product-type='B'] .size-content.one-size > label span {
  width: auto;
  padding: 0 10px;
}

main.goods.list .variant-list[data-product-type='B'] .size-content:first-child > label span,
main.goods.list .variant-list[data-product-type='B'] .size-content:nth-child(8n + 1) > label span {
  border-left: solid 1px #eaeaea;
}
main.goods.list .variant-list[data-product-type='B'] .size-content:nth-child(n + 9) > label span {
  border-top: none;
}
main.goods.list .variant-list[data-product-type='B'] .size-content > label input:checked ~ span::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: solid 1px #343434;
}
/* dropdown */
main.goods.list .set-title {
  margin-top: 20px;
}
main.goods.list .set-title:first-child {
  margin-top: 10px;
}
main.goods.list .variant-dropdown,
main.goods.list .set-dropdown {
  width: 100%;
  min-height: 45px;
  position: relative;
  cursor: pointer;
}
main.goods.list .set-dropdown {
  margin-top: 10px;
}
main.goods.list .variant-dropdown .variant-dropdown-placeholder,
main.goods.list .set-dropdown .set-dropdown-placeholder {
  width: inherit;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: solid 1px #eaeaea;
  background-color: #FFF;
}
main.goods.list .variant-dropdown.on .variant-dropdown-placeholder,
main.goods.list .set-dropdown.on .set-dropdown-placeholder {
  border: solid 1px #808080;
}
main.goods.list .variant-dropdown.has-selected .variant-dropdown-placeholder,
main.goods.list .set-dropdown.has-selected .set-dropdown-placeholder {
  border: solid 1px #343434;
}
main.goods.list .set-dropdown.has-selected .set-dropdown-placeholder {
  height: auto;
  padding: 0;
}
main.goods.list .variant-dropdown .variant-dropdown-placeholder .arrow {
  width: 8px;
  height: 8px;
  display: none;
}
main.goods.list .variant-dropdown.on .variant-dropdown-placeholder .arrow {
  display: flex;
}
main.goods.list .variant-dropdown ul,
main.goods.list .set-dropdown ul {
  width: 100%;
  max-height: 120px;
  overflow-y: auto;
  position: absolute;
  z-index: 10;
  display: none;
  border-bottom: solid 1px #bfbfbf;
  background-color: #fff;
}
main.goods.list .variant-dropdown ul::-webkit-scrollbar-thumb,
main.goods.list .set-dropdown ul::-webkit-scrollbar-thumb {
  background-color: #cfcfcf; /* 트랙 배경색 */
  border-radius: 0; /* 트랙 모서리 둥글게 */
}
main.goods.list .variant-dropdown ul::-webkit-scrollbar-track,
main.goods.list .set-dropdown ul::-webkit-scrollbar-track {
  border-top: solid 1px #bfbfbf;
  border-right: solid 1px #bfbfbf;
  border-bottom: solid 1px #bfbfbf;
}
main.goods.list .variant-dropdown.on ul,
main.goods.list .set-dropdown.on ul { 
  display: block;
}
main.goods.list .variant-dropdown ul li,
main.goods.list .set-dropdown ul li {
  position: relative;
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  border-right: solid 1px #bfbfbf;
  border-bottom: solid 1px #eaeaea;
  border-left: solid 1px #bfbfbf;
}
main.goods.list .set-dropdown ul li {
  height: auto;
}
main.goods.list .variant-dropdown ul li.soldout,
main.goods.list .set-dropdown ul li.soldout {
  pointer-events: none;
}
main.goods.list .variant-dropdown ul li.afew,
main.goods.list .set-dropdown ul li.afew {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #FF0000;
}
main.goods.list .variant-dropdown ul li.soldout span,
main.goods.list .variant-dropdown ul li.reorder span,
main.goods.list .set-dropdown ul li.soldout span,
main.goods.list .set-dropdown ul li.reorder span {
  color: #C2C2C2;
  text-decoration: line-through;
  text-decoration-color: #C2C2C2;
}
main.goods.list .variant-dropdown ul li:last-child,
main.goods.list .set-dropdown ul li:last-child {
  border-bottom: none;
}
main.goods.list .variant-dropdown ul li label,
main.goods.list .set-dropdown ul li label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
}
main.goods.list .set-dropdown ul li label {
  padding: 0;
}
main.goods.list .set-dropdown ul li label input {
  display: none;
}
main.goods.list .set-dropdown .set-wrap {
  width: 100%;
  display: flex;
  align-items: center;
}
main.goods.list .set-dropdown .set-wrap .set-image {
  width: 60px;
  height: 75px;
}
main.goods.list .set-dropdown .set-wrap .set-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main.goods.list .set-dropdown .set-wrap .set-info {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 15px 20px;
}
main.goods.list .option-noti-text,
main.goods.list .noti-text {
  color: #FF0000;
}
main.goods.list .option-noti-text.hidden-opacity,
main.goods.list .noti-text.hidden-opacity {
  opacity: 0;
}
main.goods.list #btn-add-to-cart,
main.goods.list #btn-checkout,
main.goods.list #btn-go-back {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
main.goods.list #btn-add-to-cart {
  margin-top: 5px;
  background-color: #191919;
  color: #fff;
}
main.goods.list #btn-go-back {
  margin-top: 30px;
  background-color: #191919;
  color: #fff;
}
main.goods.list #btn-checkout {
  margin-top: 10px;
  border: solid 1px #808080;
  background-color: #fff;
  color: #191919;
}
main.goods.list .complete .text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 67px;
  margin-bottom: 33px;
  font-size: 12px;
}

/* 20250425 제갈민혁 sold out 임박 */
/* main.goods.list ul#list > li .info > .size ul > li .close_stock{ */
.close_stock{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FF0000;
  float: right;
  margin-left: 1px;
}

main.goods.list ul#list > li.soldout .info > .price:before { content : "Sold out" }
main.goods.list ul#list > li.soldout .info > .price .cont { margin-left : 10px ; position : relative ; color : var(--gray) ; text-decoration: line-through; -webkit-text-decoration-color: #343434;text-decoration-color: #343434; }
main.goods.list ul#list > li.soldout .info > .price .cont:after { content : "" ; display : inline-block ; position : absolute ; width : calc( 100% + 8px ) ; top : 50% ; left : -4px ; height : 1px ; background-color : var(--gray) }

/** 상품 > 목록 : 2칸보기 **/
main.goods.list > section.list.col-2 { padding : 0 calc( 100vw / 6 ) }
main.goods.list > section.list.col-2 ul#list {
  grid-template-columns : repeat(2, minmax(0, 1fr));
  border-left : solid 1px var(--border-color);
}

/* main.goods.list > section.list.col-2 ul#list > li:nth-child(2n) { border-right : none } */
/*
main.goods.list > section.list.col-2 ul#list > li .info > strong,
main.goods.list > section.list.col-2 ul#list > li .info > .color { left : 130px }
main.goods.list > section.list.col-2 ul#list > li .info > .price,
main.goods.list > section.list.col-2 ul#list > li .info > .size { right : 130px }
*/
/*main.goods.list > section.list.col-2 .swiper-container { opacity : 1 }*/
/* main.goods.list > section.list .swiper-container { position : relative ; height : 100% ; opacity : 0 ; }  */
/* main.goods.list > section.list.outfit .swiper-container.product { z-index : -1 }
main.goods.list > section.list.outfit .swiper-container.product { z-index : -1 }
main.goods.list > section.list:not(.outfit) .swiper-container.outfit { z-index : -1 } */
main.goods.list > section.list .swiper-container .swiper-slide { width : 100% }
/* main.goods.list > section.list .swiper-container .image-cont { display : grid ; place-items:  center ; height : 100% } */
/* main.goods.list > section.list .swiper-container .image-cont img { max-width : 100% ; max-height : 100% } */

main.goods.list > section.list .swiper-container {
  position :absolute;
  width: inherit;
  height : inherit;
} 
main.goods.list > section.list .swiper-container {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
main.goods.list > section.list:not(.outfit) .swiper-container.product,
main.goods.list > section.list.outfit .swiper-container.outfit {
  opacity: 1;
  pointer-events: auto;
}

main.goods.list > section.list .swiper-container .image-cont { display : flex ; width: 100% ; height : 100% ; }
main.goods.list > section.list .swiper-container .image-cont img { width : inherit ; height : inherit ; object-fit : cover ; }

/** 상품 > 목록 : 착용샷 **/
main.goods.list > section.list.outfit ul#list a > .image { background-image : var(--outfit-src) !important }

/** 베스트 상품 > 목록 **/
main.goods.list section.best { position : relative ; margin-bottom : 120px }
main.goods.list section.best:after { content : "" ; display : inline-block ; width : 100% ; height : 1px ; position : absolute ; background-color : var(--border-color) ; left : 0 ; bottom : 0 }
main.goods.list section.best ul#list { width : 1280px ; margin : auto ; border-right : solid 1px var(--border-color) ; border-left : solid 1px var(--border-color) ; display : grid ; grid-template-columns : repeat(2,1fr) } 
main.goods.list section.best ul#list > li { height : 300px ; padding-bottom : 0 ; border-bottom : solid 1px var(--border-color) ; border-right : solid 1px var(--border-color) ; padding-left : 240px }
main.goods.list section.best ul#list > li:nth-child(2n) { border-right : none }
main.goods.list section.best ul#list > li a { width : 240px ; height : 299px ; background-position : center ; background-repeat : no-repeat ; background-size : contain ; border-right : solid 1px var(--border-color) }

main.goods.list section.best ul#list > li:before { display : block ; width : 40px ; line-height : 24px ; background-color : var(--black) ; color: var(--white) ; text-align : center ; font-size : var(--fontsize-s) ; position : absolute ; top : 0 ; left : 0 ; z-index : 2  }
main.goods.list section.best ul#list > li:nth-child(1):before { content : "01" } 
main.goods.list section.best ul#list > li:nth-child(2):before { content : "02" } 
main.goods.list section.best ul#list > li:nth-child(3):before { content : "03" } 
main.goods.list section.best ul#list > li:nth-child(4):before { content : "04" } 
main.goods.list section.best ul#list > li:nth-child(5):before { content : "05" } 
main.goods.list section.best ul#list > li:nth-child(6):before { content : "06" } 
main.goods.list section.best ul#list > li:nth-child(7):before { content : "07" } 
main.goods.list section.best ul#list > li:nth-child(8):before { content : "08" } 
main.goods.list section.best ul#list > li:nth-child(9):before { content : "09" } 
main.goods.list section.best ul#list > li:nth-child(10):before { content : "10" } 
main.goods.list section.best ul#list > li:nth-child(11):before { content : "11" } 
main.goods.list section.best ul#list > li:nth-child(12):before { content : "12" } 
main.goods.list section.best ul#list > li:nth-child(13):before { content : "13" } 
main.goods.list section.best ul#list > li:nth-child(14):before { content : "14" } 
main.goods.list section.best ul#list > li:nth-child(15):before { content : "15" } 
main.goods.list section.best ul#list > li:nth-child(16):before { content : "16" } 
main.goods.list section.best ul#list > li:nth-child(17):before { content : "17" } 
main.goods.list section.best ul#list > li:nth-child(18):before { content : "18" } 
main.goods.list section.best ul#list > li:nth-child(19):before { content : "19" } 
main.goods.list section.best ul#list > li:nth-child(20):before { content : "20" } 
main.goods.list section.best ul#list > li .info { position : static ; width : 100% ; height : auto ; padding : 85px 0 0 20px }
main.goods.list section.best ul#list > li .info > * { display : block ; margin-bottom : 13px }
main.goods.list section.best ul#list > li .info > * > ul { display : table }
main.goods.list section.best ul#list > li .info > * > ul > li { display : table-cell }
main.goods.list section.best ul#list > li .info > strong { font-size : var(--fontsize-title) ; font-weight : 400 ; top : 15px ; left : 40px }
main.goods.list section.best ul#list > li .info > .price { position : static }
main.goods.list section.best ul#list > li .info button.favorite { position : static ; margin-bottom : 20px }
main.goods.list section.best button.to-top { position : absolute ; bottom : -106px ; left : calc( 50% - 20px ) }

/* 스와이프 인디케이터 */
.swiper-pagination-bullets-dynamic{
  position: absolute;
  bottom: 15px!important;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
  background-color: #000;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
  background-color: #000;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(1);
  background-color: #000;
  opacity: 30%;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  background-color: transparent;
  opacity: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(1);
  background-color: #000;
  opacity: 30%;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  background-color: transparent;
  opacity: 0;
}

.swiper-pagination-bullet {
	width: 15px;
	height: 2px;
  margin: 0 2px;
  display: inline-block;
  border-radius: 0px;
}

main.goods.list.recently .btn-del-wrap {
	display: flex;
	gap: 20px;
}
main.goods.list.recently .btn-del-wrap #btn-del-select {
	color: #000000;
	text-decoration: underline;
	font-size: 11px;
	cursor: pointer;
}
main.goods.list.recently .cb-all-wrap {
	
}
main.goods.list.recently .cb-all-wrap input[type="checkbox"],
main.goods.list.recently .cb-self-wrap input[type="checkbox"] {
  display: none;
}
main.goods.list.recently .cb-all-wrap input[type="checkbox"]:checked + label,
main.goods.list.recently .cb-self-wrap input[type="checkbox"]:checked + label {
	background-color: #000;
}
main.goods.list.recently .cb-all-wrap label,
main.goods.list.recently .cb-self-wrap label {
  display: flex;
	width: 10px;
	height: 12px;
	border: 1px solid #000;
}

main.goods.list.recently .cb-self-wrap {
	position: absolute;
	top: 20px;
	left: 20px;
  z-index: 10;
  display: none;
}

main.goods.list.recently #list.edit-mode .cb-self-wrap {
	display: flex;
}

@media only screen and (max-width: 1024px) {
   /** shop **/
   main.goods.list > header nav:has(.tools .filter.on) {
    z-index: 1002;
  }
  main.goods.list > header nav .category {
    padding-left : 20px ;
  }
	main.goods.list > header nav .category button { display : none }
	main.goods.list > header nav .category .swiper-container > button { display : none }
	
	main.goods.list > header nav .nav { left : 20px }

  main.goods.list.recently > header nav #goods-nav-top {
    height: 45px;
    padding: 0 20px;
  }

	/* breadcrumb */
	main.goods.list > header nav #goods-breadcrumb {
		padding-left: 20px;
	}

	main.goods.list > header nav .tools { right : 4px }
	main.goods.list > header nav .tools > ul .dropdown { width : 100vw !important }
	main.goods.list > header nav .tools > ul > li > button.on + .dropdown {
      padding: 0;

  }
  main.goods.list > header nav .tools > ul > li > button.filter + .dropdown {
      position : fixed ;
      top: 0;
      right: 0;
      left : 0;
      padding : 0;
      z-index: 1005;
  }
  .scroll-down main.goods.list > header nav .tools > ul > li > button.filter + .dropdown {
      /* top: 45px; */
      top: 135px;
  }
  main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid {
    max-height: unset !important;
    height: calc(100dvh - 90px) !important;
  }
  .scroll-down main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid {
    height: calc(100vh - 90px) !important;
  }
	main.goods.list > header nav .tools > ul > li > button.filter + .dropdown > header { padding : 0 20px ; line-height : 44px ; height : 45px }
	main.goods.list > header nav .tools > ul > li > button.filter + .dropdown > header button.close { top : 17px ; right : 20px }
	main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .buttons + .grid { max-height : auto ; height : calc( 100dvh - 90px ) }
	main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid h3 { margin-bottom : 13px }
	main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid > ul > li { padding : 20px 20px 40px 20px }
	main.goods.list > header nav .tools > ul > li > button.filter + .dropdown .grid > ul > li .sort { grid-template-columns: 1fr }
	main.goods.list > header nav .tools > ul > li > button.column .icon { margin : 0 ; width : 12px !important ; transition : none }
	main.goods.list > header nav .tools > ul > li > button.column .icon:after { display : none }
	main.goods.list > header nav .tools > ul > li > button.column:not(.on) .icon { background-image : url('/images/ico-list-grid-1.svg') }
	main.goods.list ul#list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	main.goods.list ul#list > li.col-4-last,
	main.goods.list ul#list > li.col-2-last {
		border-right : none;
    width: calc(100% - 1px); /* 250502 - 제갈민혁 모바일 이미지 width, height 비율료 인해 수정*/
	}
	main.goods.list ul#list > li .info {
		height : 90px;
		gap: 8px;
		padding : 10px 20px 0;
	}
  main.goods.list.recently ul#list > li .info,
  main.goods.list.wishlist ul#list > li .info {
    height : auto;
    padding : 10px 20px 20px;
  }
	main.goods.list ul#list > li .info .info-top { 
		display: flex;
		flex-direction: column;
		justify-content: unset;
		align-items: flex-start;
		gap: 7px;
	}

  main.goods.list ul#list > li .info .info-top .info-top-name {
    width: 100%;
  }

	main.goods.list ul#list > li .info strong {
		font-size : var(--fontsize) ;
		font-weight : var(--fontweight-s) ;
		text-overflow: ellipsis;
		overflow: hidden;
		/* width: 90%; */
		width: 100%;
		white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
	}

	main.goods.list ul#list > li .info > .color {
		font-size: 10px;
	}

	main.goods.list ul#list > li .info > .price { position : static }

	/** 모바일 - 상품 > 목록 : 1칸보기 **/
	main.goods.list > section.list.col-2 { padding : 0 }
	main.goods.list > section.list.col-2 ul#list { display : block ; border-left : none ; border-right : none }
	main.goods.list > section.list.col-2 ul#list > li { border-right : none; width : 100%; }
	/* main.goods.list > section.list.col-2 ul#list > li a { height: calc( 100% - 120px ) } */

	/* main.goods.list > section.list.col-2 ul#list > li .info { height : 120px ; padding : 7px 0 0 20px } */
	main.goods.list > section.list.col-2 ul#list > li .info { height : 98px; }
	main.goods.list > section.list.col-2 ul#list > li .info .info-top { gap: 8px; }

	main.goods.list > section.list:not(.col-2) ul#list > li .info > .size { display : none }


	/** 베스트 상품 > 목록 **/
	main.goods.list section.best { margin-bottom : 0 }
	main.goods.list section.best:after { display : none }
	main.goods.list section.best ul#list { width : 100% ; border-left : none ; border-right : none ; border-bottom : none ; display : block } 
	main.goods.list section.best ul#list > li { height : 150px ; border-bottom : solid 1px var(--border-color) ; border-right : none ; padding-left : 120px }
	main.goods.list section.best ul#list > li a { width : 120px ; height : 149px }
	main.goods.list section.best ul#list > li:before { width : 20px ; line-height : 20px }
	main.goods.list section.best ul#list > li .info { font-size : 10px ; padding : 40px 0 0 20px }
	main.goods.list section.best ul#list > li .info > * { margin-bottom : 6px }
	main.goods.list section.best ul#list > li .info > strong { font-size : 11px }
	main.goods.list section.best ul#list > li .info button.favorite { position : absolute ; margin-bottom : 0 ; top : 40px }

  main.goods.list ul#list > li .btn-variant-modal {
    height: 40px;
  }
  main.goods.list .modal.variant-modal {
    padding: 0;
    align-items: end;
  }
  main.goods.list .modal.variant-modal > section {
    width: 100%;
  }
  main.goods.list .variant-title {
    margin-top: 5px;
  }
}

/* 상품 swiper-pagination */
main.goods.list > section.list li a .swiper-pagination {
  display: none;
}

main.goods.list > section.list.col-2 li a .swiper-pagination {
  display: block;
}