@charset "utf-8";

/* 공통부분 */
.inner {width: calc(100% - 32px); max-width: 1024px; margin: 0 auto;}

.pd-200 {padding: 200px 0;}
.pd-180 {padding: 180px 0;}
.pd-160 {padding: 160px 0;}
.pd-140 {padding: 140px 0;}
.pd-120 {padding: 120px 0;}
.pd-100 {padding: 100px 0;}

h3 {font-size: 32px;}
h4 {font-size: 24px;}
h5 {font-size: 20px;}

.primary {color: var(--primary);}
.bg_primary {background-color: var(--primary);}
.secondary {color: var(--secondary);}
.thrid {color: var(--thrid);}
.gray {color: var(--gray);}

.font-medium {font-weight: 500;}
.font-semibold {font-weight: 600;}
.font-bold {font-weight: 700;}
.font-extrabold {font-weight: 800;}

.flex {display: flex; align-items: center; column-gap: 10px;}
.flex-column {display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 4px;}

.lightblue-gradient {background: linear-gradient(135deg, #F0F6FF, #E6F0FF);}
.blue-gradient {background: linear-gradient(135deg, #2563EB, #3B82F6); color: #fff;}
.hover-gradient {background: linear-gradient(to bottom, #F4F6FA, #E6F0FF);}
.card-shadow {box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);}

.img-wrap img {width: 100%; height: 100%; object-fit: cover;}

.bg {background-color: #F4F6FA;}

.btn-area {display: flex; align-items: center; justify-content: center; column-gap: 20px; margin-top: 80px;}
.btn-default {display: flex; column-gap: 10px; align-items: center; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--gray); border-radius: 100px; padding: 10px 16px;}

.tit {font-size: 32px; padding-bottom: 48px; text-align: center; }

.more-btn {display: inline-flex; align-items: center; column-gap: 24px; padding: 12px 16px 12px 32px; font-size: 18px; color: var(--text1) !important; background-color: rgba(255, 255, 255, 0.08); border: 1px solid #fff; border-radius: 100px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);}
.more-btn .icon {width: 34px; height: 34px; background-color: var(--text1); display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.more-btn .icon svg path {stroke: #fff;}
.more-btn:hover {background-color: var(--primary); border: 1px solid var(--primary); color: #fff !important; transition: all 0.2s;}
.more-btn:hover .icon {background-color: #fff; transition: all 0.2s;}
.more-btn:hover .icon svg path {stroke: var(--primary); transition: all 0.2s;}

.checkbox-item input[type="checkbox"] {display:none;}
.checkbox-item input[type="checkbox"] + label{position: relative; cursor:pointer; color: var(--gray) !important; padding-left: 28px !important; padding-top: 1px; font-size: 18px;}
.checkbox-item input[type="checkbox"] + label:hover {color: var(--gray) !important; transition: all 0.3s;}
.checkbox-item input[type="checkbox"] + label:before{position:absolute; content:""; display:inline-block; box-sizing: border-box; background-color: #fff; width:20px; height:20px; border:1px solid var(--line); border-radius: 5px; left:0; top: 50%; transform: translate(0, -50%);}
.checkbox-item input[type="checkbox"]:checked + label:before{ content:""; background-color: var(--primary); border: 1px solid var(--primary); background-image: url('../img/chk.svg'); background-repeat: no-repeat; background-position: 50%;}

/* list */
.product-list {display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 60px;}
.product-list .card {width: calc(100% / 3 - 14px); border-radius: 30px; overflow: hidden;}
.product-list .card a {position: relative; width: 100%; height: 100%; transition: all 0.3s;}
.product-list .card a .img-wrap {height: 328px;}
.product-list .card a .info {position: relative; z-index: 1; background-color: #fff; display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px; padding: 24px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.product-list .card a .info .product-code {display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.product-list .card a .info .product-name {font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.product-list .card a .info .product-price {width: 100%; display: flex; align-items: center; justify-content: space-between; column-gap: 20px; margin-top: 10px;}
.product-list .card a .info .product-price .price {font-size: 18px; font-weight: 600;}
.product-list .card a .price-sale {position: relative; display: flex; align-items: center; justify-content: center; column-gap: 4px; flex-wrap: wrap; text-align: center; row-gap: 2px; padding: 20px; font-size: 17px; background: url(../img/price-bg.png) no-repeat top center / cover;}
.product-list .card a .card-hover {position: absolute; z-index: 2; opacity: 0; visibility: hidden; transition: all 0.3s; display: flex; align-items: center; column-gap: 14px; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; border-radius: 30px; border: 4px solid var(--primary); background: linear-gradient(to bottom, rgba(244, 246, 250, 0.76), rgba(230, 240, 255, 0.76) );}
.product-list .card a .card-hover .circle {width: 34px; height: 34px; border-radius: 50%; background-color: var(--primary); display: flex; align-items: center; justify-content: center;}
.product-list .card a:hover .card-hover {opacity: 1; visibility: visible; transition: all 0.3s;}

/* layout */
/* header */
header {position: sticky; top: 0; background-color: #fff; border-bottom: 1px solid #E2E8F0; z-index: 999999;}
.header-top {display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; text-align: center; background-color: var(--primary);} 
.header-top p {color: #fff; font-size: 15px;}
.header {position: relative; height: 60px; display: flex; column-gap: 20px; justify-content: space-between; align-items: center;}

.menu-btn {position:relative;width:30px;height:30px;cursor:pointer; border: 0; background-color: transparent;}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after{display:block;position:absolute;left:0;width:100%;height:3px;background:var(--text1);transition:all 0.3s;}
.menu-btn span{top:50%;transform:translteY(-50%,-50%);}
.menu-btn span:before,
.menu-btn span:after{content:'';}
.menu-btn span:before{top:-10px;}
.menu-btn span:after{top:10px;}

.gnb-menu {position: absolute; bottom: -280px; right: 0; z-index: 10; opacity: 0; visibility: hidden; width: 320px; border-radius: 30px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); background-color: #fff; padding: 20px;}
.gnb-menu .gnb-menu-box {display: flex; flex-wrap: wrap; row-gap: 12px;}
.gnb-menu .gnb-menu-box a {width: calc(100% / 4); display: flex; flex-direction: column; row-gap: 8px; align-items: center;}
.gnb-menu .gnb-menu-box a .img-wrap {width: 50px;}
.gnb-menu .gnb-menu-box a span {font-size: 12px; font-weight: 500;}
.gnb-menu .gnb-menu-box a:hover span {color: var(--primary); transition: all 0.3s;}
.menu-open .gnb-menu {opacity: 1; visibility: visible; transition: all 0.3s;}
.menu-open .menu-btn span {background:transparent;}
.menu-open .menu-btn span:before {top: 0; transform:rotate(45deg);}
.menu-open .menu-btn span:after {top: 0; transform:rotate(-45deg);}
.menu-open .menu-btn:before {display: none;}

/* footer */
footer {width: 100%; padding: 80px 0; background-color: var(--text1);}
footer .logo {display: flex; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid #1E293B;}
footer .footer-b a,
footer .footer-b li {color: #CBD5E1; opacity: 0.6;}
footer .footer-b ul {width: 640px; display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 8px; padding-bottom: 24px;}
footer .footer-b ul li {position: relative;}
footer .footer-b ul li::after {position: absolute; width: 1px; height: 14px; background-color: #1E293B; top: 50%; right: -14px; transform: translate(0, -50%); display: block; content: '';}
footer .footer-b ul li:nth-of-type(2):after,
footer .footer-b ul li:nth-of-type(4):after {display: none;}
.scroll .quick-icon {transform: translateY(0px);}
.scroll .quick-icon .btn-top {visibility: visible;}
.quick-icon {position: fixed; right: 80px; bottom: 50px; z-index: 100; transition: 0.7s all; transform: translateY(80px);}
.quick-icon .btn-top {background-color: #fff !important; margin-top: 10px; visibility: hidden;}
.quick-icon .btn-top,
.quick-icon .quick a {width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; background-color: var(--primary); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);}
.quick-icon .quick a {flex-direction: column; row-gap: 3px;}
.quick-icon .quick a span {font-size: 12px; color: #fff; font-weight: 600;}

/* main */
#section-main-tit {padding: 100px 0 120px 0; display: flex; flex-direction: column; row-gap: 30px; justify-content: center; align-items: center; text-align: center;}
#section-main-tit h2 {font-size: 72px;}
#section-main-tit h4 {display: flex; align-items: center; line-height: 1.4;}
#section-main-tit .btn-area {margin-top: 30px;}
#section-main-tit .btn-area > a {height: 68px; display: flex; align-items: center; column-gap: 6px; padding: 0 36px; border-radius: 100px;}
#section-main-tit .btn-area > a.bg_primary {color: #fff;}
#section-main-tit .btn-area > a:hover {box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25); transition: all 0.3s;}

/* 카테고리 */
#section-cate {padding: 80px 0;}
#section-cate .cate_list {display: flex; align-items: center; column-gap: 20px;}
#section-cate .cate_list a {position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 3px solid transparent; transition: all 0.3s; row-gap: 8px; padding: 20px 12px 12px; border-radius: 12px; background-color: #fff; transition: all 0.3s;}
#section-cate .cate_list a h5 {font-size: 18px; word-break: keep-all;}
#section-cate .cate_list a:hover {border: 3px solid var(--primary); transition: all 0.3s;}
#section-cate .cate_list a:hover h5 {color: var(--primary); font-weight: 600;}

.gnbSwiper {height: 60px;}
.gnbSwiper .swiper-wrapper {justify-content: space-between;}
.gnbSwiper .swiper-slide {width: auto !important; display: flex; align-items: center;}
.gnbSwiper .swiper-slide a {width: 100%; height: 100%; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center;}

.section-consel {padding: 80px 0; overflow: hidden;}
.section-consel .inner {display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 8px; text-align: center;}
.consel-btn {max-width: 320px; width: 100%; height: 56px; font-size: 24px; font-weight: 700; margin-top: 12px; display: flex; align-items: center; justify-content: center; border-radius: 100px;}
.section-consel .inner > img {position: absolute; display: none;}
.section-consel .flex {position: relative; }
.section-consel .flex > img {position: absolute;}
.section-consel .flex > img.phone {left: -226px; top: auto;}
.section-consel .flex > img.alert {right: -278px; top: -30px;}

/* sub */
.sub-cont {padding: 100px 0 150px 0;}
.sub-cont .tit {padding-bottom: 60px;}

.sub-cate {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 60px;}
.sub-cate .sub-cate-item:hover a,
.sub-cate .sub-cate-item.active a {border: 1px solid var(--primary); color: #fff; background-color: var(--primary); transition: all 0.3s;}

/* 상품 list */
.list-top {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px;}
.list-top > p {display: flex; align-items: center; font-weight: 500; word-break: keep-all;}
.list-top .btn-area {margin-top: 0; justify-content: flex-end; column-gap: 8px;}
.list-top .btn-area .btn-filter {height: 40px; padding: 0 16px; column-gap: 16px; flex-shrink: 0; cursor: pointer;}
.sort-select {position: relative; user-select: none;font-size: 1.5rem; color: var(--text2); width: fit-content;}
.sort-select .selected {position: relative; width: 120px; height: 40px; padding: 0 30px 0 16px; background: #fff; cursor: pointer;}
.sort-select .selected::after {position: absolute; width: 12px; height: 6px; top: 50%; right: 16px; transform: translate(0, -50%); background: url(../img/sort-arrow.svg) no-repeat center; display: block; content: ''; transition: all 0.3s;}
.sort-select.open .selected::after {transform: translate(0, -50%) rotate(-180deg);}
.sort-select .options {display: none; position: absolute; overflow: hidden; top: 100%; left: 0;right: 0; background: #fff; border-radius: 12px; z-index: 100; font-size: 14px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);}
.sort-select .options li {padding: 10px 16px; cursor: pointer;}
.sort-select .options li:not(:last-of-type) {border-bottom: 1px solid var(--line);}
.sort-select .options li:hover {background: var(--bg);}
.sort-select::after {display: none;}

/* filter */
.filter-layer {position: fixed; opacity: 0; visibility: hidden; transition: all 0.3s; top:0; left: 0; width: 100%; height: 100%; z-index: 9999999999999; display: flex; justify-content: flex-end; background-color: rgba(15, 23, 42, 0.35);}
.filter-layer #filter-box {position: relative; width: 410px; height: 100%; background-color: #fff; border-radius: 30px 0 0 30px; padding: 30px 20px 130px 20px;}
.filter-layer #filter-box .filter-t {width: 100%; display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--text1);}
.filter-layer #filter-box .filter-t .btn-close {cursor: pointer;}
.filter-layer #filter-box .filter-list {width: 100%; display: flex; flex-direction: column; padding: 10px 0;}
.filter-layer #filter-box .filter-list > li > a {position: relative; display: flex; align-items: center; column-gap: 10px; padding: 18px 0; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--line); transition: all 0.2s;}
.filter-layer #filter-box .filter-list > li > a::after {content: "";position: absolute;top: 50%;right: 5px;width: 10px;height: 10px;border-bottom-left-radius: 1px;display: block;transition: all 0.2s; border-right: 2px solid var(--text1);border-bottom: 2px solid var(--text1);transform: translateY(-50%) rotate(-45deg)}
.filter-layer #filter-box .filter-list > li:hover > a::after,
.filter-layer #filter-box .filter-list > li.open > a::after,
.filter-layer #filter-box .filter-list > li.on > a::after,
.filter-layer #filter-box .filter-list > li > a.active::after {top: 38%; transform: rotate(45deg);}
.filter-layer #filter-box .filter-list > li.on > ul {display: block;}
.filter-layer #filter-box .filter-list > li > ul {display: none; padding: 18px 0;}
.filter-layer #filter-box .filter-list > li > ul > li:not(:last-of-type) {margin-bottom: 20px;}

.filter-layer #filter-box .filter-b {position: fixed; bottom: 0; right: 0; width: 410px; padding: 30px 20px; display: flex ; column-gap: 10px; align-items: center; border-top: 1px solid var(--line);}
.filter-layer #filter-box .filter-b > a {width: 50%; height: 50px; display: flex; align-items: center; column-gap: 8px; justify-content: center; font-size: 14px; font-weight: 500;}
.filter-layer #filter-box .filter-b > a.bg_primary {color: #fff;}

.filter-layer.open {opacity: 1; visibility: visible; transition: all 0.3s;}

/* 상품 view */
.view-cont {padding: 0 0 120px 0 !important;}
.view-cont .btn-s {width: fit-content; font-size: 12px; font-weight: 600; padding: 4px 6px; background: linear-gradient(135deg, #F0F6FF, #E6F0FF); color: var(--primary); border-radius: 5px;}
.view-cont .btn-default.btn-s {width: fit-content; background: #fff; color: var(--gray);}
.fix-consel {position: fixed; bottom: 0; width: 100%; background-color: #fff; padding: 30px 0; border-top: 1px solid var(--line); z-index: 101;}
.fix-consel .inner {display: flex; justify-content: space-between; column-gap: 30px;}
.fix-consel .product-info {display: flex; column-gap: 30px; align-items: center;}
.fix-consel .product-info li {height: 100%; display: flex; flex-direction: column; justify-content: space-between; row-gap: 6px;}
.fix-consel .product-info .product-name {font-size: 18px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.fix-consel .product-info .product-code {font-size: 14px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;align-self:normal;}
.fix-consel .product-price {display: flex; align-items: center; column-gap: 30px;}
.fix-consel .product-price .btn-consel {width: 204px; height: 48px; display: flex; align-items: center; justify-content: center; column-gap: 10px; font-size: 18px; font-weight: 600; color: #fff; border-radius: 100px;}
.fix-consel .product-price ul {display: flex; flex-direction: column; row-gap: 6px;}
.fix-consel .product-price ul li {width: 204px; display: flex; align-items: center; justify-content: space-between; align-items: center; column-gap: 10px;}
.fix-consel .product-price ul li  p {display: flex; align-items: center;}
.fix-consel .product-price ul li.card-sale-price p {font-size: 18px;}

.product-info-top .inner {display: flex; align-items: flex-start; column-gap: 60px;}
.product-info-top .inner > div {width: 50%;}
.product-info-top .thumb-wrap .keyImg {margin-bottom: 12px;}
.product-info-top .thumb-wrap .thumbList .swiper-slide img {cursor: pointer;}
.product-info-top .info {display: flex; flex-direction: column; row-gap: 32px;}
.product-info-top .info-top {display: flex; flex-direction: column; row-gap: 12px;}
.product-info-top .info-top .product-name {font-size: 20px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.product-info-top .info-top .product-code {font-size: 16px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.product-info-top .sns-area {display: flex; align-items: center; column-gap: 20px; margin-bottom: 8px;}
.product-info-top .sns-area .btn-area {width: 100%; column-gap: 12px; margin-top: 0;}
.product-info-top .sns-area .btn-area .btn-price {width: 50%; height: 48px; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; column-gap: 6px; border-radius: 100px; border: 1px solid var(--text1); background-color: #fff;}
.product-info-top .sns-area .btn-area .btn-price b {font-size: 16px;}
.product-info-top .sns-area .btn-area .btn-price.bg_primary {background-color: var(--primary); border: 1px solid var(--primary); color: #fff;}
.product-info-top .sns-area .btn-area .btn-price.bg_primary b {color: #fff;}
.product-info-top .sns-area .sns-share {width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);}
.product-info-top .product-detail {width: 100%; display: flex; flex-direction: column; padding: 4px 0; border-top: 1px solid var(--text1); border-bottom: 1px solid var(--line);}
.product-info-top .product-detail li {display: flex; align-items: flex-start; column-gap: 40px; padding: 10px 12px;}
.product-info-top .product-detail li span {width: 60px; font-size: 14px; font-weight: 500; flex-shrink: 0;}
.product-info-top .product-detail li p {font-size: 14px;}
.product-info-top .product-detail li:not(:last-of-type) {border-bottom: 1px solid var(--line)}


/* 페이징 */
.page-area {position: relative; display: flex; align-items: center; margin-top: 60px;}
.pg_wrap {width: 100%; display: flex; justify-content: center;}
.pg {display: flex; align-items: center; column-gap: 10px;}
.pg_page {display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: 16px; font-weight: 400; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%;}
.pg_current {display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 400; width: 40px; height: 40px; border: 1px solid var(--primary); border-radius: 50%; background-color: var(--primary); color: #fff;}
.pg_start,
.pg_end {text-indent:-999px; overflow:hidden; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%;}
.pg_start {background: url(../img/page_start.svg) no-repeat center center; margin-right: 10px; background-size: 14px 14px;}
.pg_end {background: url(../img/page_end.svg) no-repeat center center; margin-left: 10px; background-size: 14px 14px;}
.pg_prev,
.pg_next {text-indent:-999px;overflow:hidden}


/* 반응형 */
@media screen and (max-width: 1520px) {

}
@media screen and (max-width: 1280px) {
    .quick-icon {right: 4%;}
}
@media screen and (max-width: 1024px) {

    .pd-140 {padding: 120px 0;}

    .gnbSwiper {width:100%;}
    .gnbSwiper .swiper-slide a {padding: 0 12px;}

    #section-main-tit h2 {font-size: 68px;}

    .product-list .card a .img-wrap {height: 30vw;}
    
    .fix-consel {padding: 12px 0;}
    .fix-consel .inner {flex-direction: column; row-gap: 12px;}
    .fix-consel .product-info {flex-direction: column; row-gap: 8px; align-items: flex-start;}
    .fix-consel .product-info li {flex-direction: row; align-items: center; column-gap: 8px;}
    .fix-consel .product-info li:nth-of-type(2) {flex-direction: column-reverse;}
    .fix-consel .product-price ul {flex-direction: row; flex-shrink: 0; column-gap: 30px;}
    .fix-consel .product-price .btn-consel {width: 50%;}
    .product-info-top {padding: 80px 0;}
    .product-info-top .inner {flex-direction: column; row-gap: 30px; align-items: center;}
    .product-info-top .thumb-wrap {width: 50% !important;}
    .product-info-top .info {width: 100% !important;}

    #section-cate .cate_list {flex-wrap: wrap; row-gap: 20px; justify-content: center;}
    #section-cate .cate_list a {width: calc(100% / 4 - 50px );}

    /* 상담문의 */
    .section-consel .flex > img.phone {left: -24vw}
    .section-consel .flex > img.alert {right: -31vw;}
}
@media screen and (max-width: 768px) {

    .tit {font-size: 28px; padding-bottom: 40px;}

    .pd-140 {padding: 100px 0;}
    .quick-icon {right: 20px;} 
    .gnbSwiper {display: none !important;}
    
    #section-main-tit {padding: 80px 0 100px 0; row-gap: 4vw;}
    #section-main-tit h2 {font-size: 9vw;}
    #section-main-tit .btn-area {margin-top: 4vw;}

    .product-list .card {width: calc(100% / 2 - 10px);}
    .product-list .card a .img-wrap {height: 46vw;}
    .product-list .card a .info {padding: 3.5vw 2.5vw; row-gap: 1.3vw;}
    .product-list .card a .price-sale {padding: 2.5vw;}
    .product-list .card a .card-hover h4 {font-size: 20px;} 

    .product-info-top {padding: 40px 0 60px 0;}
    .product-info-top .thumb-wrap {width: 100% !important;}
    .product-info-top .info {row-gap: 20px;}
    .fix-consel .product-price {flex-direction: column; row-gap: 12px;}
    .fix-consel .product-price ul {width: 100%; justify-content: space-between;}
    .fix-consel .product-price .btn-consel {width: 100%; height: 44px; font-size: 16px;}
    .fix-consel .product-price .btn-consel svg {width: 20px; height: 20px;}

    #section-cate {padding: 60px 0;}
    #section-cate .cate_list a {width: calc(100% / 4 - 24px);}

    
    .section-consel {padding: 60px 0;}
    .section-consel .flex > img.phone {width: 16vw; height: auto; left: -23vw; top: -9vw;}
    .section-consel .flex > img.alert {width: 22vw; height: auto; right: -30vw; top: 1vw;}
    .section-consel .flex > svg {display: none;}

    footer .footer-b ul {width: 100%;}

    .sub-cont {padding: 80px 0 120px 0;}
    .sub-cont .tit {padding-bottom: 40px;}
    .sub-cate {margin-bottom: 40px;}
    .list-top > p {font-size: 15px;}
    .sort-select .selected {width: 100px;}
}
@media screen and (max-width: 600px) {

}
@media screen and (max-width: 500px) {

    .pd-140 {padding: 80px 0;}
    .btn-area {margin-top: 60px;}
    .more-btn {padding: 10px 14px 10px 30px; column-gap: 20px; font-size: 16px;}
    
    h3 {font-size: 28px;}
    .tit {font-size: 24px; padding-bottom: 30px;}

    .gnb-menu {position: fixed; bottom: auto; top: 100px; width: 100%; height: calc(100vh - 100px); box-shadow: none; border-radius: 0;}
    .gnb-menu .gnb-menu-box {padding: 20px; border-top: 1px solid var(--line);}
    .menu-open .gnb-menu {padding: 0;}

    .product-list .card,
    .product-list .card a .card-hover {border-radius: 20px;}
    .product-list .card a .card-hover {column-gap: 2vw;}
    .product-list .card a .card-hover h4 {font-size: 4.5vw;} 
    .product-list .card a .card-hover .circle {width: 7vw; height: 7vw;}
    .product-list .card a .card-hover .circle svg {width: 5vw; height: 5vw;}
    .product-list .card a .info .product-code,
    .product-list .card a .info .product-price {font-size: 15px;}
    .product-list .card a .info .product-name {font-size: 18px;}
    .product-list .card a .info .product-price {column-gap: 2vw;}
    .product-list .card a .info .product-price .price {font-size: 16px;}
    .product-list .card a .price-sale {font-size: 15px;}
    .product-info-top .sns-area {flex-direction: column-reverse; row-gap: 12px; align-items: flex-start;}

    .fix-consel .product-price ul {flex-direction: column; row-gap: 6px;}
    .fix-consel .product-price ul li {width: 100%; }

    #section-main-tit {padding: 80px 0;}
    #section-main-tit h4 {font-size: 4.2vw;}
    #section-main-tit .btn-area > a {height: 14vw; padding: 0 8vw; font-size: 3.5vw;}
    #section-main-tit .btn-area > a svg {width: 5vw; height: 5vw;}

    #section-cate {background-color: transparent;}
    #section-cate .cate_list {gap: 3vw;}
    #section-cate .cate_list a {width: calc(100% / 4 - 2.3vw); padding: 0; flex-direction: column-reverse;}
    #section-cate .cate_list a h5 {font-size: 3.5vw; font-weight: 400;}
    #section-cate .cate_list a .img-wrap {display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background-color: var(--bg); border-radius: 10px;}
    #section-cate .cate_list a .img-wrap img {width: 90%; height: 90%;}
    #section-cate .cate_list a:hover {border: 3px solid transparent;}

    .consel-btn {height: 11vw; font-size: 4.2vw; max-width: 48vw; margin-top: 2vw;}
    .section-consel {padding: 12vw 0;}
    .section-consel .flex > img.phone {width: 15vw; left: -19vw; top: -11vw;}
    .section-consel .flex > img.alert {width: 20vw; right: -25vw; top: 7vw;}
    .section-consel h3 {font-size: 7vw;}
    .section-consel h5 {font-size: 4.2vw;}

    footer {padding: 60px 0;}
    footer .footer-t {padding-bottom: 30px; margin-bottom: 24px;}
    footer .footer-b ul li:nth-of-type(3):after {display: none;}

    .sub-cont {padding: 60px 0 100px 0;}
    .sub-cate {gap: 0;}
    .sub-cate .sub-cate-item {width: calc(100% / 3);}
    .sub-cate .sub-cate-item a {border-radius: 0; text-align: center; justify-content: center; font-size: 2.8vw; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);}
    .sub-cate .sub-cate-item:nth-of-type(1) a,
    .sub-cate .sub-cate-item:nth-of-type(2) a,
    .sub-cate .sub-cate-item:nth-of-type(3) a {border-top: 1px solid var(--line);}
    .sub-cate .sub-cate-item:nth-of-type(1) a,
    .sub-cate .sub-cate-item:nth-of-type(3n + 4) a {border-left: 1px solid var(--line);}
    .sub-cate .sub-cate-item:hover a,
    .sub-cate .sub-cate-item.active a {border: 0;}
    .list-top {flex-direction: column-reverse; row-gap: 16px; align-items: flex-start;}
    .list-top .btn-area,
    .sort-select .selected {width: 100%;}
    .sort-select,
    .list-top .btn-area .btn-filter {width: 50%;}

    .filter-layer {align-items: flex-end;}
    .filter-layer #filter-box {width: 100%; height: 80%; border-radius: 30px 30px 0 0;}
    .filter-layer #filter-box .filter-b {width: 100%;}

}

@media screen and (max-width: 440px) {
    .product-info-top .sns-area .btn-area {flex-direction: column; row-gap: 10px;}
    .product-info-top .sns-area .btn-area .btn-price {width: 100%;}
}

@media screen and (max-width: 375px) {

    .tit {font-size: 20px;}

    .product-list {column-gap: 3vw; row-gap: 12vw;}
    .product-list .card {width: calc(100% / 2 - 1.5vw);}
    .product-list .card a .info .product-code,
    .product-list .card a .info .product-price {font-size: 4vw;}
    .product-list .card a .info .product-name {font-size: 5vw;}
    .product-list .card a .info .product-price {margin-top: 2vw;}
    .product-list .card a .info .product-price .price {font-size: 4.5vw;}
    .product-list .card a .price-sale {font-size: 4vw;}

    .product-info-top .product-detail li {column-gap: 5vw;}

    .section-consel h3 {font-size: 8vw;}
    .section-consel h5 {font-size: 5.2vw;}
    .consel-btn {height: 13vw; font-size: 5.2vw; max-width: 62vw;}
}
@media screen and (max-width: 340px) {
    footer a,
    footer li {font-size: 15px;}
}

/******************/
/******************/