@charset "utf-8";

.wrapper{width:1400px; margin:0 auto;}
.wrap{width:1200px; margin:0 auto;}
.ml12 .letter{display: inline-block;}
.area_visual .ml12 > *{opacity:0;}
/* 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(20rem); }
	[data-se="bright"]{ opacity: 0; }
	[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(2500rem) rotateX(-100deg); }
	[data-se="flip-Y"]{ opacity: 0; }
	[data-se="hidden-up"]{ transform: translateY(30rem); clip-path: inset(0 0 100%); }
	[data-se="hidden-right"]{ transform: translateX(-30rem); clip-path: inset(0 100% 0 0); }
	[data-se="hidden-left"]{ transform: translateX(30rem); clip-path: inset(0 0 0 100%); }
	[data-se*="slide-"]:not(.seActive){ opacity: 0; }
	[data-se="slide-up"]{ transform: translateY(40rem); }
	[data-se="slide-left"]{ transform: translateX(40rem); }
	[data-se="slide-right"]{ transform: translateX(-40rem); }
	[data-se="swaying-top"]{ transform: perspective(400px) rotateX(90deg); transform-origin: top; backface-visibility: hidden; }
	.seActive[data-se="bright"]{ opacity: 1; filter: brightness(1); }
	.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(2500rem) 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(400rem) rotateY(0deg); opacity: 0; }
		20%{ transform: perspective(400rem) rotateY(-30deg); }
		50%{ transform: perspective(400rem) rotateY(20deg); }
		75%{ transform: perspective(400rem) rotateY(-10deg); }
		100%{ transform: perspective(400rem) 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(40rem); opacity: 0; }
		[data-se] [data-se="slide-left"]{ transform: translateX(40rem); opacity: 0; }
		[data-se] [data-se="slide-right"]{ transform: translateX(-40rem); 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(2500rem) 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(40rem); }
		[data-se-column] [data-se*="slide-"].seActive{ transform: translate(0); }
	}
	@media(max-width: 1279px) and (min-width: 768px){
		/* :is([data-se-column="3"], [data-se-column="4"]) > [data-se].seActive:nth-child(odd){ transition-delay: 0s; }
		:is([data-se-column="3"], [data-se-column="4"]) > [data-se].seActive:nth-child(even){ transition-delay: calc(var(--delay) * 1ms); } */
		: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){
		html {max-width:100%; overflow-x:hidden;}
		#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; }

	/* stroke-dasharray 理쒕�媛� */
	/* svg *{ stroke-dasharray: var(--totalLength); stroke-dashoffset: var(--totalLength); opacity: 1; transform: translate(0); }
	svg.seActive *{ animation: svgAni 1s linear both; } */
}

/* root */
/* #wrap{ padding-top: var(--header-height); } */

/* inner */
/* .wrapper{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); } */
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%);margin-inline: auto; }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem);margin-inline: auto; }
.inr-narrow{ max-width: calc(var(--inr-narrow) * 1rem);margin-inline: auto; }

/* topbar */
.topbar { display: flex; justify-content: flex-end !important; gap: 20rem; position: relative; margin: 0 auto; max-width: calc(var(--inr)* 1rem); width: calc(var(--inr-width)* 100%); height: 90rem; padding-top: 40rem; padding-bottom: 5rem; }
.btn { padding: 11rem 26rem; color: var(--black); display: flex; align-items: center; gap: 10rem; font-size: var(--fs16); font-weight: 500; transition: all .3s;}
.btn:hover { color: var(--primary); transition: all .3s;}
.btn.blue { border-radius: 120rem; background-color: var(--white); color: var(--blue); border: 1rem solid var(--blue); transition: all .3s;}
.btn.blue:hover { background-color: var(--primary); color: var(--white); transition: all .3s;}
.btn-block { border-radius: 120rem; background-color: var(--blue); color: var(--white); min-height: 40rem; min-width: 100rem; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.btn-line { border-radius: 120rem; background-color: var(--white); color: var(--blue); border: 1rem solid var(--blue); min-height: 40rem; min-width: 100rem; text-align: center; position: absolute; top: 15rem; left: 0; cursor: pointer; display: flex; justify-content: center; align-items: center; }

/* header */
header{ position: relative; inset: 0 0 auto; height: var(--header-height); background: #fff; z-index: 999; }
header.isNotAtTop{ border-color: #0000; box-shadow: 2rem 0 16rem 2rem rgba(0,0,0,0.10); }

header .inr{ display: flex; justify-content: space-between; align-items: center; height: 100%; }

.logo{ position: relative; display: inline-block; font-size: 0; }
.logo__a{ display: inline-block; }
.logo__img{ height: 60rem; /* width: 408rem; */ font-size: 1rem; }

header nav{ position: relative; display: flex; align-items: center; height: 63rem; margin-left: auto;margin-right: 17rem; }
header .gnb{ position: relative; display: flex; height: 100%; }
header .gnb > li{ position: relative; display: inline-block; height: 100%; }
header .gnb > li > a { padding: 0 17.6rem; }
header .gnb [data-gnb="1"]{ --inr: 1600; display: flex; align-items: center; height: 100%; font-size: 18rem; font-weight: 600; letter-spacing: -.025em; color: var(--black); width: 100%; }
header .gnb [data-gnb="1"]:hover {color: var(--primary);}
header .gnb > li > a.active {color: var(--primary);}
header .gnb .subMenu{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--white); color: var(--black); border: 1rem solid #f2f2f2; border-radius: 10rem;}
header .gnb .subMenu > li > a { display: flex; height: 100%; align-items: center; width: 100%; justify-content: center; }
header .gnb .subMenu:not(:has(.subMenu__part)){ display: grid; white-space: nowrap; }
header .gnb .subMenu:has(.subMenu__part){ display: flex; }
header .gnb li:not(:hover) .subMenu{ left: 50%; opacity: 0; visibility: hidden; }
header .gnb > li:first-child .subMenu { left: calc(50% + calc(35rem / 2 )); transform: translateX(calc(-50% - calc(35rem))); }
header .gnb > li:last-child .subMenu { left: calc(50% + calc(35rem / 2 )); transform: translateX(calc(-50%)); }
/* header .gnb li .subMenu{ top: 100%; opacity: 1; visibility: visible; } */
header.fixed .gnb .subMenu{ top: 100%; }

.subMenu__category{ font-size: 16rem; font-weight: 500; }
.subMenu__part{ margin-top: 9rem; display: grid; gap: 3.3rem; min-width: 100rem; }
header .gnb .subMenu li {min-width: 180rem; height: 60rem; display: flex; justify-content: center; align-items: center; border-bottom: 1rem solid #f2f2f2;}
header .gnb .subMenu li:last-child{border-bottom: 0;}
header .gnb [data-gnb="2"]{ font-size: var(--fs18, 18rem); font-weight: 500; }
header .gnb [data-gnb="2"]:hover{ color: var(--primary); }
header .gnb .subMenu li:first-child [data-gnb="2"]{ border-top: 0; }

.header__btnGroup{ display: flex; align-items: center; gap: 10rem; }
.btn_search{ width: 50rem; height: 50rem; background: url('/images/common/search.png') no-repeat 50% / 15px; }



/* mobile-menu */
.btn_menu { position: relative; width: 25px; height: 25px; background: 0; color: inherit; z-index: 1;font-size: 30rem; }
.btn_menu .ph{ position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
@media(prefers-reduced-motion:no-preference){
	header,
	.logo__img,
	.gnb,
	.gnb .subMenu,
	.lnb .lnb__subMenu,
	.btn_menu span{ transition: .4s; }
}
@media(min-width:1280px){
	.logo__img{ translate: 0 -6.7%; }
	.btn_search{ margin-right: 38rem; }
	.btn_menu{ display: none; }
}
@media(min-width:1536px){
	/* header .logo{ margin-right: calc( clamp(0rem, calc( 70 / var(--inr) * 100vw ), 70rem) * -1); } */
}
@media(max-width: 1279px){
	:root{ --header-height: 60rem; }
	header.header .logo__img{ height: 35rem; }
	header nav{ display: none; }
	.header .area_util {display: none;}
}
@media(max-width: 767px){
	/* .logo__img{ height: auto; width: 70%; font-size: 1rem; } */
	/* .logo__img{ width: 140px;height: auto;} */
	.topbar {display: none;}
	header{ height: 60rem; }
	
}

/* 紐⑤컮�� 硫붾돱 */
.mGnb{ overflow: hidden auto; position: fixed; top: 0; right: 0; transform: translateX(100%); max-width: 280px; width: 100%; height: 100%; background: var(--white); z-index: 3; }
.mGnb.active{ transform: translateX(0); }
.mGnb__header{ display: flex; align-items: center; /*justify-content:space-between;*/justify-content: flex-end; height: var(--header-height); }
.mGnb__login { display: flex; align-items: center; justify-content: flex-start;}
.mGnb .btn_close{ position: relative; margin-right: -100vw; display: block; width: 25px; height: 25px; background: 0; font-size: 0; }
.mGnb.active .btn_close{ margin-right: 15px; }
.mGnb .btn_close::before,
.mGnb .btn_close::after{ content: ''; position: absolute; top: 50%; left: 0; display: block;  width: 100%; height: 1px; background: var(--black); transform: translateY(-50%) rotate(45deg); }
.mGnb .btn_close::after{ transform: translateY(-50%) rotate(-45deg); }

.mGnb [data-gnb="1"]{ position: relative; display: block; padding: 15px 25px; border-bottom: 1px solid #eaeaea; font-size: 16px; color: #424242; }
.mGnb [data-gnb="1"]:hover { color: var(--primary); }
.mGnb > ul > li:first-child > a{ border-top: 1px solid #eaeaea; }
.mGnb [data-gnb="1"].open::before{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; display: block; width: 11px; height: 7px; background: url('/images/common/menu_button.svg') no-repeat 50% 0 / contain; }
.mGnb [data-gnb="1"].active::before{ transform: translateY(-50%) rotate(180deg); }
.mGnb .subMenu{ display: none; background: #efefef; }
.mGnb .subMenu > li{ border-bottom: 1px solid #dedede; }
.mGnb [data-gnb="2"]{ position: relative; display: block; padding: 15px 25px; font-size: 14px; color: var(--black); background-color: var(--color-surface-peach);}

.cover{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, .4); visibility: hidden; opacity: 0; z-index: 2; }
.cover.active{ visibility: visible; opacity: 1; }
@media(prefers-reduced-motion: no-preference){
	.mGnb{ transition: .5s ease-out; }
	.mGnb .btn_close{ transition: .8s; }
	.mGnb [data-gnb="1"]{ transition: .3s; }
	.mGnb [data-gnb="1"].open::before{ transition: .4s; }
	.cover{ transition: .4s; }
}

.backTop { display: flex; cursor: pointer; flex-direction: column; font-size: var(--fs14); gap: 5rem; position: fixed; width: 56rem; height: 56rem; justify-content: center; align-items: center; border-radius: 10rem; background-color: var(--blue); color: var(--white); bottom: 40rem; right: 40rem; opacity: 0; transition: all .3s; }
.backTop.show {opacity: 1; transition: all .3s;}
.header.fixed { position: fixed; top: 0; transition: all .3s; height: 103rem; box-shadow: -1px 14px 27px -2px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: -1px 14px 27px -2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: -1px 14px 27px -2px rgba(0, 0, 0, 0.05);}
.topbar.hide {display: none; opacity: 0; transition: all .3s;}
.p_addr{width: 400px; display: inline-flex;}

.marking::before { content: '*'; display: inline-block; position: absolute; top: 0; left: 0; font-size: 16rem; color: #d5282c; text-indent: 0; }
.full-width { max-width: 100% !important; width: 100% !important; height: auto;}
.my100 { margin-left: 100rem; margin-right: 100rem;}
.mx50 { margin-top: 50rem; margin-bottom: 50rem;}
.mt100 { margin-top: 100rem !important;}

@media(max-width: 767px){
	.backTop { right: 20rem; bottom: 20rem; }
	.p_addr {width: 100%; display: inline-flex;}
	.btn { padding: 5rem 26rem !important; }
	.mGnb {max-width: 80svw;}
}
@media(min-width: 768px) and (max-width: 1024px) {
	.topbar {display: none;}
	header{ height: 100rem; }
	.mGnb {max-width: 50svw;}
}

.area_util{	margin: -3px 2px 0 0;display:flex;align-items:center;gap:11rem}
.area_util .btn-mobile-menu {
    border: 1px solid var(--primary);
    padding: 6rem 8rem;
    border-radius: 7rem;
	color: var(--primary);
}
.area_util ul{display:flex;align-items:center;gap:10rem}
.area_util ul>li{padding:0}
.area_util .search-top {position: relative;}
.area_util .search-top .ph {
	position: absolute;
	top: 50%;
	right: 15rem;
	transform: translateY(-50%);
}
.area_util .search-top input {
	width:220rem;
	border: 1px solid var(--color-surface-green);
	padding: 10rem 23rem 9rem 23rem;
	border-radius: 20rem;
	font-family: 'Cafe24SsurroundAir', sans-serif;
	font-size: 14rem; 
}
.area_util .search-top input::placeholder {
	color: #aaaaaa;
}
.area_util .btn-inquiry_top {
	background: linear-gradient(90deg, #9a3224, #307b2c);
	color: var(--white);
	font-family: 'Cafe24SsurroundAir', sans-serif;
	font-size: 14rem;
	padding: 11rem 24rem 10rem 22rem;
	letter-spacing: .03em;
	border-radius: 20rem;
}
.area_util .btn-inquiry_top span {
	font-family: 'Cafe24Ssurround', sans-serif;
	font-weight: 500;
}

.mGnb__area_util {
    padding-inline: 20rem;
    margin-block: 20rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
}
.mGnb__area_util .search-top {position: relative;}
.mGnb__area_util .search-top .ph {
	position: absolute;
	top: 50%;
	right: 15rem;
	transform: translateY(-50%);
}
.ph.ph-magnifying-glass:before{
	font-size: 20px;
	color: var(--color-surface-green);
}
.mGnb__area_util .search-top input {
	border: 1px solid var(--color-surface-green);
	padding: 15px 20px;
	border-radius: 30px;
	font-size: 14px;
	width: 100%;
}
.mGnb__area_util .btn-inquiry_top {
	/* background-color: var(--color-surface-green); */
	background: linear-gradient(90deg, #9a3224, #307b2c);
	color: var(--white);
	font-family: 'Cafe24SsurroundAir', sans-serif;
	font-size: 14px;
	padding: 15px 20px;
	border-radius: 30px;
	width: 100%;
	display: block;
}
.mGnb__area_util .btn-inquiry_top span {
	font-family: 'Cafe24Ssurround', sans-serif;
	font-weight: 500;
}

.header nav .gnb>li>a{line-height:115px}
header.header .logo__img{width:100%;display:block;object-fit: scale-down; object-position: left;}
.mGnb{max-width:80svw}
.mGnb {
    overflow: hidden auto;
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    max-width: 280px;
    width: 100%;
    height: 100%;
    background: var(--white);
    z-index: 3;
	transition: .5s ease-out;
}
@media (max-width: 767px)  {
	.mGnb.active{transform:translateX(0)}
}


/* layer popup - btn control */
[data-pop-layer="layer"]{position:fixed; top:0px; left:0px; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.2);}
[data-pop-layer="layer"] .popBox{position:absolute; top:50%; left:50%; min-width:400px; min-height:600px; box-sizing:border-box; background:#fff; box-shadow:3px 15px 20px rgba(0,0,0,0.15); transform:translate(-50%, -50%);}
[data-pop-layer="layer"] .popBox h2{height:67px; padding:0 20px !important; border-bottom:1px solid #eee; font-size:25px !important; font-weight:500; letter-spacing:-1px;}
[data-pop-layer="layer"] .popBox h2:after{content:''; display:inline-block; height:100%; vertical-align:middle;}
[data-pop-layer="layer"] .popBox h2 span{display:inline-block; width:99%; vertical-align:middle;}
[data-pop-layer="layer"] .popBox .btn_close{position:absolute; top:0px; right:-70px; width:70px; height:68px; line-height:68px; background:#34383e; box-shadow:3px 10px 15px rgba(0,0,0,0.15);}
[data-pop-layer="layer"] .popBox .btn_close span{display:inline-block; position:relative; width:18px; height:18px; margin:-4px auto 0; vertical-align:middle; background:url(/images/module/btn_close.png) no-repeat 50% 0; background-size:18px 18px; text-indent:100%; overflow:hidden; white-space:nowrap;}
[data-pop-layer="layer"] .popBox .btn_close:focus{outline:none;}
[data-pop-layer="layer"] .popBox .popConts{overflow-y:auto; max-height:532px; box-sizing:border-box; padding:20px 20px 40px;}
body[class*="ie"] [data-pop-layer="layer"] .popBox h2{height:68px; box-sizing:border-box;}
@media screen and (max-width:1024px){
	[data-pop-layer="layer"] .popBox{top:0px !important; left:0px !important; width:100% !important; height:100%  !important; min-width:inherit; min-height:inherit; transform:translate(0,0);}
	[data-pop-layer="layer"] .popBox h2{height:67px; box-sizing:border-box; padding-right:80px !important;}
	[data-pop-layer="layer"] .popBox .popConts{height:calc(100% - 67px); max-height:inherit;}
	[data-pop-layer="layer"] .popBox .btn_close{right:0px; box-shadow:none;}
}
@media screen and (max-width:600px){
	[data-pop-layer="layer"] .popBox h2{font-size:20px !important;}
}
@media screen and (max-width:420px){
	[data-pop-layer="layer"] .popBox h2{font-size:17px !important;}
	[data-pop-layer="layer"] .popBox h2 span{line-height:1.3em;}
}

/* 8) 개인정보처리방침 등 */
.area_guide{font-size:15rem; color:var(--color-gray6); font-weight:400;}
.area_guide h3,
.area_guide p,
.area_guide li{word-break:keep-all;}
.area_guide h3{margin-top:20rem; font-size:16rem; font-weight:700; color:var(--color-black, #111);}
.area_guide h3 + *,
.area_guide h3 + p + ul{margin-top:5rem; margin-left:13rem;}
.area_guide ul > li{margin-top:7rem;}
.area_guide ul > li:first-child{margin-top:0px;}
.area_guide ul > li > ul{margin-top:5rem; padding-left:15rem;}
.area_guide ul > li > ul > li{margin-top:4rem;}
.area_guide ul > li > ul > li:first-child{margin-top:0px;}
.area_guide ul > li strong{font-weight:600; color:var(--color-black, #111);}
.box_guide{margin-top:30rem;}
.box_guide > p{margin-bottom:10rem; padding:10rem; border:1rem solid #eee;}
html[lang="ja"] .area_guide p,
html[lang="ja"] .area_guide li{word-break:break-all;}
html[lang="zh"] .area_guide p,
html[lang="zh"] .area_guide li{word-break:break-all;}


/* go top btn */
.goTopBtn-group{ position: sticky; right: 0; bottom: 0; float: right; z-index: 9;
	.goTopBtn{ position: absolute; right: clamp(10rem, 2.65625vw, 51rem); bottom: clamp(10rem, 1.5625vw, 30rem); display: grid; place-items: center; width: 48rem; aspect-ratio: 1; background: var(--color-surface-green); color: #fff; }
}

/* footer */
footer{ padding: 51rem 0 61rem; background: #414141; border-top: 1px solid #e5e5e5; color: #fff;
	.inr{ display: grid; gap: 60rem 0; }
	.visually-hidden{ overflow: hidden; position: absolute; width: 0; height: 0; }
	.footer-logo{ display: block; width: 200rem; height: auto; }
	.notices{ margin-top: 35rem; display: inline-flex; gap: 20rem; }
	.notices-a{ display: inline-block; padding: 6rem 19rem 7rem; border: 1px solid #ffffff80; border-radius: 5rem; font: 300 14rem var(--font); color: #afafaf; cursor: pointer; }
	address{ margin-top: 18rem; display: flex; flex-wrap: wrap; gap: 8rem 33rem; max-width: 700rem; font: 300 14rem var(--font); color: #dbdbdb; }
	.copyright{ margin-top: 24rem; font: 14rem var(--font); color: #aaa; }
	h2{ margin-bottom: 19rem; font: 700 18rem var(--font-suit); letter-spacing: -.02em; color: #fff }
	.hn-logo{ margin: 27rem 0 6rem; display: block; width: 95rem; height: 17rem; }
	.number{ margin-top: 5rem; display: inline-block; font: 24rem var(--font-surround); letter-spacing: -.02em; color: #fff; }
	.text{ margin-top: 12rem; font: 700 14rem var(--font-suit); letter-spacing: -.02em; color: #afafaf; }
	.hn-logo ~ .text{ margin-top: 5rem; }
	@media(min-width:1280px){
		.inr{ grid-template-columns: 835fr 285fr 280fr; }
		.footer-account, .footer-customer{ padding-top: 36rem; }
	}
	@media(max-width:1279px) and (min-width:768px){
		.inr{ grid-template-columns: 285fr 280fr; }
		.footer-website{ order: 3; grid-column: 1/-1; }
	}
	@media(max-width:767px){
		.footer-account{ order: -1; }
		.footer-customer{ order: -2; }

	}
}