@charset 'utf-8';

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

	--mainColor: #184299;
	--mainRGB: 24, 66, 153;

	--headerH: 80px;
	--headerT: 30px;

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

	--aosP: 100px;
	--aosM: -100px;
	--aosT: 1000ms;
	--aosTF: cubic-bezier(0.55, 0, 0.1, 1);
}

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

/* inner */
.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1820{ max-width: 1860px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1720{ max-width: 1760px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1600{ max-width: 1640px; 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); }
[data-aos][data-aos][data-aos-easing=ease], 
body[data-aos-easing=ease] [data-aos]{ transition-timing-function: var(--aosTF); }

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

@media screen and (max-width: 1700px){
	:root{
		--headerH: 75px;
		--headerT: 20px;
	}
	
	html{ font-size: 50%; }
}

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

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

	html{ font-size: 40%; }
}

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


/* viewmore */
.viewmore{
	--paddingBlock: 15px;
	--paddingInline: 30px;
}
.viewmore{ display: inline-block; background: transparent; border: 1px solid transparent; font-family: var(--engFont); font-size: 18px; font-weight: 500; color: #FFF !important; letter-spacing: -0.01em; padding: var(--paddingBlock) var(--paddingInline); transition: background 0.4s, border-color 0.4s, color 0.4s; }
.viewmore span{ display: inline-flex; align-items: center; transform: translateX(calc(var(--paddingInline) * -1)); transition: transform 0.4s; }
.viewmore i{ width: 24px; height: 24px; display: inline-block; background: url("/img/main/icon_viewmore.svg") no-repeat center center / contain; margin-left: 10px; transform: rotate(0); transition: transform 0.4s, filter 0.4s; }

/* viewmore - border */
.viewmore.border{ border-color: #FFF; }
.viewmore.border span{ transform: translateX(0); }

/* viewmore - black */
.viewmore.black{ background: #FFF; border-color: #111; color: #111 !important; }
.viewmore.black span{ transform: translateX(0); }
.viewmore.black i{ filter: invert(1); -webkit-filter: invert(1); }

@media screen and (hover: hover) and (pointer: fine){
	.viewmore:hover{ background: var(--mainColor); border-color: var(--mainColor) !important; }
	.viewmore:hover span{ transform: translateX(0); }
	.viewmore:hover span i{ transform: rotate(180deg); }

	/* viewmore - black */
	.viewmore.black:hover{ color: #FFF !important; }
	.viewmore.black:hover span i{ filter: unset; -webkit-filter: unset !important; }
}

@media screen and (max-width: 1700px){
	.viewmore{
		--paddingBlock: 12px;
		--paddingInline: 22px;
	}
}

@media screen and (max-width: 1280px){
	.viewmore{
		--paddingBlock: 10px;
		--paddingInline: 18px;
	}
	.viewmore{ font-size: 17px; }
	.viewmore i{ width: 18px; height: 18px; }
}


/* header */
header{
	--bgRGB: 4, 36, 101;
	--openBg: #F8F8F8;
	--navPadding: 40px;
	--menuMargin: 4px;
	--catalogPt: 30px;
	--catalogW: 260px;
	--catalogH: 60px;
}
header{ width: 100%; position: fixed; top: var(--headerT); left: 0; z-index: 999; pointer-events: none; } 
header .blank{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; pointer-events: none; }
header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; background: rgba(var(--bgRGB), 0.7); backdrop-filter: blur(10px); padding: 0 30px; pointer-events: auto; transition: background 0.4s; }
header h1 a{ display: block; position: relative; z-index: 100; }
header h1 a::after{ content: ""; background: url("/img/common/logo_color.svg") no-repeat center center / contain; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.4s 0.2s; }
header h1 img{ width: auto; height: auto; opacity: 1; transition: opacity 0.4s 0.2s; }

header .buttons{ display: flex; align-items: center; margin-right: -20px; position: relative; z-index: 100; }
header .buttons button,
header .buttons a{ display: inline-flex; justify-content: center; align-items: center; background: none; border: none; font-family: var(--engFont); font-size: 20px; font-weight: 400; color: #FFF; text-stroke: 0.017em transparent; -webkit-text-stroke: 0.017em transparent; padding: 20px; transition: color 0.4s 0.2s, text-stroke-color 0.4s 0.2s; }
header .buttons a i{ display: inline-block; width: 24px; height: 24px; background: url("/img/common/icon_arrow.svg") no-repeat center center / contain; margin-left: 10px; position: relative; transform: translateY(-1px); }  
header .buttons a i::before,
header .buttons a i::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 0.4s 0.2s; }
header .buttons a i::before{ background: url("/img/common/icon_arrow.svg") no-repeat center center / contain; opacity: 0; }
header .buttons a i::after{ background: url("/img/common/icon_arrow_white.svg") no-repeat center center / contain; opacity: 1; }

header .menu i{ display: inline-flex; flex-direction: column; justify-content: center; width: 20px; margin-left: 15px; }
header .menu span{ display: block; height: 4px; background: url("/img/common/icon_menu.svg") no-repeat center center / contain; opacity: 1; position: relative; transform: rotate(0); transition: opacity 0.4s, transform 0.4s; will-change: opacity, transform; }
header .menu span::before,
header .menu span::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 0.4s 0.2s; }
header .menu span::before{ background: url("/img/common/icon_menu.svg") no-repeat center center / contain; opacity: 0; }
header .menu span::after{ background: url("/img/common/icon_menu_white.svg") no-repeat center center / contain; opacity: 1; }
header .menu span:not(:last-of-type){ margin-bottom: var(--menuMargin); }


header nav{ width: calc(100% + 1px); background: var(--openBg); padding: var(--navPadding); padding-top: calc(var(--navPadding) + var(--headerH)); position: absolute; top: 0; left: 0; clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); transition: clip-path 0.5s; }
header nav a{ display: block; font-family: var(--engFont); line-height: 1.3; position: relative; }
header nav a figure{ display: block; padding-bottom: 129.895%; position: relative; overflow: hidden; }
header nav a figure img{ max-width: unset; height: 100%; position: absolute; bottom: 0; left: 0; }

header nav .depth01{ margin: -5px 0; }
header nav .depth01 > li > a{ font-size: 4.8rem; font-weight: 600; color: #111; padding: 5px 0; transition: color 0.4s 0.2s; }
header nav .depth01 > li > a span{ background: linear-gradient(to bottom, transparent 90%, var(--mainColor) 90% 95%, transparent 95%) left center no-repeat; background-size: 0; transition: background-size 0.4s; }
header nav .depth01 > li.on > a{ color: var(--mainColor); }
header nav .depth01 > li.on > a span{ background-size: 100% auto; }
header nav .depth01 > li > div{ display: none; }

header nav .depth02{ padding: 10px 0 5px; }
header nav .depth02 > li > a{ font-size: 22px; font-weight: 600; color: #000; padding: 2px 0; transition: color 0.4s; }

header nav .grid-box{ display: grid; grid-template-columns: calc(100% - 380px) 380px; }
header nav .left{ padding-right: 120px; }
header nav .left .depth02{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); padding: 0; margin: -10px; }
header nav .left .depth02 > li{ margin: 10px; }
header nav .left .depth02 > li > a{ background: #EEE; font-size: 30px; font-weight: 500; color: #333; letter-spacing: -0.01em; padding: 0; position: relative; }
header nav .left .depth02 > li > a span{ text-align: right; padding: 40px; position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
header nav .left .depth02 > li > a span::after{ content: ""; display: block; height: 24px; background: url("/img/common/icon_plus.svg") no-repeat center right / contain; margin-top: 15px; transition: filter 0.4s; }
header nav .left .depth02 > li > a figure{ opacity: 0.3; transition: opacity 0.4s; }
header nav .left .depth02 > li > a figure img{ transform: scale(1); filter: grayscale(1); -webkit-filter: grayscale(1); transition: transform 0.4s var(--aosTF), filter 0.4s; }

header nav .right{ max-height: calc(100vh - var(--headerH) - (var(--headerT) * 2) - (var(--navPadding) * 2)); display: flex; flex-direction: column; }
header nav .nav{ max-height: calc(100% - var(--catalogH) - var(--catalogPt)); flex: 1 0 auto; overflow-x: clip; overflow-y: scroll; -ms-overflow-style: none; overflow-x: clip; }
header nav .nav::-webkit-scrollbar{ display: none; }
header nav .mobile{ display: none; }
header nav .mobile br{ display: none; }
header nav .mobile figure{ display: none; }

header .catalog{ padding-top: var(--catalogPt); }
header .catalog a{ width: var(--catalogW); height: var(--catalogH); display: inline-flex; justify-content: center; justify-content: center; align-items: center; background: var(--mainColor); font-family: var(--engFont); font-size: 20px; font-weight: 500; color: #FFF; }
header .catalog a i{ display: inline-block; width: 24px; height: 24px; background: url("/img/common/icon_download.svg") no-repeat center center / contain; margin-left: 10px; }


/* header - scroll */
header.scroll .flex-box{ background: rgba(var(--bgRGB), 0.5); }


/* open */
body.open{ overflow: hidden; }
body.open header .blank{ pointer-events: auto; }
body.open header .flex-box{ background: var(--openBg); }
body.open header h1 a::after{ opacity: 1; transition-delay: unset; }
body.open header h1 img{ opacity: 0; transition-delay: unset; }
body.open header .buttons button,
body.open header .buttons a{ color: var(--mainColor); text-stroke-color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); transition-delay: unset; }
body.open header .buttons a i::before{ opacity: 1; transition-delay: unset; }
body.open header .buttons a i::after{ opacity: 0; transition-delay: unset; }
body.open header .menu span::before{ opacity: 1; transition-delay: unset; }
body.open header .menu span::after{ opacity: 0; transition-delay: unset; }
body.open header .menu span:nth-of-type(1){ transform: translateY(calc(var(--menuMargin) + 100%)) rotate(45deg); }
body.open header .menu span:nth-of-type(2){ opacity: 0; }
body.open header .menu span:nth-of-type(3){ transform: translateY(calc((var(--menuMargin) + 100%) * -1)) rotate(-45deg); }
body.open header nav{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }


@media screen and (hover: hover) and (pointer: fine){
	header nav .depth01 > li:hover > a{ color: var(--mainColor); }
	header nav .depth01 > li:hover > a span{ background-size: 100% auto; }

	header nav .left .depth02 > li:hover a{ color: #111; }
	header nav .left .depth02 > li:hover a span::after{ filter: contrast(1.2) brightness(0.8); -webkit-filter: contrast(1.2) brightness(0.8); }
	header nav .left .depth02 > li:hover a figure{ opacity: 1; }
	header nav .left .depth02 > li:hover a figure img{ transform: scale(1.04); filter: unset; -webkit-filter: unset; }

	header nav .mobile .depth02 > li:hover > a{ color: var(--mainColor); }
}

@media screen and (max-width: 1700px){
	header{
		--navPadding: 35px;
		--catalogW: 230px;
		--catalogH: 55px;
	}
	header .flex-box{ padding: 0 25px; }
	header h1 img{ height: 36px; }

	header .buttons{ margin-right: -15px; }
	header .buttons button, 
	header .buttons a{ font-size: 19px; padding: 15px; }

	header nav .depth02 > li > a{ font-size: 20px; }

	header nav .left{ padding-right: 90px; }
	header nav .grid-box{ grid-template-columns: calc(100% - 300px) 300px; }
	header nav .left .depth02 > li > a{ font-size: 25px; }
	header nav .left .depth02 > li > a span{ padding: 25px 30px; }
	header nav .left .depth02 > li > a span::after{ height: 20px; }

	header .catalog a{ font-size: 19px; }
}

@media screen and (max-width: 1400px){
	header{
		--navPadding: 30px;
	}
	header nav .left .depth02 > li > a span{ padding: 15px 20px; }
}

@media screen and (max-width: 1280px){
	header{
		--navPadding: 25px;
		--menuMargin: 3px;
		--catalogW: 210px;
		--catalogH: 50px;
	}
	
	header > div:not(.blank){ padding: 0 10px !important; }
	header .flex-box{ padding: 0 20px; }
	header h1 img{ height: 32px; }

	header nav .depth02 > li > a{ font-size: 19px; }

	header nav .grid-box{ grid-template-columns: calc(100% - 250px) 250px; }
	header nav .left{ padding-right: 60px; }
	header nav .left .depth02{ margin: -07px; }
	header nav .left .depth02 > li{ margin: 7px; }
	header nav .left .depth02 > li > a{ font-size: 21px; }
	header nav .left .depth02 > li > a span::after{ height: 17px; margin-top: 10px; }

	header .buttons{ margin-right: -12px; }
	header .buttons button, 
	header .buttons a{ font-size: 18px; padding: 12px; }
	header .buttons a i{ width: 22px; height: 20px; margin-left: 5px; }

	header .menu i{ margin-left: 10px; }

	header .catalog a{ font-size: 18px; }
	header .catalog a i{ width: 22px; height: 22px; }
}

@media screen and (max-width: 1100px){
	header{
		--catalogPt: 50px;
		--catalogH: 55px;
	}

	body header nav{ width: calc(100% + 40px); height: 100vh; padding-top: calc((var(--navPadding) * 2) + var(--headerH)); position: fixed; top: calc(var(--headerT) * -1); left: -20px; }
	header nav .pc{ display: none; }
	header nav .mobile{ display: block; }
	header nav .grid-box{ display: block; height: 100%; }
	header nav .left{ display: none; }
	header nav .right{ max-height: unset; height: 100%; }

	header nav .depth01{ margin: -10px 0; }
	header nav .depth01 > li > a{ font-size: 6.5rem; padding: 10px 15px; }
	header nav .depth01 > li > div{ padding: 5px 0 5px; }
	header nav .depth02{ background: #EEE; padding: 14px 20px; margin: 0; }
	header nav .depth02 > li > a{ font-size: 20px; padding: 7px 0; }

	header .catalog{ position: relative; }
	header .catalog::before{ content: ""; width: 100%; height: 2px; background: #EEE; position: absolute; top: calc(var(--catalogPt) / 2); left: 0; }
	header .catalog a{ width: 100%; }
}


/* footer */
footer{ padding: 40px 0 50px; overflow: hidden; }
footer *{ color: #FFF; }
footer .grid-box{ display: grid; grid-template-columns: 700px calc(100% - 700px); position: relative; z-index: 10; }
footer .grid-box::before{ content: ""; width: calc(100% + ((var(--vw) - 100%)) / 2); height: 100%; background: var(--mainColor); position: absolute; top: 0; left: 0; z-index: -1; }
footer .grid-box > *{ padding-block: 80px; }
footer .left{ padding-inline: 110px; border-right: 1px solid rgba(255, 255, 255, 0.2); }
footer .right{ display: flex; flex-direction: column; justify-content: flex-end; padding-left: 120px; }
footer h1 img{ width: auto; height: 52px; }

footer nav a{ display: block; line-height: 1.3; }
footer .depth01{ margin: -7px 0; }
footer .depth01 > li > a{ font-family: var(--engFont); font-size: 4.6rem; font-weight: 600; color: #FFF; padding: 7px 0; }
footer .depth01 > li > div{ display: none; }

footer .link{ margin-top: 170px; }
footer .link ul{ display: flex; margin: -20px; }
footer .link ul li a{ display: block; font-family: var(--engFont); font-size: 18px; font-weight: 500; color: #FFF !important; padding: 20px; }

footer address{ margin-top: 40px; }
footer address h6{ font-family: var(--engFont); font-size: 20px; font-weight: 500; color: #FFF; margin-bottom: 25px; }
footer address dl{ display: flex; margin-bottom: 7px; }
footer address dl *{ font-size: 18px; }
footer address dl dt{ flex-shrink: 0; font-family: var(--engFont); font-weight: 500; padding-right: 15px; }
footer address dl dd{ font-weight: 200; color: rgba(255, 255, 255, 0.8); }
footer address .dl{ display: flex; flex-wrap: wrap; margin: 0 -12px -7px; }
footer address .dl dl{ margin: 7px 12px; }

footer .flex{ display: flex; align-items: flex-end; }
footer .clone{ display: none; }
footer .copyright{ flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 200; color: rgba(255, 255, 255, 0.5); }

/* top */
#top{ flex-shrink: 0; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.1); border: none; padding: 0; transition: background 0.4s; }
#top i{ display: block; height: 24px; position: relative; overflow: hidden; }
#top i::before,
#top i::after{ content: ""; display: block; width: 100%; height: 100%; background: url("/img/common/icon_top.svg") no-repeat center center / contain; filter: invert(1) brightness(5); -webkit-filter: invert(1) brightness(5); transition: filter 0.4s, top 0.4s, transform 0.4s; will-change: filter, top, transform; }
#top i::before{ top: 0; transform: translateY(0); }
#top i::after{ content: ""; position: absolute; top: 8px; left: 0; transform: translateY(100%); }

@media screen and (hover: hover) and (pointer: fine){
	#top:hover{ background: #FFF; }
	#top:hover i::before,
	#top:hover i::after{ filter: unset; -webkit-filter: unset; }
	#top:hover i::before{ top: -8px; transform: translateY(-100%); }
	#top:hover i::after{ top: 0; transform: translateY(0); }
}

@media screen and (max-width: 1800px){
	footer{ padding: 30px 0; }
}

@media screen and (max-width: 1700px){
	footer{ padding: 20px 0; }
	footer .grid-box{ grid-template-columns: 600px calc(100% - 600px); }
	footer .grid-box > *{ padding-block: 60px; }
	footer .left{ padding-inline: 80px; }
	footer .right{ padding-left: 90px; }
	footer h1 img{ height: 47px; }

	footer .link{ margin-top: 120px; }

	footer address h6{ font-size: 19px; }
	footer address dl *{ font-size: 17px; }
}

@media screen and (max-width: 1500px){
	footer .grid-box > *{ padding-block: 40px; }
	footer .grid-box{ grid-template-columns: 500px calc(100% - 500px); }
	footer .left{ padding-inline: 50px; }
	footer .right{ padding-left: 60px; }
}

@media screen and (max-width: 1280px){
	footer .grid-box > *{ padding-block: 30px; }
	footer .grid-box{ grid-template-columns: 400px calc(100% - 400px); }
	footer .left{ padding-inline: 30px; }
	footer .right{ padding-left: 40px; }
	footer h1 img{ height: 45px; }

	footer .link{ margin-top: 90px; }
	footer .link ul{ margin: -12px; }
	footer .link ul li a{ font-size: 17px; padding: 12px; }

	footer address h6{ font-size: 18px; margin-bottom: 15px; }
	footer address dl *{ font-size: 16px; }

	footer .flex{ margin-top: 15px; }
	footer .copyright{ font-size: 16px; }

	/* top */
	#top{ width: 50px; height: 50px; } 
	#top i{ height: 20px; }
}

@media screen and (max-width: 1023px){
	footer .grid-box{ display: block; }
	footer .left{ display: none; }
	footer .right{ padding-left: 25px; }
	footer h1 img{ height: 42px; }

	footer address{ margin-top: 30px; }

	footer .clone{ display: block; }
	footer .link{ margin-top: 30px; }
}

@media screen and (max-width: 600px){
	footer .copyright{ padding-right: 0; }

	/* top */
	#top{ position: absolute; top: 26px; right: 0; }
}