@charset "utf-8";

:root {
	--black: #111111;
	--color-primary: #FF640A;
	--color-secondary: #FB9A3A;
	--color-point: #F27A7C;
	--header-top: 2.6rem;
	--header-top-scroll: 1.3rem;
	--header-height: 4.8rem;
	--header-height-scroll: 3.8rem;
}


html {scroll-behavior: smooth; font-size: 18px; background: #111111; color: #fff; word-break: keep-all; font-weight: 500; letter-spacing: -.5px;}
html::-webkit-scrollbar {width: 5px;}
html::-webkit-scrollbar-thumb {background: #ffffff30; border-radius: 20px;}
#wrap {width: 100%; min-width: 320px;} a {color: #fff;}
body, select, input,textarea, button {font-family: "Noto Sans KR", sans-serif; font-feature-settings: "ss01", "ss02", "ss03", "ss08", "tnum"; font-size: 1rem;}
.red {color: #EB4D4D;}
.orange {color: var(--color-secondary);}
.point {color: var(--color-point);}

.inner {padding: 0 30px; max-width: 1740px; width: 100%; margin: 0 auto; box-sizing: border-box;}


@keyframes opacityMove {0% {opacity: 0;}}
@keyframes upMove {0% {transform: translateY(30px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upMove100 {0% {transform: translateY(100%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes downMove {0% {transform: translateY(-30px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes downMove2 {0% {transform: translateY(-10px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes leftMove {0% {transform: translateX(30px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes leftMove100 {0% {transform: translateX(100%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes rightMove {0% {transform: translateX(-30px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes textLetterUp {15% {transform: translateY(-5px);} 30%, 100% {transform: none}}
@keyframes textLetterPointUp {15% {transform: translateY(-5px); color: var(--mainColor);} 30%, 100% {transform: none;}}
@keyframes scaleMove {0% {transform: scale(.8); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes scaleZoomMove {0% {transform: scale(1.1);}}
@keyframes scaleShowHide {80%, 100% {transform: scale(1.2) translate(-50%, -50%); opacity: 0;}}
@keyframes scaleShowHide2 {80%, 100% {transform: scale(1.4) translate(-50%, -50%); opacity: 0;}}
@keyframes rotateXMove {0% {transform: rotateX(90deg); opacity: 0;} 100% {transform: none; opacity: 1}}
@keyframes rotateYMove {0% {transform: rotateY(90deg); opacity: 0;} 100% {transform: none; opacity: 1}}
@keyframes heightMove0 {100% {height: 0;}}
@keyframes clip_path_width {0% {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_width_center {0% {clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_height {0% {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_height_center {0% {clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_height_bottom {0% {clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_circle_center {0% {clip-path: circle(0% at 50% 50%);} 100% {clip-path: circle(150% at 50% 100%);}}
@keyframes clip_path_circle_center_bottom {0% {clip-path: circle(0% at 0 100%);} 100% {clip-path: circle(150% at 0 100%);}}
@keyframes clip_path_circle_right_bottom {0% {clip-path: circle(0.0% at 100% 100%);} 100% {clip-path: circle(150% at 100% 100%);}}
@keyframes clip_path_circle_top_center {0% {clip-path: circle(0% at 50% 0);} 100% {clip-path: circle(100% at 50% 0);}}
@keyframes imgBlurMove {0% {filter: blur(15px); transform: scale(1.1);} 100% {filter: blur(0px); transform: none;}}


header {position: fixed; top: var(--header-top); left: 50%; transform: translateX(-50%); width: 100%; z-index: 90; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; transition: .5s ease; animation: header_show 1s ease both; transform-origin: 0 0;}
@keyframes header_show {0% {transform: scale(.9) translateX(-50%);} }
header .inner {position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: .5s ease; padding: 0 2.2rem; height: var(--header-height);}
header .inner:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 5rem; backdrop-filter: blur(15px); background: #ffffff10;}
header .inner h1 {position: relative; z-index: 101; flex: none; transition: .5s ease;}
header .inner h1 a {width: 100%; display: flex; align-items: center; gap: 4%; justify-content: space-between;}
header .inner h1 a img {width: clamp(120px, 17vw, 184px);}

header .right-box .nav-box {position: relative; max-width: 452px; width: 80%;}
header .right-box .nav-box > .dep {display: flex; justify-content: space-between;}
header .right-box .nav-box > .dep a {text-align: center; width: 100%; box-sizing: border-box; color: #fff;}
header .right-box .nav-box > .dep > li {position: relative;}
header .right-box .nav-box > .dep > li > a {width: 100%; padding: 5px; box-sizing: border-box; position: relative; z-index: 1; font-weight: 600; height: 3rem; display: flex; align-items: center; justify-content: center;}
header .right-box .nav-box .dep2 {position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 7rem; padding: .6rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 10px #11111160; display: none; z-index: 1;}
header .right-box .nav-box .dep2 a {padding: .4rem 0; color: var(--black); position: relative; font-size: .85rem;}
header .right-box .nav-box .dep2 a span {position: relative; transition: .5s ease;}
header .right-box .nav-box .dep2 a span:after {content: ""; position: absolute; width: 100%; height: 40%; border-radius: 50%; background: var(--color-primary); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; filter: blur(10px); opacity: 0; transition: .5s ease;}
header .right-box {flex: none; display: flex; gap: 3.5rem; align-items: center; position: relative; z-index: 100;}
header .right-box .nav-box {width: 22rem;}
header .right-box .nav-box > .dep {display: flex; align-items: center; justify-content: space-between; gap: .5rem;}
header .right-box .nav-box > .dep > li > a {font-size: 1.1rem;}
header .right-box > *:not(.nav-box) {z-index: 1;}
header .right-box .lang-btn {width: clamp(6rem, 15vw, 8rem); background: #fff; border-radius: 5rem; display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; box-sizing: border-box;}
header .right-box .lang-btn .icon {flex: none; width: 1.35rem; height: 1.35rem; background: url(../../images/ico-lang.svg) no-repeat center / contain;}
header .right-box .lang-btn .select-box {width: 100%;}
header .right-box .lang-btn .select-box .list {width: calc(100% + 1.2rem); top: calc(100% + .2rem); right: .4rem; max-height: none;}
header .right-box .lang-btn .select-box .list li {padding-left: 1.7rem;}
header .right-box .sitemap-btn {width: 2.2rem; height: 1.6rem; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; display: none;}
header .right-box .sitemap-btn span {display: block; position: absolute; height: 4px; width: 100%; background: #d3531a; border-radius: .5rem; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
header .right-box .sitemap-btn span:nth-child(1) {top: 0px;}
header .right-box .sitemap-btn span:nth-child(2),header .right-box .sitemap-btn span:nth-child(3) {top: .65rem;}
header .right-box .sitemap-btn span:nth-child(4) {top: 1.3rem;}
header.open .right-box .sitemap-btn span:nth-child(1) {top: 18px; width: 0%; left: 50%;}
header.open .right-box .sitemap-btn span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
header.open .right-box .sitemap-btn span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
header.open .right-box .sitemap-btn span:nth-child(4) {top: 18px; width: 0%; left: 50%;}


/* 스크롤 */
.quickMenu {position: fixed; top: 50%; transform: translateY(-50%); right: 2.2rem; z-index: 5;}
.quickMenu .list {display: flex; flex-direction: column; gap: clamp(.4rem, 2vw, .9rem); align-items: center;}
.quickMenu .list li a {position: relative; border-radius: 50%;}
.quickMenu .list li a .icon {width: clamp(1.8rem, 5vw, 2.2rem); height: clamp(1.8rem, 5vw, 2.2rem); background-position: center; background-repeat: no-repeat; background-size: contain;}
.quickMenu .list li.youtube a .icon {background-image: url(../../images/ico_sns_youtube.svg);}
.quickMenu .list li.instagram a .icon {background-image: url(../../images/ico_sns_instagram.svg);}
.quickMenu .list li.facebook a .icon {background-image: url(../../images/ico_sns_facebook.svg);}
.quickMenu .scrolltop {margin-top: 100%; width: clamp(1.8rem, 5vw, 2.2rem); height: clamp(4rem, 6vw, 4.4rem); border: 1px solid #fff; position: relative; border-radius: 5rem; overflow: hidden;}
.quickMenu .scrolltop:after {content: ""; position: absolute; left: -7.5rem; bottom: -7.5rem; width: 15rem; height: 15rem; border-radius: 0 7.5rem 0 0; background: #fff; transition: .7s ease; transform: scale(0);}
.quickMenu .scrolltop .icon {position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; background: url(../../images/scrolltop.svg) no-repeat center / 21%; transition: .5s ease;}
footer {border-top: 1px solid #ffffff40;}
footer .inner {padding-top: 3.5rem; padding-bottom: 3.5rem; display: flex; justify-content: space-between; gap: 2rem;}
footer .inner .left-box {flex: none;}
footer .inner .left-box ul {display: flex; flex-direction: column; gap: .4rem; font-size: .9rem;}
footer .inner .left-box ul li {display: flex; gap: .6rem;}
footer .inner .left-box ul li.name {color: var(--color-secondary);}
footer .inner .left-box ul li .title {color: #ffffff60;}
footer .inner .left-box ul li:has(div) {gap: .4rem 1rem;}
footer .inner .left-box ul li:has(div) div {display: flex; gap: .6rem;}
footer .inner .right-box {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}
footer .inner .right-box .logo {width: clamp(130px, 18vw, 184px);}
footer .inner .right-box .copy {font-size: .9rem; color: #ffffff40; text-align: right;}

header.scroll {top: var(--header-top-scroll)}
header.scroll .inner {height: var(--header-height-scroll);}
header.scroll .inner h1 {transform: scale(.8);}
header.scroll .right-box .nav-box > .dep > li > a {font-size: 1rem;}

@media screen and (min-width: 1025px) {
	header .right-box .nav-box .dep2 li:hover a {color: var(--color-secondary);}
	header .right-box .nav-box .dep2 li:hover a span:after {opacity: .5;}
	header .right-box .nav-box .dep2:has(:hover) li:not(:hover) a {opacity: .3;}

	footer .inner .left-box ul li a.text:hover {color: var(--color-primary);}

}

@media screen and (max-width: 1200px) {
	html {font-size: 17px;} 
}
@media screen and (max-width: 1024px) {
	header .right-box {gap: 1rem;}
	header .right-box .sitemap-btn {display: block;}
	header .right-box .nav-box {position: fixed; width: 100vw; min-width: 320px; height: calc(100 * var(--vh)); top: calc(-1 * var(--header-top)); right: 100%; max-width: none; background: #11111163; backdrop-filter: blur(20px); padding: calc(var(--header-height) + var(--header-top) + 2rem) clamp(1rem, 3vw, 3vw) 2rem; box-sizing: border-box; z-index: 1; box-sizing: border-box; transition: .5s ease; opacity: 0;}
	header.open .right-box .nav-box {right: 0; opacity: 1;}
	header .right-box .nav-box > .dep {position: relative; gap: 0; width: clamp(7.5rem, 24vw, 13rem); box-sizing: border-box; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
	header .right-box .nav-box > .dep:after {content: ""; position: absolute; width: 1px; height: calc(calc(100 * var(--vh)) - calc(var(--header-height) + var(--header-top) + 4rem));; right: 0; top: 0; background: linear-gradient(180deg, transparent, #fff, transparent);}
	header .right-box .nav-box > .dep > li {width: 100%;}
	header .right-box .nav-box > .dep > li a {height: 4rem; color: #fff;}
	header .right-box .nav-box > .dep > li > a:after {content: ""; position: absolute; border-radius: 3rem; width: calc(100% + 1rem); height: 100%; left: 0; top: 0; z-index: -1; background: var(--color-primary); clip-path: circle(0% at 0 100%); transition: .5s ease;}
	header .right-box .nav-box > .dep > li.active > a:after {clip-path: circle(150% at 0 100%);}
	header .right-box .nav-box .dep2 {position: fixed; left: calc(clamp(1rem, 3vw, 3vw) + clamp(7.5rem, 24vw, 13rem)); display: block; top: calc(var(--header-height) + var(--header-top) + 2rem); background: transparent; width: calc(100% - (clamp(1rem, 3vw, 3vw) * 2) - clamp(7.5rem, 24vw, 13rem)); transform: none; box-shadow: none; border: none; padding: 0; display: none; overflow-y: auto; max-height: calc(calc(100 * var(--vh)) - var(--header-height) - var(--header-top) - 4rem);}
	header .right-box .nav-box .dep2 a {display: flex; align-items: center; justify-content: flex-start; font-size: 1rem; text-align: left; padding: 0 clamp(1.5rem, 10%, 10%)}
	footer .inner .left-box ul li a.text:hover {color: var(--color-secondary);}

	footer .inner {flex-direction: column; gap: 4rem;}
	footer .inner .right-box {gap: 1rem; align-items: flex-start;}
	footer .inner .right-box .copy {text-align: left;}
	footer .inner .left-box ul li:has(div) {flex-wrap: wrap;}
}
@media screen and (max-width: 900px) {
	html {font-size: 16.5px;} 
}

@media screen and (max-width: 768px) {
	html {font-size: 16px;}
}
@media screen and (max-width: 480px) {
	html {font-size: 15px;}
	header .inner h1 a img {width: clamp(100px, 17vw, 184px);}
}
@media screen and (max-width: 400px) {
	html {font-size: 14px;}
	.inner {padding-left: 20px; padding-right: 20px;}
	header {padding-left: 20px; padding-right: 20px;}
	header .inner {padding-left: 1.4rem; padding-right: 1.4rem;}
}