@import url('/comm/css/sub.css');

.pro_list_cont{padding-top: 60px;}


.pf-chk, .pf-num-lb, .pf-q-lb {position: relative;}


/* Smart Filter (.pf = product filter) */
.pf {display:flex; flex-direction:column; gap:10px; margin:0 auto 50px; padding:30px; background:var(--white); box-shadow:var(--shadow); box-sizing:border-box;}
.pf.is-fold {gap:0;}
.pf.is-fold .pf-bd {display:none;}
.pf.is-fold .pf-hd {padding-bottom:0;}

.pf-hd {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; width:100%;}
.pf-ttl {margin:0; padding:0; font-family:var(--eng); font-weight:600; letter-spacing:0; color:var(--black);}
.pf-tls {display:flex; flex-wrap:wrap; align-items:center; gap:20px;}


.pf-rst {display:flex; align-items:center; gap:4px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; color:rgba(16,16,16,.7); transition:all .3s ease;}
.pf-rst:hover{color:var(--black);}
.pf-rst::before{content:'\f053'; display: inline-block; font-size:20px; font-family: var(--icon); color:rgba(16,16,16,.5); transition:all .3s ease;}
.pf-rst:hover::before{color:var(--black);}

.pf-end{}
.pf-end input[type="checkbox"]{display: none;}
.pf-end label{display: flex; align-items:center; gap:6px; cursor:pointer;}
.pf-end label::before{content:''; display: block; width: 20px; height: 20px; line-height: 18px; font-size:20px; box-sizing:border-box; border:1px solid var(--border); background:var(--white); font-family: var(--icon); color:var(--white); font-weight: 700; text-align:center;}
.pf-end input[type="checkbox"]:checked + label::before{background:var(--main); border-color:var(--main); content:'\f88b';}
.pf-end input[type="checkbox"]:checked + label{color:var(--main);}


.pf-tog {display:flex; align-items:center; justify-content:center; width:93px; height:30px; border:0; border-radius:30px; background:var(--main); cursor:pointer; text-align:center; transition:background-color 0.35s cubic-bezier(0.4,0,0.2,1);}
.pf-tog-in {display:inline-flex; align-items:center; gap:4px;}
.pf-tog-tx {display:inline-block; flex-shrink:0; width:50px; font-family:var(--kor); font-weight:600; font-size:14px; line-height:120%; letter-spacing:var(--letter-spacing-caption); color:var(--white); white-space:nowrap; text-align:center; transform:translateX(0); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);}
.pf-tog-k {flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--white); transform:translateX(0); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);}
.pf.is-fold .pf-tog {background:rgba(16,16,16,0.5);}
.pf.is-fold .pf-tog-tx {transform:translateX(22px);}
.pf.is-fold .pf-tog-k {transform:translateX(-54px);}


.pf-bd {display:flex; flex-direction:column; gap:0; width:100%; border-top:1px solid var(--border); padding-top:0;}
.pf-sort {display:flex; flex-direction:column; width:100%;}
.pf-row {display:flex; flex-wrap:wrap; align-items:stretch; width:100%; border-bottom:1px solid var(--border); box-sizing:border-box; overflow:hidden;}
.pf-lbl {display:flex; align-items:flex-start; flex:0 0 200px; width:200px; max-width:100%; padding:13px 20px; background:var(--grayBg); box-sizing:border-box;}
.pf-lbl-mid {align-items:center;}
.pf-lbl-tx {font-family:var(--kor); font-weight:600; font-size:0.889rem; line-height:160%; letter-spacing:var(--letter-spacing-body); color:var(--black); white-space:nowrap;}

.pf-grid {display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; flex:1 1 0; min-width:0; padding:16px 20px; background:var(--white); box-sizing:border-box;}
.pf-chk {display:flex; align-items:center; gap:6px; margin:0; cursor:pointer; min-width:0;}
.pf-chk-b {position:relative; flex-shrink:0; width:20px; height:20px; border:1px solid var(--border); box-sizing:border-box; background:var(--white);}
.pf-chk-in:focus-visible + .pf-chk-b {outline:2px solid var(--main); outline-offset:2px;}
.pf-chk-in:checked + .pf-chk-b {background:var(--main); border-color:var(--main);}
.pf-chk-in:checked + .pf-chk-b::after {content:'\f88b'; display: block; width: 20px; height: 20px; line-height: 18px; font-size:20px; box-sizing:border-box; font-family: var(--icon); color:var(--white); font-weight: 500; text-align:center;}
.pf-chk-tx {font-family:var(--eng); font-weight:400; font-size:0.778rem; line-height:150%; letter-spacing:0.28px; color:var(--light);}


.pf-rng {display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; flex:1 1 0; min-width:0; padding:13px 20px; background:var(--white); box-sizing:border-box;}
.pf-rng-bar {position:relative; flex:0 0 245px; width:245px; max-width:100%; height:15px;}
.pf-rng-tr {position:relative; width:100%; height:15px; box-sizing:border-box;}
.pf-rng-tr::before {content:''; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1px; border-radius:5px; background:var(--border); pointer-events:none;}
.pf-rng-fi {position:absolute; left:0%; width:100%; top:50%; height:3px; margin-top:-1px; border-radius:5px; background:var(--main); pointer-events:none; box-sizing:border-box;}
.pf-rng-d {position:absolute; left:0%; top:0; z-index:1; width:15px; height:15px; margin:0; border:1px solid var(--border); border-radius:15px; background:var(--white); box-shadow:1px 1px 2px 0 rgba(0,0,0,0.15); box-sizing:border-box; transform:translateX(-50%); cursor:grab; touch-action:none;}
.pf-rng-d:active {cursor:grabbing;}

.pf-nums {display:flex; flex:0 0 245px; align-items:center; gap:5px; width:245px; max-width:100%;}
.pf-num-lb {flex:1 1 0; min-width:0; margin:0;}
.pf-num-in {box-sizing:border-box; width:100%; height:33px; margin:0; padding:7px 13px; border:1px solid var(--border); background:var(--white); font-family:var(--eng); font-weight:400; font-size:0.778rem; line-height:150%; letter-spacing:0.28px; color:var(--light); text-align:center;}
.pf-num-sp {flex-shrink:0; font-family:var(--eng); font-weight:400; font-size:0.778rem; line-height:150%; letter-spacing:0.28px; color:var(--light);}

.pf-ft {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; width:100%; padding-top:10px;}
.pf-q-lb {flex:0 1 199px; min-width:0;}
.pf-q {box-sizing:border-box; width:100%; height:50px; margin:0; padding:11px 15px; border:1px solid var(--border); background:var(--white); font-family:var(--kor); font-weight:400; font-size:0.889rem; line-height:150%; letter-spacing:var(--letter-spacing-input); color:var(--basic);}
.pf-q::placeholder {color:var(--light); opacity: 0.5;}

.pf-sub {display:inline-flex; align-items:center; justify-content: center; gap:10px; width: 134px; height:50px; margin:0; border:0; text-align:center; background:var(--main); cursor:pointer; font-family:var(--kor); font-weight:600; font-size:0.889rem; line-height:150%; letter-spacing:var(--letter-spacing-button); color:var(--white); transition:all .3s;}
.pf-sub:hover{background:var(--black);}
.pf-sub::after{content:'\e8b6'; display: inline-block; width: 20px; height: 20px; line-height: 20px; font-size:20px; font-family: var(--icon); color:var(--white); font-weight: 400;	}



/* 제품 더보기 */
.pro_more{display: block; margin: 50px auto 0; width: 113px; padding: 0 0 15px; box-sizing:border-box; background:none; border:0; text-align: left; cursor: pointer; font-size:0.889rem; font-weight: 600; color:var(--black); letter-spacing: var(--letter-spacing-button); position: relative;}
.pro_more::after{content:'\f3dd'; display: block; width: 22px; height: 22px; line-height: 22px; font-size:22px; text-align:center;  font-weight: 400; font-family: var(--icon); position: absolute; right: 0; bottom: 15px;}
.pro_more:before {content: ""; display: block; height: 2px; left: 0; position: absolute; width: 100%; z-index: 1; bottom: 0px;-webkit-transition: background-position 1s ease; transition: background-position 1s ease; background: linear-gradient(90deg,#101010 0,#101010 33.33%,transparent 0,transparent 66.66%,#101010 0,#101010) 100%; background-size: 300% 2px;}
.pro_more:hover:before{background-position:0;}


/* 리스트 */
.pt-wrap {width:100%; max-width:100%; box-sizing:border-box; position: relative;}
.pt-scrollTop {width:100%; box-sizing:border-box; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; line-height:0;}
.pt-scrollTop::-webkit-scrollbar {width:0; height:7px;}
.pt-scrollTop::-webkit-scrollbar-thumb {background:var(--main); border-radius:7px;}
.pt-scrollTop::-webkit-scrollbar-track {background:rgba(16,16,16,.1); border-radius:7px;}
.pt-scrollTop-inner {height:1px; pointer-events:none;}
.pt-outer {position:relative; display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; max-width:100%; box-sizing:border-box;}
.pt-nav {grid-column:1; grid-row:1; justify-self:end; align-self:center; position:-webkit-sticky; position:sticky; top:200px; height:fit-content; margin:0 calc(12px + var(--pt-nav-end-inset, 0px)) 0 0; padding:0; display:none; flex-direction:row; align-items:center; gap:3px; z-index:42; pointer-events:none; transition:margin-right 0.2s ease;}
.pt-nav.pt-nav--show {display:flex;}
.pt-nav__btn {display:flex; flex-shrink:0; align-items:center; justify-content:center; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:50%; box-sizing:border-box; background:rgba(255,255,255,0.8); box-shadow:0 4px 9px 0 rgba(0,0,0,0.15); cursor:pointer; pointer-events:auto; transition:opacity 0.2s ease, background 0.2s ease;}
.pt-nav__btn::after {content:''; display:block; width:20px; height:20px; line-height:20px; font-size:20px; font-family:var(--icon); font-weight:400; font-style:normal; color:var(--black); text-align:center; opacity:0.4;}
.pt-nav__btn--prev::after {content:'\ef7d';}
.pt-nav__btn--next::after {content:'\e941';}
.pt-nav__btn:disabled {cursor:default;}
.pt-nav__btn:disabled::after {opacity:0.1;}
.pt {grid-column:1; grid-row:1; width:100%; max-width:100%; min-width:0; max-height:none; box-sizing:border-box; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
.pt::-webkit-scrollbar {width:0; height:7px;}
.pt::-webkit-scrollbar-thumb {background:var(--main); border-radius:7px;}
.pt::-webkit-scrollbar-track {background:rgba(16,16,16,.1); border-radius:7px;}
.pt-x {display:contents;}

.pt-tbl {width:max-content; min-width:100%; background:var(--white); table-layout:fixed; border-collapse:separate; border-spacing:0; }
.pt-tbl thead .pt-th {position:-webkit-sticky; position:sticky; top:0; z-index:5; background:var(--white);}
.pt-tbl thead .pt-th:first-child {left:0; z-index:7;}

.pt-hdFx {position:fixed; top:0; left:0; z-index:40; overflow:hidden; box-sizing:border-box; visibility:hidden; opacity:0; pointer-events:none; transition:opacity 0.15s ease, top 0.4s ease;}
.pt-hdFx.fixed {top:110px;}

.pt-hdFx.is-on {visibility:visible; opacity:1; pointer-events:auto;}
.pt-hdFx-in {overflow-x:auto; overflow-y:hidden; width:100%; -webkit-overflow-scrolling:touch; box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none;}
.pt-hdFx-in::-webkit-scrollbar {display:none;}
.pt-hdFx .pt-tbl--hdFx {width:auto; min-width:100%; margin:0; table-layout:fixed; border-collapse:separate; border-spacing:0;}
.pt-hdFx .pt-tbl--hdFx thead .pt-th {position:static; left:auto;}
.pt-hdFx .pt-tbl--hdFx thead .pt-th:first-child {position:sticky; left:0; z-index:9; background:var(--white);}

.pt-tbl col.pt-cm {width:220px;}
.pt-tbl col.pt-c {width:auto; min-width:130px;}
.pt-tbl col.pt-cd {width:202px;}

.pt-th{padding:10px 15px; box-sizing:border-box; background:var(--white); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pt-th:last-child{border-right: 0;}
.pt-th .pt-hd{display: flex; align-items:center; justify-content: space-between; gap:10px;}
.pt-th .pt-ht{font-size:14px; font-weight: 600; color:var(--black); letter-spacing: var(--letter-spacing-caption); line-height: 150%; text-align:left; width: calc(100% - 28px); white-space:nowrap;}
.pt-th .pt-sr{}
.pt-th .pt-sr span{display: block; cursor:pointer; width: 18px; height: 18px; color:var(--black); opacity: 0.4; transition:all .3s; position: relative;}
.pt-th .pt-sr span:hover{opacity: 1;}
.pt-th .pt-sr span::after{ display: block; width: 100%; height: 100%; line-height: 18px; font-size:18px; font-family: var(--icon); position: absolute; left:0; top:0;}
.pt-th .pt-sr .pt-su::after{content:'\e5c7';}
.pt-th .pt-sr .pt-sd::after{content:'\e5c5';}

.pt-tr{}
.pt-tr:nth-child(even) .pt-td{background:#f9fafd;}
.pt-td{padding: 6px 12px; box-sizing:border-box; background:var(--white); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); position: relative;}
.pt-td:last-child{border-right: 0;}
.pt-td .pt-mw{display: flex; align-items:center; justify-content: space-between; gap:10px; position: relative;}
.pt-td .pt-mw .pt-nm{font-size:14px; width: calc(100% - 40px); font-weight: 600; letter-spacing: 0; line-height: 150%; color:var(--black);}
.pt-td .pt-mw .pt-go{display: block; width: 30px; height: 30px; box-sizing:border-box; border:1px solid var(--main); border-radius:50%; position: relative;}
.pt-td .pt-mw .pt-go::after{content:'\e8b6'; display: block; width: 100%; height: 100%; font-size:18px; line-height: 28px; text-align:center; position: absolute; left:0; top:0; font-family: var(--icon); color:var(--main); transition:all .3s; border-radius:50%; }
.pt-td .pt-mw .pt-go:hover::after{background:var(--main); color:var(--white);}

.pt-img{display: block; position: absolute; left:105%; top:50%; margin-top: -50px; width:100px; background:var(--white); aspect-ratio:1/1; overflow: hidden; z-index: 20; opacity: 0; visibility:hidden; transition:all .1s; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.13);}
.pt-td:hover .pt-img{opacity: 1; visibility:visible; transition:all .1s;}
.pt-img img{display: block; width: 100%; height: 100%; object-fit:contain;}
.pt-tr:first-of-type .pt-td .pt-img{bottom: auto; top:0; margin: 0;}
.pt-tr:last-of-type .pt-td .pt-img{bottom: 0; top:auto; margin: 0;}

.pt-td .pt-v{font-size:14px; font-weight: 400; letter-spacing: 0; line-height: 160%; color:var(--light); white-space:nowrap;}
.pt-td .pt-dw{display: flex; gap:2px;}
.pt-td .pt-dw li{}
.pt-td .pt-dw li a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 45px; height: 45px; box-sizing:border-box; border:1px solid var(--main); font-size:14px; line-height: 1; font-weight: 600; letter-spacing: var(--letter-spacing-caption); border-radius:50%; color:var(--main); transition:all .3s;}
.pt-td .pt-dw li a:hover{background:var(--main); color:var(--white);}
.pt-td .pt-dw li.file-empty a{pointer-events: none; opacity: 0.3; filter: grayscale(100%);}

.pt-td--m{position:sticky; left:0; z-index:3; background:var(--white);}
.pt-tr:nth-child(even) .pt-td--m{background:#f9fafd;}


/* 슬릭기본 */
.slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding:0 !important;  outline: 0 !important;}
.slick-track {display:flex; }
.slick-slide{border:0; outline: 0 !important;}
.slick-initialized .slick-slide{display:block; outline: 0 !important;}
/* 슬릭기본 */

/* 뷰 */
.pro_view{}

.pro_local{display: flex; gap:45px; align-items:center; justify-content: flex-end;}
.pro_local li{line-height: 120%; position: relative; font-size:0.889rem; letter-spacing: var(--letter-spacing-caption); color:var(--light);}
.pro_local li::after{content:''; display: block; width: 1px; height: 20px; background:#D9D9D9; position: absolute; right: -22px; top:50%; margin-top: -10px;}
.pro_local li:last-child::after{display: none;}
.pro_local li.home a{display: block; width: 18px; height: 18px;}
.pro_local li.home a svg{width: 100%; height: auto; display: inline-block; vertical-align: top;}
.pro_local li.home a path{fill:var(--main); transition:all .3s ease;}
.pro_local li.home a:hover path{fill:var(--sub);}

.pro_top{display: flex;}
.pro_top article{box-sizing:border-box; position: relative;}
.pro_top .pro_img{width: 645px;}
.pro_top .pro_img .pro_local{display: none;}

.pro_top .pro_img .proImg_roll{position: relative;}
.pro_top .pro_img .proImg_roll::after{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; position: absolute; left: 0; top:0; border:1px solid var(--border); z-index: 9;}
.pro_top .pro_img .proImg_roll .roll{position: absolute; left: 0; top:0; z-index: 2 !important;}
.pro_top .pro_img .proImg_roll .roll .img{aspect-ratio:1/1; overflow: hidden;}
.pro_top .pro_img .proImg_roll .roll .img img{display: block; width: 100%; height: 100%; object-fit:contain;}

.pro_top .pro_img .proImg_nav{margin: 0 -5px; box-sizing:border-box; padding:10px 0 0;}
.pro_top .pro_img .proImg_nav .slick-track{display: flex;}
.pro_top .pro_img .proImg_nav .roll{position: relative; cursor:pointer; margin: 0 5px; z-index: 2 !important;}
.pro_top .pro_img .proImg_nav .roll::after{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; position: absolute; left: 0; top:0; border:1px solid var(--border);}
.pro_top .pro_img .proImg_nav .roll.slick-current::after{border:3px solid var(--main);}
.pro_top .pro_img .proImg_nav .roll .img{aspect-ratio:1/1; overflow: hidden;}
.pro_top .pro_img .proImg_nav .roll .img img{display: block; width: 100%; height: 100%; object-fit:contain;}

.pro_top .pro_img .slick-arrow{font-size:0; padding:0; border:0; cursor:pointer; width:34px; height:35px; display:block; position:absolute; right:20px; bottom:20px; z-index:10; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2.5px); transition:all .3s linear; }
.pro_top .pro_img .slick-prev{border-radius:50px 0 0 50px; margin-right:34px;}
.pro_top .pro_img .slick-next{border-radius:0 50px 50px 0;}
.pro_top .pro_img .slick-arrow::after{content:'\e5cb'; display: block; width: 20px; height:20px; line-height:20px; font-size:20px; text-align:center; font-family:var(--icon); position:absolute; top:50%; margin-top:-10px; color:var(--white); transition:all .3s linear;}
.pro_top .pro_img .slick-prev::after{left:10px;}
.pro_top .pro_img .slick-next::after{right:10px;}
.pro_top .pro_img .slick-next::after{transform:rotate(180deg);}

.pro_top .pro_txt{width: calc(100% - 645px); padding: 20px 0 0 80px;}
.pro_top .pro_txt .pro_local{margin:0 0 30px;}
.pro_top .pro_txt .prd_cate{margin-bottom: 10px; display: flex; flex-wrap:wrap; gap:6px 20px; align-items:center; }
.pro_top .pro_txt .prd_icon{font-size:0.778rem; color:var(--light); line-height: 140%; font-family:var(--eng);}
.pro_top .pro_txt .prd_icon b{margin-right: 5px; font-weight: 600; color:var(--black); letter-spacing: var(--letter-spacing-caption); font-family: var(--kor);}
.pro_top .pro_txt .manufacturer{font-size:1rem; font-weight: 600; color:var(--main); line-height: 150%; font-family: var(--eng);}
.pro_top .pro_txt .prdname{font-size:2.778rem; font-weight: 700; letter-spacing: 0; line-height: 130%; font-family: var(--eng); color:var(--black);}
.pro_top .pro_txt .prd_detail{margin: 30px 0 0; padding: 30px 0; border-top: 1px solid var(--border); box-sizing:border-box; display: flex; flex-wrap:wrap; gap:10px;}
.pro_top .pro_txt .prd_detail dl{width: calc((100% - 10px)/2); display: flex;}
.pro_top .pro_txt .prd_detail dl dt{width: 110px; font-size:0.889rem; font-weight: 600; color:var(--black); letter-spacing: var(--letter-spacing-defaul); line-height: 160%;}
.pro_top .pro_txt .prd_detail dl dd{flex:1; font-size:0.889rem; font-weight: 400; color:var(--basic); letter-spacing: 0; line-height: 160%;}
.pro_top .pro_txt .prd_down{padding: 20px 25px; box-sizing:border-box; background:var(--grayBg); display: flex; align-items:center;}
.pro_top .pro_txt .prd_down .tit{width: 130px;}
.pro_top .pro_txt .prd_down .tit p{font-weight: 600; color:var(--black);}
.pro_top .pro_txt .prd_down .con{flex:1;}
.pro_top .pro_txt .prd_down .down-btn{display: flex; gap:4px;}
.pro_top .pro_txt .prd_down .down-btn li{flex:1;}
.pro_top .pro_txt .prd_down .down-btn li a{width: 100%;}
.pro_top .pro_txt .prd_down .down-btn li .more_btn p::after{content:''; width: 20px; height: 20px;}
.pro_top .pro_txt .prd_down .down-btn li .more_btn:hover p::after{filter: brightness(0) invert(1);}
.pro_top .pro_txt .prd_down .down-btn li .more_btn{background:var(--white);}
.pro_top .pro_txt .prd_down .down-btn li .more_btn::after{background:var(--main);}
.pro_top .pro_txt .prd_down .down-btn li .more_btn::before{border-color:var(--main);}
.pro_top .pro_txt .prd_down .down-btn li .more_btn p em{color:var(--main);}
.pro_top .pro_txt .prd_down .down-btn li .more_btn p em::after{color:var(--white);}
.pro_top .pro_txt .prd_down .down-btn li.down1 .more_btn p::after{background:url('/twcenter/product2/skin/prdBasic/image/down_icon1.png') no-repeat center/contain;}
.pro_top .pro_txt .prd_down .down-btn li.down2 .more_btn p::after{background:url('/twcenter/product2/skin/prdBasic/image/down_icon2.png') no-repeat center/contain;}
.pro_top .pro_txt .prd_down .down-btn li.down3 .more_btn p::after{background:url('/twcenter/product2/skin/prdBasic/image/down_icon3.png') no-repeat center/contain;}
.pro_top .pro_txt .prd_down .down-btn li.down4 .more_btn p::after{background:url('/twcenter/product2/skin/prdBasic/image/down_icon4.png') no-repeat center/contain;}
.pro_top .pro_txt .prd_down .down-btn li.file-empty .more_btn{pointer-events: none; opacity: 0.3; background:none; filter: grayscale(100%);}
 
.pro_content{padding-top: 60px;}
.pro_content .title{margin: 0 0 20px; padding: 16px 25px; box-sizing:border-box; border:1px solid var(--black);}
.pro_content .title p{font-weight: 600; color:var(--black);}
.pro_content .content{}
.pro_content .content::after{content:''; display: block; clear: both;}
.pro_content .content img{max-width:100% !important; height: auto !important;}

.pro_btn{padding-top: 60px; display: flex; justify-content: center;}
.pro_btn .listBtn{background:none;}
.pro_btn .listBtn::after{background:var(--black);}
.pro_btn .listBtn::before{border-color:var(--light);}
.pro_btn .listBtn:hover::before{border-color:var(--black);}
.pro_btn .listBtn p::after{content:'\e5d2'; color:var(--light);}
.pro_btn .listBtn p em{color:var(--light);}
.pro_btn .listBtn p em::after{color:var(--white);}
.pro_btn .listBtn:hover p::after{color:var(--white);}





/*******************************************************************************
    @media 1740px
*******************************************************************************/
@media all and (max-width:1740px){



/* Smart Filter */
.pf-grid {grid-template-columns:repeat(4, minmax(0, 1fr));}




/* 뷰 */
.pro_top{}
.pro_top .pro_img{width: 45%;}
.pro_top .pro_txt{width: 55%;}
.pro_top .pro_txt .prd_down .tit{width: 100px;}
.pro_top .pro_txt .prd_down .down-btn li .more_btn{padding: 0 25px;}

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* 뷰 */
.pro_top .pro_txt .prd_down .down-btn{flex-wrap:wrap;}
.pro_top .pro_txt .prd_down .down-btn li{flex:auto; width: calc((100% - 4px)/2);}
.pro_top .pro_txt .prd_down .down-btn li .more_btn:hover::after{transform:scale(40); transition:all .3s linear;}

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/* Smart Filter */
.pf-grid {grid-template-columns:repeat(3, minmax(0, 1fr));}


/* 뷰 */
.pro_top{}
.pro_top .pro_img{width: 45%;}
.pro_top .pro_txt{padding: 0 0 0 50px;}
.pro_top .pro_txt .prdname{font-size:2.222rem;}
.pro_top .pro_txt .prd_detail{margin: 20px 0 0; padding: 20px 0;}
.pro_top .pro_txt .prd_detail dl{width: 100%;}
.pro_top .pro_txt .prd_down .tit{width: 100px;}

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

.pro_list_cont{padding-top: 40px;}

/* Smart Filter */
.pf {margin:0 auto 40px; padding:20px;}

.pf-lbl {flex:0 0 160px; width:160px;}
.pf-grid {grid-template-columns:repeat(2, minmax(0, 1fr));}


/* 리스트 */
.pt-hdFx.fixed {top:100px;}
.pt-nav{top:180px;}
.pt-tbl col.pt-cm {width:200px;}
.pt-tbl col.pt-cd {width:180px;}

.pt-th{padding:8px 10px;}

.pt-td .pt-dw li a{width: 40px; height: 40px; font-size:12px;}


.pf-q-lb {flex:0 1 100%;}


/* 뷰 */
.pro_top{}
.pro_top .pro_txt{padding: 0 0 0 30px;}
.pro_top .pro_txt .pro_local{margin:0 0 20px;}
.pro_top .pro_txt .prd_detail{margin: 15px 0 0;}
.pro_top .pro_txt .prd_down{padding: 15px 20px; flex-wrap:wrap; gap:8px;}
.pro_top .pro_txt .prd_down .tit{width: 100%;}
.pro_top .pro_txt .prd_down .down-btn{flex-wrap:wrap; width: 100%;}
.pro_top .pro_txt .prd_down .down-btn li .more_btn{height: 50px;}

.pro_content{padding-top: 40px;}
.pro_content .title{margin: 0 0 15px; padding: 12px 20px;}

.pro_btn{padding-top: 40px;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


.pro_list_cont{padding-top: 30px;}
.pt-nav{margin-right:calc(8px + var(--pt-nav-end-inset, 0px)); top:140px;}
.pt-nav__btn{width:36px; height:36px;}
.pt-nav__btn::after{width:18px; height:18px; line-height:18px; font-size:18px;}

/* Smart Filter */
.pf {gap:5px; margin:0 auto 30px; padding:15px;}
.pf-hd {gap:5px 10px; position: relative;}
.pf-tls {gap:5px 15px; width: 100%;}
.pf-rst::before{font-size:16px;}

.pf-end{}
.pf-end label::before{width: 16px; height: 16px; line-height: 14px; font-size:16px;}

.pf-tog {width:85px; height:26px; position: absolute; right: 0; top:0;}
.pf-tog-tx {font-size:12px;}
.pf-tog-k {width:14px; height:14px;}
.pf.is-fold .pf-tog-tx {transform:translateX(18px);}
.pf.is-fold .pf-tog-k {transform:translateX(-52px);}

.pf-bd {}
.pf-sort {}
.pf-row {}
.pf-lbl {flex:auto; width:100%; padding:10px;}

.pf-grid {grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; padding:10px;}
.pf-chk{align-items: flex-start}
.pf-chk-b {width:16px; height:16px;}
.pf-chk-in:checked + .pf-chk-b::after {width: 16px; height: 16px; line-height: 14px; font-size:16px;}

.pf-rng {gap:10px 20px; flex:1 1 0; padding:10px;}
.pf-rng-bar {flex:auto; width:80%;}

.pf-nums {width:100%;}
.pf-num-in {height:28px; padding:5px 10px;}

.pf-ft{gap:5px;}
.pf-q {height:40px; padding:10px;}

.pf-sub {font-size:1rem; width: 100%; height:40px;}
.pf-sub::after{width: 16px; height: 16px; line-height: 16px; font-size:16px;}



/* 리스트 */
.pt-hdFx.fixed {top:65px;}

.pt-tbl col.pt-cm {width:100px;}
.pt-tbl col.pt-c {min-width:100px;}
.pt-tbl col.pt-cd {width:150px;}

.pt-th{padding:8px 6px;}
.pt-th .pt-hd{}
.pt-th .pt-ht{font-size:13px;}

.pt-td{padding: 3px 6px;}
.pt-td .pt-mw{gap:10px;}
.pt-td .pt-mw .pt-nm{font-size:13px; width: calc(100% - 35px);}
.pt-td .pt-mw .pt-go{width: 25px; height: 25px;}
.pt-td .pt-mw .pt-go::after{font-size:14px; line-height: 23px;}
.pt-td .pt-v{font-size:13px;}

.pt-td .pt-dw li a{width: 32px; height: 32px; font-size:10px;}
.pt-img{display: none;}

/* 뷰 */
.pro_view{}

.pro_local{gap:20px; justify-content: flex-start;}
.pro_local li::after{height: 14px; right: -10px; margin-top: -7px;}
.pro_local li.home a{width: 14px; height: 14px;}

.pro_top{flex-wrap:wrap;}
.pro_top article{}
.pro_top .pro_img{width: 100%;}
.pro_top .pro_img .pro_local{display: flex; margin-bottom: 20px;}

.pro_top .pro_img .slick-arrow{right:15px; bottom:15px;}

.pro_top .pro_img .proImg_nav{margin: 0 -3px; padding:6px 0 0;}
.pro_top .pro_img .proImg_nav .roll{margin: 0 3px;}

.pro_top .pro_txt{width: 100%; padding: 20px 0 0;}
.pro_top .pro_txt .pro_local{display: none;}

.pro_top .pro_txt .prd_cate{margin-bottom: 6px; gap:6px 15px;}

.pro_top .pro_txt .prdname{font-size:1.944rem;}
.pro_top .pro_txt .prd_detail{margin: 10px 0 0; padding: 15px 0; gap:6px;}
.pro_top .pro_txt .prd_detail dl dt{width: 80px;}
.pro_top .pro_txt .prd_detail dl dd{}
.pro_top .pro_txt .prd_down{padding: 15px; flex-wrap:wrap; gap:5px;}
.pro_top .pro_txt .prd_down .tit{width: 100%;}
.pro_top .pro_txt .prd_down .con{flex:1;}
.pro_top .pro_txt .prd_down .down-btn li{width: calc((100% - 4px)/2);}
.pro_top .pro_txt .prd_down .down-btn li .more_btn{height: 40px;}
.pro_top .pro_txt .prd_down .down-btn li .more_btn p::after{width: 16px; height: 16px;}

.pro_content{padding-top: 30px;}
.pro_content .title{margin: 0 0 10px; padding: 10px 15px;}

.pro_btn{padding-top: 30px;}








/* 제품 더보기 */
.pro_more{margin: 30px auto 0; width: 90px; padding: 0 0 10px;}
.pro_more::after{width: 16px; height: 16px; line-height: 16px; font-size:16px; bottom: 10px;}




}