@charset "utf-8";

:root{
	--roundSize:40px;
}
@media screen and (max-width:1024px){
	:root{
		--roundSize:20px;
	}
}


/* 공통 */
:root{ --inner: 1780; --inner-width: 92.70833333%; --radius: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); }
#content{padding-bottom:clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px);}
#content > .inr{max-width:1260px; margin:0 auto; padding:0 20px;} /* 삭제금지 사이즈변경가능 */
#content h2{margin-top:80px; margin-bottom:30px; font-size:clamp(35px, calc( 42 / var(--inner) * 100vw ), 42px); color:#111; font-weight:400; text-align:center; font-weight:700; word-break:keep-all;}
[data-subarea]{padding:100px var(--page-pad);}
.inner{ margin-inline: auto; max-width: calc(var(--inner) * 1px); width: var(--inner-width); }
.inner-narrow{ --inner: 1400; }
.inline-block{ display: inline-block; }
.color-marsh{ color: #d4be73; }
.color-sandstone{ color: #d6b498; }

/* 서브비쥬얼 + 타이틀 */
.area-subVisual{padding:clamp(60px, calc( 91 / var(--inner) * 100vw ), 91px) var(--page-pad) 0; text-align:center; }
.area-subVisual .page-subTitle{ margin-bottom: 18px; font-family:'GowunBatang-Regular', Gulim, Sans-serif; font-size: clamp(18px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 500; color: #c4c4c4; }
.area-subVisual .page-subTitle:empty{ display: none; }
.area-subVisual .page-title{font-size:clamp(35px, calc( 42 / var(--inner) * 100vw ), 42px); }
body :is(.area-subVisual) ~ #container [data-subarea]:nth-of-type(1){padding-top:clamp(40px, calc( 76 / var(--inner) * 100vw ), 76px);}
body :is(.area-subVisual) ~ #container h2{margin-top:20px;}
[data-sublayout="product"]{display:none;}

/* 공통 서브비쥬얼 + 타이틀 - 반응형 */
@media screen and (max-width:1024px){
	/* 공통 */
	#header{border-bottom:1px solid #e5e5e5;}
}
@media screen and (max-width:768px){
}
@media screen and (max-width:480px){
}

/* 제품 서브단 */
[data-shop-list="default"] > li [data-shop-icon="icon"]{text-align:center;}


/* 탑 배너 */
.topBanner{ contain: content; }
.topBanner .img{ height: clamp(326px, calc( 620 / var(--inner) * 100vw ), 620px); background: no-repeat 60% / cover; border-radius: var(--radius); }

/* 인사말 */
[data-subarea="about"]{display:flex; flex-direction:column; padding-bottom:60px;}
.about_visual_wrap{display:flex;}
.about_visual{position:relative; width:65%; height:640px; margin-right:50px; border-radius:20px; overflow:hidden;}
.about_visual > img{width:100%; height:100%; object-fit:cover; border-radius:20px;}
.about_visual p{position:absolute; top:100px; right:80px; font-weight:200; font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px);}
.cert_wrap{width:35%; z-index:2; padding-right:10px; box-sizing:border-box;}
.cert_wrap li > img{border-radius:20px; border:1px solid #ebebeb;}
.about_content{margin-top:-300px; margin-left:auto; z-index:1; padding:90px 80px; line-height:1.65; background-color: #fff; border-radius:40px; box-sizing:border-box;}
.about_content .en{text-transform:uppercase; color:#666666; font-family:'EB Garamond'; font-size:clamp(13px, calc( 16 / var(--inner) * 100vw ), 16px);}
.about_content .tit{padding:50px 0; color:#101010; font-size:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px);}
.about_content .desc{font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); color:#101010;}
@media screen and (max-width:1680px){
    .about_visual{width:60%;}
    .cert_wrap{width:40%;}
}
@media screen and (max-width:1240px){
    .about_visual{width:50%;}
    .cert_wrap{width:50%;}
    .about_visual p{right:40px;}
}
@media screen and (max-width:1080px){
    .about_visual{width:70%; height:600px;} 
    .cert_wrap{width:30%;}
}
@media screen and (max-width:860px){
    .about_visual_wrap{position:relative;}
    .about_visual{width:100%; height:auto; margin-right:20px;}
    .about_content{margin-top:-100px; padding:60px; border-radius:20px;}
}
@media screen and (max-width:680px){
    .about_visual{margin-right:0; height:300px;}
    .about_visual p{left:40px; bottom:40px; top:inherit; color: #fff;}
    .cert_wrap{position:absolute; bottom: -100px; right: 0; width:50%; margin-right:-10px; padding:20px; background: #fff; border-radius: 25px; border-top-right-radius:0; }
    .about_content{margin-top:0; width:100%; padding:60px 20px 0 20px;}
    .about_content br{display:none;}
    .about_content .tit{padding:30px 0;}
}
@media screen and (max-width:480px){
    .about_visual p{left:initial; right:20px; top:40px; bottom:initial; color: #333; width:40%;}
    .about_visual p br{display:none;}
}
@media screen and (max-width:420px){
    .about_content{padding-top:100px;}
    .cert_wrap{padding-bottom:0;}
}
/* 오시는 길 */
[data-subarea="location"]{padding-bottom:60px;}
[data-subarea="location"] > div{position:relative; overflow:hidden; padding-bottom:60px;}
[data-subarea="location"] .map{width:100%; height:678px; border-radius:var(--radius);}
[data-subarea="location"] .info{position:absolute; left:50%; bottom:0; padding:70px; flex-wrap: wrap; display:flex; justify-content:left; width:1400px; background-color:#fff; border-radius:var(--roundSize); z-index:1; -ms-transform: translate(-50%, 0); transform: translate(-50%, 10%); }
[data-subarea="location"] .info .label{display:flex; justify-content:center; align-items: center;  max-width:142px; min-width:140px; height:50px; margin-right:30px; text-align:center; line-height:50px; font-size:clamp(15px, calc( 30 / var(--inner) * 100vw ), 18px); font-weight:600; border:1px solid #572c0d; color:#572c0d; border-radius:50rem;}
[data-subarea="location"] .info .label i{display:block; width:16px; height:18px; margin-right:8px; background:url('/images/content/icon_location.png') no-repeat 0 0;}
[data-subarea="location"] .info .label.tel i{background:url('/images/content/icon_tel.png') no-repeat 0 0;}
[data-subarea="location"] .info .txt{margin-right:40px; padding-top:8px; font-size:clamp(15px, calc( 42 / var(--inner) * 100vw ), 24px); color:#222; font-weight:600;}
[data-subarea="location"] .info p{flex:1 1 20%;}
[data-subarea="location"] .info p:nth-child(2){margin-right:20px;}
[data-subarea="location"] .map_wrap{position:relative;}
[data-subarea="location"] .map_wrap .btn{position:absolute; top:2%; right:1%; z-index:1; display:flex; justify-content:center; align-items: center; width:calc(100% - 80%); min-width:136px; height:50px; line-height:60px; margin-left:auto; font-size:clamp(15px, calc( 30 / var(--inner) * 100vw ), 18px); font-weight:600; text-align:center; color:#fff; border-radius:50rem; background-color:#572c0d; border:1px solid transparent; cursor:pointer; transition:background 0.1s ease, color 0.3s linear; -moz-transition:background 0.1s ease, color 0.3s linear; -webkit-transition:background 0.1s ease, color 0.3s linear; -ms-transition:background 0.1s ease, color 0.3s linear; -o-transition:background 0.1s ease, color 0.3s linear;}  
[data-subarea="location"] .map_wrap .btn:hover{color:#572c0d; background-color:#fff; border:1px solid #572c0d;}
[data-subarea="location"] .map_wrap .btn i{display:block; justify-content:center; align-items: center; margin-left:10px; width:12px; height:12px; background:url('/images/content/icon_window.png') no-repeat 0 0;}
[data-subarea="location"] .map_wrap .btn:hover i{background-image:url('/images/content/icon_window_active.png');}
@media(max-width:1680px){
    [data-subarea="location"] .info{width:85%;}
}
@media(max-width:1100px){
    [data-subarea="location"] .info{padding:60px 60px;}
    [data-subarea="location"] .info .txt{margin-right:0;}
}
@media(max-width:860px){
    [data-subarea="location"] .info{padding:45px 35px;}
    [data-subarea="location"] .info p{margin-bottom:14px;}
    [data-subarea="location"] .info .label{margin-right:20px; max-width:128px; min-width:100px; height:40px; line-height:40px;}
    [data-subarea="location"] .map_wrap .btn{height:40px; line-height:40px;}
}
@media(max-width:680px){
    [data-subarea="location"] .map{height:500px;}
    [data-subarea="location"] .info p{flex:1 1 50%;}
    [data-subarea="location"] .info p:nth-child(2){margin-right:0;}
    [data-subarea="location"] .info{width:80%; padding:35px 30px;}
}
@media(max-width:410px){
    [data-subarea="location"] > div{overflow:visible;}
    [data-subarea="location"] .info{box-shadow:none;}
    [data-subarea="location"] .info p{flex:1 1 100%;}
    [data-subarea="location"] .info .txt{padding-top:0; padding-left:20px;}
}


/* 기술전수 및 컨설팅 */
[data-subarea="consulting"]{ padding-inline: 0; }
[data-subarea="consulting"] .topBanner{ --margin: clamp(80px, calc( 174 / var(--inner) * 100vw ), 174px); }
/* 147 */
[data-subarea="consulting"] .topBanner .img{ padding: 8.26% 0 4.5%; background-image: url('/images/content/topBanner-consulting.jpg'); background-position: 88%; box-sizing: border-box; font-size: clamp(18px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight: 300; line-height: 1.76923077; color: #fff; }
[data-subarea="consulting"] .topBanner .wrapTxt{ margin-top: 50px; display: grid; align-items: end; gap: clamp(40px, calc( 86 / var(--inner) * 100vw ), 86px); font-size: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 300; line-height: 1.91666667; }
[data-subarea="consulting"] .topBanner .wrapCert{ position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; z-index: 1; }
[data-subarea="consulting"] .topBanner .cloud{ display: none; }
[data-subarea="consulting"] .topBanner .wrapCert img{ width: 100%; border: 1px solid #ebebeb; border-radius: 20px; box-sizing: border-box; }
[data-subarea="consulting"] .topBanner .bottom{ margin-top: 3.13157895em; text-align: center; font-size: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px); font-weight: 600; line-height: 1.78947368; }
[data-subarea="consulting"] .topBanner .wrapTxt p{ position: relative; text-wrap: pretty; word-break: keep-all; z-index: 1; }
.whyJy{ margin-top: clamp(70px, calc( 147 / var(--inner) * 100vw ), 147px); padding: clamp(60px, calc( 159 / var(--inner) * 100vw ), 159px) clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(60px, calc( 186 / var(--inner) * 100vw ), 186px); background: #221409 url('/images/content/whyJy-bg.jpg') no-repeat 60% / cover; border-radius: var(--radius); color: #fff; }
.whyJy p:nth-child(1){ font: 600 clamp(35px, calc( 70 / var(--inner) * 100vw ), 70px) var(--font-eng); color: #946b49; }
.whyJy p:nth-child(2){ margin-top: 0.13157895em; font-size: clamp(30px, calc( 38 / var(--inner) * 100vw ), 38px); font-weight: 600; color: #d6b498; }
.whyJy .arrow{ margin: 1.28205128em 0 1.69230769em 1.97435897em; aspect-ratio: 29/39; height: 1em; font-size: clamp(30px, calc( 39 / var(--inner) * 100vw ), 39px); fill: currentColor; }
.whyJy ol{ counter-reset: number; display: grid; gap: 46px; font-size: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 300; text-wrap: balance; word-break: keep-all; }
.whyJy .color-sandstone{ font-weight: 500; }
.whyJy li{ display: grid; grid-template-columns: auto 1fr; gap: 29px; }
.whyJy li::before{ counter-increment: number; content: counter(number)'.'; font-style: italic; font-family: var(--font-eng); font-weight: 600; }
.whyJy .plus{ position: relative; top: 0.04166667em; margin: 0 0.58333333em 0 0.54166667em; display: inline-flex; align-items: center; justify-content: center; width: 1.33333333em; height: 1.33333333em; padding: 0.08333333em 0 0.16666667em; background: #d6b498; border-radius: 50%; box-sizing: border-box; font-weight: 200; color: #221409; }
.csltg{ margin-top: clamp(70px, calc( 131 / var(--inner) * 100vw ), 131px); display: grid; gap: clamp(70px, calc( 94 / var(--inner) * 100vw ), 94px); word-break: keep-all; }
.csltg h3{ justify-self: start; display: inline-block; padding: .70833333em 2.25em .625em; border: 1px solid currentColor; border-radius: 5em; font-size: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; }
.csltg .table{ margin-top: clamp(45px, calc( 49 / var(--inner) * 100vw ), 49px); display: grid; gap: 2.25em; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); }
.csltg .table li{ display: grid; gap: 20px 1.625em; }
.csltg .table .head{ font-weight: 500; }
.csltg .table .body{ font-weight: 300; }
.csltg .table .box{ margin: 0.77272727em 0 0 1px; padding: 12px clamp(15px, calc( 21 / var(--inner) * 100vw ), 21px) 13px clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px); background: #f5f5f5; font-size: 0.91666667em; }
.csltg .curriculum{ counter-reset: number; margin-top: clamp(45px, calc( 55 / var(--inner) * 100vw ), 55px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); text-align: center; font-size: clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight: 500; }
.csltg .curriculum li{ padding: 2.65384615em 0 2.57692308em; background: #f7f7f7; border: 1px solid #0000; border-radius: var(--radius); }
.csltg .curriculum .step{ position: relative; margin-bottom: 0.59090909em; font-size: 0.84615385em; font-weight: 300; color: #939393; }
.csltg .curriculum .step::before{ counter-increment: number; content: counter(number); }
.csltg .curriculum .step::after{ content: ''; position: absolute; top: 0.3em; left: calc( 50% + 3.4ch); display: block; width: 1.13636364em; height: 0.86363636em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.05 28.99'%3E%3Cpath fill='%23fff' d='M19.09,28.99c-.45,0-.81-.36-.81-.81,0-.07,0-.14.03-.2,1.09-4.98,4.28-9.25,8.74-11.72.24-.13.33-.44.2-.68-.09-.16-.26-.26-.44-.26H.84c-.45.02-.82-.33-.84-.78-.02-.45.33-.82.78-.84h26.02c.28,0,.5-.22.5-.5,0-.18-.1-.35-.26-.44-4.46-2.47-7.64-6.74-8.74-11.72-.13-.43.12-.88.55-1.01.43-.13.88.12,1.01.55,0,.02,0,.03.01.05,2.21,8.55,8.56,13.07,18.34,13.07.45-.02.82.33.84.78s-.33.82-.78.84h-.06c-9.79,0-16.13,4.52-18.34,13.07-.09.35-.41.6-.78.6Z'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.csltg .curriculum li:last-child .step::after{ display: none; }
.csltg .bottom{ margin-top: 19px; display: grid; align-items: start; gap: 15px clamp(20px, calc( 154 / var(--inner) * 100vw ), 154px); }
.csltg .dot{ margin-top: 30px; display: grid; gap: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); text-wrap: pretty; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 500; line-height: 1.75; }
.csltg .dot li{ display: grid; grid-template-columns: auto 1fr; gap: 13px; }
.csltg .dot li::before{ content: '·'; margin-right: 10px; font-weight: 800; }
.csltg .dot .lite{ margin-top: 7px; display: block; font-weight: 300; }
.csltg .img{ margin-top: 40px; height: clamp(200px, calc( 652 / var(--inner) * 100vw ), 652px); background: url('/images/content/csltg.jpg') no-repeat 50% 20% / cover; border-radius: var(--radius); }
@media(prefers-reduced-motion:no-preference){
	.csltg .curriculum li:not(.isActive) .step::after{ display: none; }
	.csltg .curriculum .isActive{ background: linear-gradient(90deg, #d4bd73, #572b0d); color: #fff; border-color: #4d2204; }
	.csltg .curriculum .isActive .step{ color: inherit; }
}
@media(min-width:768px){
	[data-subarea="consulting"] .topBanner .wrapTxt{ grid-template-columns: 45.42857143% 1fr; }
	.csltg .table li{ grid-template-columns: auto 1fr; }
}
@media(min-width:1024px){
	.csltg .curriculum{ grid-template-columns: repeat(4, 1fr); }
}
@media(min-width:1280px){
	[data-subarea="consulting"] .topBanner .wrapTxt{ margin-top: calc( var(--margin) * -1 ); }
	[data-subarea="consulting"] .topBanner .cloud{ position: absolute; inset: -61px clamp(-57px, -3.4vw, 0px) auto; display: block; height: calc( var(--margin) + 61px); background: #fff; border-radius: 0 var(--radius) 0 0; z-index: -1; }
	[data-subarea="consulting"] .topBanner .cloud::before, [data-subarea="consulting"] .topBanner .cloud::after{ content: ''; position: absolute; bottom: 0; width: calc( var(--radius) * 2 ); height: calc( var(--radius) * 2 ); }
	[data-subarea="consulting"] .topBanner .cloud::after{ right: calc( var(--radius) * -2 ); border-radius: 0 0 0 var(--radius); box-shadow: calc( var(--radius) / -2 ) calc( var(--radius) / 2 ) #fff; }
	[data-subarea="consulting"] .topBanner .wrapTxt p{ padding-bottom: 9px; }
	.csltg .table{ margin-left: 54px; }
	.csltg .bottom{ grid-template-columns: 1fr 1fr; }
	.csltg .dot{ margin-left: 53px; grid-area: 2 / 1 / 3 / 2; }
	.csltg .img{ grid-area: 2 / 2 / 3 / 3; margin-top: 0; max-width: 571px; }
}
@media(min-width:1600px){
	[data-subarea="consulting"] .topBanner .cloud{ border-top-left-radius: var(--radius); }
	[data-subarea="consulting"] .topBanner .cloud::before{ left: calc( var(--radius) * -2 ); border-radius: 0 0 var(--radius) 0; box-shadow: calc( var(--radius) / 2 ) calc( var(--radius) / 2 ) #fff; }
}
@media(max-width:1599px){
	[data-subarea="consulting"] .topBanner .cloud::before{ bottom: 100%; left: 0; border-radius: 0 0 0 var(--radius); box-shadow: calc( var(--radius) / -2 ) calc( var(--radius) / 2 ) #fff; }
}
@media(max-width:1279px){
	[data-subarea="consulting"] .topBanner .img{ display: flex; align-items: flex-end; }
	[data-subarea="consulting"] .topBanner .wrapTxt{ align-items: center; }
}
@media(max-width:767px){
	[data-subarea="consulting"] .topBanner .wrapTxt p{ text-align: center; }
	[data-subarea="consulting"] .topBanner br{ display: none; }
	.csltg .table .body{ padding-left: 0.55555556em; }
}

/* 제휴업체 */
[data-subarea="partner"]{ padding-inline: 0; }
[data-subarea="partner"] .inner{ --inner: 1762; }
[data-subarea="partner"] ul{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(5px, calc( 54 / var(--inner) * 100vw ), 54px); text-align: center; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.38888889; letter-spacing: -.025em; color: #727272; }
[data-subarea="partner"] li{ padding: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px) clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px) clamp(14px, calc( 26 / var(--inner) * 100vw ), 26px); border-radius: var(--radius); box-shadow: 0 0 24px rgba(0, 0, 0, 0.1); }
[data-subarea="partner"] .noImg{ contain: content; aspect-ratio: 365/250; background: #e8e8e8; border-radius: calc( var(--radius) * .75); }
[data-subarea="partner"] img{ width: 100%; height: 100%; object-fit: cover; text-indent: -1000vw; }
[data-subarea="partner"] .company{ margin: 1em 0 .11111111em; font-size: 1.11111111em; color: #111; }
@media(min-width:1024px){
	[data-subarea="partner"] ul{ grid-template-columns: repeat(4, 1fr); }
}

/* 도매문의 */
[data-subarea="wholesale"]{ padding-inline: 0; word-break: keep-all; }
[data-subarea="wholesale"] .topBanner{ font-size: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px); font-weight: 600; line-height: 1.78947368; }
[data-subarea="wholesale"] .topBanner .img{ background-image: url('/images/content/topBanner-wholesale.jpg'); }
[data-subarea="wholesale"] .topBanner .txt{ position: relative; z-index: 1; }
[data-subarea="wholesale"] .topBanner .txt.t1{ z-index: 2; }
[data-subarea="wholesale"] .topBanner .plus{ position: relative; top: -.21428571em; margin: 0 .25em 0 .21428571em; display: inline-flex; align-items: center; justify-content: center; width: 1.14285714em; height: 1.14285714em; padding-bottom: .21428571em; background: var(--color-base); border-radius: 50%; box-sizing: border-box; font-size: .73684211em; font-weight: 200; color: #fff; }
.excellence{ margin-top: clamp(70px, calc( 115 / var(--inner) * 100vw ), 115px); display: grid; gap: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); color: #fff; }
.excellence .part{ padding: clamp(70px, calc( 117 / var(--inner) * 100vw ), 117px) clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(70px, calc( 102 / var(--inner) * 100vw ), 102px) clamp(25px, calc( 79 / var(--inner) * 100vw ), 79px); background: #1e1b19 no-repeat 50% / cover; border-radius: var(--radius); }
.excellence .part.p1{ background-image: url('/images/content/excellence-bg1.jpg'); }
.excellence .part.p2{ background-image: url('/images/content/excellence-bg2.jpg'); }
.excellence .icon{ --iconSize: clamp(72px, calc( 92 / var(--inner) * 100vw ), 92px); width: var(--iconSize); height: var(--iconSize); border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.excellence .icon.i1{ background: url('/images/content/excellence-i1.svg') no-repeat 50% / 43.4%; }
.excellence .icon.i2{ background: url('/images/content/excellence-i2.svg') no-repeat 50% / 35.5%; }
.excellence .title{ margin-top: .97142857em; font-size: clamp(30px, calc( 35 / var(--inner) * 100vw ), 35px); }
.excellence .subTitle{ margin-top: .875em; text-transform: uppercase; font: 500 clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px) var(--font-eng); letter-spacing: .05em; color: color-mix(in srgb, currentColor, #0000 50%); }
.excellence .description{ margin-top: clamp(70px, calc( 140 / var(--inner) * 100vw ), 140px); font-size: clamp(18px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 300; line-height: 1.72727273; color: #bbb; }
.merit{ margin-top: clamp(70px, calc( 152 / var(--inner) * 100vw ), 152px); padding: clamp(70px, calc( 140 / var(--inner) * 100vw ), 140px) 0 clamp(70px, calc( 153 / var(--inner) * 100vw ), 153px); background: #d7bda9 url('/images/content/merit-bg.jpg') no-repeat 50% / cover; text-wrap: balance; color: #fff; }
.merit .title{ font-size: clamp(30px, calc( 35 / var(--inner) * 100vw ), 35px); font-weight: 300; }
.merit .title b{ font-weight: 600; }
.merit .list{ counter-reset: number; margin-top: 48px; display: grid; gap: 15px 38px; font-size: clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight: 500; }
.merit .list li{ display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 1.03846154em; padding: 1.57692308em clamp(25px, calc( 32 / var(--inner) * 100vw ), 32px) 1.5em clamp(25px, calc( 56 / var(--inner) * 100vw ), 56px); background: color-mix(in srgb, #9f7558 17.5%, #0000); border: 1px solid color-mix(in srgb, currentColor 80%, #0000); border-radius: 24px; }
.merit .list li::before{ counter-increment: number; content: '0'counter(number)'.'; font-style: italic; font-family: var(--font-eng); font-weight: 600; }
/* clamp(70px, calc( 40 / var(--inner) * 100vw ), 40px) */
@media(min-width:768px){
	[data-subarea="wholesale"] .topBanner .txt.t1{ display: inline-block; }
	[data-subarea="wholesale"] .topBanner .cloud{ position: absolute; background: #fff; border-radius: var(--radius); z-index: -1; }
	[data-subarea="wholesale"] .topBanner .cloud.c1{ inset: -1.15789474em -1.21052632em .39473684em -1.26315789em; border-radius: var(--radius) var(--radius) 0 0; }
	[data-subarea="wholesale"] .topBanner .cloud.c1::before, .topBanner .cloud.c1::after{ content: ''; position: absolute; bottom: 0; width: calc( var(--radius) * 2 ); height: calc( var(--radius) * 2 ); }
	[data-subarea="wholesale"] .topBanner .cloud.c1::after{ right: calc( var(--radius) * -2 ); border-radius: 0 0 0 var(--radius); box-shadow: calc( var(--radius) / -2 ) calc( var(--radius) / 2 ) #fff; }
	.excellence{ grid-template-columns: 1fr 1fr; }
	.merit{ background-position: 100%; }
	.merit .title{ text-indent: 1.74285714em; }
	.merit .list{ grid-template-columns: 1fr 1fr; }
}
@media(min-width:1536px){
	[data-subarea="wholesale"] .topBanner .wrapTxt{ margin-top: -3.97368421em; }
	[data-subarea="wholesale"] .topBanner .cloud.c1::before{ left: calc( var(--radius) * -2 ); border-radius: 0 0 var(--radius) 0; box-shadow: calc( var(--radius) / 2 ) calc( var(--radius) / 2 ) #fff; }
	[data-subarea="wholesale"] .topBanner .txt.t2{ display: inline-block; }
	[data-subarea="wholesale"] .topBanner .cloud.c2{ inset: -.39473684em -1.60526316em -.39473684em -5em; border-radius: 0 var(--radius) 0 0; }
	[data-subarea="wholesale"] .topBanner .cloud.c2::before, [data-subarea="wholesale"] .topBanner .cloud.c2::after{ content: ''; position: absolute; width: calc( var(--radius) * 2 ); height: calc( var(--radius) * 2 ); border-radius: 0 0 0 var(--radius); box-shadow: calc( var(--radius) / -2 ) calc( var(--radius) / 2 ) #fff; }
	[data-subarea="wholesale"] .topBanner .cloud.c2::before{ top: calc( var(--radius) * -2 ); left: 0; }
	[data-subarea="wholesale"] .topBanner .cloud.c2::after{ right: calc( var(--radius) * -2 ); bottom: 0; }
}
@media(max-width:1535px){
	[data-subarea="wholesale"] .topBanner .cloud.c1{ left: -3.4vw; border-top-left-radius: 0; }
	[data-subarea="wholesale"] .topBanner .cloud.c1::before{ left: 0; bottom: 100%; border-radius: 0 0 0 var(--radius); box-shadow: calc( var(--radius) / -2 ) calc( var(--radius) / 2 ) #fff; }
	.excellence br{ display: none; }
	@media(min-width:768px){
		[data-subarea="wholesale"] .topBanner .wrapTxt{ margin-top: -1.4em; }
	}
}
@media(max-width:767px){
	[data-subarea="wholesale"] .topBanner .wrapTxt{ margin-top: .75em; }
	[data-subarea="wholesale"] .topBanner br{ display: none; }
}


/* 슬라이드 컨트롤 */
.product .swiper-control .swiper_page{display:flex; justify-content:center; align-items:center; width:auto; margin-top:35px;}
.product .swiper-pagination-bullet{opacity:1; width:14px; height:14px; box-sizing:border-box; background-color:#b5b5b5; border:1px solid #b5b5b5; border-radius:100%;}
.product .swiper-pagination-bullet-active{background-color:#fff;}
.product .swiper-control button{--sizeBtn:90px; opacity:0.3; display:flex; justify-content:center; align-items:center; position:absolute; top:50%; z-index:10; width:var(--sizeBtn); height:var(--sizeBtn); box-sizing:border-box; background-color:transparent; border-radius:100%; font-size:0; transform:translateY(-50%); transition:opacity 0.3s ease 0s;}
.product .swiper-control button:before{content:''; display:block; width:39px; height:29px; background:url(../images/main/slide_arrow.svg) no-repeat 50% 50%; background-size:100% auto;}
.product .swiper-control button:after{content:''; opacity:0; display:block; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border:1px solid #111; border-radius:100%; transform:scale(0.5); transition:0.3s ease; transition-property:opacity, transform;}
.product .swiper-control button.swiper_prev{left:0; transform:translateY(-50%) rotate(180deg);}
.product .swiper-control button.swiper_next{right:0;}
.product .swiper-control button:hover{opacity:1;}
.product .swiper-control button:hover:after{opacity:1; transform:scale(1);}
.product .swiper-control button.swiper-button-lock{display:none;}
	/* 공통 - 반응형 */
@media screen and (max-width:768px){
	.product .swiper-control button{--sizeBtn:80px;}
	.product .swiper-control button:before{width:30px;}
}
@media screen and (max-width:480px){
	.product .swiper-control button{--sizeBtn:65px;}
}


/* color */
[data-main="color"]{overflow:hidden; position:relative; padding-top:0 !important;}
[data-main="color"] .inr{--sizeGap:20px; display:flex; align-items:flex-start; gap:var(--sizeGap); position:relative;}
[data-main="color"] .inr :is(.color-slide__active, .color-slide__thumb){width:calc(35% - (var(--sizeGap) / 2));}
[data-main="color"]:before{content:''; display:block; position:absolute; left:0; z-index:2; width:calc(35% - 10px); height:100%; background-color:var(--color-white); border-top-right-radius:var(--roundSize);}
[data-main="color"] .swiper-control{position:absolute;}
[data-main="color"] .swiper-slide img{object-fit:cover; width:100%; height:100%;}
.color-slide__active{position:relative; z-index:5;}
.color-slide__active .box{overflow:hidden; position:relative; aspect-ratio:1/1; border-radius:var(--roundSize);}
.color-slide__active .box:before{content:''; display:block; position:absolute; bottom:0; left:0; z-index:1; width:100%; height:50%; background-image:linear-gradient(20deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 50%);}
.color-slide__active .box .title{position:absolute; bottom:clamp(40px, 5.208vw, 100px); left:clamp(40px, 4.167vw, 80px); z-index:5; color:var(--color-white);}
.color-slide__active .box .title > *{display:block;}
.color-slide__active .box .title i{opacity:0.4; margin-bottom:20px; font-family:var(--font-eng); font-size:18px; font-weight:600; letter-spacing:1px;}
.color-slide__active .box .title em{font-size:40px; font-weight:600;}
.color-slide__active .box .title p{opacity:0.8; margin-top:30px; font-size:18px;}
.color-slide__thumb .swiper{overflow:inherit;}
.color-slide__thumb .box{overflow:hidden; aspect-ratio:2/2.35; border-radius:var(--roundSize); cursor:pointer;}
.color-slide__thumb .swiper-slide{width:max(120px, 11vw/* 330px */);}
.color-slide__thumb .swiper-slide em{display:block; margin-top:15px; font-size:17px; text-align:center;}
.color-slide{display:flex; flex-wrap:wrap; gap:0 10px; position:absolute; right:0; bottom:0; width:65%; box-sizing:border-box; padding:0 var(--page-pad) 45px 20px;}
.color-slide p{width:100%; font-family:var(--font-subkor); font-size:45px; font-weight:600; line-height:2cap; text-align:right;}
.color-slide.swiper-control button{position:static; transform:translateY(0);}
.color-slide.swiper-control button.swiper_prev{transform:translateY(0) rotate(180deg);}

	/* color - 반응형 */

@media screen and (max-width:1680px){
	.color-slide p{font-size:35px;}
}
@media screen and (max-width:1400px){
	.color-slide{padding-bottom:0; padding-left:0;}
	.color-slide p{font-size:40px;}
	.color-slide__active .box .title em{font-size:30px;}
}
@media screen and (max-width:1280px){
	.color-slide p{margin-bottom:-40px;}
}
@media screen and (max-width:1024px){
	[data-main="color"]:before{width:calc(60% - 10px);}
	[data-main="color"] .inr{justify-content:flex-start;}
	[data-main="color"] .inr .color-slide__active{width:calc(60% - (var(--sizeGap) / 2));}
	[data-main="color"] .inr .color-slide__thumb{width:calc(40% - (var(--sizeGap) / 2));}
	.color-slide{width:40%; padding:0;}
	.color-slide p{font-size:30px;}
	.color-slide p br{display:none;}
	.color-slide__active .box .title{left:40px;}
	.color-slide__thumb .swiper-slide{width:max(130px, 19.531vw/* 200px */);}
	.color-slide__thumb .swiper-slide em{font-size:16px;}
}
@media screen and (max-width:768px){
	[data-main="color"]:before{display:none;}
	[data-main="color"] .inr{flex-direction:column;}
	[data-main="color"] .inr :is(.color-slide__active, .color-slide__thumb){width:100%;}
	[data-main="color"] .inr .color-slide__active{order:2;}
	[data-main="color"] .inr .color-slide__thumb{order:3;}
	[data-main="color"] .swiper-control{order:1; position:static; width:100%;}
	.color-slide p{text-align:center; margin-bottom:0;}
	.color-slide p br{display:block;}
	.color-slide.swiper-control button{position:absolute; top:40%; background-color:rgba(0,0,0,0.3);}
	.color-slide.swiper-control button:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 28.979'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='레이어_2' data-name='레이어 2'%3E%3Cg id='레이어_1-2' data-name='레이어 1'%3E%3Cpath class='cls-1' d='M19.061,28.979a.811.811,0,0,1-.787-1.014,17.758,17.758,0,0,1,8.739-11.724.5.5,0,0,0-.24-.939H.812a.812.812,0,1,1,0-1.623H26.773a.5.5,0,0,0,.24-.94A17.754,17.754,0,0,1,18.274,1.017.812.812,0,1,1,19.845.609c2.214,8.55,8.556,13.07,18.343,13.07a.812.812,0,1,1,0,1.623c-9.787,0-16.129,4.519-18.342,13.07A.812.812,0,0,1,19.061,28.979Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
	.color-slide.swiper-control button:after{display:none;}
	.color-slide.swiper-control button.swiper_prev{left:10px;}
	.color-slide.swiper-control button.swiper_next{right:10px;}
	.color-slide__thumb .swiper-slide{width:max(130px, 39.063vw/* 300px */);}
}
@media screen and (max-width:480px){
	.color-slide p{font-size:30px;}
	.color-slide__active .box:before{height:80%;}
	.color-slide__active .box .title{left:30px;}
	.color-slide__active .box .title i{font-size:16px;}
	.color-slide__active .box .title em{font-size:25px;}
	.color-slide__active .box .title p{margin-top:10px; font-size:17px;}
	.color-slide__thumb .swiper-slide{opacity:1; width:calc(100% / 2.5 - 10px); transition:opacity 0.3s;}
	.color-slide__thumb .swiper-slide-active{opacity:1;}
}
@media screen and (max-width:360px){
	.color-slide p br{display:none;}
}

/* 개인구매 */
article[data-subarea="product"]{padding-top:20px !important;}
.product_top_img{text-align:center; margin-bottom:clamp(30px, calc( 76 / var(--inner) * 100vw ), 60px);}
.product_top_img img{border-radius:var(--roundSize);}
.product_top_img img.mo{display:none;}
.product_list{padding-top:clamp(40px, calc( 76 / var(--inner) * 100vw ), 60px);}
@media screen and (max-width:860px){
    .product_top_img img.mo{display:block;}
    .product_top_img img.pc{display:none;}
}