/* BASIC css start */
#container {max-width:inherit}
body #contents {padding:0;}
body .cartBtn {display:block;}

/* »ó´Ü */
.shopbrandTitle {}
.shopbrandTitle img {width:100%;}

/* dim */
.dim {position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0; top:0; z-index:1; display:none;}

/* page-body */
.page-body {/*display: flex;*/}

/* ÁÂÃø */
.cate-wrap {overflow:hidden }
.cate-wrap .bcate {padding-bottom: 20px; font-size: 1.25rem; color: var(--6); font-weight: 700; border-bottom: 1px solid var(--1); white-space: pre; cursor: pointer; line-height:1;}
.cate-wrap .class-list ul {}
.cate-wrap .class-list ul:after { display:block; clear:both; content:'' }
.cate-wrap .class-list > ul > li {border-bottom: 1px solid var(--1);}

.page_body_L { width: 20%; margin-right:5.5%;} 
.page_body_L .main_m>li {position: relative;} 
.page_body_L .main_m>li>a { position: relative; display:block; font-size: 1.25rem; color: var(--6); font-weight: 500; margin-right:20px; padding:15px 0; } 
.page_body_L .main_m>li>a.act { color: var(--6); }
.page_body_L .main_m>li>span { position: absolute; top: 22px; right: 0; width: 15px; height: 15px; display: inline-block; cursor:pointer; transition:opacity .5s; opacity:0; } 
.page_body_L .main_m>li>span.show { opacity:1; } 
.page_body_L .main_m>li>span>a { transition: all .4s; display:block; width: 100%; height: 100%; } 
.page_body_L .main_m>li>span::before { transition: all .4s; content: ""; display: block; position: absolute; width: 1px; height: 15px; background-color: #546168; top: 0; left: 7px; } 
.page_body_L .main_m>li>span::after { content: ""; display: block; position: absolute; width: 15px; height: 1px; background-color:#546168; top: 7px; left: 0%; } 
.page_body_L .main_m>li>span.rotate::before { transform: rotate(90deg); transform-origin: center; transition: all .4s; } 
.page_body_L .sub_m { display: none; opacity:0; transition: opacity .7s; }
.page_body_L .sub_m.show { opacity:1; display:block; } 
.page_body_L .sub_m>li { padding: 15px 0; } 
.page_body_L .sub_m>li:last-child {padding-bottom:45px;}
.page_body_L .sub_m>li>a { font-size: 1.125rem; font-weight:400; color: var(--4); line-height:26px; } 
.page_body_L .sub_m>li>a.act { font-weight:700;} 
.page_body_L .sub_m>li>a:hover { font-weight:700;} 

/* ÇÊÅÍ */
.fliter-area {display:flex;}
.fliter-area .list-filter {flex:1; display:inline-block; margin-right:1%;}
.fliter-area .align-right {width:25%;}
.listFilter .tit b {font-size:1.25rem; font-weight:700;}
.m_filterBtn {width:89px; line-height:29px; cursor:pointer; background:#f8f8f8; text-align:center; color:var(--6); font-weight:500;}
.m_filterBtn img {vertical-align:middle; margin-left:3px;}

/* »óÇ° »ó´Ü */
.page_body {}
.page_body .list_sort {border-bottom:1px solid var(--2); margin-bottom:50px; position:relative; padding-bottom:30px;}
.page_body .list_sort select {border:none; height:auto; font-size: 0.875rem; font-weight:500; margin-top:11px; color: var(--6); -webkit-appearance: none; min-width:120px; background:url(/design/helinox/h_renewal/img/icon/icon_sort.svg)no-repeat right center; float:right; background-size:16px auto;}
.page_body .list_sort select option[value="sellcnt"] {display:none;}
.now_list {font-size:1.625rem; font-weight:700; line-height:1; margin:70px 0 40px;}

/* »óÇ° ¿­ Á¤·Ä */
.row {float:right;}
.row li {display:inline-block; vertical-align:top; margin:0 0 0 5px; width:17px; height:17px; background-size:100%; position: relative; cursor:pointer;}
/*.row li.on:after {content:'VIEW'; display:block; border-top:1px solid var(--3); font-size:0.688rem; position: absolute; bottom: -22px;}*/
.row li:nth-of-type(1) {background:url(/design/helinox/h_renewal/img/1row_off.png)no-repeat center; }
.row li:nth-of-type(1).on {background:url(/design/helinox/h_renewal/img/1row_on.png)no-repeat center; }
.row li:nth-of-type(2) {background:url(/design/helinox/h_renewal/img/2row_off.png)no-repeat center; }
.row li:nth-of-type(2).on {background:url(/design/helinox/h_renewal/img/2row_on.png)no-repeat center; }
.row li:nth-of-type(3) {background:url(/design/helinox/h_renewal/img/3row_off.png)no-repeat center; margin-right:0;}
.row li:nth-of-type(3).on {background:url(/design/helinox/h_renewal/img/3row_on.png)no-repeat center;}

/* ºÐ·ù »óÇ°Æû */
.prd-name {display: flex; justify-content: space-between; gap: 20px;}
.page_body .productList {width:100%;}
.page_body .productList ul li {display:inline-block; width:23.33%; margin-bottom:60px; margin-right:2.22%; text-align:left;}
.page_body .productList ul li.hidden {display:none;}
.page_body .productList ul li:nth-child(4n) {margin-right: 0;}
.page_body .productList.type1 ul li {width:49%; margin-right:2%;}
.page_body .productList.type2 ul li {width:23.66%; margin-right:1.77%;}
.page_body .productList.type3 ul li {width:16%; margin-right:0.8%;}
.page_body .productList.type1 ul li:nth-child(2n) {margin-right: 0;}
.page_body .productList.type2 ul li:nth-child(4n) {margin-right: 0;}
.page_body .productList.type3 ul li:nth-child(6n) {margin-right: 0;}

/* ¸ð¹ÙÀÏ »ó´Ü ºÐ·ù */
.m_category {text-align:center; width:100%; }
.m_category .class-list {overflow-x: auto; overflow-y: hidden; padding:0 7.5%; box-sizing:border-box; border-bottom:1px solid var(--1); }
.m_category select {height:20px; font-size: 0.813rem; font-weight:700; color: var(--7); -webkit-appearance: none; border:none; min-width:100px; background:url(/design/helinox/h_renewal/img/icon/icon_sort.svg)no-repeat right center; margin:27px 0 20px; padding:0; background-size: 14px auto;}
.m_category ul {display: flex; justify-content: inherit;}
.m_category ul li {flex-shrink: 0; padding-bottom:11px; margin-right:30px; position:relative;}
.m_category ul li.on {border-bottom:2px solid var(--7); }
.m_category ul li a {line-height:16px; font-size:0.688rem; color:var(--7); display:block; font-weight:500;}


/* ÇÊÅÍ */
.list_array {margin-bottom:0;}
.btn-filter-wrap {position:relative; padding:10px 8px; margin-bottom:20px; border-bottom:1px solid #4a4a4a;}
.btn-filter-wrap strong {display:inline-block; font-size:12px; color:#3b3b3b;}
.btn-filter-wrap a {position:absolute; top:10px; right:8px; width:18px; height:18px; background:url(/images/common/icon_filter.png) no-repeat left center; vertical-align:middle; font-size:0; text-indent:-9999px;}
.filter-wrap * {word-break:break-all;}
.filter-wrap button {border:0;}
.layer-filter-wrap {}
.layer-filter-wrap .layer-filter {}
.layer-filter-wrap .layer-filter .tit {margin-bottom:22px;}
.layer-filter-wrap .layer-filter .tit h3 {display:inline-block; font-size:0.875rem; font-weight:700; margin:0; padding:0;}
.layer-filter-wrap .layer-filter .tit .total-count {display:inline-block; margin-left:15px; color:#b17efe; font-size:13px; font-weight:bold;}
.layer-filter-wrap .layer-filter .tit .filter-close {background:none; float:right; cursor:pointer;}
.layer-filter-wrap .layer-filter .tit .filter-close img {display:block;}
.layer-filter-wrap .layer-filter .opt-box li {background: rgba(248, 248, 248, 1) url(/images/common/icon_arr_down.png) no-repeat 92% center; background-size:15px auto; cursor: pointer; display: inline-block; vertical-align: top; width: 170px; line-height: 45px; padding: 0 15px; box-sizing: border-box; position:relative; margin-right:9px; margin-bottom:9px;}
.layer-filter-wrap .layer-filter .opt-box li span {font-size:0.875rem; font-weight:600;}
.layer-filter-wrap .layer-filter .opt-box li.active {background: rgba(248, 248, 248, 1) url(/images/common/icon_arr_up.png) no-repeat 92% center; background-size:15px auto;}
.layer-filter-wrap .layer-filter .opt-box li > div {position:absolute; background:#fff; padding:10px 0 10px 20px; z-index:10; border:1px solid var(--1); left:0; top:55px; min-width:240px; max-height:465px; overflow-y: scroll; display:none;}
.layer-filter-wrap .layer-filter .opt-box li input[type="checkbox"]{/*display:none;*/ display: inline-block; margin-top: -3px;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label {/*position:absolute; width:91%; height:28px; line-height:28px; margin-top:0; padding-left:30px; display:block;*/ font-size:13px; font-weight:normal; cursor:pointer; width: 89%; display: inline-block;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label:before {/*position:absolute;*/ left:0; top:6px; width:16px; height:16px; background:url(/design/helinox/h_renewal/img/icon/radio_off.svg) transparent no-repeat center / 16px 16px;; content:'';}
.layer-filter-wrap .layer-filter .opt-box li .chk-box input[type="checkbox"]:checked + label:before {background:url(/design/helinox/h_renewal/img/icon/radio_on.svg) transparent no-repeat center / 16px 16px;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box p.filter_item_color_keyword {padding-left:25px; line-height:28px; font-size: 0.875rem; color: var(--3);}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code {display:flex; flex-wrap:wrap; column-gap:10px; row-gap:10px; justify-content:flex-start; opacity:0;}
.layer-filter-wrap .layer-filter .opt-box li.active .chk-color-code {opacity:1;} 
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code label {display:block; width:25px; height:25px; border:1px solid #fff; border-radius:50%; box-shadow:0px 0px 1px 1px #dfdfdf; cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code input[type="checkbox"]:checked + label {box-shadow:0px 0px 1px 1px #000;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code input[type="checkbox"]:checked + label + p {color:#202020;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code p {margin:4px 0; text-align:center; font-weight:normal; line-height:1;}
.layer-filter-wrap .layer-filter .select-filter {display:flex; flex-wrap:wrap; gap:5px; margin:20px 0 25px;}
.layer-filter-wrap .layer-filter .select-filter li {display:flex; align-items:center; font-size:1rem; margin-right:10px; margin-bottom:10px;}
.layer-filter-wrap .layer-filter .select-filter li .btn-del {width:10px; height:10px; cursor:pointer; margin-left:5px; margin-top:2px; background:url(/images/common/icon_txt_delete.png) no-repeat right center; font-size:0px; text-indent:-9999px;}
.layer-filter-wrap .layer-filter .select-filter li .color-code {width:18px; height:18px; margin-right:5px; border-radius:50%;}
.layer-filter-wrap .layer-filter .select-filter li .filter-text {max-width:200px; font-size:0.813rem; color:var(--3;)}
.layer-filter-wrap .layer-filter .btn-wrap {display:flex; position: absolute; right: 0; top: 150px; align-items: baseline;}
.layer-filter-wrap .layer-filter .btn-wrap button {text-align:center; background:none;}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-reset {}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-search {}
.layer-filter-wrap .layer-filter .btn-wrap button span {display:inline-block; cursor:pointer; visibility:visible; border-bottom:1px solid var(--4); color:var(--4); margin-left:10px; font-size:0.813rem;}
.spinner {display: none; width: 50px; height: 50px; border: 3px solid rgba(0, 0, 0, 0.3); border-top-color: #000; border-radius: 50%; animation: spin 1s linear infinite; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ¼±Åà ÇÊÅÍ */
.item-payment {display:inline-block; vertical-align:top; line-height:45px;}
.item-payment dt {display:none;}
.item-payment dd {}
.item-payment dd label {margin-right:8px;}
.item-payment dd label:last-child {margin-right:0;}



/******************************* ¹ÝÀÀÇü *******************************/
@media (max-width:1700px) {
    .layer-filter-wrap .layer-filter .opt-box li {width:150px;}
}

@media (max-width:1500px) {
    /*.contWidth {width:90%;}*/
}

@media (max-width:1320px) {
    /*.contWidth {width:95%;}*/
    .layer-filter-wrap .layer-filter .opt-box li {width:110px;}
    .fliter-area .align-right {width:35%;}
}

@media (max-width:1300px) {
    .page_body .productList ul li {width:32%; margin-right:2%;}
    .page_body .productList ul li:nth-child(3n) {margin-right: 0;}
    .page_body .productList ul li:nth-child(4n) {margin-right: 2%;}
    .page_body .productList ul li:nth-child(6n) {margin-right: 0;}
}

/* tablet */
@media (max-width:1024px) {
    .cate-wrap .bcate {font-size:1rem; padding-bottom:15px;}
    .item-payment {margin-top:20px;}
    
    .page_body {flex:inherit;}
    .page_body .list_sort {position:relative; margin-bottom:30px;}
    .page_body .list_sort select {min-width: inherit; text-align: right; font-size:0.75rem; flex:1; padding-right:20px; background-size:12px auto;}
    .now_list {font-size: 1.375rem; margin: 40px 0;}
    .page_body .productList {padding:0;}
    .page_body .productList ul li {width: 48%; margin-right: 4%; margin-bottom: 30px;}
    .page_body .productList ul li:nth-child(3n) {margin-right: 4%;}
    .page_body .productList ul li:nth-child(2n) {margin-right: 0;}
    .page_body .productList ul li:nth-child(4n) {margin-right: 0;}
    
    .page_body .productList.type1 ul li {width:100%; text-align:center;}
    .page_body .productList.type2 ul li {width:48%; margin-right:4%;}
    .page_body .productList.type2 ul li:nth-child(2n) {margin-right: 0;}
    
    .row li {width:17px; height:17px;}
    .row li.on:after {display:none;}
    
    /* ÇÊÅÍ */
    .list-filter {margin-right:0;}
    .layer-filter-wrap {position:fixed; left:0; bottom:0; background:var(--0); z-index:10; padding:20px; width:100%; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); display:none;}
    .layer-filter-wrap .layer-filter .tit {display:block;}
    .layer-filter-wrap .layer-filter .opt-box li {width:100%; display:block; background:url(/design/helinox/h_renewal/img/icon/ico_plus_b.svg)no-repeat right 15px; background-size: 12px 12px; padding:0; border-bottom: 1px solid var(--3); line-height:40px; margin:0;}
    .layer-filter-wrap .layer-filter .opt-box li.active {background:url(/design/helinox/h_renewal/img/icon/ico_minus_b.svg)no-repeat right 15px; background-size: 12px auto;}
    .layer-filter-wrap .layer-filter .opt-box li span {font-size:0.813rem;}
    .layer-filter-wrap .layer-filter .opt-box li > div {position:static; background:#fff; padding:0; z-index:1; border:none; min-width:inherit; padding:0 5px 10px; max-height:300px;}
    .layer-filter-wrap .layer-filter .opt-box li .chk-box label {/*height:23px;*/ width:90%}
    .layer-filter-wrap .layer-filter .opt-box li .chk-box label:before {width:13px; height:13px; top:5px; background: url(/design/helinox/h_renewal/img/icon/radio_off.svg) transparent no-repeat center / 13px 13px;}
    .layer-filter-wrap .layer-filter .opt-box li .chk-box input[type="checkbox"]:checked + label:before {width:13px; height:13px; background: url(/design/helinox/h_renewal/img/icon/radio_on.svg) transparent no-repeat center / 13px 13px;}
    .layer-filter-wrap .layer-filter .opt-box li .chk-box p.filter_item_color_keyword {line-height:23px; font-size:0.75rem;}
    .listFilter {min-height:400px; border-radius:3px; background: var(--0); width:90%; margin:0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
    .listFilter .tit {padding:10px 15px; text-align:center;}
    .listFilter .filter_contents {padding:10px 15px;}
    .layer-filter-wrap .layer-filter .select-filter {margin:25px 0 50px;}
    .layer-filter-wrap .layer-filter .btn-wrap {position:static;}
    .layer-filter-wrap .layer-filter .btn-wrap button.btn-reset {flex:1; text-align: left;}
    .layer-filter-wrap .layer-filter .btn-wrap button.btn-search {width: 50%; min-width:220px;}
    .layer-filter-wrap .layer-filter .btn-wrap button.btn-search span {background:var(--7); color:var(--0); width:100%; border-radius:1px; line-height:40px;}
    .layer-filter-wrap .layer-filter .btn-wrap button span {margin:0; font-size:0.688rem; margin-left:5px;}
    .layer-filter-wrap .layer-filter .select-filter li {margin-right:5px; margin-bottom:5px;}
    .layer-filter-wrap .layer-filter .select-filter li .filter-text {max-width:inherit; font-size:0.75rem;}
    .layer-filter-wrap .layer-filter .opt-box li .chk-color-code label {width:20px; height:20px;}
    
    /* »óÇ°Æû */
    .prd-name {display: block;}
}


/* mobile */
@media (max-width:768px) {
    /*.shopbrandTitle {min-height: 400px;}*/
    .page_body .list_sort {margin-bottom:25px;}
    .now_list {margin: 30px 0;}
    .productList.type1 ul li .prd-img .my-wish-list {right: 13px; bottom: 13px;}
    .productList.type1 ul li .prd-img .my-wish-list img {width:20px;}
    .layer-filter-wrap .layer-filter .opt-box {max-height: 50vh; overflow-y: auto;}
}

@media (max-width:400px) {
    /*.shopbrandTitle {min-height: 347px;}*/
}

/* BASIC css end */