@charset "utf-8";

:root {
	--black: #333333;
	--brown: #8C4332;
	--font-size: 18px;
	--inner: 30px;
	--header-height: clamp(80px, 8vw, 100px);
	--header-right-width: clamp(160px, 50%, 860px);
	--header-side-padding: clamp(20px, 3.5vw, 60px);
	--border-color: #EEEEEE;
}


html {scroll-behavior: smooth; font-size: var(--font-size); color: var(--black); letter-spacing: -.5px; line-height: 1.2; max-width: 1920px; width: 100%; margin: 0 auto;}
#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: 'Noto Sans KR', sans-serif; font-feature-settings: "ss01", "ss02", "ss03", "ss08", "tnum"; font-size: 1rem;}

.inner {padding: 0 var(--inner); max-width: 1500px; 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 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 scaleMove {0% {transform: scale(.8); opacity: 0;}}
@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%;}}



header {position: sticky; top: 0; left: 0; width: 100%; z-index: 90; box-sizing: border-box; transition: .5s ease;}
header:after {content: ""; position: absolute; right: 0; width: var(--header-right-width); height: 1px; background: #EEEEEE; z-index: -1; transition: .5s ease; animation: widthMove_auto 1s ease both;}
header .inner {position: relative; display: flex; justify-content: space-between; align-items: center; height: var(--header-height); transition: .5s ease; max-width: none; width: 100%; padding: 1.1rem 0;}
header .inner .left-box {padding-left: var(--header-side-padding); position: relative; z-index: 100; flex: none; transition: .5s ease;}
header .inner h1 a {width: clamp(128px, 18vw, 188px);}
header .right-box {display: flex; justify-content: space-between; gap: 1rem; align-items: center; position: relative; z-index: 99; width: var(--header-right-width); padding-left: clamp(0px, 3vw, 60px); height: 100%; padding-right: var(--header-side-padding); box-sizing: border-box;}
header .right-box .nav-box {position: relative; max-width: 613px; width: 100%; height: 100%;}
header .right-box .nav-box .dep {display: flex; justify-content: space-between; height: 100%;}
header .right-box .nav-box .dep a {text-align: center; width: 100%; box-sizing: border-box;}
header .right-box .nav-box .dep > li {position: relative;}
header .right-box .nav-box .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 .right-box .nav-box .dep > li.open > a {color: var(--brown);}
header .right-box .nav-box .dep > li.open .dep2 > li {animation: clip_path_height .5s linear both;}
header .right-box .search-btn {width: clamp(30px, 3vw, 2.6rem); height: clamp(30px, 3vw, 2.6rem); background: var(--brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none;}
header .right-box .search-btn .icon {width: 1.35rem; height: 1.35rem; background-image: url(../../images/search-rounded.svg);}
header .right-box .sitemap-btn {display: none; width: 30px; height: 24px; position: relative; align-items: center; justify-content: center; z-index: 100;}
header .right-box .sitemap-btn span {display: block; position: absolute; height: 4px; width: 50%; background: var(--brown); opacity: 1; -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(even) {left: 50%; border-radius: 0 9px 9px 0;}
header .right-box .sitemap-btn span:nth-child(odd) {left:0px; border-radius: 9px 0 0 9px;}
header .right-box .sitemap-btn span:nth-child(1), header .right-box .sitemap-btn span:nth-child(2) {top: 0px;}
header .right-box .sitemap-btn span:nth-child(3), header .right-box .sitemap-btn span:nth-child(4) {top: 10px;}
header .right-box .sitemap-btn span:nth-child(5), header .right-box .sitemap-btn span:nth-child(6) {top: 20px;}
header.open .right-box .sitemap-btn span:nth-child(1),header.open .right-box .sitemap-btn span:nth-child(6) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
header.open .right-box .sitemap-btn span:nth-child(2),header.open .right-box .sitemap-btn span:nth-child(5) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
header.open .right-box .sitemap-btn span:nth-child(1) {left: 2.5px; top: 5px;}
header.open .right-box .sitemap-btn span:nth-child(2) {left: calc(50% - 2.5px); top: 5px;}
header.open .right-box .sitemap-btn span:nth-child(3) {left: -50%; opacity: 0;}
header.open .right-box .sitemap-btn span:nth-child(4) {left: 100%; opacity: 0;}
header.open .right-box .sitemap-btn span:nth-child(5) {left: 2.5px; top: 15px;}
header.open .right-box .sitemap-btn span:nth-child(6) {left: calc(50% - 2.5px); top: 15px;}


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


/* 스크롤 */
header.scroll {background: #fff;}


footer {background: #26250F; height: 6.1rem;}

@media screen and (min-width: 1025px) {
	header .inner > * {animation: fadeIn 1.5s .1s ease both;}
	header .right-box .nav-box .dep2 {position: absolute; left: 50%; top: calc(100% - .3rem); transform: translateX(-50%); width: 6.5rem; padding: .6rem; border-radius: .5rem; background: var(--brown); box-shadow: 0 0 10px rgba(0, 0, 0, .1); display: none; z-index: 1;}
	header .right-box .nav-box .dep2 a {padding: .4rem 0; color: #fff; position: relative; font-size: .85rem; word-break: keep-all;}
	header .right-box .nav-box .dep2 a:after {content: ""; position: absolute; width: 100%; height: 0; border-radius: .3rem; background: #4194C920; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; transition: .5s ease;}
	header .right-box .nav-box .dep:has(li.open) > li:not(.open) > a {opacity: .3;}
	header .right-box .nav-box .dep > li.open > .dep2:has(li:hover) li:not(:hover) a {opacity: .3;} 
}

@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;}
	header .right-box .sitemap-btn {display: flex;}
	header .right-box .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 .right-box .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 .right-box .nav-box {height: 100%; padding: var(--header-height) 0;}
	header .right-box .nav-box::-webkit-scrollbar {width: 0;}
	header.open .right-box .nav-box:after {animation: widthMove 1s .1s ease both;}
	header .right-box .nav-box .dep {flex-direction: column; justify-content: flex-start; gap: 0;}
	header .right-box .nav-box .dep > li {border-bottom: 1px solid var(--border-color);}
	header.open .right-box .nav-box .dep > li {animation: fadeDown 1s ease both;}
	header .right-box .nav-box .dep > li > a {height: auto; justify-content: flex-start; padding: 1rem var(--inner);}
	header .right-box .nav-box .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); transform: translateY(-50%) rotate(90deg); transition: .5s ease;}
	header .right-box .nav-box .dep > li.open > a:after {transform: translateY(-50%) rotate(270deg); background: var(--brown);}
	header .right-box .nav-box .dep > li > a span {display: flex; align-items: center; gap: .9rem;}
	header .right-box .nav-box .dep > li > a span:before {content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--black); transition: .5s ease;}
	header .right-box .nav-box .dep > li.open > a span:before {background: var(--brown);}
	header .right-box .nav-box .dep2 {border-radius: 1rem;width: calc(100% - var(--inner));margin: 0 auto 1rem;background: #8c433214; padding: 1rem 0; display: none;}
	header .right-box .nav-box .dep2 a {text-align: left; padding: .5rem 2.2rem; box-sizing: border-box; font-size: .9rem;} 
}
@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: 20px;
	}
}