/* product */
#contents .board.product {display:flex; align-items:flex-start; gap:40px;}
#contents .board.product .b_filter {display:inline-block; flex-shrink:0; width:300px; padding:30px; border-radius:20px; background:var(--black-5);}
#contents .board.product .b_filter > ul ul {display:none}
#contents .board.product .b_filter > ul > li + li {margin-top:20px;}
#contents .board.product .b_filter > ul > li > button {display:flex; flex-direction:row; justify-content:space-between; align-items:center; position:relative; width:100%; padding:5px 0; padding-right:30px; text-align:left; cursor:pointer;}
#contents .board.product .b_filter > ul > li > button strong {position:relative; font-size:18px; font-weight:700; line-height:30px; letter-spacing:-0.18px;}
#contents .board.product .b_filter > ul > li > button strong:before {content:''; display:none; vertical-align:middle; position:absolute; bottom:0; left:0; right:0; height:2px; background-color:var(--brown);}
#contents .board.product .b_filter > ul > li > button span {color:var(--black-60); font-size:15px; font-weight:400; line-height:25px; letter-spacing:-0.15px;}
#contents .board.product .b_filter > ul > li > button i {display:inline-block; vertical-align:middle; position:absolute; top:8px; right:0; width:24px; height:24px; background-image:url("../img/icon_arrow_down_t1.svg"); background-position:0 0; background-size:100% auto; background-repeat:no-repeat; transform:rotate(0);}
#contents .board.product .b_filter > ul > li.on > button strong,
#contents .board.product .b_filter > ul > li > button:hover strong {color:var(--brown);}
#contents .board.product .b_filter > ul > li.on > button strong:before,
#contents .board.product .b_filter > ul > li > button:hover strong:before {display:inline-block;}
#contents .board.product .b_filter > ul > li.on > button i {transform:rotate(180deg);}
#contents .board.product .b_filter .flexbox {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; margin-top:10px; padding-right:30px;}
#contents .board.product .b_filter .flexbox + ul {position:relative; margin-top:10px}
#contents .board.product .b_filter .flexbox + ul:before {content:"ㄴ"; position:absolute; left:0; top:0; width:16px; aspect-ratio:1/1; line-height:1; color:var(--black-60); font-size:12px;}
#contents .board.product .b_filter .flexbox + ul .flexbox {padding-left:15px; margin-top:0}
#contents .board.product .b_filter .checkbox label {align-items:flex-start; color:var(--black); font-size:16px; font-weight:400; line-height:25px; letter-spacing:-0.16px;}
#contents .board.product .b_filter .checkbox label i {top:2px}
#contents .board.product .b_filter .checkbox input[type='checkbox'] {top:12px}
#contents .board.product .b_filter .checkbox input:checked + i {background-color:var(--black-60); border-color:var(--black-60);}
#contents .board.product .b_filter .flexbox > span {color:var(--black); color:var(--black-60); font-size:15px; font-weight:400; line-height:25px; letter-spacing:-0.15px;}
#contents .board.product .b_filter + div {display:inline-block; vertical-align:middle; width:100%;}

#contents .board.product .b_gallery .compare_btn {overflow:hidden; display:inline-block; vertical-align:middle; position:absolute; top:20px; right:15px; min-width:36px; height:36px; border-radius:50px; background-color:var(--black-10); transition:0.3s background-color ease-in-out;}
#contents .board.product .b_gallery .compare_btn:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; right:13px; width:10px; height:2px; margin-top:-1px; border-radius:10px; background-color:var(--black);}
#contents .board.product .b_gallery .compare_btn:after {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; right:13px; width:10px; height:2px; margin-top:-1px; border-radius:10px; background-color:var(--black); transform:rotate(90deg);}
#contents .board.product .b_gallery .compare_btn.on {background-color:var(--black-30);}
#contents .board.product .b_gallery .compare_btn.on:after {display:none;}
#contents .board.product .b_gallery .compare_btn span {display:inline-block; vertical-align:middle; float:left; margin-right:-70px; padding:0 31px 0 15px; color:var(--black); font-family: Pretendard; font-size:15px; font-weight:600; line-height:36px; opacity:0; transition:margin-right 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out;}
#contents .board.product .b_gallery .compare_btn:hover span {margin-right:0; opacity:1; transition:margin-right 0.3s ease-in-out, opacity 0.3s ease-in-out 0.2s;}
#contents .board.product .b_gallery .compare_btn span.t2 {display:none;}
#contents .board.product .b_gallery .compare_btn.on span.t1 {display:none;}
#contents .board.product .b_gallery .compare_btn.on span.t2 {display:inline-block;}

.bvh_btnwrap {display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:10px; margin-top:40px;}
.bvh_btnwrap li {width:100%}
.bvh_btnwrap li a {width:100%}
.bvh_btnwrap .compare_btn {display:flex; flex-direction:row; justify-content:center; align-items:center; gap:10px; position:relative; width:100%; background-color:var(--brown); }
.bvh_btnwrap .compare_btn.on {background-color:var(--black-30); color:var(--black-80)!important;}
.bvh_btnwrap .compare_btn i {background-image:url("../img/icon_plus_w.svg")}
.bvh_btnwrap .compare_btn.on i {position:relative; background:none;}
.bvh_btnwrap .compare_btn.on i::before {content:''; position:absolute; top:50%; left:50%; width:10px; height:2px; margin-top:-1px; margin-left:-5px; border-radius:10px; background-color:var(--black-80);}
/*.bvh_btnwrap .compare_btn i:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:50%; width:10px; height:2px; margin-top:-1px; margin-left:-5px; border-radius:10px; background-color:var(--white);}*/
/*.bvh_btnwrap .compare_btn i:after {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:50%; width:10px; height:2px; margin-top:-1px; margin-left:-5px; border-radius:10px; background-color:var(--white); transform:rotate(90deg);}*/
.bvh_btnwrap .compare_btn.on i:after {display:none;}
.bvh_btnwrap .compare_btn.on i:before {background-color:var(--black-80)}
.bvh_btnwrap .compare_btn span.t2 {display:none;}
.bvh_btnwrap .compare_btn.on span.t1 {display:none;}
.bvh_btnwrap .compare_btn.on span.t2 {display:inline-block;}
.bvh_btnwrap .btn.b80 i {background-image:url("../img/icon_write.svg");}

/* 팝업 */
.pop {z-index:99;}
.pop.p_compare .clear_all {display:inline-block; vertical-align:middle; box-sizing:border-box; position:absolute; top:40px; right:100px; width:140px; height:40px; border-radius:100px; border:1px solid var(--black-20); background-color:var(--white); color:var(--black); font-size:14px; font-weight:600; line-height:25px; letter-spacing:-0.14px;}
.pop.p_compare .clear_all:hover {text-decoration:underline; text-underline-position:under;}
.pop.p_compare .pc_list {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:stretch; gap:40px; width:100%;}
.pop.p_compare .pc_list > li {display:inline-block; vertical-align:middle; width:calc(25% - 30px); box-sizing:border-box; padding:20px; border-radius:10px; border:1px solid var(--black-20); background-color:var(---white);}
.pop.p_compare .pc_list .pcl_clear {display:flex; flex-direction:row; justify-content:flex-end; width:100%;}
.pop.p_compare .pc_list .pcl_clear button {display:inline-block; vertical-align:middle; width:20px; height:20px; background:url("../img/icon_close.svg") center center no-repeat; transition:0.3s transform ease-in-out;}
.pop.p_compare .pc_list .pcl_clear button:hover {transform:rotate(90deg);}
.pop.p_compare .pc_list .pcl_thumb {display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:100/66.667; margin-top:15px;}
.pop.p_compare .pc_list .pcl_thumb img {width:100%; height:100%; object-fit:cover}
.pop.p_compare .pc_list .pcl_text {display:inline-block; vertical-align:middle; overflow:hidden; width:100%; margin-top:15px;}
.pop.p_compare .pc_list .pcl_text strong {display:inline-block; vertical-align:middle; float:left;  width:100%; color:var(--black); font-size:18px; font-weight:600; line-height:30px; letter-spacing:-0.18px; text-align:left; word-wrap:break-word;}
.pop.p_compare .pc_list .pcl_text span {display:inline-block; vertical-align:middle; float:left;  width:100%; margin-top:5px; color:var(--black); font-size:15px; font-weight:400; line-height:25px; letter-spacing:-0.15px; text-align:left; word-wrap:break-word;}
.pop.p_compare .pc_list .pcl_info {display:inline-block; vertical-align:middle; overflow:hidden;  width:100%; margin-top:15px; border-top:2px solid var(--black);}
.pop.p_compare .pc_list .pcl_info li {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:20px; float:left; width:100%; padding:10px 0;}
.pop.p_compare .pc_list .pcl_info li + li {border-top:1px solid var(--black-60);}
.pop.p_compare .pc_list .pcl_info li span.bold {display:inline-block; vertical-align:middle; width:55px; font-size:15px; font-weight:600; line-height:25px; letter-spacing:-0.15px;}
.pop.p_compare .pc_list .pcl_info li span.cb60 {display:inline-block; vertical-align:middle; width:calc(100% - 75px); font-size:15px; font-weight:400; line-height:25px; letter-spacing:-0.15px; word-wrap:break-word;}
.pop.p_compare .pc_list .pcl_empty {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%;}
.pop.p_compare .pc_list .pcl_empty i {width:40px; height:40px; background:url("../img/icon_add.svg") center center no-repeat; background-size:100%;}
.pop.p_compare .pc_list .pcl_empty p {color:var(--black-40); font-size:18px; font-weight:600; line-height:30px; letter-spacing:-0.18px; text-align:center;}
.pop.p_compare .pc_list .pcl_empty p span {display:block;}
.pop.p_compare .pc_btn {display:flex; justify-content:center; margin-top:20px}
.pop.p_compare .pc_btn .btn {width:330px}
.pop.p_compare .pc_btn .btn i {background-image:url("../img/icon_write.svg")}

#aside .a_compare {display:none; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; width:90px; aspect-ratio:1/1; padding-bottom:5px; border-radius:100%; background:var(--black); color:var(--white); font-size:14px; line-height:16px; font-weight:600; transition:0.2s}
#aside .a_compare:hover {transform:scale(1.1)}
#aside .a_compare i {width:28px; aspect-ratio:1/1; margin-bottom:5px; background:url("../img/icon_compare.svg") center center no-repeat; background-size:100%;}
#aside .a_compare span {display:none}
#aside .a_compare span.on {display:block}

.board .b_gallery li a .bg_thumb {justify-content:flex-start;}
.board .b_gallery li a:hover .bg_thumb {justify-content:flex-end;}




@media all and (max-width:1280px) {
	/* product */
	#contents .board.product .b_filter {width:250px;}
	#contents .board.product .b_filter > ul > li + li {margin-top:15px;}
	#contents .board.product .b_filter > ul > li > button {padding-right:20px;}
	#contents .board.product .b_filter > ul > li > button span, #contents .board.product .b_filter .flexbox > span {font-size:14px;}
	#contents .board.product .b_filter > ul > li > button i {right:-7px;}
	#contents .board.product .b_filter .flexbox {padding-right:20px;}
	#contents .board.product .b_filter > ul > li > ul > li > span {font-size:14px;}

	/* 팝업 */
	.pop.p_compare .clear_all {right:80px;}
	.pop.p_compare .pc_list {gap:30px;}
	.pop.p_compare .pc_list > li {width:calc(25% - 22.5px); padding:15px;}
	.pop.p_compare .pc_list .pcl_thumb {margin-top:10px;}
	.pop.p_compare .pc_list .pcl_text {margin-top:10px;}
	.pop.p_compare .pc_list .pcl_info {margin-top:10px;}
	.pop.p_compare .pc_list .pcl_info li {gap:5px;}
	.pop.p_compare .pc_list .pcl_info li span.cb60 {line-height:18px;}
	.pop.p_compare .pc_list .pcl_empty p {font-size:15px; line-height:24px;}
	.pop.p_compare .pc_list .pcl_empty i {width:30px; height:30px;}
}





@media all and (max-width:1024px) {
	/* product */
	#contents .board.product {flex-direction:column;}
	#contents .board.product .b_filter {display:none; width:100%; padding:20px; height:calc(100vh - 190px); overflow-y:auto}
	#contents .board.product .b_filter > ul > li + li {margin-top:10px;}
	#contents .board.product .b_filter > ul > li > button {padding-right:30px;}
	#contents .board.product .b_filter > ul > li > button i {right:0;}
	#contents .board.product .b_filter .flexbox {padding-right:30px;}
	#contents .board.product .b_filter + .btn {max-width:330px; width:100%; padding:10px 0; margin:0 auto; margin-top:15px; font-size:16px}
	#contents .board.product .b_filter .checkbox label span {padding-right:5px; line-height:30px; word-break:keep-all}
	#contents .board.product .b_filter .checkbox label i {top:4px}

	/* 팝업 */
	.pop.p_compare .pc_list {flex-wrap:wrap; gap:20px; max-height:60vh; overflow-y:auto;}
	.pop.p_compare .pc_list > li {width:calc(50% - 10px);}
}





@media all and (max-width:768px) {
	/* product */
	#contents .board.product {gap:30px; }
	#contents .board.product .b_filter > ul > li + li {margin-top:8px;}
	#contents .board.product .b_filter > ul > li > button strong {font-size:16px; line-height:25px;}
	#contents .board.product .b_filter > ul > li > button i {top:5px;}
	#contents .board.product .b_filter {height:calc(100vh - 145px)}

	.bvh_btnwrap {margin-top:30px;}

	/* 팝업 */
	.pop.p_compare .clear_all {top:30px; right:60px; width:100px; height:30px;}
	.pop.p_compare .pc_list .pcl_text strong {font-size:16px; line-height:24px;}
	.pop.p_compare .pc_list .pcl_text span {font-size:14px; line-height:20px;}
	.pop.p_compare .pc_list .pcl_info li span.bold {font-size:14px; line-height:20px;}
	.pop.p_compare .pc_list .pcl_info li span.cb60 {font-size:14px;}

	#aside .a_compare {width:70px; font-size:12px;}
	#aside .a_compare i {width:20px; margin-bottom:2px;}
}





@media all and (max-width:600px) {
	/* product */
	#contents .board.product {gap:20px;}
	#contents .board.product .b_filter {border-radius:10px;}
	#contents .board.product .b_filter > ul > li > button span {font-size:13px;}
	#contents .board.product .b_filter .flexbox > span {font-size:13px;}

	#contents .board.product .b_gallery .compare_btn {top:15px; right:12px; min-width:34px; height:34px; border-radius:44px;}
	#contents .board.product .b_gallery .compare_btn:before {right:12px; width:10px; height:2px; margin-top:-1px;}
	#contents .board.product .b_gallery .compare_btn:after {right:12px; width:10px; height:2px; margin-top:-1px;}
	#contents .board.product .b_gallery .compare_btn span {margin-right:-62px; padding:0 28px 0 13px; font-size:14px; line-height:34px;}

	/* 팝업 */
	.pop.p_compare .pc_list {gap:15px;}
	.pop.p_compare .pc_list > li {width:100%;}
	.pop.p_compare .p_body .f_btn {margin-top:15px}
}


@media all and (max-width:425px) {
	.pop.p_compare .clear_all {top:20px}
}


@media all and (max-width:360px) {
	.bvh_btnwrap {flex-direction:column; gap:10px; margin-top:20px;}
	.bvh_btnwrap li {width:100%;}

	/* 팝업 */
	.pop.p_compare .clear_all {width:80px;}
}