@charset "utf-8";

/* root 설정  */
:root{
	--color-base:#fff; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#d84727;
	--color-white:#fff;
	--color-black:#000;	
    --primary: #14a9ff;
    --white: #fff;
    --gray: #666;
    --black: #111;
	--font-base:16rem;
	--font-eng:'Montserrat', serif;
	--font-kor:'Pretendard', serif;
	--font-combine:'Montserrat', 'Pretendard', serif;
	--font-hankook:'Hankook TTF Regular', serif;
	--font-hankookM:'Hankook TTF Medium', serif;
	--font-hankookT:'Hankook KR TTF', serif;

	--inr-narrow: 1280;
    --inr: 1540;
    --inr-wide: 1700;
    --inr-width: .92;
	--header-height: 120px;
}

/* Scroll Animation */
@media(prefers-reduced-motion:no-preference){
	section:has(:where([data-se*="-left"], [data-se*="-right"], [data-se="flip-Y"])){ overflow: clip visible; }
	span[data-se]{ display: inline-block; }
	.seActive [data-se]:not([data-se*="parallax"], [data-se^="clip-"]),
	.seActive[data-se]:not([data-se*="parallax"], [data-se^="clip-"]){ transition-duration: .6s; }
	[data-se="blur"]{ filter: blur(20px); }
	[data-se="radius"]{ border-radius: 100%; }
	[data-se="clip-centerline"]{ clip-path: inset(0 50%); }
	[data-se="clip-midline"]{ clip-path: inset(50% 0); }
	[data-se="clip-right"]{ clip-path: inset(0 100% 0 0); }
	[data-se="clip-left"]{ clip-path: inset(0 0 0 100%); }
	[data-se="clip-down"]{ clip-path: inset(0 0 100% 0); }
	[data-se*="flip-"]{ backface-visibility: hidden; }
	[data-se="flip-up"]{ transform: perspective(2500px) rotateX(-100deg); }
	[data-se="flip-Y"]{ opacity: 0; }
	[data-se="hidden-up"]{ transform: translateY(30px); clip-path: inset(0 0 100%); }
	[data-se="hidden-right"]{ transform: translateX(-30px); clip-path: inset(0 100% 0 0); }
	[data-se="hidden-left"]{ transform: translateX(30px); clip-path: inset(0 0 0 100%); }
	[data-se*="slide-"]:not(.seActive){ opacity: 0; }
	[data-se="slide-up"]{ transform: translateY(40px); }
	[data-se="slide-left"]{ transform: translateX(40px); }
	[data-se="slide-right"]{ transform: translateX(-40px); }
	[data-se="swaying-top"]{ transform: perspective(400px) rotateX(90deg); transform-origin: top; backface-visibility: hidden; }
	.seActive[data-se="blur"]{ filter: blur(0); }
	.seActive[data-se="radius"]{ border-radius: 0; }
	.seActive[data-se*="clip-"]{ clip-path: inset(0); }
	.seActive[data-se*="flip-"]{ transform: perspective(2500px) rotateX(0deg); }
	.seActive[data-se="flip-Y"]{ animation: flip-Y 1s both; }
	.seActive[data-se*="hidden-"]{ transform: translate(0); clip-path: inset(0); }
	.seActive[data-se*="slide-"]{ transform: translate(0); }
	@keyframes flip-Y {
		0%{ transform: perspective(400px) rotateY(0deg); opacity: 0; }
		20%{ transform: perspective(400px) rotateY(-30deg); }
		50%{ transform: perspective(400px) rotateY(20deg); }
		75%{ transform: perspective(400px) rotateY(-10deg); }
		100%{ transform: perspective(400px) rotateY(0deg); opacity: 1; }
	}
	.seActive[data-se="swaying-top"]{ animation: swaying-top 1s both; }
	@keyframes swaying-top{
		0%{ transform: perspective(400px) rotateX(90deg); }
		20%{ transform: perspective(400px) rotateX(-60deg); }
		40%{ transform: perspective(400px) rotateX(20deg); }
		60%{ transform: perspective(400px) rotateX(-10deg); }
		80%{ transform: perspective(400px) rotateX(5deg); }
		100%{ transform: perspective(400px) rotateX(0deg); }
	}
	.seActive [data-se-delay="50"], .seActive[data-se-delay="50"]{ transition-delay: .05s; }
	.seActive [data-se-delay="100"], .seActive[data-se-delay="100"]{ transition-delay: .1s; }
	.seActive [data-se-delay="150"], .seActive[data-se-delay="150"]{ transition-delay: .15s; }
	.seActive [data-se-delay="200"], .seActive[data-se-delay="200"]{ transition-delay: .2s; }
	.seActive [data-se-delay="250"], .seActive[data-se-delay="250"]{ transition-delay: .25s; }
	.seActive [data-se-delay="300"], .seActive[data-se-delay="300"]{ transition-delay: .3s; }
	.seActive [data-se-delay="350"], .seActive[data-se-delay="350"]{ transition-delay: .35s; }
	.seActive [data-se-delay="400"], .seActive[data-se-delay="400"]{ transition-delay: .4s; }
	.seActive [data-se-delay="450"], .seActive[data-se-delay="450"]{ transition-delay: .45s; }
	.seActive [data-se-delay="500"], .seActive[data-se-delay="500"]{ transition-delay: .5s; }
	.seActive [data-se-delay="600"], .seActive[data-se-delay="600"]{ transition-delay: .6s; }
	.seActive [data-se-delay="700"], .seActive[data-se-delay="700"]{ transition-delay: .7s; }
	@media(min-width: 768px){
		[data-se] [data-se="clip-right"]{ clip-path: inset(0 100% 0 0); }
		[data-se] [data-se="clip-left"]{ clip-path: inset(0 0 0 100%); }
		[data-se] [data-se="clip-down"]{ clip-path: inset(0 0 100% 0); }
		[data-se] [data-se="slide-up"]{ transform: translateY(40px); opacity: 0; }
		[data-se] [data-se="slide-left"]{ transform: translateX(40px); opacity: 0; }
		[data-se] [data-se="slide-right"]{ transform: translateX(-40px); opacity: 0; }
		.seActive[data-se] [data-se*="clip-"]{ clip-path: inset(0); }
		.seActive[data-se] [data-se*="hidden-"]{ transform: translate(0); clip-path: inset(0); }
		.seActive[data-se] [data-se*="flip-"]{ transform: perspective(2500px) rotateX(0deg); }
		.seActive[data-se] [data-se*="slide-"]{ transform: translate(0); opacity: 1; }
		.seActive[data-se]:not([data-se-offset]) [data-se]{ transform: translate(0); opacity: 1; }
		[data-se-column] [data-se].seActive{ transition-delay: calc(var(--index) * calc(var(--delay) * 1ms)); animation-delay: calc(var(--index) * calc(var(--delay) * 1ms)); }
	}
	@media(min-width:1280px){
		.seActive[data-se^="clip-"]{ transition-duration: 1s; }
		[data-se-column="2"] > *:nth-child(2n+1) [data-se].seActive,
		[data-se-column="2"] [data-se].seActive:nth-child(2n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="2"] > *:nth-child(2n+2) [data-se].seActive,
		[data-se-column="2"] [data-se].seActive:nth-child(2n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="2"] > *:nth-child(3n+1) [data-se].seActive,
		[data-se-column="3"] [data-se].seActive:nth-child(3n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] > *:nth-child(3n+2) [data-se].seActive,
		[data-se-column="3"] [data-se].seActive:nth-child(3n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] > *:nth-child(3n+3) [data-se].seActive,
		[data-se-column="3"] [data-se].seActive:nth-child(3n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] > *:nth-child(4n+1) [data-se].seActive,
		[data-se-column="4"] [data-se].seActive:nth-child(4n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] > *:nth-child(4n+2) [data-se].seActive,
		[data-se-column="4"] [data-se].seActive:nth-child(4n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] > *:nth-child(4n+3) [data-se].seActive,
		[data-se-column="4"] [data-se].seActive:nth-child(4n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] > *:nth-child(4n+4) [data-se].seActive,
		[data-se-column="4"] [data-se].seActive:nth-child(4n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+1) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+2) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+3) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+4) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+5) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+5){ transition-delay: calc(4 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+1) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+2) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+3) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+4) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+5) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+5){ transition-delay: calc(4 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+6) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+6){ transition-delay: calc(5 * calc(var(--delay) * 1ms)); }
	}
	@media(max-width: 1279px){
		.seActive[data-se^="clip-"]{ transition-duration: .6s; }
		[data-se-column] [data-se*="slide-"]{ transform: translateY(40px); }
		[data-se-column] [data-se*="slide-"].seActive{ transform: translate(0); }
	}
	@media(max-width: 1279px) and (min-width: 768px){

		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+1), :nth-child(6n+4)){ transition-delay: calc( 0 * calc(var(--delay) * 1ms)); }
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+2), :nth-child(6n+5)){ transition-delay: calc( 1 * calc(var(--delay) * 1ms)); }
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+3), :nth-child(6n+6)){ transition-delay: calc( 2 * calc(var(--delay) * 1ms)); }
	}
	@media(max-width: 767px){
		#wrap [data-se-delay]{ transition-delay: 0s; }
		[data-se-column] > *:nth-child(odd){ transition-delay: 0s; }
		[data-se-column] > *:nth-child(even){ transition-delay: calc(var(--delay) * 1ms); }
	}
	@keyframes svgAni{
		0%{ stroke-dasharray: var(--totalLength); stroke-dashoffset: var(--totalLength); }
		100%{ stroke-dasharray: var(--totalLength); stroke-dashoffset: 0; }
	}
	svg.se{ opacity: 1; transform: translate(0); }
	svg.active{ animation: svgAni 1s linear both; }
}

/* 공통설정 */
/* *{ accent-color: var(--color-point); outline-color: var(--color-point); } */
#content img{max-width:100%;}
.inr_1560{max-width:1560px; margin:0 auto; padding:0 20px;}
.none-pc{display:none;}
.bd-md{max-width: 1240px;}
[class*='bd']{/* width: 100%;  */margin-left:auto; margin-right:auto; position: relative; padding: 0;}
/* scroll */
::-webkit-scrollbar{width:8px; height:0;}
::-webkit-scrollbar-thumb{background-color:hsl(0deg 0% 42.82% / 58%); border-radius:100px;}

/* inner */
#wrap{ overflow-x:clip !important;}
.wrapper{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1px); width: calc(var(--inr-width) * 100%); }
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1px); width: calc(var(--inr-width) * 100%); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1px); }

/* header */
#header{position:fixed; top:-120px; left:0; opacity:0; z-index:60; width:100%; animation:hdmove 1.5s both; transition:0.8s ease; transition-property:opacity, transform, border;}
#header .inr{display:flex; align-items:center; position:static; max-width:calc(var(--inr-wide) * 1px); padding:35px 0;}
#header .logo{flex:none; position:relative; z-index:5; width:236px; height:44px; transition:width 0.3s ease;}
#header .logo a{display:flex;  width:100%; height:100%; background:url(/images/common/logo_w.svg) no-repeat 50% 0; background-size:100% auto; font-size:0;}
#header .logo img{max-width:100%;}
.isScrolled #header{top:0; transform:translateY(-120px); opacity:0;}
	/* back */
.theme__black #header{border-bottom:1px solid rgba(19,19,19,0.1); transition-duration:0.8s, 0.8s, 0.3s;}
.theme__black #header .logo a{background-image:url(/images/common/logo_b.svg);}
.isScrolled .theme__black #header{border-bottom-color:rgba(19,19,19,0);}

@keyframes hdmove{
    0{top:-120px; opacity:0;}
    100%{top:0; opacity:1;}
}

	/* header 반응형 */	
@media screen and (max-width:1400px){
	#header .logo{order:1;}
	#header .inr{padding:clamp(15px, calc(35 / 1400 * 100vw), 35px) 0;}
}
@media screen and (max-width:1024px){	
	#header .logo{width:200px; height:37px;}
	#header .inr{padding:clamp(10px, calc(20 / 1024 * 100vw), 20px) 0;}
	.none-pc{display:block;}	
}
@media screen and (max-width:420px){
	#header .logo{width:140px; height:26px;}
}						   
@media screen and (max-width:345px){
	#header .logo{width:52.174vw/* 180px */; height:9.855vw/* 34px */;}
}

/* gnb */
#header nav{flex:auto; display:flex; justify-content:flex-end; align-items:stretch; position:relative; z-index:5;}
#header nav .gnb{--sizeGnb:50px; display:flex; flex-wrap:wrap; align-items:center; gap:0 75px; height:var(--sizeGnb); margin-right:80px;}
#header nav .gnb a{display:inline-flex; align-items:center; height:100%; transition:opacity 0.3s, color 0.3s;}
#header nav .gnb > li{position:relative; height:100%;}
#header nav .gnb > li > a{font-size:18px; color:var(--color-white); font-weight:500; font-family:'Hankook TTF Medium','Pretendard', serif;}
#header nav .gnb > li > a.on{color:var(--color-point);}
#header nav .gnb .box{opacity:0; visibility:hidden; position:absolute; left:50%; z-index:60; min-width:150px; box-sizing:border-box; padding:25px 15px; background:#101010; color:#828282; transform:translateX(-50%); transition:opacity 0.3s, visibility 0.3s; text-align:center;}
#header nav .gnb .box ul > li{padding:10px 0; font-size:15px;}
#header nav .gnb .box ul > li a{font-weight:500;}
#header nav .gnb .box ul > li a:hover{color:#fff;}
#header nav .gnb .box ul > li > ul{display:none;}
.depth03{display:none;}
	/* active */
#header nav .gnb li.active .box{opacity:1; visibility:visible;}
	/* gnb menu control */
.gnb-btn__open{display:none; justify-content:center; align-items:center; min-width:50px; background-color:transparent; aspect-ratio:1/1;}
.gnb-btn__open i{font-size:0;}
.gnb-btn__open span{overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; width:14px; height:14px; background:url(../images/common/btn_gnb_menu.svg) no-repeat 50% 50%; background-size:100% auto; transition:transform 0.3s ease;}
.gnb-btn__open:hover span{transform:rotate(90deg);}
	/* back */
.theme__black #header nav .gnb > li > a{color:#111;}
	/* animation */
@keyframes gnbShow{
	0%{transform:translateX(0);}
	50%{transform:translateX(150%);}
	100%{transform:translateX(0%);}
}
	/* gnb 반응형 */
@media screen and (max-width:1550px){
	#header nav .gnb{height:auto; margin-right:50px; 0 50px; gap:0 50px;}
	#header nav .gnb > li{height:auto; padding:5px 0px;}
    #header nav .gnb > li > a{font-size:16px;}
}
@media screen and (max-width:1400px){
	#header nav{order:3; flex:unset;}
	#header nav .gnb{display:none;}
		/* gnb menu control */
	.gnb-btn__open{display:flex; height:50px; margin-left:20px;}
	.gnb-btn__open span{overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:20px; height:auto; background:transparent;}
	.gnb-btn__open span:before,
	.gnb-btn__open span:after,
	.gnb-btn__open span i{content:''; display:block; width:100%; height:2px; background:var(--color-white); transform:translateX(0);}
	.gnb-btn__open:hover span:before,
	.gnb-btn__open:hover span:after,
	.gnb-btn__open:hover span i{animation:gnbShow 0.5s ease forwards;}
	.gnb-btn__open:hover span:before{animation-delay:0.1s;}
	.gnb-btn__open:hover span i{animation-delay:0.2s;}
	.gnb-btn__open:hover span:after{animation-delay:0.3s;}

	.theme__black .gnb-btn__open span:before,
	.theme__black .gnb-btn__open span:after,
	.theme__black .gnb-btn__open span i{background:#101010;}
}
@media screen and (max-width:480px){
	.gnb-btn__open{margin-left:5px;}
}

/* gnb all & mobile */
.gnb-mob{opacity:0; visibility:hidden; position:absolute; top:100%; left:0; z-index:60; width:100%; background-color:var(--color-white); border-bottom:1px solid #e8e8e8; transition:opacity 0.3s, visibility 0.3s;}
.gnb-mob .util{display:none;}
.gnb-mob .gnb{--sizePad:50px; max-width:1560px; margin:0 auto; padding:calc(var(--sizePad) - 10px) 20px;}
.gnb-mob .gnb > ul{display:flex; flex-wrap:wrap; align-items:stretch; gap:35px 0; margin-left:var(--sizePad);}
.gnb-mob .gnb > ul > li{width:calc(100% / 8); box-sizing:border-box; padding:0 5px; font-size:15px;}
.gnb-mob .gnb > ul > li a{display:inline-flex; align-items:center; transition:opacity 0.3s;}
.gnb-mob .gnb > ul > li > a{font-weight:600;}
.gnb-mob .gnb > ul > li > .box{margin-top:10px;}
.gnb-mob .gnb > ul > li > .box > ul > li{padding:7px 0;}
.gnb-mob .gnb > ul > li > .box a{font-size:14px;}
.gnb-mob .gnb button.open{display:none; position:absolute; top:10px; right:10px; width:40px; height:40px; box-sizing:border-box; padding:10px; background-color:transparent; font-size:0;}
.gnb-mob .gnb button.open:before,
.gnb-mob .gnb button.open:after{content:''; display:block; position:absolute; width:11px; height:1px; background-color:#999; border-radius:2px; transform-origin:50% 50%; transition:transform 0.2s cubic-bezier(0.86,0,0.07,1);}
.gnb-mob .gnb button.open:before{margin-left:1px; transform:rotate(45deg);}
.gnb-mob .gnb button.open:after{margin-left:9px; transform:rotate(-45deg);}
.gnb-mob .gnb button.open.active:before{transform:rotate(-45deg);}
.gnb-mob .gnb button.open.active:after{transform:rotate(45deg);}
	/* hover */
.gnb-mob .gnb > ul > li a:hover{opacity:0.5;}
	/* close */
.gnb-mob__close{display:block; position:absolute; right:20px; top:20px; width:35px; height:35px; background-color:transparent; font-size:0;}
.gnb-mob__close i{font-size:35px; transition:transform 0.3s;}
.gnb-mob__close:hover i{transform:rotate(90deg);}
	/* active */
.gnb-mob.active{opacity:1; visibility:visible;}
	/* gnb all & mobile 반응형 */
@media screen and (max-width:1400px){
	body{overflow:inherit; position:relative;}
	body.active{overflow:hidden; position:fixed; width:100%;}
	
	.gnb-mob{top:0; display:flex; flex-direction:column; align-items:flex-start; height:calc(var(--vh, 1vh) * 100); background-color:rgba(0,0,0,0.7);}
	.gnb-mob .util,
	.gnb-mob .gnb{width:40%; box-sizing:border-box; margin:0; background-color:var(--color-white); color:#111;}
	.gnb-mob .gnb{overflow-y:auto; flex:auto; padding:0 0 30px;}
	.gnb-mob .gnb > ul{display:block; margin-left:0;}
	.gnb-mob .gnb > ul > li{position:relative; width:100%; padding:0;}
	.gnb-mob .gnb > ul > li a{display:flex; align-items:center;}
	.gnb-mob .gnb > ul > li > a{padding:20px; border-bottom:1px solid #f0f0f0; font-size:18px;}
	.gnb-mob .gnb > ul > li > .box{display:none; margin-top:0; padding:20px; background-color:#f8f8f8;}
	.gnb-mob .gnb > ul > li > .box a{padding:7px 0; font-size:16px;}
	.gnb-mob .gnb > ul > li > .box > ul > li{padding:0;}
	.gnb-mob .gnb button.open{display:block;}
	.gnb-mob .util{flex:none; display:block; background-color:#f8f8f8; border-bottom:1px solid #f0f0f0;}
	.gnb-mob .util ul{display:flex; align-items:center; gap:15px; padding:0 20px;}
	.gnb-mob .util ul > li a{display:block; padding:15px 0; color:#666;}
	.gnb-mob .util [data-util] span{width:auto; height:auto; background:none; font-size:15px;}
	.gnb-mob .util .basket-count{position:static;}
		/* hover */
	.gnb-mob .gnb > ul > li a:hover{opacity:1;}
		/* close */
	.gnb-mob__close i{color:var(--color-white);}
}
@media screen and (max-width:1024px){
	.gnb-mob .util,
	.gnb-mob .gnb{width:80%;}
}
@media screen and (max-width:480px){
	.gnb-mob .util [data-util] span{font-size:14px;}
}

/* gnb 별도노출 */
.gnb-main__mob{display:none; position:sticky; top:62px; z-index:50; border-top:1px solid #929090;}
.gnb-main__mob .gnb{display:grid; grid-template-columns:repeat(4, 1fr); background-color:rgba(239,239,239,0.9);}
.gnb-main__mob .gnb > li{box-sizing:border-box; background-color:rgba(255,255,255,1); border:1px solid #e9e8e8; border-width:0 0 1px 1px;}
.gnb-main__mob .gnb > li:nth-child(4n+1){border-left-width:0;}
.gnb-main__mob .gnb > li a{display:flex; justify-content:center; align-items:center; min-height:40px; font-size:13px; line-height:1.5cap; font-weight:500; text-align:center; word-break:keep-all;}
.gnb-main__mob .gnb > li .box{display:none !important;}
.gnb-main__mob .gnb .none-pc{display:none !important;}
	/* gnb 별도노출 - 반응형 */
@media screen and (max-width:480px){	
	.gnb-main__mob .gnb > li a{font-size:12px;}
}

/* util */
.area_util{display:flex; justify-content:space-between; align-items:center;}
.util-list{display:flex; align-items:center; gap:0 38px; position:relative; z-index:5; font-size:14px; color:var(--color-white); font-weight:500;}
.util-list > li{display:flex;}
[data-util] span{display:block; width:25px; height:25px; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; font-size:0;}
[data-util="basket"]{display:inline-flex !important; align-items:center; gap:2px; position:relative;}
[data-util="basket"] span{width:25px; background-image:url(../images/common/ico_cart.svg);}
[data-util="mypage"] span{background-image:url(../images/common/util_my.svg);}
[data-util="login"] span{background-image:url(../images/common/util_login.svg);}
[data-util="logout"] span{background-image:url(../images/common/util_logout.svg);}
	/* back */
.theme__black [data-util="basket"] span{background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Isolation_Mode' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cpath fill='%23111' d='M21.4,25H3.6c-0.4,0-0.8-0.3-0.8-0.8V6c0-0.4,0.3-0.8,0.8-0.8h17.9c0.4,0,0.8,0.3,0.8,0.8v18.2 C22.2,24.6,21.9,25,21.4,25z M4.3,23.4h16.3V6.7H4.3V23.4z'/%3E%3Cpath fill='%23111' d='M16.6,9.2c-0.4,0-0.8-0.3-0.8-0.8V4.9c0-1.8-1.5-3.3-3.3-3.3S9.2,3.1,9.2,4.9v3.5c0,0.4-0.3,0.8-0.8,0.8 S7.6,8.9,7.6,8.4V4.9C7.6,2.2,9.8,0,12.5,0c2.7,0,4.9,2.2,4.9,4.9v3.5C17.4,8.9,17,9.2,16.6,9.2z'/%3E%3C/svg%3E%0A");}
.theme__black [data-util="mypage"] span{background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 516 516'%3E%3Cpath fill='%23111' d='M515.92,405.46c-.11-.38-.23-.75-.35-1.12-.22-.67-.43-1.29-.49-1.85-2.49-20.74-9.62-39.38-21.2-55.38-18.4-25.43-44.09-44.2-83.29-60.86-4.95-2.1-10.46-1.94-15.54.44-5.68,2.67-10.16,7.92-11.99,14.03-3.33,11.15,1.82,21.69,13.12,26.85,20.17,9.21,36.4,19.41,49.63,31.2,15.02,13.39,23.47,29.35,25.12,47.43,1.08,11.84,1.05,24.04,1.02,35.83,0,3.64-.02,7.28,0,10.92.04,5.6-1.74,10.36-5.13,13.78-3.42,3.44-8.21,5.25-13.86,5.26-130.09.03-261.29.03-389.96,0-11.47,0-18.92-7.5-18.98-19.09l-.02-3.04c-.06-10.79-.12-21.95.03-32.92.33-23.86,9.51-43.76,27.29-59.14,16.64-14.4,36.82-26.16,61.69-35.96,35.78-14.1,76.17-21.29,123.48-21.97,12.99-.19,23.98-1.32,33.61-3.47,36.09-8.05,67.76-28.71,89.18-58.18,21.39-29.43,31.31-65.89,27.92-102.67-2.81-30.5-14.97-59.14-35.17-82.84-20.21-23.72-46.55-40.22-76.17-47.72-5.77-1.46-11.72-2.5-17.46-3.49-2.68-.47-5.36-.93-8.03-1.44l-24.38-.04-.4.04c-3.06.62-6.2,1.19-9.24,1.75-6.63,1.21-13.49,2.47-20.11,4.3-58.06,16.06-102.2,69.08-107.36,128.95-4.5,52.23,13.75,96.29,54.24,130.97.04.04.09.07.13.11-1.99.55-3.98,1.08-5.97,1.62-6.36,1.72-12.93,3.5-19.34,5.51-36.89,11.59-67.38,27.72-93.2,49.32-25.17,21.06-39.93,48.1-43.89,80.38-.05.42-.24.93-.43,1.46-.12.33-.24.65-.34.98l-.09.29v56.66l.12.34c.84,2.27,1.62,4.65,2.37,6.96,1.69,5.2,3.44,10.57,6.16,15.42,8.8,15.73,22.84,25.77,41.73,29.85.62.13,1.26.36,1.94.61.35.13.71.25,1.06.37l.3.1h408.6l.27-.08c1.18-.33,2.38-.65,3.57-.96,2.62-.68,5.32-1.39,7.93-2.36,21.93-8.16,35.68-23.96,40.87-46.97.14-.63.37-1.27.62-1.96.13-.35.25-.7.37-1.05l.1-.3v-56.6l-.08-.27ZM183.08,224.87c-20.06-20.08-31.1-46.7-31.08-74.97.02-28.27,11.1-54.87,31.19-74.9,20.05-19.99,46.62-30.99,74.85-30.99h.17c28.25.05,54.82,11.14,74.83,31.24,20.04,20.12,31.03,46.79,30.95,75.1-.16,58.25-47.7,105.65-105.97,105.66h-.02c-28.26,0-54.86-11.05-74.92-31.13Z'/%3E%3C/svg%3E");}
.theme__black [data-util="login"] span{background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 21'%3E%3Cpath id='Shape' fill='%23111' fill-rule='evenodd' d='M14,7h-1v-2c0-2.8-2.2-5-5-5S3,2.2,3,5v2h-1c-1.1,0-2,.9-2,2v10c0,1.1.9,2,2,2h12c1.1,0,2-.9,2-2v-10c0-1.1-.9-2-2-2h0ZM8,1.9c1.7,0,3.1,1.4,3.1,3.1v2h-6.1v-2h-.1c0-1.7,1.4-3.1,3.1-3.1h0ZM14,19H2v-10h12v10h0ZM8,16c1.1,0,2-.9,2-2s-.9-2-2-2-2,.9-2,2,.9,2,2,2h0Z'/%3E%3C/svg%3E");}
.theme__black [data-util="logout"] span{background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 21'%3E%3Cpath fill='%23111' d='M0,9v10c0,1.1.9,2,2,2h12c1.1,0,2-.9,2-2v-10c0-1.1-.9-2-2-2h-1s-2,0-2,0h-.71s-5.39,0-5.39,0v-1.86c0-1.49.99-2.87,2.44-3.17,1.68-.36,3.21.7,3.63,2.19.12.43.48.74.93.74h0c.63,0,1.08-.6.92-1.21C12.28,1.59,10.42.06,8.13,0,5.31-.07,3,2.41,3,5.23v1.77s-1,0-1,0C.9,7,0,7.9,0,9ZM2,9h12v10H2v-10Z'/%3E%3Ccircle fill='%23111' cx='8' cy='14' r='2'/%3E%3C/svg%3E");}

.basket-count{display:inline-block; position:absolute; right:-5px; top:-2px; padding:2px 5px; border-radius:50px; background-color:var(--color-point); font-size:11px; line-height:1.2; font-weight:600; color:var(--color-white);}
	/* util-search */
.search-util{display:flex; align-items:center; margin-left:auto;}
.search-util .search-util__link{display:inline-block; font-size:14px; color:#666; font-weight:500;}
.search-util .box{display:none; position:absolute; top:0; left:50%; z-index:1; width:100%; height:auto; box-sizing:border-box; padding:150px 60px 100px; background-color:#111; transform:translateX(-50%);}
.search-util .box.active{display:block;}
.search-util__design{position:relative; width:90%; height:52px; margin:0 auto;}
.search-util input[type="text"]{width:100%; height:100%; margin:0; padding-right:50px; background-color:transparent; border:0; border-bottom:1px solid rgba(255, 255, 255, 0.8); font-size:18px;}
.search-util .btn_search{opacity:0.8; display:block; position:absolute; right:10px; top:50%; width:28px; height:100%; background:url(../images/common/ico_search.svg) no-repeat 50% 50%; background-size:26px 26px; transform:translateY(-50%); transition:opacity 0.3s;}
.search-util .btn_search span{font-size:0;}
.search-util .btn_search:hover{opacity:1;}
.search-util__control{display:block; position:relative; z-index:5; width:50px; height:50px; margin-right:10px; background-color:transparent; font-size:0;}
.search-util__control i{display:block; width:26px; height:26px; margin:0 auto; background:url(../images/common/ico_search.svg) no-repeat 50% 50%; background-size:100% auto; font-size:0; transition:background 0.3s ease;}
.search-util__control.active i{width:20px; background-image:url(../images/common/ico_close.svg);}
	/* util 반응형 */
@media screen and (max-width:1400px){
	.area_util{order:2; margin-left:auto;}
}
@media screen and (max-width:1024px){
	.area_util{padding:0; border-width:0;}
	.search-util .box{padding:100px 20px 10px; background-color:#000;}
	.search-util input[type="text"],
	.search-util .btn_search{height:50px;} 
	.search-util input[type="text"]{padding-left:15px; padding-right:65px;}
	.search-util .btn_search{right:20px; width:60px; background-size:20px 20px;}
	.search-util .search-util__link{display:none;}
}
@media screen and (max-width:480px){
	.search-util__design{width:100%;}
	.search-util .box{padding-top:80px;}
	.search-util .btn_search,
	.search-util input[type="text"]{height:50px;} 
	.search-util .btn_search{right:0px; width:50px;}
	.search-util input[type="text"]{padding-right:55px; font-size:16px;}
	.search-util__control{margin-right:0;}
	.util-list{display:none;}
}

/* quick */
.quick-menu{opacity:0; visibility:hidden; position:fixed; right:20px; bottom:10%; z-index:90; transition:0.5s ease 0s; transition-property:opacity, visibility;}
.quick-menu.show{opacity:1; visibility:visible;}
.quick-menu__list{display:flex; flex-direction:column; gap:5px;}
.quick-menu__list a{display:inline-flex; justify-content:center; align-items:center; width:60px; height:60px; box-sizing:border-box; border-radius:100%; font-size:0;}
.quick-menu__list [data-sns="kakao"]{background-color:#fae100; color:#3c1d1e;}
.quick-menu__list [data-sns="kakao"] span{font-size:40px;}
.quick-menu__list [class*="btn_"]{background-color:#030104; border:1px solid #030104; box-shadow:0 10px 20px rgba(0,0,0,0.15); transition:0.5s ease;}
.quick-menu__list [class*="btn_"] span{opacity:0.8; font-size:23px; color:#fff; transition:0.3s ease 0s;}
.quick-menu__list [class*="btn_"]:hover{background-color:#fff;}
.quick-menu__list [class*="btn_"]:hover span{opacity:1; color:#030104;}
	/* quick 반응형 */
@media screen and (max-width:768px){
	.quick-menu{right:10px;}
	.quick-menu__list a{width:50px; height:50px;}
	.quick-menu__list [data-sns="kakao"] span{font-size:30px;}
}
@media screen and (max-width:480px){
	.quick-menu{top:auto; bottom:5%; transform:translateY(0);}
	.quick-menu__list li:not(:first-child){display:none;}
}

/* footer */
#footer{position:relative; z-index:2; background-color:#101010; }
.footer-inr{display:grid; grid-template:"a" "b" "c" / 1fr; gap:11px 20px; align-items:flex-start; padding:160px 0 60px; color:rgba(255, 255, 255, 0.7);}
.footer-logo{grid-area:a;}
.footer-logo a{display:block; margin:0 auto 45px; width:190px;}
.footer-logo img{display:block; width:100%;}
	/* footer link */
.footer-info .link{display:flex; align-items:center; justify-content:center; margin-bottom:45px; color: #888;}
.footer-info .link{gap:5px 38px;}
.footer-info .link a{display:inline-block; font-weight:400; font-size:16px; transition:.2s;}
.footer-info .link a:hover{color:#fff;}
footer .separator{ width: 1px; height: 12px; background: currentColor; opacity: .12; }
	/* footer info */
.footer-info{grid-area:b; text-align:center;}
.footer-info span{display:inline-flex; align-items:baseline; gap:0 5px; margin:3px 13px; padding:3px 0; font-size:16px; color: #888;}
.footer-info span b{color:#afafaf; font-weight:600;}
.footer-info p{margin-top:30px;}   
	/* footer address */
.footer-address{grid-area:name;}
	/* footer copyright */
.footer-copyright{grid-area:c; margin-top:40px; font-size:16px; font-weight:300; color: #888; text-align:center;}
	/* footer sns */
.footer-sns{display:flex; align-items:center; gap:0 35px;}
.footer-sns li{flex:none;}
.footer-sns [data-sns]{opacity:1; display:inline-block; width:32px; color:#111; font-size:0; transition:opacity 0.3s;}
.footer-sns [data-sns] i{font-size:32px;}
.footer-sns [data-sns="naver"] i{display:inline-block; width:25px; height:25px; background:url(../images/common/sns_naver_talk.svg) no-repeat 50% 0; background-size:100% auto;}
.footer-sns [data-sns]:hover{opacity:0.6;}
	/* footer top */
#footer .top_btn{position:absolute; right:0; top:60px; display:block; transition:opacity 0.3s ease;}
#footer .top_btn img{height:36px;}
#footer .top_btn:hover{opacity:0.3;}
	/* footer 반응형 */
@media screen and (max-width:1024px){
	.footer-inr{gap:20px 0; padding:160px 0 100px;}
	.footer-cs h2{display:none;}
	.footer-info span{display:inline-block;}
	.footer-info br{display:none;}
	.footer-copyright{padding:5px 15px;}
	.footer-sns{gap:0 25px;}
}
@media screen and (max-width:768px){
    .footer-inr{padding:100px 0 60px;}
	.footer-copyright{flex-wrap:wrap; justify-content:flex-start; height:auto; margin-top:20px; padding:0; background-color:transparent;}
	.footer-copyright p{order:2; width:100%; margin-top:10px;}
	.footer-sns{order:1;}
	.footer-cs .tel{font-size:25px;}
}
@media screen and (max-width:580px){
	.footer-logo a{margin-bottom:20px; width:120px;}
	.footer-info .link{gap:5px 10px; margin-bottom:20px;}
	.footer-info .link a{font-size:14px;}
	.footer-info span{display:block; font-size:14px;}
	.footer-cs .tel{font-size:25px;}
	.footer-copyright{font-size:13px;}	
}
@media screen and (max-width:480px){
	#footer .top_btn{bottom:20px; top:auto;}
	#footer .top_btn img{height:30px;}
}

/* 서브비쥬얼    transform: perspective(1200px) scale(0.9675);        */
.area-subVisual{position:fixed; left:0; top:0; display:flex; flex-direction:column; justify-content:flex-end; box-sizing:border-box; width:100%; height:100vh; z-index:1;}
.area-subVisual .obj-bg{ overflow:hidden; display:block; position:absolute; inset: 0; background: no-repeat 50% / cover; }
.area-subpageTit{display:flex; align-items:flex-end; position:relative; height:100vh; z-index:2;}
.area-subpageTit .inr{padding-bottom:180px; transition:1s;}
.isScrolled .area-subpageTit .inr{transform: perspective(1200px) scale(0.9675);}
.area-subpageTit h2{font-size:clamp(34px, calc( 76 / var(--inr) * 100vw ), 76px); color:#fff}
.area-subpageTit p{margin-top:15px; font-size:clamp(16px, calc( 22 / var(--inr) * 100vw ), 22px); color:#fff; font-weight:100;}
.area-subpageTit p > br{display:none;}
.area-subpageTit .scrl{display:block; position:absolute; right:0; bottom:180px; width:174px; height:174px;}
.area-subpageTit .scrl_txt{display:block; width:100%; height:100%; object-fit:contain; animation:scrlTxt 12s linear infinite;}
.area-subpageTit .scrl_arrow{display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22px;}
[data-sublayout="member_center"],
[data-sublayout="member_center"] ~ .area-subpageTit,
[data-sublayout="member"],
[data-sublayout="member"] ~ .area-subpageTit,
[data-sublayout="contact"],
[data-sublayout="contact"] ~ .area-subpageTit,
[data-sublayout="biz"],
[data-sublayout="biz"] ~ .area-subpageTit,
[data-sublayout="product"],
[data-sublayout="product"] ~ .area-subpageTit{display:none;}
@keyframes scrlTxt{
    100%{rotate:1turn;}
}
@media screen and (max-width:1024px){
/*	.area-subVisual .obj-bg{background-position-y:100%;}*/
    .area-subpageTit p > br{display:block;}
}
@media screen and (max-width:768px){
    .area-subpageTit .inr{padding-bottom:50%;}
    .area-subpageTit .scrl{bottom:50px; width:120px; height:120px;}
    .area-subpageTit .scrl_arrow{width:18px;}
}

/* lnb */
.area_lnb{display:none;}
.area_lnb .lnb > ul > li > ul{display:none;}

/* scroll text */
[data-scrollAni]{position:relative;}
[data-scrollAni] span{display:block; position:relative; color:rgba(255,255,255,0.1);}
[data-scrollAni] span i{display:block; position:absolute; color:rgba(255,255,255,1);}

/* flow text */
[data-flow]{position:absolute; left:0px; top:0px; font-family:var(--font-hankookM); font-size:clamp(50px, calc(100 / var(--inr) * 100vw), 100px); white-space:nowrap;}
[data-flow] .eocjs-newsticker-container{position:relative; width:100%; padding-top:30%;}
[data-flow].eocjs-newsticker .eocjs-newsticker-one,
[data-flow].eocjs-newsticker .eocjs-newsticker-two{position:absolute; left:0; top:0; display:flex; align-items:center; white-space:nowrap; line-height:1em;}
[data-flow].eocjs-newsticker span[class*="item"]{--padSize:clamp(50px, calc(100 / var(--inr) * 100vw), 100px); position:relative; padding-left:var(--padSize);}
[data-flow].eocjs-newsticker span[class*="item"]:before{content:''; display:block; position:absolute; left:calc(var(--padSize) / 2); top:50%; width:14px; height:14px; margin-top:-7px; background:#fff; border-radius:100%;}
[data-flow].eocjs-newsticker span.item02{color:var(--color-point);}
[data-flow].eocjs-newsticker span.item02:before{background-color:var(--color-point);}
@media screen and (max-width:768px){
	[data-flow]{font-size:clamp(30px, calc(60 / 768 * 100vw), 60px);}
	[data-flow].eocjs-newsticker span[class*="item"]:before{display:none;}
}

/* button custom */
.btn-arrow{display:inline-flex; align-items:center; gap:10px; position:relative; min-height:40px; font-family:var(--font-hankook); font-size:17px;}
.btn-arrow span{transform:translateX(0); transition:transform 0.4s ease 0s;}
.btn-arrow:before{content:''; opacity:0; position:absolute; transform:translateX(-20px);}
.btn-arrow .arrow{opacity:1; transform:translateX(0);}
.btn-arrow:before,
.btn-arrow .arrow{display:block; width:14px; height:12px; background:url(../images/main/btn_arrow.svg) no-repeat 50% 50%; background-size:100% auto; transition:0.4s ease 0s; transiton-property:transform, opacity;}
.btn-arrow .line{display:block; position:absolute; bottom:0; width:100%; height:1px; background-color:#fff; transition:transform 0.3s ease-in-out 0s;}
.btn-arrow .line.left{transform:scaleX(0); transform-origin:0 0;}
.btn-arrow .line.right{transform:scaleX(1); transform-origin:100% 0;}
.btn-arrow:hover .line.left{transform:scaleX(1); transition-delay:0.3s;}
.btn-arrow:hover .line.right{transform:scaleX(0);}
.btn-arrow:hover span,
.btn-arrow:hover .arrow{transform:translateX(20px);}
.btn-arrow:hover .arrow{opacity:0;}
.btn-arrow:hover:before{opacity:1; transform:translateX(0px);}

/* ready */
.ready-page{
	&{padding:80px 0 50px; text-align:center;}
	strong{display:block; font-size:35px;}
	strong i{opacity:0.2; display:block; margin-bottom:10px; font-size:45px;}
	p{margin-top:20px; font-size:18px; line-height:1.4;}
}
/* ready-반응형 */
@media screen and (max-width:480px){
	.ready-page{
		&{padding-top:20px;}
		strong{font-size:30px;}
		p{font-size:16px; word-break:keep-all;}
		p br{display:none;}
	}
}