/*�쒕툕*/
@import url("common.css");
@import url("board.css");

.sub {width:100%; position:relative; overflow:hidden;}

.sub .sub-visual {width:100%; height:560px; position:relative; z-index:10; display:flex; align-items:center;}
.sub .sub-visual .visual-conts {width:95%; max-width:var(--max-w); margin:0 auto; padding-top:var(--gap-50); position:relative; z-index:10;}
.sub .sub-visual .visual-conts h1 {font-size:var(--font-50); font-weight:700; color:#fff;}
.sub .sub-visual .visual-conts span {display:block; font-family:var(--Poppins); font-size:var(--font-22); color:#fff;}
.sub .sub-visual .visual-bg {width:100%; height:560px; position:fixed; left:0; top:0; z-index:0;  background-position:center bottom; background-repeat:no-repeat; background-size:cover;}
.sub .sub-visual .visual-bg:after {content:""; width:100%; height:100%; background:rgba(0,0,0,0.4); position:absolute; left:0; top:0;}

@media screen and (max-width: 1280px) {
	.sub .sub-visual, .sub .sub-visual .visual-bg {height:460px;}
}

@media screen and (max-width: 768px) {
	.sub .sub-visual, .sub .sub-visual .visual-bg {height:320px;}
}

@media screen and (max-width: 480px) {
	.sub .sub-visual, .sub .sub-visual .visual-bg {height:220px;}
}


.sub .sub-snb {width:100%; background:#fff; position:relative; z-index:10; border-bottom:1px solid #ccc;}
.sub .sub-snb > .inner {width:95%; max-width:var(--max-w); margin:0 auto; overflow-y:auto;}
.sub .sub-snb > .inner::-webkit-scrollbar {height:2px;}
.sub .sub-snb > .inner::-webkit-scrollbar-thumb {border-radius:5px; background:rgba(0,0,0,0.1);}
.sub .sub-snb > .inner::-webkit-scrollbar-track {background:transparent;}
.sub .sub-snb ul.sub-snb-tab {width:100%; display:flex; align-items:center;}
.sub .sub-snb ul.sub-snb-tab li {min-width:280px; position:relative; flex-shrink:0;}
.sub .sub-snb ul.sub-snb-tab li:first-child {margin-left:auto;}
.sub .sub-snb ul.sub-snb-tab li:last-child {margin-right:auto;}
.sub .sub-snb ul.sub-snb-tab li:before {content:""; width:0; height:3px; background:var(--main-color-b); position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.4s linear;}
.sub .sub-snb ul.sub-snb-tab li a {width:100%; height:80px; display:flex; align-items:center; justify-content:center; position:relative; font-size:var(--font-20); color:#333; box-sizing:border-box; padding:10px;}
.sub .sub-snb ul.sub-snb-tab li.on a {color:var(--main-color-b); font-weight:700;}
.sub .sub-snb ul.sub-snb-tab li.on:before {width:100%;}


@media screen and (max-width: 1024px) {
	.sub .sub-snb ul.sub-snb-tab li {min-width:auto; padding:0 20px;}
	.sub .sub-snb ul.sub-snb-tab li a {height:64px;}
}

@media screen and (max-width: 480px) {
	.sub .sub-snb ul.sub-snb-tab li {padding:0 8px;}
	.sub .sub-snb ul.sub-snb-tab li a {height:50px;}
}


.sub .contents-area {width:100%; background:#fff; position:relative; z-index:10; padding:var(--gap-120) 0 var(--gap-160) 0;}
.sub .contents-area > .inner {width:95%; max-width:var(--max-w); margin:0 auto;}

.sub .contents-area .category {width:100%; margin-bottom:var(--gap-40);}
.sub .contents-area .category > .wrap {width:100%; overflow-y:auto;}
.sub .contents-area .category > .wrap::-webkit-scrollbar {height:2px;}
.sub .contents-area .category > .wrap::-webkit-scrollbar-thumb {border-radius:5px; background:rgba(0,0,0,0.1);}
.sub .contents-area .category > .wrap::-webkit-scrollbar-track {background:transparent;}
.sub .contents-area .category ul.category-box {width:100%; display:flex; gap:0 var(--gap-16); align-items:center;}
.sub .contents-area .category ul.category-box li {position:relative; flex-shrink:0;}
.sub .contents-area .category ul.category-box li:first-child {margin-left:auto;}
.sub .contents-area .category ul.category-box li:last-child {margin-right:auto;}
.sub .contents-area .category ul.category-box li a {height:56px; font-size:var(--font-18); font-weight:600; display:flex; align-items:center; justify-content:center; padding:0 var(--gap-32); position:relative; z-index:1;}
.sub .contents-area .category ul.category-box li:before {content:""; width:0; height:100%; background:#fff; border-radius:28px; position:absolute; left:50%; top:0; z-index:0; transform:translateX(-50%); transition:width 0.3s linear;}
.sub .contents-area .category ul.category-box li.on a {color:#fff;}
.sub .contents-area .category ul.category-box li.on:before {width:100%; background:var(--main-color-b);}

.sub .contents-area .contents-wrap section {width:100%; margin-top:var(--gap-160);}
.sub .contents-area .contents-wrap section:nth-child(1) {margin-top:0;}

@media screen and (max-width: 1024px) {
	.sub .contents-area .category ul.category-box li a {height:50px; border-radius:25px;}
}

@media screen and (max-width: 480px) {
	.sub .contents-area .category ul.category-box {justify-content:flex-start; gap:0 8px;}
	.sub .contents-area .category ul.category-box li a {height:42px; border-radius:21px; padding:0 18px;}
}

.sub .contents-area .page-title {width:100%; margin-bottom:var(--gap-40);}
.sub .contents-area .page-title h1 {text-align:center; font-size:var(--font-50); font-weight:700;}
.sub .contents-area .page-title h2 {text-align:center; font-size:var(--font-30); font-weight:700;}


/*怨듯넻*/
.sub .top-opt-detail-area {width:100%; border:1px solid var(--border-eb); border-radius:10px; padding:var(--gap-16); margin-bottom:var(--gap-40);}
.sub .top-opt-detail-area > .inner {width:100%; display:flex; gap:0 var(--gap-40);}
.sub .top-opt-detail-area .box-result {width:auto; display:flex; flex:0 0 auto; align-items:center; gap:0 var(--gap-32);}
.sub .top-opt-detail-area .box-result .detail-search {font-size:var(--font-18); position:relative; padding-left:28px;}
.sub .top-opt-detail-area .box-result .detail-search:before {content:""; width:20px; height:20px; background:var(--icon-filter) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.sub .top-opt-detail-area .box-result .result {font-size:var(--font-18); position:relative;}
.sub .top-opt-detail-area .box-result .result:before {content:""; width:1px; height:40%; box-sizing:border-box; border-left:1px solid #999; position:absolute; left:calc((var(--gap-32) / 2) * -1); top:50%; transform:translateY(-50%);}
.sub .top-opt-detail-area .box-result .result em {font-weight:600; color:var(--main-color-b);}
.sub .top-opt-detail-area .box-result .btn-filter {display:none;}
.sub .top-opt-detail-area .box-option {display:flex; flex:1 1 auto; gap:0 var(--gap-32); align-items:center;}
.sub .top-opt-detail-area .box-option .option-area {width:calc(100% - (83px + var(--gap-32))); display:flex; flex:0 0 auto; gap:var(--gap-8); flex-wrap:wrap;}
.sub .top-opt-detail-area .box-option .option-area span {min-height:35px; display:flex; align-items:center; gap:0 10px; padding:0 10px; background:#F8F8F8; color:#666; font-size:var(--font-16); border-radius:2px;}
.sub .top-opt-detail-area .box-option .option-area span .option-close {width:10px; height:10px; font-size:0; display:block; background:var(--icon-close-g);}
.sub .top-opt-detail-area .box-option .btn-refresh {width:83px; height:35px; box-sizing:border-box; background:#fff; border:1px solid var(--main-color-b); border-radius:2px; font-size:var(--font-16); color:var(--main-color-b); font-weight:600; position:relative; text-align:left; padding:0 10px;}
.sub .top-opt-detail-area .box-option .btn-refresh:after {content:""; width:12px; height:12px; background:var(--icon-refresh) center no-repeat; background-size:cover; position:absolute; right:10px; top:50%; transform:translateY(-50%);}

@media screen and (max-width: 1024px) {
	.sub .top-opt-detail-area .box-result {width:calc(100% - (83px + var(--gap-40)));}
	.sub .top-opt-detail-area .box-result .detail-search {display:none;}
	.sub .top-opt-detail-area .box-result .btn-filter {display:block;}
	.sub .top-opt-detail-area .box-option .option-area {display:none;}
}

@media screen and (max-width: 768px) {	
	.sub .top-opt-detail-area .box-result .detail-search {padding-left:25px;}
	.sub .top-opt-detail-area .box-result .detail-search:before {width:18px; height:18px;}
}

@media screen and (max-width: 480px) {
	.sub .top-opt-detail-area .box-result {width:calc(100% - (72px + var(--gap-40)));}
	.sub .top-opt-detail-area .box-result .detail-search {padding-left:18px;}f
	.sub .top-opt-detail-area .box-result .detail-search:before {width:15px; height:15px;}
	.sub .top-opt-detail-area .box-option .btn-refresh {width:72px; height:32px;}
	.sub .top-opt-detail-area .box-option .btn-refresh:after {width:10px; height:10px;}
}


.sub .com-conts-wrap {width:100%; display:flex; gap:0 var(--gap-40);}
.sub .com-conts-wrap .lnb-area {width:260px;}
.sub .com-conts-wrap .lnb-area .prd-filter-area {width:100%; margin-bottom:var(--gap-160);}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box {width:100%; border:solid var(--border-eb); border-width:0 0 1px 0; padding:0 var(--gap-16);}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-tlt {width:100%;}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-tlt a {font-size:var(--font-18); font-weight:600; position:relative; min-height:56px; padding:10px 0; box-sizing:border-box; display:flex; align-items:center;}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-tlt a.add-opt::before,
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-tlt a.add-opt:after {content:""; width:2px; height:14px; background:#000; position:absolute; top:50%; right:5px; transition:all .2s ease;}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-tlt a.add-opt:before {transform:translateY(-50%) rotate(90deg);}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-tlt a.add-opt:after {transform:translateY(-50%) rotate(-90deg);}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-opt-list {padding-bottom:var(--gap-16);}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-opt-list ul li {width:100%; margin-top:var(--gap-16);}
.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box.hide .filter-tlt a.add-opt:before {transform:translateY(-50%);}
.sub .com-conts-wrap .lnb-area .prd-filter-area .button-box {margin-top:var(--gap-24);}
.sub .com-conts-wrap .lnb-area .mo-filter-title {display:none; border-bottom:1px solid #ccc;}
.sub .com-conts-wrap .lnb-area .mo-filter-title .box-title {width:100%; display:flex; align-items:center; height:60px; padding:0 20px;}
.sub .com-conts-wrap .lnb-area .mo-filter-title .box-title .title {width:calc(100% - 24px); font-size:18px; font-weight:700; padding-left:28px; position:relative;}
.sub .com-conts-wrap .lnb-area .mo-filter-title .box-title .title:before {content:""; width:20px; height:20px; background:var(--icon-filter) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.sub .com-conts-wrap .lnb-area .mo-filter-title .box-title .btn-filter-close {width:24px; height:24px; font-size:0; background:var(--icon-close) center no-repeat; background-size:cover;}

@media screen and (max-width: 1280px) {
	.sub .com-conts-wrap .lnb-area {width:220px;}
}

@media screen and (max-width: 1024px) {
	.sub .com-conts-wrap .lnb-area {display:none; position:fixed; right:0; top:0; width:80%; background:#fff; height:100vh; z-index:1001; overflow:hidden;}
	.sub .com-conts-wrap .lnb-area .prd-opt-area-inner {width:100%; height:100%; overflow-y:auto; padding-bottom:60px;}
	.sub .com-conts-wrap .lnb-area .prd-opt-area-inner::-webkit-scrollbar {width:2px;}
	.sub .com-conts-wrap .lnb-area .prd-opt-area-inner::-webkit-scrollbar-thumb {border-radius:5px; background:rgba(0,0,0,0.1);}
	.sub .com-conts-wrap .lnb-area .prd-opt-area-inner::-webkit-scrollbar-track {background:transparent;}
	.sub .com-conts-wrap .lnb-area .mo-filter-title {display:block;}
	.sub .com-conts-wrap .lnb-area .prd-filter-area {padding:0 20px;}
	.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box {padding:0;}
	.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-tlt a {min-height:50px;}	
	.sub .com-conts-wrap .lnb-area.active {display:block;}
}

@media screen and (max-width: 480px) {
	.sub .com-conts-wrap .lnb-area {width:85%;}
	.sub .com-conts-wrap .lnb-area .prd-filter-area .filter-box .filter-tlt a {min-height:42px;}
}


.sub .com-conts-wrap .lnb-area .brochure-area {width:100%;}
.sub .com-conts-wrap .lnb-area .brochure-area p {width:100%; height:56px; display:flex; align-items:center; padding:0 var(--gap-16); font-size:var(--font-18); font-weight:600;}
.sub .com-conts-wrap .lnb-area .brochure-area ul.brochure-list {width:100%; border-top:1px solid var(--border-eb);}
.sub .com-conts-wrap .lnb-area .brochure-area ul.brochure-list li.item {width:100%; border-bottom:1px solid var(--border-eb); padding:var(--gap-24) 0;}
.sub .com-conts-wrap .lnb-area .brochure-area ul.brochure-list li.item .img-box {width:100%; max-width:130px; margin:0 auto;}
.sub .com-conts-wrap .lnb-area .brochure-area ul.brochure-list li.item .img-box span {display:block; width:100%; height:0; padding-bottom:calc(180 / 130 * 100%); position:relative;}
.sub .com-conts-wrap .lnb-area .brochure-area ul.brochure-list li.item .img-box span img {display:block; max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.sub .com-conts-wrap .lnb-area .brochure-area ul.brochure-list li.item em {display:block; margin-top:var(--gap-16); text-align:center;}
.sub .com-conts-wrap .lnb-area .brochure-area ul.brochure-list li.item em a {font-size:var(--font-16); color:#666;}

@media screen and (max-width: 1024px) {
	.sub .com-conts-wrap .lnb-area .brochure-area {padding:0 20px 50px 20px;}
	.sub .com-conts-wrap .lnb-area .brochure-area ul.brochure-list li.item {border:none;}
	.sub .com-conts-wrap .lnb-area .brochure-area .slick-dots {width:100%; display:flex; margin-top:var(--gap-24); align-items:center; justify-content:center; gap:0 var(--gap-16); position:Relative;}
	.sub .com-conts-wrap .lnb-area .brochure-area .slick-dots li button {width:8px; height:8px; border-radius:50%; background:#ccc; font-size:0;}
	.sub .com-conts-wrap .lnb-area .brochure-area .slick-dots li.slick-active button {background:var(--main-color);}
}


.sub .com-conts-wrap .lnb-conts-area {width:calc(100% - 300px);}

@media screen and (max-width: 1280px) {
	.sub .com-conts-wrap .lnb-conts-area {width:calc(100% - 260px);}
}

@media screen and (max-width: 1024px) {
	.sub .com-conts-wrap .lnb-conts-area {width:100%;}
}

.sub .prd-data-wrap {width:100%; background:#fff; border-top:1px solid #000;}
.sub .prd-data-wrap .data-box {width:100%;}
.sub .prd-data-wrap .data-box dt {width:100%; height:80px; padding:0 var(--gap-40); display:flex; align-items:center; font-size:var(--font-20); font-weight:700; position:relative; border-bottom:1px solid var(--border-eb);}
.sub .prd-data-wrap .data-box dt:before,
.sub .prd-data-wrap .data-box dt:after {right:calc(var(--gap-40) + 5px);}
.sub .prd-data-wrap .data-box dd {width:100%; padding:var(--gap-40); background:#F8F8F8;}
.sub .prd-data-wrap .data-box dd .data-list li {width:100%; margin-top:var(--gap-16);}
.sub .prd-data-wrap .data-box dd .data-list li:nth-child(1) {margin-top:0;}
.sub .prd-data-wrap .data-box dd .data-list li a {display:inline-block; position:relative; padding-left:26px; font-size:var(--font-18);}
.sub .prd-data-wrap .data-box dd .data-list li a:before {content:""; width:18px; height:18px; background-position:center; background-repeat:no-repeat; background-size:cover; position:absolute; left:0; top:4px;}
.sub .prd-data-wrap .data-box dd .data-list li a.file:before {background-image:var(--icon-file);}
.sub .prd-data-wrap .data-box dd .data-list li a.download:before {background-image:var(--icon-download);}
.sub .prd-data-wrap .data-box dd .data-list li a.link {text-decoration:underline; padding-left:0; color:var(--main-color-b);}
.sub .prd-data-wrap .data-box dd .data-list li a.link:after {content:" >";}
.sub .prd-data-wrap .data-box dd .data-list li a.link:before {display:none;}

@media screen and (max-width: 768px) {
	.sub .prd-data-wrap .data-box dt {height:72px;}
	.sub .prd-data-wrap .data-box dd .data-list li a:before {top:2px;}
}

@media screen and (max-width: 480px) {
	.sub .prd-data-wrap .data-box dt {height:60px;}
	.sub .prd-data-wrap .data-box dd .data-list li a {padding-left:18px;}
	.sub .prd-data-wrap .data-box dd .data-list li a:before {width:15px; height:15px; top:2px;}
}

.sub .prd-wrap .prd-list-wrap .prd-list-tb .btn-compare-add {width:100px; height:40px; border-radius:20px; background:#EBEBEB; box-sizing:border-box; padding:0 10px; font-size:var(--font-16); position:relative; display:block; line-height:40px; margin-left:auto;}
.sub .prd-wrap .prd-list-wrap .prd-list-tb .btn-compare-add:after {content:""; width:20px; height:20px; border-radius:50%; background:var(--icon-plus) center no-repeat; background-size:10px auto; background-color:#000; position:absolute; right:10px; top:50%; transform:translateY(-50%);}
.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-img {max-width:312px;}
.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-img span {padding-bottom:calc(220 / 312 * 100%);}
.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-name {text-align:center; font-family:var(--Poppins); width:100%; height:66px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;}
.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail {width:100%; height:220px; overflow:hidden;}
.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail span {display:block; width:100%; font-size:var(--font-18); text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

@media screen and (max-width: 1280px) {
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail {height:156px;}
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail span {font-size:13px;}
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .button.basic.long {min-width:auto; width:100%;}
}

@media screen and (max-width: 1024px) {
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-name {height:60px;}
}

@media screen and (max-width: 768px) {
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-name {height:54px;}
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail {height:180px;}
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail span {font-size:var(--font-18);}
}

@media screen and (max-width: 600px) {
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail {height:145px;}
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail span {font-size:12px;}
}

@media screen and (max-width: 480px) {
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-name {height:auto; display:block;}
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail {height:auto;}
	.sub .prd-wrap .prd-list-wrap .prd-list-tb .prd-box .prd-detail span {font-size:var(--font-18);}
}

.sub .btn-purchase {cursor:pointer;}
.sub .btn-purchase:hover,
.sub .btn-purchase.on {border-color:#ccc;}
.sub .btn-purchase:hover:before {opacity:1 !important;}
.sub .btn-purchase .shop-wrap {width:100%; background:#fff; position:absolute; left:0; top:0; z-index:10; display:none;}
.sub .btn-purchase .shop-wrap ul {width:100%; height:56px;  display:flex; align-items:center; justify-content:center; gap:0 var(--gap-16);}
.sub .btn-purchase .shop-wrap ul li {width:calc((100% - (var(--gap-16) * 2)) / 3); max-width:40px;}
.sub .btn-purchase .shop-wrap ul li a {display:block; width:100%; height:0; padding-bottom:100%; font-size:0; position:relative; background-size:90% auto; background-position:center; background-repeat:no-repeat;}
.sub .btn-purchase .shop-wrap ul li a.naver {background-image:url(/img/com/logo_naver.svg);}
.sub .btn-purchase .shop-wrap ul li a.street11 {background-image:url(/img/com/logo_kakao.jpg); border-radius: 10px;}
.sub .btn-purchase .shop-wrap ul li a.coupang {background-image:url(/img/com/logo_coupang.svg);}
.sub .btn-purchase:hover .shop-wrap,
.sub .btn-purchase.on .shop-wrap {display:block;}

.sub .btn-purchase.purchase-view .shop-wrap ul {height:70px; gap:0 var(--gap-40);}
.sub .btn-purchase.purchase-view .shop-wrap ul li {width:calc((100% - (var(--gap-40) * 2)) / 3); max-width:56px;}

@media screen and (max-width: 1024px) {
	.sub .btn-purchase .shop-wrap {padding:0 20px;}
	.sub .btn-purchase .shop-wrap ul {height:50px;}
	.sub .btn-purchase .shop-wrap ul li {max-width:32px;}

	.sub .btn-purchase.purchase-view .shop-wrap ul {height:68px;}
	.sub .btn-purchase.purchase-view .shop-wrap ul li {max-width:50px;}
}

@media screen and (max-width: 768px) {
	.sub .btn-purchase.purchase-view .shop-wrap ul {height:60px;}
	.sub .btn-purchase.purchase-view .shop-wrap ul li {max-width:45px;}
}

@media screen and (max-width: 480px) {
	.sub .btn-purchase .shop-wrap ul {height:42px; gap:0 30px;}
	.sub .btn-purchase .shop-wrap ul li {width:calc((100% - 60px) / 3); max-width:30px;}

	.sub .btn-purchase.purchase-view .shop-wrap ul {height:52px;}
	.sub .btn-purchase.purchase-view .shop-wrap ul li {max-width:38px;}
}



/*�쒗뭹�뚭컻*/
.product .sub-visual .visual-bg {background-image:url(/img/conts/sub_visual_product.jpg);}

.prd-compare-area {width:100%; position:fixed; left:0; bottom:0; background:#fff; padding:var(--gap-40) 0; z-index:100; box-shadow:0 -10px 20px rgba(0,0,0,0.1); display:none; transform:translateY(0); transition:transform .4s linear;}
.prd-compare-area .toggle-btn-area {width:80px; height:40px; background:#fff; border-radius:20px 20px 0 0; position:absolute; left:50%; top:-40px; box-shadow:0 -10px 20px rgba(0,0,0,0.1); transform:translateX(-50%);}
.prd-compare-area .toggle-btn-area a {display:block; width:100%; height:100%; border-radius:20px 20px 0 0; font-size:0; position:relative;}
.prd-compare-area .toggle-btn-area a:before {content:""; width:100%; height:100%; background:var(--arrow-top-b) center no-repeat; position:absolute; left:0; top:0; transform:scaleY(-1); transition:transform .2s ease;}
.prd-compare-area .compare-inner {width:95%; max-width:var(--max-w); margin:0 auto;}
.prd-compare-area .compare-btn-area {width:100%; margin-bottom:20px;}
.prd-compare-area .compare-btn-area .refresh {color:var(--main-color-b);}
.prd-compare-area .compare-btn-area .refresh:before {display:none;}
.prd-compare-area .compare-btn-area .refresh span {position:relative; padding-right:24px;}
.prd-compare-area .compare-btn-area .refresh span:after {content:""; width:16px; height:16px; background:var(--icon-refresh-s) center no-repeat; background-size:auto 14px; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.prd-compare-area .compare-btn-area .refresh:hover {color:#fff;}
.prd-compare-area .compare-prd-list {width:100%; display:flex; align-items:center; gap:20px;}
.prd-compare-area .compare-prd-list .compare-prd-box {width:calc((100% - 60px) / 4); border:1px solid #ccc; background:#fff; border-radius:10px; position:relative;}
.prd-compare-area .compare-prd-list .compare-prd-box .btn-delete {width:12px; height:12px; font-size:0; background:var(--icon-close-g) center no-repeat; background-size:cover; position:absolute; right:var(--gap-16); top:var(--gap-16);}
.prd-compare-area .compare-prd-list .compare-prd-box .box-inner {width:100%; height:130px; display:flex; align-items:center; padding:var(--gap-16); gap:0 var(--gap-16);}
.prd-compare-area .compare-prd-list .compare-prd-box .prd-img {width:38%;}
.prd-compare-area .compare-prd-list .compare-prd-box .prd-img span {display:block; width:100%; height:0; padding-bottom:calc(85 / 120 * 100%); position:relative;}
.prd-compare-area .compare-prd-list .compare-prd-box .prd-img span img {max-width:100%; max-height:100%; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.prd-compare-area .compare-prd-list .compare-prd-box .prd-name {width:calc(62% - var(--gap-16)); font-size:var(--font-16); font-family:var(--Poppins); font-weight:700;}
.prd-compare-area .compare-prd-list .compare-prd-box .default-txt {justify-content:center;}
.prd-compare-area .compare-prd-list .compare-prd-box .default-txt span.plus {width:40px; height:40px; border-radius:50%; border:1px solid #000; background:var(--icon-plus-b) center no-repeat; display:block;}
.prd-compare-area .compare-prd-list .compare-prd-box .default-txt span.txt {font-size:var(--font-16); max-width:calc(100% - (40px + var(--gap-16)));}
.prd-compare-area .compare-prd-list .compare-prd-box.empty {border-style:dashed;}
.prd-compare-area .toggle-btn-area a.close:before {transform:scaleY(1);}

.prd-compare-area.active {display:block;}
.prd-compare-area.close {transform:translateY(100%);}
.prd-compare-area.hide {transform:translateY(calc(100% + 40px)); transition-duration:0;}

@media screen and (max-width: 1024px) {
	.prd-compare-area .compare-prd-list {gap:10px;}
	.prd-compare-area .compare-prd-list .compare-prd-box {width:calc((100% - 30px) / 4);}
	.prd-compare-area .compare-prd-list .compare-prd-box .box-inner {height:110px;}
	.prd-compare-area .compare-prd-list .compare-prd-box .prd-name {font-size:12px;}
	.prd-compare-area .compare-prd-list .compare-prd-box .default-txt span.plus {width:30px; height:30px;}
	.prd-compare-area .compare-prd-list .compare-prd-box .default-txt span.txt {font-size:12px; max-width:calc(100% - (30px + var(--gap-16)));}
}

@media screen and (max-width: 768px) {
	.prd-compare-area .compare-btn-area .refresh span {padding-right:20px;}
	.prd-compare-area .compare-btn-area .refresh span:after {background-size:auto 12px;}
	.prd-compare-area .compare-prd-list {flex-wrap:wrap; gap:20px;}
	.prd-compare-area .compare-prd-list .compare-prd-box {width:calc((100% - 20px) / 2);}
	.prd-compare-area .compare-prd-list .compare-prd-box .box-inner {height:120px;}
	.prd-compare-area .compare-prd-list .compare-prd-box .prd-name {font-size:13px;}
	.prd-compare-area .compare-prd-list .compare-prd-box .default-txt span.txt {font-size:13px;}
}

@media screen and (max-width: 480px) {
	.prd-compare-area .compare-btn-area .refresh span {padding-right:18px;}
	.prd-compare-area .compare-btn-area .refresh span:after {background-size:auto 10px;}
	.prd-compare-area .compare-prd-list {gap:10px;}
	.prd-compare-area .compare-prd-list .compare-prd-box {width:calc((100% - 10px) / 2);}
	.prd-compare-area .compare-prd-list .compare-prd-box .box-inner {height:100px;}
	.prd-compare-area .compare-prd-list .compare-prd-box .prd-name {font-size:12px;}
	.prd-compare-area .compare-prd-list .compare-prd-box .default-txt span.plus {width:24px; height:24px;}
	.prd-compare-area .compare-prd-list .compare-prd-box .default-txt span.txt {font-size:12px; max-width:calc(100% - (24px + var(--gap-16)));}
}

.compare-layer-popup {width:90%; max-width:1320px; height:80vh; max-height:800px; background:#fff; border-radius:20px; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1003; padding:var(--gap-40); display:none;}
.compare-layer-popup > .inner {height:100%;}
.compare-layer-popup .popup-title {width:100%; position:relative; margin-bottom:var(--gap-40);}
.compare-layer-popup .popup-title .title {width:100%; text-align:center; font-size:var(--font-22); font-weight:700; height:40px; display:flex; align-items:center; justify-content:center;}
.compare-layer-popup .popup-title .btn-close-comparepop {width:20px; height:20px; font-size:0; background:var(--icon-close) center no-repeat; background-size:24px auto; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.compare-layer-popup .popup-title .toggle-bar {position:absolute; right:60px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:0 var(--gap-8);}
.compare-layer-popup .popup-title .toggle-bar input[type="checkbox"] {width:0; height:0; opacity:0; position:absolute; left:0; top:0;}
.compare-layer-popup .popup-title .toggle-bar input[type="checkbox"] + label {width:36px; height:20px; border-radius:10px; border:1px solid #ccc; background:#999; position:relative; cursor:pointer;}
.compare-layer-popup .popup-title .toggle-bar input[type="checkbox"] + label:before {content:""; width:16px; height:16px; border-radius:50%; background:#fff; position:absolute; left:2px; top:50%; transform:translateY(-50%); transition:left .2s linear;}
.compare-layer-popup .popup-title .toggle-bar input[type="checkbox"]:checked + label {background:var(--main-color); border-color:var(--main-color);}
.compare-layer-popup .popup-title .toggle-bar input[type="checkbox"]:checked + label:before {left:19px;}
.compare-layer-popup .popup-title .toggle-bar span {font-size:var(--font-16); font-weight:600;}
.compare-layer-popup .popup-conts {width:100%; height:calc(100% - (40px + var(--gap-40))); overflow:auto;}
.compare-layer-popup .popup-conts .conts-inner {width:100%; height:100%;}
.compare-layer-popup .popup-conts .compare-prd-list {width:100%; display:flex; gap:0 30px; margin-bottom:var(--gap-40);}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box {width:calc((100% - 90px) / 4); background:#fff; border:1px solid #ccc; border-radius:10px;}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box .box-inner {width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:0 var(--gap-16); padding:10px;}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box .prd-img {width:100%;}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box .prd-img span {display:block; width:100%; height:0; padding-bottom:calc(200 / 280 * 100%); position:relative;}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box .prd-img span img {display:block; max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt span.plus {width:40px; height:40px; border-radius:50%; border:1px solid #000; background:var(--icon-plus-b) center no-repeat; display:block;}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt span.txt {font-size:var(--font-16); max-width:calc(100% - (40px + var(--gap-16)));}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box > a {display:block; width:100%; height:100%;}
.compare-layer-popup .popup-conts .compare-prd-list .compare-box.empty {border-style:dashed;}
.compare-layer-popup .popup-conts .compare-detail-area {width:100%; border-top:1px solid #000;}
.compare-layer-popup .popup-conts .compare-detail-area dl dt {width:100%; cursor:pointer; padding:20px var(--gap-24); background:#fff; position:relative; border-bottom:1px solid var(--border-eb); font-size:var(--font-18); font-weight:600; color:var(--main-color-b);}
.compare-layer-popup .popup-conts .compare-detail-area dl dt:before,
.compare-layer-popup .popup-conts .compare-detail-area dl dt:after {cright:calc(var(--gap-24) + 5px);}
.compare-layer-popup .popup-conts .compare-detail-area dl dd {width:100%; padding:var(--gap-32) 0; background:#F8F8F8;}
.compare-layer-popup .popup-conts .compare-detail-area dl dd .detail-box {width:100%; display:flex; align-items:center; gap:0 30px;}
.compare-layer-popup .popup-conts .compare-detail-area dl dd .detail-box span {display:block; width:calc((100% - 90px) / 4); box-sizing:border-box; padding:0 10px; font-size:var(--font-18); font-weight:700; text-align:center;}
.compare-layer-popup.active {display:block;}

@media screen and (max-width: 1280px) {
	.compare-layer-popup .popup-conts .compare-prd-list {gap:0 15px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box {width:calc((100% - 45px) / 4);}
	.compare-layer-popup .popup-conts .compare-detail-area dl dd .detail-box {gap:0 15px;}
	.compare-layer-popup .popup-conts .compare-detail-area dl dd .detail-box span {width:calc((100% - 45px) / 4); font-size:14px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt span.plus {width:30px; height:30px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt span.txt {font-size:12px; max-width:calc(100% - (30px + var(--gap-16)));}
}

@media screen and (max-width: 900px) {
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box {width:180px; flex-shrink:0; flex-basis:180px;}
	.compare-layer-popup .popup-conts .compare-detail-area {width:fit-content;}
	.compare-layer-popup .popup-conts .compare-detail-area dl dd .detail-box span {width:180px; flex-shrink:0; flex-basis:180px;}
}

@media screen and (max-width: 768px) {
	.compare-layer-popup .popup-title .btn-close-comparepop {top:8px; transform:none;}
	.compare-layer-popup .popup-title .toggle-bar {position:relative; right:auto; top:auto; transform:none; justify-content:flex-end; margin-top:10px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box {width:140px; flex-basis:140px;}
	.compare-layer-popup .popup-conts .compare-detail-area dl dt {padding:15px var(--gap-24);}
	.compare-layer-popup .popup-conts .compare-detail-area dl dd .detail-box span {width:140px; flex-basis:140px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt span.plus {width:24px; height:24px; background-size:auto 10px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt span.txt {max-width:calc(100% - (24px + var(--gap-16)));}
}

@media screen and (max-width: 480px) {
	.compare-layer-popup {padding:20px;}
	.compare-layer-popup .popup-conts {height:calc(100% - 92px);}
	.compare-layer-popup .popup-conts .compare-prd-list {gap:0 10px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box {width:120px; flex-basis:120px;}
	.compare-layer-popup .popup-conts .compare-detail-area dl dt {padding:12px var(--gap-24);}
	.compare-layer-popup .popup-conts .compare-detail-area dl dd .detail-box {gap:0 10px;}
	.compare-layer-popup .popup-conts .compare-detail-area dl dd .detail-box span {width:120px; flex-basis:120px; font-size:12px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt {gap:0 4px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt span.plus {width:16px; height:16px; background-size:auto 7px;}
	.compare-layer-popup .popup-conts .compare-prd-list .compare-box .default-txt span.txt {max-width:calc(100% - 20px); font-size:9px;}
}

.product .prd-view-conts-wrap {padding-bottom:var(--gap-120); border-bottom:1px solid #ccc;}
.product .prd-view-conts-wrap .prd-sec-tlt {font-size:var(--font-30); font-weight:700; margin-bottom:var(--gap-40);}

.product .prd-view-top .prd-view-img-wrap {width:100%; display:flex; gap:var(--gap-80);}
.product .prd-view-top .prd-view-img-wrap > * {display:block; width:calc((100% - var(--gap-80)) / 2);}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list {width:100%;}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .img-wrap .img-box {width:100%; max-width:640px; margin:0 auto; background:#fff; box-sizing:border-box; padding:0 var(--gap-24);}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .img-wrap .img-box span {display:block; width:100%; height:0; padding-bottom:calc(560 / 640 * 100%); position:relative; overflow:hidden;}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .img-wrap .img-box span img {display:block; max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-slide {line-height:0;}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-arrow {width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,0.3); font-size:0; position:absolute; top:50%; transform:translateY(-50%); z-index:10; visibility:hidden; opacity:0; transition:opacity .2s ease, visibility .2s ease;}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-arrow:before {content:""; width:100%; height:100%; border-radius:50%; background:var(--arrow-w) center no-repeat; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-prev {left:calc(24px + var(--gap-24));}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-next {right:calc(24px + var(--gap-24));}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-next:before {transform:translate(-50%,-50%) scaleX(-1);}
.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list:hover .slick-arrow {visibility:visible; opacity:1;}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail {width:100%; margin-top:var(--gap-60);}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail > inner {width:100%; overflow-x:auto;}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list {width:100%; display:flex; align-items:center; gap:0 var(--gap-16);}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box {width:100%; max-width:88px; cursor:pointer; position:relative; border-radius:4px; overflow:hidden; flex-shrink:0; flex-basis:88px;}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box:first-child {margin-left:auto;}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box:last-child {margin-right:auto;}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box:before {content:""; width:100%; height:100%; box-sizing:border-box; border-radius:4px; border:1px solid var(--border-eb); position:absolute; left:0; top:0; z-index:2;}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box span {display:block; width:100%; height:0; padding-bottom:100%; position:relative;}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box span img {display:block; max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0.5; transition:opacity .2s ease-in-out; z-index:1;}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box:hover:before,
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box.active:before {border-color:var(--main-color);}
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box:hover span img,
.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box.active span img {opacity:1;}

@media screen and (max-width: 1024px) {
	.product .prd-view-top .prd-view-img-wrap {flex-wrap:wrap;}
	.product .prd-view-top .prd-view-img-wrap > * {width:100%;}
}

@media screen and (max-width: 768px) {
	.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box {max-width:68px; flex-basis:68px;}
	.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-arrow {width:40px; height:40px;}
	.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-prev {left:calc(20px + var(--gap-24));}
	.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-next {right:calc(20px + var(--gap-24));}
}

@media screen and (max-width: 480px) {
	.product .prd-view-top .prd-view-img-wrap .prd-img-thumnail .prd-thum-list .img-box {max-width:48px; flex-basis:48px;}
	.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-arrow {width:30px; height:30px;}
	.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-arrow:before {background-size:auto 10px;}
	.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-prev {left:calc(15px + var(--gap-24));}
	.product .prd-view-top .prd-view-img-wrap .prd-slide-wrap .prd-img-list .slick-next {right:calc(15px + var(--gap-24));}
}


.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-head {width:100%; padding-bottom:var(--gap-24); margin-bottom:var(--gap-24); border-bottom:1px solid #ccc;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-head h2 {font-family:var(--Poppins); font-size:var(--font-30); font-weight:700;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-head span {display:block; font-weight:var(--font-18); font-weight:600; color:#666;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts {width:100%; height:300px; overflow-y:auto;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts > .inner {width:100%; height:100%;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts ul li {font-size:var(--font-18); margin-top:10px; position:relative; width:100%; box-sizing:border-box; padding-left:calc(var(--gap-8) + 4px);}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts ul li:nth-child(1) {margin-top:0;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts ul li:before {content:""; width:4px; height:4px; border-radius:50%; background:var(--main-color); position:absolute; left:0; top:12px;}
.product .prd-view-top .prd-view-img-wrap .prd-info .button-area {width:100%; text-align:center; margin-top:var(--gap-60);}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area {width:100%; margin-top:var(--gap-40);}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area > .inner {width:100%; overflow-x:auto;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list {width:100%; display:flex; align-items:center; gap:var(--gap-16);}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box {width:100%; max-width:204px; flex-shrink:0; flex-basis:204px; border-radius:10px; border:1px solid var(--border-eb); overflow:hidden;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box:first-child {margin-left:auto;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box:last-child {margin-right:auto;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box a {display:block; width:100%; height:100%; position:relative;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box span {display:block; width:100%; height:0; padding-bottom:calc(115 / 204 * 100%); position:relative;}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box span:after {content:""; width:32px; height:32px; border-radius:50%; background:var(--icon-play) left 13px center no-repeat; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box span img {display:block; max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

@media screen and (max-width: 1024px) {
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-head {text-align:center;}
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts ul li:before {top:9px;}
}

@media screen and (max-width: 768px) {
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts {height:240px;}
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts ul li { padding-left:calc(var(--gap-8) + 3px);}
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts ul li:before {width:3px; height:3px;}
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box {max-width:180px; flex-basis:180px;}
}

@media screen and (max-width: 480px) {
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts {height:180px;}
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts ul li { padding-left:calc(var(--gap-8) + 2px);}
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-info-conts ul li:before {top:8px;}
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box {max-width:120px; flex-basis:120px;}
	.product .prd-view-top .prd-view-img-wrap .prd-info .prd-video-area .prd-video-list .video-box span:after {width:26px; height:26px; background-position:10px center; background-size:auto 10px;}
}


.product .prd-view-conts .prd-conts-wrap {width:100%; border-top:2px solid #000;}
.product .prd-view-conts .prd-conts-wrap .conts-box {width:100%; padding-top:var(--gap-80); font-size:var(--font-20);}

.product .prd-view-detail .prd-detail-wrap .prd-detail-box {width:100%; display:flex; gap:0 var(--gap-80); margin-top:var(--gap-80);}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box:nth-child(1) {margin-top:0;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-title {width:22%; font-size:var(--font-22); font-weight:700; color:var(--main-color-b);}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts {width:calc(78% - var(--gap-80));}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .conts-box {width:100%; font-size:var(--font-18);}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .img-box {width:100%; margin-top:var(--gap-40); box-sizing:border-box; background:#fff; border:1px solid var(--border-eb); padding:var(--gap-24);}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .img-box img {display:block; max-width:100%; margin:0 auto;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul {width:100%; border-top:1px solid var(--main-color-b); background:#fff;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li {width:100%; display:flex; align-items:center; position:relative; border-bottom:1px solid #ccc; box-sizing:border-box;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li:before {content:""; width:1px; height:100%; box-sizing:border-box; border:solid #ccc; border-width:0 0 0 1px; position:absolute; left:20%; top:0;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .th,
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .td {padding:var(--gap-16) var(--gap-24); font-size:var(--font-18); box-sizing:border-box;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .th {font-weight:600;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .tlt {width:20%;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .conts {width:80%;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .notice-box {width:100%; padding:var(--gap-16) var(--gap-24); font-size:var(--font-18); color:#999;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li.head {background:#F2F4F8;}
.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li.wid:before {display:none;}

@media screen and (max-width: 768px) {
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box {flex-wrap:wrap; gap:var(--gap-24) 0;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-title {width:100%;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts {width:100%;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li {flex-wrap:wrap;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li:before {display:none;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .th,
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .td {width:100%; text-align:center;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .th.tlt {padding-bottom:10px;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .th.conts {padding-top:0;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li .td.tlt {border-bottom:1px solid #ccc; background:#f8f8f8;}
	.product .prd-view-detail .prd-detail-wrap .prd-detail-box .detail-conts .detail-tb ul li.head:before {width:50px; height:1px; border-width:1px 0 0 0; left:50%; top:50%; transform:translate(-50%,-50%); display:block;}
}


.product-view .contents-area .button-box {margin-top:var(--gap-60);}


/*�ㅼ튂�щ�*/
.case .sub-visual .visual-bg {background-image:url(/img/conts/sub_visual_case.jpg);}
.case .case-view-wrap .button-box {margin-top:var(--gap-60);}


/*怨좉컼�쇳꽣*/
.customer .sub-visual .visual-bg {background-image:url(/img/conts/sub_visual_customer.jpg);}
.customer .inquiry-wrap .form-tb .form-tr .form-box .input-box.prd-name-box input[type="text"]:first-child {width:calc(55% - var(--gap-8));}
.customer .inquiry-wrap .form-tb .form-tr .form-box .input-box.prd-name-box input[type="text"]:last-child {width:45%;}
.customer .form-box .info-txt {font-size: var(--font-16); color: #666; display: block; padding: 4px 12px 0;}


.customer .data-view-wrap .prd-top-area {width:100%; display:flex; gap:var(--gap-80);}
.customer .data-view-wrap .prd-top-area > * {display:block; position:relative;}
.customer .data-view-wrap .prd-top-area .prd-img-wrap {width:44%;}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list {width:100%;}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .img-wrap .img-box {width:100%; max-width:640px; margin:0 auto; background:#fff; box-sizing:border-box; padding:0 var(--gap-24);}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .img-wrap .img-box span {display:block; width:100%; height:0; padding-bottom:calc(560 / 640 * 100%); position:relative; overflow:hidden;}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .img-wrap .img-box span img {display:block; max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-slide {line-height:0;}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-arrow {width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,0.3); font-size:0; position:absolute; top:50%; transform:translateY(-50%); z-index:10; visibility:hidden; opacity:0; transition:opacity .2s ease, visibility .2s ease;}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-arrow:before {content:""; width:100%; height:100%; border-radius:50%; background:var(--arrow-w) center no-repeat; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-prev {left:calc(24px + var(--gap-24));}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-next {right:calc(24px + var(--gap-24));}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-next:before {transform:translate(-50%,-50%) scaleX(-1);}
.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list:hover .slick-arrow {visibility:visible; opacity:1;}

@media screen and (max-width: 1024px) {
	.customer .data-view-wrap .prd-top-area {flex-wrap:wrap;}
	.customer .data-view-wrap .prd-top-area .prd-img-wrap {width:100%;}
}

@media screen and (max-width: 768px) {
	.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-arrow {width:40px; height:40px;}
	.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-prev {left:calc(20px + var(--gap-24));}
	.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-next {right:calc(20px + var(--gap-24));}
}

@media screen and (max-width: 480px) {
	.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-arrow {width:30px; height:30px;}
	.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-arrow:before {background-size:auto 10px;}
	.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-prev {left:calc(15px + var(--gap-24));}
	.customer .data-view-wrap .prd-top-area .prd-img-wrap .prd-img-list .slick-next {right:calc(15px + var(--gap-24));}
}


.customer .data-view-wrap .prd-top-area .prd-info-wrap {width:calc(56% - var(--gap-80));}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-info-head {width:100%; text-align:center;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-info-head {width:100%; padding-bottom:var(--gap-24); border-bottom:1px solid #ccc;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-info-head h2 {font-family:var(--Poppins); font-size:var(--font-30); font-weight:700;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-info-head span {display:block; font-weight:var(--font-18); font-weight:600; color:#666;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .button-area {width:100%; margin-top:var(--gap-60); text-align:center;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap {width:100%; overflow-x:auto; position:absolute; left:0; bottom:0;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list {width:100%; display:flex; align-items:center; gap:0 20px;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box:first-child {margin-left:auto;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box:last-child {margin-right:auto;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box {width:100%; max-width:165px; cursor:pointer; position:relative; border-radius:10px; overflow:hidden; flex-shrink:0; felx-basis:165px; border:1px solid var(--border-eb);}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box span {display:block; width:100%; height:0; padding-bottom:100%; position:relative;}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box span img {display:block; max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box:hover,
.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box.active {border-color:var(--main-color);}

@media screen and (max-width: 1440px) {
	.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap {position:relative; margin-top:var(--gap-80);}
}

@media screen and (max-width: 1280px) {
	.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box {max-width:120px; flex-basis:120px;}
}

@media screen and (max-width: 1024px) {
	.customer .data-view-wrap .prd-top-area .prd-info-wrap {width:100%;}
}

@media screen and (max-width: 768px) {
	.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box {max-width:100px; flex-basis:100px; border-radius:8px;}
}

@media screen and (max-width: 480px) {
	.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list {gap:10px;}
	.customer .data-view-wrap .prd-top-area .prd-info-wrap .prd-thum-wrap .prd-thum-list .img-box {max-width:80px; flex-basis:80px; border-radius:5px;}
}


.customer .data-detail-wrap {width:100%; display:flex; gap:var(--gap-80); padding-bottom:var(--gap-120); border-bottom:1px solid #ccc;}

@media screen and (max-width: 1024px) {
	.customer .data-detail-wrap {flex-wrap:wrap; gap:0;}
	.customer .data-detail-wrap .detail-box {width:100%;}
	.customer .data-detail-wrap .detail-box.prd-data-wrap {border-width:0;}
	.customer .data-detail-wrap .detail-box.prd-data-wrap:nth-child(1) {border-top-width:1px;}
}


.customer .solution-wrap {width:100%; display:flex; gap:var(--gap-40) var(--gap-80);}
.customer .solution-wrap .solution-box {width:calc((100% - var(--gap-80)) / 2);}
.customer .solution-wrap .solution-box .solution-conts-box {width:100%; margin-top:var(--gap-40);}
.customer .solution-wrap .solution-box .solution-conts-box:nth-child(1) {margin-top:0;}
.customer .solution-wrap .solution-box .solution-conts-box .title {width:100%; height:64px; padding:0 var(--gap-24); border-radius:10px; background:#F8F8F8; display:flex; align-items:center; font-size:var(--font-20); font-weight:700; color:var(--main-color-b);}
.customer .solution-wrap .solution-box .solution-conts-box .conts {width:100%; padding:var(--gap-24); padding-bottom:0;}
.customer .solution-wrap .solution-box .solution-conts-box .conts .conts-box {width:100%; margin-top:var(--gap-40);}
.customer .solution-wrap .solution-box .solution-conts-box .conts .conts-box:nth-child(1) {margin-top:0;}
.customer .solution-wrap .solution-box .solution-conts-box .conts .sub-tlt {width:100%; margin-bottom:var(--gap-24); font-size:var(--font-18); font-weight:700; color:var(--main-color-b); position:relative;}
.customer .solution-wrap .solution-box .solution-conts-box .conts .sub-tlt:before {content:"쨌 ";}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li {width:100%; margin-top:var(--gap-16);}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li:nth-child(1) {margin-top:0;}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a {font-size:var(--font-18); position:relative; display:inline-block; vertical-align:middle; padding-left:calc(18px + var(--gap-8));}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a span {color:#999}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a:before {content:""; width:18px; height:18px; background-position:center; background-repeat:no-repeat; background-size:100% auto; position:absolute; left:0; top:4px;}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a.pdf:before {background-image:var(--icon-pdf);}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a.download:before {background-image:var(--icon-download);}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a.movie:before {background-image:var(--icon-video);}
.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a.youtube:before {background-image:var(--icon-youtube-c);}

@media screen and (max-width: 1280px) {
	.customer .solution-wrap {flex-wrap:wrap;}
	.customer .solution-wrap .solution-box {width:100%;}
}

@media screen and (max-width: 768px) {
	.customer .solution-wrap .solution-box .solution-conts-box .title {height:58px;}
	.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a {padding-left:calc(15px + var(--gap-8));}
	.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a:before {width:15px; height:15px; top:3px;}
}

@media screen and (max-width: 768px) {
	.customer .solution-wrap .solution-box .solution-conts-box .title {height:50px;}
	.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a {padding-left:calc(13px + var(--gap-8));}
	.customer .solution-wrap .solution-box .solution-conts-box .conts ul li a:before {width:13px; height:13px;}
}



/*怨듭��ы빆*/
.notice .sub-visual .visual-bg {background-image:url(/img/conts/sub_visual_notice.jpg);}


/*�뚯궗�뚭컻*/
.company .sub-visual .visual-bg {background-image:url(/img/conts/sub_visual_company.jpg); background-position:center;}
.company .contents-area {padding-bottom:0;}

.company .about-wrap .map-area {width:100%; height:520px; background:url(/img/conts/map.png) center no-repeat; background-size:cover;}
.company .about-wrap .map-area span {display:block; width:100%; height:100%;}
.company .about-wrap .map-area .root_daum_roughmap {width:100%; height:100%;}
.company .about-wrap .map-area .root_daum_roughmap .wrap_map {display:block; width:100%; height:100%;}
.company .about-wrap .map-area .root_daum_roughmap .map_border {display:none;}
.company .about-wrap .map-area .wrap_controllers {display:none;}
.company .about-wrap .company-info-wrap {width:100%;}
.company .about-wrap .company-info-wrap .info-box {width:100%; padding:var(--gap-80) 0; border-bottom:1px solid #ccc; display:flex;}
.company .about-wrap .company-info-wrap .info-box:last-child {border-bottom:0;}
.company .about-wrap .company-info-wrap .info-box .title {width:18%; font-size:var(--font-30); font-weight:700;}
.company .about-wrap .company-info-wrap .info-box .info-conts {width:82%; display:flex; flex-direction:row-reverse;}
.company .about-wrap .company-info-wrap .info-box .info-conts > * {width:50%;}
.company .about-wrap .company-info-wrap .info-box .info-conts.ty-2 {display:block;}
.company .about-wrap .company-info-wrap .info-box .info-conts.ty-2 > * {width:100%;}
.company .about-wrap .company-info-wrap .info-box .info-conts .info-conts-area {padding-right:var(--gap-80);}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li {width:100%; display:flex; align-items:center; gap:0 var(--gap-16); margin-top:var(--gap-16); min-height:48px;}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li:nth-child(1) {margin-top:0;}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt {font-size:var(--font-20); font-weight:600; position:relative; padding-left:calc(48px + var(--gap-16)); width:170px;}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt:before {content:""; width:48px; height:48px; border-radius:50%; background-position:center; background-repeat:no-repeat; background-color:#F8F8F8; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .conts {width:calc(100% - (var(--gap-16) + 170px)); font-size:var(--font-20);}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt.call:before {background-image:url(/img/conts/icon_phone.svg);}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt.fax:before {background-image:url(/img/conts/icon_fax.svg);}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt.email:before {background-image:url(/img/conts/icon_email.svg);}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt.address:before {background-image:url(/img/conts/icon_address.svg);}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt.worktime:before {background-image:url(/img/conts/icon_worktime.svg);}
.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt.year:before {background-image:url(/img/conts/icon_building.svg);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap {width:100%; display:flex; gap:var(--gap-40) var(--gap-16); flex-wrap:wrap; }
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box {min-width:calc((100% - (var(--gap-16) * 2)) / 3);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span {display:block; margin-top:var(--gap-40);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span:nth-child(1) {margin-top:0;}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a {position:relative; font-size:var(--font-20); font-weight:600; line-height:40px; padding:0 calc(24px + var(--gap-8)) 0 calc(40px + var(--gap-16));}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a:before {content:""; width:40px; height:40px; background-size:cover; background-position:center; background-repeat:no-repeat; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a:after {content:""; width:24px; height:24px; background:var(--icon-link) center no-repeat; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a.node-red:before {background-image:url(/img/com/Node-RED.png);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a.BACnet:before {background-image:url(/img/com/BACNET.png);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a.youtube:before {background-image:url(/img/com/youtube.png);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a.blog:before {background-image:url(/img/conts/icon_blog.svg);}
.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a.youtube:before {background-image:var(--icon-youtube-c);}
.company .about-wrap .company-info-wrap .info-box .info-conts .round-box {width:100%; min-height:80px; box-sizing:border-box; border-radius:40px; display:flex; align-items:center; justify-content:center; padding:10px 40px; text-align:center; border:1px solid var(--main-color-b); font-size:var(--font-22); color:var(--main-color-b); font-weight:700;}
.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap {width:100%; margin-top:var(--gap-40); display:flex; align-items:center; justify-content:center; gap:var(--gap-16); padding:20px var(--gap-16); background:#F8F8F8; border-radius:130px;}
.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap .item {flex:1;}
.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap .item .wrap {width:100%; height:0; padding-bottom:100%; border-radius:50%; position:relative; text-align:center; font-size:var(--font-20); font-weight:600;}
.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap .item:nth-child(odd) .wrap {background:var(--main-color-b); color:#fff;}
.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap .item:nth-child(even) .wrap {background:#D9E0EA; color:var(--main-color-b);}
.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap .item span {display:block; width:100%; padding:20px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box {width:100%; padding:var(--gap-32); background:#F8F8F8; border-radius:10px; position:relative; font-size:var(--font-22); color:var(--main-color-b); font-weight:700; text-align:center;}
.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box:before,
.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box:after {content:""; width:45px; height:36px; background:url(/img/conts/icon_dot.svg) center no-repeat; background-size:cover; position:absolute;}
.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box:before {left:var(--gap-32); top:var(--gap-32);}
.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box:after {right:var(--gap-32); bottom:var(--gap-32); transform:scaleX(-1) scaleY(-1);}
.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box span {display:block; width:80%; margin:0 auto; max-width:830px;}
.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .conts {width:100%; padding:var(--gap-40) var(--gap-50) 0 var(--gap-50); font-size:var(--font-20);}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart {width:100%; max-width:200px; padding:10px var(--gap-24); min-height:56px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:28px; position:relative; font-size:var(--font-20); z-index:10; text-align:center;}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ceo {background:var(--main-color-b); color:#fff; margin:0 auto; font-weight:700;}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ceo:after {content:""; width:1px; height:calc(var(--gap-60) / 2); box-sizing:border-box; border:solid #ccc; border-width:0 0 0 1px; position:absolute; left:50%; top:calc(100% + 1px);}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ty-1 {border:1px solid var(--main-color-b); color:var(--main-color-b); font-weight:600; background:#fff;}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ty-1:before {content:""; width:1px; height:calc((var(--gap-60) / 2) - 1px); box-sizing:border-box; border:solid #ccc; border-width:0 0 0 1px; position:absolute; left:50%; top:calc((var(--gap-60) / 2) * -1);}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ty-1:after {content:""; width:calc(100% + var(--gap-40) + 2px); height:1px; box-sizing:border-box; border:solid #ccc; border-width:1px 0 0 0; position:absolute; left:50%; top:calc((var(--gap-60) / 2) * -1); transform:translateX(-50%);}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ty-2 {background:#F8F8F8; color:var(--main-color-b);}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap {width:100%; margin-top:var(--gap-60); display:flex; gap:var(--gap-40); justify-content:center;}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul {width:calc((100% - (var(--gap-40) * 4)) / 5); flex:1; max-width:200px; position:relative;}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li {width:100%; margin-bottom:var(--gap-24);}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li:last-child {margin-bottom:0;}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li .chart.ty-2 {margin-bottom:var(--gap-24);}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li .chart.ty-2:last-child {margin-bottom:0;}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul:first-child li .chart.ty-1:after {transform:none;}
.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul:last-child li .chart.ty-1:after {left:calc((50% + var(--gap-40) + 2px) * -1); transform:none;}

@media screen and (max-width: 1280px) {
	.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap {flex-wrap:wrap;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap .item {width:30%; flex:initial;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart {font-size:16px;}
}

@media screen and (max-width: 1024px) {
	.company .about-wrap .map-area {height:400px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts {flex-wrap:wrap; gap:var(--gap-80) 0;}
	.company .about-wrap .company-info-wrap .info-box .info-conts > * {width:100%;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .info-conts-area {padding-right:0;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a {line-height:30px; padding:0 calc(20px + var(--gap-8)) 0 calc(30px + var(--gap-16));}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a:before {width:30px; height:30px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a:after {width:20px; height:20px; background-size:cover;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box:before,
	.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box:after {width:30px; height:23px;}
}

@media screen and (max-width: 768px) {
	.company .about-wrap .map-area {height:320px;}
	.company .about-wrap .company-info-wrap .info-box {flex-wrap:wrap; gap:var(--gap-40) 0;}
	.company .about-wrap .company-info-wrap .info-box .title {width:100%;}
	.company .about-wrap .company-info-wrap .info-box .title .br {display:inline-block;}
	.company .about-wrap .company-info-wrap .info-box .info-conts {width:100%;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt {padding-left:calc(40px + var(--gap-16)); width:120px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt:before {width:40px; height:40px; background-size:24px auto;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .conts {width:calc(100% - (var(--gap-16) + 120px));}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box {min-width:calc((100% - var(--gap-16)) / 2);}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a {line-height:30px; padding:0 calc(20px + var(--gap-8)) 0 calc(30px + var(--gap-16));}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a:before {width:30px; height:30px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a:after {width:20px; height:20px; background-size:cover;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap {border-radius:100px;}

	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap {position:relative;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap:before {content:""; width:1px; height:calc(100% - 112px - var(--gap-24)); box-sizing:border-box; border-left:1px solid #ccc; position:absolute; left:50%; top:0; z-index:0;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap {flex-wrap:wrap;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul {width:100%; max-width:100%; flex:initial;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li .chart {margin:0 auto;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li .group-dep {width:100%; display:flex; gap:var(--gap-24); justify-content:center;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li .group-dep .chart {margin:0;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ceo:after {display:none;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ty-1:before {height:calc(var(--gap-40) - 1px); top:calc(var(--gap-40) * -1); display:none;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .chart.ty-1:after {width:1px; height:var(--gap-24); border-width:0 0 0 1px; top:calc(100% + 1px); display:none;}
}

@media screen and (max-width: 600px) {
	.company .about-wrap .company-info-wrap .info-box {flex-wrap:wrap; gap:var(--gap-40) 0;}
	.company .about-wrap .company-info-wrap .info-box .title {width:100%;}
	.company .about-wrap .company-info-wrap .info-box .info-conts {width:100%;}
}

@media screen and (max-width: 480px) {
	.company .about-wrap .map-area {height:250px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt {padding-left:calc(32px + var(--gap-16)); width:95px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .tlt:before {width:32px; height:32px; background-size:18px auto;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .company-info li .conts {width:calc(100% - (var(--gap-16) + 95px));}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap {flex-wrap:wrap; gap:var(--gap-40);}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box {width:100%;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a {line-height:24px; padding:0 calc(12px + var(--gap-8)) 0 calc(24px + var(--gap-16));}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a:before {width:24px; height:24px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .family-site-wrap .site-box span a:after {width:12px; height:12px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .round-box {min-height:75px; padding:10px 30px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap {border-radius:80px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .circle-wrap .item {width:45%;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box:before,
	.company .about-wrap .company-info-wrap .info-box .info-conts .message-wrap .bg-box:after {width:20px; height:16px;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li .group-dep {flex-wrap:wrap; max-width:200px; margin-left:auto; margin-right:auto;}
	.company .about-wrap .company-info-wrap .info-box .info-conts .org-wrap .group-wrap ul li .group-dep .chart {width:100%;}
}


.company .contact-wrap {width:100%; position:relative; padding:var(--gap-120) 0; display:flex; gap:0 var(--gap-80); justify-content:center; position:relative;}
.company .contact-wrap:before {content:""; width:100vw; height:100%; background:#F8F8F8; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:0;}
.company .contact-wrap .contact-box {width:calc((100% - (var(--gap-80) * 2)) / 3); display:flex; gap:0 50px; align-items:center; position:relative; z-index:10;}
.company .contact-wrap .contact-box .icon-box {width:40%; border-radius:20px; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.1);}
.company .contact-wrap .contact-box .icon-box span {width:100%; height:0; padding-bottom:100%; border-radius:20px; background-position:center; background-repeat:no-repeat; display:block;}
.company .contact-wrap .contact-box .contact-conts .head {width:100%; margin-bottom:var(--gap-24);}
.company .contact-wrap .contact-box .contact-conts .head em {display:block; font-size:26px; font-weight:700;}
.company .contact-wrap .contact-box .contact-conts .head span {display:block; font-family:var(--Poppins); font-size:var(--font-18); color:#666;}
.company .contact-wrap .contact-box .contact-conts .conts .btn-chatbot {text-align:left; padding:0 var(--gap-24);}
.company .contact-wrap .contact-box .contact-conts .conts .btn-chatbot:after {content:""; width:14px; height:14px; background:var(--arrow-w) center no-repeat; background-size:auto 100%; position:absolute; right:var(--gap-24); top:50%; transform:translateY(-50%) scaleX(-1);}
.company .contact-wrap .contact-box .contact-conts .conts p,
.company .contact-wrap .contact-box .contact-conts .conts .copy {font-size:var(--font-20); font-weight:700; color:var(--main-color-b); position:relative; padding-right:calc(20px + var(--gap-8));}
.company .contact-wrap .contact-box .contact-conts .conts .copy:after {content:""; width:20px; height:20px; background:url(/img/conts/icon_copy.svg) center no-repeat; background-size:cover; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.company .contact-wrap .contact-box.chat .icon-box span {/*background-image:url(/img/conts/icon_contect_happytalk.svg);*/ background-image: url(/img/conts/icon_contect_kakao.svg);}
.company .contact-wrap .contact-box.email .icon-box span {background-image:url(/img/conts/icon_contect_email.svg);}
.company .contact-wrap .contact-box.call .icon-box span {background-image:url(/img/conts/icon_contect_call.svg);}

@media screen and (max-width: 1440px) {
	.company .contact-wrap {gap:0 15px;}
	.company .contact-wrap .contact-box {width:calc((100% - 30px) / 3); gap:0 var(--gap-32);}
}

@media screen and (max-width: 1280px) {
	.company .contact-wrap .contact-box .icon-box {width:35%;}
	.company .contact-wrap .contact-box .icon-box span {background-size:45% auto;}
	.company .contact-wrap .contact-box .contact-conts .head em {font-size:var(--font-22);}
}

@media screen and (max-width: 1200px) {
	.company .contact-wrap {flex-wrap:wrap; gap:var(--gap-40) 0; max-width:400px; margin:0 auto;}
	.company .contact-wrap .contact-box {width:100%;}
}

@media screen and (max-width: 480px) {
	.company .contact-wrap .contact-box {justify-content:center;}
	.company .contact-wrap .contact-box .icon-box {width:30%;}
	.company .contact-wrap .contact-box .icon-box span {background-size:40% auto;}
	.company .contact-wrap .contact-box .contact-conts {min-width:150px;}
	.company .contact-wrap .contact-box .contact-conts .head em {font-size:var(--font-30);}

	.company .contact-wrap .contact-box .contact-conts .conts .btn-chatbot {min-width: 115px;}
	.company .contact-wrap .contact-box .contact-conts .conts .btn-chatbot:after {width: 12px; height: 12px;}
}


.site {padding-top:var(--gap-120);}
.site .site-search-top {width:100%; margin-bottom:var(--gap-80);}
.site .site-search-top .form-search-area {justify-content:center;}
.site .site-search-top .form-search-area .search-box {max-width:640px;}

.site .contents-area .category {margin-bottom:var(--gap-80);}

.site .search-result-wrap {width:100%; border-top:1px solid #000; padding:var(--gap-80) 0;}
.site .search-result-wrap .result-wrap {width:95%; max-width:1140px; margin:0 auto;}