@charset "utf-8";

.goods-cate-title {font-size:34px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; margin-bottom:27px;}

/* 메인 카테고리 탭 */
.goods-main-cate {margin-bottom:30px; border-bottom:2px solid #eee;}
.goods-main-cate ul {display:flex; margin:0;}
.goods-main-cate ul li {position:relative;}
.goods-main-cate ul li a {display:block; padding:14px 28px; font-size:17px; font-weight:500; color:#999; letter-spacing:-.02em; transition:color .2s;}
.goods-main-cate ul li a:hover {color:#222;}
.goods-main-cate ul li.active a {color:#222; font-weight:700;}
.goods-main-cate ul li.active:after {content:""; position:absolute; bottom:-2px; left:0; right:0; height:3px; background:#007aff;}

/* 서브카테고리 */
.goods-cate {margin-bottom:35px;}
.goods-cate ul {display:flex; flex-wrap:wrap; margin:-10px -22px;}
.goods-cate ul li {position:relative; padding:10px 22px;}
.goods-cate ul li:after {content:""; position:absolute; top:50%; right:0; width:1px; height:20px; background:#dfdfdf; margin-top:-10px;}
.goods-cate ul li:last-child::after {display:none;}
.goods-cate ul li a {display:block; color:#505050; font-size:14px; font-weight:500; line-height:1.4em; letter-spacing:-.03em;}
.goods-cate ul li a:hover {color:#3B82F6; text-decoration:underline;}
.goods-cate ul li.active a {color:#3B82F6; font-weight:600;}
.goods-cate + .goods-cate {margin-top:-30px;}

/* Item type tabs (tube groups) */
.goods-item-type {margin-bottom:30px;}
.goods-item-type ul {display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.goods-item-type ul li a {display:block; padding:8px 20px; font-size:13px; font-weight:500; color:#555; background:#f5f5f5; border-radius:20px; letter-spacing:-.02em; transition:all .2s;}
.goods-item-type ul li a:hover {background:#e0e0e0; color:#222;}
.goods-item-type ul li.active a {background:#007aff; color:#fff; font-weight:600;}

/* AI Find Banner */
.ai-find-banner {margin-bottom:40px;}
.ai-find-banner__inner {display:flex; align-items:center; justify-content:space-between; padding:20px 30px; background:#EFF6FF; border-radius:10px; border:1px solid #D0E2FF;}
.ai-find-banner__text {font-size:14px; line-height:1.6em; color:#555;}
.ai-find-banner__text strong {display:block; font-size:16px; color:#222; margin-bottom:2px;}
.ai-find-banner__btn {display:inline-block; padding:10px 24px; background:#007aff; color:#fff; font-size:14px; font-weight:600; border-radius:6px; white-space:nowrap; transition:background .2s;}
.ai-find-banner__btn:hover {background:#0062cc; color:#fff;}

/* 상품정렬 */
.goods-sort {display:flex; justify-content:space-between; align-items:center; margin-bottom:50px;}
.goods-sort .sort {flex:1 1 auto; min-width:0; width:1%; display:flex; color:#a8a8a8; font-size:15px; line-height:1.3em; letter-spacing:-.03em;}
.goods-sort .sort .sort-name {position:relative; padding-right:20px; margin-right:20px; color:#2c2c2c; font-weight:500;}
.goods-sort .sort .sort-name:after {content:""; position:absolute; top:50%; right:0; width:1px; height:20px; background:#dfdfdf; margin-top:-10px;}
.goods-sort .sort ul {display:flex; margin:0 -15px;}
.goods-sort .sort ul li {padding:0 15px;}
.goods-sort .sort ul li a {display:block; transition:color .2s;}
.goods-sort .sort ul li a:hover {color:#2c2c2c; text-decoration:underline;}
.goods-sort .sort ul li.active a {color:#007aff; font-weight:600; text-decoration:underline;}
.goods-sort .search {width:400px;}
.goods-sort .search form {display:flex;}
.goods-sort .search .input {flex:1 1 auto; min-width:0; width:1%;}
.goods-sort .search .btn-pack {font-weight:500;}

/* 상품 리스트 */
.goods-list ul {display:flex; flex-wrap:wrap; margin:-25px -8px;}
.goods-list ul li {width:16.66666666%; text-align:left; padding:25px 8px; color:#505050; font-size:13px; font-weight:500; line-height:1.4em; letter-spacing:-.03em;}
.goods-list ul li a {position:relative; display:block; height:100%; border:1px solid #dfdfdf;}
.goods-list ul li a:hover .thumb img {transform:translate(-50%,-50%) scale(1.1);}
.goods-list ul li .label-wrap {position:absolute; top:9px; right:11px; z-index:2;}
.goods-list ul li .label {display:block; color:#fff; text-align:center; line-height:42px; width:42px; height:42px; background:rgba(0,0,0,.7); border-radius:100%; margin-bottom:5px;}
.goods-list ul li .thumb {position:relative; padding-bottom:100%; overflow:hidden;}
.goods-list ul li .thumb img {position:absolute; top:50%; left:50%; transition:.6s ease-in-out; transform:translate(-50%,-50%); width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;}
.goods-list ul li .info {padding:24px; border-top:1px solid #dfdfdf;}
.goods-list ul li .soldout {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-family:"Roboto",sans-serif; color:#fff; font-size:30px; font-weight:500; line-height:1.3em; background:rgba(0,0,0,.7);}
.goods-list ul li .tit {font-size:14px; font-weight:600; line-height:1.4em; color:#2c2c2c; letter-spacing:-.03em; margin-bottom:8px;}
.goods-list ul li .capacity {margin-bottom:4px;}
.goods-list ul li a:hover {background:#3B82F6; border-color:#3B82F6;}
.goods-list ul li a:hover * {color:#fff;}

/* 상품상세 상단 */
.goods-summary {display:flex; justify-content:space-between; align-items:flex-start; margin:50px 0 100px;}

.goods-photo {width:590px; display:flex; align-items:flex-start;}
.goods-photo .item {position:relative; padding-bottom:100%; overflow:hidden;}
.goods-photo .item img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;}
.goods-photo .item:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #dfdfdf;}
.goods-photo .slider {flex:1 1 auto; min-width:0; width:1%;}
.goods-photo .slider .slick-slider {width:100%;}
.goods-photo .slider ul li:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #dfdfdf;}
.goods-photo .thumbs {width:90px; margin-left:20px;}
.goods-photo .thumbs ul li {position:relative; padding-bottom:100%; overflow:hidden; margin-bottom:7px; cursor:pointer;}
.goods-photo .thumbs ul li img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;}
.goods-photo .thumbs ul li:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #dfdfdf;}
.goods-photo .thumbs .slick-current li:after {border:3px solid #505050;}
.goods-photo .slick-vertical .slick-slide {border:0;}

.goods-info {flex:1 1 auto; min-width:0; width:1%; margin-left:50px; max-width:660px;}
.goods-info .title {padding-bottom:22px; border-bottom:1px solid #a8a8a8;}
.goods-info .title h2 {font-size:30px; line-height:1.3em; letter-spacing:-.03em;}
.goods-info .table {border-bottom:1px solid #dfdfdf; line-height:1.6em; letter-spacing:-.03em; padding:27px 0;}
.goods-info .table dl {display:flex; padding:17px 0;}
.goods-info .table dt {width:158px; font-weight:600;}
.goods-info .table dd {flex:1 1 auto; min-width:0; width:1%; color:#505050;}

.goods-info .btns {margin-top:32px; display:flex; justify-content:space-between; align-items:center;}
.goods-info .options {text-align:center; color:#3B82F6; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.goods-info .options ul {display:flex;}
.goods-info .options ul li {margin-right:24px;}
.goods-info .options ul li img {display:block; margin:0 auto 8px;}
.goods-info .btn-cart {display:block; padding:0 45px; color:#fff; text-align:center; font-size:18px; font-weight:500; line-height:68px; letter-spacing:-.03em; background:#3B82F6;}
.goods-info .btn-cart img {vertical-align:middle; margin:-.2em 10px 0 0;}
.goods-info .btn-cart:hover {background:#222;}

/* 상품상세 하단 */
.goods-view-title {margin-bottom:43px; padding:0 40px; position:relative;}
.goods-view-title:before {content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:#ccc;}
.goods-view-title h3 {display:inline-block; vertical-align:top; position:relative; background:#fff; padding:0 40px; font-size:22px; font-weight:500; line-height:1.3em; letter-spacing:.1em;}

.goods-view-content {margin-bottom:100px;}

.relatied-goods {padding:0 50px;}
.relatied-goods .goods-list {position:relative; max-width:928px; margin:0 auto;}
.relatied-goods .goods-list ul {display:block;}
.relatied-goods .slick-arrow {position:absolute; top:50%; margin-top:-18px; width:20px; height:36px; transition:.2s; opacity:.4; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; border:0; overflow:hidden; text-indent:-9999em;}
.relatied-goods .slick-arrow:hover {opacity:1;}
.relatied-goods .slick-prev {left:-90px; background-image:url("../images/shop/slide_prev.png");}
.relatied-goods .slick-next {right:-90px; background-image:url("../images/shop/slide_next.png");}
.relatied-goods .slick-prev:hover {transform:translateX(-5px)}
.relatied-goods .slick-next:hover {transform:translateX(5px)}

/* spinner */
.loader-wrap {display:flex; align-items:center; justify-conten:center; height:60px; margin-top:80px;}
.loader,
.loader:before,
.loader:after {
  background: #222;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: .4em;
  height: 1em;
}
.loader {
  color: #222;
  text-indent: -9999em;
  margin: 0 auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.2em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.2em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 1em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 2.2em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 1em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 2.2em;
  }
}