/* header */
header {position: fixed;z-index: 99999;width: 100%;left: 0;top: 0;box-sizing: border-box;transition: background-color 0.8s;}
header ._grayBg {position: fixed;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;backdrop-filter: blur(10px);opacity: 0;pointer-events: none;transition: opacity 0.5s; }
header.menuOn ._grayBg {opacity: 0.7;pointer-events: auto; }
header .wrap {display: flex;align-items: center;justify-content: space-between; transition: transform 0.8s, opacity 0.8s; }
header.hide .wrap {transform: translateY(-200%);pointer-events: none; }
header.hide.menuOn .wrap {transform: unset;pointer-events: auto; }
header .blurBg {
	position: absolute;left: 50%;transform: translateX(-50%);top: 0;width: 100vw;height: 100%;background-color: rgba(255, 255, 255, 0.3);
	opacity: 0; backdrop-filter: blur(10px); border-bottom: 1px solid transparent; box-sizing: border-box;
	transition-property: height,background-color,backdrop-filter,border-color,opacity; transition-duration: 0.6s;
}
header.bg .blurBg{opacity: 1;}
header.depthShow .blurBg{height: 340px; background-color: #fff; z-index: -1; border-color: #e0e0e0; backdrop-filter: blur(0px); opacity: 1;}
header.hide .blurBg{height: 100%; backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.3);}

header .redLine{position: absolute;left: 50%;transform: translateX(-50%);bottom:0;width: 100vw;height: 1px;background-color: var(--red); opacity: 0; transition: opacity 0.5s;}
header.depthShow .redLine{opacity: 1;}
header.bg .wrap::before {opacity: 1; }
header .logo {position: relative;z-index: 2; }
header .logo svg {height: 35px; }
header .right {display: flex;align-items: center;gap: 17px; }
header .menuCont { }
header .menuCont .logo02 {display: none; }
header nav {font-weight: 500;letter-spacing: -0.04em;display: flex; }
header nav .depth01 {position: relative; display: flex; align-items: center; justify-content: center;}

/* 1280 이상에서만 적용하는 스타일 */
@media screen and (min-width:1281px) {
	header nav .depth01 > a {padding: calc(25/18*1em) calc(46/18*1em);box-sizing: border-box;position: relative; font-size: 18px; }
	header nav .depth01 > a i{display: none;}

	header nav .depth01 .absol{
		position: absolute; top: 100%; z-index: -1; padding-top: 14px;
		font-size: 14px; font-weight: 500; letter-spacing: -0.03em; text-align: center;
		line-height: 1.3; display: flex; flex-direction: column; min-width: 100%;
		max-height: 0; opacity: 0; pointer-events: none; transition: max-height 0.4s,opacity 0.4s;
	}
	header.depthShow nav .depth01 .absol{max-height: 300px; opacity: 1; pointer-events: auto; transition-delay: 0.2s;}
	header.depthShow nav .depth01 .absol.zindex{z-index: 1;}

	header nav .depth01 .absol > li{}
	header nav .depth01 .absol > li a{padding: 8px 0;}
	html.pc header nav .depth01 .absol > li a:hover{color: var(--red); }

	header nav .depth01 .absol02{}
	header nav .depth01 .absol02 > div:nth-child(1){padding: 8px 0; cursor: pointer;}
	header nav .depth01 .absol02:hover > div:nth-child(1){color: var(--red);}
	header nav .depth01 .absol02 > div p{}
	header nav .depth01 .absol02 .ulBx{
		display: flex; flex-wrap: wrap; left: 100%; top: 0; white-space: nowrap; z-index: 2; min-width: 280px; height: 272px;
		position: absolute; background-color: var(--red); color: #fff;
		padding: 14px 0; box-sizing: border-box;
		pointer-events: none; opacity: 0; transform: translateX(40px);
		transition: opacity 0.5s,transform 0.5s;
	}
	header nav .depth01 .absol02.on .ulBx{opacity: 1; transform: translateX(0); pointer-events: auto; z-index: 3;}
	header nav .depth01 .absol02.n2 .ulBx{flex-direction: column;}
	header nav .depth01 .absol02 .ulBx ul{width: 50%;}
	header nav .depth01 .absol02 .ulBx ul li a{padding: 8px 0; position: relative;}
	header nav .depth01 .absol02 .ulBx ul li a::before {
		content:''; display: block; position: absolute; left: 20%; bottom: 4px; width: 60%; height: 1%; background-color: #fff;
		transform-origin: left center; transform: scaleX(0); transition: transform 0.3s;
	}
	html.pc header nav .depth01 .absol02 .ulBx ul li a:hover::before{transform: scaleX(1);}
}

header .lang {position: relative;z-index: 3; }
header .lang > div {display: flex;align-items: center;justify-content: space-between;width: calc(90/16*1em);height: calc(36/16*1em);background-color: var(--red);border-radius: 100px;color: #fff;cursor: pointer;padding: 0 10px;box-sizing: border-box; }
header .lang > div .left {display: flex;align-items: center;justify-content: center;gap: 4px; }
header .lang > div .left i { }
header .lang > div .left p { }
header .lang > div > i {transition: transform 0.5s; }
header .lang.on > div > i {transform: rotate(-180deg); }
header .lang a {position: absolute;top: 100%;margin-top: 6px;z-index: -1;width: 100%;height: 100%;border-radius: 100px;box-shadow: 0 0 6px -2px gray;display: flex;align-items: center;justify-content: center;font-size: 14px;font-weight: 500;letter-spacing: -0.04em;opacity: 0;transform: translateY(-100%);pointer-events: none;background-color: #fff;transition: opacity 0.2s, transform 0.2s; }
header .lang.on a {opacity: 1;transform: translateY(0);pointer-events: auto; }
html.pc header .lang a:hover {background-color: #444;color: #fff; }
header .lang a p { }
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 {background-color: #000;width: 100%;height: 2px;border-radius: 30px;position: absolute;transition: opacity 0.5s, transform 0.5s, top 0.5s, bottom 0.5s, background-color 0.5s; }
header.bg .menuIco div {background-color: #000; }
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; }



@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	header nav .depth01 > a{font-size: 16px; }
	header nav .depth01 .absol{font-size: 13px; }
	header.depthShow .blurBg{height: 320px;}
	header nav .depth01 .absol02 .ulBx{height: 260px;}
}
@media screen and (max-width:1280px) {
	header .logo svg{height: 30px;}
	header .wrap{padding: 10px 0;}
	header .menuCont{
		position: absolute; right: 0; top: 0; width: 100%; max-width: 300px; height: var(--vh100);
		flex-direction: column; padding: 0 20px; padding-top: 80px; padding-bottom: 40px; box-sizing: border-box; overflow: auto;
		opacity: 0; transform: translateX(80px); pointer-events: none;
		transition: opacity 0.5s,transform 0.5s; z-index: 3;
		background-color: #fff;
		display: flex; justify-content: space-between; gap: 40px;
	}
	header.menuOn .menuCont{opacity: 1; transform: translateX(0); pointer-events: auto;}
	header .menuCont .logo02{display: block; opacity: 0.4; padding: 0 4px; box-sizing: border-box;}
	header nav{flex-direction: column; gap: 6px;}

	/* 모바일 뎁스 스타일 */
	header nav .depth01{flex-direction: column;}
	header nav .depth01 > a{
		width: 100%;
		padding: 10px;
        background-color: #fff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--red);
        color: #fff;
		box-sizing: border-box;
        transition: background-color 0.2s;
	}

	header nav .depth01 > a.on{background-color: #2f2f2f;;}
	header nav .depth01 > a i{display: block; transition: transform 0.5s;}
	header nav .depth01 > a.on i{transform: rotate(-180deg);}

	header nav .depth01 .absol{
		width: 100%;
		position: unset;
        transform: unset;
        border-radius: 4px;
        margin-top: 4px;
        box-shadow: unset;
        border: 1px solid #ddd;
        box-sizing: border-box;
		display: none;
	}
	header nav .depth01 .absol > li a{
		font-size: 14px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.3;
		padding: 6px 10px; box-sizing: border-box;
	}
	header nav .depth01 .absol > li:first-child a{padding-top: 14px;}
	header nav .depth01 .absol > li:last-child a{padding-bottom: 14px;}

	header nav .depth01 .absol .flexBx{display: flex; position: relative;}
	header nav .depth01 .absol .flexBx::before {
		content:''; display: block; width: 1px; height: calc(100% - 30px); background-color: #efefef;
		position: absolute; top: 15px; left: 50%;
	}
	header nav .depth01 .absol .absol02{flex: 1;}
	header nav .depth01 .absol .absol02 > div:nth-child(1) {
		box-sizing: border-box;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: -0.04em;
		padding: 12px 10px;
		padding-top: 16px;
		min-width: 120px;
		text-align: center;
		color: var(--red);
		font-weight: 700;
	}
	header nav .depth01 .absol02 .ulBx{height: auto;}
	header nav .depth01 .absol02 .ulBx a{
		font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 1.3;
        padding: 6px 10px;
        text-align: center;
        box-sizing: border-box;
		color: #000;
	}
	header nav .depth01 .absol02 .ulBx ul:last-child li:last-child a{padding-bottom: 14px;}





	header .menuIco{display: flex; font-size: 0.85px; }
	header.menuOn .menuIco div:nth-child(1){top: 8em;}
	header .lang > div{font-size: 14px; }
}
@media screen and (max-width:1024px) {
	header .logo svg{height: 22px;}

	header .lang > div{font-size: 13px; }
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	header .right{gap: 12px;}
}
@media screen and (max-width:320px) {}




/* footer */
footer {letter-spacing: -0.04em;position: relative;background-color: #212121;color: #f2f2f2;overflow: hidden; }
footer::before {content: '';display: block;position: absolute;left: 0;bottom: -2px;width: 100%;height: 4px;background-color: #212121; }
footer .wrap {padding-top: 70px;padding-bottom: 50px; }
footer .top {display: flex;justify-content: space-between;margin-bottom: 180px; }
footer .top .info {font-size: 18px;display: flex;justify-content: space-between;width: 100%;max-width: calc(770/18*1em); }
footer .top .info ul {display: flex;flex-direction: column;gap: 10px; }
footer .top .info ul li {line-height: calc(26/18);display: flex;align-items: flex-start; }
footer .top .info ul li em {display: block;min-width: calc(90/18*1em);font-weight: 500; }
footer .top .info ul li p {color: rgba(255, 255, 255, 0.7); }
footer .sns {display: flex;flex-direction: column;gap: 10px;line-height: calc(26/18); }
footer .sns a {display: flex;align-items: center;justify-content: flex-start; }
footer .sns a i { }
footer .sns a p {font-size: calc(18/16*1em);font-weight: 500;padding-left: 8px;padding-right: 18px; }
footer .sns a i:last-child { }
footer .bottom {display: flex;justify-content: space-between;align-items: flex-end; }
footer .bottom p {font-size: 24px;font-weight: 500; }
footer .bottom .logoBx {text-align: right; }
footer .bottom .logoBx .logo {margin-bottom: 14px; }
footer .bottom .logoBx .logo svg {height: 110px; }
footer .bottom .logoBx .logo svg * {fill: #fff; }
footer .bottom .logoBx small {display: block;font-family: "Archivo", sans-serif;font-size: 14px;font-weight: 300;letter-spacing: -0.03em; }
@media screen and (max-width:1600px) { }
@media screen and (max-width:1440px) { }
@media screen and (max-width:1280px) {
	footer .top .info {flex-direction: column;gap: 20px; }
	footer .bottom .logoBx .logo svg {height: 70px; }
}
@media screen and (max-width:1024px) {
	footer .bottom .logoBx .logo {margin-bottom: 10px; }
	footer .bottom .logoBx .logo svg {height: 50px; }
	footer .bottom .logoBx small {font-size: 12px; }
}
@media screen and (max-width:820px) {
	footer .top {flex-direction: column;gap: 20px;margin-bottom: 100px; }
	footer .sns {padding-left: 90px;box-sizing: border-box; }
	footer .bottom .logoBx .logo svg {height: 30px; }
	footer .bottom p {font-size: 18px; }
}
@media screen and (max-width:500px) {
	footer .top {margin-bottom: 80px; }
	footer .top .info {font-size: 14px; }
	footer .sns {font-size: 14px;padding-left: 70px; }
	footer .bottom {flex-direction: column;gap: 30px;align-items: flex-start; }
	footer .bottom p {font-size: 16px; }
	footer .bottom .logoBx {text-align: left; }
}
@media screen and (max-width:320px) { }