@charset 'utf-8';

/* ���� */
:root{
	--aosPlus: 100px;
	--aosMinus: -100px;

    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'Poppins', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;

	--mainColor: #0F206C;
	--grayBg: #F4F6F9;
	--fontColor: #212121;

	--vh: 100%;
	--headerH: 90px;
}

body.lock{ overflow: hidden; }
*{  box-sizing: border-box; word-break: keep-all; line-height: 1.3; }
.w1760{ max-width: 1760px; width: 100%; margin: 0 auto; }
.w1600{ max-width: 1600px; width: 100%; margin: 0 auto; }

@media screen and (max-width: 1800px){
	.w1760{ padding: 0 20px; }
}

@media screen and (max-width: 1640px){
	.w1600{ padding: 0 20px; }
}

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

/* privacy */
.privacy * { font-size: 1.6rem; line-height: 1.625; }
.privacy h3 { font-weight: 700; }
.privacy h4{ font-weight: 700; }
.privacy .textBox,
.privacy .pBox,
.privacy .dlBox,
.privacy .subTextBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.privacy .textBox { gap: 100px 0; }
.privacy .textBox h3{ font-size: 2.2rem; margin-bottom: 5px; }

.privacy .pBox { gap: 30px 0; margin: 40px 0; }

.privacy .dlBox { gap: 50px 0; }
.privacy .dlBox > dl > dt { font-size: 1.8rem; font-weight: 500; }
.privacy .dlBox > dl > dd > p { margin: 5px 0; }
.privacy .dlBox > dl > dd > ul { padding: 0 0 0 20px; }
.privacy .dlBox > dl > dd ul:only-child{ margin-top: 5px; }

.privacy .square { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 5px; position: relative; padding-left: 12px; }
.privacy .square::before { content: "-"; position: absolute; top: 0; left: 0; }
.privacy .square > p { width: 100%; padding: 0 0 0 13px; }

.privacy .subTextBox { gap: 24px 0; }
.privacy .subTextBox h6 { font-weight: 500; margin: 0 0 4px; }
.privacy .subText { margin: 4px 0; }
.privacy .subText dd { padding: 0 0 0 11px; }

.privacy .contact { margin: 60px 0 0; }
.privacy .contact ol { margin: 30px 0 0; }

@media screen and (max-width: 1250px){
	.privacy .textBox h3{ font-size: 2rem; }
	.privacy .textBox { gap: 80px 0; }

	.privacy .pBox{ gap: 15px 0; }
	
	.privacy .dlBox { gap: 30px 0; }
}

@media screen and (max-width: 900px){
	.privacy .dlBox > dl > dt { font-size: 1.7rem; }
	.privacy * { font-size: 1.5rem; }
	.privacy .dlBox > dl > dd > ul { padding: 0 0 0 10px; }
}

/* intro */
#intro{ width: 100%; height: 100%; background: var(--mainColor); position: fixed; top: 0; left: 0; z-index: 10000; animation: intro_height 0.8s 0.5s both; }
#intro::before, #intro::after{ content: ""; width: 100%; height: 100%; position: absolute;  bottom: 0; left: 0; }
#intro::before{ background: #fff; transform: translateY(100%); }
#intro::after{ background: var(--mainColor); transform: translateY(200%); }
#intro .overflow{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#intro figure{ max-width: 40%; }


@keyframes intro_height{
	0%{ height: 100%; }
	100%{ height: 0; }
}


/* header */
#header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 999; transition: background 0.5s; }
#header::after{ content: ""; width: 100%; height: 1px; background: #E5E5E5; position: absolute; bottom: -1px; left: 0; opacity: 0; transition: opacity 0.5s; }
#header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }
#header .logo{ display: inline-block; position: relative; }
#header .logo::after{ content: ""; width: 100%; height: 100%; background: url("/img/common/hnjcorp_logo_color.svg") no-repeat center center / contain; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; }
#header .logo img{ opacity: 1; transition: opacity 0.5s; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#header nav{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 1; transition: opacity 0.5s; }
#header nav a{ display: inline-block; line-height: 1.3; letter-spacing: -0.02em; transition: color 0.5s; }
#header .depth01{ display: flex; }
#header .depth01 > li{ position: relative; }
#header .depth01 > li > a{ height: var(--headerH); display: flex; align-items: center; font-size: 1.9rem; font-weight: 600; color: #fff; padding: 0 47px; transition: color 0.5s; }

#header .depth02{ min-width: 160px; background: rgba(0, 0, 0, 0.6); text-align: center; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 20px 0; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: none; }
/* #header .depth02 > li.depth > a::after{ content: url("/img/common/depth_arrow.svg"); display: inline-block; vertical-align: text-top; opacity: 0.2; margin-left: 5px; transform: translateY(0) scaleY(1); transition: opacity 0.5s, transform 0.5s; } */
#header .depth02 > li > a{ font-sizE: 1.6rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); padding: 5px; }

#header .depth03{ padding: 6px 0; }
#header .depth03 > li > a{ font-size: 1.5rem; font-weight: 400; color: rgba(255, 255, 255, 0.2); padding: 4px; }

#header .right{ display: flex; align-items: center; }

#header .lang ul{ display: flex; padding: 0 10px; border: 2px solid #fff; border-radius: 100px; transition: border 0.5s; }
#header .lang ul li{ position: relative; }
#header .lang ul li::after{ content: ""; width: 2px; height: 15px; background: rgba(255, 255, 255, 0.3); position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); transition: background 0.5s; }
#header .lang ul li:last-of-type::after{ display: none; }
#header .lang ul li a{ display: inline-block; font-family: var(--engFont); font-size: 1.6rem; font-weight: 600; color: rgba(255, 255, 255, 0.3); line-height: 1.3; letter-spacing: -0.02em; padding: 8px 10px; transition: color 0.5s; }
#header .lang ul li.on a{ color: #fff; }

#header .menu{ background: none; border: none; padding: 20px; margin-right: -20px; }
#header .menu span{ display: inline-block; width: 40px; height: 2px; background: #fff; position: relative; top: -8px; transition: background 0.5s, transform 0.5s; }
#header .menu span::after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; top: 8px; left: 0; transition: background 0.5s, transform 0.5s, top; }

/* header - scroll */
#header.scroll .logo::after{ opacity: 1; }
#header.scroll .logo img{ opacity: 0; }
#header.scroll .depth01 > li > a{ color: #111; }
#header.scroll .lang ul{ border: 2px solid #E5E5E5; }
#header.scroll .lang ul li::after{ background: #E5E5E5; }
#header.scroll .lang ul li a{ color: #CCC; }
#header.scroll .lang ul li.on a{ color: #111; }
#header.scroll .menu span, #header.scroll .menu span::after{ background: #000; }

@media screen and (hover: hover){
	#header .depth02 > li:hover > a{ color: #fff; }
	/* #header .depth02 > li:hover > a::after{ opacity: 1; transform: translateY(5%) scaleY(-1); } */
	#header .depth03 > li:hover > a{ color: #fff; }
}

@media screen and (max-height: 800px){
	/* header - scroll */
	#header.scroll{ background: #fff; }
	#header.scroll::after{ opacity: 1; }
	#header.scroll .lang ul{ border: 2px solid var(--fontColor); }
}

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

	#header{ border-bottom: 1px solid transparent; }
	#header .logo img{ height: 40px; }
	#header nav{ display: none; }
	#header .menu span{ width: 30px; }

	/* header - scroll */
	#header.scroll{ background: #fff; }
	#header.scroll::after{ opacity: 1; }
	#header.scroll .lang ul{ border: 2px solid var(--fontColor); }
}


/* menu */
#menu{ width: 100%; height: 100%; background: #fff; position: fixed; top: 0; left: 0; z-index: 900; display: none; }
#menu .flex-box{ height: 100%; display: flex; }
#menu .img-box{ width: 680px; height: 100%; position: relative; }
#menu .img-box::after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; transform: scaleY(1); transform-origin: bottom; transition: transform 1s 0.5s; }
#menu .img-box .bg{ width: 100%; height: 100%; background: url("/img/common/menu_bg.jpg") no-repeat center center / cover; }

#menu .nav-box{ width: calc(100% - 680px); height: 100%; padding: 0 100px; overflow-y: scroll; scrollbar-width: none; }
#menu .nav-box .nav{ padding-top: 195px; }
#menu .nav-box .nav .mobile{ display: none; }

#menu .depth01 > li{ padding: 30px 0; }
#menu .depth01 > li:first-of-type{ padding-top: 0; }
#menu .depth01 > li:not(:last-of-type){ border-bottom: 1px solid #EEE; }
#menu .depth01 a{ display: inline-block; letter-spacing: -0.02em; line-height: 1.3; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: transform 1s 0.5s, clip-path 1s 0.5s, color 0.5s; }
#menu .depth01 > li > a{ font-size: 3.4rem; font-weight: 600; color: #212121; padding: 10px 20px; }
#menu .depth02{ display: flex; flex-wrap: wrap; margin-left: -10px; }
#menu .depth02 > li{ display: flex; align-items: baseline; }
#menu .depth02 > li > a{ font-size: 2rem; font-weight: 500; color: #666; padding: 10px 30px; }
#menu .depth03{ margin-left: -10px; margin-right: 20px; padding-bottom: 10px; }
#menu .depth03 > li > a{ font-size: 1.8rem; font-weight: 300; color: #777; padding: 3px 10px; }


/* open */
.open{ overflow: hidden; }
.open #header{ background: transparent !important; }
.open #header::after{ opacity: 0 !important; }
.open #header .logo::after{ opacity: 0; }
.open #header .logo img{ opacity: 1; }
.open #header nav{ opacity: 0; pointer-events: none; }
.open #header .lang ul{ border: 2px solid #212121; }
.open #header .lang ul li::after{ background: rgba(33, 33, 33, 0.3); }
.open #header .lang ul li a{ color: rgba(33, 33, 33, 0.3); }
.open #header .lang ul li.on a{ color: #212121; }
.open #header .menu span, .open #header .menu span::after{ background: #212121; }
.open #header .menu span{ top: -4px; transform: rotate(45deg); }
.open #header .menu span::after{ top: 0; transform: rotate(90deg); }

.open #menu .img-box::after{ transform: scaleY(0); }
.open #menu .depth01 a{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

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

@media screen and (max-width: 1800px){
	#menu .nav-box .nav{ padding-top: 150px; }
	#menu .nav-box{ padding: 0 50px; }
}

@media screen and (max-width: 1700px){
	#menu .depth01 > li > a{ font-size: 3rem; }
	#menu .depth02 > li > a{ font-size: 1.9rem; }
	#menu .depth03 > li > a{ font-size: 1.7rem; }
}

@media screen and (max-width: 1400px){
	#menu .img-box{ width: 500px; }
	#menu .nav-box{ width: calc(100% - 500px); }
}

@media screen and (max-width: 1280px){
	#menu .nav-box{ padding: 0 20px; }
	#menu .nav-box .nav{ padding-top: calc(var(--headerH) + 20px); }
	#menu .depth01 > li > a{ font-size: 2.6rem; }
	#menu .depth02{ margin-left: 0; }
	#menu .depth02 > li > a{ font-size: 1.8rem; padding: 10px 20px; }
	#menu .depth03 > li > a{ font-size: 1.6rem; }
}

@media screen and (max-width: 1100px){
	#menu .img-box{ display: none; }
	#menu .nav-box{ width: 100%; }
}

@media screen and (max-width: 600px){
	#menu .pc{ display: none; }
	#menu .nav-box .nav .mobile{ display: block; }

	#menu .depth01 > li{ padding: 0; }
	#menu .depth01 > li:last-of-type{ border-bottom: 1px solid #EEE; }
	#menu .depth01 > li > a{ width: 100%; font-size: 2.8rem; padding: 15px 10px; }
	#menu .depth02{ display: none; border-top: 1px solid #EEE; padding: 5px 0; }
	#menu .depth02 > li{ display: block; }
	#menu .depth02 > li > a{ width: 100%; font-size: 1.9rem; padding: 7px 10px; position: relative; }
	#menu .depth02 > li.arrow > a::after{ content: url("/img/common/menu_arrow.svg"); position: absolute; top: 55%; right: 10px; transform: translateY(-50%) rotate(0); transition: top 0.5s, transform 0.5s; }
	#menu .depth02 > li.arrow.on > a::after{ top: 45%; transform: translateY(-50%) rotate(-180deg); }
	#menu .depth03{ display: none; margin: 0; background: rgba(15, 32, 108, 0.9); padding: 7px 0; }
	#menu .depth02 > li:last-of-type .depth03{ margin-bottom: -7px; }
	#menu .depth03 > li > a{ font-size: 1.8rem; color: #fff; padding: 7px 15px; }
}


/* top */
#top{ width: 60px; height: 60px; background: transparent; border: 1px solid var(--mainColor); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: fixed; bottom: 20px; right: 20px; z-index: 800; padding: 10px; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
#top img{ max-width: 100%; height: auto; }

#top.active{ opacity: 1; pointer-events: auto; }

#top.white{ border: 1px solid #fff; }
#top.white img{ filter: grayscale(1) brightness(10); -webkit-filter: grayscale(1) brightness(10); }

@media screen and (max-width: 1280px){
	#top{ width: 50px; height: 50px; }
}


/* footer */
#footer{ background: #000; padding: 30px 0; }
#footer .flex-box{ display: flex; justify-content: space-between; }
#footer .dl{ display: flex; flex-wrap: wrap; align-items: center; gap: 5px 20px; padding-right: 80px; }
#footer dl{ display: flex; align-items: baseline; }
#footer dl *{ font-family: var(--engFont); font-size: 1.6rem; letter-spacing: -0.02em; }
#footer dl dt{ font-weight: 600; color: #fff; padding-right: 20px; }
#footer dl dd{ font-weight: 300; color: #AAA; }

@media screen and (max-width: 1560px){
	#footer .flex-box{ flex-direction: column; align-items: flex-start; }
	#footer .dl{ margin-top: 30px; }
}