/* 공통 */
h2.heading { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(var(--Titfont) * 1.6); font-weight: bold; line-height: 1.3; color: #000; 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%; border: 1px solid #CCCCCC; background: #fff; width: calc(var(--mainfont) * 2); height: calc(var(--mainfont) * 2); color: #000; font-size: var(--mainfont); transition: 0.2s ease-in-out; }
.btn_more:hover,
.btn_more:focus { transform: rotate(180deg); }

/* 메인비주얼 */
.visual { position: relative; width: 100%; height: 100%; }  
.visual .swiper { border-radius: calc(var(--radius) * 1.5) calc(var(--radius) * 4) calc(var(--radius) * 1.5) calc(var(--radius) * 1.5); overflow: hidden; isolation: isolate; height: 100%; background: #e1e1e1; }
.visual .cntBtn { position: absolute; left: 3.5rem; bottom: 3rem; z-index: 2; display: flex; align-items: center; padding: calc(var(--mainfont) * 0.6) calc(var(--mainfont) * 1.5); border-radius: calc(var(--radius) * 2.5); background: rgba(0,0,0,0.6); box-shadow: 0px 0px 10px rgba(0,0,0,0.25); }

.visual .cntBtn.fst { background: rgba(255,255,255,0.22); }

.visual .cntBtn button { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--mainfont) * 1.2); height: calc(var(--mainfont) * 1.2); color: #fff; font-size: calc(var(--mainfont) * 1); }
.visual .cntBtn button.pause .ri-pause-line { display: block; }
.visual .cntBtn button.pause .ri-play-fill { display: none; }
.visual .cntBtn button.play .ri-pause-line { display: none; }
.visual .cntBtn button.play .ri-play-fill { display: block; }
.visual .swiper .swiper-slide p { display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; width: 100%; height: 100%; }
.visual .swiper .swiper-slide p img { width: 100%; }
.visual .swiper-pagination { display: flex; gap: calc(var(--boxGap) * 1); position: unset !important; margin-right: var(--boxGap); }
.visual .swiper-pagination .swiper-pagination-bullet { width: 0.5rem; height: 0.5rem; background: rgba(255,255,255,0.5); }
.visual .swiper-pagination .swiper-pagination-bullet-active { background: #fff; }

/* 오늘의 날씨 */
.weather > p { font-size: calc(var(--mainfont) * 0.9); font-weight: 600; line-height: var(--basicLine); color: #fff; display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--boxGap) * 0.25) calc(var(--boxGap) * 0.6); padding-left: var(--boxGap); margin-bottom: calc(var(--boxGap) * 0.8); text-shadow: 0px 0px 10px rgba(0,0,0,0.4); }
.weather > p > strong { font-weight: bold; font-size: calc(var(--mainfont) * 1); }
/* .weather > .box { border-radius: calc(var(--radius) * 1.5); background: rgba(34,136,226,0.2); padding: calc(var(--boxGap) * 1.2) calc(var(--boxGap) * 1.5) calc(var(--boxGap) * 1); display: flex; flex-wrap: wrap; } */
.weather > .box { position: relative; border-radius: calc(var(--radius) * 1.5); background: linear-gradient(-45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 45%), rgba(34,136,226,0.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), inset 0 -1px 0px rgba(255,255,255,0.5), inset 0 0 3px rgba(255,255,255,0.5), 0 8px 20px rgba(255,255,255,0.3); padding: calc(var(--boxGap) * 1.2) calc(var(--boxGap) * 1.5) calc(var(--boxGap) * 1); display: flex; flex-wrap: wrap; }
.weather > .box::before { position: absolute; content: ""; right: 1.45rem; top: -1.6rem; width: 7rem; height: 7.5rem; background: url('/00_common/images/template/T0001/main/sun_ico.png') no-repeat center center / contain; }
.weather > .box > span { font-size: calc(var(--mainfont) * 2.2); font-weight: bold; font-family: 'SUITE'; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.2); display: block; width: 100%; margin-bottom: calc(var(--boxGap) * 0.4); }
.weather > .box > p,
.weather > .box > em { display: block; font-size: calc(var(--mainfont) * 0.85); line-height: var(--basicLine); font-weight: 600; text-shadow: 0px 0px 10px rgba(0,0,0,0.4); color: #fff; width: 100%; }

/* 프로그램 예약 */
.program { position: relative; padding: calc(var(--boxGap) * 2) calc(var(--boxGap) * 1.5); background: linear-gradient(to left bottom, #2351fa, #001d47); border-radius: calc(var(--radius) * 1.5); height: 100%; width: 100%; }
.program h2.heading { color: #fff; font-size:  calc(var(--Titfont) * 1.5); line-height: var(--basicLine); }
.program p { color: #fff; font-size: calc(var(--mainfont) * 0.85); line-height: var(--basicLine); margin: calc(var(--boxGap) * 0.6) 0 calc(var(--boxGap) * 1); }
.program img { position: absolute; right: calc(var(--boxGap) * 1.5); bottom: calc(var(--boxGap) * 2); max-width: calc(var(--mainfont) * 4); }
.program a { display: inline-flex; align-items: center; justify-content: start; gap: calc(var(--boxGap) * 0.8); color: #fff; font-size: calc(var(--mainfont) * 0.85); line-height: var(--basicLine); font-weight: bold; padding: calc(var(--boxGap) * 0.7) 0; position: relative; }
.program a::before { position: absolute; content: ""; bottom: 0; left: 0; height: 1px; width: 100%; border-bottom: 1px dashed #CCCCCC; }
.program a::after { position: absolute; content: ""; bottom: 0; left: 0; height: 1px; width: 0%; border-bottom: 1px solid #CCCCCC; transition: 0.3s ease-in-out; }
.program a i { font-weight: 400; font-size: calc(var(--mainfont) * 1); transition: 0.2s ease-in-out; }
/* 프로그램 예약 : active */
.program:hover a::after,
.program a:focus::after { width: 100%; }
.program:hover a i,
.program a:focus i { transform: rotate(45deg); }

/* 주요 서비스 */
.service .titWrap { display: flex; flex-direction: column; width: 13.3rem; overflow: hidden; padding-right: var(--boxGap); }
.service .titWrap > img { max-width: calc(var(--mainfont) * 2.3); }
.service .titWrap > h2.heading { margin: calc(var(--boxGap) * 0.75) 0 calc(var(--boxGap) * 0.6); flex: none; max-width: 100%; }
.service .titWrap > p { color: #555555; font-size: calc(var(--mainfont) * 0.85); line-height: var(--basicLine); }
.service .lst { flex: 1; }
.service .lst ul { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--boxGap) * 4); }
.service .lst ul li { flex: 1; }
.service .lst ul li a { display: flex; flex-direction: column; gap: calc(var(--boxGap) * 1.2); }
.service .lst ul li a .img { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--mainfont) * 6.1); height: calc(var(--mainfont) * 6.1); border-radius: calc(var(--radius) * 1.5); background: #f5f5f5; position: relative; transition: 0.2s ease-in-out; z-index: 1; margin: 0 auto; }
.service .lst ul li a .img:before { position: absolute; content: ""; left: calc(var(--mainfont) * 0.6); top: 0; width: 100%; height: 100%; background: rgba(35,81,250,0.2); border-radius: calc(var(--radius) * 1.5); opacity: 0; visibility: hidden; transition: 0.2s ease-in-out; z-index: -1; }
.service .lst ul li a .img img { max-width: calc(var(--mainfont) * 2); transition: 0.2s ease-in-out; }
.service .lst ul li a .txt { font-size: calc(var(--mainfont) * 1.1); font-weight: 500; line-height: calc((var(--mainfont) * 2.9) / 2); text-align: center; word-break: keep-all; overflow: hidden; height: calc(var(--mainfont) * 2.9); transition: 0.2s ease-in-out; }
/* 주요 서비스 : active */ 
.service .lst ul li a:hover .img,
.service .lst ul li a:focus .img { background: #2351FA; }
.service .lst ul li a:hover .img img,
.service .lst ul li a:focus .img img { filter: brightness(0) invert(1); }
.service .lst ul li a:hover .img:before,
.service .lst ul li a:focus .img:before { transform: rotate(35deg); opacity: 1; visibility: visible; }
.service .lst ul li a:hover .txt,
.service .lst ul li a:focus .txt { font-weight: bold; }

/* 교수학습지원 */
.link { position: relative; width: 100%; height: 100%; }
.link .titWrap { margin-bottom: calc(var(--boxGap) * 1.5); }
.link .titWrap h2.heading { width: 100%; }
.link .titWrap p { display: block; margin-top: calc(var(--boxGap) * 0.6); color: #555555; font-size: calc(var(--mainfont) * 0.85); line-height: var(--basicLine); }
.link .lst { position: relative; } 
.link .lst > img { position: absolute; max-width: calc(var(--mainfont) * 18.95); right: calc(var(--mainfont) * -2); top: calc(var(--mainfont) * -4.25); }
.link .lst > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--boxGap) * 0.6); }
.link .lst > ul > li { width: auto;  }
.link .lst > ul > li:nth-child(4) { grid-column: 1; }
.link .lst > ul > li a { display: flex; flex-direction: column; gap: calc(var(--boxGap) * 1); align-items: center; justify-content: center; padding: calc(var(--boxGap) * 1.1); background: #fff; position: relative; border: 1px solid #EAEAEA; border-radius: calc(var(--radius) * 1.2); position: relative; text-align: center; height: calc(var(--mainfont) * 7.85); }
.link .lst > ul > li a::before { position: absolute; content: ""; width: 100%; height: 100%; background: transparent; border: 3px solid #2351fa; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; border-radius: calc(var(--radius) * 1.2); }
.link .lst > ul > li a > img { max-width: calc(var(--mainfont) * 2.7); }
.link .lst > ul > li a > i { display: none !important; }
.link .lst > ul > li a .txt { display: flex; flex-direction: column; gap: calc(var(--boxGap) * 0.25); overflow: hidden; width: 100%; }
.link .lst > ul > li a .txt > span,
.link .lst > ul > li a .txt > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link .lst > ul > li a .txt > span { color: #111; font-size: var(--mainfont); line-height: 1.3; font-weight: 500; }
.link .lst > ul > li a .txt > p { color: #999999; font-size: calc(var(--mainfont) * 0.75); line-height: var(--basicLine); }
/* 교수학습지원 : active */
.link .lst > ul > li a,
.link .lst > ul > li a:before,
.link .lst > ul > li a .txt > span { transition: 0.2s ease-in-out; }
.link .lst > ul > li a:hover,
.link .lst > ul > li a:focus { border-color: transparent; background: linear-gradient(to bottom, #f2f0ff, #fff); }
.link .lst > ul > li a:hover:before,
.link .lst > ul > li a:focus:before { opacity: 1; visibility: visible; }
.link .lst > ul > li a:hover .txt > span,
.link .lst > ul > li a:focus .txt > span { color: #2351FA; font-weight: bold; }

/* 팝업존 */
.popupzone { position: relative; }
.popupzone .titWrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.popupzone .titWrap .control { display: flex; align-items: center; }
.popupzone .titWrap .control .page { display: inline-flex; align-items: center; color: #868A93; font-size: calc(var(--mainfont) * 1.1); line-height: var(--basicLine); margin-right: calc(var(--boxGap) * 0.8); }
.popupzone .titWrap .control .page strong { font-weight: bold; color: #2351FA; }
.popupzone .titWrap .control .page span { position: relative; padding-left: calc(var(--boxGap) * 0.8); margin-left: calc(var(--boxGap) * 0.6); }
.popupzone .titWrap .control .page span::before { position: absolute; content: ""; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%); width: 0.2rem; height: 0.2rem; background: #868a93; } 
.popupzone .titWrap .control button { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--mainfont) * 2); height: calc(var(--mainfont) * 2); color: #000; font-size: calc(var(--mainfont) * 1.2); }
.popupzone .titWrap .control button.pause .ri-play-fill { display: none; }
.popupzone .titWrap .control button.pause.play .ri-play-fill { display: block; }
.popupzone .titWrap .control button.pause.play .ri-pause-line { display: none; }
.popupzone .popup { width: 100%;  margin-top: calc(var(--boxGap) * 1.5); }
.popupzone .popup .swiper { border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #e1e1e1; }
.popupzone .popup .swiper .swiper-slide a { position: relative; display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; width: 100%; height: 16.3rem; }
.popupzone .popup .swiper .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; }
.popupzone .popup .swiper .swiper-slide a:focus::before { opacity: 1; visibility: visible; }
.popupzone .popup .swiper .swiper-slide a img { max-width: 100%; height: 100%; object-fit: contain; width: 100%; }

/* 게시판 */
.notice { position: relative; }  
.notice .tabBox { padding-right: calc(var(--mainfont) * 2.5); }
.notice .tabBox ul { display: flex; flex-wrap: wrap; gap: calc(var(--boxGap) * 2.4); }
.notice .tabBox ul li { position: relative; max-width: calc((100% - calc(var(--boxGap) * 2.4)) / 2); }
.notice .tabBox ul li::before { position: absolute; content: ""; width: 3px; height: calc(var(--mainfont) * 0.8); border-radius: 1.5rem; background: #ccc; top: 50%; right: calc(var(--boxGap) * -1.25); transform: translateY(-50%) rotate(30deg); }
.notice .tabBox ul li:last-child:before { display: none; }
.notice .tabBox ul li a { display: block; max-width: 100%; font-size: calc(var(--mainfont) * 1.6); line-height: 1.3; color: #999; transition: 0.2s ease-in-out; }
.notice .tabBox ul li a.current { color: #111; font-weight: bold; }
.notice .tabBox ul li a span { display: block; white-space: nowrap; overflow: hidden; }

.notice .lst { margin-top: calc(var(--boxGap) * 1.5); display: none; }
.notice .lst.on { display: block; }
.notice .lst .no_data { display: flex; width: 100%; height: 12.4rem; border-radius: var(--radius); align-items: center; justify-content: center; font-size: calc(var(--mainfont) * 0.9); font-weight: 500; background: #e1e1e1; }
.notice .lst .top a { display: flex; align-items: center; gap: var(--boxGap); }
.notice .lst .top a .year { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #CCCCCC; border-radius: calc(var(--radius) * 1.5); width: calc(var(--mainfont) * 5.5); height: calc(var(--mainfont) * 5.5); padding: calc(var(--boxGap) * 1.2); flex-direction: column; }
.notice .lst .top a .year { display: none !important; }
.notice .lst .top a .year span { color: #001d47; font-weight: bold; font-size: calc(var(--mainfont) * 1.8); display: block; }
.notice .lst .top a .year em { font-size: calc(var(--mainfont) * 0.75); display: block; }
.notice .lst .top a .txtBox { flex: 1; overflow: hidden; }
.notice .lst .top a .txtBox p { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.notice .lst .top a .txtBox p.tit { font-size: var(--mainfont); font-weight: bold; line-height: var(--basicLine); }
.notice .lst .top a .txtBox p.tit.new { padding-left: calc(var(--boxGap) * 1.75); }
.notice .lst .top a .txtBox p.tit.new::before { content: "N"; display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: 0.25rem; background: #2351FA; width: calc(var(--mainfont) * 1.25); height: calc(var(--mainfont) * 1.25); font-size: calc(var(--mainfont) * 0.75); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.notice .lst .top a .txtBox p.txt { color: #667186; font-size: calc(var(--mainfont) * 0.85); margin-top: calc(var(--boxGap) * 0.45); line-height: var(--basicLine); }
.notice .lst .bot { margin-top: calc(var(--boxGap) * 0.1); }
.notice .lst .bot > ul > li:nth-child(n + 4) { display: none; }
.notice .lst .bot > ul > li a { display: block; position: relative; padding: calc(var( --boxGap) * 1) calc(var(--boxGap) * 5.1) calc(var(--boxGap) * 1) calc(var(--boxGap) * 0.9); color: #333333; font-size: calc(var(--mainfont) * 0.85); font-weight: 500; }
.notice .lst .bot > ul > li a::before { position: absolute; content: ""; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%); background: #999999; width: 0.3rem; height: 0.3rem; }
.notice .lst .bot > ul > li a span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #666666; font-size: calc(var(--mainfont) * 0.8); }
.notice .lst .bot > ul > li + li a { border-top: 1px dashed #999999; }
.notice .lst .bot > ul > li a p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 게시판 : active */
.notice .lst .top a:hover .txtBox,
.notice .lst .top a:focus .txtBox,
.notice .lst .bot > ul > li a:hover,
.notice .lst .bot > ul > li a:focus { text-decoration: underline; }

/* 과학대회 한눈에 보기 */
.science { position: relative; width: 100%; padding: calc(var(--boxGap) * 3.5) 0 calc(var(--boxGap) * 4.5); background: url('/00_common/images/template/T0001/main/box9_Bg.png')no-repeat center center / cover; }  
.science .container { gap: 0 !important; }
.science .titWrap h2.heading { font-size: calc(var(--Titfont) * 1.6); color: #fff; }
.science .titWrap p { color: #fff; display: block; font-size: calc(var(--mainfont) * 0.85); line-height: calc(var(--basicLine) * 1.06); margin-top: calc(var(--boxGap) * 0.6); }
.science .lst { width: 100%; margin-top: calc(var(--boxGap) * 2.5); }
.science .lst ul { display: flex; flex-wrap: wrap; gap: calc(var(--boxGap) * 1.35); }
.science .lst ul li { width: calc((100% - calc(var(--boxGap) * 4.05)) / 4); }
.science .lst ul li a { display: block; height: 20rem; width: 100%; border-radius: calc(var(--radius) * 1.5); background: #fff; box-shadow: 0px 0px 30px rgba(0,0,0,0.1); padding: calc(var(--boxGap) * 2.5); position: relative; transition: 0.2s ease-in-out; }
.science .lst ul li a > img { position: absolute; right: calc(var(--boxGap) * 2.5); bottom: calc(var(--boxGap) * 2.5); }
.science .lst ul li a span.tit { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--mainfont) * 1.2); font-weight: bold; line-height: var(--basicLine); }
.science .lst ul li a p { color: #444444; font-size: calc(var(--mainfont) * 0.85); line-height: var(--basicLine); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; margin: calc(var(--boxGap) * 2.2) 0 calc(var(--boxGap) * 4.95); }
.science .lst ul li a span.viewMore { display: inline-flex; align-items: center; justify-content: start; gap: calc(var(--boxGap) * 0.8); color: #111; font-size: calc(var(--mainfont) * 0.85); line-height: var(--basicLine); font-weight: bold; padding: calc(var(--boxGap) * 0.7) 0; position: relative; }
.science .lst ul li a span.viewMore::before { position: absolute; content: ""; bottom: 0; left: 0; height: 1px; width: 100%; border-bottom: 1px dashed #CCCCCC; }
.science .lst ul li a span.viewMore::after { position: absolute; content: ""; bottom: 0; left: 0; height: 1px; width: 0%; border-bottom: 1px solid #CCCCCC; transition: 0.3s ease-in-out; }
.science .lst ul li a span.viewMore i { font-weight: 400; font-size: calc(var(--mainfont) * 1); transition: 0.2s ease-in-out; }
/* 과학대회 한눈에 보기 : active */
.science .lst ul li a:hover,
.science .lst ul li a:focus { background: #001D47; margin-top: calc(var(--boxGap) * -2); }
.science .lst ul li a:hover span.tit,
.science .lst ul li a:focus span.tit,
.science .lst ul li a:hover p,
.science .lst ul li a:focus p,
.science .lst ul li a:hover span.viewMore,
.science .lst ul li a:focus span.viewMore { color: #fff; }
.science .lst ul li a:hover span.viewMore::after,
.science .lst ul li a:focus span.viewMore::after { width: 100%; }
.science .lst ul li a:hover span.viewMore i,
.science .lst ul li a:focus span.viewMore i { transform: rotate(45deg); }

/* 시설안내 */
.fcltInfo { position: relative; width: 100%; }
.fcltInfo .titWrap p { color: #555555; font-size: calc(var(--mainfont) * 0.85); line-height: var(--basicLine); margin-top: calc(var(--boxGap) * 0.6); }
.fcltInfo .lst { margin-top: calc(var(--boxGap) * 1.5); height: 22.05rem; }
.fcltInfo .lst ul { display: flex; flex-wrap: wrap; gap: calc(var(--boxGap) * 2); align-items: end; height: 100%; width: calc(100% + 1.5rem); margin-left: -0.75rem; }
.fcltInfo .lst ul li { flex: 1; overflow: hidden; }
.fcltInfo .lst ul li a { display: block; margin: 0 auto; width: calc(100% - 1.5rem); }
.fcltInfo .lst ul li a .img { display: flex; align-items: center; justify-content: center; border-radius: calc(var(--radius) * 1); position: relative; width: 100%; transition: 0.2s ease-in-out; height: 14.3rem; overflow: hidden; }
.fcltInfo .lst ul li a .img::before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.6); border-radius: calc(var(--radius) * 1); left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; }
.fcltInfo .lst ul li a .img::after { position: absolute; content: "\ea13"; background: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #000; font-size: calc(var(--mainfont) * 1.2); width: calc(var(--mainfont) * 2); height: calc(var(--mainfont) * 2); left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; font-family: "remixicon"; }
.fcltInfo .lst ul li a .img img { font-size: 0; line-height: 0; object-fit: cover; width: 100%; height: 100%; }
.fcltInfo .lst ul li a .txt { margin-top: calc(var(--boxGap) * 1.2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: calc(var(--boxGap) * 3.45); position: relative; line-height: calc(var(--mainfont) * 1.55); color: #111; font-weight: 500; }
.fcltInfo .lst ul li a .txt > span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; border: 1px solid #2351FA; background-color: #fff; border-radius: calc(var(--radius) * 0.25); color: #2351FA; gap: calc(var(--boxGap) * 0.2); height: 100%; padding: 0 calc(var(--boxGap) * 0.4); font-size: calc(var(--mainfont) * 0.75); }
/* 시설안내 : active */
.fcltInfo .lst ul li a .img::after,
.fcltInfo .lst ul li a .img::before,
.fcltInfo .lst ul li,
.fcltInfo .lst ul li a,
.fcltInfo .lst ul li a .img { transition: 0.3s ease-in-out; }
.fcltInfo .lst ul li.active { flex: 1.35; }
.fcltInfo .lst ul li.active .img { height: 19.35rem; }
.fcltInfo .lst ul li.active a .img::before,
.fcltInfo .lst ul li.active a .img::after { opacity: 1; visibility: visible; }

/****** 반응형 ******/

@media screen and (max-width: 1640px) {
    /* 주요 서비스 */
    .service .lst ul { gap: calc(var(--boxGap) * 2); }

    /* 시설안내 */
    .fcltInfo .lst ul { margin-left: -0.5rem; width: calc(100% + 1rem); }
    .fcltInfo .lst ul li a { width: calc(100% - 1rem); }
    .fcltInfo .lst ul li.active { flex: 1.2; }
}

@media screen and (max-width: 1440px) {
    /* 프로그램 예약 */
    .program p { display: none; }
    .program a { margin-top: calc(var(--boxGap) * 1.5); }

    /* 주요 서비스 */
    .service .titWrap { width: 100%; }
    .service .titWrap > img,
    .service .titWrap > p { display: none; }
    .service .titWrap > h2.heading { margin: 0 0 calc(var(--boxGap) * 1) 0; }

    .link .lst > ul > li a { height: calc(var(--mainfont) * 7.25); }

    /* 팝업존 */
    .popupzone .popup .swiper .swiper-slide a { height: 15rem; }

    /* 과학대회 한눈에 보기 */
    .science .lst ul li { width: calc((100% - calc(var(--boxGap) * 1.35)) / 2); }
    .science .lst ul li a { height: 15rem; }
    .science .lst ul li a:hover, .science .lst ul li a:focus { margin-top: 0; }
    .science .lst ul li a p { margin: calc(var(--boxGap) * 1) 0 calc(var(--boxGap) * 1.5); }

    /* 시설안내 */
    .fcltInfo .lst { height: auto; }
    .fcltInfo .lst ul { margin-left: 0; width: 100%; gap: calc(var(--boxGap) * 1.5); }
    .fcltInfo .lst ul li a { width:100%; }
    .fcltInfo .lst ul li,
    .fcltInfo .lst ul li.active { flex: none !important; }
    .fcltInfo .lst ul li { width: calc((100% - calc(var(--boxGap) * 4.5)) / 4); }
    .fcltInfo .lst ul li.active .img { height: 14.3rem; }
    .fcltInfo .lst ul li.active a .img::before, 
    .fcltInfo .lst ul li.active a .img::after { opacity: 0; visibility: hidden; }
    .fcltInfo .lst ul li a:hover .img::before, 
    .fcltInfo .lst ul li a:focus .img::before, 
    .fcltInfo .lst ul li a:hover .img::after,
    .fcltInfo .lst ul li a:focus .img::after { opacity: 1 !important; visibility: visible !important; }

}

@media screen and (max-width: 1240px) {
    /* 메인비주얼 */
    .visual .cntBtn { left: 5.65vw; bottom: 4.9vw; } 

    /* 오늘의 날씨 */
    .weather > .box { padding: calc(var(--boxGap) * 1.5); }

    /* 주요 서비스 */
    .service .lst ul li a .img {  width: calc(var(--mainfont) * 5); height: calc(var(--mainfont) * 5); }
    .service .lst ul li a .img img { max-width: calc(var(--mainfont) * 1.85); }
    .service .lst ul { gap: calc(var(--boxGap) * 1.5); }
    .service .lst ul li a .txt { font-size: calc(var(--mainfont) * 0.95); line-height: calc((var(--mainfont) * 2.6) / 2); height: calc(var(--mainfont) * 2.6); padding: 0 calc(var(--boxGap) * 0.5); word-break: break-all; }

    /* 교수학습지원 */
    .link .lst > ul > li a .txt > p,
    .link .titWrap p { display: none; }
    .link .lst > ul > li a { padding: calc(var(--boxGap) * 0.8) calc(var(--boxGap) * 1); gap: calc(var(--boxGap) * 0.5); }
    .link .lst > ul > li a > img { max-width: calc(var(--mainfont) * 2.5); }
    .link .lst > ul > li a .txt { margin-top: calc(var(--boxGap) * 0.35); }
    .link .lst > img { max-width: calc(var(--mainfont) * 17.5); top: calc(var(--mainfont) * -3.75); }

    /* 게시판 */
    .notice .lst .no_data  { height: 10.55rem; }
    .notice .lst .top a .txtBox p.tit.new { padding-left: calc(var(--boxGap) * 2.25); }
    .notice .lst .bot > ul > li a { padding: calc(var( --boxGap) * 1) calc(var(--boxGap) * 6.5) calc(var(--boxGap) * 1) calc(var(--boxGap) * 0.9); }

    /* 과학대회 한눈에 보기 */
    .science { padding: calc(var(--boxGap) * 2.75) 0 calc(var(--boxGap) * 3); background-position: center right 85%; }
    .science .lst ul li a p,
    .science .titWrap p { display: none; }
    .science .lst { margin-top: calc(var(--boxGap) * 1.5); }
    .science .lst ul li a { height: 8.75rem; padding: calc(var(--boxGap) * 2); }
    .science .lst ul li a span.viewMore { margin-top: calc(var(--boxGap) * 2); }
    .science .lst ul li a > img { max-width: calc(var(--mainfont) * 4); }

    /* 팝업존 */
    .popupzone .popup .swiper .swiper-slide a { height: 13.25rem; }

    /* 시설안내 */
    .fcltInfo .lst ul li:nth-child(n + 4) { display: none; }
    .fcltInfo .lst ul li { width: calc((100% - calc(var(--boxGap) * 3)) / 3); }
    .fcltInfo .titWrap p { display: none; }  
    .fcltInfo .lst ul li a .txt { padding-left: calc(var(--boxGap) * 3.85); line-height: calc(var(--mainfont) * 1.55); }

}

@media screen and (max-width: 968px) {
    /* 시설안내 */
    .fcltInfo .lst ul li a .txt { line-height: calc(var(--mainfont) * 1.5); }
}

@media screen and (max-width: 860px) {
    /* 주요 서비스 */
    .service .lst ul { justify-content: start; gap: calc(var(--boxGap) * 1) calc(var(--boxGap) * 3.5); }
    .service .lst ul li { flex: none; width: calc((100% - calc(var(--boxGap) * 14)) / 5); }  
    .service .lst ul li a .img { width: 100%; height: auto; aspect-ratio: 1/1; }
    .service .lst ul li a .img img { max-width: calc(var(--mainfont) * 2); }

    /* 시설안내 */
    .fcltInfo .lst ul li.active .img,
    .fcltInfo .lst ul li a .img { height: 12.5rem; }
    .fcltInfo .lst ul li a .txt { line-height: calc(var(--mainfont) * 1.4); }
}

@media screen and (max-width: 768px) {
    /* 메인비주얼 */
    .visual .swiper { border-radius: calc(var(--radius) * 1.5); }
    .visual .cntBtn { left: 5.65vw; padding: calc(var(--mainfont) * 0.4) calc(var(--mainfont) * 1.25); } 

    /* 프로그램 예약 */
    .program { padding: calc(var(--boxGap) * 2.5) calc(var(--boxGap) * 2); }

    /* 오늘의 날씨 */
    .weather > .box { padding: calc(var(--boxGap) * 2.5) calc(var(--boxGap) * 2); }
    .weather > .box > span { margin-bottom: calc(var(--boxGap) * 0.75)}
    .weather > p { font-size: calc(var(--mainfont) * 1); }

    /* 과학대회 한눈에 보기 */
    .science .lst ul li a { height: 7.5rem; }
    .science .lst ul li a > img { max-width: calc(var(--mainfont) * 2.5); }

    .link .lst > img { display: none; }
    .link .lst > ul { display: flex; flex-wrap: wrap; grid-template-columns: unset; }
    .link .lst > ul > li { width: calc(((100% - calc((var(--boxGap)) * 1.8))) / 4);} 
    .link .lst > ul > li:nth-child(4) { grid-column:unset; }
    .link .lst > ul > li a { height: 100%; padding: calc(var(--boxGap) * 1.5) calc(var(--boxGap) * 1); gap: var(--boxGap); }
    .link .lst > ul > li a .txt > span { -webkit-line-clamp: 2; white-space: wrap; font-size: calc(var(--mainfont) * 0.9); }
    .link .lst > ul > li a > img { max-width: calc(var(--mainfont) * 2.25); }
    .link .lst > ul > li a::before { border-width: 2px; }

    /* 게시판 */
    /* .notice .lst .no_data { height: 12rem; } */
    .notice .lst .bot > ul > li a { padding: calc(var( --boxGap) * 1) calc(var(--boxGap) * 7.5) calc(var(--boxGap) * 1) calc(var(--boxGap) * 0.9); }

    /* 시설안내 */
    .fcltInfo .lst ul li:nth-child(n + 3) { display: none; }
    .fcltInfo .lst ul li { width: calc((100% - calc(var(--boxGap) * 1.5)) / 2); }
    .fcltInfo .lst ul li a .txt { padding-left: calc(var(--boxGap) * 4.5); }
}

@media screen and (max-width: 580px) {
    /* 주요 서비스 */
    .service .lst ul { gap: calc(var(--boxGap) * 1) calc(var(--boxGap) * 3); }
    .service .lst ul li {  width: calc((100% - calc(var(--boxGap) * 9)) / 4); }  

    /* 과학대회 한눈에 보기 */
    .science .lst ul li { width: 100%; }

    /* 게시판 */
    .notice .lst .top a .year { width: calc(var(--mainfont) * 4.75); height: calc(var(--mainfont) * 4.75); padding: calc(var(--boxGap) * 0.85); }
    .notice .lst .top a .txtBox p.txt { margin-top: calc(var(--boxGap) * 1); }
    .notice .lst .no_data { height: 10rem; }

    /* 시설안내 */
    .fcltInfo .lst ul li.active .img, .fcltInfo .lst ul li a .img { height: 10rem; }

}

@media screen and (max-width: 480px) {
    /* 메인비주얼 */
    .visual .cntBtn {padding: calc(var(--mainfont) * 0.25) calc(var(--mainfont) * 1); } 
    .visual .swiper-pagination .swiper-pagination-bullet { width: 0.4rem; height: 0.4rem; }

    /* 주요 서비스 */
    .service .lst ul li a .img:before { left: calc(var(--mainfont) * 0.45); }
    .service .lst ul li a .img img { max-width: calc(var(--mainfont) * 1.5); }
    .service .lst ul li a .img:before,
    .service .lst ul li a .img { border-radius: calc(var(--radius) * 1.25); }
    .service .lst ul li a .txt { font-size: calc(var(--mainfont) * 0.85); line-height: calc((var(--mainfont) * 2.2) / 2); height: calc(var(--mainfont) * 2.2); }

    .link .lst > ul { display: flex; flex-wrap: wrap; grid-template-columns: unset; }
    .link .lst > ul > li { width: calc(((100% - calc((var(--boxGap)) * 1.2))) / 3);} 
    .link .lst > ul > li a .txt > span { font-size: calc(var(--mainfont) * 0.85); }
    .link .lst > ul > li a > img { max-width: calc(var(--mainfont) * 2); }

    /* 팝업존 */
    .popupzone .popup .swiper .swiper-slide a { height: auto; }

    /* 과학대회 한눈에 보기 */
    .science .lst ul li a { height: auto; padding: calc(var(--boxGap) * 3.25) calc(var(--boxGap) * 9) calc(var(--boxGap) * 3.25) calc(var(--boxGap) * 2); border-radius: calc(var(--radius) * 1); }
    .science .lst ul li a span.viewMore { display: none; }
    .science .lst ul li a > img { top: 50%; transform: translateY(-50%); }

    /* 게시판 */
    .notice .lst .top a .year { border-radius: calc(var(--radius) * 0.75); width: calc(var(--mainfont) * 4); height: calc(var(--mainfont) * 4); }
    .notice .lst .top a .year span { font-size: calc(var(--mainfont) * 1.5); }
    .notice .lst .top a .txtBox p.tit.new::before { width: calc(var(--mainfont) * 1.5); height: calc(var(--mainfont) * 1.5); font-size: calc(var(--mainfont) * 0.85); }
    .notice .lst .top a .txtBox p.tit { line-height: calc(var(--mainfont) * 1.5); }
    .notice .lst .top a .txtBox p.tit.new { padding-left: calc(var(--boxGap) * 3.5); }
    .notice .lst .no_data { height: 8rem; }
    .notice .tabBox ul li a { font-size: calc(var(--mainfont) * 1.45); }
    .notice .lst .bot > ul > li:nth-child(n + 3) { display: none; } 
    .notice .lst .bot > ul > li a { padding: calc(var( --boxGap) * 1.5) calc(var(--boxGap) * 8.5) calc(var(--boxGap) * 1.5) calc(var(--boxGap) * 1.25); }

    /* 시설안내 */
    .fcltInfo .lst ul li a .txt { padding-left: calc(var(--boxGap) * 5); }
    .fcltInfo .lst ul li.active .img, .fcltInfo .lst ul li a .img { height: 8.75rem; }
}

@media screen and (max-width: 380px) {
    /* 메인비주얼 */
    .visual .cntBtn { padding: calc(var(--mainfont) * 0.15) calc(var(--mainfont) * 0.85); } 
    .visual .cntBtn button { font-size: calc(var(--mainfont) * 0.9); }

    /* 시설안내 */
    .fcltInfo .lst ul li:nth-child(n + 2) { display: none; }
    .fcltInfo .lst ul li { width: 100%; }

    /* 오늘의 날씨 */
    .weather > .box > span { font-size: calc(var(--mainfont) * 1.85); }

    /* 프로그램 예약 */
    .program h2.heading { font-size: calc(var(--mainfont) * 1.35); }

    /* 주요 서비스 */
    .service .lst ul { gap: calc(var(--boxGap) * 1) calc(var(--boxGap) * 1.5); }  
    .service .lst ul li { width: calc((100% - calc(var(--boxGap) * 4.5)) / 4); } 
    .service .lst ul li a .img img { max-width: calc(var(--mainfont) * 1.2); }
    .service .lst ul li a .img:before,
    .service .lst ul li a .img { border-radius: calc(var(--radius) * 1); }
    .service .lst ul li a .txt { font-size: calc(var(--mainfont) * 0.8); line-height: calc((var(--mainfont) * 2) / 2); height: calc(var(--mainfont) * 2); }

    /* 과학대회 한눈에 보기 */
    .science .lst ul li a { padding: calc(var(--boxGap) * 2.5) calc(var(--boxGap) * 9) calc(var(--boxGap) * 2.5) calc(var(--boxGap) * 1.75); }
    .science .lst ul li a span.tit { font-size: calc(var(--mainfont) * 1); }
    .science .lst ul li a > img { max-width: calc(var(--mainfont) * 2.25); }
   
}