@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'Cormorant Garamond', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont2: 'Manrope', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont3: 'Montserrat', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor: #009944;
	--headerH: 100px;
	--aosPlus: 100px;
	--aosMinus: -100px;
}

*{ box-sizing: border-box; word-break: keep-all; line-height: 1.3; }
body.lock{ overflow: hidden; }
body{ font-size: 16px; }
body *{ font-size: inherit; }
article{ background: #FFF; position: relative; z-index: 100; }

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1800{ max-width: 1840px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1770{ max-width: 1810px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1600{ max-width: 1640px; width: 100%; margin: 0 auto; padding: 0 20px; }

@media screen and (max-width: 1800px){
	:root{
		--headerH: 90px;
	}

	html{ font-size: 50%; }
}

@media screen and (max-width: 1600px){
	:root{
		--headerH: 80px;
	}
}

@media screen and (max-width: 1455px){
	:root{
		--headerH: 70px;
	}
}

@media screen and (max-width: 1280px){
	:root{
		--aosPlus: 50px;
		--aosMinus: -50px;
	}

	html{ font-size: 40%; }
}

@media screen and (max-width: 900px){
	html{ font-size: 30%; }
}

/* privacy */
.privacy * { font-size: 17px; font-weight: 300; color: #555; line-height: 1.5941; }
.privacy > *:not(:last-child){ margin-bottom: 35px; }

.privacy dl dt{ font-weight: 500; margin-bottom: 5px; }
.privacy dl dl dt{ font-weight: 300; }
.privacy dl dd p + p{ margin-top: 5px; }
.privacy dl dd p + ul{ margin-top: 5px; }

.privacy .textBox{ margin-top: 10px; }
.privacy .textBox > *:not(:last-child){ margin-bottom: 20px; }

.privacy .hyphen{ padding-left: 10px; position: relative; }
.privacy .hyphen::before{ content: "-"; line-height: inherit; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1280px){
	.privacy *{ font-size: 16px; }
}

/* header - icon */
.header{ display: flex; align-items: center; margin-right: -20px; }
.header > div{ position: relative; }
.header a,
.header button{ padding: 10px 20px; }
.header a{ display: inline-block; }
.header button{ background: none; border: none; }
.header svg{ width: auto; height: auto; }
.header svg path{ stroke: #000; transition: stroke 0.3s; }
.header svg .fill{ stroke: #000; fill: #000; transition: stroke 0.3s, fill 0.5s; }

.header ul{ background: #FFF; padding: 10px 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: none; }
.header ul li a{ display: block; font-size: 15px; font-weight: 500; color: #000; letter-spacing: -0.02em; text-align: center; padding: 7px 20px; }

.header .menu span{ display: inline-block; width: 25px; height: 2px; background: #000; vertical-align: middle; position: relative; top: -2px; transition: background 0.3s, transform 0.5s; }
.header .menu span::before, 
.header .menu span::after{ content: ""; width: 100%; height: 100%; background: #000; position: absolute; left: 0; transition: background 0.3s, top 0.5s ,transform 0.5s; }
.header .menu span::before{ top: -8px; }
.header .menu span::after{ top: 8px; }

@media screen and (max-width: 1550px){
	.header{ margin-right: -10px; }
	.header a, .header button{ padding: 10px; }
	.header svg{ height: 30px; }
}


/* header */
#header{ 
	--bgH: 458px;
}
#header{ width: 100%; position: absolute; top: 0; left: 0; z-index: 999; transition: transform 0.5s; }
#header::before{ content: ""; width: 100%; height: var(--headerH); background: #FFF; border-bottom: 1px solid #EEE; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; transition: opacity 0.3s ; }
#header::after{ content: ""; width: 100%; height: calc(var(--headerH) + var(--bgH)); background: #FFF; position: absolute; top: 0; left: 0; z-index: -5; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); transform: scaleY(0); transform-origin: top; transition: transform 0.5s 0.1s; }
#header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }

#header .logo{ opacity: 1; transition: opacity 0.3s; }
#header .logo svg{ width: auto; }
#header .logo svg .text path{ fill: #595757; transition: fill 0.3s; }

#header .right{ flex: 1 0 auto; display: flex; justify-content: flex-end; align-items: center; }
#header nav{ flex: 1 0 auto; position: relative; }
#header nav a{ display: block; line-height: 1.5; }
#header .depth01{ display: flex; justify-content: flex-end; }
#header .depth01 > li{ --after: calc(100% / var(--length)); }
#header .depth01 > li{ width: calc(var(--before) + 1px); position: relative; transition: width 0.5s; }
#header .depth01 > li > a{ min-width: max-content; height: var(--headerH); display: flex; justify-content: center; align-items: center; font-size: 17px; font-weight: 600; color: #111; letter-spacing: -0.02em; line-height: 1.3; text-align: center; white-space: nowrap; padding: 0 30px; transition: color 0.3s; position: relative; }
#header .depth01 > li > a::after{ content: ""; width: 100%; height: 2px; background: var(--mainColor); position: absolute; bottom: -1px; left: 0; transform: scaleX(0); transition: transform 0.5s; }

#header .depth02{ display: none; width: 100%; height: calc(var(--headerH) + var(--bgH)); background: #FFF; padding: calc(var(--headerH) + 15px) 0 60px; position: absolute; top: 0; left: 0; z-index: -1; clip-path: inset(calc(var(--headerH) + 1px) 0 0 0); -webkit-clip-path: inset(calc(var(--headerH) + 1px) 0 0 0); transition: background 0.5s; } 
#header .depth02::before{ content: ""; width: 100%; height: 100%; background: #FFF; border: 1px solid #EEE; border-bottom: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; transition: background 0.5s; }
#header .depth02 > li{ opacity: 0; transition: opacity 0.5s; }
#header .depth02 > li > a{ font-size: 16px; font-weight: 400; color: #111; letter-spacing: -0.02em; padding: 15px 20px; position: relative; transition: color 0.3s; }
#header .depth02 > li.arrow > a{ padding-right: 40px; }
#header .depth02 > li.arrow > a::after{ content: ""; width: 7px; height: 10px; background: url("/img/common/depth_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: transform 0.3s; }
#header .depth01 > li:not(:last-of-type) .depth02::before{ border-right: none; }

#header .depth03{ padding-bottom: 10px; display: none; position: relative; z-index: 5; }
#header .depth03 > li > a{ font-size: 15px; font-weight: 400; color: #777; letter-spacing: -0.02em; padding: 5px 20px; transition: color 0.3s; }

#header .header .menu{ display: none; }


/* header- white */
#header.white .logo svg .text path{ fill: #FFF; }
#header.white .depth01 > li > a{ font-weight: 500; color: #FFF; }
#header.white .header svg path{ stroke: #FFF; }
#header.white .header svg .fill{ stroke: #FFF; fill: #FFF; }
#header.white .header .menu span{ background: #FFF; }
#header.white .header .menu span::before, 
#header.white .header .menu span::after{ background: #FFF; }

/* header- hover */
#header.hover::before{ opacity: 1; }
#header.hover::after{ transform: scaleY(1); transition-delay: unset; }
#header.hover .logo svg .text path{ fill: #595757; }
#header.hover .depth01 > li{ width: var(--after); }
#header.hover .depth01 > li > a{ color: #111; }
#header.hover .depth02 > li{ opacity: 1; transition-delay: 0.2s; }  
#header.hover .header svg path{ stroke: #000; }
#header.hover .header svg .fill{ stroke: #000; fill: #000; }

/* header- scroll */
#header.scroll{ transform: translateY(-100%); }

@media screen and (hover: hover){
	#header .depth01 > li:hover > a{ color: var(--mainColor); }
	#header .depth01 > li:hover > a::after{ transform: scaleX(1); }
	#header .depth01 > li:hover .depth02::before{ background: #F9FCFA; }

	#header .depth02 > li:not(.arrow):hover > a{ color: var(--mainColor); }
	#header .depth02 > li.arrow:hover a::after{ transform: translateY(-50%) rotate(-180deg); }

	#header .depth03 > li:hover > a{ color: var(--mainColor); }
}

@media screen and (max-width: 1620px){
	#header{ 
		--bgH: 400px;
	}

	#header .depth01 > li > a{ padding: 0 25px; }
	
	#header .depth02 > li > a{ padding: 10px 15px; }
	#header .depth02 > li.arrow > a{ padding-right: 40px; }
	#header .depth02 > li.arrow > a::after{ right: 15px; }

	#header .depth03{ padding-bottom: 0; }
	#header .depth03 > li > a{ padding: 5px 15px; }
}

@media screen and (max-width: 1550px){
	#header .logo svg{ height: 30px; }
}

@media screen and (max-width: 1455px){
	#header nav{ display: none; }
	#header .header .menu{ display: block; }
}


/* menu */
#menu{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 1000; display: none; }
#menu .blank{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#menu .inner{ max-width: 500px; width: 100%; height: 100%; background: #FFF; margin-left: auto; transform: translateX(100%); transition: transform 0.5s 0.5s; }
#menu .top{ height: 70px; display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid #EEE; padding-right: 20px; position: relative; z-index: 100; }

#menu nav{ height: calc(100% - var(--headerH)); overflow-x: clip; overflow-y: scroll; -ms-overflow-style: none; }
#menu nav::-webkit-scrollbar{ display: none; }
#menu nav a{ display: block; line-height: 1.3; }
#menu .depth01 > li{ border-bottom: 1px solid #EEE; }
#menu .depth01 > li > a{ font-size: 21px; font-weight: 500; color: #111; padding: 20px; position: relative; }

#menu .depth02{ background: #F9FCFA; border-top: 1px solid #EEE; padding: 5px 0; display: none; }
#menu .depth02 > li > a{ font-size: 18px; font-weight: 400; color: #111; padding: 13px 20px; position: relative; }
#menu .depth02 > li.arrow > a::after{ content: ""; width: 10px; height: 13px; background: url("/img/common/depth_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: transform 0.3s; }
#menu .depth02 > li.arrow.on > a::after{ transform: translateY(-50%) rotate(-180deg); }

#menu .depth03{ display: none; padding-bottom: 5px; }
#menu .depth03 > li > a{ font-size: 18px; font-weight: 400; color: #777; padding: 10px 20px; transition: color 0.3s; }

@media screen and (hover: hover){
	#menu .depth03 > li:hover a{ color: var(--mainColor); }
}


/* body - open */
body.open{ overflow: hidden; }
body.open #header .logo{ opacity: 0; pointer-events: none; }
body.open #header .logo svg .text path{ fill: #595757; }
body.open .header svg path{ stroke: #000; }
body.open .header svg .fill{ stroke: #000; fill: #000; }
body.open .header .menu span{ background: transparent; }
body.open .header .menu span::before{ background: #000; top: 0; transform: rotate(45deg); }
body.open .header .menu span::after{ background: #000; top: 0; transform: rotate(-45deg); }

body.open #menu .inner{ transform: translateX(0); }

@media screen and (max-width: 500px){
	body.open #header .logo{ opacity: 1; pointer-events: auto; }
}


/* footer */
#footer{
	--border: rgba(255, 255, 255, 0.1);
}

#footer{ width: 100%; background: #222; position: fixed; bottom: 0; left: 0; }
#footer *{ color: #FFF; }
#footer .grid{ display: grid; grid-template-columns: auto 960px; }
#footer .grid > div{ position: relative; }
#footer .grid01 .left > div{ height: 50%; }

#footer > div{ position: relative; }
#footer > div::before, 
#footer > div::after{ content: ""; width: 1px; height: 100%; background: var(--border); position: absolute; top: 0; z-index: 10; }
#footer > div::before{ left: 20px; }
#footer > div::after{ right: 20px; }

#footer .img figure{ width: 100%; height: 100%; opacity: 0; clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%); transition: opacity 1.5s 0.5s, clip-path 1.5s 0.5s; }
#footer .img figure img{ width: 100%; height: 100%; object-fit: cover; }
#footer.animated .img figure{ opacity: 1; clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%); }

#footer .nav a{ display: block; line-height: 1.3; }
#footer .nav .depth01{ display: grid; grid-template-columns: repeat(3, 1fr); }
#footer .nav .depth01 > li{ padding: 57px 0 22px; position: relative; }
#footer .nav .depth01 > li::before{ content: ""; width: 100%; height: 1px; background: var(--border); position: absolute; bottom: 0; left: 0; }
#footer .nav .depth01 > li::after{ content: ""; width: 1px; height: 100%; background: var(--border); position: absolute; top: 0; left: 0; }
#footer .nav .depth01 > li > a{ font-size: 16px; font-weight: 500; letter-spacing: -0.02em; padding: 13px 40px; }
#footer .nav .depth02 > li > a{ font-size: 15px; font-weight: 200; letter-spacing: -0.02em; opacity: 0.8; padding: 7px 40px; }

#footer .info{ display: flex; flex-direction: column; justify-content: space-between; padding: 60px 60px 30px; position: relative; }
#footer .info::before,
#footer .info::after{ content: ""; width: 100%; height: 1px; background: var(--border); position: absolute; left: 0; }
#footer .info::before{ top: 0; }
#footer .info::after{ bottom: 0; }
#footer .info svg{ width: auto; height: auto; }
#footer .info .dl{ margin-top: 30px; margin-bottom: -10px; }
#footer .info dl{ display: flex; align-items: baseline; margin-bottom: 10px; }
#footer .info dl *{ font-family: var(--engFont2); font-size: 15px; letter-spacing: -0.02em; }
#footer .info dl dt{ font-weight: 700; margin-right: 15px; }
#footer .info dl dd{ font-weight: 300; opacity: 0.8; }
#footer .info p{ display: flex; align-items: baseline; margin-bottom: 10px; }
#footer .info dl dd p:last-of-type{ margin-bottom: 0; }
#footer .info p span{ display: inline-block; color: inherit; white-space: nowrap; padding-right: 10px; position: relative; }
#footer .info p span::after{ content: ""; width: 1px; height: 10px; background: #FFF; opacity: 0.8; position: absolute; top: 50%; right: 5px; transform: translate(50%, -50%); }


#footer .info .dl .flex{ display: flex; flex-wrap: wrap; }
#footer .info .flex > p{ font-weight: 300; color: rgba(255, 255, 255, 0.8); }
#footer .info .flex > p:not(:last-of-type){ margin-right: 15px; }
#footer .info .flex > p a{ font-weight: 600; color: #FFF; }
#footer .info .dl .flex dl{ margin-right: 20px; }

#footer .grid02 .left{ padding: 20px 0 50px; }
#footer .grid02 .left::before{ content: ""; width: 1px; height: 100%; background: var(--border); position: absolute; top: 0; right: -1px; }
#footer .grid02 .right{ display: grid; grid-template-columns: repeat(3, 1fr); }

#footer .copyright{ font-size: 15px; font-weight: 200; letter-spacing: -0.02em; opacity: 0.3; padding: 0 60px; }

#footer .right > div{ padding: 20px 0; }
#footer .link{ grid-column: auto / span 2; position: relative; }
#footer .link::after{ content: ""; width: 1px; height: 100%; background: var(--border); position: absolute; top: 0; right: 0; }
#footer .link ul{ display: flex; justify-content: flex-end; padding: 0 30px; margin-top: -15px; margin-right: -15px; }
#footer .link ul li{ position: relative; }
#footer .link ul li::after{ content: ""; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.1); position: absolute; top: 48%; right: 0; transform: translate(50%, -50%); }
#footer .link ul li:last-of-type::after{ display: none; }
#footer .link ul li a{ display: inline-block; font-size: 15px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.3; opacity: 0.3; padding: 15px; }
#footer .link ul li.policy a{ opacity: 1; }


/* top */
#top{ display: flex; justify-content: center; align-items: center; background: none; border: none; font-size: 18px; font-weight: 300; letter-spacing: -0.02em; padding: 10px 20px; margin-top: -10px; margin-left: auto; }
#top span{ display: inline-block; width: 34px; height: 34px; background: #FFF; border-radius: 50%; overflow: hidden; margin-left: 10px; position: relative; }
#top span::before,
#top span::after{ content: ""; width: 16px; height: 16px; background: url("/img/common/top_icon.svg") no-repeat center center / contain; position: absolute; left: 50%; transition: top 0.5s, transform 0.5s; }
#top span::before{ top: 50%; transform: translate(-50%, -50%); }
#top span::after{ top: 100%; transform: translate(-50%, 100%); }

@media screen and (hover: hover){
	#top:hover span::before{ top: 0; transform: translate(-50%, -100%); }
	#top:hover span::after{ top: 50%; transform: translate(-50%, -50%); }
}

@media screen and (max-width: 1800px){
	/* footer */
	#footer .nav .depth01 > li{ padding: 30px 0; }
	#footer .info{ padding: 30px; }
}

@media screen and (max-width: 1500px){
	#footer .nav{ display: none; }
	#footer .grid01{ display: block; }
	#footer .grid01 .left{ display: grid; grid-template-columns: repeat(2, 1fr); }
	#footer .grid01 .left > div{ height: auto; }
	#footer .img{ border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
}

@media screen and (max-width: 1450px){
	/* footer */
	#footer .grid{ grid-template-columns: auto 800px; }
	#footer .grid02 .left{ padding: 15px 0; }

	#footer .nav .depth01 > li > a{ padding: 13px 25px; }
	#footer .nav .depth02 > li > a{ padding: 7px 25px; }

	/* top */
	#top{ font-size: 17px; margin-top: -15px; }
	#top span{ width: 26px; height: 26px; }
}

@media screen and (max-width: 1280px){
	/* footer */
	#footer .grid{ grid-template-columns: auto 700px; }
}

@media screen and (max-width: 1200px){
	/* footer */
	#footer .grid01{ display: block; }

	#footer .info{ padding: 20px 30px; }

	#footer .copyright{ padding: 0 30px; }
}

@media screen and (max-width: 1100px){
	/* footer */
	#footer .grid01{ position: relative; }
	#footer .grid01::before{ content: ""; width: 100%; height: 1px; background: var(--border); position: absolute; bottom: 0; left: 0; }
	#footer .info::after{ width: 1px; height: 100%; }

	#footer .grid02{ grid-template-columns: repeat(2, 1fr); }
	#footer .grid02 .left{ padding: 20px 0 15px; }
	#footer .grid02 .right{ grid-template-columns: auto 165px; }
	#footer .grid02 .right > div{ align-content: center; padding: 5px 0; }

	#footer .info{ padding: 30px 25px; }
	#footer .link{ grid-column: auto; }
	#footer .link ul{ justify-content: center; margin: 0; padding: 0; }

	/* top */
	#top{ margin-top: 0; }
}

@media screen and (max-width: 1000px){
	#footer .grid01 .left{ display: block; }
	#footer .img{ display: none; }
	#footer .info::after{ display: none; }
}

@media screen and (max-width: 900px){
	#footer .grid02{ grid-template-columns: repeat(1, 1fr); }
	#footer .grid02 .left{ order: 2; }
	#footer .grid02 .left::before{ width: 100%; height: 1px; }
	#footer .grid02 .right{ order: 1; }
}

@media screen and (max-width: 600px){
	#footer .link ul{ justify-content: center; }
}


/* allMenu */
#allMenu{ width: var(--headerH); height: var(--headerH); background: var(--mainColor); border: none; padding: 0; position: fixed; top: 0; right: 0; z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
#allMenu span{ display: inline-block; width: 32px; height: 2px; background: #FFF; border-radius: 100px; vertical-align: middle; position: relative; }
#allMenu span::before,
#allMenu span::after{ content: ""; width: 100%; height: 100%; background: inherit; border-radius: inherit; position: absolute; left: 0; }
#allMenu span::before{ top: -10px; }
#allMenu span::after{ top: 10px; }

#allMenu.scroll{ opacity: 1; pointer-events: auto; }

@media screen and (max-width: 1280px){
	#allMenu span{ width: 27px; }
	#allMenu span::before{ top: -8px; }
	#allMenu span::after{ top: 8px; }
}