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

/* 공통 ----------------------------------------------------- */
.container {width: 100%; box-sizing: border-box;}
.container .linkBtn {position: relative; width: 100%; height: 3.5rem; background: var(--black); color: #fff; border-radius: .5rem; padding: 0 .9rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; box-sizing: border-box; transition: .5s ease; overflow: hidden;}
.container .linkBtn span {position: relative; z-index: 1; transition: .5s ease;}
.container .buttonBox {display: flex; justify-content: space-between; gap: 2rem;}
.container .buttonBox > div {display: flex; gap: .5rem; width: 100%;}
.container .buttonBox > div:last-child {justify-content: flex-end;}
.container .roundBtn {background: var(--black); display: flex; align-items: center; justify-content: center; border-radius: 5rem; gap: .9rem; color: #fff; width: 11.1rem; height: 3.5rem; color: #fff; font-size: 1.1rem; transition: .5s ease;}
.container .roundBtn.blue {background: var(--blue)}
.container .roundBtn .icon {width: 1.35rem; height: 1.35rem; background-repeat: no-repeat; background-position: center; background-size: contain;}

/* 탭 ----------------------------------------------------- */
.container .tab_wrap .tab_box {display: none;}
.container .tab_wrap .tab_box.active {display: block; animation: upMove 1s ease both;}
.container .tab_list {position: relative;}
.container .tab_list .bg {position: absolute; height: 2px; background: var(--blue); transition: .5s ease}
.container .tab_list .bg.hover {opacity: .4;}
.container .tab_list .list {display: flex; flex-wrap: wrap; gap: 0 8px; margin-bottom: 4.4rem; justify-content: center;}
.container .tab_list .list li a {padding: .9rem; height: 100%; background: #fff; color: #999; transition: .5s ease; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-weight: 600; text-align: center; word-break: keep-all;}
.container .tab_list .list li.active a {color: var(--blue);}


/* 모달 ----------------------------------------------------- */
.modalCon {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 150;}
.modalCon.open {display: block; animation: fadeIn 1s ease both;}
.modalCon .bg {position: absolute; width: 100%; height: 100%; top: -100%; left: 0; background: rgba(0, 0, 0, .5); transition: .4s ease; backdrop-filter: blur(8px);}
.modalCon.open .bg {top: 0 !important;}
.modalCon .m-inner {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.modalCon .closeBtn {position: absolute; top: calc(100% + .9rem);; left: 50%; transform: translateX(-50%);}
.modalCon .closeBtn .icon {width: 32px; height: 32px; background: url(../../images/ico_close_white.svg) no-repeat center / contain; transition: .5s ease;}
.modalCon .boxWrap {position: relative; background: #fff; opacity: 0; transform: scale(.8); transition: .5s ease; max-width: 640px; width: 90%; border-radius: 1rem;}
.modalCon.open .boxWrap {opacity: 1; transition-delay: .3s; transform: none;}
.modalCon .boxWrap .box {width: 100%; height: 100%; padding: 1.5rem; box-sizing: border-box;  height: auto; overflow-y: auto; max-height: calc(90vh - 4rem);}
.modalCon .boxWrap .box .clickBtn {width: 5.5rem; height: 2.6rem; border-radius: .9rem; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; transition: .5s ease;}
.comingsoonModal .boxWrap {max-width: 400px; background: var(--blue); color: #fff; border-radius: 1.7rem;}
.comingsoonModal .boxWrap .box {display: flex; flex-direction: column; gap: 1.35rem; align-items: center; text-align: center; padding: 1.7rem 30px; position: relative;}
.comingsoonModal .boxWrap .box .img {max-width: 160px; width: 80%;}
.comingsoonModal .boxWrap .box .img img {opacity: 0;}
.comingsoonModal.open .boxWrap .box .img img {animation: scaleMove 1s .1s ease both;}
.comingsoonModal .boxWrap .box .textBox {position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem;}
.comingsoonModal .boxWrap .box .textBox .title {font-size: 1.35rem; font-weight: 600; color: var(--yellow);}
.comingsoonModal .boxWrap .box .textBox .text {font-size: .9rem; font-weight: 500;}
.comingsoonModal.open .boxWrap .box .textBox {animation: upMove 1s .1s ease both;}
.comingsoonModal.open .boxWrap .box .clickBtn {animation: scaleMove 1s .3s ease both;}

/* 체크박스 */
.container .checkBox label {display: flex; align-items: center; gap: 8px;}
.container .checkBox:has(.small) input {flex: none;}
.container .checkBox input {position: relative; width: 18px; height: 18px; border-radius: 4px; border: 1px solid #DDDDDD; -webkit-appearance: none; transition: .5s ease;}
.container .checkBox input:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: url(../../images/ico_checkbox_check_white.svg) no-repeat center / contain; opacity: 0; transition: .5s ease;}
.container .checkBox input:checked {background: var(--blue); border-color: var(--blue);}
.container .checkBox input:checked:after {opacity: 1;}
.container .checkBox label small {color: #666666; font-size: .9rem; font-weight: 500;}
.container .checkBox.white input {background-image: url(../../images/ico_checkbox_white.svg);}
.container .checkBox.white input:after {background-image: url(../../images/ico_checkbox_check_white.svg);}
.container .checkBox.white label small {color: #fff;}


/* 메인 ----------------------------------------------------- */
.main header:not(.open, .scroll) .navBox a {color: #fff;}
.main header:not(.open, .scroll) .inner h1 img {content: url(../../images/logo_white.svg);}
.main header:not(.open, .scroll) .sitemapBtn span {background: #fff;}
.main header:not(.open, .scroll) .langBox .langBtn p {color: #fff;}
.main .visual {position: relative;}
.main .visual .bgBox {position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
.main .visual .bgBox .bg {width: 100%; height: 100%; object-fit: cover;}
.main .visual .bgBox > *:not(.bg) {position: absolute; z-index: 1;}
.main .visual .bgBox .light {mix-blend-mode: screen; left: 23%; top: 0; width: clamp(450px, 58vw, 857px); animation: main_lightMove 10s ease both infinite alternate;}
@keyframes main_lightMove {0%, 60% {opacity: 0;} 20%, 50%, 70%, 100% {opacity: 1;}} 
.main .visual .bgBox .bird {bottom: 0; left: 17%; width: clamp(0px, 48vw, 857px); animation: main_birdMove 1s .1s cubic-bezier(0.4, 0.11, 0.57, 1.02) both;}
@keyframes main_birdMove {0% {transform: translate(-10%, 10%) scale(.8) skewX(3deg); opacity: 0;} 100% {transform: none; opacity: 1;}}
.main .visual .bird img {animation: main_birdMove2 3s 1s linear both infinite alternate;}
@keyframes main_birdMove2 {40% {transform: none;} 80%, 100% {transform: skewX(2deg) translate(0%, 4%) scale(.95)}}
.main .visual .bgBox .img {bottom: -13%; left: 11%; width: clamp(0px, 21vw, 383px); animation: main_imgMove 1s cubic-bezier(0.4, 0.11, 0.57, 1.02) both;}
@keyframes main_imgMove {0% {transform: translateY(-20px) scale(.8); opacity: 0;} 100% {transform: none; opacity: 1;}}
.main .visual .bgBox .img img {animation: main_imgMove2 5s 1.3s linear infinite;}
@keyframes main_imgMove2 {50% {transform: none;} 80% {transform: translateY(10px);}}
.main .visual .inner {position: relative; z-index: 1; color: #fff; padding-top: clamp(10rem, 23vw, 18rem); padding-bottom: clamp(8rem, 20vw, 15.5rem); display: flex; flex-direction: column; align-items: flex-end; text-align: right;}
.main .visual .inner .text1 {font-size: clamp(1.2rem, 3.8vw, 1.35rem); font-weight: 600;}
.main .visual .inner .title {font-size: clamp(3rem, 12vw, 72px); line-height: 130%; margin-top: 1.35rem;}
.main .visual .inner .text2 {font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--yellow); margin-top: 1.35rem; line-height: 150%;}
.main .visual .inner .text3 {font-size: clamp(1.3rem, 4.5vw, 1.7rem); font-weight: 600; margin-top: 1.7rem; display: flex; flex-direction: column; gap: .5em;}
.main .visual .inner > * {animation: upMove 1.5s ease both;}
.main .section .titleBox.type1 {display: flex; align-items: center; text-align: center; flex-direction: column; gap: 1.35rem; line-height: 1; color: #fff;}
.main .section .titleBox.type1 .topText {font-size: 1.35rem; font-weight: 700;}
.main .section .titleBox.type1 .title {font-size: clamp(2rem, 6vw, 2.6rem); word-break: keep-all;}
.main .aos-animate .titleBox.type1 > * {animation: upMove 1s ease both;}
.main .sec02 {padding: 4.4rem 0;}
.main .sec02 .inner {display: flex; flex-wrap: wrap; gap: 4.4rem 3.5%;}
.main .sec02 .inner .newsBox {width: 31%; display: flex; flex-direction: column; gap: .9rem; line-height: 1;}
.main .sec02 .inner .newsBox .titleBox {display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-bottom: 1.35rem; border-bottom: 2px solid;}
.main .sec02 .inner .newsBox.aos-animate .titleBox {animation: upMove 1s ease both;}
.main .sec02 .inner .newsBox .titleBox .title {font-size: 1.7rem; color: var(--blue);}
.main .sec02 .inner .newsBox .titleBox .moreBtn {position: relative;}
.main .sec02 .inner .newsBox .titleBox .moreBtn .icon {width: 1.7rem; height: 1.7rem; background: url(../../images/main_sec02_news_icon.svg) no-repeat center / contain; position: relative; z-index: 1;}
.main .sec02 .inner .newsBox .titleBox .moreBtn:before, .main .sec02 .inner .newsBox .titleBox .moreBtn:after {content: ""; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.89); border-radius: 50%; opacity: 0; transition: .5s ease; background: #F3C54B30; z-index: -1;}
.main .sec02 .inner .newsBox .titleBox .moreBtn:before {background: #F3C54B70; z-index: 0;}
.main .sec02 .inner .newsBox .list {display: flex; flex-direction: column;}
.main .sec02 .inner .newsBox .list li a {position: relative; padding: .9rem 0; display: flex; align-items: center; gap: .5rem;}
.main .sec02 .inner .newsBox.aos-animate .list li {animation: upMove 1s ease both;}
.main .sec02 .inner .newsBox .list li a:after {content: ""; position: absolute; width: 0; height: 100%; left: -1rem; border-radius: 1rem; background: linear-gradient(45deg, #3fa3ff45, transparent); z-index: -1; transition: .5s ease;}
.main .sec02 .inner .newsBox .list li a .title {width: 100%;}
.main .sec02 .inner .newsBox .list li a .title p {overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 500;}
.main .sec02 .inner .newsBox .list li a .date {color: #999; flex: none;}
.main .sec02 .inner .menuBox {width: calc(69% - 3.5%); display: flex; gap: 2%;}
.main .sec02 .inner .menuBox:has(.active) li.active {width: 45%;}
.main .sec02 .inner .menuBox:has(.active) li {width: 25.5%;}
.main .sec02 .inner .menuBox li {position: relative; width: 100%; transition: .5s ease;}
.main .sec02 .inner .menuBox li a {width: 100%; height: 100%; border-radius: 1.7rem; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center;}
.main .sec02 .inner .menuBox li.list01 a {background-image: url(../../images/main_sec02_menu_bg01.jpg);}
.main .sec02 .inner .menuBox li.list02 a {background-image: url(../../images/main_sec02_menu_bg02.jpg);}
.main .sec02 .inner .menuBox li.list03 a {background-image: url(../../images/main_sec02_menu_bg03.jpg);}
.main .sec02 .inner .menuBox li a > * {position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box;}
.main .sec02 .inner .menuBox li .title {font-size: clamp(1.2rem, 3.5vw, 1.7rem);}
.main .sec02 .inner .menuBox li .previewBox {display: flex; align-items: center; justify-content: center; color: #fff; opacity: 1; transition: .5s ease; pointer-events: all;}
.main .sec02 .inner .menuBox li.active .previewBox {opacity: 0; transform: translateY(20%); pointer-events: none;}
.main .sec02 .inner .menuBox li .detailBox {padding: 7.7%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 1rem; opacity: 0; transition: .5s ease; pointer-events: none;}
.main .sec02 .inner .menuBox li.active .detailBox {opacity: 1; pointer-events: all;}
.main .sec02 .inner .menuBox li .detailBox .topBox {display: flex; flex-direction: column; gap: .9rem; align-items: flex-end; text-align: right;}
.main .sec02 .inner .menuBox li .detailBox .topBox .title {color: var(--yellow);}
.main .sec02 .inner .menuBox li .detailBox .topBox .text {line-height: 150%; font-weight: 600; color: #fff;}
.main .sec02 .inner .menuBox li .detailBox .moreBtn {width: 2.6rem; height: 2.6rem; background: url(../../images/main_sec02_menu_more.svg) no-repeat center / contain; transition: .5s ease;}
.main .sec02 .inner .menuBox li .detailBox .moreBtn:before, .main .sec02 .inner .menuBox li .detailBox .moreBtn:after {content: ""; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.89); border-radius: 50%; opacity: 0; transition: .5s ease; background: #FFFFFF30; z-index: -1;}
.main .sec02 .inner .menuBox li .detailBox .moreBtn:before {background: #FFFFFF40; z-index: 0;}
.main .sec02 .inner .menuBox li.active .detailBox .moreBtn {animation: scaleMove 1s .2s ease both;}
.main .sec02 .inner .menuBox li.active .detailBox .topBox > * {animation: upMove 1s ease both;}
.main .sec02 .inner .historyBox {position: relative; width: 100%; border-radius: 1.7rem; overflow: hidden; padding: 2.6rem 4%; display: flex; flex-direction: column; align-items: center; gap: 2.6rem;}
.main .sec02 .inner .historyBox .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;}
.main .sec02 .inner .historyBox .bg:before, .main .sec02 .inner .historyBox .bg:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; backdrop-filter: blur(3px); transition: 1.5s .2s ease;}
.main .sec02 .inner .historyBox .bg:before {background: #ffffff40;}
.main .sec02 .inner .historyBox .bg:after {background: #ffffff70; transition-delay: .35s;}
.main .sec02 .inner .historyBox.aos-animate .bg:before, .main .sec02 .inner .historyBox.aos-animate .bg:after {height: 0;}
.main .sec02 .inner .historyBox .bg img {width: 100%; height: 100%; object-fit: cover;}
.main .sec02 .inner .historyBox .moreBtn {position: relative; width: 8rem; height: 2.6rem; border-radius: 3rem; border: 1px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500; overflow: hidden; z-index: 1; transition: .5s ease;}
.main .sec02 .inner .historyBox .moreBtn:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.3); width: 8rem; height: 8rem; opacity: 0; border-radius: 50%; transition: .5s cubic-bezier(0.75, 0.26, 0.25, 1); z-index: -1; background: #fff;}
.main .sec02 .inner .historyBox.aos-animate .moreBtn {animation: scaleMove 1s .3s ease both;}
.main .sec02 .inner .iconBox {display: flex; width: 100%;}
.main .sec02 .inner .iconBox li {width: 100%;}
.main .sec02 .inner .iconBox.aos-animate li {animation: upMove 1s ease both;}
.main .sec02 .inner .iconBox li a {width: 100%; display: flex; flex-direction: column; gap: .9rem; align-items: center;}
.main .sec02 .inner .iconBox li a .icon {position: relative; width: clamp(50px, 10vw, 160px); height: clamp(50px, 10vw, 160px);}
.main .sec02 .inner .iconBox li a .icon img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: .5s ease; overflow: hidden;}
.main .sec02 .inner .iconBox li a .icon .hover {position: absolute; top: 0; left: 0; width: 0; height: 100%; transition: .5s ease; overflow: hidden;}
.main .sec02 .inner .iconBox li a .icon .hover:after {content: ""; position: absolute; width: clamp(50px, 10vw, 160px); height: clamp(50px, 10vw, 160px); top: 0; left: 0; background-repeat: no-repeat; background-position: center; background-size: contain;}
.main .sec02 .inner .iconBox li:first-child a .icon .hover:after {background-image: url(../../images/main_sec02_menu_icon01_hover.svg);}
.main .sec02 .inner .iconBox li:nth-child(2) a .icon .hover:after {background-image: url(../../images/main_sec02_menu_icon02_hover.svg);}
.main .sec02 .inner .iconBox li:nth-child(3) a .icon .hover:after {background-image: url(../../images/main_sec02_menu_icon03_hover.svg);}
.main .sec02 .inner .iconBox li:nth-child(4) a .icon .hover:after {background-image: url(../../images/main_sec02_menu_icon04_hover.svg);}
.main .sec02 .inner .iconBox li:nth-child(5) a .icon .hover:after {background-image: url(../../images/main_sec02_menu_icon05_hover.svg);}
.main .sec02 .inner .iconBox li:nth-child(6) a .icon .hover:after {background-image: url(../../images/main_sec02_menu_icon06_hover.svg);}
.main .sec02 .inner .iconBox li a .text {position: relative; font-weight: 600; font-size: 1.1rem; text-align: center; overflow: hidden;}
.main .sec02 .inner .iconBox li a .text p {transition: .5s ease;}
.main .sec02 .inner .iconBox li a .text:after {content: attr(data-text); position: absolute; top: 100%; left: 0; text-align: center; color: var(--yellow); transition: .5s ease; z-index: 1;}
.main .sec03 {position: relative; padding: 6.6rem 0;}
.main .sec03 .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;}
.main .sec03 .bg img {width: 100%; height: 100%; object-fit: cover;}
.main .sec03 .inner {position: relative; display: flex; flex-direction: column; gap: 2.6rem;}
.main .sec03 .inner .videoBox {position: relative; cursor: pointer; border-radius: 1.7rem; overflow: hidden;}
.main .sec03 .inner .videoBox .thumbnail {position: relative;}
.main .sec03 .inner .videoBox .thumbnail:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.2rem; height: 2.2rem; background: url(../../images/ico_video_play_white.svg) no-repeat center / contain;}
.main .sec03 .inner .videoBox .thumbnail img {width: 100%; height: 100%; object-fit: cover; transition: .5s ease;}
.main .sec03 .inner .videoBox iframe {z-index: -1000; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main .sec03 .inner .videoBox.play .thumbnail {z-index: -1000;}
.main .sec03 .inner .videoBox.play iframe {z-index: 1;}
.main .sec04 {padding-top: 4.4rem; padding-bottom: 6.6rem;}
.main .sec04 .inner {margin-bottom: 3.5rem;}
.main .sec04 .inner .titleBox .topText {color: var(--blue);}
.main .sec04 .inner .titleBox .title {color: var(--yellow);}
.main .sec04 .marquee {display: flex; overflow: hidden; user-select: none; gap: 1.35rem; padding: 1rem 0; margin: -1rem 0;}
.main .sec04.aos-animate .marquee {animation: upMove 1s .2s ease both;}
.main .sec04 .marquee__group {flex-shrink: 0; display: flex; align-items: center; gap: clamp(10px, 2.2vw, 24px); min-width: 100%; animation: scroll-x 150s linear infinite;}
.main .sec04 .marquee__group figure {border-radius: .9rem; overflow: hidden; width: clamp(150px, 15vw, 300px);}
.main .sec04 .marquee__group figure img {transition: .5s ease;}
@keyframes scroll-x {0% {transform: translateX(0);} 100% {transform: translateX(calc(-100% - 1.35rem));}}


/* 서브 ---------------------------------------------- */
.sub .subTop {position: relative; color: #fff; overflow: hidden;}
.sub .subTop .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat;}
.sub .subTop .bg img {width: 100%; height: 100%; object-fit: cover;}
.sub .subTop .bg:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1d518170; mix-blend-mode :multiply;}
.sub .subTop .textBox {position: relative; padding-top: clamp(9rem, 22vw, 14rem); padding-bottom: clamp(4rem, 12vw, 7.7rem);}
.sub .subTop .textBox:after {content: ""; position: absolute; right: 0; top: 73%; transform: translateY(-50%); width: clamp(220px, 48vw, 553px); height: clamp(361px, 79vw, 907px); background: url(../../images/ico_bird_white.svg) no-repeat center / contain; transform-origin: left bottom; opacity: 0; animation: subTop_bird 2s ease both;}
@keyframes subTop_bird {0% {transform: scale(.9) translateY(-50%); opacity: 0;} 100% {transform: translateY(-50%); opacity: 1;}}
.sub .subTop .textBox .lnbBox {display: flex; flex-wrap: wrap; gap: 1.35rem 1.5rem; line-height: 1;}
.sub .subTop .textBox .lnbBox li {position: relative; font-size: clamp(1rem, 3vw,  1.35rem); font-weight: 600; animation: opacityMove 1s ease both;}
.sub .subTop .textBox .lnbBox li:first-child:after {content: ""; position: absolute; top: 50%; right: -1rem; transform: translateY(-50%); width: .6rem; height: 2px; background: #fff;}
.sub .subTop .textBox .lnbBox li.title {width: 100%; font-size: clamp(2.2rem, 6vw, 2.6rem); font-weight: 400; animation-name: upMove; animation-delay: .1s;}
.sub .subBody {padding: 2.6rem 0 6.6rem;}
.sub .subBody .pageTitle {color: #666; font-size: 1.35rem; font-family: 'Noto Serif KR', serif; animation: opacityMove 1s .1s ease both;}


/* 초대의 글  ----------------------------------------------------- */
.sub .invitation_letter .box {display: flex;  flex-wrap: wrap; gap: 3.5rem 6%;}
.sub .invitation_letter .box .imgBox {position: relative; width: 100%; border-radius: clamp(.5rem, 3vw, 1.7rem); overflow: hidden;}
.sub .invitation_letter .box .imgBox img {min-height: 8rem; width: 100%; object-fit: cover;}
.sub .invitation_letter .box .imgBox:before, .sub .invitation_letter .box .imgBox:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: 1s ease;}
.sub .invitation_letter .box .imgBox:before {background: #ffffff40;}
.sub .invitation_letter .box .imgBox:after {background: #ffffff70; transition-delay: .1s;}
.sub .invitation_letter .box .imgBox.aos-animate:before, .sub .invitation_letter .box .imgBox.aos-animate::after {height: 0;}
.sub .invitation_letter .box > *:not(.imgBox) {width: calc(50% - 3%);}
.sub .invitation_letter .box .titleBox {display: flex; flex-direction: column; gap: 1.7rem;}
.sub .invitation_letter .box .titleBox .text1 {font-size: clamp(2rem, 4.5vw, 2.6rem); line-height: 130%;}
.sub .invitation_letter .box .titleBox .text1 p {overflow: hidden; color: transparent; position: relative;}
.sub .invitation_letter .box .titleBox .text1 p:after {content: attr(data-text); color: var(--blue); white-space: nowrap; position: absolute; left: 0; top: 100%; transition: 1s ease;}
.sub .invitation_letter .box .titleBox .text1 p:last-child:after {transition-delay: .1s;}
.sub .invitation_letter .box .titleBox.aos-animate .text1 p:after {top: 0;}
.sub .invitation_letter .box .titleBox .text2 {font-size: clamp(1.3rem, 2.9vw, 1.7rem); font-weight: 700; line-height: 150%; word-break: keep-all; opacity: 0; transform: translateY(20px); transition: 1s .2s ease;}
.sub .invitation_letter .box .titleBox.aos-animate .text2 {transform: none; opacity: 1;}
.sub .invitation_letter .box .textBox {display: flex; flex-direction: column; gap: 1.35rem; line-height: 150%;}
.sub .invitation_letter .box .textBox .name {font-size: 1.35rem;}
.sub .invitation_letter .box .textBox.aos-animate p {animation: upMove 1s ease both;}


/* 축제개요 ----------------------------------------------------- */
.sub .festival_overview .box {display: flex; gap: 4.5%; align-items: flex-start;}
.sub .festival_overview .box .posterBox {max-width: 520px; width: 37%; flex: none; opacity: 0; transform: rotateY(180deg); transition: 1s ease;}
.sub .festival_overview .box .textBox {width: 100%; display: flex; flex-direction: column; gap: 1.7rem;}
.sub .festival_overview .box .textBox .title p {font-size: 2rem; font-weight: 700; overflow: hidden; color: transparent; position: relative;}
.sub .festival_overview .box .textBox .title p:after {content: attr(data-text); color: var(--blue); white-space: nowrap; position: absolute; left: 0; top: 100%; transition: 1s ease;}
.sub .festival_overview .box .textBox .textList {display: flex; flex-direction: column; gap: 1.7rem;}
.sub .festival_overview .box .textBox .textList > li {display: flex; flex-direction: column; gap: .9rem; line-height: 1;}
.sub .festival_overview .box .textBox .textList .tt1 {font-weight: 600; color: #999999;}
.sub .festival_overview .box .textBox .textList .tt2 {font-size: 1.35rem; display: flex; flex-direction: column; gap: .5rem; font-weight: 500;}
.sub .festival_overview .box .textBox .textList .tt2 .in {position: relative; padding-left: .7rem;}
.sub .festival_overview .box .textBox .textList .tt2 .in:before {content: ""; position: absolute; top: .35rem; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #333;}
.sub .festival_overview .box .textBox .textList .subject .tt2 .blue {font-weight: 700;}
.sub .festival_overview .box .textBox .textList .subject .tt2 .in {font-size: 1.1rem;}
.sub .festival_overview .box .textBox .textList .location .tt2 .in {color: #999999; font-size: 1.1rem;}
.sub .festival_overview .box .textBox .textList .location .tt2 .in:before {background: #999999;}
.sub .festival_overview .box .textBox .textList .detail .tt2 {font-size: 1rem;}
.sub .festival_overview .box .textBox .textList .detail .tt2 p {line-height: 150%;}
.sub .festival_overview .box .posterBox.aos-animate {opacity: 1; transform: none;}
.sub .festival_overview .box .textBox.aos-animate .title p:after {top: 0;}
.sub .festival_overview .box .textBox.aos-animate .textList > li {animation: upMove 1s ease both;}


/* 백제문화제 70년 ----------------------------------------------------- */
.sub .history .boxWrap {display: flex; flex-direction: column; gap: 4.4rem;}
.sub .history .boxWrap .box {display: flex; flex-direction: column; gap: 2.6rem;}
.sub .history .boxWrap .box .boxTitle {font-size: clamp(2rem, 4vw, 2.6rem); text-align: center;}
.sub .history .boxWrap .box.aos-animate .boxTitle {animation: rotateXMove 1s ease both;}
.sub .history .boxWrap .box .year {color: #BBBBBB; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: .9; transition: .5s ease;}
.sub .history .boxWrap .box .title {font-size: 1.7rem; font-weight: 700; line-height: 130%; transition: .5s ease;}
.sub .history .boxWrap .box .text {font-weight: 600; color: #999999; line-height: 150%; transition: .5s ease;}
.sub .history .boxWrap .box01 .list {display: flex; flex-wrap: wrap; gap: clamp(.6rem, 2vw, 1.7rem);}
.sub .history .boxWrap .box01 .list > li {position: relative; width: calc(100% / 3 - ((clamp(.6rem, 2vw, 1.7rem) / 3) * 2)); border-radius: clamp(1rem, 3vw, 1.7rem); display: flex; flex-direction: column; gap: 1.35rem; padding: clamp(1rem, 3vw, 1.7rem); border: 1px solid #DDDDDD; box-sizing: border-box; z-index: 1; overflow: hidden; opacity: 0; transform: translateY(20px); transition: .5s ease;}
.sub .history .boxWrap .box01 .list > li:after {content: ""; position: absolute; top: 50%; left: 50%; width: 30rem; height: 30rem; border-radius: 50%; background: var(--blue); transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: .5s ease; z-index: -1;}
.sub .history .boxWrap .box01 .list > li .top {line-height: 1; display: flex; justify-content: space-between; gap: 1rem;}
.sub .history .boxWrap .box01 .list > li .top .textWrap {display: flex; align-items: center; gap: .5rem clamp(1rem, 1.5vw, 32px); flex-wrap: wrap; justify-content: flex-end;}
.sub .history .boxWrap .box01 .list > li .top .text {display: flex; flex-direction: column; gap: 4px; color: #999999; align-items: flex-end; text-align: right; line-height: 100%;}
.sub .history .boxWrap .box01 .list > li .top .text strong {font-size: 1.1rem;}
.sub .history .boxWrap .box01 .list > li .top .text span {font-size: .9rem; font-weight: 500;}
.sub .history .boxWrap .box01 .list > li.show {transform: none; opacity: 1;}
.sub .history .boxWrap .box02 .list {display: flex; flex-direction: column; gap: 2.6rem;}
.sub .history .boxWrap .box02 .list > li {display: flex; flex-direction: column; gap: 1.35rem;}
.sub .history .boxWrap .box02 .list > li .imgBox {display: flex; flex-wrap: wrap; gap: clamp(.5rem, 2vw, 1.35rem);}
.sub .history .boxWrap .box02 .list > li .imgBox li {width: calc(100% / 4 - ((clamp(.5rem, 2vw, 1.35rem) / 4) * 3));}
.sub .history .boxWrap .box02 .list > li .imgBox li figure {border-radius: .9rem; overflow: hidden;}
.sub .history .boxWrap .box02 .list > li > *:not(.imgBox), .sub .history .boxWrap .box02 .list > li .imgBox li {opacity: 0;}
.sub .history .boxWrap .box02 .list > li.show > *:not(.imgBox) {animation: upMove 1s 1s ease both;}
.sub .history .boxWrap .box02 .list > li.show .imgBox li {animation: upMove 1s ease both;}


/* 포스터 ----------------------------------------------------- */
.sub .poster .board_list {display: flex; flex-wrap: wrap; gap: 2.6rem;}
.sub .poster .board_list li {width: calc(100% / 4 - ((2.6rem / 4) * 3)); display: flex; flex-direction: column; gap: .9rem; cursor: pointer; transition: .5s ease;}
.sub .poster .board_list li .poster {position: relative; padding-bottom: 144%; border-radius: 1rem; overflow: hidden;}
.sub .poster .board_list li .poster img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: .5s ease;}
.sub .poster .board_list li .poster:before {content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 0 4rem 4rem; border-color: transparent transparent var(--blue) transparent; bottom: -40%; right: -40%; z-index: 1; transition: .5s ease; opacity: 0;}
.sub .poster .board_list li .poster:after {content: "+"; position: absolute; width: 2.4rem; height: 3rem; bottom: -4rem; right: -4rem; color: #fff; z-index: 2; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; transition: .5s ease; opacity: 0; }
.sub .poster .board_list li .textBox {display: flex; flex-direction: column; gap: 2px;}
.sub .poster .board_list li .textBox .nameBox {font-size: 1rem;}
.sub .poster .board_list li .textBox .nameBox > * {display: inline; font-weight: 700;}
.sub .poster .board_list li .textBox .nameBox p {margin-right: .3rem; transition: .5s ease;}
.sub .poster .board_list li .textBox .nameBox .date {color: #999999;}
.sub .poster .posterModal .boxWrap {max-width: 720px;}
.sub .poster .posterModal .boxWrap .box {display: flex; gap: 1.35rem; padding: 4.5%;}
.sub .poster .posterModal .boxWrap .poster {flex: none; max-width: 324px; width: 49.5%; padding-bottom: 71.5%; position: relative;}
.sub .poster .posterModal .boxWrap .poster img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; border-radius: 1rem;}
.sub .poster .posterModal .boxWrap .textBox {width: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.sub .poster .posterModal .boxWrap .topBox {display: flex; flex-direction: column; gap: 1.7rem;}
.sub .poster .posterModal .boxWrap .nameBox {display: flex; flex-direction: column; gap: .9rem; line-height: 1;}
.sub .poster .posterModal .boxWrap .nameBox .name {font-size: 1.35rem; font-weight: 700; color: var(--blue);}
.sub .poster .posterModal .boxWrap .nameBox .date {color: #999999; font-size: .9rem;}
.sub .poster .posterModal .boxWrap .textBox {display: flex; flex-direction: column; gap: 1.1rem;}
.sub .poster .posterModal .boxWrap .textBox li {display: flex; flex-direction: column; gap: .3rem;}
.sub .poster .posterModal .boxWrap .textBox li .title {color: #999999; flex: none; font-weight: 600; font-size: .9rem;}
.sub .poster .posterModal .boxWrap .textBox li .text {line-height: 1.4; font-weight: 500;}
.sub .poster .posterModal .boxWrap .textBox li .text strong {font-weight: 700;}


/* 금동대향로 캐릭터 ----------------------------------------------------- */
.sub .character .inner {display: flex; flex-direction: column; gap: 4.4rem;}
.sub .character .inner .tab_list .list {margin-bottom: 0;}
.sub .character .topTitle {display: flex; flex-direction: column; align-items: center; gap: 1.7rem; text-align: center; line-height: 1;}
.sub .character .topTitle .title {font-size: 2.6rem;}
.sub .character .topTitle .name {display: flex; align-items: center; gap: .9rem; opacity: 0;}
.sub .character .topTitle .title.aos-animate + .name {animation: upMove 1s .1s ease both;}
.sub .character .topTitle .name li p {border-radius: 5rem; border: 1px solid #333; padding: .8rem 1.7rem; display: flex; align-items: center; justify-content: center; color: #333; font-size: 1.35rem; font-weight: 500;}
.sub .character .boxTitle {color: #33333320; position: relative; overflow: hidden; font-size: 1.7rem; text-align: center; font-weight: 700; text-align: center;}
.sub .character .boxTitle:after {content: attr(data-text); text-align: center; position: absolute; top: 100%; left: 0; color: #333; transition: 1s ease;}
.sub .character .box.aos-animate .boxTitle:after {top: 0;}
.sub .character .box {display: flex; flex-direction: column; gap: 1.7rem; align-items: center;}
.sub .character .box .list {display: flex; width: 100%;}
.sub .character .box .roundBtn .icon {background-image: url(../../images/ico_down_white.svg)}
.sub .character .basic .list {gap: 2%;}
.sub .character .basic .list li {width: 100%; background: #F5F5F5; border-radius: 1.7rem; padding: 1.7rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2.6rem;}
.sub .character .basic .list.aos-animate li:first-child {animation: leftMove 1s ease both;}
.sub .character .basic .list.aos-animate li:last-child {animation: rightMove 1s ease both;}
.sub .character .basic .list li .text {font-size: 1.35rem; font-weight: 500;}
.sub .character .basic .aos-animate + .roundBtn {animation: scaleMove 1s .1s ease both;}
.sub .character .charac .list {gap: 4.5%; align-items: flex-end; justify-content: center;}
.sub .character .charac .list.aos-animate li {animation: upMove 1s ease both;}
.sub .character .charac .botText {color: #999; font-weight: 600; text-align: center; line-height: 1.5; opacity: 0;}
.sub .character .charac .botText .blue {font-weight: 700;}
.sub .character .charac .aos-animate + p {animation: upMove 1s ease both;}
.sub .character .charac .aos-animate + p + .roundBtn {animation: scaleMove 1s .1s ease both;}
.sub .character .copyrightBox {background: #f5f5f5; text-align: center; padding: 1.7rem; box-sizing: border-box; gap: 1rem 1.7rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 1.5;}


@media screen and (min-width: 1025px) {
	.container .tab_list .list li:not(.active) a:hover {color: #1D518160;}
	.container .linkBtn:hover {box-shadow: inset 0 -4px 0px #ffffff70, 0 5px 5px #00000030;}
	.container .roundBtn:hover {box-shadow: inset 0 -4px 0px #ffffff70, 0 5px 5px #00000030;}
	.container .roundBtn.blue:hover {box-shadow: inset 0 -4px 0px #ffffff70, 0 5px 5px #1D518130;}
	.modalCon .closeBtn .icon:hover {transform: rotate(90deg);}
	.modalCon .boxWrap .box .clickBtn:hover {background: #fff; color: var(--blue); -webkit-text-stroke: .3px; box-shadow: inset 0 -3px #1D518140, 0 0 5px #ffffff60;}

	.main .sec02 .inner .newsBox .titleBox .moreBtn:hover:before {animation: moreBtnMove1 2s ease both infinite;}
	.main .sec02 .inner .newsBox .titleBox .moreBtn:hover:after {animation: moreBtnMove4 2s .1s ease both infinite;}
	.main .sec02 .inner .newsBox .list li a:hover {color: var(--blue);}
	.main .sec02 .inner .newsBox .list li a:hover:after {width: calc(100% + 2rem);}
	.main .sec02 .inner .menuBox li:hover .detailBox .moreBtn {background-image: url(../../images/main_sec02_menu_more_hover.svg);}
	.main .sec02 .inner .menuBox li:hover .detailBox .moreBtn:before {animation: moreBtnMove3 2s ease both infinite;}
	.main .sec02 .inner .menuBox li:hover .detailBox .moreBtn:after {animation: moreBtnMove6 2s .1s ease both infinite;}
	.main .sec02 .inner .historyBox .moreBtn:hover {color: var(--black);}
	.main .sec02 .inner .historyBox .moreBtn:hover:after {transform: translate(-50%, -50%); opacity: 1;} 
	.main .sec02 .inner .iconBox.hover li:not(.hover) a {opacity: .3;}
	.main .sec02 .inner .iconBox li:hover a .icon .hover {width: 100%;}
	.main .sec02 .inner .iconBox li:hover a .text p {transform: translateY(100%); opacity: 0;}
	.main .sec02 .inner .iconBox li:hover a .text:after {top: 0;}
	.main .sec03 .inner .videoBox:hover .thumbnail img {filter: blur(3px); transform: scale(1.05);}
	.main .sec04 .marquee:hover .marquee__group {animation-play-state: paused;}
	.main .sec04 .marquee__group figure:hover img {transform: scale(1.05);}

	.sub .history .boxWrap .box01 .list > li:hover:after {transform: translate(-50%, -50%); opacity: 1;}
	.sub .history .boxWrap .box01 .list > li:hover .year {color: var(--yellow); animation: upMove 1s ease both;}
	.sub .history .boxWrap .box01 .list > li:hover .top .text {animation: rightMove 1s ease both;}
	.sub .history .boxWrap .box01 .list > li:hover .title {color: #fff; animation: upMove 1s .1s ease both;}
	.sub .history .boxWrap .box01 .list > li:hover .text {color: #ffffff50; animation: upMove 1s .2s ease both;}

	/* 포스터 ----------------------------------------------------- */
	.sub .poster .board_list.hover li:not(.hover) {opacity: .3;}
	.sub .poster .board_list li a:hover .poster:before, .sub .poster .board_list li a:hover .poster:after {opacity: 1; bottom: 0; right: 0;}
	.sub .poster .board_list li a:hover .poster img {transform: scale(1.05);}
	.sub .poster .board_list li a:hover .textBox .nameBox p {color: var(--blue);}
}

@media screen and (max-width: 1024px) {
	/* 메인 ----------------------------------------------------- */
	.main .visual .bgBox .img {left: -1%;}
	.main .visual .bgBox .bird {left: 5%;}
	.main .sec02 .inner .newsBox, .main .sec02 .inner .menuBox {width: 100%;}
	.main .sec02 .inner .menuBox {height: clamp(200px, 30vw, 300px);}

	.sub .invitation_letter .box {flex-direction: column;}
	.sub .invitation_letter .box > *:not(.imgBox) {width: 100%;}

	.sub .festival_overview .box {flex-direction: column; gap: 3rem; align-items: center;}
	.sub .festival_overview .box .posterBox {max-width: 480px; width: 80%;}

	.sub .history .boxWrap .box01 .list > li {width: calc(100% / 2 - ((clamp(.6rem, 2vw, 1.7rem) / 2) * 1));}

	/* 포스터 ----------------------------------------------------- */
	.sub .poster .board_list li {width: calc(100% / 3 - ((2.6rem / 3) * 2));}
	.sub .poster .posterModal .boxWrap .box {padding: 2rem;}
	.sub .poster .posterModal .boxWrap .poster {width: 40%; padding-bottom: 60%;}
	.sub .poster .posterModal .boxWrap .textBox {padding: 4% 0;}
}

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

@media screen and (max-width: 768px) {
	.container .checkBox input[type="radio"] + small {font-size: 1.08rem;}
	.container .modalCon .boxWrap .box .buttonBox .clickBtn {flex: auto;}

	/* 메인 ----------------------------------------------------- */
	.main .visual .bgBox .left {width: 40%;}
	.main .visual .bgBox .right {width: 37%;}
	.main .visual .bgBox .bg {object-position: 61% center;}


	/* 포스터 ----------------------------------------------------- */
	.sub .poster .board_list {gap: 2.2rem 1.5rem}
	.sub .poster .board_list li {width: calc(100% / 3 - ((1.5rem / 3) * 2));}
	.sub .poster .board_list li .textBox .date {font-size: .9rem;}
	.sub .poster .posterModal .boxWrap .box {flex-direction: column; gap: 1rem;}
	.sub .poster .posterModal .boxWrap .poster {width: 200px; height: 288px; padding: 0; margin: 0 auto;}
	.sub .poster .posterModal .boxWrap .textBox {padding: 0;}
}

@media screen and (max-width: 640px) {
	/* 메인 ----------------------------------------------------- */
	.main .visual .inner {padding-bottom: 16rem;}
	.main .visual .bgBox .bird {width: clamp(224px, 70vw, 307px);}
	.main .visual .bgBox .img {width: clamp(105px, 33vw, 134px);}
	.main .sec02 .inner .menuBox {flex-direction: column; gap: 1rem; height: auto;}
	.main .sec02 .inner .menuBox li {height: 15rem;}
	.main .sec02 .inner .menuBox:has(.active) li.active, .main .sec02 .inner .menuBox:has(.active) li {width: 100%;}
	.main .sec02 .inner .menuBox li .previewBox {display: none;}
	.main .sec02 .inner .menuBox li .detailBox {padding: 2rem; opacity: 1 !important;}
	.main .sec02 .inner .iconBox {flex-wrap: wrap; gap: clamp(1.5rem, 9vw, 3rem) 0;}
	.main .sec02 .inner .iconBox li {width: calc(100% / 3);}

	.sub .history .boxWrap .box01 .list > li {width: 100%;}
	.sub .history .boxWrap .box02 .list > li .imgBox li {width: calc(100% / 2 - ((clamp(.5rem, 2vw, 1.35rem) / 2) * 1));}

	/* 포스터 ----------------------------------------------------- */
	.sub .poster .board_list {gap: 2.2rem 1rem}
	.sub .poster .board_list li {width: calc(100% / 2 - .5rem);}
	.sub .poster .board_list li .textBox .date {font-size: .8rem;}
}

@media screen and (max-width: 480px) {
	/* 탭 ----------------------------------------------------- */
	.container .tab_list .list {max-width: 420px; width: 100%;}
	.container .tab_list .list li {width: calc(100% / 4 - ((8px / 4) * 3));}
	.container .tab_list .list li a {padding: .9rem 5px; width: 100%;}
}

@media screen and (max-width: 400px) {
	.inner {padding-left: 20px; padding-right: 20px;}
	.sub .subTop .textBox:after {right: -10px;}
	.container .tab_list .list li {width: calc(100% / 3 - ((8px / 3) * 2));}
}