/* ========================= header ========================= */
header {position: fixed; width: 100%; left: 0; top: 0; z-index: 99999; }
header .wrap {display: flex; align-items: center; justify-content: space-between;padding: 20px 0; box-sizing: border-box; }
header .logoBx {display: flex; align-items: center; justify-content: flex-start; gap: 22px; position: relative; z-index: 1; font-size: 1px; gap: 16.2em;}
header .logoBx .logo { }
header .logoBx .logo svg { width: 100%; }
header .logoBx .logo svg *{fill: #fff;}
header .logoBx .logo.n1 { width: 165em; }
header .logoBx .logo.n2 { width: 56em; }
header .right {position: relative;}
header .right nav { }
header .right nav > ul {
	display: inline-flex; align-items: center; justify-content: center;position: relative;
	box-shadow: 0 0 8px -5px gray; border-radius: 100px;
}
header .right nav > ul::before {content:''; display: block; position: absolute; left: 1px; top: 0; z-index: -1;width: calc(100% - 2px); height: 100%; background-color: rgba(255,255,255,0.25); border-radius: 100px; }
header .right nav > ul > li { position: relative; display: flex; align-items: center; justify-content: center;}
header .right nav > ul > li .depth01 {font-family: 'Pretendard', sans-serif; letter-spacing: -0.04em;padding: calc(12/16*1em) calc(20/16 *1em); box-sizing: border-box; color: #fff; background-color: transparent;border-radius: 100px; transition: background-color 0.1s,color 0.1s;}
header .right nav > ul > li.on .depth01 { color: var(--blue); background-color: #fff;}
header .right nav > ul > li .depth01 p{}
header .right nav > ul > li .depth01 .ico{position: relative; display: none;}


header .right nav > ul > li .depth02{
	position: absolute; top: 100%; padding-top: 10px;
	min-width: 100px; text-align: center;
	display: none;
}
header .right nav > ul > li .depth02 .rowBx{
	background-color: #fff; box-shadow: 0 0 10px -5px gray;
	border-radius: 6px; overflow: hidden;
}
header .right nav > ul > li .depth02 .rowBx div{}
header .right nav > ul > li .depth02 .rowBx div a{
	padding: 10px; font-size: 14px; font-weight: 500; white-space: nowrap;
}
header .right nav > ul > li .depth02 .rowBx div a:hover{background-color: var(--green); color: #fff;}
header .right nav > ul > li .depth02 .rowBx div:first-child a{padding-top: 16px;}
header .right nav > ul > li .depth02 .rowBx div:last-child a{padding-bottom: 16px;}

header .menuIco {display: none;font-size: 1px;width: 36em; height: 20em;align-items: center; justify-content: center;position: relative; z-index: 1001; }
header .menuIco::before {content:''; display: block; position: absolute; width: 100%; height: 100%; padding: 10em; }
header .menuIco div {width: 100%; height: 2px; background-color: #fff; border-radius: 30px;position: absolute;transition: opacity 0.5s,transform 0.5s,top 0.5s,bottom 0.5s,background-color 0.5s; }
header.menuOn .menuIco div{background-color: #000;}
header .menuIco div:nth-child(1) { top: 0; }
header .menuIco div:nth-child(2) { }
header .menuIco div:nth-child(3) { bottom: 0; }
header.menuOn .menuIco div:nth-child(1) { transform: rotate(45deg); top: 9em; }
header.menuOn .menuIco div:nth-child(2) { opacity: 0; transform: translateX(-50%); }
header.menuOn .menuIco div:nth-child(3) { transform: rotate(-45deg); bottom: 9em; }

/* 색상 변경 */
header .logoBx .logo svg *{transition: fill 0.5s;}
header.color .logoBx .logo.n1 svg .st0{fill: #004F9E;}
header.color .logoBx .logo.n1 svg .st1{fill: #000;}
header.color .logoBx .logo.n2 svg .st0{fill: #003CDC;}

header .right nav > ul::before{transition: background-color 0.5s;}
header.color .right nav ul::before{background-color: rgba(0,0,0,0.25);}
header.color .menuIco div{background-color: #000;}

/* 메뉴 열릴때 */
header.menuOn .menuIco div{background-color: #000;}
header.menuOn .logoBx .logo.n1 svg *{fill: #000;}
header.menuOn .logoBx .logo.n1 svg .st0{fill: #004F9E;}
header.color .logoBx .logo.n2 svg .st0{fill: #003CDC;}





@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	header .wrap{padding: 16px 0;}
}
@media screen and (max-width:1024px) {
	header .right nav > ul > li .depth01{font-size: 14px; }
}
@media screen and (max-width:820px) {

	header .menuIco{display: flex; font-size: 0.8px; }

	header .right nav{
		position: absolute; right: -5vw; top: -21px; text-align: right;
		width: 100vw; height: calc(var(--vh100) + 40px); background-color: rgba(255,255,255,0.9);
		backdrop-filter: blur(10px);
		padding-top: calc(var(--vh) * 22); box-sizing: border-box; pointer-events: none; opacity: 0;
		transition: opacity 0.5s;
	}
	header.menuOn .right nav{opacity: 1; pointer-events: auto;}
	header .right nav > ul{flex-direction: column; border-radius: 0; width: 100%; box-shadow: unset; box-shadow: unset; gap: 20px;}
	header .right nav > ul::before{display: none;}
	header .right nav > ul > li{width: 100%; align-items: flex-end; justify-content: flex-end; flex-direction: column;}
	header .right nav > ul > li .depth01{color: #000; font-size: 44px; font-weight: 600; padding: 0 5vw; display: flex; align-items: center; justify-content: flex-end; gap: 0.4em; box-sizing: border-box;}
	header .right nav > ul > li.on .depth01{background-color: transparent; border-radius: 0;}
	header .right nav > ul > li .depth01 .ico{display: flex; align-items: center; justify-content: center; width: 0.5em; height: 0.5em;}
	header .right nav > ul > li .depth01 .ico::before,
	header .right nav > ul > li .depth01 .ico::after{
		content:''; display: block; position: absolute; width: 100%; height: 4px; background-color: #000;
		transition: transform 0.5s,background-color 0.5s;
	}
	header .right nav > ul > li .depth01 .ico::after{transform: rotate(90deg);}

	header .right nav > ul > li.on .depth01 .ico::before,
	header .right nav > ul > li.on .depth01 .ico::after{background-color: var(--blue);}
	header .right nav > ul > li.on .depth01 .ico::after{transform: rotate(0deg);}

	header .right nav > ul > li .depth02{position: unset; width: 100%;}
	header .right nav > ul > li .depth02 .rowBx{box-shadow: unset; border-radius: 0; background-color: transparent;}
	header .right nav > ul > li .depth02 .rowBx div{padding: 0 5vw; box-sizing: border-box; margin-bottom: 2px;}
	header .right nav > ul > li .depth02 .rowBx div:last-child{margin-bottom: 0;}
	header .right nav > ul > li .depth02 .rowBx div a{
		text-align: right; font-size: 20px; padding: 10px 5vw !important; box-sizing: border-box; position: relative;
		background-color: #666; color: #fff; border-radius: 4px;
	}
	header .right nav > ul > li .depth02 .rowBx div a::before{
		content:''; display: block; width: calc(100% - 10vw); top: 0; left: 5vw; background-color: #ddd;
	}
}
@media screen and (max-width:500px) {
	header .wrap{padding: 14px 0;}
	header .logoBx{font-size: 0.8px; }


	header .right nav > ul > li .depth01{font-size: 40px; }
	header .right nav > ul > li .depth02 .rowBx div a{font-size: 16px;}
}
@media screen and (max-width:320px) {}


/* ========================= footer ========================= */
footer {border-top: 1px solid #d1d1d1; box-sizing: border-box; padding-top: 36px; padding-bottom: 30px; letter-spacing: -0.04em; }
footer .wrap {display: flex; align-items: flex-start; justify-content: space-between; position: relative;}
footer .wrap .left { }
footer .wrap .left .logoBx { margin-bottom: 60px; font-size: 1px; }
footer .wrap .left .logoBx .logo { }
footer .wrap .left .logoBx .logo svg { width: 100%; }
footer .wrap .left .logoBx .logo.n1 { width: 165em; margin-bottom: 14px; }
footer .wrap .left .logoBx .logo.n2 { width: 56em; }
footer .wrap .left .info { }
footer .wrap .left .info em {font-family: 'Inter', sans-serif;margin-bottom: 14px;display: block;font-size: 15px;font-weight: 600;}
footer .wrap .left .info .rowBx {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 6px;margin-bottom: 25px;}
footer .wrap .left .info .row {display: flex; align-items: flex-start; justify-content: flex-start; line-height: 1.3; gap: 7px; }
footer .wrap .left .info .row b { }
footer .wrap .left .info .row p { color: #7e7e7e; }
footer .wrap .left .info .copy { font-family: 'Inter', sans-serif; font-size: 14px; color: #878787; line-height: 1.4;}

footer .wrap .right {
	display: flex; align-items: center; justify-content: flex-end; gap: 9px;
	position: absolute; right: 0; top: 0;
}
footer .wrap .right .menu { position: relative; }
footer .wrap .right .menu .circle {display: inline-flex; align-items: center; justify-content: space-between; border-radius: 100px;background-color: #eaebef; height: 38px; width: 142px; padding: 0 18px; box-sizing: border-box; cursor: pointer; }
footer .wrap .right .menu .circle p {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: #606060; }
footer .wrap .right .menu .circle i { font-size: 18px; color: hsl(0, 0%, 8%); transition: transform 0.5s;}
footer .wrap .right .menu.on .circle i{transform: rotate(180deg);}
footer .wrap .right .menu ul {position: absolute; min-width: 100%;top: 100%; margin-top: 8px; border: 1px solid #ddd; box-sizing: border-box;border-radius: 6px; display: none; overflow: hidden; background-color: #fff;}
footer .wrap .right .menu ul li { }
footer .wrap .right .menu ul li a { padding: 10px; box-sizing: border-box; transition: background-color 0.1s,color 0.1s; }
footer .wrap .right .menu ul li a:hover { background-color: #444; color: #fff; }
footer .wrap .right .menu ul li:first-child a { padding-top: 12px; }
footer .wrap .right .menu ul li:last-child a { padding-top: 12px; }
footer .wrap .right .topBtn {display: inline-flex; align-items: center; justify-content: center; color: #fff;background-color: #141414; font-size: 18px; border-radius: 50%;height: 38px; width: 38px; transition: background-color 0.1s; cursor: pointer; }
footer .wrap .right .topBtn:hover { background-color: var(--blue); }
footer .wrap .right .topBtn i { }

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	footer .wrap{flex-direction: column; gap: 40px;}

	footer .wrap .left .info em{margin-bottom: 20px;}

	footer .wrap .left .logoBx{margin-bottom: 40px;}
	footer .wrap .left .info .rowBx{gap: 14px;}
	footer .wrap .left .info .row{flex-direction: column;}

	footer .wrap .right{position: unset;}
	footer .wrap .right .menu ul{top: unset; margin-top: 0; bottom: 100%; margin-bottom: 8px;}
}
@media screen and (max-width:320px) {}