@charset "utf-8";

:root {
	/* setting */
	--font-size: 18px;
	--header-height: clamp(80px, 8vw, 96px);
	--header-right-width: clamp(160px, 50%, 860px);
	--header-dep2-height: 3.3rem;
	--header-side-padding: clamp(20px, 3.5vw, 60px);
	--inner: 1540px;
	--inner-padding: 30px;
	--border-color: #EEEEEE;
  --sub-container-padding: clamp(4rem, 8vw, 6.6rem);

	/* color */
	--black: #323336;
	--blue: #1D51A3;
	--dark-blue: #153B77;
	--light-blue: #749DDE;
	--ebony: #555555;
	--ash: #9599A7;
	--silver: #B7BAC7;
	--gray: #585858;
	--light-gray: #e4e4e4;
	--sky: #00A7E2;
	--ghost: #F6F7FB;
	--mist: #DDDEE6;
	--green: #91D500;
}


html {scroll-behavior: smooth; font-size: var(--font-size); color: var(--black); line-height: 1.2; letter-spacing: -.3px;}
#wrap {width: 100%; min-width: 360px;} a {color: var(--black);}
body::-webkit-scrollbar {width: 6px;}
body::-webkit-scrollbar-thumb {background: #8c433230; border-radius: 5px;}
body, select, input,textarea, button {font-family: 'pretendard', sans-serif; font-feature-settings: "ss01", "ss02", "ss03", "ss08", "tnum"; font-size: 1rem;}

/* 색상 */
.ebony-color {color: var(--ebony);}
.ebony-bg {background-color: var(--ebony);}
.ash-color {color: var(--ash);}
.ash-bg {background-color: var(--ash);}
.gray-color {color: var(--gray);}
.gray-bg {background-color: var(--gray);}
.blue-color {color: var(--blue)}
.blue-bg {background-color: var(--blue)}
.dark-blue-color {color: var(--dark-blue)}
.dark-blue-bg {background-color: var(--dark-blue)}
.sky-color {color: var(--sky)}
.sky-bg {background-color: var(--sky)}
.green-color {color: var(--green)}
.green-bg {background-color: var(--green)}

.inner {padding: 0 var(--inner-padding); max-width: var(--inner); width: 100%; margin: 0 auto; box-sizing: border-box;}

@keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fadeUp {0% {opacity: 0; transform: translateY(18px);} 100% {opacity: 1; transform: none}}
@keyframes fadeUp_100 {0% {opacity: 0; transform: translateY(100%);} 100% {opacity: 1; transform: none}}
@keyframes fadeDown {0% {opacity: 0; transform: translateY(-18px);} 100% {opacity: 1; transform: none}}
@keyframes fadeLeft {0% {opacity: 0; transform: translateX(-18px);} 100% {opacity: 1; transform: none}}
@keyframes fadeRight {0% {opacity: 0; transform: translateX(18px);} 100% {opacity: 1; transform: none}}
@keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;}}
@keyframes zoomIn {0% {transform: scale(.8); opacity: 0;}}
@keyframes clip_path_circle {0% {clip-path: circle(0);} 100% {clip-path: circle(100%);}}
@keyframes clip_path_circle_leftBot {0% {clip-path: circle(0% at 50% 0);} 100% {clip-path: circle(111.7% at 50% 0);}}
@keyframes clip_path_square {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_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_right {0% {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 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_up {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_height_width {0% {clip-path: polygon(0 0, 100% 0, 50% 0, 0 0);} 50% {clip-path: polygon(0 0, 100% 0, 50% 50%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes textLetterUp {15% {transform: translateY(-5px);} 30%, 100% {transform: none}}
@keyframes textLetterPointUp {15% {transform: translateY(-5px); color: var(--mainColor);} 30%, 100% {transform: none;}}
@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 widthMove {0% {width: 0;} 100% {width: 100%;}}
@keyframes widthMove_auto {0% {width: 0;}}
@keyframes heightMove {0% {height: 0;} 100% {height: 100%;}}
@keyframes heightMoveHide {0% {height: 100%;} 100% {height: 0;}}
@keyframes borderRadius0 {0% {border-radius: 0;}}




header {position: sticky; top: 0; left: 0; width: 100%; z-index: 90; background: #fff; box-sizing: border-box; transition: .5s ease;}
.header-inner {position: relative; display: flex; justify-content: space-between; align-items: center; height: var(--header-height); transition: .5s ease;}
.header-left-box {position: relative; z-index: 100; flex: none; transition: .5s ease;}
.header-left-logo {width: clamp(80px, 18vw, 118px);}
.header-right-box {display: flex; justify-content: space-between; gap: clamp(2rem, 8vw, 120px); align-items: center; position: relative; z-index: 99; height: 100%; box-sizing: border-box;}
.header-nav-box {position: relative; max-width: 613px; width: 100%; height: 100%;}
.header-nav-dep {display: flex; gap: 2.6rem; height: 100%;}
.header-nav-dep a {text-align: center; width: 100%; box-sizing: border-box;}
.header-nav-dep-li {position: relative;}
.header-nav-dep-li > a {width: 100%; height: 100%; padding: 5px; box-sizing: border-box; position: relative; z-index: 1; font-weight: 600; display: flex; align-items: center; justify-content: center;}
.header-lang-btn {position: relative; overflow: hidden; width: 2.66rem; height: 1.33rem; font-size: .8rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ash); color: var(--ash); border-radius: 3rem; flex: none; z-index: 1;}
.header-lang-btn:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: var(--ash); clip-path: circle(0% at 50% 100%); transition: .5s ease;}
.header-lang-btn span {position: relative; z-index: 1; transition: .5s ease;}
.header-sitemap-btn {display: none; position: relative; align-items: center; justify-content: center; z-index: 100;}
.header-sitemap-btn span {transition: 1s cubic-bezier(0.19, 1, 0.22, 1); width: 24px;height: 3px;border-radius: 4px;background-color: var(--black);}
.header-sitemap-btn span::before,
.header-sitemap-btn span::after {content: ""; width: 24px;height: 3px;left: 0;background-color: var(--black);border-radius: 4px;position: absolute;transition-property: transform; transition-duration: 0s;transition-delay: 0.1s;transition-timing-function: linear;}
.header-sitemap-btn span::before {top: -7px;}
.header-sitemap-btn span::after {bottom: -7px}
.header-sitemap-btn span::before {transition-property: top, opacity;}
.header-sitemap-btn span::after {transition-property: bottom, transform;}

header.open .header-sitemap-btn span {transform: rotate(45deg);transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);}
header.open .header-sitemap-btn span::before,
header.open .header-sitemap-btn span::after {transition-delay: 0s;}
header.open .header-sitemap-btn span::before {top: 0;opacity: 0;}
header.open .header-sitemap-btn span::after {bottom: 0;transform: rotate(90deg);}


header.open .header-sitemap {top: 0;}
header.open .header-sitemap .header-sitemapdep > li {animation: rightMove 1s ease both;}


/* 스크롤 */
header.scroll {}

footer {position: relative; background: #112F5F; padding-top: 3.5rem; padding-bottom: 3.5rem;}
footer:after {content: ""; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; background: url(../../images/footer_bg.jpg) no-repeat center bottom / cover;}
.footer-inner {display: flex; justify-content: space-between; color: #fff; gap: 3rem; flex-wrap: wrap; position: relative; z-index: 1;}
.footer-left-box {display: flex; flex-direction: column; gap: 2.6rem;}
.footer-left-logo-box {display: flex; gap: 1.7rem; align-items: center;}
.footer-left-logo-box .footer-left-logo.blog {width: clamp(76px, 15vw, 96px);}
.footer-left-logo-box .footer-left-logo.youtube {width: clamp(36px, 7vw, 48px);}
.footer-left-logo-box a img {transition: .5s ease;}
.footer-address {display: flex; flex-direction: column; gap: .8rem; line-height: 1;}
.footer-address-name {font-size: 1.1rem; font-weight: 600;}
.footer-address-list {display: flex; flex-direction: column; gap: .8rem; font-size: .9rem;}
.footer-address-contact {display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;}
.footer-address-contact > div {display: flex; align-items: center; gap: .4rem;}
.footer-address-contact > div:not(:last-child):after {content: ""; width: 1px; height: .66rem; display: block; margin-left: .2rem; background: #FFFFFF50;}
.footer-address-tt2 {color: #fff; font-weight: 600;}
.footer-right-box {display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-left: auto;}
.footer-right-logo {width: clamp(100px, 22vw, 190px);}
.footer-right-box .copy {font-size: .8rem; font-weight: 600; text-align: right;}

@media screen and (min-width: 1025px) {
	.header-inner > * {animation: fadeIn 1.5s .1s ease both;}
	.header-nav-dep2 {position: absolute; left: 50%; top: 100%; display: none; z-index: 1; transform: translateX(-50%);} 
	/*header:after {content: ""; position: fixed; top: var(--header-height); border-top: 1px solid var(--light-gray); box-sizing: border-box; width: 100vw; height: var(--header-dep2-height); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); background: #fff; left: 50vw; transform: translateX(-50vw); z-index: -1; transition: 1s ease;}*/
    /*header:has(.header-right-box .header-nav-dep > li.open > .header-nav-dep2):after {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}*/
    .header-nav-dep2 ol {display: flex; gap: .7rem; flex-direction: column; align-items: center; white-space: nowrap; background: #fff; padding: 1rem .5rem; min-width: 7.8rem; box-sizing: border-box; border-top: 1px solid #eee;}
    .header-nav-dep2 a {padding: .4rem; position: relative; font-size: .9rem; word-break: keep-all; font-weight: 300;}
	.header-nav-dep li.open > a {color: var(--sky);}
	.header-nav-dep li.open > .header-nav-dep2 ol li {animation: clip_path_height 1s ease both;}
	.header-nav-dep-li.open > .header-nav-dep2:has(li:hover) .header-nav-dep2-li:not(:hover) > a {opacity: .3;} 
	.header-lang-btn:hover {box-shadow: 0 0 5px rgba(0, 0, 0, .5); border-color: transparent;}
	.header-lang-btn:hover:after {clip-path: circle(150% at 50% 100%);}
	.header-lang-btn:hover span {color: #fff; text-shadow: 1px 1px #656565, 2px 2px #656565, 3px 3px #656565, 4px 4px #656565, 5px 5px #656565, 6px 6px #656565, 7px 7px #656565, 8px 8px #656565, 9px 9px #656565, 10px 10px #656565, 11px 11px #656565, 12px 12px #656565, 13px 13px #656565, 14px 14px #656565, 15px 15px #656565, 16px 16px #656565, 17px 17px #656565, 18px 18px #656565, 19px 19px #656565, 20px 20px #656565;}


	.footer-left-logo-box a:hover img {filter: drop-shadow(0 0 10px #ffffff70);}
}

@media screen and (max-width: 1200px) {
	html {font-size: 17px;} 
}
@media screen and (max-width: 1024px) {
	:root {
		--header-right-width: clamp(160px, 100%, 860px);
	}
	header:after {width: 100%;}
	.header-right-box {justify-content: flex-end; gap: 1.5rem;}
	.header-sitemap-btn {display: flex;}
	.header-nav-box {position: fixed; left: 0; right: 0; top: 0; bottom: 0; max-width: none; z-index: 1; height: 0; transition: .5s ease; overflow-y: auto; box-sizing: border-box; background: #fff;}
	.header-nav-box:after {content: ""; position: absolute; width: 0; height: 1px; top: var(--header-height); left: 50%; transform: translateX(-50%); background: var(--border-color);}
	header.open .header-right-box .header-nav-box {height: 100%; padding: var(--header-height) 0;}
	.header-nav-box::-webkit-scrollbar {width: 0;}
	header.open .header-right-box .header-nav-box:after {animation: widthMove 1s .1s ease both;}
	.header-nav-dep {flex-direction: column; justify-content: flex-start; gap: 0; padding: 1rem;}
	header.open .header-nav-dep-li {animation: clip_path_height 1s .1s ease both;}
	header.open:has(.header-nav-dep-li.open) .header-nav-dep-li:not(.open) {opacity: .4;}
	.header-nav-dep-li {border-bottom: 1px solid var(--light-gray);}
	.header-nav-dep-li > a {height: auto; justify-content: flex-start; padding: 2rem var(--inner-padding); padding-right: calc(var(--inner-padding) + 1rem + 16px); font-size: 1.2rem;}
	.header-nav-dep-li.open:has(.header-nav-dep2) > a {padding-bottom: 1rem;}
	.header-nav-dep-li > a:after {content: ""; position: absolute; mask-image: url(../../images/ico-arrow-right.svg); background: var(--black); mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../../images/ico-arrow-right.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; width: 8px; height: 16px; top: 50%; right: var(--inner-padding); transform: translateY(-50%) rotate(90deg); transition: .5s ease;}
	.header-nav-dep-li:not(:has(.header-nav-dep2)) > a:after {display: none;}
	.header-nav-dep-li.open > a:after {transform: translateY(-50%) rotate(270deg); background: var(--blue);}
	.header-nav-dep2 {border-radius: 1rem;width: calc(100% - var(--inner-padding)); display: none; padding: .5rem 0 2rem;}
	.header-nav-dep2 a {text-align: left; padding: .5rem 2.2rem; box-sizing: border-box; font-size: 1rem;} 
}
@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;}
}
@media screen and (max-width: 400px) {
	html {font-size: 14px;}
	:root {
		--inner-padding: 20px;
	}
}