/**************************************** SHOP */
.product_tab_list {padding: 25px 30px; background: #FAFAFA; margin-bottom: 30px;}
.product_tab_list ul {display: flex; justify-content: flex-end; flex-wrap: wrap; column-gap: 15px; row-gap: 12px;}
.product_tab_list ul li {font-size: 0.9375em; color: #aaa; font-weight: 500; cursor: pointer;}
.product_tab_list ul li.active {color: #222; font-weight: 600;}

.product_list {display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 80px;}
.product_list li {width: calc((100% - 40px)/3); text-align: center; transition: all .5s ease;}
.product_list li .thumb {position: relative; border: 1px solid #e6e6e6; width: 100%; height: 0; padding-bottom: 135.4625%; overflow: hidden; box-sizing: border-box; transition: all .5s ease;}
.product_list li .thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: 100%; */
  /* height: 100%; */
  object-fit: cover;
}
.product_list li .prd_info_wrap .prd_info {padding: 20px; display: flex; flex-direction: column; row-gap: 10px; border-bottom: 1px solid #E6E6E6;}
.product_list li .prd_info_wrap .prd_info .prd_name {font-size: 1.25em; font-weight: 600; line-height: 140%;}
.product_list li .prd_info_wrap .prd_info .prd_desc {font-size: 0.9375em; color: #aaa; line-height: 140%;}
.product_list li .prd_info_wrap .prd_price {font-size: 1.0625em; font-weight: 700; margin-top: 20px;}
.product_list li:hover {transform: translateY(-10px);}
.product_list li:hover .thumb {box-shadow: 0 0 30px rgba(0,0,0,0.07);}

.detail_bg {background: rgba(230, 230, 230, 0.25);}
.detailTop {padding: 70px 0 100px; display: flex; column-gap: 20px;}
.detailTop > div {width: calc((100% - 20px)/2); background: #fff;}
.detailTop > form {width: calc((100% - 20px)/2); background: #fff; padding: 100px 0 20px;}
.detailTop .prdImgWrap {border: 1px solid #e6e6e6; padding: 30px;}
.detailTop .prdImgWrap .swiper-slide {text-align: center; min-height: 718px; display: flex; justify-content: center; align-items: center; padding: 0 55px;}
.detailTop .prdImgWrap .swiper-slide img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.detailTop .prdImgWrap .swiper-button-prev::after,
.detailTop .prdImgWrap .swiper-button-next::after {display: none;}
.detailTop .prdImgWrap .swiper-button-prev,
.detailTop .prdImgWrap .swiper-button-next {width: 55px; height: 56px; background-size: 100%;}
.detailTop .prdImgWrap .swiper-button-prev {background: url(/img/swiper_prev.png) no-repeat center center; background-size: 100%; left: 0;}
.detailTop .prdImgWrap .swiper-button-next {background: url(/img/swiper_next.png) no-repeat center center; background-size: 100%; right: 0;}

.detailTop .prdInfoWrap {padding: 0 100px;}
.detailTop .prdInfoWrap > div {width: 100%;}

.detailTop .prd_info {margin-bottom: 80px;}
.detailTop .prd_info .prd_name {font-size: 1.857em; font-weight: 600; line-height: 135%;}
.detailTop .prd_info .prd_desc {font-size: 1.0625em; font-weight: 500; line-height: 140%; opacity: 0.5; margin-top: 15px;}

.detailTop .prd_count {padding-bottom: 30px; border-bottom: 1px solid #e6e6e6; font-size: 1.0625em;}
.detailTop .prd_count li {display: flex; flex-wrap: wrap;}
.detailTop .prd_count li:not(:last-child) {margin-bottom: 18px;}
.detailTop .prd_count li .lt {width: 95px; color: #aaa; font-weight: 500; display: flex; align-items: center; column-gap: 7px;}
.detailTop .prd_count li .lt::before {content: ""; display: inline-block; width: 3px; height: 3px; background: #d9d9d9;}
.detailTop .prd_count li .rt {width: calc(100% - 95px);}
.detailTop .prd_count .prd_price {font-weight: 700; letter-spacing: 0;}
.count_input {display: flex; align-items: center;}
.count_input input {font-weight: normal; width: 60px; text-align: center; font-weight: 500;}
.count_input span {width: 28px; height: 28px; border: 1px solid #e6e6e6; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.count_input span.disabled img {opacity: 0.3;}

.detailTop .total_price {margin: 30px 0 50px; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; column-gap: 30px; font-size: 1.0625em; font-weight: 500;}
.detailTop .total_price #totalPrice {font-size: 1.625rem; font-weight: 700; letter-spacing: 0;}

.detailTop .prdOrderWrap {display: flex; column-gap: 5px; height: 60px;}
.detailTop .prdOrderWrap #cartBtn {width: 60px; height: 100%; border: 1px solid #e6e6e6; box-sizing: border-box; background: #fff; display: flex; justify-content: center; align-items: center; transition: border .2s;}
.detailTop .prdOrderWrap #cartBtn:hover {border: 1px solid #222;}
.detailTop .prdOrderWrap #purchaseBtn {width: calc(100% - 65px); height: 100%; background: #222; color: #fff; font-size: 1.0625em; font-weight: 700; transition: background .2s;}
.detailTop .prdOrderWrap #purchaseBtn:hover {background: #444;}

.detailBottom {width: 100%; max-width: 1160px; margin: 0 auto;}
.detail_tab_wrap {display: flex; margin-bottom: 50px;}
.detail_tab_wrap li {width: 50%; cursor: pointer; box-sizing: border-box; border-bottom: 1px solid #e6e6e6; height: 80px; font-weight: 500; font-size: 1.0625em; text-align: center; display: flex; justify-content: center; align-items: center; box-sizing: border-box; position: relative;}
.detail_tab_wrap li.active::after {content: ""; display: block; position: absolute; left: 0; bottom: 0; background: #222; width: 100%; height: 3px;}
.detailCont1 {margin-bottom: 50px;}
.detailCont1 .content {width: 100%;}
.detailCont1 .content img {height: auto !important;}
.detailCont2 .purchase_info {font-size: 0.9375em; color: #666; line-height: 155%; margin-bottom: 30px;}
.detailCont2 .purchase_info_box {display: flex; flex-wrap: wrap;}
.detailCont2 .purchase_info_box li {border: 1px solid #E6E6E6;}
.detailCont2 .purchase_info_box li .title {background: #fafafa; border-bottom: 1px solid #E6E6E6; padding: 20px 30px; font-size: 1.0625em; font-weight: 500;}
.detailCont2 .purchase_info_box li .box {padding: 25px 20px 25px 30px; font-size: 0.9375rem; line-height: 155%; color: #999;}
.detailCont2 .purchase_info_box li.w100 {width: 100%;}
.detailCont2 .purchase_info_box li.w50 {width: 50%; border-top: 0;}
.detailCont2 .purchase_info_box li.w50:last-child {border-left: 0;}


@media screen and (max-width: 1440px) {
  .detailTop > form {padding: 5vw 0 20px;}
  .detailTop .prdInfoWrap {padding: 0 5vw;}
  .detailTop .prd_info .prd_name {font-size: 1.75em;}
  .detailTop .total_price #totalPrice {font-size: 1.5rem;}
  .detailTop .prd_info {margin-bottom: 18%;}
  .detailTop .total_price {margin: 6% 0 10%;}
}

@media screen and (max-width: 1200px) {
  .detail_tab_cont > *:not(.detail_tab_wrap) {padding: 0 20px;}

  .detailTop .prdImgWrap .swiper-slide {min-height: 55vw;}
}

@media screen and (max-width: 1024px) {
  .product_list li .prd_info_wrap .prd_info {row-gap: 7px;}
  .product_list li .prd_info_wrap .prd_info .prd_name {font-size: 17px;}
  .product_list li .prd_info_wrap .prd_info .prd_desc {font-size: 14px;}
  .product_list li .prd_info_wrap .prd_price {font-size: 16px;}

  .detail_tab_wrap li {height: 70px;}
  .detailCont2 .purchase_info_box li .title {padding: 20px;}
  .detailCont2 .purchase_info_box li .box {padding: 20px 20px 25px 25px;}

  .detailTop .prdImgWrap {padding: 30px 20px;}
  .detailTop .prdImgWrap .swiper-button-prev, 
  .detailTop .prdImgWrap .swiper-button-next {width: 42px; height: 43px;}
  .detailTop .prdImgWrap .swiper-slide {padding: 0 42px;}

  .detailTop .prd_info .prd_name {font-size: 2.5vw;}
  .detailTop .prd_info .prd_desc {font-size: 1.65vw; margin-top: 1.5vw;}
  .detailTop .prd_info {margin-bottom: 8vw;}
  .detailTop .prdInfoWrap {padding: 0 3.5vw;}
  .detailTop .prd_count {font-size: 1.65vw; padding-bottom: 3vw;}
  .detailTop .prd_count li:not(:last-child) {margin-bottom: 1.75vw;}
  .detailTop .prd_count li .lt {width: 8vw;}
  .detailTop .prd_count li .rt {width: calc(100% - 8vw);}
  .count_input span {width: 26px; height: 26px;}
  .count_input span img {width: 14px;}
  .count_input input {width: 50px;}
  .detailTop .total_price {font-size: 1.65vw; margin: 2vw 0 4vw;}
  .detailTop .total_price #totalPrice {font-size: 2.4vw;}
  .detailTop .prdOrderWrap {height: 55px;}
  .detailTop .prdOrderWrap #cartBtn {width: 55px;}
  .detailTop .prdOrderWrap #cartBtn img {width: 20px;}
  .detailTop .prdOrderWrap #purchaseBtn {width: calc(100% - 60px); font-size: 1.65vw;}

}

@media screen and (max-width: 768px) {
  .sub_title_wrap .title {font-size: 2.4em;}
  .product_tab_list {padding: 20px 25px;}
  .product_list li {width: calc((100% - 20px)/2);}
  .product_list li:hover {transform: translateY(0);}
  .product_list li .prd_info_wrap .prd_info {padding: 20px 0; width: calc(100% - 40px); margin: 0 auto;}

  .detail_bg {padding-top: 10px;}
  .detail_tab_wrap {margin-bottom: 40px;}
  .detail_tab_wrap li {height: 55px;}
  .detailCont2 .purchase_info_box li.w50 {width: 100%;}
  .detailCont2 .purchase_info_box li.w50:last-child {border-left: 1px solid #e6e6e6;}
  .detailCont2 .purchase_info_box li .title {padding: 17px 20px;}
  .detailCont2 .purchase_info_box li .box{padding: 20px 20px 25px;}

  .detailTop {padding: 10% 0 14%; column-gap: 10px;}
  .detailTop .prdImgWrap {width: 43%; padding: 20px 15px;}
  .detailTop .prdImgWrap .swiper-button-prev, 
  .detailTop .prdImgWrap .swiper-button-next {width: 35px; height: 36px;}
  .detailTop .prdImgWrap .swiper-slide {padding: 0 35px;}
  
  .detailTop > form {width: calc(57% - 10px);}
  .detailTop .prdInfoWrap {padding: 0 20px;}
  .detailTop .prd_info .prd_name {font-size: 2.75vw;}
  .detailTop .prd_info .prd_desc {font-size: 2vw;}
  .detailTop .prd_info {margin-bottom: 6vw;}
  .detailTop .prd_count {font-size: 1.875vw; padding-bottom: 2.325vw;}
  .detailTop .prd_count li:not(:last-child) {margin-bottom: 2vw;}
  .detailTop .prd_count li .lt {width: 9vw;}
  .detailTop .prd_count li .rt {width: calc(100% - 9vw);}
  .count_input span {width: 22px; height: 22px;}
  .count_input span img {width: 12px;}
  .count_input input {width: 42px;}
  .detailTop .total_price {font-size: 2vw; column-gap: 20px; margin: 2.5vw 0 4.5vw;}
  .detailTop .total_price #totalPrice {font-size: 2.4vw;}
  .detailTop .prdOrderWrap {height: 6vw;}
  .detailTop .prdOrderWrap #cartBtn {width: 6vw;}
  .detailTop .prdOrderWrap #cartBtn img {width: 2.5vw;}
  .detailTop .prdOrderWrap #purchaseBtn {width: calc(100% - 6vw - 5px); font-size: 2vw;}
}

@media screen and (max-width: 600px) {
  .detailTop {display: block;}
  .detailTop .prdImgWrap {width: 100%; margin-bottom: 15px;}
  .detailTop .prdImgWrap .swiper-slide {min-height: auto; height: 0; padding-bottom: 135%;}
  .detailTop .prdImgWrap .swiper-slide img {max-height: 100%;}

  .detailTop > form {width: 100%; padding: 0;}
  .detailTop .prdInfoWrap {padding: 35px 20px;}
  .detailTop .prd_info {margin-bottom: 35px;}
  .detailTop .prd_info .prd_name {font-size: 1.325em;}
  .detailTop .prd_info .prd_desc {font-size: 1em;}
  .detailTop .prd_count {font-size: 1em; padding-bottom: 17px;}
  .detailTop .prd_count li .lt {width: 65px;}
  .detailTop .prd_count li .rt {width: calc(100% - 65px);}
  .detailTop .prd_count li:not(:last-child) {margin-bottom: 12px;}
  .count_input span {width: 16px; height: 16px;}
  .count_input span img {width: 9px;}
  .count_input input {width: 35px;}
  .detailTop .total_price {font-size: 1em; margin: 17px 0 30px; column-gap: 15px;}
  .detailTop .total_price #totalPrice {font-size: 1.275em;}
  .detailTop .prdOrderWrap {height: 40px;}
  .detailTop .prdOrderWrap #cartBtn {width: 40px;}
  .detailTop .prdOrderWrap #cartBtn img {width: 14px;}
  .detailTop .prdOrderWrap #purchaseBtn {width: calc(100% - 45px); font-size: 1em;}
}

@media screen and (max-width: 540px) {
  .sub_title_wrap .title {font-size: 1.9em;}
  .product_tab_list {padding: 15px 20px; margin-bottom: 25px;}
  .product_tab_list ul li {font-size: 12px;}
  .product_list li {width: 100%;}
  .product_list li .prd_info_wrap .prd_info {row-gap: 6px; padding: 20px 0 15px;}
  .product_list li .prd_info_wrap .prd_info .prd_desc {font-size: 13px;}
  .product_list li .prd_info_wrap .prd_price {font-size: 16px; margin-top: 15px;}

  .detail_bg {padding-top: 15px;}
  .detail_tab_wrap {margin-bottom: 30px;}
  .detail_tab_wrap li {height: 50px;}
  .detailCont2 .purchase_info_box li .title {padding: 15px;}
  .detailCont2 .purchase_info_box li .box{padding: 15px 15px 20px;}
}