@charset "utf-8";

:root {
	--black: #000000;
	--mainColor: #E60900;
	--mainColor2: #e6090052;
}

#wrap {width: 100%; min-width: 320px; font-size: 18px;} button {font-size: 1em;} a {color: var(--black);}
body, select, input,textarea, button {color: var(--black); font-family: 'pretendard', sans-serif; word-break: keep-all; letter-spacing: -.3px;}
input:placeholder {color: #B8B8B8;}
.sec {position: relative;}
.inner {max-width: 1740px; padding: 0 3.15%; margin: 0 auto; width: 100%; box-sizing: border-box;}
body::-webkit-scrollbar {width: 0;}


@keyframes spanTextUpPointColor {6% {transform: none;} 10% {transform: translateY(-2px); color: var(--mainColor);} 14% {transform: none;} 50% {color: var(--black);} 100% {transform: none;}}
@keyframes spanTextUp {0%, 20%, 100% {transform: none;} 7% {transform: translateY(-10%);}}
@keyframes spanTextUp_2 {0% {transform: translateY(10%);} 5% {transform: translateY(-10%);} 10%, 100% {transform: none;}}
@keyframes spanTextUp_3 {0% {transform: translateY(20px); opacity: 0;} 30% {transform: translateY(-5px); opacity: 1;} 100% {transform: none; opacity: 1;}}
@keyframes opacityMove {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes upMove {0% {transform: translateY(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}

@keyframes upMove100 {0% {transform: translateY(100%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upMove2 {0% {transform: translateY(20px); opacity: 0;} 50% {transform: translateY(-10px);} 100% {transform: none; opacity: 1;}}
@keyframes leftMove {0% {transform: translateX(-20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes rightMove {0% {transform: translateX(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes scaleMove {0% {transform: scale(.8); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes widthMove {0% {width: 0;} 100% {width: 100%;}}
@keyframes heightMove {0% {height: 0;} 100% {height: 100%;}}


header {position: relative;}
header .h-inner {position: fixed; top: 0; left: 0; width: 100%; z-index: 90; height: auto; box-sizing: border-box; transition: .5s cubic-bezier(0.33, -0.01, 0.2, 1); display: flex; justify-content: space-between; align-items: center; padding: 2.667em 3.15%;}
header .h-inner nav {}
header .h-inner nav ul {display: flex; gap: 2em;}
header .h-inner nav ul li a {position: relative; transition: .5s ease; font-weight: 600; padding: 10px 0; transition: .5s ease;}
header .h-inner nav ul li.active a {color: var(--mainColor);}
header .h-inner nav ul li a:after {content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #e60900ba; top: -.4em; left: 50%; transform: translateX(-50%) translateY(100%); z-index: -1; box-shadow: 0 0 8px #e609008f; transition: .5s ease; opacity: 0;}

header .h-inner .sitemapBtn {width: 2em; height: 1.5em; position: relative; cursor: pointer; display: none;}
header .h-inner .sitemapBtn span {background-color:var(--mainColor); position: absolute; border-radius: 2px; transition: .3s cubic-bezier(.8, .5, .2, 1.4); width:100%; height: 3.5px; transition-duration: 500ms;}
header .h-inner .sitemapBtn span:nth-child(1) {top:0px; left: 0px;}
header .h-inner .sitemapBtn span:nth-child(2) {top: 50%; transform: translateY(-50%); left: 0px; opacity:1;}
header .h-inner .sitemapBtn span:nth-child(3) {bottom:0px; left: 0px;}
header .h-inner .sitemapBtn.open span:nth-child(1) {transform: rotate(45deg); top: .65em;}
header .h-inner .sitemapBtn.open span:nth-child(2) {opacity:0;}
header .h-inner .sitemapBtn.open span:nth-child(3) {transform: rotate(-45deg); top: .65em;}
header.white .h-inner nav ul li a {color: #fff;}
header.white .h-inner .sitemapBtn span {background: #fff;}

#container {height: 500px;}
footer {background: var(--black); padding: 1.98em 0; color: #CCCCCC; font-size: .8em; position: relative;}
footer a {color: #CCCCCC;}
footer .inner {max-width: none; padding: 0 3.15%;}
footer .inner .textBox .top {display: flex; gap: .8em; margin-bottom: .8em;}
footer .inner .textBox .top strong {color :#fff; font-size: 1.15em;}
footer .inner .textBox address {margin-bottom:  1.67em;}
footer .inner .textBox address > *:not(:last-child) {margin-bottom: .8em;}
footer .inner .textBox address div {display: flex; flex-wrap: wrap; gap: .8em; align-items: center;}
footer .inner .textBox address .mail a {margin-left: .2em; transition: .5s ease;}
footer .inner .textBox address .mail a span {position: relative;}
footer .inner .textBox address .mail a span:after {content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #fff; transition: .5s ease;}
footer .inner .textBox .fmailySiteLogo {display: flex; gap: 1.1em; align-items: center;}
footer .inner .logoBox {position: absolute; bottom: 0; right: 3.15%; max-width: 226px; width: 20%; min-width: 100px;}


@media screen and (min-width: 1025px) {
	header .h-inner nav ul li a:hover:after {opacity: 1; transform: translateX(-50%);}
	footer .inner .textBox address .mail a:hover {color: #fff;}
	footer .inner .textBox address .mail a:hover span:after {animation: widthMove .5s ease both;}
}
@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 1200px) {
	#wrap {font-size: 17px;}
}
@media screen and (max-width: 768px) {
	#wrap {font-size: 16px;}
	.inner {padding:  0 30px;}
	footer .inner .textBox {margin-bottom: 2.5em;}
}
@media screen and (max-width: 640px) {
	header .h-inner {padding: 2em 1.85em;}
	header .h-inner nav {display: none; position: fixed; top: 4.8em; right: 2em; border-radius: 10px; background: var(--black); box-shadow: 3px 3px 13px rgba(0, 0, 0, .1); width: 0; width: 0; max-width: 75%; transition: .5s ease;}
	header .h-inner nav ul {gap: .5em; justify-content: space-between;}
	header .h-inner nav ul li a {color: #fff; opacity: 0;}
	header.open .h-inner nav {display: block; animation: navMove .5s cubic-bezier(0.76, 0.06, 0.25, 1) both;}
	@keyframes navMove {100% {padding: .35em 1em; width: 20em;}}
	header.open .h-inner nav li a {animation: upMove 1s .05s ease both;}
	header.open .h-inner nav li:nth-child(2) a {animation-delay: .1s;}
	header.open .h-inner nav li:nth-child(3) a {animation-delay: .15s;}
	header.open .h-inner nav li:nth-child(4) a {animation-delay: .2s;}
	header.open .h-inner nav li:nth-child(5) a {animation-delay: .25s;}
	header.open .h-inner nav li:nth-child(6) a {animation-delay: .3s;}
	header.white .h-inner nav {background: #fff;}
	header.white .h-inner nav ul li a {color: var(--black);}
	header .h-inner .sitemapBtn {display: block;}
}

@media screen and (max-width: 480px) {
	#wrap {font-size: 15px;}
	footer .inner .textBox .fmailySiteLogo {flex-wrap: wrap;}
	footer .inner .textBox .fmailySiteLogo img {height: 1.2em;}
}

@media screen and (max-width: 360px) {
	#wrap {font-size: 14px;}
}