/* 공통 */
h2.heading { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(var(--Titfont) * 1.6); font-weight: bold; line-height: 1.2; color: #1D1D1D; flex: 1; }
.swiper-button-next,
.swiper-button-prev { background: none !important; position: unset !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; margin: 0 !important; }
.btn_more { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; border-radius: 50%; background: #000; width: calc(var(--mainfont) * 2.4); height: calc(var(--mainfont) * 2.4); color: #fff; font-size: calc(var(--mainfont) * 1.5); transition: 0.2s ease-in-out; }
.btn_more:hover,
.btn_more:focus { transform: rotate(180deg); }

/* 메인비주얼 */
.visual { position: relative; height: 100%; width: 100%; overflow: hidden; max-width: 96rem; margin: 0 auto; }
.visual .swiper { width: 100%; height: 100%; }
.visual .swiper-slide { display: flex; flex-wrap: wrap; gap: calc(var(--mainfont) * 2); }
.visual .swiper-slide .img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 0 0 calc(var(--radius) * 6) calc(var(--radius) * 6); isolation: isolate; overflow: hidden; background: #e1e1e1; }
.visual .swiper-slide .img img { width: 100%; height: 100%; object-fit: cover; font-size: 0; line-height: 0; }
.visual .cntBtn { position: absolute; bottom: 3.25rem; right: 23.15rem; z-index: 3; display: flex; align-items: center; gap: calc(var(--mainfont) * 0.65); }
.visual .cntBtn .pagenation { display: flex; align-items: center; gap: 0.75rem; font-size: calc(var(--mainfont) * 0.85); line-height: 1.4; font-weight: 500; }
.visual .cntBtn .pagenation strong { font-weight: bold; } 
.visual .cntBtn .pagenation strong,
.visual .cntBtn .pagenation span { text-shadow: 0px 1.42px 1.42px rgba(0,0,0,0.1); color: #fff; font-family: "Montserrat"; letter-spacing: 0; }
.visual .cntBtn .pagenation .bar { position: relative; width: calc(var(--mainfont) * 4.8); height: 1px; background: rgba(255,255,255,0.5); }
.visual .cntBtn .pagenation .bar::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); height: 0.15rem; width: 0%; background: #fff; }
.visual .cntBtn .pagenation.swiper-pagination-fraction { width: auto; }
.visual .cntBtn .pagenation .bar.is-run::before { animation: visualBar var(--bar-duration, 3000ms) linear forwards; }
@keyframes visualBar { from { width: 0%; } to { width: 100%; } }
.visual .cntBtn button { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--mainfont) * 1.6); height: calc(var(--mainfont) * 1.6); background: transparent !important; border: none !important; border-radius: 50%; color: #fff; font-size: calc(var(--mainfont) * 1.1); padding: 0 !important; }
.visual .cntBtn button.pause.play .ri-pause-line,
.visual .cntBtn button.pause .ri-play-fill { display: none; }
.visual .cntBtn button.pause .ri-pause-line,
.visual .cntBtn button.pause.play .ri-play-fill { display: block; }
.visual .slogan { position: absolute; top: 2.75rem; left: 50%; transform: translateX(calc(50% + 1rem)); z-index: 2; width: calc(var(--mainfont) * 18); display: none; }
.visual .slogan span.top { display: inline-flex; align-items: center; justify-content: center; border-radius: 3.6rem; background: linear-gradient(180deg, rgba(152, 175, 255, 0.9) 0%, rgba(39, 81, 230, 0.9) 100%); padding: calc(var(--mainfont) * 0.5) calc(var(--mainfont) * 0.8); font-family: "SUITE"; font-weight: 500; color: #fff; font-size: calc(var(--mainfont) * 0.8); line-height: 1.2; letter-spacing: 2%; }
.visual .slogan span.top em { font-weight: 900; }
.visual .slogan span.top em.yllw { color: #FFF600; }
.visual .slogan span.top em.grn { color: #A3FFB7; }
.visual .slogan .bot { display: block; margin-top: calc(var(--mainfont) * 0.75); color: #FFFFFF; font-family: "SUITE"; font-weight: 800; font-size: calc(var(--mainfont) * 1.95); line-height: 1.4; letter-spacing: 5%; text-shadow: 0px 3.2px 19.2px rgba(13, 71, 110, 0.5); }
.visual .slogan .bot span { font-size: calc(var(--mainfont) * 2.65); color: #FFE241; display: block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.visual .slogan .bot span { background: linear-gradient(90deg, #FFE241 0%, #A3FFB7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; filter: drop-shadow(0px 3.2px 19.2px rgba(13, 71, 110, 0.5)); }
}

/* 새소식 */
.notice { position: relative; }
.notice .titWrap { display: flex; align-items: center; justify-content: space-between; }
.notice .titWrap h2 { line-height: calc(var(--mainfont) * 2.4); padding-right: calc(var(--mainfont) * 3); }
.notice .lst { margin-top: calc(var(--mainfont) * 1.2); width: 100%; }
.notice .lst .top a { position: relative; padding-left: calc(var(--mainfont) * 7); display: flex; align-items: center; min-height: calc(var(--mainfont) * 5.5); }
.notice .lst .top a .year { display: inline-flex; align-items: center; justify-content: center; background: #3083FF; border-radius: calc(var(--radius) * 1); color: #fff; width: calc(var(--mainfont) * 5.5); height: calc(var(--mainfont) * 5.5); position: absolute; left: 0; top: 0; flex-direction: column; text-align: center; }
.notice .lst .top a .year span { display: block; font-weight: 800; font-size: calc(var(--mainfont) * 1.6); }
.notice .lst .top a .year em { display: block; font-size: var(--mainfont); font-weight: 500; }
.notice .lst .top a .txtBox { width: 100%; }
.notice .lst .top a .txtBox p.tit { color: #000; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--mainfont) * 1.1); line-height: var(--basicLine); font-weight: bold; position: relative; }
.notice .lst .top a .txtBox p.tit.new { padding-left: calc(var(--mainfont) * 1.75); }
.notice .lst .top a .txtBox p.tit.new::before { position: absolute; content: "N"; left: 0; top: 50%; transform: translateY(-50%); color: #fff; width: calc(var(--mainfont) * 1.25); height: calc(var(--mainfont) * 1.25); border-radius: 0.25rem; background: #3083FF; display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--mainfont) * 0.7); }
.notice .lst .top a .txtBox p.txt { color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: var(--basicLine); font-size: calc(var(--mainfont) * 0.85); margin-top: calc(var(--mainfont) * 0.6); }
.notice .lst .bot { margin-top: calc(var(--mainfont) * 1); padding-top: calc(var(--mainfont) * 0.25); border-top: 1px solid #CCCCCC; }
.notice .lst .bot ul li:nth-child(n + 4) { display: none; }
.notice .lst .bot ul li a { padding: calc(var(--mainfont) * 0.6) calc(var(--mainfont) * 5.5) calc(var(--mainfont) * 0.6) 0; color: #000000; font-weight: 500; font-size: var(--mainfont); line-height: var(--basicLine); font-weight: 500; position: relative; display: block; border-top: 1px dashed #DBDBDB; }
.notice .lst .bot ul li:first-child a { border-top: none; }
.notice .lst .bot ul li:last-child a { padding-bottom: 0; }
.notice .lst .bot ul li a p { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice .lst .bot ul li a span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #666666; font-size: calc(var(--mainfont) * 0.9); }
.notice .lst .no_data { display: flex; align-items: center; justify-content: center; background: #e1e1e1; border-radius: var(--radius); font-size: calc(var(--mainfont) * 0.9); font-weight: 500; width: 100%; height: 15rem; }
/* 새소식 : active */
.notice .lst .bot ul li a:hover p,
.notice .lst .bot ul li a:focus p,
.notice .lst .top a:hover p,
.notice .lst .top a:focus p {  text-decoration: underline; }

/* 팝업존 */
.popupzone { position: relative; }
.popupzone .titWrap { display: flex; align-items: center; justify-content: space-between; }
.popupzone .titWrap h2 { line-height: calc(var(--mainfont) * 2.4); }
.popupzone .control { display: flex; align-items: center; gap: 0; }
.popupzone .control .page { display: inline-flex; align-items: center; border-radius: calc(var(--radius) * 2.5); background: #f1f7ff; padding: 0 calc(var(--mainfont) * 1.2); height: calc(var(--mainfont) * 2.4); justify-content: center; font-family: 'pretendard-gov'; font-size: calc(var(--mainfont) * 1.1); line-height: var(--basicLine); font-weight: bold; color: #868a93; line-height: 1; margin-right: calc(var(--mainfont) * 1.2); width: auto !important; }
.popupzone .control .page strong { color: #3083FF; }
.popupzone .control .page span { position: relative; margin-left: calc(var(--mainfont) * 0.8); padding-left: calc(var(--mainfont) * 1); }
.popupzone .control .page span::before { position: absolute; content: ""; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%); background: #868A93; width: 0.2rem; height: 0.2rem; }
.popupzone .control button { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--mainfont) * 2.5); height: calc(var(--mainfont) * 2.4); color: #000; font-size: calc(var(--mainfont) * 1.25); }
.popupzone .control button.pause.play .ri-pause-line,
.popupzone .control button.pause .ri-play-fill { display: none; }
.popupzone .control button.pause .ri-pause-line,
.popupzone .control button.pause.play .ri-play-fill { display: block; }
.popupzone .popup { margin-top: calc(var(--mainfont) * 1.2); border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #e1e1e1; }
.popupzone .swiper-slide a { display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; width: 100%; height: 15.4rem; position: relative; }
.popupzone .swiper-slide a::before { position: absolute; content: ""; width: 100%; height: 100%; background: transparent; border: 2px solid #111; border-radius: var(--radius); opacity: 0; visibility: hidden; z-index: 2; }
.popupzone .swiper-slide a:focus::before { opacity: 1; visibility: visible; }
.popupzone .swiper-slide a img { max-width: 100%; height: 100%; object-fit: cover; }

/* 운영 안내 */
.MC_box4 h2.heading { line-height: calc(var(--mainfont) * 2.5); }
.onInfo { width: 100%; border-radius: calc(var(--radius) * 1); background: #f2f7ff; padding: calc(var(--mainfont) * 1) calc(var(--mainfont) * 1.3); margin-top: calc(var(--mainfont) * 1); }
.onInfo .week { display: flex; align-items: center; justify-content: start; gap: calc(var(--mainfont) * 0.52); padding: 0 calc(var(--mainfont) * 0.2); }
.onInfo .week li { border-radius: 50%; background: #fff; color: #07254C; font-size: calc(var(--mainfont) * 0.9); font-weight: bold; line-height: var(--basicLine); flex: 1; aspect-ratio: 1/1; display: inline-flex; align-items: center; justify-content: center; max-width: calc((100% - calc(var(--mainfont) * 2.6)) / 6); }
.onInfo .time { background: #D4E5FF; display: flex; align-items: center; justify-content: center; gap: calc(var(--mainfont) * 0.4); border-radius: calc(var(--mainfont) * 0.6); padding: calc(var(--mainfont) * 0.52); color: #000000; font-size: calc(var(--mainfont) * 0.9); font-weight: bold; line-height: var(--basicLine); margin: calc(var(--mainfont) * 0.6) 0 calc(var(--mainfont) * 0.7); }
.onInfo .time img { font-size: 0; line-height: 0; max-width: calc(var(--mainfont) * 1); }
.onInfo .txt { font-size: calc(var(--mainfont) * 0.75); font-weight: 400; color: #333; border-radius: calc(var(--mainfont) * 0.6); padding: calc(var(--mainfont) * 0.65) calc(var(--mainfont) * 0.8);  background: #fff; line-height: calc(var(--basicLine) * 1.066); }
.onInfo .txt p.top { font-weight: bold; font-size: calc(var(--mainfont) * 0.85); }
.onInfo .txt p.bot { margin-top: calc(var(--mainfont) * 0.35); }
.onInfo .txt strong { font-weight: bold; color: #C91D1D; }

/* 온라인 단체 예약 */
.online { position: relative; }
.online h2 { line-height: var(--basicLine); padding-left: calc(var(--mainfont) * 0.8); }
.online h2 span { color: #254EAF; }
.online .onBox { padding: calc(var(--mainfont) * 3); border-radius: calc(var(--radius) * 2); background: #fff; margin-top: calc(var(--mainfont) * 1.2); display: flex; flex-wrap: wrap; gap: calc(var(--mainfont) * 1.5) 0; justify-content: space-between; min-height: 27.05rem; }
.online .onBox .calneder { flex: 1; overflow: hidden; }
.online .onBox .dateView { margin: 0 0 0 calc(var(--mainfont) * 2); width: 37rem; }
.online .calneder .cln-Top { display: flex; align-items: center; justify-content: space-between; }
.online .calneder .cln-Top .lft { display: inline-flex; align-items: center; gap: calc(var(--mainfont) * 1.6); }
.online .calneder .cln-Top .lft > span { display: inline-flex; align-items: center; gap: calc(var(--mainfont) * 0.8); color: #000000; font-size: calc(var(--mainfont) * 1.4); font-weight: bold; line-height: var(--basicLine); font-family: "STUNNING"; }
.online .calneder .cln-Top .lft > span > img { max-width: calc(var(--mainfont) * 1.8); }
.online .calneder .cln-Top .lft .control { display: inline-flex; align-items: center; gap: calc(var(--mainfont) * 0.8); }
.online .calneder .cln-Top .lft .control button { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--mainfont) * 1.6); height: calc(var(--mainfont) * 1.6); color: #000; font-size: calc(var(--mainfont) * 1.25); }
.online .calneder .cln-Top .rgt ul { display: flex; align-items: center; gap: calc(var(--mainfont) * 0.4); }
.online .calneder .cln-Top .rgt ul li { display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--radius) * 2.5); border: 2px solid transparent; background: #E9E9E9; color: #949494; font-size: calc(var(--mainfont) * 0.9); font-weight: 500; line-height: var(--basicLine); height: calc(var(--mainfont) * 1.95); padding: 0 calc(var(--mainfont) * 0.8); }
.online .calneder .cln-Top .rgt ul li.today { background: #fff; color: #000000; border-color: #000; }

.online .calneder .cln-Top .rgt ul li.holiday { background: #FFE3E3; color: #C91D1D; border-color: transparent; }

.online .calneder .cln-main { margin-top: calc(var(--mainfont) * 0.85); }
.online .calneder .cln-main table {  border-collapse: separate;  border-spacing: calc(var(--mainfont) * 0.4) 0;}
.online .calneder .cln-main table th,
.online .calneder .cln-main table td { text-align: center; vertical-align: middle; }
.online .calneder .cln-main table thead th { font-weight: 600; font-size: calc(var(--mainfont) * 0.9); line-height: var(--basicLine); color: #000000; height: 2.5rem; border-bottom: 2px solid #000; }
.online .calneder .cln-main table thead th.sun { color: #D15252; }
.online .calneder .cln-main table thead th.sat { color: #185B9F; }
.online .calneder .cln-main table tbody { height: 15.6rem; }
.online .calneder .cln-main table tbody td { height: 3rem; padding-top: 1rem; color: #333333; font-size: calc(var(--mainfont) * 0.9); line-height: var(--basicLine); font-weight: 500; }
.online .calneder .cln-main table tbody td button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; padding: 0; line-height: 1; border: 2px solid transparent; }
.online .calneder .cln-main table tbody td.holiday button,
.online .calneder .cln-main table tbody td.noWork button,
.online .calneder .cln-main table tbody td.prevDate button { pointer-events: none !important; }
.online .calneder .cln-main table tbody td.today button { border-color: #000; }
.online .calneder .cln-main table tbody td.slct button { border-color: #3083FF; background: #3083FF; color: #fff !important; }
.online .calneder .cln-main table tbody td.noWork { color: #949494; }
.online .calneder .cln-main table tbody td.noWork button { background: #E9E9E9; }
/* .online .calneder .cln-main table tbody td.slct { color: #fff; } */
.online .calneder .cln-main table tbody td.holiday button { border-color: #FFE3E3; background: #FFE3E3; color: #C91D1D !important; }
.online .calneder .cln-main table tbody td.sat.prevDate,
.online .calneder .cln-main table tbody td.sun.prevDate,
.online .calneder .cln-main table tbody td.prevDate { color: rgba(51,51,51,0.3); }
.online .calneder .cln-main table tbody td.sun { color: #D15252; }
.online .calneder .cln-main table tbody td.sat { color: #185B9F; }
.online .calneder .cln-main table tbody td.today { color: #000; }
.online .dateView h4 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000000; line-height: calc(var(--mainfont) * 2.1); font-size: calc(var(--mainfont) * 1.2); font-weight: bold; }
.online .dateView h4 span { color: #254eaf; margin-right: calc(var(--mainfont) * 0.25); }
.online .dateView .lst { margin-top: calc(var(--mainfont) * 0.8);
    --lstHeight: 4.7rem;
}
.online .dateView .lst > ul { max-height: calc(calc(var(--lstHeight) * 3) + (var(--mainfont) * 1.2)); overflow-y: auto; display: flex; flex-direction: column; gap: calc(var(--mainfont) * 0.6); }
.online .dateView .lst > ul.is-scroll { padding-right: calc(var(--mainfont) * 0.8); }
.online .dateView .lst > ul::-webkit-scrollbar { width: 0.3rem; border-radius: 0.4rem; }
.online .dateView .lst > ul::-webkit-scrollbar-thumb { background: #949494; border-radius: 0.4rem; }
.online .dateView .lst > ul::-webkit-scrollbar-track { background: #F2F2F2;  border-radius: 0.4rem;}
.online .dateView .lst > ul::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.online .dateView .lst > ul > li { position: relative; }
.online .dateView .lst > ul > li > a { border-radius: calc(var(--radius) * 0.6); border: 1px solid #bcc0c7; width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--lstHeight); padding: calc(var(--mainfont) * 1) calc(var(--mainfont) * 1.2); gap: calc(var(--mainfont) * 1); }
.online .dateView .lst > ul > li > a > p { position: relative; font-size: calc(var(--mainfont) * 0.9); color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online .dateView .lst > ul > li.end > a > p { padding-right: calc(var(--mainfont) * 3.1); line-height: calc(var(--mainfont) * 1.5); max-width: calc(100% - calc(var(--mainfont) * 3.5)); }
.online .dateView .lst > ul > li.end > a > p:after { display: inline-flex; align-items: center; justify-content: center; color: #fff; content: "마감"; border-radius: calc(var(--radius) * 0.2); background: #c91d1d; height: calc(var(--mainfont) * 1.5); padding: 0 calc(var(--mainfont) * 0.6); right: 0; top: 50%; transform: translateY(-50%); position: absolute; }
.online .dateView .lst > ul > li > a > span { color: #000; font-size: calc(var(--mainfont) * 0.9); font-weight: 600; }
.online .dateView .lst > ul > li .hoverLst { position: absolute; left: calc(var(--mainfont) * 1.2); top: calc(100% - calc(var(--mainfont) * 0.725)); width: calc(100% - calc(var(--mainfont) * 2.4)); border: 1px solid #000000; background: #fff; box-shadow: 0px -2px 10px rgba(0,0,0,0.15); z-index: 1; border-radius: 0 0.4rem 0.4rem 0.4rem; padding: calc(var(--mainfont) * 0.8) calc(var(--mainfont) * 1); opacity: 0; visibility: hidden; }

@media screen and (min-width: 481px) {
    .online .dateView .lst > ul > li:nth-child(3n) .hoverLst { bottom: calc(100% - calc(var(--mainfont) * 0.725)); top: auto; border-radius: 0.4rem 0.4rem 0.4rem 0; }
}

.online .dateView .lst > ul > li .hoverLst > ul { display: flex; flex-direction: column; gap: var(--mainfont); }
.online .dateView .lst > ul > li .hoverLst > ul > li { display: flex; align-items: center; width: 100%; position: relative; padding-left: calc(var(--mainfont) * 0.75); justify-content: space-between; color: #000; font-size: calc(var(--mainfont) * 0.75); }
.online .dateView .lst > ul > li .hoverLst > ul > li::before { position: absolute; content: ""; border-radius: 50%; top: 50%; transform: translateY(-50%); left: 0; width: 0.25rem; height: 0.25rem; background: #3083ff; }
.online .dateView .lst > ul > li .hoverLst > ul > li + li:after {width: 100%; border-top: 1px dashed #d9d9d9; height: 1px; position: absolute; left: 0; top: calc(var(--mainfont) / -2); content: ""; }
.online .dateView .lst > ul > li .hoverLst > ul > li > p { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: calc(var(--mainfont) * 0.5); }
.online .dateView .lst > ul > li .hoverLst > ul > li > .detail { display: inline-flex; align-items: center; gap: var(--mainfont); }
.online .dateView .lst > ul > li .hoverLst > ul > li > .detail > em { display: inline-block; min-width: calc(var(--mainfont) * 2.5); text-align: end; }
.online .dateView .lst > a { display: flex; align-items: center; justify-content: center; color: #fff; margin-top: calc(var(--mainfont) * 1.1); background: #000000; font-size: calc(var(--mainfont) * 0.9); font-weight: bold; padding: 0 calc(var(--mainfont) * 1); border-radius: calc(var(--radius) * 2.5); height: calc(var(--mainfont) * 2.55); }
/* 온라인 단체 예약 : active */
.online .dateView .lst > ul > li .hoverLst { transition: 0.2s ease-in-out; }
.online .dateView .lst > ul > li:has( > a:hover, > a:focus) .hoverLst { opacity: 1; visibility: visible; }

/* 과학관 예약 달력 : 예약불가일도 선택 가능 ( nfu/la/science/scienceRsvt.jsp 인라인 style 이전 - X-XSS-Nightmare 진단 조치 ) */
.online .calneder .cln-main table tbody#clnBody td.noWork:not(.prevDate) button {
    pointer-events: auto !important;
    cursor: pointer;
}

/****** 반응형 ******/
@media screen and (max-width: 1920px) {
    /* 메인비주얼 */
    .visual .slogan { right: 21vw; transform: none; left: auto; }
    .visual .cntBtn { right: 24.11vw; transform: none; left: auto; }
}

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

    /* 온라인 단체 예약 */
    .online .onBox .dateView { width: 40%; }
}

@media screen and (max-width: 1540px) {
    /* 메인비주얼 */
    .visual .slogan { right: 16vw; }
    .visual .cntBtn { right: 20.11vw; }

    /* 온라인 단체 예약 */
    .online .onBox { min-height: auto !important; }
   
}

@media screen and (max-width: 1340px) {
    /* 온라인 단체 예약 */
    .MC_box4 h2.heading { line-height: calc(var(--mainfont) * 2.4); }
    .onInfo { margin-top: calc(var(--mainfont) * 1.2); height: 15.4rem; display: flex; flex-direction: column; justify-content: center; }
    .onInfo .week li { flex: none; aspect-ratio: unset; width: 2rem; height: 2rem; }
    .onInfo .week { justify-content: center; }
}

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

    /* 온라인 단체 예약 */
    .online .onBox { padding: calc(var(--mainfont) * 2); } 
}

@media screen and (max-width: 1024px) {
    /* 온라인 단체 예약 */
    .online .onBox { gap: calc(var(--mainfont) * 2); }
    .online .onBox .calneder { flex: none; width: 100%; }
    .online .onBox .dateView { margin: 0; width: 100%; }
    .online .dateView .lst {
        --lstHeight: 4rem;
    }
}

@media screen and (max-width: 968px) {
    .visual .swiper-slide .img img { margin-right: 20.66vw; width: 200%; }
}

@media screen and (max-width: 860px) {
    /* 메인비주얼 */
    .visual .slogan { right: 10vw; }
    .visual .cntBtn { right: 15vw; }

    /* 팝업존 */
    .popupzone .swiper-slide a { height: auto; }
    .popupzone .popup { margin-top: calc(var(--mainfont) * 1.5); }

    /* 게시판 */
    .notice .lst { margin-top: calc(var(--mainfont) * 1); }
    .notice .lst .no_data { height: 12.5rem; }

    .onInfo { height: auto; }
}

@media screen and (max-width: 768px) {
    .visual .swiper-slide .img { border-radius: 0 0 calc(var(--radius) * 3) calc(var(--radius) * 3); }
    .visual .slogan { top: 6.45vw; width: auto; right: 7vw; }
    .visual .slogan span.top { font-size: calc(var(--mainfont) * 0.75); }
    .visual .slogan .bot {margin-top: calc(var(--mainfont) * 0.5); font-size: calc(var(--mainfont) * 1.5);  }
    .visual .slogan .bot span { font-size: calc(var(--mainfont) * 2);}
    .visual .cntBtn .pagenation .bar { width: calc(var(--mainfont) * 4); }
    .visual .cntBtn { gap: calc(var(--mainfont) * 0.4); bottom: 5.21vw; right: 7vw; }
    .visual .cntBtn button { width: calc(var(--mainfont) * 1.4); height: calc(var(--mainfont) * 1.4); }

    /* 온라인 단체 예약 */
    .online .onBox { padding: calc(var(--mainfont) * 2) calc(var(--mainfont) * 1.5); }
    .online .calneder .cln-Top { flex-wrap: wrap; gap: calc(var(--mainfont) * 0.75) calc(var(--mainfont) * 0.5); }
    .online .calneder .cln-Top .rgt  { width: 100%; }
    .online .calneder .cln-Top .rgt ul { justify-content: end; }
    .online .calneder .cln-Top .rgt ul li { padding: 0 calc(var(--mainfont) * 0.65); }
    .online .calneder .cln-Top .lft > span { gap: calc(var(--mainfont) * 0.65); }
    .online .calneder .cln-Top .lft { gap: calc(var(--mainfont) * 1.25); flex: 1; justify-content: space-between; position: relative; }
    .online .calneder .cln-Top .lft > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .online .calneder .cln-Top .lft > span > img { display: none; }
    .online .calneder .cln-Top .lft .control { width: 100%; justify-content: space-between; } 
}

@media screen and (max-width: 480px) {
    .btn_more { width: calc(var(--mainfont) * 2); height: calc(var(--mainfont) * 2); }

    .visual .swiper-slide .img img { margin-right: 25vw; }
    .visual .swiper-slide .img { border-radius: 0 0 calc(var(--radius) * 1.5) calc(var(--radius) * 1.5); }
    .visual .slogan { top: 5vw; width: auto; right: 6vw; }
    .visual .slogan span.top { font-size: calc(var(--mainfont) * 0.7); }
    .visual .slogan .bot {margin-top: calc(var(--mainfont) * 0.5); font-size: calc(var(--mainfont) * 1.35);  }
    .visual .slogan .bot span { font-size: calc(var(--mainfont) * 1.85);}
    .visual .cntBtn .pagenation .bar { width: calc(var(--mainfont) * 3.5); }
    .visual .cntBtn { gap: calc(var(--mainfont) * 0.4); bottom: 4.5vw; right: 6vw; }
    .visual .cntBtn button { width: calc(var(--mainfont) * 1.25); height: calc(var(--mainfont) * 1.25); }
    .visual .cntBtn .pagenation { gap: 0.5rem; }

    /* 게시판 */
    .notice .titWrap h2 { line-height: calc(var(--mainfont) * 2); }
    .notice .lst .bot ul li:nth-child(n + 2) { display: none; }
    .notice .lst .top a .txtBox p.txt { display: none; } 
    .notice .lst .top a .txtBox p.tit { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: wrap; line-height: calc(var(--mainfont) * 1.75); }
    .notice .lst .top a { align-items: start; min-height: calc(var(--mainfont) * 5.25); padding-left: calc(var(--mainfont) * 6.25); }
    .notice .lst .top a .txtBox p.tit.new { padding-left: 0; }
    .notice .lst .top a .txtBox p.tit.new::before { position: unset; transform: none; height: calc(var(--mainfont) * 1.5); width: calc(var(--mainfont) * 1.5); font-size: calc(var(--mainfont) * 0.85); margin-right: calc(var(--mainfont) * 0.35); margin-top: calc(var(--mainfont) * 0.1); }
    .notice .lst .top a .year { width: calc(var(--mainfont) * 5.25); height: calc(var(--mainfont) * 5.25); }
    .notice .lst .no_data { height: 9.5rem; }

    /* 온라인 단체 예약 */
    .online .calneder .cln-main { margin-top: calc(var(--mainfont) * 0.75); }
    .online .calneder .cln-main table thead th { height: 2.25rem; }
    .online .calneder .cln-main table tbody td { height: 2.5rem; padding-top: 0.5rem; }
    .online .calneder .cln-main table tbody td button { width: 1.75rem; height: 1.75rem; }
    .online .calneder .cln-main table tbody { height: auto; }
    .online .dateView .lst > ul { max-height: calc(calc(var(--lstHeight) * 4) + (var(--mainfont) * 1.8)); }
    .online .dateView .lst > ul > li:nth-child(4n) .hoverLst { bottom: calc(100% - calc(var(--mainfont) * 0.725)); top: auto; border-radius: 0.4rem 0.4rem 0.4rem 0; }
    .online h2 { display: flex; flex-direction: column; white-space: wrap; word-break: keep-all; }


    .popupzone .popup,
    .onInfo  { margin-top: calc(var(--mainfont) * 1); }
    .MC_box4 h2.heading { line-height: calc(var(--mainfont) * 2); }
    .onInfo .week li { width: auto; height: auto; flex: 1; aspect-ratio: 1/1; }
}

@media screen and (max-width: 380px) {
    .visual .swiper-slide .img img { margin-right: 40vw; }
    .visual .slogan span.top { font-size: calc(var(--mainfont) * 0.65); }
    .visual .slogan .bot {font-size: calc(var(--mainfont) * 1.2);  }
    .visual .slogan .bot span { font-size: calc(var(--mainfont) * 1.5); }
    .visual .cntBtn .pagenation { font-size: calc(var(--mainfont) * 0.7); }
    .visual .cntBtn button { width: var(--mainfont); height: var(--mainfont); font-size: calc(var(--mainfont) * 0.9); }

    /* 온라인 단체 예약 */
    .online .onBox { padding: calc(var(--mainfont) * 1.75) calc(var(--mainfont) * 1.25); }
    .online .calneder .cln-main table tbody td button { width: 1.5rem; height: 1.5rem; } 
    .online .calneder .cln-main table thead th,
    .online .calneder .cln-main table tbody td { height: 2rem; }
    .online .calneder .cln-main table tbody td,
    .online .calneder .cln-main table th { font-size: calc(var(--mainfont) * 0.85) !important; }
    .online .calneder .cln-main table thead th { border-width: 1.3px; }
    .online .calneder .cln-main table { border-spacing: calc(var(--mainfont) * 0.3) 0; }  
    .online .dateView .lst > ul > li .hoverLst > ul > li { flex-direction: column; gap: 0.25rem; align-items: start; }
    .online .dateView .lst > ul > li .hoverLst > ul > li::before { transform: none; top: calc(var(--mainfont) * 0.25); }
    .online .dateView .lst > ul > li .hoverLst { padding: calc(var(--mainfont) * 0.6) calc(var(--mainfont) * 0.75); }
    .online .dateView .lst > ul > li .hoverLst > ul > li > .detail { width: 100%; justify-content: space-between; }
}

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

    /* 게시판 */
    .notice .lst .no_data { height: 8.5rem; }
    .notice .lst .bot ul li a { padding: calc(var(--mainfont) * 0.6) calc(var(--mainfont) * 4.5) calc(var(--mainfont) * 0.6) 0; } 

    .notice .lst .top a .txtBox p.tit { line-height: calc(var(--mainfont) * 1.6); }
    .notice .lst .top a { min-height: calc(var(--mainfont) * 4.8); padding-left: calc(var(--mainfont) * 5.65); }
    .notice .lst .top a .txtBox p.tit.new::before { position: unset; transform: none; height: calc(var(--mainfont) * 1.25); width: calc(var(--mainfont) * 1.25); font-size: calc(var(--mainfont) * 0.8); margin-top: 0; }
    .notice .lst .top a .year { width: calc(var(--mainfont) * 4.8); height: calc(var(--mainfont) * 4.8); }

    /* 팝업존 */
    .popupzone .popup { margin-top: calc(var(--mainfont) * 0.75); }
    .popupzone .control .page span { padding-left: calc(var(--mainfont) * 0.8); margin-left: calc(var(--mainfont) * 0.6); }
    .popupzone .control .page { margin-right: calc(var(--mainfont) * 0.5); height: calc(var(--mainfont) * 2); padding: 0 calc(var(--mainfont) * 0.75);  font-size: calc(var(--mainfont) * 1); }
    .popupzone .control button { padding: 0; width: calc(var(--mainfont) * 2); height: calc(var(--mainfont) * 2); font-size: calc(var(--mainfont) * 1.1); }

    /* 온라인 단체 예약 */
    .online .dateView .lst > ul > li.end > a > p { max-width: 100%; }
    .online .onBox { padding: calc(var(--mainfont) * 1.5) calc(var(--mainfont) * 1); }
    .online .calneder .cln-Top .lft > span { font-size: calc(var(--mainfont) * 1.25); }
    .online .calneder .cln-main table tbody td,
    .online .calneder .cln-main table th { font-size: calc(var(--mainfont) * 0.8) !important; }
    .online .dateView .lst > ul > li > a { padding: calc(var(--mainfont) * 0.85) calc(var(--mainfont) * 1); flex-direction: column; align-items: start; gap: calc(var(--mainfont) * 0.35); }
    .online .dateView .lst > ul > li .hoverLst { width: calc(100% - calc(var(--mainfont) * 2)); left: calc(var(--mainfont) * 1); }

}