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

@keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;}}

/* 공통 ----------------------------------------------------- */
.container {width: 100%; box-sizing: border-box;}
.container .linkBtn {position: relative; width: 100%; height: 2.6rem; font-size: .9rem; background: var(--black); color: #fff; border-radius: .6rem; 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 .linkBtn:after {content: ""; position: absolute; width: 3rem; height: 3rem; bottom: -3rem; border-radius: 50%; background: #7ab3d1; left: 50%; transform: translateX(-50%); transition: .5s ease; transform-origin: left center;}
.container .linkBtn .icon {position: relative; z-index: 1;}
.container .linkBtn .icon i {width: 1.35rem; height: 1.35rem; position: relative; z-index: 1; display: block;}
.container .linkBtn .icon:after {content: ""; position: absolute; width: 2rem; height: 2rem; border-radius: 50%; background: #4987a7; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; z-index: -1; transition: .5s ease;}
.container .linkBtn.pink {background: var(--mainColor3);}
.container .linkBtn.white {border: 1px solid var(--black); background: #fff; color: var(--black);}
.container .linkBtn.pink.white {border: 1px solid var(--mainColor3); background: #fff; color: var(--mainColor3);}
.container .downBtn .icon i {background: url(../../images/ico_down_white.svg) no-repeat center / contain;}
.container .deletBtn .icon i {background: url(../../images/ico_delet_white.svg) no-repeat center / contain;}
.container .editBtn .icon i {background: url(../../images/ico_edit_white.svg) no-repeat center / contain;}
.container .editBtn.pink .icon i {background-image: url(../../images/ico_edit_pink.svg);}
.closeBtn .icon {width: 24px; height: 24px; background: url(../../images/ico_close_white.svg) no-repeat center / contain; transition: .5s ease;}
.container .buttonWrap {display: flex; justify-content: space-between; gap: 2rem;}
.container .buttonWrap > * {display: flex; gap: .5rem; width: 100%;}
.container .buttonWrap > *:last-child {justify-content: flex-end;}
.container .buttonWrap .linkBtn {max-width: 220px; height: 3.3rem; font-size: 1.1rem;}
.container .swiper-pagination-bullet {background: var(--black);}
.container .arrowBtn .icon {width: 1.1rem; height: 2.7rem; cursor: pointer; transition: .5s ease;}
.container .arrowBtn.swiper-button-disabled .icon {opacity: .2; cursor: no-drop}
.container .arrowBtn.leftBtn .icon {background: url(../../images/arrow_left_black.svg) no-repeat center / contain;}
.container .arrowBtn.rightBtn .icon {background: url(../../images/arrow_right_black.svg) no-repeat center / contain;}

.container .arrowBtn.leftBtn.white .icon {background-image: url(../../images/arrow_left_white.svg);}
.container .arrowBtn.rightBtn.white .icon {background-image: url(../../images/arrow_right_white.svg);}

/* 탭 */
.container .tab_wrap .tab_box {display: none;}
.container .tab_wrap .tab_box.active {display: block; animation: upMove 1s ease both;}
.container .tab_list .list {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2.2rem; justify-content: center;}
.container .tab_list .list li a {padding: .9rem 1.35rem; font-size: 1.1rem; background: #fff; color: #999; transition: .5s ease; border-radius: 3rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-weight: 600;}
.container .tab_list .list li.active a {background: #333333; color: #fff;}


/* 모달 */
.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; bottom: -2rem; left: 50%; transform: translateX(-50%);}
.modalCon .closeBtn .icon {}
.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);}


/* comingsoonModal */
.comingsoonModal .boxWrap {max-width: 400px;}
.comingsoonModal .boxWrap .box {display: flex; flex-direction: column; gap: 1.35rem; align-items: center; text-align: center; padding: 2.2rem 30px;}
.comingsoonModal .boxWrap .box .img {max-width: 238px; width: 80%;}
.comingsoonModal .boxWrap .box .textBox {display: flex; flex-direction: column; align-items: center; gap: .6rem;}
.comingsoonModal .boxWrap .box .textBox .title {font-size: 1.35rem; font-weight: 600;}
.comingsoonModal .boxWrap .box .textBox .title span {color: var(--mainColor3);}
.comingsoonModal .boxWrap .box .textBox .text {font-size: .9rem; color: #666;}


/* 체크박스 */
.container .checkBox label {display: flex; align-items: center; gap: 8px;}
.container .checkBox input {flex: none; position: relative; width: 18px; height: 18px; -webkit-appearance: none; transition: .5s ease; background: url(../../images/ico_checkbox_gray.svg) no-repeat center / contain;}
.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_gray.svg) no-repeat center / contain; opacity: 0; transition: .5s ease;}
.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_popup {position: fixed; z-index: 1005; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; align-items: center; justify-content: center; display: none;}
.main_popup.on {display: flex;}
.main_popup:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #11111180; z-index: -1;}
.main_popup .box {max-width: 80%;}
.main_popup .box .imgBox {border-radius: .9rem; margin-bottom: .9rem; max-width: 560px; max-height: 480px; position: relative;}
.main_popup .box .imgBox .arrowBtn {position: absolute; top: 50%; transform: translateY(-50%);}
.main_popup .box .imgBox .arrowBtn.leftBtn {left: -2rem;}
.main_popup .box .imgBox .arrowBtn.rightBtn {right: -2rem;}
.main_popup .box .btnBox {display: flex; justify-content: space-between; align-items: center;}
.main_popup .box .checkBox input {background-image: url(../../images/ico_checkbox_white.svg);}
.main_popup .box .checkBox input:after {background-image: url(../../images/ico_checkbox_check_white.svg);}
.main_popup .box .checkBox label small {color: #fff;}
.main_popup .box .imgBox .swiper-pagination-bullet {background: #333;}

.main .visual {position: relative; margin-bottom: 3.3rem;}
.main .visual .bgBox {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.main .visual .bgBox .bg {width: 100%; height: 100%; object-fit: cover;}
.main .visual .bgBox .flower {position: absolute; bottom: 0;}
.main .visual .bgBox .left {left: -2%; animation: rightMove 1s cubic-bezier(0.49, 0.04, 0.52, 0.99) both; max-width: 581px; width: 29%;}
.main .visual .bgBox .right {right: 0; animation: leftMove 1s cubic-bezier(0.49, 0.04, 0.52, 0.99) both; max-width: 552px; width: 29%;}
.main .visual .bgBox .flower img {animation: flowerMove 12s 2s linear both infinite alternate;}
@keyframes flowerMove {25% {transform: skew(-1deg) translateX(2%);} 50% {transform: none}}
.main .visual .inner {position: relative; z-index: 1; padding-top: 11.8rem; padding-bottom: 9.3rem; display: flex; flex-direction: column; gap: 2.6rem;}
.main .visual .inner .textBox {display: flex; flex-direction: column; gap: 1.35rem; color: #fff;}
.main .visual .inner .textBox .title {font-size: clamp(2rem, 5.3vw, 60px); font-weight: 300; line-height: 120%; animation: upMove 1s .1s ease both;}
.main .visual .inner .textBox .title span span {animation: textLetterPointUp 4s 1s ease infinite;}
.main .visual .inner .textBox .text {display: flex; gap: .5rem 1.7rem; font-size: 1.35rem; flex-wrap: wrap; animation: upMove 1s .2s ease both;}
.main .visual .inner .textBox .text p:not(:last-child) {position: relative;}
.main .visual .inner .textBox .text p:not(:last-child):after {content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -.85rem; width: 1px; height: 1.35rem; background: #fff;}
.main .visual .inner .eventList {display: flex; gap: 2%;}
.main .visual .inner .eventList li {padding: 1.6rem 1.3rem; max-width: 340px; width: 50%; box-sizing: border-box; display: flex; flex-direction: column; gap: .9rem; border-radius: .9rem; background: #ffffff80; backdrop-filter: blur(8px); will-change: opacity, backdrop-filter; animation: upMove 1s .2s ease both;}
.main .visual .inner .eventList li .date {color: #4E4E4E; font-size: .9rem; font-weight: 300;}
.main .visual .inner .eventList li .name {font-size: 1.35rem; line-height: 140%;}
.main .section {margin-bottom: 4.4rem; padding-bottom: 2.2rem;}
.main .sec02 .inner {display: flex; gap: 4%; align-items: center; position: relative;}
.main .sec02 .arrowBtn {flex: none; position: relative; z-index: 10;}
.main .sec02 .box {display: flex; gap: 4.5%; align-items: flex-start; width: calc(100% - 2.2rem - 8%);}
.main .sec02 .youtubeBox {border-radius: 1.7rem; overflow: hidden; box-shadow: 0 2px 8px #00000016; width: 62%; position: relative; height: clamp(3rem, 34vw, 474px); cursor: pointer; opacity: 0;}
.main .sec02 .youtubeBox .swiper-wrapper, .main .sec02 .youtubeBox .swiper-slide {height: 100%;}
.main .sec02 .youtubeBox .swiper-slide > * {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main .sec02 .youtubeBox .thumbnail {position: relative;}
.main .sec02 .youtubeBox .thumbnail:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.2rem; height: 2.2rem; background: url(../../images/ico_youtube.png) no-repeat center / contain;}
.main .sec02 .youtubeBox .thumbnail img {width: 100%; height: 100%; object-fit: cover; transition: .5s ease;}
.main .sec02 .youtubeBox iframe {z-index: -1000;}
.main .sec02 .youtubeBox .swiper-slide.play .thumbnail {z-index: -1000;}
.main .sec02 .youtubeBox .swiper-slide.play iframe {z-index: 1;}
.main .sec02 .rightBox {width: 45%; max-width: 500px; flex: none; padding-top: 1.7rem; display: flex; flex-direction: column; gap: clamp(1rem, 1.4vw, 2.2rem);}
.main .sec02 .rightBox > * {opacity: 0;}
.main .sec02 .rightBox .cate {color: #FCA5A8; font-size: 1.1rem; font-weight: 500;}
.main .sec02 .rightBox .textBox {display: flex; flex-direction: column; gap: .9rem;}
.main .sec02 .rightBox .textBox .title {font-size: clamp(1.3rem, 3vw, 1.6rem);}
.main .sec02 .rightBox .textBox .title strong {font-size: clamp(1.8rem, 4vw, 2.6rem);}
.main .sec02 .rightBox .textBox .text {font-size: clamp(1.2rem, 2.5vw, 1.35rem); font-weight: 300; color: #999999;}
.main .sec02 .rightBox .imgBox {max-width: 307px; width: 55%;}
.main .sec02 .swiper-pagination {top: auto; bottom: -2rem; transform: none; height: 8px;}
.main .sec02.show .youtubeBox {animation: upMove 1s ease both;}
.main .sec02.show .rightBox > * {animation: rightMove 1s .1s ease both}
.main .sec03 .tab_wrap {opacity: 0;}
.main .sec03 .tab_box > .marquee:first-child {margin-bottom: 1.35rem;}
.main .sec03 .marquee {display: flex; overflow: hidden; user-select: none; gap: 1.35rem; padding: 1rem 0; margin: -1rem 0;}
.main .sec03 .marquee__group {flex-shrink: 0; display: flex; align-items: center; gap: 1.35rem; min-width: 100%; animation: scroll-x 150s linear infinite;}
.main .sec03 .marquee--reverse .marquee__group {animation-direction: reverse;animation-delay: -3s;}
.main .sec03 .marquee figure {border-radius: .9rem; overflow: hidden; box-shadow: 0 2px 8px #00000016; width: clamp(180px, 18.3vw, 420px); height: clamp(129px, 13vw, 300px)}
@keyframes scroll-x {from { transform: translateX(0);} to {transform: translateX(calc(-100% - 1.35rem));}}
.main .sec03.show .tab_wrap {animation: upMove 1s ease both;}
.main .sec04 .inner {display: flex; gap: 4.5%;}
.main .sec04 .inner > * {width: 100%;}
.main .sec04 .inner .contactBox {position: relative; border-radius: .9rem; overflow: hidden; opacity: 0;}
.main .sec04 .inner .contactBox .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;}
.main .sec04 .inner .contactBox .bg img {width: 100%; height: 100%; object-fit: cover;}
.main .sec04 .inner .contactBox .textBox {padding: 6%; height: 100%; box-sizing: border-box; display: flex; justify-content: center; flex-direction: column;}
.main .sec04 .inner .contactBox .textBox .topText {color: var(--mainColor2); font-size: 1.1rem; display: flex; align-items: center; gap: 5px; margin-bottom: 8px;}
.main .sec04 .inner .contactBox .textBox .topText strong {font-weight: 500;}
.main .sec04 .inner .contactBox .textBox .topText .inter {font-weight: 200;}
.main .sec04 .inner .contactBox .textBox .tel {color: var(--mainColor2); padding: 1.1rem; border-top: 2px solid; border-bottom: 1px solid; display: flex; gap: .3em; flex-wrap: wrap; font-size: clamp(1.5rem, 3vw, 2.1rem); align-items: center; justify-content: center; margin-bottom: .9rem;}
.main .sec04 .inner .contactBox .textBox .tel .text {font-weight: 200;}
.main .sec04 .inner .contactBox .textBox .tel .num {font-weight: 600; color: var(--mainColor2);}
.main .sec04 .inner .contactBox .textBox .botText {display: flex; align-items: center; justify-content: space-between; gap: 5px .5rem; flex-wrap: wrap; font-size: 1.1rem; color: #666666;}
.main .sec04 .inner .contactBox .textBox .botText p {position: relative; padding-left: .7em; font-weight: 300;}
.main .sec04 .inner .contactBox .textBox .botText p:before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: #666; display: block; position: absolute; top: .4em; left: 0;}
.main .sec04 .inner .newsBox {opacity: 0;}
.main .sec04 .inner .newsBox > .title {height: 2.6rem; display: flex; align-items: center; padding: 0 .9rem; border-bottom: 2px solid; margin-bottom: .4rem; font-size: 1.35rem;}
.main .sec04 .inner .newsBox .list {display: flex; flex-direction: column;}
.main .sec04 .inner .newsBox .list li {width: 100%;}
.main .sec04 .inner .newsBox .list li a {width: 100%; font-size: 1.1rem; font-weight: 300; padding: .9rem; border-bottom: 1px solid #DDDDDD; display: flex; justify-content: space-between; gap: 1rem; box-sizing: border-box;}
.main .sec04 .inner .newsBox .list li:last-child a {border-bottom: none;}
.main .sec04 .inner .newsBox .list li a .title {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: .5s ease; background-image: linear-gradient(#FAD5E580, #FAD5E580); background-repeat: no-repeat; background-position: left bottom; background-size: 0 40%; transition: .5s ease; -webkit-box-sizing: border-box; display: initial;}
.main .sec04 .inner .newsBox .list li a .date {color: #999999; flex: none;}
.main .sec04.show .inner .contactBox {animation: leftMove 1s .1s ease both;}
.main .sec04.show .inner .newsBox {animation: rightMove 1s .1s ease both;}



/* 서브 ---------------------------------------------- */
.sub .subTop {position: relative; color: #fff;}
.sub .subTop .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;}
.sub .subTop .bg:after {content: ""; position: absolute; top: 0%; left: 0; width: 100%; height: 100%; background: #00000020;}
.sub .subTop .bg img {width: 100%; height: 100%; object-fit: cover;}
.sub .subTop .textBox {padding-top: 6.8rem; padding-bottom: 3.3rem; display: flex; flex-direction: column; gap: .9rem;}
.sub .subTop .textBox h2 {font-family: 'Noto Serif KR', serif; font-weight: 300; font-size: clamp(2rem, 9vw, 2.6rem); height: 1.3em; overflow: hidden;}
.sub .subTop .textBox h2 span {animation: upMove 1s cubic-bezier(0.76, 0.2, 0.23, 1.77) both;}
.sub .subTop .textBox .lnbBox {display: flex; align-items: center; gap: 1.1rem; animation: opacityMove 1s .5s ease both;}
.sub .subTop .textBox .lnbBox li {font-size: .9rem; position: relative;}
.sub .subTop .textBox .lnbBox li:not(:last-child):after {content: ""; position: absolute; top: 50%; right: -.7rem; transform: translateY(-50%); width: 5px; height: 8px; background: url(../../images/sub_lnb_right.svg) no-repeat center / contain;}
.sub .subTop .textBox .lnbBox li.home .icon {width: 16px; height: 14px; background: url(../../images/ico_home_white.svg) no-repeat center / contain;}
.sub .subTop .textBox .lnbBox li:not(:last-child) {opacity: .6;}
.sub .subTop .textBox .lnbBox li:last-child p {font-weight: 600}
.sub .subBody {padding: 3.3rem 0;}
.sub .subBody .pageTitle {color: #666; font-size: 1.35rem; font-family: 'Noto Serif KR', serif; animation: opacityMove 1s .1s ease both;}

/* 초대의 글 ----------------------------------------------------- */
.sub .about .inner {display: flex; gap: 3%; align-items: flex-start; position: relative;}
.sub .about .inner .imgBox {border-radius: .9rem; overflow: hidden; max-width: 240px; width: 20%; flex: none; animation: scaleMove 1s ease both;}
.sub .about .inner .textWrap {display: flex; flex-direction: column; gap: 3.3rem; width: 100%;}
.sub .about .inner .textWrap .botBox {display: flex; gap: 3.5%; align-items: flex-start;}
.sub .about .inner .textWrap .botBox .leftText {max-width: 70px; width: 9%; flex: none;}
.sub .about .inner .textWrap .botBox .leftText svg path {opacity: 0; animation: downMove 1s .1s ease both;}
.sub .about .inner .textWrap .botBox .rightBox {display: flex; flex-direction: column; gap: 3.3rem;}
.sub .about .inner .textWrap .botBox .rightBox .textBox {display: flex; flex-direction: column; gap: 2.2rem;}
.sub .about .inner .textWrap .botBox .rightBox .textBox .title {font-family: 'Noto Serif KR', serif; font-size: 1.7rem; font-weight: 300; line-height: 140%;}
.sub .about .inner .textWrap .botBox .rightBox .textBox .text {color: #666666; font-size: .9rem; display: flex; flex-direction: column; gap: 1.3em; line-height: 155%; font-weight: 300;}
.sub .about .inner .textWrap .botBox .rightBox .nameBox {font-family: 'Noto Serif KR', serif; margin-left: auto; display: flex; align-items: flex-end; gap: .5rem; font-size: 1.1rem;}
.sub .about .inner .textWrap .botBox .rightBox .nameBox .name {font-size: 1.6rem;}
.sub .about .inner .textWrap .botBox .rightBox .botImg {border-radius: .9rem; overflow: hidden; margin-top: -2rem;}
.sub .about .inner .textWrap .botBox .rightBox.aos-animate .textBox .title {animation: rightMove 1s ease both}
.sub .about .inner .textWrap .botBox .rightBox.aos-animate .textBox .text {animation: rightMove 1s .1s ease both;}
.sub .about .inner .textWrap .botBox .rightBox .nameBox {animation: rightMove 1s .2s ease both;}
.sub .about .inner .textWrap .botBox .rightBox .botImg {animation: upMove 1s .3s ease both;}

/* 축제개요 ----------------------------------------------------- */
.sub .overview .inner {display: flex; gap: 4.5%;}
.sub .overview .inner .poster {max-width: 440px; width: 30%; flex: none; animation: leftMove 1s ease both;}
.sub .overview .inner .rightBox {width: 100%;}
.sub .overview .inner .rightBox .name {font-family: 'Noto Serif KR', serif; font-size: 2rem; padding-bottom: 2.6rem; position: relative; word-break: keep-all;}
.sub .overview .inner .rightBox .name:after {content: ""; position: absolute; left: 0; bottom: 0; width: 2.2rem; height: 2px; background: #999;}
.sub .overview .inner .rightBox .infoText {margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1.35rem;}
.sub .overview .inner .rightBox .infoText li {width: calc(100% / 2 - (1.35rem / 2)); display: flex; gap: 1.35rem; font-size: 1.1rem;}
.sub .overview .inner .rightBox .infoText li .title {width: 2em; flex: none; font-weight: 500; margin-top: .15em;}
.sub .overview .inner .rightBox .infoText li .text {width: 100%; font-weight: 300; color: #666; line-height: 1.6;}
.sub .overview .inner .rightBox .textBox {display: flex; flex-direction: column; gap: .9rem; margin-top: 3.3rem;}
.sub .overview .inner .rightBox .textBox .title {font-size: 1.35rem; font-weight: 500;}
.sub .overview .inner .rightBox .textBox .text {line-height: 160%; color: #666;}
.sub .overview .inner .rightBox.aos-animate > * {animation: rightMove 1s ease both;}

/* 축제연혁 ----------------------------------------------------- */
.sub .history .list {display: flex; flex-wrap: wrap; gap: 2.2rem;}
.sub .history .list li {width: calc(100% / 4 - ((2.2rem / 4) * 3)); display: flex; flex-direction: column; gap: .9rem; cursor: pointer; transition: .5s ease;}
.sub .history .list li .poster {position: relative; padding-bottom: 144%;}
.sub .history .list li .poster img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: .9rem; transition: .5s ease;}
.sub .history .list li .textBox {display: flex; flex-direction: column; gap: 2px;}
.sub .history .list li .textBox .name {font-size: clamp(1.3rem, 2vw, 1.35rem);}
.sub .history .list li .textBox .date {color: #666666;}
.sub .history .posterModal .boxWrap {max-width: 680px;}
.sub .history .posterModal .boxWrap .box {display: flex; gap: 1.35rem; padding: 6%;}
.sub .history .posterModal .boxWrap .poster {flex: none; max-width: 308px; width: 52%; padding-bottom: 74%; position: relative;}
.sub .history .posterModal .boxWrap .poster img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; overflow: hidden; border-radius: .4rem;}
.sub .history .posterModal .boxWrap .textBox {width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 10% 0;}
.sub .history .posterModal .boxWrap .nameBox {display: flex; flex-direction: column; gap: 2px;}
.sub .history .posterModal .boxWrap .nameBox .name {font-size: 1.35rem;}
.sub .history .posterModal .boxWrap .nameBox .date {color: #666666;}
.sub .history .posterModal .boxWrap .botBox {display: flex; flex-direction: column; gap: 1.1rem}
.sub .history .posterModal .boxWrap .botBox .text {display: flex; flex-direction: column; gap: .4rem;}
.sub .history .posterModal .boxWrap .botBox .text li {display: flex; gap: 6px; font-size: .9rem; line-height: 1.2;}
.sub .history .posterModal .boxWrap .botBox .text li .title {color: #666666; flex: none; font-weight: 600;}
.sub .history .posterModal .boxWrap .botBox .text li .text {color: #999999;}

/* 이모티콘 다운로드 ----------------------------------------------------- */
.sub .emoticon {overflow: hidden;}
.sub .emoticon .topBox {position: relative; max-width: 500px; width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 8%; padding-bottom: 40px;}
.sub .emoticon .topBox:after {content: ""; position: absolute; width: 100vw; height: 1px; left: 50%; transform: translateX(-50%); bottom: 0; background: #eee;}
.sub .emoticon .topBox .thumbnail {max-width: 180px; width: 35%; flex: none;}
.sub .emoticon .topBox .textBox {width: 100%; height: auto; display: flex; flex-direction: column; gap: 1.5rem;}
.sub .emoticon .topBox .textBox .nameBox {display: flex; flex-direction: column; gap: 8px;}
.sub .emoticon .topBox .textBox .nameBox .text {font-size: .9rem; font-weight: 500; color: #666666;}
.sub .emoticon .topBox .textBox .nameBox .name {font-size: clamp(1.7rem, 6vw, 2rem); font-weight: 600;}
.sub .emoticon .list {display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 2.2rem;}
.sub .emoticon .list li {width: calc(100% / 6 - ((2.2rem / 6)) * 5); border-radius: .9rem; box-shadow: 0 2px 2px #00000016;}
.sub .emoticon .list li a {width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: .9rem; display: flex; align-items: center; justify-content: center;}
.sub .emoticon .list li a .downBtn {position: absolute; width: 100%; height: 100%; top: 100%; left: 0; background: #33333360; transition: .5s ease; backdrop-filter: blur(6px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 500;}
.sub .emoticon .list li a .downBtn .icon {width: 1.35rem; height: 1.35rem; background: url(../../images/ico_down_white.svg) no-repeat center / contain;}
.sub .emoticon .topBox.aos-animate .thumbnail {animation: scaleMove 1s ease both;}
.sub .emoticon .topBox.aos-animate .textBox .text {animation: rightMove 1s ease both;}
.sub .emoticon .topBox.aos-animate .textBox .name {animation: rightMove 1s .1s ease both;}
.sub .emoticon .topBox.aos-animate .linkBtn {animation: rightMove 1s .2s ease both;}

/* 행사일정  ----------------------------------------------------- */
.sub .schedule .inner {display: flex; flex-direction: column; gap: 2.2rem;}
.sub .schedule .inner .dayBox {display: flex; flex-direction: column; gap: 1.35rem;}
.sub .schedule .inner .dayBox .dayText {font-size: 1.35rem;}
.sub .schedule .inner .dayBox .tableBox {border-radius: .9rem; box-shadow: 0 2px 8px #00000016;}
.sub .schedule .inner .dayBox .tableBox table {border-spacing: 2.7rem 1.35rem; border-collapse: separate; margin: 0 -1.35rem; width: calc(100% + 2.7rem);}
.sub .schedule .inner .dayBox .tableBox tr * {padding:  0;}
.sub .schedule .inner .dayBox .tableBox thead tr {position: relative;}
.sub .schedule .inner .dayBox .tableBox thead tr:after {content: ""; position: absolute; left:  0; bottom: 0; width: 100%; height: 1px; background: #333;}
.sub .schedule .inner .dayBox .tableBox thead th {font-weight: 600; font-size: .9rem; height: 1.6rem;}
.sub .schedule .inner .dayBox .tableBox thead th:first-child {width: 8.5rem;}
.sub .schedule .inner .dayBox .tableBox tbody tr * {text-align: left; padding: 0;}
.sub .schedule .inner .dayBox .tableBox tbody th {font-weight: 200; font-size: 1.6rem; position: relative;}
.sub .schedule .inner .dayBox .tableBox tbody th:after {content: ""; position: absolute; top: 50%; right: -1.35rem; width: 1px; height: .9rem; background: #DDDDDD; transform: translateY(-50%);}
.sub .schedule .inner .dayBox .tableBox tbody td p {font-size: 1.1rem; font-weight: 500;}
.sub .schedule .inner .dayBox .tableBox tbody td p.gray {font-size: .9rem; margin-top: 8px; color: #999999; font-weight: 300;}

/* 경관 및 편의시설 ----------------------------------------------------- */
.sub .amenities .topText {font-size: 1.35rem; color: #666666; text-align: center; word-break: keep-all; line-height: 140%; margin-bottom: 1.35rem;}
.sub .amenities .topText .pink {color: #fca5a8;}
.sub .amenities .tab_list .list li a {padding: .6rem 1.35rem;}
.sub .amenities .tab_box {display: none;}
.sub .amenities .tab_box.active {display: block; animation: upMove 1s ease both;}


/* 오시는 길 ----------------------------------------------------- */
.sub .location .box {margin-bottom: 4.4rem;}
.sub .location .box:not(.box01) {display: flex; flex-direction: column; gap: 1.35rem;}
.sub .location .box:nth-child(n+4) {margin-bottom: 2.2rem;}
.sub .location .box .boxTitle {color: #333; font-size: 1.35rem; font-weight: 600; display: flex; align-items: center; gap: 8px;}
.sub .location .box.parking .boxTitle {font-weight: 700; padding-left: 1.35rem;}
.sub .location .box .boxTitle .icon {width: 2.2rem; height: 2.2rem; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center;}
.sub .location .box04 .boxTitle .icon {background-image: url(../../images/location_box04_boxTitle_icon.svg);}
.sub .location .box05 .boxTitle .icon {background-image: url(../../images/location_box05_boxTitle_icon.svg);}
.sub .location .box06 .boxTitle .icon {background-image: url(../../images/location_box06_boxTitle_icon.svg);}
.sub .location .box07 .boxTitle .icon {background-image: url(../../images/location_box07_boxTitle_icon.svg);}
.sub .location .box .textBox {padding: 4%; box-shadow: 0 2px 8px #00000016; border: 1px solid #eee; border-radius: 1.7rem;}
.sub .location .box .textBox.type1 .list1 {display: flex; flex-direction: column; gap: .9rem;}
.sub .location .box .textBox.type1 .list1 > li {display: flex; flex-direction: column; gap: .4rem;}
.sub .location .box .textBox.type1 .list1 .title {display: flex; gap: 4px; font-weight: 600; font-size: 1.1rem;}
.sub .location .box .textBox.type1 .list1 .title span {font-size: .9rem;}
.sub .location .box .textBox.type1 .list2 {display: flex; flex-wrap: wrap; gap: .4rem;}
.sub .location .box .textBox.type1 .list2 li {display: inline-flex; align-items: center; font-weight: 300; font-size: .9rem;}
.sub .location .box .textBox.type1 .list2 li:not(:last-child):after {content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1px solid #ddd; border-top: 1px solid #ddd; transform: rotate(45deg); margin: 0 .1rem 0 .3rem;}
.sub .location .box01 .mapBox {height: 16.6rem;}
.sub .location .box01 .infoBox {max-width: 805px; margin: 0 auto; width: 90%; display: flex; padding: 1.5rem 2.2rem; box-sizing: border-box; border-radius: .9rem; background: #fff; box-shadow: 0 2px 8px #00000016; gap: 2.8rem; margin-top: -1.35rem; position: relative; z-index: 1;}
.sub .location .box01 .infoBox li {width: 100%; position: relative; display: flex; flex-direction: column; gap: .9rem; text-align: center;}
.sub .location .box01 .infoBox li:first-child:after {content: ""; position: absolute; top: 50%; right: -1.4rem; transform: translateY(-50%); width: 1px; height: 2.2rem; background: #d9d9d9;}
.sub .location .box01 .infoBox li .title {display: flex; align-items: center; justify-content: center; text-align: center; gap: .5rem; font-size: 1.1rem; color: var(--mainColor3);}
.sub .location .box01 .infoBox li .title .icon {width: 1.35rem; height: 1.35rem; background-size: contain; background-repeat: no-repeat; background-position: center;}
.sub .location .box01 .infoBox li .title .icon.maker {background-image: url(../../images/location_box01_icon_maker.svg);}
.sub .location .box01 .infoBox li .title .icon.call {background-image: url(../../images/location_box01_icon_call.svg);}
.sub .location .box01 .infoBox li .title span {opacity: .6;}
.sub .location .box01 .infoBox li .text {color: #666; font-size: 1.35rem;}
.sub .location .box01 .infoBox li a.text {font-weight: 300;}
.sub .location .box.parking .mapBox {border-radius: 1.7rem; overflow: hidden;}
.sub .location .box.parking .list {display: flex; flex-wrap: wrap; gap: 1.35rem;}
.sub .location .box.parking .list > li {width: calc(100% / 4 - ((1.35rem / 4) * 3)); border-radius: .9rem; box-shadow: 0 2px 8px #00000016; padding: 1.82%; box-sizing: border-box;}
.sub .location .box.parking .list > li .title {color: 000;}
.sub .location .box.parking .list > li .text {font-size: .9rem; color: #666; margin-top: 6px;}
.sub .location .box.parking .list > li .numList {display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .8rem; margin-top: .7rem;}
.sub .location .box.parking .list > li .numList li {color: #666;}
.sub .location .box.bus .textBox {display: flex; flex-wrap: wrap; gap: 1.35rem 0;}
.sub .location .box.bus .textBox > div {width: 50%; text-align: center; box-sizing: border-box;}
.sub .location .box.bus .textBox > div:first-child {border-right: 1px solid #eee;}
.sub .location .box.bus .textBox .title {font-size: 1.1rem; font-weight: 600; display: flex; align-items: flex-end; gap: 4px; justify-content: center;}
.sub .location .box.bus .textBox .title span {font-size: .8rem; font-weight: 300;}
.sub .location .box.bus .textBox .text {margin-top: .4rem; font-size: .9rem; font-weight: 500;}
.sub .location .box.bus .textBox .time {margin-top: .9rem; display: flex; align-items: center; justify-content: center; gap: .4rem;}
.sub .location .box.bus .textBox .time p {color: #999; font-weight: 300; font-size: .9rem;}
.sub .location .box.bus .textBox .time p strong {font-weight: 500;}
.sub .location .box.bus .textBox .terminal {width: 100%;}
.sub .location .box.bus .textBox .terminal .title {font-size: 1rem; color: var(--mainColor3);}
.sub .location .box.bus .textBox .terminal .text {color: #999; font-weight: 300; line-height: 140%;}
.sub .location .box.bus .textBox .terminal .text a {color: #999;}

/* 셔틀 노선도 ----------------------------------------------------- */
.shuttlemap .inner {display: flex; gap: 4.5%;}
.shuttlemap .inner .mapBox {border-radius: 10px; box-shadow: 0 2px 8px #00000016; display: flex; align-items: center; justify-content: center; padding: 1rem 4%; width: 100%; box-sizing: border-box;}
.shuttlemap .inner .textWrap {display: flex; flex-direction: column; gap: 3.3rem; max-width: 630px; width: 51%; flex: none;}
.shuttlemap .inner .textWrap .topBox .title {font-family: 'Noto Serif KR', serif; font-size: 2rem;}
.shuttlemap .inner .textWrap .topBox .text {color: #666;}
.shuttlemap .inner .textWrap .topBox .text:before {content: ""; width: 2.2rem; height: 2px; background: #999; display: block; margin-top: .9rem; margin-bottom: .9rem;}
.shuttlemap .inner .textWrap .topBox .infoBox {margin-top: 1.35rem; display: flex; flex-direction: column; gap: .9rem;}
.shuttlemap .inner .textWrap .topBox .infoBox li {font-size: 1.1rem; display: flex; gap: 1.35rem;}
.shuttlemap .inner .textWrap .topBox .infoBox li .left {width: 2.1rem; font-weight: 500; flex: none;}
.shuttlemap .inner .textWrap .topBox .infoBox li .right {color: #666; font-weight: 300; word-break: keep-all;}
.shuttlemap .inner .textWrap .botBox {display: flex; flex-direction: column; gap: 2.2rem;}
.shuttlemap .inner .textWrap .botBox > li {display: flex; flex-direction: column; gap: .9rem;}
.shuttlemap .inner .textWrap .botBox .titleBox {display: flex; align-items: center; gap: .5rem;}
.shuttlemap .inner .textWrap .botBox .red .titleBox {color: #C30D23;}
.shuttlemap .inner .textWrap .botBox .blue .titleBox {color: #2760A8;}
.shuttlemap .inner .textWrap .botBox .titleBox .title {display: flex; align-items: center; gap: .5rem;}
.shuttlemap .inner .textWrap .botBox .titleBox .title .num {width: 1.35rem; height: 1.35rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: #fff; font-weight: 800;}
.shuttlemap .inner .textWrap .botBox .red .titleBox .title .num {background: #C30D23;}
.shuttlemap .inner .textWrap .botBox .blue .titleBox .title .num {background: #2760A8;}
.shuttlemap .inner .textWrap .botBox .titleBox .title p {font-weight: 800; font-size: 1.35rem;}
.shuttlemap .inner .textWrap .botBox .titleBox .little {font-weight: 300; font-size: .9rem;}
.shuttlemap .inner .textWrap .botBox .route {display: flex; flex-wrap: wrap; gap: .5rem .3rem;}
.shuttlemap .inner .textWrap .botBox .route li {color: #666666; display: inline-flex; align-items: center; gap: 2px;}
.shuttlemap .inner .textWrap .botBox .route li:not(:last-child):after {content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1px solid #ddd; border-top: 1px solid #ddd; transform: rotate(45deg); margin: 0 .3rem;}
.shuttlemap .inner .textWrap .botBox .route li strong {font-weight: 600;}

/* 한눈에 보기 ----------------------------------------------------- */
.glance .topText {font-family: 'Noto Serif KR', serif; text-align: center; line-height: 1.3; margin-bottom: 2.2rem;}
.glance .topText p {color: #333; font-size: 1.6rem;}
.glance .topText strong.pink {color: var(--mainColor3); font-size: 2.2rem;}
.glance .tableBox table {border-spacing: 3.3rem .9rem; border-collapse: separate;}
.glance .tableBox table thead th {font-size: .9rem;}
.glance .tableBox table tr > * {padding:  0;}
.glance .tableBox .th1 {width: 11rem;}
.glance .tableBox .th3 {width: 13rem;}
.glance .tableBox .table1 > tbody > tr {position: relative;}
.glance .tableBox .table1 > tbody > tr:after {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: calc(100% + 6.6rem); z-index: -1; border-radius: .9rem; box-sizing: border-box;}
.glance .tableBox .table1 > tbody > tr:nth-child(odd):after {background: #FCA5A816;}
.glance .tableBox .table1 > tbody > tr:nth-child(even):after {border: 1px solid #EEEEEE;}
.glance .tableBox .table2 {margin: 0 -3.3rem; width: calc(100% + 10.6rem); border-spacing: 3.3rem 0;}
.glance .tableBox .table2 th div {display: flex; align-items: center; gap: .5rem; align-items: center; font-size: 1.35rem;}
.glance .tableBox .table2 th .num {width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--mainColor3); color: #fff; font-size: .9rem; display: flex; align-items: center; justify-content: center;}
.glance .tableBox .table2 tr {position: relative;}
.glance .tableBox .table2 tr:after {content: ""; position: absolute; width: calc(100% - 12.3rem); height: 1px; border-bottom: 1px solid #00000016; right: 0; bottom: 0;}
.glance .tableBox .table2 tr:last-child:after {opacity: 0;}
.glance .tableBox .table2 td {font-size: 1.1rem; padding: .9rem 0; line-height: 1.3; text-align: left;}
.glance .tableBox .table2 td:last-child {text-align: center;}
.glance .tableBox .table1 > tbody > tr:last-child {height: 4.8rem;}


.sub .listType1 {display: flex; flex-wrap: wrap; gap: 2.2rem;}
.sub .listType1 > li {width: calc(50% - 1.1rem); display: flex; align-items: flex-start; gap: 3.5%;}
.sub .listType1 > li .imgBox {border-radius: .9rem; overflow: hidden; box-shadow: 0 2px 8px #00000016;}
.sub .listType1 > li .textBox {max-width: 240px; width: 45%; flex: none;}
.sub .listType1 > li .title {font-size: 1.2rem; font-weight: 600; word-break: keep-all;}
.sub .listType1 > li .textList {display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; margin-top: 2.2rem;}
.sub .listType1 > li .textList li {display: flex; gap: .3rem;}
.sub .listType1 > li .textList .tt1 {color: #666666; font-weight: 600; width: 2em; flex: none;}
.sub .listType1 > li .textList .tt2 {color: #999999;}
.sub .listType1 > li .text {font-size: .9rem; color: #999999; margin-top: 1.1rem; word-break: keep-all;}

@media screen and (min-width: 1025px) {
	.container .tab_list .list li:not(.active) a:hover {background: var(--mainColor); color: #fff;}
	.container .linkBtn:hover {color: #fff !important; border-color: #7ab3d1 !important;}
	.container .closeBtn:hover .icon {transform: rotate(90deg);}
	.container .linkBtn:hover span {text-shadow: 1px 1px #4987a7, 2px 2px #4987a7, 3px 3px #4987a7, 4px 4px #4987a7, 5px 5px #4987a7, 6px 6px #4987a7, 7px 7px #4987a7, 8px 8px #4987a7, 9px 9px #4987a7, 10px 10px #4987a7, 11px 11px #4987a7, 12px 12px #4987a7, 13px 13px #4987a7, 14px 14px #4987a7, 15px 15px #4987a7, 16px 16px #4987a7, 17px 17px #4987a7, 18px 18px #4987a7, 19px 19px #4987a7, 20px 20px #4987a7, 21px 21px #4987a7, 22px 22px #4987a7, 23px 23px #4987a7, 24px 24px #4987a7, 25px 25px #4987a7, 26px 26px #4987a7, 27px 27px #4987a7, 28px 28px #4987a7, 29px 29px #4987a7, 30px 30px #4987a7, 31px 31px #4987a7, 32px 32px #4987a7, 33px 33px #4987a7, 34px 34px #4987a7, 35px 35px #4987a7, 36px 36px #4987a7, 37px 37px #4987a7, 38px 38px #4987a7, 39px 39px #4987a7, 40px 40px #4987a7;}
	.container .editBtn.pink:hover .icon i {background-image: url(../../images/ico_edit_white.svg);}

	.container .linkBtn:hover:after {transform: scale(11) translateX(-50%);}
	.container .linkBtn:hover .icon:after {transform: translate(-50%, -50%); opacity: 1;}
	.container .arrowBtn.leftBtn:not(.swiper-button-disabled) .icon:hover {filter: drop-shadow(7px 0 0 var(--mainColor));}
	.container .arrowBtn.rightBtn:not(.swiper-button-disabled) .icon:hover {filter: drop-shadow(-7px 0 0 var(--mainColor));}



	/* 메인 ----------------------------------------------------- */
	.main .sec02 .youtubeBox:hover .thumbnail img {filter: blur(8px); transform: scale(1.03);}
	.main .sec03 .marquee:hover .marquee__group {animation-play-state: paused;}
	.main .sec04 .inner .contactBox .textBox .tel .num:hover {text-shadow: 3px 3px #ff7b7b40;}
	.main .sec04 .inner .newsBox .list li a:hover .title {background-size: 100% 40%; color: var(--mainColor2)}

	/* 축제연혁 ----------------------------------------------------- */
	.sub .history .list.hover li:not(.hover) {opacity: .3;}

	/* 이모티콘 다운로드 ----------------------------------------------------- */
	.sub .emoticon .list li a:hover .downBtn {top: 0;}

	.sub .location .box a:hover {color: var(--mainColor3) !important; text-shadow: 2px 2px #FCA5A840;}
}

@media screen and (max-width: 1200px) {
	.main .sec04 .inner {gap: 2%;}
}

@media screen and (max-width: 1024px) {
	/* 메인 ----------------------------------------------------- */
	.main .sec02 .inner {align-items: normal;}
	.main .sec02 .box {flex-direction: column; gap: 2rem;}
	.main .sec02 .arrowBtn {display: flex; align-items: center; padding-bottom: 10rem;}
	.main .sec02 .youtubeBox {width: 100%; height: clamp(3rem, 52vw, 491px);}
	.main .sec02 .rightBox {width: 100%; max-width: none; position: relative; padding-top: 0;}
	.main .sec02 .rightBox .imgBox {max-width: 200px; width: 28%; position: absolute; right: 0; bottom: 0; z-index: -1;}
	.main .sec04 .inner .newsBox .list li a {font-size: 1rem;}
	.main .sec04 .inner .contactBox .textBox .botText {font-size: 1rem;}
	/* 축제개요 ----------------------------------------------------- */
	.sub .overview .inner .rightBox .infoText li {width: 100%; font-size: 1rem;}
	/* 축제연혁 ----------------------------------------------------- */
	.sub .history .list li {width: calc(100% / 3 - ((2.2rem / 3) * 2));}
	.sub .history .posterModal .boxWrap .box {padding: 2rem;}
	.sub .history .posterModal .boxWrap .poster {width: 40%; padding-bottom: 60%;}
	.sub .history .posterModal .boxWrap .textBox {padding: 4% 0;}
	/* 이모티콘 다운로드 ----------------------------------------------------- */
	.sub .emoticon .list li {width: calc(100% / 5 - ((2.2rem / 5)) * 4)}
	.sub .location .box.parking .list > li {width: calc(100% / 3 - ((1.35rem / 3) * 2));}
	/* 한눈에 보기 ----------------------------------------------------- */
	.glance .tableBox table {border-spacing: 1rem .9rem;}
	.glance .tableBox .th1 {width: 8.5rem;}
	.glance .tableBox .th3 {width: 8rem;}
	.glance .tableBox .table1 > tbody > tr:after {width: calc(100% + 2.6rem);}
	.glance .tableBox .table2 {margin: 0 -2rem; width: calc(100% + 9rem);}
	.glance .tableBox .table2 tr:after {width: calc(100% - 14rem); right: 4rem;}
	.glance .tableBox .table2 th div {font-size: 1.1rem;}
	.glance .tableBox .table2 th .num {width: 1.1rem; height: 1.1rem; font-size: .85rem;}
	.glance .tableBox .table2 td {font-size: 1rem;}

	.sub .listType1 > li {flex-direction: column; gap: 2rem;}
	.sub .listType1 > li .imgBox {width: 100%;}
	.sub .listType1 > li .imgBox img {width: 100%;}
	.sub .listType1 > li .textBox {width: 100%; max-width: none;}
}

@media screen and (max-width: 900px) {
	/* 메인 ----------------------------------------------------- */
	.main .sec04 .inner {flex-direction: column; gap: 2rem;}
	.main .sec04.show .inner .contactBox {animation: upMove 1s .1s ease both;}
	.main .sec04.show .inner .newsBox {animation: upMove 1s .2s ease both;}
	/* 초대의 글 ----------------------------------------------------- */
	.sub .about .inner .imgBox {position: absolute; top: 4rem; right: 30px; z-index: -1; width: 17%;}
	/* 축제개요 ----------------------------------------------------- */
	.sub .overview .inner {flex-direction: column; gap: 2rem;}
	.sub .overview .inner .poster {max-width: 400px; width: 100%; animation-name: scaleMove;}
	/* 이모티콘 다운로드 ----------------------------------------------------- */
	.sub .emoticon .list {gap: 1.5rem;}
	.sub .emoticon .list li {width: calc(100% / 4 - ((1.5rem / 4)) * 3)}
	/* 행사일정 */
	.sub .schedule .inner .dayBox .tableBox thead th:first-child {width: 7rem;}
	.sub .schedule .inner .dayBox .tableBox tbody th {font-size: 1.4rem;}
}

@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 .history .list {gap: 2.2rem 1.5rem}
	.sub .history .list li {width: calc(100% / 3 - ((1.5rem / 3) * 2));}
	.sub .history .list li .textBox .name {font-size: 1.1rem;}
	.sub .history .list li .textBox .date {font-size: .9rem;}
	.sub .history .posterModal .boxWrap .box {flex-direction: column; gap: 1rem;}
	.sub .history .posterModal .boxWrap .poster {width: 200px; height: 288px; padding: 0; margin: 0 auto;}
	.sub .history .posterModal .boxWrap .textBox {padding: 0;}
	/* 셔틀 노선도 ----------------------------------------------------- */
	.shuttlemap .inner {flex-direction: column; gap: 2rem;}
	.shuttlemap .inner .mapBox figure {max-width: 300px; width: 70%;}
	.shuttlemap .inner .textWrap {max-width: none; width: 100%;}
	.sub .location .box .textBox {border-radius: .9rem;}
	.sub .location .box01 .infoBox li .text {font-size: 1.1rem;}
	.sub .location .box.parking .list {gap: 1rem;}
	.sub .location .box.parking .list > li {width: calc(100% / 2 - ((1rem / 2))); padding: .9rem;}
	.sub .location .box.bus .textBox > div {width: 100%;}
	.sub .location .box.bus .textBox > div:first-child {border-right: none;}
	.sub .location .box.bus .textBox > div:not(:last-child) {padding-bottom: 1.35rem; border-bottom: 1px solid #eee;}
	/* 한눈에 보기 ----------------------------------------------------- */
	.glance .tableBox table {border-spacing: 0;}
	.glance .tableBox table tr > * {display: block;}
	.glance .tableBox .table1 > thead, .glance .tableBox .table2 colgroup {display: none;}
	.glance .tableBox .table1 > tbody > tr {padding: .9rem 0;}
	.glance .tableBox .table1 > tbody > tr:not(:last-child) {margin-bottom: 1rem; display: block;}
	.glance .tableBox .table2 {margin: 0; width: 100%; border-spacing: 0;}
	.glance .tableBox .table2 tr {display: flex; flex-wrap: wrap; padding: 0 .9rem;}
	.glance .tableBox .table2 th {width: 100%; height: 3rem; display: flex; align-items: center; margin-bottom: .5rem;}
	.glance .tableBox .table2 td {width: 50%; padding: .5rem 0;}
	.glance .tableBox .table2 td:last-child {text-align: right;}
	.glance .tableBox .table2 tr:after {width: 100%; right: 0;}

	.sub .listType1 {gap: 2rem 1.2rem;}
	.sub .listType1 > li {width: calc(50% - .6rem);}

}

@media screen and (max-width: 640px) {
	/* 초대의 글 ----------------------------------------------------- */
	.sub .about .inner .imgBox {opacity: .3;}
	.sub .about .inner .textWrap .botBox .rightBox .textBox .text p {word-break: keep-all;}
	.sub .about .inner .textWrap .botBox .rightBox .textBox .text p br {display: none;}
	/* 축제연혁 ----------------------------------------------------- */
	.sub .history .list {gap: 2.2rem 1rem}
	.sub .history .list li {width: calc(100% / 2 - .5rem);}
	.sub .history .list li .textBox .name {font-size: 1rem;}
	.sub .history .list li .textBox .date {font-size: .8rem;}
	/* 이모티콘 다운로드 ----------------------------------------------------- */
	.sub .emoticon .list li {width: calc(100% / 3 - ((1.5rem / 3)) * 2)}
	.sub .location .box01 .infoBox {flex-direction: column; gap: 1.35rem; padding: 1rem 10%;}
	.sub .location .box01 .infoBox li:first-child {border-bottom: 1px solid #eee; padding-bottom: 1.35rem;}
	.sub .location .box01 .infoBox li:first-child:after {display: none;}
	/* 행사일정 ----------------------------------------------------- */
	.sub .schedule .inner .dayBox .tableBox thead {display: none;}
	.sub .schedule .inner .dayBox .tableBox tr {display: block;}
	.sub .schedule .inner .dayBox .tableBox tr:not(:last-child) {padding-bottom: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem;}
	.sub .schedule .inner .dayBox .tableBox tbody th {display: block; width: 100%; height: 2rem;}
	.sub .schedule .inner .dayBox .tableBox tbody th:after {display: none;}
	.sub .schedule .inner .dayBox .tableBox tbody td {display: block; width: 100%;}
	.sub .schedule .inner .dayBox .tableBox tbody td p.gray {margin-top: 3px;}
}

@media screen and (max-width: 480px) {
	/* 초대의 글 ----------------------------------------------------- */
	.sub .about .inner .imgBox {right: calc(30px + 11%); opacity: .2; top: 1rem;}
	.sub .about .inner .textWrap {gap: 2rem;}
	.sub .about .inner .textWrap .botBox .rightBox .textBox .title {word-break: keep-all; max-width: 12em;}
	.sub .about .inner .textWrap .botBox .rightBox .textBox .title br {display: none;}
	.sub .about .inner .textWrap .botBox .leftText {position: absolute; right: 30px; top: 1rem;}
	.sub .about .inner .textWrap .botBox .rightBox .textBox .text {padding-right: 7%;}
	/* 이모티콘 다운로드 ----------------------------------------------------- */
	.sub .emoticon .topBox {flex-direction: column; gap: 1.5rem; align-items: center; text-align: center;}
	.sub .emoticon .topBox .thumbnail {max-width: 150px; width: 45%;}
	.sub .emoticon .topBox .linkBtn {max-width: 240px; margin: 0 auto;}
	.sub .emoticon .topBox.aos-animate .textBox .text {animation-name: upMove;}
	.sub .emoticon .topBox.aos-animate .textBox .name {animation-name: upMove;}
	.sub .emoticon .topBox.aos-animate .linkBtn {animation-name: upMove;}
	.sub .location .box .textBox {padding: 1.2rem;}
	/* 한눈에 보기 ----------------------------------------------------- */
	.glance .tableBox .table2 td {width: 100%; padding: 0; padding-top: .5rem;}
	.glance .tableBox .table2 td:last-child {width: 100%; padding: 0; padding-bottom: .5rem; font-size: .9rem;}

	.sub .listType1 {gap: 3rem;}
	.sub .listType1 > li {width: 100%; gap: 1.5rem;}
	.sub .listType1 > li .title br, .sub .listType1 > li .text br {display: none;}

}

@media screen and (max-width: 400px) {
	.inner {padding-left: 20px; padding-right: 20px;}
	/* 메인 ----------------------------------------------------- */
	.main .visual .inner .textBox .title {font-size: clamp(32px, 10vw, 10vw); word-break: keep-all;}
	.main .visual .inner .eventList li {padding: 1.2rem 1rem;}
	.main .visual .inner .eventList li .name {font-size: 1.2rem;}
	.main .sec02 .rightBox {margin-left: -2rem; margin-right: -2rem; width: calc(100% + 4rem);}
	.main .sec02 .rightBox .imgBox {bottom: -20%; right: -3%; width: 25%;}
	.main .sec04 .inner .newsBox .list li a {flex-direction: column; gap: .5rem;}
	.main .sec04 .inner .newsBox .list li a .date {margin-left: auto; font-size: .9rem;}
	/* 이모티콘 다운로드 ----------------------------------------------------- */
	.sub .emoticon .list {gap: 1rem;}
	.sub .emoticon .list li {width: calc(100% / 3 - ((1rem / 3)) * 2)}
	.sub .location .box.parking .list > li {width: 100%;}
	/* 한눈에 보기 ----------------------------------------------------- */
	.glance .tableBox .table2 th {height: 2.5rem;}
	.glance .tableBox .table1 > tbody > tr:after {width: calc(100% + .4rem);}
	.glance .tableBox .table2 tr:after {width: calc(100% - 1.5rem); right: 50%; transform: translateX(50%);}
}

/* 250610 스와이프 */
.mySwiper  .swiper-pagination-bullet{
	background: #fff;
	opacity: 0.6;
}
.mySwiper .swiper-pagination-bullet-active{
	opacity: 1;
}