@charset 'utf-8';

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

	--mainColor: #1A3B92;
	--mainRGB: 26, 59, 146;
	--blue: #48AFFF;

	--headerH: 90px;

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

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

*{ box-sizing: border-box; word-break: keep-all; line-height: 1.3; letter-spacing: -0.02em; }
body.lock{ overflow: hidden; }
body{ font-size: 16px; }
body *{ font-size: inherit; }
.eng{ font-family: var(--engFont) !important; }

/* inner */
.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1800{ max-width: 1840px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1740{ max-width: 1780px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1680{ max-width: 1720px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1640{ max-width: 1680px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1500{ max-width: 1540px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1470{ max-width: 1510px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1000{ max-width: 1040px; 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: 80px;	
	}

	html{ font-size: 50%; }
}

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

		--aosP: 50px;
		--aosM: -50px;
	}

	html{ font-size: 40%; }
}

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

/* 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; }

@media screen and (max-width: 1700px){
	.privacy * { font-size: 18px; }
	.privacy > *:not(:last-child){ margin-bottom: 70px; }
	.privacy h4{ font-size: 26px; margin-bottom: 20px; }

	.privacy dl dt{ font-size: 19px; }
	.privacy .textBox dl dt{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	.privacy * { font-size: 17px; }
	.privacy > *:not(:last-child){ margin-bottom: 40px; }
	.privacy h4{ font-size: 22px; margin-bottom: 15px; }

	.privacy dl dt{ font-size: 18px; }
	.privacy .textBox dl dt{ font-size: 17px; }

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


/* header */
#header{
	--before: 40px;
	--after: 60px;
}
#header{ width: 100%; background: #FFF; position: absolute; top: 0; left: 0; z-index: 999; transition: background 0.4s; }
#header::after{ content: ""; width: 100%; height: 1px; background: #EEE; position: absolute; bottom: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s 0.2s; }
#header .navBg{ width: 100%; height: var(--navH); background: #FFF url("/img/common/depthBox_bg.jpg") no-repeat bottom right / auto; position: absolute; top: 0; left: 0; transform: scaleY(0); transform-origin: top; transition: transform 0.4s 0.2s; }
#header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }

#header h1,
#header .right{ position: relative; z-index: 100; }
#header h1 img{ width: auto; height: auto; }

#header nav{ width: 100%; position: absolute; top: 0; left: 0; pointer-events: none; }
#header .depth01{ max-width: 100%; width: max-content; display: flex; justify-content: center; margin: 0 auto; pointer-events: auto; opacity: 1; transition: opacity 0.4s; }
#header .depth01 > li > a{ height: var(--headerH); display: flex; justify-content: center; align-items: center; font-size: 19px; font-weight: 600; color: #151515; padding: 0 var(--before); position: relative; z-index: 100; transition: padding 0.4s; }
#header .depth01 > li > a::after{ content: ""; width: 100%; height: 2px; background: var(--mainColor); position: absolute; bottom: 0; left: 0; transform: scaleX(0); transition: transform 0.4s; }

#header .depthBox{ width: 100%; padding-top: var(--headerH); position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
#header .depthBox .inner{ max-width: 1005px; width: 100%; margin: 0 auto; padding: 0 20px; }
#header .depthBox dl{ padding: 55px 0 60px; }
#header .depthBox dl dt{ margin: -10px 0 20px; }
#header .depthBox dl dt a{ display: inline-block; font-size: 30px; font-weight: 700; color: #151515; padding: 10px 0; padding-right: 25px; position: relative; }
#header .depthBox dl dt a::after{ content: ""; width: 9px; height: 13px; background: url("/img/common/depth01_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

#header .depth02{ display: flex; flex-wrap: wrap; margin: -10px -25px; }
#header .depth02 > li > a{ display: inline-block; font-size: 20px; font-weight: 400; color: 959595; padding: 10px 25px; transition: color 0.4s; }

#header .right{ display: flex; align-items: center; margin-right: -12px; }
#header .right button{ background: none; border: none; padding: 12px; opacity: 1; transition: opacity 0.4s; }

#header .menu{ display: flex; flex-direction: column; overflow: hidden; }
#header .menu span{ display: inline-block; width: 24px; height: 2px; background: #151515; position: relative; transform: rotate(0); transition: top 0.4s, bottom 0.4s, background 0.4s, transform 0.4s; }
#header .menu span:nth-of-type(1){ top: 0; will-chanage: top, transform; }
#header .menu span:nth-of-type(2){ margin: 7px 0; }
#header .menu span:nth-of-type(3){ bottom: 0; will-chanage: bottom, transform; }
#header .menu span:nth-of-type(2)::after{ content: ""; width: calc(100% / 3); height: 200%; background: #FFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: left 0.4s 0.4s, transform 0.4s 0.4s; }

/* header - hover */
#header.hover::after{ opacity: 1; transition-delay: unset; }
#header.hover .navBg{ transform: scaleY(1); transition-delay: unset; }
  
@media screen and (hover: hover){
	#header .depth01:hover > li > a{ padding: 0 var(--after); }
	#header .depth01 > li:hover > a::after{ transform: scaleX(1); }
	#header .depth01 > li:hover .depthBox{ opacity: 1; pointer-events: auto; transition-delay: 0.2s; }

	#header .depth02 > li:hover > a{ font-weight: 500; color: #353535; }
}

@media screen and (max-width: 1700px){
	#header{
		--before: 30px;
		--after: 50px;
	}
	#header h1 img{ height: 35px; }

	#header .depthBox dl dt a{ font-size: 26px; }
	#header .depth02 > li > a{ font-size: 19px; }
}

@media screen and (max-width: 1400px){
	#header{
		--before: 25px;
		--after: 35px;
	}
	#header h1 img{ height: 30px; }

	#header .depth01{ transform: translateX(3%); }
	#header .depth01 > li > a{ font-size: 18px; }

	#header .depthBox dl{ padding: 40px 0; }
	#header .depthBox dl dt a{ font-size: 23px; }
	#header .depth02 > li > a{ font-size: 18px; }
}

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

	#header .right{ margin-right: -10px; }
	#header .right button{ padding: 10px; }
}


/* search */
#search{
	--height: 80px;
	--icon: 36px;
}
#search{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 900; display: none; }
#search .blank{ width: 100%; height: 100%; }
#search .box{ width: 100%; background: #FFF; padding: 200px 0; position: absolute; top: 0; left: 0; display: none; }
#search .inner{ max-width: 960px; width: 100%; margin: 0 auto; padding: 0 20px; }

#search .input{ position: relative; }
#search .input input{ width: 100%; height: var(--height); border: none; border-bottom: 2px solid #151515; border-radius: 0; -webkit-border-radius: 0; font-size: 30px; font-weight: 600; color: #151515; padding-right: calc(var(--icon) + 20px); outline: none; }
#search .input input::placeholder{ font-weight: 500; color: #D5D5D5; }
#search .input button{ height: var(--height); background: none; border: none; padding: 0; padding-left: 20px; position: absolute; top: 0; right: 0; z-index: 10; }
#search .input button img{ width: var(--icon); height: auto; }

/* body - search */
body.search{ overflow: hidden; }
body.search #header .depth01{ opacity: 0; pointer-events: none; } 
body.search #header .search{ opacity: 0; pointer-events: none; }
body.search #header .menu span{ transition-delay: 0.4s; }
body.search #header .menu span:nth-of-type(1){ top: 7px; transform: translateY(2px) rotate(45deg); }
body.search #header .menu span:nth-of-type(2){ background: transparent; }
body.search #header .menu span:nth-of-type(3){ bottom: 7px; transform: translateY(-2px) rotate(-45deg); }
body.search #header .menu span:nth-of-type(2)::after{ left: 100%; transform: translate(0, -50%); transition-delay: unset; }

@media screen and (max-width: 1700px){
	#search{
		--height: 70px;
	}
	#search .box{ padding: 150px 0; }
	#search .input input{ font-size: 26px; }
}

@media screen and (max-width: 1280px){
	#search{
		--height: 60px;
		--icon: 30px;
	}
	#search .box{ padding: calc(var(--headerH) + 100px) 0 100px; }
	#search .input input{ font-size: 22px; }
}

@media screen and (max-width: 900px){
	#search{
		--height: 55px;
	}
	#search .box{ padding: calc(var(--headerH) + 50px) 0 70px; }
	#search .input input{ font-size: 20px; }
}


/* menu */
#menu{
	--width: 385px;
}
#menu{ width: 100%; height: 100%; background: #FFF; position: fixed; top: 0; left: 0; z-index: 900; display: none; }
#menu nav .mobile{ display: none; }
#menu > div,
#menu nav{ height: 100%; position: relative; }
#menu nav{ display: flex; align-items: center; }
#menu nav > div{ width: 100%; }
#menu nav a{ display: block; }

#menu .depth01::after{ content: ""; width: 1px; height: 100%; background: #DDD; position: absolute; top: 0; left: var(--width); transform: scaleY(0); transform-origin: top; transition: transform 1s 0.4s; }
#menu .depth01 > li{ display: flex; align-items: center; transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT) 0.4s, opacity var(--aosT) 0.4s; }
#menu .depth01 > li:not(:last-of-type){ margin-bottom: 50px; }
#menu .depth01 > li > a{ width: var(--width); font-size: 5rem; font-weight: 700; color: #252C56; opacity: 0.2; transition: opacity 0.4s; }
#menu .depth01 > li.on a{ opacity: 1; }

#menu .depthBox{ width: calc(100% - var(--width)); }
#menu .depth02{ display: flex; flex-wrap: wrap; margin: -10px -20px; padding-left: 80px; }
#menu .depth02 > li > a{ width: 140px; font-size: 22px; font-weight: 500; color: #959595; margin: 0 20px; padding: 10px 0; transition: color 0.4s; }

/* body - open */
body.open{ overflow: hidden; }
body.open #header{ background: transparent; }
body.open #header .depth01{ opacity: 0; pointer-events: none; } 
body.open #header .search{ opacity: 0; pointer-events: none; }
body.open #header .menu span{ transition-delay: 0.4s; }
body.open #header .menu span:nth-of-type(1){ top: 7px; transform: translateY(2px) rotate(45deg); }
body.open #header .menu span:nth-of-type(2){ background: transparent; }
body.open #header .menu span:nth-of-type(3){ bottom: 7px; transform: translateY(-2px) rotate(-45deg); }
body.open #header .menu span:nth-of-type(2)::after{ left: 100%; transform: translate(0, -50%); transition-delay: unset; }

body.open #menu .depth01::after{ transform: scaleY(1); }
body.open #menu .depth01 > li{ opacity: 1; transform: translateY(0); }


@media screen and (hover: hover){
	#menu .depth01 > li:hover > a{ opacity: 1; }
	#menu .depth02 > li:hover > a{ color: #252C56; }
}

@media screen and (max-width: 1700px){
	#menu{
		--width: 350px;
	}
	#menu .depth02{ padding-left: 60px; }
	#menu .depth02 > li > a{ width: 130px; font-size: 20px; }
}

@media screen and (max-width: 1280px){
	#menu{
		--width: 300px;
	}
	#menu .depth02{ padding-left: 40px; }
	#menu .depth02 > li > a{ width: 120px; font-size: 19px; }
}

@media screen and (max-width: 1200px){
	#menu{
		--width: 230px;
	}
}

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

	#menu nav{ height: calc(100% - var(--headerH)); overflow-x: clip; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; align-items: flex-start; margin-top: var(--headerH); }
	#menu .depth01::after{ display: none; }
	#menu .depth01 > li{ display: block; border-bottom: 1px solid #DDD; }
	#menu .depth01 > li:first-of-type{ border-top: 1px solid #DDD; }
	#menu .depth01 > li:not(:last-of-type){ margin-bottom: 0; }
	#menu .depth01 > li > a{ width: 100%; padding: 20px; margin: 0; }

	#menu .depthBox{ width: 100%; border-top: 1px solid #DDD; display: none; }
	#menu .depth02{ display: block; margin: 0; padding: 10px 0; }
	#menu .depth02 > li > a{ width: 100%; font-size: 19px; margin: 0; padding: 10px 20px; }
}

@media screen and (max-width: 500px){
	#menu{
		--width: 45%;
	}
}



/* footer */
#footer{
	--height: 50px;
	--padding: 20px;
}
#footer{ background: #15161D; padding: 100px 0 80px; }
#footer *{ color: #FFF; }
#footer .flex-box{ display: flex; justify-content: space-between; }
#footer .box{ display: flex; justify-content: flex-end; margin-bottom: 30px; }
#footer h2{ font-size: 6rem; font-weight: 500; line-height: 1.4; }

#footer .line01{ overflow: hidden; }
#footer .line02{ margin-top: 95px; }
#footer .line02 .flex-box{ align-items: flex-end; }

#footer .depth01{ display: flex; margin: -10px -30px; }
#footer .depth01 a{ display: block; line-height: 1.3; }
#footer .depth01 > li{ overflow: hidden; }
#footer .depth01 > li:not(:last-of-type){ margin-right: 20px; }
#footer .depth01 > li > a{ font-size: 19px; font-weight: 500; padding: 10px 30px; }

#footer h1 svg{ width: auto; height: 42px; }
#footer h1 svg rect, 
#footer h1 svg path{ fill: #FFF; }

#footer address{ margin-bottom: -6px; }
#footer address *{ font-size: 17px; font-weight: 300; color: rgba(255, 255, 255, 0.8); }
#footer address > p{ margin-bottom: 6px; }
#footer address ul,
#footer address ul li{ display: flex; }
#footer address ul{ flex-wrap: wrap; font-family: var(--engFont); margin-left: -15px; }
#footer address ul li{ margin: 6px 15px; }
#footer address span{ display: inline-block; padding-right: 20px; position: relative; }
#footer address span::after{ content: ""; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.3); position: absolute; top: calc(1.2em / 2); right: 10px; transform: translateY(-50%); }

#footer .copyright{ font-family: var(--engFont); font-size: 18px; font-weight: 200; color: rgba(255, 255, 255, 0.3); margin-top: 25px; }

#footer .familysite{ width: 170px; font-family: var(--engFont); position: relative; }
#footer .familysite > *{ background: #212229; }
#footer .familysite button{ width: 100%; height: var(--height); display: flex; justify-content: space-between; align-items: center; border: none; font-size: 20px; font-weight: 500; padding: 0 var(--padding); text-align: left; }
#footer .familysite button::after{ content: ""; width: 24px; height: 24px; display: inline-block; background: url("/img/common/familysite_arrow.svg") no-repeat center center / contain; transform: rotate(0); transition: transform 0.3s; }
#footer .familysite ul{ width: 100%; position: absolute; bottom: 100%; left: 0; display: none; }
#footer .familysite ul li a{ width: 100%; min-height: var(--height); display: flex; align-items: center; font-size: 17px; font-weight: 300; color: rgba(255, 255, 255, 0.15); padding: 10px var(--padding); transition: color 0.3s; }
#footer .familysite.on button::after{ transform: rotate(180deg); }

#footer .sns ul{ display: flex; justify-content: flex-end; }
#footer .sns ul li{ margin-left: 10px; }
#footer .sns a{ width: var(--height); height: var(--height); display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); }

#footer .policy ul{ display: flex; justify-content: flex-end; margin: 0 -20px -15px; }
#footer .policy ul li{ position: relative; }
#footer .policy ul li::after{ content: ""; width: 1px; height: 14px; background: #FFF; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#footer .policy ul li:last-of-type::after{ display: none; }
#footer .policy ul li >*{ display: flex; background: none; border: none; font-size: 18px; font-weight: 500; padding: 15px 20px; }
#footer .policy ul li button{ font-family: var(--engFont); font-weight: 400; }

@media screen and (hover: hover){
	#footer .familysite ul li:hover a{ color: #FFF; }
}

@media screen and (max-width: 1700px){
	#footer{ padding: 70px 0 50px; }
	#footer .line02{ margin-top: 70px; }

	#footer h1 svg{ height: 35px; }

	#footer .depth01 > li:not(:last-of-type){ margin-right: 10px; }
	#footer .depth01 > li > a{ font-size: 18px; }
	#footer .depth02 > li > a{ font-size: 17px; }

	#footer .familysite button{ font-size: 18px; }

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

@media screen and (max-width: 1500px){
	#footer{
		--height: 45px;
		--padding: 15px;
	}

	#footer .depth01 > li{ width: 120px; }
	#footer .depth01 > li:not(:last-of-type){ margin-right: 0; }
	#footer .depth01 > li > a{ font-size: 17px; }
	#footer .depth02 > li > a{ font-size: 16px; }
}

@media screen and (max-width: 1400px){
	#footer .line02{ margin-top: 30px; }
	#footer nav{ display: none; }
}

@media screen and (max-width: 1280px){
	#footer{ padding: 40px 0 30px; }
	#footer .line02{ margin-top: 10px; }
	
	#footer h1{ margin-bottom: 20px; }
	#footer h1 svg{ height: 30px; }

	#footer address ul{ flex-direction: column; }

	#footer .familysite button{ font-size: 17px; }
	#footer .familysite ul li a{ font-size: 16px; }

	#footer .policy ul li >*{ font-size: 17px; }

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

@media screen and (max-width: 900px){
	#footer{ padding: 30px 0 25px; position: relative; }
	#footer > div{ padding-bottom: 35px; }
	#footer .line02 .flex-box{ flex-direction: column; align-items: flex-start; }
	#footer h1{ margin-bottom: 10px; }
	#footer h2{ font-size: 5rem; }

	#footer .right{ margin-top: 20px; }
	#footer .box{ justify-content: flex-start; margin-bottom: 10px; }
	#footer .policy ul{ justify-content: flex-start; }

	#footer .copyright{ width: 100%; padding: 0 20px; position: absolute; bottom: 25px; left: 0; }
}