/*-- common css --*/

:root {

	/*font-size*/
	--fs-14: .875rem;
	--fs-15: .9375rem;
	--fs-16: 1rem;
	--fs-17: 1.0625rem;
	--fs-18: 1.125rem;
	--fs-20: 1.25rem;
	--fs-22: 1.375rem;
	--fs-24: 1.5rem;
	--fs-25: 1.5625rem;
	--fs-26: 1.625rem;
	--fs-30: 1.875rem;
	--fs-32: 2rem;
	--fs-35: 2.1875rem;
	--fs-40: 2.5rem;
	--fs-45: 2.8125rem;
	--fs-50: 3.125rem;
	--fs-60: 3.75rem;
	--fs-64: 4rem;
	--fs-70: 4.375rem;
	--fs-80: 5rem;
	--fs-90: 5.625rem;
	--fs-100: 6.25rem;

	/*font-weight*/
	--fw-4: 400;
	--fw-5: 500;
	--fw-6: 600;
	--fw-7: 700;
	--fw-8: 800;
	--fw-9: 900;

	/*color*/
	--color-1: #ffde00;
	--color-2: #ffca00;
	--color-3: #003b85;
	--color-4: #0071ff;
}

/*container*/
.header-container, .footer-container, .common-container{width: 95%;margin: 0 auto;}

@media screen and (max-width: 720px){

	.header-container, .footer-container, .common-container{width: 90%;}
}

/*-- header --*/
#header{position: fixed;top: 0;left: 0;width: 100%;height: 90px;z-index: 1000;border-bottom: 1px solid transparent;transition: all .3s ease-out;}
#header.scroll{background: #FFF;}
.header-container{display: flex;align-items: center;justify-content: space-between;height: 100%;position: relative;}

.hd-logo a{display: block;width: 100%;height: 100%;}
.hd-logo img{display: block;}

.hd-rgt{display: flex;align-items: center;}

.hd-nav{margin-right: 25px;}
.hd-nav>ul{display: flex;align-items: center;position: relative;}
.hd-nav>ul>li>a{display: block;width: 100%;height: 100%;font-weight: var(--fw-6);line-height: 90px;padding: 0 25px;text-transform: uppercase;position: relative;}
.hd-nav>ul>li>a::before{content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 8px;height: 8px;border-radius: 8px;background: #eee;overflow: hidden;}

.hd-nav>ul>li>ul{display: none;position: absolute;top: calc( 100% - 15px );left: 0;width: 100%;height: auto !important;z-index: 1;padding: 15px;border-radius: 10px;border: 1px solid #eee;overflow: hidden;
	box-shadow: 0px 15px 15px rgba(0, 0, 0, .07);background: #FFF;
}
.hd-nav>ul>li>ul>li>a{display: block;width: 100%;height: 100%;font-size: var(--fs-15);font-weight: var(--fw-5);color: #454545;padding: 15px;border-radius: 10px;overflow: hidden;transition: padding .25s ease;}

.hd-nav>ul>li:hover>a::before, .hd-nav>ul>li>a.on::before{background: var(--color-2);}
.hd-nav>ul>li>ul>li>a:hover{background: #f4f4f4;color: #000;padding-left: 20px;}

.hd-contact a{display: flex;align-items: center;justify-content: center;gap: 15px;background: var(--color-1);padding: 0 20px;border-radius: 50px;position: relative;overflow: hidden;
	box-shadow: 0px 15px 15px rgba(255, 222, 0, 0);transition: all .25s ease;
}
.hd-contact a::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: translateX(-101%);border-radius: 50px;background: #000;transition: transform .25s ease;}
.hd-contact a span, .hd-contact a img{position: relative;z-index: 10;transition: all .25s ease;}
.hd-contact a span{font-size: var(--fs-15);font-weight: var(--fw-7);line-height: 48px;padding-top: 2px;}

.hd-contact a:hover{color: #FFF;box-shadow: 0px 15px 15px rgba(255, 222, 0, 0.4);}
.hd-contact a:hover img{ 
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}
.hd-contact a:hover::before{transform: translateX(0);}

/*mobile*/
.hd-btn{display: none;}

/*on*/
#header.scroll{background: #FFF;border-bottom-color: #ececec;}
#header.scroll .hd-logo img{
	-webkit-filter: none;
	filter: none;
}
#header.scroll .hd-nav>ul>li>a{color: #000;line-height: 80px;}
#header.scroll .hd-nav>ul>li>a::before{background: #eee;}
#header.scroll .hd-nav>ul>li:hover>a::before, #header.scroll .hd-nav>ul>li>a.on::before{background: var(--color-2);}

@media screen and (min-width: 1081px){

	/*site map wrap*/
	#siteMap, .siteMap-overlay{display: none !important;}
}

@media screen and (max-width: 1480px){

	.hd-nav{margin-right: 20px;}
	.hd-nav>ul>li>a{padding: 0 20px;}
	
	.hd-nav>ul>li>ul{top: calc( 100% - 15px );padding: 13px;}
	.hd-nav>ul>li>ul>li>a{padding: 13px;}
	
	.hd-contact a{gap: 13px;padding: 0 18px;}
	.hd-contact a span{line-height: 46px;}
}

@media screen and (max-width: 1080px){

	#header{height: 70px;}
	.hd-logo img{max-width: 130px;}

	.hd-rgt{height: 100%;}

	.hd-nav{display: none;}
	
	.hd-contact a{gap: 10px;padding: 0 18px;}
	.hd-contact a span{line-height: 38px;}
	.hd-contact a img{max-width: 20px;}
	
	#header.scroll .hd-btn span{background: #000;}
	
	/*mobile*/
	.hd-btn{display: block;width: 23px;height: 100%;position: relative;margin-left: 25px;}
	.hd-btn span{position: absolute;top: 34.5px;left: 0;width: 100%;height: 1px;background: #000;}
	.hd-btn span:nth-child(1){transform: translateY(-7px);}
	.hd-btn span:nth-child(3){transform: translateY(7px);}
	
	.hd-btn.open span{width: calc( 100% + 2px );left: -1px;}
	.hd-btn.open span:nth-child(1){transform: translateY(0) rotate(45deg);}
	.hd-btn.open span:nth-child(2){transform: translateY(0) rotate(-45deg);}
	.hd-btn.open span:nth-child(3){opacity: 0;}

	/*site map wrap*/
	.siteMap-wrap{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 900;padding-top: 70px;display: none;}
	
	.siteMap-gnb{width: 95%;height: 100%;margin: 0 auto;}
	.siteMap-gnb>ul{width: 100%;}
	.siteMap-gnb>ul>li{border-bottom: 1px solid #eee;}
	.siteMap-gnb>ul>li>a{display: block;width: 100%;height: 100%;font-size: 20px;font-weight: var(--fw-5);padding: 15px 0;position: relative;}
	.siteMap-gnb>ul>li>a::after{content: "\e942";position: absolute;top: 50%;right: -3px;transform: translateY(-50%);z-index: 1;font-family: xeicon !important;}
	.siteMap-gnb>ul>li.on>a::after{transform: translateY(-50%) rotate(180deg);}
	
	.siteMap-gnb>ul>li>ul{padding-bottom: 15px;display: none;}
	.siteMap-gnb>ul>li>ul>li>a{display: block;width: 100%;height: 100%;font-size: 15px;font-weight: var(--fw-4);padding: 10px 15px;color: #454545;}
	
	.siteMap-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;transform: translateY(-100%);z-index: 900;opacity: .4;transition: opacity .4s ease, transform .6s ease;
		background-color: rgba(255,255,255,.9);

		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	.siteMap-overlay.on{transform: translateY(0);opacity: 1;}
}

@media screen and (max-width: 720px){

	#header{height: 60px;}
	.hd-logo img{max-width: 100px;}

	.hd-contact{display: none;}
	
	/*mobile*/
	.hd-btn{width: 20px;margin-left: 0;}
	.hd-btn span{top: 29.5px;}
	
	/*site map wrap*/
	.siteMap-wrap{padding-top: 60px;}
	
	.siteMap-gnb{width: 90%;}
}

/*-- footet --*/
#footer{height: 80px;}
.footer-container{display: flex;align-items: center;justify-content: space-between;height: 100%;background-color: #000;padding: 0 30px;border-radius: 20px;overflow: hidden;}

.ft-logo a{display: block;width: 100%;height: 100%;}
.ft-logo a img{display: block;max-width: 120px;opacity: .3;
	-webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.ft-copy{font-size: var(--fs-14);font-weight: var(--fw-4);color: #FFF;opacity: .3;word-break: keep-all;}

.ftLink>ul{display: flex;align-items: center;gap: 20px;}
.ftLink>ul>li>a{display: block;width: 100%;height: 100%;font-size: var(--fs-14);font-weight: var(--fw-6);color: #FFF;text-decoration: underline;transition: opacity .2s ease;}
.ftLink>ul>li>a img{display: block;}

.ftLink>ul:hover>li>a{opacity: .3;}
.ftLink>ul>li:hover>a{opacity: 1;}

@media screen and (max-width: 1280px){

	.footer-container{border-radius: 15px;padding: 0 25px;}
}

@media screen and (max-width: 1080px){
	
	#footer{height: 70px;margin-bottom: 20px;}
}

@media screen and (max-width: 960px){
	
	#footer{height: auto;}
	.footer-container{display: block;padding: 20px;}
	
	.ft-logo, .ft-copy{margin-bottom: 15px;}
}

@media screen and (max-width: 720px){

	.footer-container{padding: 15px;border-radius: 10px;}
	
	.ft-logo{margin-bottom: 25px;}
	.ft-logo a img{max-width: 100px;}
	
	.ft-copy{font-size: 13px;line-height: 140%;margin-bottom: 15px;}
	
	.ftLink>ul{gap: 15px;}
	.ftLink>ul>li>a{font-size: 13px;}
}