@charset "utf-8";
:root {
	--box-shadow: 0 0 16px rgba(0, 0, 0, .05);
}



input::placeholder {color: rgba(51, 51, 51, 0.6);}
.icon {display: block; background-size: contain; background-repeat: no-repeat; background-position: center;}
.view-btn-type1 {position: relative; display: flex; gap: .9rem; align-items: center; font-size: .9rem; color: var(--brown);}
.view-btn-type1:not(.border) {padding: .5rem; margin: -.5rem;}
.view-btn-type1:not(.border):after {content: ""; position: absolute; width: 0; height: 100%; top: 0; left: 0; border: 1px solid transparent; box-sizing: border-box; transition: .5s ease;}
.view-btn-type1 .icon {flex: none; width: 8px; height: 16px; mask-image: url(../../images/ico-arrow-right.svg); background: var(--brown); 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;}
.view-btn-type1.border {padding: .6rem clamp(1rem, 1vw, 1.35rem); border: 1px solid var(--brown); width: 100%; justify-content: space-between; box-sizing: border-box;}
.view-btn-type1.border:after {content: ""; position: absolute; width: 100%; height: 100%; background: var(--brown); top: 0; left: 0; clip-path: circle(0% at 0 100%); z-index: -1; transition: .5s ease;}

.main {display: flex; height: clamp(38rem, calc(100vh - var(--header-height) - 7.3rem), calc(100vh - var(--header-height) - 7.3rem));}
.main .left-box {position: sticky; top: 0; left: 0; padding-top: var(--header-height); height: calc(100% + var(--header-height)); width: 100%; margin-top: calc(-1 * var(--header-height)); box-sizing: border-box;}
.main .left-box .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; animation: main_left_bg 1.5s cubic-bezier(1, 0.66, 0.19, 1.8) both}
@keyframes main_left_bg {0% {clip-path: circle(35% at 50% 100%); opacity: 0} 100% {clip-path: circle(150% at 50% 100%); opacity: 1}}
.main .left-box .bg img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;}
.main .left-box .text-wrap {width: 100%; height: 100%; padding: 4rem var(--inner); padding-top: 8vh; box-sizing: border-box; display: flex; flex-direction: column; gap: clamp(10px, 4vh, 48px); align-items: center;}
.main .left-box .text-wrap .title-box {display: flex; flex-direction: column; gap: 1.35rem; align-items: center; text-align: center;}
.main .left-box .text-wrap .title-box .title {font-family: 'Noto Serif KR'; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1;}
.main .left-box .text-wrap .title-box .text {color: rgba(51, 51, 51, 0.6); font-weight: 600;}
.main .left-box .text-wrap .bot-box {max-width: 482px; width: 100%; display: flex; flex-direction: column; gap: 1.35rem;}
.main .left-box .text-wrap .bot-box .search-box {position: relative; width: 100%;}
.main .left-box .text-wrap .bot-box .search-box input {background: rgba(255, 255, 255, .6); width: 100%; height: 3.5rem; box-sizing: border-box; padding: .9rem 1.35rem; border-radius: 999px; padding-right: calc(1.35rem + 1.7rem); transition: .5s ease; border: 2px solid transparent;}
.main .left-box .text-wrap .bot-box .search-box input:focus {border-color: var(--brown); box-shadow: 0 0 2px var(--brown);}
.main .left-box .text-wrap .bot-box .search-box .search-btn {position: absolute; top: 50%; transform: translateY(-50%); right: 1.35rem; width: 1.77rem; height: 1.77rem; font-size: 1rem; mask-image: url(../../images/search-rounded.svg); background: var(--brown); mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../../images/search-rounded.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;}
.main .left-box .text-wrap .bot-box .list {display: flex; gap: 8%; justify-content: center;}
.main .left-box .text-wrap .bot-box .list li {position: relative;}
.main .left-box .text-wrap .bot-box .list li:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; padding: .5rem; border-radius: 5px; background: linear-gradient(0deg, #ffffff9e, transparent); z-index: -1; opacity: 0; transition: .5s ease;}
.main .left-box .text-wrap .bot-box .list li a {display: flex; flex-direction: column; align-items: center; gap: .6rem;}
.main .left-box .text-wrap .bot-box .list li a .icon {width: clamp(2rem, 4vw, 2.7rem); height: clamp(2rem, 4vw, 2.7rem);}
.main .left-box .text-wrap .bot-box .list li a .name {word-break: keep-all; text-align: center; line-height: 1.2; font-size: .9rem; font-weight: 600;}
.main .right-box {width: var(--header-right-width); flex: none; display: flex; flex-direction: column;}
.main .right-box > * {padding-left: var(--header-side-padding); padding-right: var(--header-side-padding); display: flex; align-items: center; padding-top: 1rem; padding-bottom: 1rem;}
.main .right-box .list-box {flex: 39;}
.main .right-box .list-box .list {display: flex; width: 100%;}
.main .right-box .list-box .list li {width: 100%;}
.main .right-box .list-box .list li a {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .9rem;}
.main .right-box .list-box .list .icon {width: clamp(3.8rem, 7vw, 4.4rem); height: clamp(3.8rem, 7vw, 4.4rem); display: flex; align-items: center; justify-content: center; transition: .5s ease; border-radius: 50%; background: linear-gradient(118deg, #F2EAD0 66%, #8c433259); background-position: left center; background-size: 200% 100%;}
.main .right-box .list-box .list .icon svg {width: clamp(2rem, 4vw, 2.7rem); height: clamp(2rem, 4vw, 2.7rem);}
.main .right-box .list-box .list .name {word-break: keep-all; font-size: .9rem; font-weight: 500; text-align: center;}
.main .right-box .num-list {border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); flex: 44;}
.main .right-box .num-list .list {display: flex; width: 100%;}
.main .right-box .num-list .list li {width: 100%; display: flex; flex-direction: column; gap: 1.35rem; align-items: center; text-align: center;}
.main .right-box .num-list .list li:not(:last-child) {border-right: 1px solid var(--border-color);}
.main .right-box .num-list .list li .num-box {display: flex; align-items: flex-end; gap: .3rem; transition: .5s ease;}
.main .right-box .num-list .list li .num-box .small {color: rgba(51, 51, 51, 0.6); font-weight: 600; line-height: 1.5;}
.main .right-box .num-list .list li .num-box .num {font-size: clamp(1.6rem, 2.5vw, 2rem); line-height: 1;}
.main .right-box .num-list .list li .num-box .num strong {letter-spacing: -1px;}
.main .right-box .num-list .list li .view-btn-type1 {width: 90%; margin: 0 auto;}
.main .right-box .antiquity-wrap {display: flex; flex: 86; padding-top: 1.5rem; padding-bottom: 1.5rem;}
.main .right-box .antiquity-wrap > * {max-height: 310px;}
.main .right-box .antiquity-wrap .title-wrap {position: relative; width: 9.4rem; flex: none; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.main .right-box .antiquity-wrap .title-wrap .top-box {display: flex; flex-direction: column; gap: .9rem;}
.main .right-box .antiquity-wrap .title-wrap .title {font-weight: 600; font-size: clamp(1.7rem, 2.5vw, 2rem);}
.main .right-box .antiquity-wrap .title-wrap .text {font-size: .9rem; color: rgba(51, 51, 51, 0.8);}
.main .right-box .antiquity-wrap .line {width: 1px; height: 100%; flex: none; display: block; margin: 0 7%; background: var(--border-color);}
.main .right-box .antiquity-wrap .antiquity-swiper {width: 100%; height: 100%;}
.main .right-box .antiquity-wrap .antiquity-swiper .swiper-wrapper {height: 100%;}
.main .right-box .antiquity-wrap .antiquity-swiper .swiper-slide {width: auto; display: flex; flex-direction: column; gap: 1.1rem; align-items: center; justify-content: center; height: 100%; padding: 3.7vh 0; box-sizing: border-box; transition: .5s ease;}
.main .right-box .antiquity-wrap .antiquity-swiper .swiper-slide .img {width: clamp(140px, 18vw, 230px); aspect-ratio: 23 / 19;}
.main .right-box .antiquity-wrap .antiquity-swiper .swiper-slide .img img {transition: .5s ease;}
.main .right-box .antiquity-wrap .antiquity-swiper .swiper-slide .name {word-break: keep-all; font-weight: 500; font-size: 1.1rem; text-align: center;}


.main .left-box .text-wrap .title-box > * {animation: clip_path_height_up 1s .1s ease both;}
.main .left-box .text-wrap .title-box > *:nth-child(2) {animation-delay: .2s}
.main .left-box .text-wrap .bot-box .search-box {animation: clip_path_height 1s .2s ease both;}
.main .left-box .text-wrap .bot-box .list li:first-child {animation: fadeRight 1s .3s ease both;}
.main .left-box .text-wrap .bot-box .list li:nth-child(2) {animation: fadeIn 1s .3s ease both;}
.main .left-box .text-wrap .bot-box .list li:nth-child(3) {animation: fadeLeft 1s .3s ease both;}
.main .right-box > div.aos-animate .list li {animation: fadeUp 1s ease both;}
.main .right-box .antiquity-wrap.aos-animate .title-wrap .title {overflow: hidden;}
.main .right-box .antiquity-wrap.aos-animate .title-wrap .title span {animation: fadeUp_100 1s ease both;}
.main .right-box .antiquity-wrap.aos-animate .title-wrap .text {animation: fadeIn 1s .2s ease both;}
.main .right-box .antiquity-wrap.aos-animate .title-wrap .view-btn-type1 {animation: clip_path_width 1s .2s ease both;}
.main .right-box .antiquity-wrap.aos-animate .antiquity-swiper .swiper-slide {animation: clip_path_width 1s .2s ease both;}


@media screen and (min-width: 1025px) {
	.view-btn-type1:not(.border):hover:after {width: 100%; border-color: var(--brown);}
	.view-btn-type1.border:hover {color: #fff;}
	.view-btn-type1.border:hover .icon {background-color: #fff;}
	.view-btn-type1.border:hover:after {clip-path: circle(150% at 0 100%);}

	.main .right-box .antiquity-wrap {padding-right: 0;}
	.main .left-box .text-wrap .bot-box .list li:hover:after {opacity: 1;}
	.main .left-box .text-wrap .bot-box .list li:hover a .icon svg path {animation: emblem_draw_move 6s ease both infinite alternate;}
	.main .left-box .text-wrap .bot-box .list li:hover a .icon svg path.fill {animation-name: emblem_fill_move;}
	.main .left-box .text-wrap .bot-box .list li:hover a .name {animation: clip_path_height 1s ease both;}
	@keyframes emblem_draw_move {0% {stroke-dasharray: 0 300;} 70%, 100% {stroke-dasharray: 300 0;}}
	@keyframes emblem_fill_move {0% {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);} 40%, 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
	.main .right-box .list-box .list:has(li:hover) li:not(:hover) > a {opacity: .4;} 
	.main .right-box .list-box .list li:hover .icon {background-position: right center; box-shadow: inset 5px 5px 10px #ffffff95, inset -5px -5px 10px #8c43323b;}
	.main .right-box .list-box .list li:hover .icon svg {animation: scaleMove 1s ease both;}
	.main .right-box .list-box .list li:hover a .name {animation: clip_path_height 1s ease both;}
	.main .right-box .num-list:has(li:hover) li:not(:hover) > * {opacity: .4;}
	.main .right-box .antiquity-wrap .antiquity-swiper:has(.swiper-slide:hover) .swiper-slide:not(:hover) {opacity: .4;}
	.main .right-box .antiquity-wrap .antiquity-swiper .swiper-slide:hover .img img {filter: drop-shadow(3px 3px 7px rgba(0, 0, 0, .4));}
	.main .right-box .antiquity-wrap .antiquity-swiper .swiper-slide:hover .name {animation: clip_path_height 1s ease both;}
}

@media screen and (max-width: 1024px) {
	.main {flex-direction: column; height: auto;}
	.main .left-box {position: relative;}
	.main .left-box .text-wrap {padding: 3rem var(--inner) clamp(16rem, 39vw, 19rem);}
	.main .right-box {width: 100%;}
	.main .right-box > * {padding-top: 2rem; padding-bottom: 2rem;}
	.main .right-box .antiquity-wrap {flex-direction: column; padding-top: 2.5rem; padding-bottom: 2.5rem;}
	.main .right-box .antiquity-wrap .title-wrap {flex-direction: row; width: 100%;}
	.main .right-box .antiquity-wrap .line {display: none;}
	.main .right-box .antiquity-wrap .antiquity-swiper {height: auto; margin-right: calc(-1 * var(--header-side-padding)); width: calc(100% + var(--header-side-padding));}
	.main .right-box .antiquity-wrap .antiquity-swiper .swiper-wrapper {gap: 5%;}
	.main .right-box .antiquity-wrap .antiquity-swiper .swiper-slide .img {width: clamp(130px, 29vw, 230px);}
}

@media screen and (max-width: 640px) {
	.main .right-box .num-list .list {flex-direction: column; gap: 2rem;}
	.main .right-box .num-list .list li {flex-direction: row; justify-content: space-between; max-width: 26rem; margin: 0 auto;}
	.main .right-box .num-list .list li:not(:last-child) {border-right: none;}
	.main .right-box .num-list .list li .view-btn-type1 {max-width: 10rem; width: 40%; margin: 0;}

}

@media screen and (max-width: 480px) {
	.main .right-box .list-box .list {flex-wrap: wrap; gap: 2rem 0; justify-content: center;}
	.main .right-box .list-box .list li {width: calc(100% / 3);}

}

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

}