/* footer & header styles */
header {position: fixed; z-index: 99999;font-family: 'Mona Sans';color: #fff; width: 100%; letter-spacing: -0.04em; }
header .grayBg {position: absolute; left: 0; top:0;width: 100%; height: 100vh; background-color: rgba(0,0,0,0.6);backdrop-filter: blur(10px);opacity: 0; pointer-events: none;transition: opacity 0.4s; }
header.menuOn .grayBg { opacity: 1; pointer-events: auto; }
header .wrap {
	display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;
}
header .wrap::before {
	content:''; display: block; position: absolute; width: 105vw; left: 50%; transform: translateX(-50%); top: 0;
	height: 100%; background-color: rgba(255,255,255,0.5); backdrop-filter: blur(10px); opacity: 0; z-index: -1;
}
header .logo {}
header .logo svg { height: 26px; width: auto;}
header .logo svg *{fill: #fff;}
header .right {display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
header .right nav {display: flex; }
header .right nav .depth01 {position: relative; }
header .right nav .depth01 > a {text-transform: uppercase;font-size: 18px; font-weight: 600; padding: 0 calc(34/18*1em); box-sizing: border-box;display: flex; align-items: center; justify-content: center; }
header .right nav .depth01 > a::before {content:''; display: block; position: absolute;width: 100%; height: 100%; padding: 20px 0; }
header .right nav .depth01 > a p { }
header .right nav .depth01 ul {
	font-family: 'Pretendard'; font-weight: 500; height: 170px;
	position: absolute; overflow: hidden; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);display: none;
}
header .right nav .depth01 ul li { }
header .right nav .depth01 ul li a {padding: 8px;font-size: 15px;min-width: 140px;text-align: center;box-sizing: border-box; }
header .right nav .depth01 ul li a:hover { color: #FF4800;}
/* header .right nav .depth01 ul li:first-child a { padding-top: 14px; }
header .right nav .depth01 ul li:last-child a { padding-bottom: 14px; } */
header .right .lnb {display: flex; gap: 1px; }
header .right .lnb a {display: flex; align-items: center; justify-content: center; gap: 8px;font-size: 14px; font-weight: 600; letter-spacing: -0.04em;width: calc(168/14*1em); height: calc(50/14*1em); border-radius: 0 0 10px 10px; color: #fff;}
header .right .lnb a:nth-child(1) { background-color: #141414; }
header .right .lnb a:nth-child(2) { background-color: #323233; }
header .right .lnb a i {font-size: calc(16/14*1em);/* 그라데이션 배경 */
background: linear-gradient(0deg, #FF5230, #FFA303);/* 텍스트에 배경을 클리핑 */
-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent; }

/* 호버 */
header .right .lnb a:hover{background-color: var(--orange) !important;}
header .right .lnb a:hover i{
	background: unset;
	-webkit-background-clip: unset;
	background-clip: unset;
	color: #fff;
	-webkit-text-fill-color: unset;
}
header .right nav .depth01:hover > a { color: #FF4800; }

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.bg .menuIco div{background-color: #000;}
header.menuOn .menuIco div{background-color: #fff;}
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{transition-property: color; transition-duration: 0.4s;}
header .logo svg *{transition-property: fill; transition-duration: 0.4s;}
header .wrap{transition-property: padding,transform,background-color,backdrop-filter; transition-duration: 0.4s;}
header .wrap::before {transition-property: opacity,height; transition-duration: 0.2s;}
header .right .lnb a{transition-property: border-radius; transition-duration: 0.8s;}

header.bg{color: #000;}
header.bg .logo svg *{fill: #000;}
header.bg .wrap{padding: 6px 0;}
header.bg .wrap::before{opacity: 1;}
header.bg.hover .wrap::before{ height: 230px; }
header.bg .right .lnb a{border-radius: 10px;}
header.hide .wrap{transform: translateY(-110%);}

/* 모바일 메뉴 열릴땐 모션 무시 */
header.menuOn .wrap{transform: unset;}
header.menuOn .wrap::before{opacity: 0;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	header .right nav .depth01 > a { font-size: 16px; }
	header .right .lnb a { font-size: 12px; }
}
@media screen and (max-width:1280px) {
	header .wrap { height: 54px; }
	header .logo svg{height: 22px;}
	header .menuIco { display: flex; }

	/* ---- nav 모바일 버전 스타일 변경 ---- */
	header .right {position: absolute; z-index: 2; right: 0; top: 0;height: 100vh; max-width: 300px; width: 100%;flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 40px;padding: 120px 20px; padding-bottom: 80px; box-sizing: border-box; overflow: auto;opacity: 0; pointer-events: none; transform: translateX(100px);transition-property: opacity,transform; transition-duration: 0.4s;background: linear-gradient(180deg, #FF5230, #FFA303);
	background: #242424;}
	header.menuOn .right {opacity: 1; pointer-events: auto; transform: translateX(0); }
	header .right nav {flex-direction: column; width: 100%; gap: 14px; }
	header .right nav .depth01 { }
    header .right nav .depth01 ul{ height: auto; }
	header .right nav .depth01 > a {font-size: 26px; justify-content: flex-start; padding: 0;color: #dcdcdc; transition: color 0.4s; }
	header .right nav .depth01 > a.on { color: #fff; }
	header .right nav .depth01 > a::before { display: none; }
	header .right nav .depth01 > a p { }
	header .right nav .depth01 ul {position: unset; display: none; margin-top: 10px; margin-bottom: 10px;left: 0; transform: unset; border-radius: 4px; }
	header .right nav .depth01 ul li a { text-align: left; padding-left: 20px; color: #fff; }
	header .right .lnb a:nth-child(1) { background-color: #323233; }
	header .right .lnb a:nth-child(2) { background-color: #323233; }

	header .right .lnb { gap: 0; width: 100%; gap: 4px; }
	header .right .lnb a { width: 100%; flex: 1; border-radius: 4px !important; }
	/* ---- nav 모바일 버전 스타일 변경 종료 ---- */
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	header .wrap { height: 50px; }
	header .logo svg{height: 16px;}
	header .menuIco { font-size: 0.8px; }
}
@media screen and (max-width:320px) {
	header .right .lnb { flex-direction: column; }
	header .right .lnb a { height: 40px; flex: unset; }
}




/* ------ footer ------ */
footer{
	letter-spacing: -0.04em;
    position: relative;
}



footer .wrap{}
footer .gray{
	display: flex; align-items: center; justify-content: space-between;
	padding: 90px 0; box-sizing: border-box;
}
footer .gray .left{
	display: flex; flex-direction: column; justify-content: flex-start;
	color: #242424;
}
footer .gray .left small{
	font-size: 20px; font-weight: 500; line-height: 1.3;
}
footer .gray .left em{
	font-size: 80px;  font-weight: 600; font-family: 'Mona Sans';
	text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2;
	display: block; margin-top: 10px; margin-bottom: 40px;
}
footer .gray .left a{
	font-size: 1px;
	width: 250em; height: 54em;
	padding: 4em; padding-left: 0; box-sizing: border-box;
	border-radius: 10em; background-color: #fff;
	display: flex; align-items: center; justify-content: space-between;
}
footer .gray .left a p{
	font-family: 'Mona Sans'; font-size: 16em; font-weight: 600;
	width: 100%; text-align: center;
}
footer .gray .left a div{
	min-width: 46em; min-height: 46em; border-radius: 10em;
	background-color: var(--orange); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	transition: background-color 0.4s;
}
footer .gray .left a:hover div{
	background-color: #444;
}
footer .gray .left a div i{font-size: 20em;}
footer .gray .left a div i:nth-child(2){height: calc(7/20*1em); display: flex; align-items: center; justify-content: center; overflow: hidden;}
footer .gray .right{
	display: flex; gap: 40px 80px; flex-wrap: wrap;
	min-width: 52.5%; justify-content: space-between;
}
footer .gray .right dl{
	display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
}
footer .gray .right dl:nth-child(1){}
footer .gray .right dl:nth-child(2){}
footer .gray .right dt{
	font-family: 'Mona Sans'; margin-bottom: 6px;
	font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
}
footer .gray .right dd{
	display: flex; align-items: flex-start; line-height: 1.4;
	font-weight: 500;
}
footer .gray .right dd em{display: block; min-width: calc(65/16*1em);}
footer .gray .right dd p{color: #505050;}
footer .black{
	background-color: #000; color: #fff;
	padding: 18px 0;
}
footer .black .wrap{
	display: flex; gap: 15px 65px; flex-wrap: wrap;
}
footer .black .wrap > div{
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
footer .black .wrap > div::before {
	content:''; display: block; width: 5px; height: 5px; border-radius: 50%;
	background-color: var(--orange);
}
footer .black .wrap > div em{}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	footer .gray{flex-direction: column; align-items: flex-start; gap: 60px;}
	footer .gray .left small{font-size: 14px; }
	footer .gray .left em{font-size: 50px; }
	footer .gray .right{min-width: unset;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	footer .gray{padding: 60px 0; gap: 40px;}
	footer .gray .left em{font-size: 40px; margin-bottom: 20px;}
	footer .gray .left a{font-size: 0.8px; }

	footer .gray .right{gap: 30px 80px;}
	footer .gray .right dt{font-size: 18px; }
	footer .gray .right dd{font-size: 14px; }

	footer .black .wrap > div{font-size: 14px; }
}
@media screen and (max-width:500px) {
	footer .gray .left em{font-size: 36px; }
	footer .gray .right dl{gap: 10px;}
	footer .black .wrap > div{font-size: 12px; }
}
@media screen and (max-width:320px) {}


/* footer_리뉴얼 */
footer{ border-top: 1px solid #dddddd; box-sizing: border-box; }
footer .topbtn{ position: absolute; right: 2.5%; bottom: calc(100% + 25px); font-size: 18px; letter-spacing: -0.04em; font-family: 'Mona Sans'; font-weight: 600; cursor: pointer; transition-duration: 0.1s; }

footer .white{ display: flex; justify-content: space-between; padding: 90px 0; }
footer .white .lbx{ width: 50%; box-sizing: border-box; }
footer .white .lbx > strong{ font-size: 64px; letter-spacing: -0.04em; line-height: calc(80 / 64); font-weight: 600; font-family: 'Mona Sans'; }
footer .white .lbx .infos{ margin-top: 20px; }
footer .white .lbx dl{ padding-top: 40px; }
footer .white .lbx dl dt{ font-size: 20px; letter-spacing: -0.04em; font-weight: 600; font-family: 'Mona Sans'; margin-bottom: 20px; }
footer .white .lbx dl dd{ display: flex; align-items: baseline; line-height: 1.4; font-size: 16px; color: #444444; letter-spacing: -0.04em; margin-bottom: 7px; }
footer .white .lbx dl dd:last-of-type{ margin-bottom: 0; }
footer .white .lbx dl dd > em{ font-weight: 500; color: #000; min-width: 70px; display: block; }


footer .white .rbx{ width: 50%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
footer .white .rbx .sitemap > ul{ display: flex; justify-content: space-between; }
footer .white .rbx .sitemap > ul > li{ margin-right: 65px; }
footer .white .rbx .sitemap > ul > li:last-of-type{ margin-right: 0; }
footer .white .rbx .sitemap > ul > li > a{ font-size: 20px; letter-spacing: -0.04em; font-weight: 600; color: #000; margin-bottom: 10px; }
footer .white .rbx .sitemap > ul > li ol li{ font-size: 18px; letter-spacing: -0.04em; color: #444; }
footer .white .rbx .sitemap > ul > li ol li > a{ padding: 10px 0; }


footer .white .rbx .btnwrap > a{
	font-size: 1px;
	width: 250em; height: 54em;
	padding: 4em; padding-left: 0; box-sizing: border-box;
	border-radius: 10em; background-color: #e3e3e3;
	display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
footer .white .rbx .btnwrap > a:last-of-type{ margin-bottom: 0; }
footer .white .rbx .btnwrap > a p{
	font-family: 'Mona Sans'; font-size: 16em; font-weight: 600;
	width: 100%; text-align: center;
}
footer .white .rbx .btnwrap > a div{
	min-width: 46em; min-height: 46em; border-radius: 10em;
	background-color: var(--orange); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	transition: background-color 0.4s;
}
footer .white .rbx .btnwrap > a:hover div{
	background-color: #444;
}
footer .white .rbx .btnwrap > a div i{font-size: 20em;}
footer .white .rbx .btnwrap > a div i:nth-child(2){height: calc(7/20*1em); display: flex; align-items: center; justify-content: center; overflow: hidden;}

@media screen and (min-width: 821px){
    footer .topbtn:hover{ color: var(--orange); }

    footer .white .rbx .sitemap > ul > li:hover > a{ color: var(--orange); }
    footer .white .rbx .sitemap > ul > li:hover ol li:hover{ color: var(--orange); }
}


@media screen and (max-width: 1280px){
    footer .topbtn{ font-size: 16px; }
    footer .white .lbx > strong{ font-size: 4vw; }
    footer .white .lbx dl{ padding-top: 30px; }
    footer .white .lbx dl dt{ font-size: 16px; }
    footer .white .lbx dl dd{ font-size: 14px; }
    footer .white .rbx .sitemap > ul > li{ margin-right: 30px; }
    footer .white .rbx .sitemap > ul > li > a{ font-size: 16px; margin-bottom: 5px; }
    footer .white .rbx .sitemap > ul > li ol li{ font-size: 14px; }
    footer .white .rbx .sitemap > ul > li ol li > a{ padding: 5px 0; }
}

@media screen and (max-width: 1024px){
    footer .topbtn{ font-size: 14px; }
    footer .white{ flex-direction: column; padding: 40px 0; }
    footer .white .lbx{ width: 100%; }
    footer .white .lbx .infos{ margin-top: 0; }
    footer .white .rbx{ width: 100%; margin-top: 40px; }
    footer .white .rbx .sitemap{ width: 100%; }
    footer .white .rbx .sitemap > ul{ width: 100%; }
    footer .white .rbx .sitemap > ul > li{ margin-right: 0; }
}

@media screen and (max-width: 820px){
    footer .white .lbx > strong{ font-size: 7vw; }
    footer .white .rbx{ margin-top: 20px; }
    footer .white .rbx .btnwrap > a{ font-size: 0.8px; }
    footer .white .rbx .sitemap{ display: none; }
}