@charset "utf-8";
.prd-wrap {display:flex;}
.prd-wrap .col-l {width:300px; top:50px; margin-right:var(--space-100); position:-webkit-sticky; position:sticky; left:0; block-size:fit-content;}
.prd-wrap .col-r {flex:1;}
.prd-wrap .sub-title {margin-bottom:var(--space-60);}
.prd-wrap h1 {font-size:var(--font-size-40); line-height:1.2em; letter-spacing:-.03em;}

.prd-tab {margin:var(--space-40) 0 var(--space-50);}
.prd-tab ul {display:flex; margin:0 -5px -10px; flex-wrap:wrap;}
.prd-tab ul li {padding:0 5px 10px; width:14.28%;}
.prd-tab ul li a {height:60px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.5); font-weight:600; border-radius:5px; display:flex; color:rgba(255, 255, 255, 0.5); padding: 0 10px;}
.prd-tab ul li:hover a {color:#fff; font-weight:700;}
.prd-tab ul li.active a {color:#121212; background-color:#fff; border-color:#fff; font-weight:700;}
.prd-tab ul li a span {font-size:12px; margin:1px 0 0 0;}

.checkbox-group {gap:var(--space-30); margin-bottom:var(--space-80); display:flex; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.2);}
.checkbox-option {position:relative; cursor:pointer;}
.checkbox-option input[type="checkbox"] {display:none;}
.checkbox-option span {display:block; color:#fff; opacity:0.5; padding-bottom:6px; border-bottom:2px solid transparent; transition:0.3s ease;}
.checkbox-option input[type="checkbox"]:checked + span {opacity:1; border-bottom:2px solid red;}

.prd-list + .paginate {margin:0;}
.prd-list ul {margin:0 -20px; display:flex; flex-wrap:wrap;}
.prd-list ul li {padding:0 20px 80px; width:25%;}
.prd-list ul li .thumb {border-radius:10px; position:relative; padding-bottom:100%; overflow:hidden;}
.prd-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.prd-list ul li .tit {font-size:var(--font-size-18); margin:var(--space-15) 0 5px; font-weight:700; letter-spacing:-0.03em; line-height:1.4em;}
.prd-list ul li p {font-size:var(--font-size-14); opacity:.7; letter-spacing:-0.03em; line-height:1.4em;}

.filter-panel .tit {margin-bottom:var(--space-25); display:flex;}
.filter-panel .tit span {font-size:var(--font-size-16); font-weight:400; flex:1;}
.filter-panel .reset-button {color:rgba(255, 255, 255, .5); background:unset; border:none; font-size:var(--font-size-14); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.filter-panel .reset-button svg {margin-right:5px;}

.filter-section {padding:var(--space-25) 0; border-top:1px solid rgba(217, 217, 217, .2);}
.filter-section .hidden {display:none;}
.filter-header {font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.toggle-icon {font-size:var(--font-size-20); line-height:1;}
.filter-options {margin-top:var(--space-25); display:grid; gap:var(--space-15);}

.default-check input[type="checkbox"] {width:20px; height:20px; margin:-4px 10px 0 0 !important; border-radius:4px; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color:transparent; border:1px solid #fff; cursor:pointer; position:relative;}
.default-check input[type="checkbox"]:checked {background-color:#fff;}
.default-check input[type="checkbox"]:checked::after {content:''; position:absolute; top: 50%; left: 50%; transform: translate(-50%); width:12px; height:9px; background:url("/images/bbs/checkbox2.png") center center / contain no-repeat;}

/*제품상세페이지*/
.prd-summary {display:flex; margin-bottom:var(--space-80);}

.prd-image {width:56.25%; margin-right:var(--space-100);}
.prd-image .thumb {position:relative; border-radius:8px; overflow:hidden;}
.prd-image .slick-arrow {width:11px; height:20px; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; position:absolute; top:50%; transform:translateY(-50%); z-index:98; border:0; font-size:0; line-height:0; background-color:transparent;}
.prd-image .slick-prev {left:0; background-image:url('/images/bbs/prd-prev.png');}
.prd-image .slick-next {right:0; background-image:url('/images/bbs/prd-next.png');}

.prd-slider-for .thumb {padding-bottom:66.667%;}
.prd-slider-for .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:66.6667%; object-fit:contain;}
.prd-slider-for .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(255, 255, 255, 0.2); border-radius:8px;}
.prd-image .prd-slider-for .slick-prev {left:var(--space-20);}
.prd-image .prd-slider-for .slick-next {right:var(--space-20);}

.prd-slider-nav {margin-top:var(--space-20); padding:0 var(--space-30);}
.prd-slider-nav .item {padding:0 5px;}
.prd-slider-nav .thumb {padding-bottom:100%;}
.prd-slider-nav .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.prd-cont {flex:1;}
.prd-cont .back-arrow {text-align:right; font-size:var(--font-size-14); font-weight:400; line-height:1.3em; letter-spacing:-.03em; opacity:.5;}
.prd-cont .back-arrow svg {margin:-3px 10px 0 0; vertical-align:middle;}
.product-title {padding:var(--space-15) 0;}
.product-title h1 {font-size:var(--font-size-40); line-height:1.3em; letter-spacing:-.03em;}
.product-size {font-size:var(--font-size-24); line-height:100%; letter-spacing:-.03em; opacity:.5;}
.spec-section {padding:var(--space-15) 0; margin:var(--space-25) 0; display:flex; flex-wrap:wrap; border-top:1px solid rgba(255, 255, 255, .2); border-bottom:1px solid rgba(255, 255, 255, .2);}
.spec-item {width:50%; gap:10px; margin:var(--space-15) 0; display:flex; align-items:center;}

.spec-item .spec-text {flex:1; font-size:var(--font-size-18); line-height:1.3em; letter-spacing:-.03em;}
.inventory-title {text-align:center; font-size:var(--font-size-18); margin-bottom:15px; line-height:1.3em; letter-spacing:-.03em; font-weight:700;}
.inventory-section {display:flex; margin:0 -10px; text-align:center;}
.inventory-item {width:50%; padding:0 10px;}
.inventory-location {height:40px; margin-bottom:var(--space-15); display:flex; align-items:center; justify-content:center; border-radius:4px; background:rgba(255, 255, 255, 0.05); font-size:var(--font-size-14); line-height:1.3em; letter-spacing:-.03em;font-weight:700;}
.inventory-count strong {font-size:var(--font-size-32); line-height:1.3em; letter-spacing:-.03em;}
.inventory-count span {font-size:var(--font-size-20); padding-left:10px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}

.prddetail-tab {top:110px; position:-webkit-sticky; position:sticky; left:0; block-size:fit-content; right:0; z-index:105;}
.prddetail-tab ul {display:flex; text-align:center; margin:0 -5px -10px; flex-wrap:wrap; justify-content: center;}
.prddetail-tab ul li {font-size:var(--font-size-20); width:25%; padding:0 5px 10px; font-weight:600;}
.prddetail-tab ul li.active {color:#fff; background-color:#1a3a52; border-color:#1a3a52;}
.prddetail-tab ul li a {height:clamp(35px, calc( 80 / var(--inner) * 100vw ), 80px); padding:0 10px; gap:10px; border:1px solid rgba(255, 255, 255, .2); border-radius:8px; background:#121212; display:flex; align-items:center; justify-content:center;}
.prddetail-tab ul li i {width:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); height:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); display:inline-block; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.prddetail-tab ul li i.ico1 {background-image:url('/images/sub/tab-ico1.png');}
.prddetail-tab ul li i.ico2 {background-image:url('/images/sub/tab-ico2.png');}
.prddetail-tab ul li i.ico3 {background-image:url('/images/sub/tab-ico3.png');}
.prddetail-tab ul li i.ico4 {background-image:url('/images/sub/tab-ico4.png');}

.prddetail-tab ul li:hover a {background-color:#fff; color:#121212;}
.prddetail-tab ul li:hover i.ico1 {background-image:url('/images/sub/tab-ico1-on.png');}
.prddetail-tab ul li:hover i.ico2 {background-image:url('/images/sub/tab-ico2-on.png');}
.prddetail-tab ul li:hover i.ico3 {background-image:url('/images/sub/tab-ico3-on.png');}
.prddetail-tab ul li:hover i.ico4 {background-image:url('/images/sub/tab-ico4-on.png');}

.tab-cont {padding-top:var(--space-150);}
.tab-cont .title {margin-bottom:var(--space-60); position:relative;}
.tab-cont .title:after {position:absolute; content:''; top:50%; margin-top:-4px; right:0; left:0; height:1px; background-color:#fff; z-index:-1; opacity:.2;}
.tab-cont .title span {background-color:#121212; padding-right:var(--space-20); font-size:var(--font-size-32); font-weight:600;}

.tab-cont-flex {display:flex; gap:var(--space-90);}
.tab-cont-flex .group {width:50%;}

.rel-slide .slick-prev {left:-30px;}
.rel-slide .slick-next {right:-30px;}
.rel-slide .items {margin:0 -20px;}
.rel-slide .item {padding:0 20px;}

.photo-info {margin-top:var(--space-30); text-align:center; font-size:var(--font-size-18); line-height:1.3em; letter-spacing:-.03em;}
.photo-sec {max-width:700px; text-align:center; margin:auto; position:relative;}
.photo-zoom {width:clamp(26px, calc( 48 / var(--inner) * 100vw ), 48px); height:clamp(26px, calc( 48 / var(--inner) * 100vw ), 48px); top:clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); right:clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); background:url('/images/bbs/photo-zoom.png') 50% 50% / contain no-repeat; display:inline-block; position:absolute; z-index:100;}

.fancybox-close-btn {width:var(--font-size-24); height:var(--font-size-24); top:var(--space-30); right:clamp(15px, calc( 60 / var(--inner) * 100vw ), 60px); background:url('/images/bbs/zoom-close.png') 50% 50% / contain no-repeat; border:none; text-indent:-999em; font-size:0; position:fixed; z-index:9999; display:none;}
.fancy-custom.fancybox-overlay {background:#000; opacity:.85;}

.fancy-custom .fancybox-nav span {width:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); height:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); position:fixed; visibility:visible !important; background-position:50% 50%; background-repeat:no-repeat; background-size: contain !important;}
.fancy-custom .fancybox-prev span {left:var(--space-60); background-image:url('/images/bbs/zoom-prev.png');}
.fancy-custom .fancybox-next span {right:var(--space-60); background-image:url('/images/bbs/zoom-next.png');}