@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'Manrope', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--korFont: 'SUIT Variable';

	--vh: 100%;
	--resizeVH: 100vh;

	--headerH: 120px;
	--subPt: 120px;
	--subPb: 80px;

	--aosP: 100px;
	--aosM: -100px;
	--aosT: 700ms;
}

*{ box-sizing: border-box; word-break: keep-all; line-height: 1.3; }
body.lock{ overflow: hidden; }
body{ font-size: 16px; overflow-x: clip; overflow-y: scroll !important; }
body *{ font-size: inherit; }
main, 
article{ padding: var(--headerH) 0 var(--subPb); }
article > div{ padding-top: var(--subPt); }

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1820{ max-width: 1860px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1520{ max-width: 1560px; width: 100%; margin: 0 auto; padding: 0 20px; }

/* slick */
.slick-slider{ overflow: hidden; }
.slick-track{ margin: 0; }
.slick-slide{ outline: none; }

/* aos */
[data-aos]{ transition-duration: var(--aosT); }

@media (hover: hover) and (pointer: fine) {
	:root{
		--resizeVH: var(--vh);
	}
}

@media screen and (max-width: 1700px){
	:root{
		--headerH: 100px;

		--subPt: 80px;
	}

	html{ font-size: 50%; }
}

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

		--subPt: 40px;
	}

	:root{
		--headerH: 80px;
	}

	html{ font-size: 40%; }
}

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

/* privacy */
.privacy * { font-size: 19px; font-weight: 300; color: #111; line-height: 1.5; }
.privacy > *:not(:last-child){ margin-bottom: 100px; }
.privacy h4{ font-size: 30px; font-weight: 600; margin-bottom: 30px; }
.privacy h5{ font-weight: 600; margin-bottom: 10px; }
.privacy ul{ margin-top: 10px; }
.privacy ul li:not(:last-of-type){ margin-bottom: 5px; }

.privacy dl dt{ font-size: 21px; font-weight: 600; }
.privacy dl dd{ margin-top: 10px; }
.privacy .textBox dl dt{ font-size: 19px; font-weight: 500; }
.privacy .textBox dl dd{ margin-top: 5px; }

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

.privacy .dot{ padding-left: 12px; position: relative; }
.privacy .dot::before{ content: ""; width: 3px; height: 3px; background: #000; border-radius: 50%; position: absolute; top: calc(1.4em / 2); left: 0; transform: translateY(-50%); }

.privacy .hyphen{ padding-left: 12px; position: relative; }
.privacy .hyphen::before{ content: "-"; position: absolute; top: 0; left: 0; }


.menuBtn{ width: 45px; height: 45px; background: none; border: none; padding: 0; }


/* header */
#header{ width: 100%; background: #FFF; position: fixed; top: 0; left: 0; z-index: 900; }
#header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 12px; }

#header nav{ max-width: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#header nav a{ display: block; line-height: 1.3; }

#header .depth01{ display: flex; }
#header .depth01 > li{ height: var(--headerH); display: flex; flex-direction: column; justify-content: flex-end; background: #FFF; position: relative; }
#header .depth01 > li > a{ font-family: var(--engFont); font-size: 18px; font-weight: 600; color: #111; letter-spacing: -0.02em; white-space: nowrap; padding: 17px 50px; transition: color 0.3s; }

#header .depth01 > li > div{ width: 200px; position: absolute; top: calc(100% - 1px); left: 50px; z-index: -1; transform: translateY(-100%); transition: top 0.5s, transform 0.5s; }
#header .depth02{ background: #FFF; border: 1px solid #555; }
#header .depth02 > li:not(:last-of-type){ border-bottom: 1px solid #555; }
#header .depth02 > li > a{ font-size: 16px; font-weight: 500; color: #BBB; letter-spacing: -0.02em; padding: 15px 30px; transition: color 0.3s; }

#header .menu{ display: none; flex-direction: column; justify-content: flex-end; overflow: hidden; }
#header .menu span{ display: flex; width: 200%; height: 3px; position: relative; transform: translateX(0); transition: transform 0.3s; }
#header .menu span:last-of-type{ transform: translateX(calc(-50% - 2px)); }
#header .menu span::before,
#header .menu span::after{ content: ""; display: block; width: 50%; height: 100%; background: #111; }
#header .menu span::after{ margin-left: 4px; }
#header .menu span:not(:last-child){ margin-bottom: 6px; }


@media screen and (hover: hover) and (pointer: fine){
	#header nav:hover .depth01 > li > a{ color: #BBB; }
	#header .depth01 > li:hover > a{ color: #111 !important; }
	#header .depth01 > li:hover div{ top: 100%; transform: translateY(0); }

	#header .depth02 > li:hover > a{ color: #333; } 

	#header .menu:hover span{ transform: translateX(calc(-50% - 2px)); }
	#header .menu:hover span:last-of-type{ transform: translateX(0); }
}

@media screen and (max-width: 1700px){
	#header .logo img{ width: auto; height: 70px; }

	#header .depth01 > li > a{ padding: 15px 40px; }
	#header .depth01 > li > div{ width: 180px; left: 40px; }

	#header .depth02 > li > a{ padding: 13px 25px; }
}

@media screen and (max-width: 1280px){
	.menuBtn{ width: 40px; height: 40px; }

	#header .logo img{ height: 60px; }

	#header .depth01 > li > a{ padding: 12px 35px; }
	#header .depth01 > li > div{ width: 160px; left: 35px; }

	#header .depth02 > li > a{ padding: 11px 20px; }
}

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


/* menu */
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; transform: translateX(100%); transition: transform 0.7s; }
#menu .top{ position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
#menu .top .right{ height: var(--headerH); display: flex; justify-content: flex-end; align-items: center; }
#menu .close{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }
#menu .close span{ display: block; width: 100%; height: 3px; background: #111; transition: transform 0.3s 1s; }
#menu .close span:first-of-type{ transform: rotate(20deg); }
#menu .close span:last-of-type{ position: absolute; top: calc(50% - 1px); left: 0; transform: rotate(-20deg); }

#menu .grid-box{ height: 100%; display: grid; grid-template-columns: calc(100% - 870px) 870px; }
#menu .img{ background: url("/img/common/menu_img.jpg") no-repeat center center / cover;; }
#menu p{ font-family: var(--engFont); font-size: 14px; font-weight: 400; color: #999; position: absolute; bottom: calc(var(--headerH) / 2); left: 0; right: 0; }

#menu .nav{ background: #FFF; text-align: center; padding: var(--headerH) 20px; position: relative; }
#menu .nav a{ display: block; line-height: 1.3; }
#menu .nav nav{ height: 100%; display: flex; flex-direction: column; justify-content: center; overflow-x: clip; overflow-y: auto; }
#menu .nav .pc{ display: none; }

#menu .depth01 > li:not(:last-of-type){ margin-bottom: 70px; }
#menu .depth01 > li > a{ font-family: var(--engFont); font-size: 5rem; font-weight: 700; color: transparent; letter-spacing: -0.02em; position: relative; padding-bottom: 2px; overflow: hidden; }
#menu .depth01 > li > a::before,
#menu .depth01 > li > a::after{ content: attr(data-txt); color: #111; padding-bottom: inherit; position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box; }
#menu .depth01 > li > a::before{ transform: translateY(-100%); }
#menu .depth01 > li > a::after{ transform: translateY(0); }
#menu .depth01 > li > a span{ display: inline-block; position: relative; padding-bottom: 2px; }
#menu .depth01 > li > a span::after{ content: ""; width: 100%; height: 2px; background: #111; position: absolute; bottom: -2px; left: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.5s; }
#menu .depth01 > li div{ display: none; padding: 40px 0; margin-bottom: -70px; }

#menu .depth02{ display: flex; flex-wrap: wrap; justify-content: center; margin: -5px -15px; }
#menu .depth02 > li > a{ font-size: 22px; font-weight: 500; color: rgba(17, 17, 17, 0.15); padding: 5px 15px; transition: color 0.3s; }

#menu .depth01 > li.on > a::before, 
#menu .depth01 > li.on > a::after{ transition: transform 0.5s; }
#menu .depth01 > li.on > a::before{ transform: translateY(0); }
#menu .depth01 > li.on > a::after{ transform: translateY(100%); }
#menu .depth01 > li.on > a span::after{ transform: scaleX(1); }

/* body - open */
body.open #menu{ transform: translateX(0); }

@media screen and (hover: hover) and (pointer: fine){
	#menu .nav .pc{ display: block; }
	#menu .nav .mobile{ display: none; }

	#menu .depth01 > li:hover > a::before, 
	#menu .depth01 > li:hover > a::after{ transition: transform 0.5s; }
	#menu .depth01 > li:hover > a::before{ transform: translateY(0); }
	#menu .depth01 > li:hover > a::after{ transform: translateY(100%); }
	#menu .depth01 > li:hover > a span::after{ transform: scaleX(1); }

	#menu .depth02 > li:hover > a{ color: #111; }
}

@media screen and (max-width: 1700px){
	#menu .grid-box{ grid-template-columns: calc(100% - 700px) 700px; }

	#menu .depth01 > li:not(:last-of-type){ margin-bottom: 55px; }
	#menu .depth01 > li div{ padding: 35px 0; margin-bottom: -55px; }
}

@media screen and (max-width: 1400px){
	#menu .grid-box{ grid-template-columns: 55% 45%; }
}

@media screen and (max-width: 1280px){
	#menu .grid-box{ grid-template-columns: repeat(2, 50%); }

	#menu .depth01 > li:not(:last-of-type){ margin-bottom: 40px; }
	#menu .depth01 > li div{ padding: 25px 0; margin-bottom: -40px; }
	#menu .depth02 > li > a{ font-size: 20px; }
}

@media screen and (max-width: 900px){
	#menu .grid-box{ grid-template-columns: repeat(1, 100%); }
	#menu .img{ display: none; }

	#menu .depth01 > li > a{ font-size: 6.5rem; }
}


/* footer */
#footer{ padding: 23px 0; }
#footer .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; }
#footer .copyright{ font-family: var(--engFont); font-size: 14px; font-weight: 400; color: #999; }

#footer ul{ display: flex; }
#footer ul li:not(:last-of-type){ margin-right: 8px; }
#footer ul li > *{ width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; background: transparent; border: 1px solid #EEE; border-radius: 50%; transition: background 0.3s, border-color 0.3s; }
#footer ul li > * img{ filter: unset; -webkit-filter: unset; transition: filter 0.3s; }

@media screen and (hover: hover) and (pointer: fine){
	#footer ul li:hover > *{ background: #222; border-color: #222; }
	#footer ul li:hover > * img{ filter: brightness(5); -webkit-filter: brightness(5); }
}

@media screen and (max-width: 1000px){
	#footer{ padding: 20px 0; }
	#footer .flex-box{ flex-direction: column-reverse; }
	#footer ul{ margin-bottom: 10px; }
}


/* intro */
#intro{ width: 100%; height: 100%; background: #FFF; text-align: center; position: fixed; top: 0; left: 0; z-index: 1000; }
#intro > div{ height: 100%; display: flex; flex-direction: column; justify-content: center; }
#intro svg{ width: auto; height: auto; }
#intro svg .bar{ clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); animation: introBar var(--aosT) both; }
#intro svg .circle{ clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%); animation: introCircle var(--aosT) both; }
#intro svg .text{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); animation: textClip var(--aosT) both; }

#intro svg .bar:nth-of-type(1){ animation-delay: calc(var(--aosT) * 1); }
#intro svg .bar:nth-of-type(2){ animation-delay: calc(var(--aosT) * 2); }
#intro svg .bar:nth-of-type(3){ animation-delay: calc(var(--aosT) * 3); }
#intro svg .bar:nth-of-type(4){ animation-delay: calc(var(--aosT) * 4); }
#intro svg .circle{ animation-delay: calc(var(--aosT) * 5); }
#intro svg .text01{ animation-delay: calc(var(--aosT) * 6); }
#intro svg .text02{ animation-delay: calc((var(--aosT) * 6) + 0.3s); }

@media screen and (max-width: 1700px){
	#intro svg{ height: 110px; }
}

@media screen and (max-width: 1280px){
	#intro svg{ height: 100px; }
}