@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@font-face { font-family: 'ChungjuKimSaengTTF'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/ChungjuKimSaengTTF.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'GowunBatang-Regular'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff'); font-weight: normal; font-style: normal;}

:root {
	--black: #333333;
	--yellow: #F3C54B;
	--blue: #1D5181;
}


html {scroll-behavior: smooth; font-size: 18px;}
#wrap {width: 100%; min-width: 320px; overflow-x: hidden;} a {color: var(--black);}
body, select, input,textarea, button {color: var(--black); font-family: 'Pretendard', sans-serif; font-feature-settings: "ss01", "ss02", "ss03", "ss08", "tnum"; font-size: 1rem;}
.cjkFont {font-family: 'ChungjuKimSaengTTF'; font-feature-settings: normal;}
.gbFont {font-family: 'GowunBatang-Regular'; letter-spacing: -0.1em;}
.gray {color: #999999;}
.red {color: #FE5C4D;}
.yellow {color: var(--yellow);}
.blue {color: var(--blue);}

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


@keyframes opacityMove {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes upMove {0% {transform: translateY(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes downMove {0% {transform: translateY(-20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes downMove2 {0% {transform: translateY(-10px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upMove22 {0% {transform: translateY(10px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes leftMove {0% {transform: translateX(20px); 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(-20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes transformMove {100% {transform: none; opacity: 1;}}
@keyframes textLetterUp {15% {transform: translateY(-5px);} 30%, 100% {transform: none}}
@keyframes textLetterPointUp {15% {transform: translateY(-5px); color: var(--yellow);} 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 fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;}}
@keyframes rotateXMove {0% {transform: rotateX(180deg); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes moreBtnMove1 {80% {opacity: 1;} 100% {opacity: 0; transform: translate(-50%, -50%) scale(1.1);}}
@keyframes moreBtnMove3 {80% {opacity: 1;} 100% {opacity: 0; transform: translate(-50%, -50%) scale(1.3);}}
@keyframes moreBtnMove4 {80% {opacity: 1;} 100% {opacity: 0; transform: translate(-50%, -50%) scale(1.4);}}
@keyframes moreBtnMove6 {80% {opacity: 1;} 100% {opacity: 0; transform: translate(-50%, -50%) scale(1.6);}}
@keyframes moreBtnMove8 {80% {opacity: 1;} 100% {opacity: 0; transform: translate(-50%, -50%) scale(1.8);}}


header {position: fixed; top: 0; left: 0; width: 100%; z-index: 90; box-sizing: border-box; transition: .5s ease;}
header:before {content: ""; position: absolute; top: -100vh; left: 0; width: 100%; height: 100vh; background: #00000050; z-index: -1; transition: .5s ease; pointer-events: none;}
header:after {content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: #fff; z-index: -1; transition: height .5s ease;}
div:not(.main) header:after {top: 0; transform: translateY(-100%); animation: transformMove 1s ease both;}
div:not(.main) header.scroll:after {background: transparent;}
header .bgBox {position: absolute; top: 0; height: 30rem; max-width: 1500px; width: 100%; left: 50%; transform: translateX(-50%); padding: 0 30px; display: flex; align-items: flex-end; padding-bottom: 1.6rem; box-sizing: border-box; display: none;} 
header .bgBox .box {position: relative; width: clamp(200px, 34vw, 505px);}
header .bgBox .box figure:not(.img1) {position: absolute; bottom: 0; width: 100%; height: 100%; left: 0;}
header .inner {position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 7.1rem; gap: 1rem; max-width: none; padding: 0 3.3%; transition: .5s ease;}
header .inner h1 {width: clamp(120px, 14vw, 196px); position: relative; z-index: 100; flex: none; transition: .5s ease; animation: downMove 1.5s .1s ease both;}
header .inner h1 img {transition: .5s ease;}
header .rightBox {width: 100%; display: flex; justify-content: flex-end; gap: 1.7rem; align-items: center;}
header .rightBox > *:not(.sitemapBtn) {animation: downMove 1.5s .1s ease both;}
header .navBox {position: relative; max-width: 828px; width: 80%; transition: .5s ease;}
header .navBox .bg {display: none;}
header .navBox .dep {display: flex; justify-content: space-between; gap: 3.6%;}
header .navBox .dep a {text-align: center; width: 100%; box-sizing: border-box; word-break: keep-all;}
header .navBox .dep > li {position: relative; width: 100%;}
header .navBox .dep > li > a {width: 100%; position: relative; z-index: 1; font-weight: 600; height: 2.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;}
header .navBox .dep > li > a:after {content: ""; position: absolute; width: 2.4rem; height: 3rem; top: -1.1rem; left: 0.5rem; background: url(../../images/ico_bird.svg) no-repeat center / contain; z-index: -1; opacity: 0; transform: scale(.8); transition: .5s ease;}
header .navBox .dep > li > a span {position: relative; z-index: 1;}
header .navBox .dep > li > a span:after {content: ""; position: absolute; width: 100%; height: 100%; padding: .1rem .3rem; border-radius: 1rem; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; filter: blur(4px); opacity: 0; transition: .5s ease;}
header .navBox .dep > li .plusBtn {display: none;}
header .navBox .dep2 {position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 100%; display: none; flex-direction: column; gap: .3rem; padding-top: .9rem}
header .navBox .dep2 a {padding: .4rem 0; color: #999; position: relative;}
header .navBox .dep2 a span {position: relative; transition: .5s ease;}
header .navBox .dep2 a span:after {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: var(--yellow); width: 0; height: 2px; transition: .5s ease;}
header .langBox {display: flex; align-items: center; gap: 1.35rem;}
header .langBox .langBtn {position: relative;  z-index: 1; display: flex; align-items: center; flex-direction: column; gap: .5rem;}
header .langBox .langBtn .icon {position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box; background-position: center; background-size: 105%; background-repeat: no-repeat; border: 1px solid #DDDDDD;}
header .langBox .langBtn .icon:before, header .langBox .langBtn .icon:after {content: ""; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.89); border-radius: 50%; opacity: 0; z-index: -1; transition: .5s ease; background: #ffffff20; z-index: -1;}
header .langBox .langBtn .icon:before {background: #ffffff40; z-index: 0;}
header .langBox .langBtn.kr .icon {background-image: url(../../images/ico_lang_kr.svg);}
header .langBox .langBtn.en .icon {background-image: url(../../images/ico_lang_en.svg);}
header .langBox .langBtn .mo {display: none;}
header .langBox .langBtn p {font-size: 12px;}
header .langBox .langBtn:not(.active) {filter: grayscale(1);}
header .langBox .langBtn:not(.active) p {opacity: .5;}
header .sitemapBtn {display: none; animation: downMove 1.5s .1s ease both;}


/* 스크롤 */
header:not(.open).scroll {padding: 1rem;}
header:not(.open).scroll .inner {height: 4.4rem; border-radius: .5rem; background: #fff; box-shadow: 0 0 10px #00000015;}
header:not(.open).scroll .inner h1 img {transform: scale(.9);}
header.scroll .langBox .langBtn p, header.open .langBox .langBtn p {color: #999;}

.quickMenu {position: fixed; z-index: 90; bottom: clamp(1rem, 3vw, 1.7rem); right: clamp(1rem, 3vw, 1.6rem); animation: opacityMove 1s ease both;}
.quickMenu .list {display: flex; flex-direction: column; gap: clamp(.4rem, 1.5vw, .9rem);}
.quickMenu .list a {position: relative;}
.quickMenu .list a .text {position: absolute; top: 50%; transform: translateY(-50%) translateX(20px); right: calc(100% + .5rem); padding: 3px 5px; border-radius: 5px; background: #fff; border: 1px solid #DDDDDD; white-space: nowrap; font-size: 13px; opacity: 0; transition: .5s ease;}
.quickMenu .list a .text:before {content: ""; position: absolute; top: 50%; right: -4px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 4px 0px 4px 4px; border-color: transparent transparent transparent #DDDDDD; z-index: -1;}
.quickMenu .list .insta .text span {background: -webkit-linear-gradient(#5845e2, #f13360, #edc66c); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.quickMenu .list .youtube .text span {color: #ED2F2A;}
.quickMenu .list .buyeo .text span {color: #004098;}
.quickMenu .list .icon {width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: 0 2px 8px #00000016; position: relative; z-index: 1;}
.quickMenu .list .insta .icon {background: url(../../images/quick_menu_instagram.svg) no-repeat center / contain;}
.quickMenu .list .youtube .icon {background: url(../../images/quick_menu_youtube.svg) no-repeat center / contain;}
.quickMenu .list .buyeo .icon {background: url(../../images/quick_menu_buyeo.svg) no-repeat center / contain;}
footer .box {position: relative; color: #fff; background: #1D5181;}
footer .box .bg {position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; overflow: hidden;}
footer .box .bg img {width: 100%; object-fit: cover; opacity: 0; transform: translateY(20%); transition: 1s ease; mix-blend-mode: multiply; position: absolute; bottom: -13%; min-height: 100%;}
footer .box.show .bg img {transform: none; opacity: .6;}
footer .box .inner {display: flex; justify-content: space-between; gap: 1rem; position: relative; z-index: 1; padding-top: 3.5rem; padding-bottom: 3.5rem;}
footer .box .inner .leftBox {width: 85%; display: flex; font-size: 14px; display: flex; flex-direction: column; gap: .7rem; opacity: 0; transform: translateX(20px); transition: 1s ease;}
footer .box.show .inner .leftBox {transform: none; opacity: 1;}
footer .box .inner .leftBox .name {font-size: 1rem;}
footer .box .inner .leftBox address {display: flex; flex-direction: column; gap: .7rem;}
footer .box .inner .leftBox address div {display: flex; gap: 1rem;}
footer .box .inner .leftBox address div .left {opacity: .5; font-weight: 600;}
footer .box .inner .leftBox address div .right {font-weight: 500;}
footer .box .inner .leftBox address div a.right {color: var(--yellow);}
footer .box .inner .leftBox .copy {opacity: .5; font-size: 14px;}
footer .box .inner .rightBox {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; opacity: 0; transform: translateX(-20px); transition: 1s ease;}
footer .box.show .inner .rightBox {transform: none; opacity: 1;}
footer .box .inner .rightBox .logo {width: clamp(120px, 25vw, 196px);}
footer .box .inner .rightBox .logoList {display: flex; align-items: center; gap: .6rem 1.35rem; flex-wrap: wrap; justify-content: flex-end;}
footer .box .inner .rightBox .logoList li {display: flex; align-items: center; gap: .4rem; font-size: 14px;}

@media screen and (min-width: 1025px) {
	header .navBox .dep > li.hover > a span:after {opacity: 1;}
	header .navBox .dep > li.hover > a:after {opacity: .3; transform: none;}
	header .navBox .dep2 a:hover {color: var(--yellow);}
	header .navBox .dep2 a:hover span {padding-left: .5rem;}
	header .navBox .dep2 a:hover span:after {width: .3rem;}
	header .langBox .langBtn:hover .icon:before {animation: moreBtnMove4 2s ease both infinite;}
	header .langBox .langBtn:hover .icon:after {animation: moreBtnMove8 2s .1s ease both infinite;}

	/* 사이트맵 오픈 */
	header.open:after {height: 30rem; top: 0;}
	header.open .navBox {max-width: 900px;}
	header.open .navBox .dep2 {display: flex;}
	header.open .navBox .dep2 li {animation: upMove 1s ease both;}
	header.open .bgBox {display: flex;}
	header.open .bgBox .box figure {animation: leftMove 1s ease both;}
	header.open .bgBox .box .img1 {animation-name: upMove; position: relative; z-index: 1;}
	header.open .bgBox .box .img1 img {animation: header_bg_bot 5s 1.6s linear infinite; transform-origin: bottom;}
	@keyframes header_bg_bot {20% {transform: rotate(1deg);} 60% {transform: rotate(-1deg);} 40%, 80%, 100% {transform: none;}}
	header.open .bgBox .box .top img {animation: header_bg_top 5s 1.8s linear infinite;}
	@keyframes header_bg_top {20%, 40% {transform: translate(5px, 5px);} 60%, 100% {transform: none;}}
	header.open:before {top: 0;}

	.quickMenu .list a:hover .text {opacity: 1; transform: translateY(-50%);}

}

@media screen and (max-width: 1200px) {
	html {font-size: 17px;} 
}
@media screen and (max-width: 1024px) {
	header .inner {height: 5.2rem;}
	header .rightBox {gap: 1rem;}
	header .sitemapBtn {display: block;width: 24px; height: 24px; transition: .3s ease; position: relative; flex: none;}
	header .sitemapBtn span {width: 5px; height: 5px; background: var(--black); display: block; border-radius: 50%; position: absolute;}
	header .sitemapBtn span:nth-child(1) {left: 0; top: 0;}
	header .sitemapBtn span:nth-child(2) {left: 9px; top: 0;}
	header .sitemapBtn span:nth-child(3) {right: 0; top: 0;}
	header .sitemapBtn span:nth-child(4) {left: 0; top: 9px;}
	header .sitemapBtn span:nth-child(5) {left: 9px; top: 9px;}
	header .sitemapBtn span:nth-child(6) {right: 0px; top: 9px;}
	header .sitemapBtn span:nth-child(7) {left: 0px; bottom: 0px;}
	header .sitemapBtn span:nth-child(8) {position: absolute; left: 9px; bottom: 0px;}
	header .sitemapBtn span:nth-child(9) {right: 0px; bottom: 0px;}
	header.open .sitemapBtn {transform: rotate(180deg); transition: .3s ease;}
	header.open .sitemapBtn span {border-radius: 50%; transition-delay: 200ms; transition: .5s ease;}
	header.open .sitemapBtn span:nth-child(2) {left: 5px; top: 5px;}
	header.open .sitemapBtn span:nth-child(4) {left: 5px; top: 14px;}
	header.open .sitemapBtn span:nth-child(6) {right: 5px; top: 5px;}
	header.open .sitemapBtn span:nth-child(8) {left: 14px; bottom: 5px;}
	header .navBox {position: fixed; top: -100%; right: 0; width: 100%; height: 100%; background: #fff; width: 100%; max-width: none; animation: none !important; transition: .5s ease;}
	header.open .navBox {display: block; top: 0;}
	header .navBox .dep {flex-direction: column; gap: 0; align-items: flex-start; justify-content: flex-start; border-top: 1px solid #00000010; padding-bottom: clamp(16rem, 34vw, 26rem); height: calc(100% - 5.2rem); margin-top: 5.2rem; overflow-y: auto; box-sizing: border-box; position: relative;}
	header .navBox .dep:before {content: ""; position: absolute; width: 100%; height: 1px; top: 0; left: 0; border-top: 1px solid #eee;}
	header .navBox .dep > li {padding: .5rem clamp(30px, 5vw, 60px); width: 100%; box-sizing: border-box; border-bottom: 1px solid #EEEEEE; background: #fff;}
	header .navBox .dep > li > a {font-size: 1.3rem; width: 100%; text-align: left; display: flex; gap: .5rem; align-items: center;}
	header .navBox .dep > li .plusBtn {display: block; position: relative; width: 16px; height: 16px; transition: .5s ease; opacity: .3;}
	header .navBox .dep > li .plusBtn:before, header .navBox .dep > li .plusBtn:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 5px; background: var(--yellow); transition: .5s ease;}
	header .navBox .dep > li .plusBtn:before {width: 2px; height: 100%;}
	header .navBox .dep > li .plusBtn:after {width: 100%; height: 2px;}
	header .navBox .dep > li.open .plusBtn {transform: rotate(45deg); opacity: 1;}
	header .navBox .dep > li.open .plusBtn:before, header .navBox .dep > li.open .plusBtn:after {opacity: 1;}
	header .navBox .dep2 {position: relative; left: 0; top: 0; width: 100%; transform: none; padding: 1.5rem .5rem 1rem; margin-top: .5rem; box-sizing: border-box;}
	header .navBox .dep2:after {content: ""; position: absolute; width: 0; height: 2px; background: var(--yellow); top: 0; left: 50%; transform: translateX(-50%); transition: .5s ease;}
	header .navBox .dep > li.open .dep2 {display: block; animation: upMove 1s ease both;}
	header .navBox .dep > li.open .dep2:after {width: 1.6rem;}
	header .navBox .dep2 li:not(:last-child) {margin-bottom: 0;}
	header .navBox .dep2 a {text-align: center; font-size: 1.1rem; padding: .4rem 1rem; margin: 0; box-sizing: border-box; width: 100%;}
	header .navBox .bg {position: absolute; width: 100%; height: calc(100vh - 26rem); min-height: clamp(14rem, 32vw, 24rem); bottom: 0; left: 0; padding: 0 3%; box-sizing: border-box; justify-content: space-between; pointer-events: none;}
	header .navBox .bg img {width: 52%; height: 100%; object-fit: contain; object-position: bottom;}
	header .navBox .bg .text {text-align: right; padding-top: 6%; display: flex; flex-direction: column; gap: .6rem; margin-left: -6%; width: 60%;}
	header .navBox .bg .text .blue {font-size: clamp(2rem, 5.8vw, 2.3rem);}
	header .navBox .bg .text .yellow {font-size: clamp(1.5rem, 4.4vw, 1.7rem);}
	header.open .navBox .bg {display: flex;}
	header .langBox {gap: .9rem;}
	header .langBox .langBtn {flex-direction: row; gap: 4px;}
	header .langBox .langBtn .pc {display: none;}
	header .langBox .langBtn .mo {display: block;}
	header .langBox .langBtn .icon {width: 24px; height: 24px;}
}
@media screen and (max-width: 768px) {
	html {font-size: 16px;}
	header .inner {padding: 0 30px;}
}
@media screen and (max-width: 480px) {
	html {font-size: 15px;}
	footer .box .inner {flex-direction: column; gap: 2rem;}
	footer .box .inner .rightBox {gap: 1.5rem;}
}
@media screen and (max-width: 400px) {
	html {font-size: 14px;}
	header .inner {padding: 0 20px;}
}