@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'SUIT', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor: #00508F;
	--navy: #0E192E;
	--blueBg: #ECF2F9;
	--aosPlus: 100px;
	--aosMinus: -100px;
	--headerH: 115px;
	--topLogo: auto;
}

*{ box-sizing: border-box; word-break: keep-all; line-height: 1.3; }
body.lock{ overflow: hidden; }
body{ font-size: 16px; }
body *{ font-size: inherit; }

[data-aos]{ transition-duration: 1s; }

h1.logo a{ display: flex; }

.w1790{ max-width: 1830px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1620{ max-width: 1660px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1500{ max-width: 1540px; width: 100%; margin: 0 auto; padding: 0 20px; }

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

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

	html{ font-size: 50%; }
}

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

	html{ font-size: 40%; }
}

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

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

/* privacy */
.privacy *{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.5; letter-spacing: -0.02em; }
.privacy .borderBox{ border: 1px solid #DDD; padding: 50px; }

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

.privacy h4{ font-weight: 600; margin-bottom: 10px; }
.privacy dl dt{ font-weight: 500; margin-bottom: 10px; }
.privacy dl dd > *:not(:last-child){ margin-bottom: 10px; }
.privacy dl dl dt{ margin-bottom: 5px; }
.privacy ul li{ margin-top: 7px; }

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

@media screen and (max-width: 1280px){
	.privacy *{ font-size: 17px; }
	.privacy .borderBox{ padding: 25px; }
	.policy .privacy h4{ margin-bottom: 5px; }
	.policy .privacy dl dt{ margin-bottom: 5px; }
	.policy .privacy dl dd > *:not(:last-child){ margin-bottom: 5px; }
	.policy .privacy ul li{ margin-top: 3px; }
}



/* header */
#header{ width: 100%; background: #FFF; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02); position: absolute; top: 0; left: 0; z-index: 900; }
#header .logo{ display: inline-block; }
#header .logo svg{ width: auto; height: var(--topLogo); }
#header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }

#header nav{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#header .depth01{ display: flex; }
#header .depth01 > li{ position: relative; }
#header .depth01 > li > a{ display: inline-block; font-size: 18px; font-weight: 600; color: #111; letter-spacing: -0.02em; padding: 20px 40px; transition: color 0.3s; }

#header .depth02{ width: 210px; background: var(--navy); text-align: center; padding: 24px 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; }
#header .depth02 > li > a{ display: block; font-size: 17px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; padding: 7px; 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); transition: transform 0.5s 0.3s, clip-path 0.5s 0.3s; }
#header .depth02.on > li > a{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

#header .right{ margin-right: -20px; }
#header .right button{ background: none; border: none; font-family: var(--engFont); font-size: 19px; font-weight: 800; color: #AAA; padding: 20px; position: relative; }

#header .menu::before,
#header .menu::after{ content: "MENU"; display: inline-block; line-height: 1.3; perspective-origin: center; perspective: 1000px; transition: transform 0.5s; }
#header .menu::before{ transform: rotate(0); }
#header .menu::after{ color: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0) rotateX(-90deg); }

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

	#header .menu:hover::before{ transform: translateY(-50%) rotateX(-90deg); }
	#header .menu:hover::after{ transform: translate(-50%, -50%) rotateX(0); }
}

@media screen and (max-width: 1600px){
	#header .depth01 > li > a{ padding: 20px 30px; }
	#header .depth02{ width: 150px; padding: 20px 0; }

	#header .right button{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#header .depth01 > li > a{ font-size: 17px; padding: 20px; }
	#header .depth02{ padding: 15px 0; }
	#header .depth02 > li > a{ font-size: 16px; }

	#header .right button{ font-size: 17px; }
}

@media screen and (max-width: 1200px){
	#header nav{ left: 55%; }
}

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


/* menu */
#menu{ width: 100%; height: 100%; background: #FFF; position: fixed; top: 0; left: 0; z-index: 1000; transform: translateY(-100%); transition: transform 0.8s; }
#menu .menu-top .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }
#menu .menu-top .logo svg{ width: auto; height: var(--topLogo); }
#menu .close{ background: none; border: none; padding: 15px; margin-right: -15px; }
#menu span{ display: inline-block; width: 30px; height: 2px; background: #38383A; vertical-align: middle; transform: rotate(45deg); position: relative; }
#menu span::before{ content: ""; width: 100%; height: 100%; background: inherit; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); }

#menu .center-center{ height: calc(100% - var(--headerH)); display: flex; justify-content: center; align-items: center; }
#menu .flex-box{ display: flex; }
#menu .flex-box > div{ width: 50%; }

#menu .left{ max-width: 780px; }
#menu figure{ width: 100%; min-height: calc(100vh - var(--headerH) - 150px); position: relative; overflow: hidden; clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); transition: clip-path 0.7s 0.8s; }
#menu figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }

#menu .right{ display: flex; flex-direction: column; padding-left: 85px; }
#menu .mobile{ display: none; }
#menu nav{ flex: 1 0 auto; display: flex; justify-content: space-between; margin-top: -17px; }
#menu nav .half{ width: calc((100% - 45px) / 2); transform: translateX(var(--aosMinus)); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: 0.8s; }
#menu nav .half:last-of-type{ transition-delay: 1s; }
#menu nav a{ display: block; }
#menu nav ul li{ cursor: pointer; }
#menu .depth-box{ display: none; }
#menu .depth01 > li > a{ font-size: 5rem; font-weight: 700; color: #D9D9D9; letter-spacing: -0.02em; padding: 17px; margin-left: -17px; transition: color 0.3s; }
#menu .depth02{ display: flex; flex-wrap: wrap; margin-left: -15px; }
#menu .depth02 > li > a{ font-size: 22px; font-weight: 600; color: #CCC; letter-spacing: -0.02em; transition: color 0.3s; padding: 7px 15px; }

#menu .depth01 > li.on > a{ color: #111; }

#menu .dl{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
#menu .dl dl{ width: calc((100% - 45px) / 2); transform: translateX(var(--aosMinus)); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: 0.8s; }
#menu .dl dl:last-of-type{ transition-delay: 1s; }
#menu .dl dl *{ font-size: 19px; letter-spacing: -0.02em; }
#menu .dl dl dt{ font-weight: 600; color: #222; margin-bottom: 10px; }
#menu .dl dl dd{ font-weight: 300; color: #666; line-height: 1.8; }

@media screen and (hover: hover){
	#menu .right .depth01 > li:hover > a{ color: #111; }
	#menu .right .depth02 > li:hover > a{ color: var(--mainColor) !important; }
}

@media screen and (max-width: 1600px){
	#menu .dl dl *{ font-size: 17px; }
	#menu .dl dl dt{ margin-bottom: 5px; }
	#menu .depth02 > li > a{ font-size: 20px; }
}

@media screen and (max-width: 1400px){
	#menu br{ display: none; }
	#menu .right{ padding-left: 40px; }

	#menu nav .half{ width: calc((100% - 20px) / 2); }

	#menu .dl dl{ width: calc((100% - 20px) / 2); }
}

@media screen and (max-width: 1300px){
	#menu .dl dl{ width: 100%; }
	#menu .dl dl:not(:last-of-type){ margin-bottom: 20px; }
}

@media screen and (max-width: 1280px){
	#menu .menu-top{ border-bottom: 1px solid #EEE; }

	#menu nav{ margin-top: -10px; }
	#menu .depth01 > li > a{ padding: 10px; margin-left: -10px; }
	#menu .depth02 > li > a{ font-size: 18px; }

	#menu span{ width: 25px; }
}

@media screen and (max-width: 1000px){
	#menu .center-center{ align-items: flex-start; }
	#menu .center-center > div{ height: 100%; }
	#menu .flex-box{ height: 100%; }
	#menu nav .half{ width: 100%; }
	#menu nav{ margin-top: 0; }
	#menu .pc{ display: none; }
	#menu .mobile{ display: block; }

	#menu .left{ display: none; }
	
	#menu .right{ width: 100% !important; height: 100%; padding: 20px 0; overflow-y: auto; overflow-x: clip; -ms-overflow-style: none; }
	#menu .right::-webkit-scrollbar{ display: none; }

	#menu .depth01 > li > a{ padding: 13px 15px; margin-left: 0; }

	#menu .depth02{ display: block; background: #ECF2F9; padding: 7px 0; margin-left: 0; }
	#menu .depth02 > li > a{ color: rgba(17, 17, 17, 0.5); padding: 7px 15px; }

	#menu .dl{ display: none; }
}

@media screen and (max-width: 900px){
	#menu .depth01 > li > a{ font-size: 6rem; }
	#menu .depth02 > li > a{ font-size: 20px; }
}


/* body - open */
body.open #menu{ transform: translateY(0); }
body.open #menu figure{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
body.open #menu nav .half{ transform: translateX(0); opacity: 1; }
body.open #menu .dl dl{ transform: translateX(0); opacity: 1; }


/* floating */
#floating{ width: 100%; position: fixed; bottom: 70px; z-index: 999; pointer-events: none; }
#floating ul{ max-width: max-content; margin-left: auto; }
#floating ul li{ position: relative; }
#floating ul li:not(:last-of-type){ margin-bottom: 15px; }
#floating ul li *{ pointer-events: auto; }
#floating button{ width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; background: none; border: none; border-radius: 50%; padding: 0; }
#floating button svg{ max-width: 100%; max-height: 100%; width: auto; height: auto; }
#floating .inquiry button{ background: var(--mainColor); }
#floating .kakao button{ background: #FEE712; }

#floating .link{ width: max-content; position: absolute; top: -15px; right: 0; transform: translateY(-100%) scale(0); transform-origin: bottom right; transition: transform 0.5s; overflow: hidden; }
#floating .link dl{ background: var(--navy); display: grid; grid-template-columns: repeat(2, 1fr); padding: 20px 10px 10px; }
#floating .link dl *{ font-size: 16px; color: #FFF; letter-spacing: -0.02em; }
#floating .link dl dt, 
#floating .link dl dd{ opacity: 0; transition: opacity 0.5s; }
#floating .link dl dt{ grid-column: auto / span 2; width: 100%; font-weight: 500; padding: 0 10px; }
#floating .link dl dd{  position: relative; }
#floating .link dl dd::after{ content: ""; width: 1px; height: 10px; background: rgba(255, 255, 255, 0.2); position: absolute; top: 48%; right: -1px; transform: translateY( -50%); }
#floating .link dl dd:last-of-type::after{ display: none; }
#floating .link dl dd a{ display: inline-block; font-weight: 300; color: rgba(255, 255, 255, 0.4); padding: 10px; transition: color 0.3s; }

#floating ul li.on .link{ transform: translateY(-100%) scale(1); }
#floating ul li.on .link dl dt, 
#floating ul li.on .link dl dd{ opacity: 1; transition-delay: 0.3s; }

@media screen and (hover: hover){
	#floating .link dl dd:hover a{ color: #FFF; }
}

@media screen and (max-width: 1280px){
	#floating{ bottom: 30px; }
}

@media screen and (max-width: 900px){
	#floating .link{ top: -10px; }
	#floating .link dl{ padding: 15px 5px 5px; }
}


/* footer */
#footer{ background: #111 url("/img/common/footer_bg.svg") no-repeat center center / cover; position: relative; }
#footer *{ color: #FFF; }
#footer .flex-box{ display: flex; justify-content: space-between; }

#footer .logo svg{ width: auto; height: auto; }

#footer .line01{ padding: 80px 0 90px; }
#footer .line01 .flex-box{ align-items: center; }

#footer .line02{ padding-bottom: 40px; }
#footer .line02 .flex-box{ align-items: flex-end; }

#footer .line03{ border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; text-align: center; }

#footer .nav{ display: flex; flex-wrap: wrap; align-items: center; }
#footer .nav ul{ display: flex; flex-wrap: wrap; margin-right: -20px; }
#footer .nav ul li a{ display: inline-block; font-size: 18px; font-weight: 300; letter-spacing: -0.02em; padding: 20px; }
#footer .nav ul li:not(.policy) a{ opacity: 0.5; }

#footer .sns{ margin-left: 40px; }
#footer .sns div{ display: flex; align-items: center; margin: -15px; }
#footer .sns a{ display: inline-block; padding: 15px; }

#footer .dl dl{ display: flex; align-items: baseline; }
#footer .dl dl:not(:last-of-type){ margin-bottom: 10px; }
#footer .dl dl *{ font-size: 17px; letter-spacing: -0.02em; }
#footer .dl dl dt{ width: 85px; font-weight: 500; }
#footer .dl dl dd{ max-width: calc(100% - 85px); font-weight: 200; opacity: 0.5; }

#footer .top{ margin-right: -15px; margin-bottom: -15px; }

#footer .copyright{ font-size: 17px; font-weight: 200; opacity: 0.4; }

/* top */
#top{ background: none; border: none; padding: 15px; }
#top .overflow{ display: flex; justify-content: center; align-items: center; overflow: hidden; }
#top svg{ width: auto; height: auto; position: relative; transform: translateY(15px); transition: transform 0.5s; }

@media screen and (hover: hover){
	#top:hover svg{ transform: translateY(0); }
}

@media screen and (max-width: 1600px){
	#footer .line01{ padding: 65px 0 50px; }

	#footer .nav ul li a{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
	#footer .line01{ padding: 40px 0 30px; }

	#footer .line02{ padding-bottom: 20px; }

	#footer .logo svg{ height: 45px; }

	#footer .nav ul{ margin: -5px 0; margin-right: 10px; }
	#footer .nav ul li a{ font-size: 16px; padding: 5px 10px; }

	#footer .dl dl *{ font-size: 16px; }

	#footer .copyright{ font-size: 16px; }
}

@media screen and (max-width: 1000px){
	#footer .line01{ padding: 30px 0 15px; }
	#footer .line01 .flex-box{ flex-direction: column; align-items: flex-start; }

	#footer .logo svg{ height: 40px; }

	#footer .nav{ flex-direction: column-reverse; align-items: flex-start; margin-top: 20px; }
	#footer .nav ul{ margin-right: 0; margin-left: -10px; }

	#footer .sns{ margin: 0 0 10px; }
	#footer .sns div{ margin: 0 -10px; }
	#footer .sns a{ padding: 10px; }

	#top{ position: absolute; top: 5px; right: 0; }
	#top svg{ width: 23px; }
}

@media screen and (max-width: 900px){

	#footer .copyright{ font-size: 15px; }
}