@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
/*==============================================================================
	HUSS 메인페이지 스타일
	1. 공통 : 레이아웃 / 모션 / 섹션 타이틀 / 더보기 버튼 / 진행바
	2. #mVisual  메인비주얼
	3. #mNoti    SKKU HUSS 새소식 (공지사항 + 사업단 우수성과)
	4. #mGall    NOW HUSS 갤러리
	5. #mKey     1단계 주요성과
	6. #mLink    #소통하는 SKKU HUSS
	7. #mUniv    #참여대학 사업단
	8. 공통 하단(footer) - 메인/서브 공용
	9. 반응형 (1700 / 1400 / 1170 / 980 / 767 / 480)
	※ clamp() 미사용 : 반응형 구간마다 크기 직접 지정
==============================================================================*/

/*--------------------------------------------------------------
	1. 공통
--------------------------------------------------------------*/
#allWrap{position:relative; width:100%; overflow:hidden; height:100%; word-break:keep-all;}

/* 스크롤 모션 유틸 (메인/서브 공용) */
.a-up{transform:translateY(25px); opacity:0;}
.in-view.a-up{transform:translateY(0px); opacity:1; transition:all 1s;}
.a-down{transform:translateY(-25px); opacity:0;}
.in-view.a-down{transform:translateY(0px); opacity:1; transition:all 1s;}
.a-left{transform:translateX(15px); transition:.5s; opacity:0; transition-delay:.3s;}
.a-left.in-view{transform:translateX(0px); opacity:1;}
.a-right{transform:translateX(-15px); transition:.5s; opacity:0; transition-delay:.3s;}
.a-right.in-view{transform:translateX(0px); opacity:1;}

.a-:nth-child(1){transition-delay:.1s;}
.a-:nth-child(2){transition-delay:.2s;}
.a-:nth-child(3){transition-delay:.3s;}
.a-:nth-child(4){transition-delay:.4s}
.a-:nth-child(5){transition-delay:.5s}
.a-:nth-child(6){transition-delay:.6s}
.a-:nth-child(7){transition-delay:.7s}
.a-:nth-child(8){transition-delay:.8s}
.a-:nth-child(9){transition-delay:.9s}
.a-:nth-child(10){transition-delay:1s}
.a-:nth-child(11){transition-delay:1.2s}
.a-:nth-child(12){transition-delay:1.3s}
.a-:nth-child(13){transition-delay:1.4s}
.a-:nth-child(14){transition-delay:1.5s}
.a-:nth-child(15){transition-delay:1.6s}

/* 메인 섹션 등장 모션 : 섹션(.ani)이 화면에 들어오면 .in-view 가 붙으면서 순차 등장 */
.mSection .mTit_wrap,
.mNoti_box,
.mGall_slide_area,
#mGall .m_progress,
.mKey_vision,
.mKey_box,
.mLink_box,
.mUniv_list li{opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
.mSection.in-view .mTit_wrap,
.mSection.in-view .mNoti_box,
.mSection.in-view .mGall_slide_area,
#mGall.in-view .m_progress,
.mSection.in-view .mKey_vision,
.mSection.in-view .mKey_box,
.mSection.in-view .mLink_box,
.mSection.in-view .mUniv_list li{opacity:1; transform:translateY(0);}

.mSection.in-view .mNoti_box.mNoti_best{transition-delay:.3s;}
.mSection.in-view .mGall_slide_area{transition-delay:.2s;}
#mGall.in-view .m_progress{transition-delay:.4s;}
.mSection.in-view .mKey_vision{transition-delay:.15s;}
.mSection.in-view .mKey_row:nth-child(1) .mKey_box:nth-child(1){transition-delay:.3s;}
.mSection.in-view .mKey_row:nth-child(1) .mKey_box:nth-child(2){transition-delay:.45s;}
.mSection.in-view .mKey_row:nth-child(2) .mKey_box:nth-child(1){transition-delay:.6s;}
.mSection.in-view .mKey_row:nth-child(2) .mKey_box:nth-child(2){transition-delay:.75s;}
.mSection.in-view .mUniv_list li:nth-child(1){transition-delay:.2s;}
.mSection.in-view .mUniv_list li:nth-child(2){transition-delay:.3s;}
.mSection.in-view .mUniv_list li:nth-child(3){transition-delay:.4s;}
.mSection.in-view .mUniv_list li:nth-child(4){transition-delay:.5s;}
.mSection.in-view .mUniv_list li:nth-child(5){transition-delay:.6s;}

/* 타이틀 강조점 : 한 글자씩 순서대로 톡톡 등장 */
.mTit .dot i:before{opacity:0; transform:translateY(-8px) scale(.4); transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);}
.mSection.in-view .mTit .dot i:before{opacity:1; transform:translateY(0) scale(1);}
.mSection.in-view .mTit .dot i:nth-child(1):before{transition-delay:.6s;}
.mSection.in-view .mTit .dot i:nth-child(2):before{transition-delay:.72s;}
.mSection.in-view .mTit .dot i:nth-child(3):before{transition-delay:.84s;}
.mSection.in-view .mTit .dot i:nth-child(4):before{transition-delay:.96s;}

/* 타이틀 뒤 원 : 천천히 떠다니는 모션 */
.mTit:before{animation:mTitFloat 5s ease-in-out infinite;}
@keyframes mTitFloat {
	0%, 100% {transform:translate(0, 0);}
	50% {transform:translate(6px, -6px);}
}

/* #소통하는 SKKU HUSS 휴대폰 일러스트 : 둥둥 떠 있는 모션 */
@keyframes mLinkFloat {
	0%, 100% {transform:translateY(0);}
	50% {transform:translateY(-8px);}
}

@media (prefers-reduced-motion: reduce){
	.mSection .mTit_wrap, .mNoti_box, .mGall_slide_area, #mGall .m_progress, .mKey_vision, .mKey_box, .mLink_box, .mUniv_list li,
	.mTit .dot i:before{opacity:1 !important; transform:none !important; transition:none !important;}
	.mTit:before, .mLink_img img, #visual .right-wr .scroll_wr img{animation:none !important;}
}

/* 메인 콘텐츠 영역 공통 */
.mContWrap{position:relative; z-index:2; background:#fff url("../images/main/all_BG.jpg") no-repeat center 35%; background-size:100% auto;}
.mInner{position:relative; width:100%; max-width:1680px; margin:0 auto; padding:0 40px;}
.mSection{position:relative; padding:120px 0 0;}

/* 섹션 타이틀 */
.mTit_wrap{display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:40px;}
.mTit_wrap.mTit_center{flex-direction:column; align-items:center; justify-content:center; gap:18px; margin-bottom:60px; text-align:center;}

.mTit{position:relative; z-index:1; font-size:50px; font-weight:800; color:#111; letter-spacing:-1.5px; line-height:1.3;}
.mTit .en{font-weight:800;}
.mTit .ko{font-weight:300;}
/* 한글 강조점 (글자 위 점) */
.mTit .dot{display:inline-block;}
.mTit .dot i{position:relative; display:inline-block; font-style:normal;}
.mTit .dot i:before{content:""; position:absolute; left:50%; top:-3px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#111;}
/* 타이틀 뒤 원 (새소식=노랑 / 갤러리=파랑 / 주요성과=초록) */
.mTit:before{content:""; position:absolute; left:-36px; top:50%; width:66px; height:65px; margin-top:-46px; background-repeat:no-repeat; background-position:0 0; background-size:contain; z-index:-1;}
.mTit.deco_B:before{background-image:url("../images/main/mTit_deco_B.png");}
.mTit.deco_G:before{background-image:url("../images/main/mTit_deco_G.png");}
.mTit.deco_Y:before{background-image:url("../images/main/mTit_deco_Y.png");}

.mTit_desc{font-family:'Pretendard', sans-serif; font-size:18px; font-weight:500; color:#888; line-height:1.4; letter-spacing:-0.4px;}

/* 더보기 버튼 (자세히보기) */
.more_btn{position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 22px; border:1px solid #333; border-radius:100px; background:#fff; font-size:16px; font-weight:500; color:#222; letter-spacing:-0.5px; transition:background .3s ease, border-color .3s ease, color .3s ease;}
.more_btn .ico{display:block; width:14px; height:14px; transition:transform .3s ease, filter .3s ease;}
.more_btn:hover, .more_btn:focus{background:#111; border-color:#111; color:#fff;}
.more_btn:hover .ico, .more_btn:focus .ico{transform:translateX(4px); filter:brightness(0) invert(1);}

/* 진행바 (슬라이드 공용) : 얇은 트랙 + 두꺼운 막대 */
.m_progress{position:relative; width:100%; height:3px; margin-top:50px; background:linear-gradient(#dcdfe5, #dcdfe5) no-repeat center center; background-size:100% 1px;}
.m_progress .bar{position:absolute; left:0; top:0; width:20%; height:100%; background:#111; transition:left .3s ease, width .3s ease;}
.m_progress.is-dragging .bar{transition:none;}
.m_progress.is-hidden{display:none;}

/* 게시물 없음 */
.mNo_data{display:flex; align-items:center; justify-content:center; min-height:180px; padding:40px 20px; border:1px dashed #d8dee9; border-radius:16px; background:#fff; font-family:'Pretendard', sans-serif; font-size:17px; color:#8b93a5; text-align:center;}
.mNo_data[hidden]{display:none;}

/* 포커스 표시 (reset.css 의 outline:none 대응) */
.mContWrap a:focus-visible,
.mContWrap button:focus-visible,
#visual a:focus-visible,
#visual button:focus-visible{outline:2px solid #01348b !important; outline-offset:3px; border-radius:4px;}
#visual .mv-control button:focus-visible,
#visual .scroll-btn:focus-visible{outline:2px solid #fff !important; outline-offset:4px;}

/*--------------------------------------------------------------
	2. #mVisual 메인비주얼
--------------------------------------------------------------*/
#mVisual{position:relative; /* overflow:hidden; */ height:100vh;}
#visual{position:relative; width:100%; height:100vh; margin:0 auto; background:#fff; z-index:2; /* padding-bottom:20px; */}
#visual .visual-wr{position:relative; overflow:hidden; display:flex; width:100%; height:100%; margin:0 auto; background:#000; z-index:1;}
#visual .visual-wr:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.4); display:block; z-index:1;}

#visual .visual-slide{position:absolute; top:0; width:100%; height:100%; z-index:0;}
#visual .visual-slide .visual-bg.slick-slide img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
#visual .visual-slide .slick-active img{max-width:100%; animation:mymove 5s;}
#visual .visual-slide .visual-bg.slick-current{overflow:hidden;}
#visual .visual-slide .slick-list{height:100%;}
#visual .visual-slide .slick-track{height:100%;}

@keyframes mymove {
	from {transform:scale(1.1);}
	to {transform:scale(1);}
}

#visual .slo-wr{position:relative; z-index:5; display:flex; justify-content:space-between; width:100%; max-width:1600px; margin:0 auto; padding:340px 0 0 0;}
#visual .slogan{position:relative; z-index:10; display:flex; flex-direction:column; align-items:flex-start; text-align:left; word-break:keep-all;}
#visual .slogan small{display:block; position:relative; margin-bottom:20px; font-size:36px; color:#fff;}
#visual .slogan big img{width:628px; height:68px;}

/* 비주얼 텍스트 등장 모션 */
#visual .slogan small{animation:mvTextUp .8s ease .2s both;}
#visual .slogan big{display:block; animation:mvTextUp .8s ease .45s both;}
#visual .mv-control{animation:mvTextUp .8s ease .65s both;}
#visual .right-wr > p{animation:mvTextUp .8s ease .7s both;}
#visual .right-wr .scroll_wr{animation:mvFadeIn 1s ease .9s both;}
#visual .mv-progress{animation:mvFadeIn 1s ease 1s both;}

@keyframes mvTextUp {
	from {opacity:0; transform:translateY(24px);}
	to {opacity:1; transform:translateY(0);}
}
@keyframes mvFadeIn {
	from {opacity:0;}
	to {opacity:1;}
}

/* 슬라이드 컨트롤 : <  01 | 06  >   || */
#visual .mv-control{display:flex; align-items:center; margin-top:56px;}
#visual .mv-control .mv-btn{position:relative; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; opacity:.85; transition:opacity .3s ease, transform .3s ease;}
#visual .mv-control .mv-btn:hover{opacity:1;}
#visual .mv-control .mv-btn img{display:block; width:9px; height:16px;}
#visual .mv-control .mv-prev{margin-left:-9px;}
#visual .mv-control .mv-prev:hover{transform:translateX(-3px);}
#visual .mv-control .mv-next:hover{transform:translateX(3px);}
#visual .mv-control .mv-play{margin-left:30px;}
#visual .mv-control .mv-play .ico{display:block;}
/* 정지 아이콘 */
#visual .mv-control .mv-play.is-playing .ico{width:8px; height:14px; background:url('../images/main/mVisual_stop.png') no-repeat center center; background-size:8px 14px;}
/* 재생 아이콘 */
#visual .mv-control .mv-play.is-paused .ico{width:0; height:0; margin-left:2px; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent;}

#visual .mv-paging{display:flex; align-items:center; gap:14px; margin:0 12px; font-family:'Outfit', sans-serif; font-size:18px; font-weight:500; color:rgba(255,255,255,.75); letter-spacing:0.5px; line-height:1;}
#visual .mv-paging .cur{font-weight:600; color:#fff;}
#visual .mv-paging .bar{display:block; width:1px; height:12px; background:rgba(255,255,255,.45); font-size:0;}

/* 슬라이드 관리 버튼 (최고관리자 전용) */
#visual .mv-control .mv-admin{display:inline-flex; align-items:center; gap:6px; height:32px; margin-left:24px; padding:0 14px; border:1px solid rgba(255,255,255,.6); border-radius:16px; background:rgba(0,0,0,.25); font-family:'Pretendard', sans-serif; font-size:14px; font-weight:600; color:#fff; white-space:nowrap; backdrop-filter:blur(4px); transition:background .3s ease, border-color .3s ease;}
#visual .mv-control .mv-admin svg{width:14px; height:14px; flex:none;}
#visual .mv-control .mv-admin:hover{background:#01348b; border-color:#01348b;}

/* 진행바 : 바닥에서 띄우고 타이틀(콘텐츠) 너비에 맞춤 */
#visual .mv-progress{position:absolute; left:0; right:0; bottom:80px; width:auto; max-width:1600px; height:2px; margin:0 auto; background:rgba(255,255,255,.3); z-index:6;}
#visual .mv-progress .pro-bar{display:block; width:100%; height:100%; background:#fff; transform:scaleX(0); transform-origin:left center;}

/* 오른쪽 스크롤 버튼 + 문구 */
#visual .right-wr{position:relative; display:flex; align-items:center; gap:40px; z-index:1;}
#visual .right-wr .scroll_wr{position:relative; width:146px; height:146px; padding:0; border:0; border-radius:50%; background:rgba(1,52,139,.6); box-shadow:10px 10px 10px rgba(32,36,84,.18); text-align:center; line-height:154px; cursor:pointer; backdrop-filter:blur(4px); transition:background 0.4s ease;}
#visual .right-wr .scroll_wr::before{content:''; position:absolute; top:calc(50% - 62px); left:calc(50% - 62px); display:block; width:124px; height:124px; background:url('../images/main/mVisual_txt.png') no-repeat 0 0/contain; animation:circle_tx 60s infinite linear; z-index:0; transition:all 0.4s ease;}
#visual .right-wr .scroll_wr img{display:inline-block; animation:mvArrow 1.8s ease-in-out infinite;}
#visual .right-wr .scroll_wr:hover{background:rgba(1,52,139,.85);}
#visual .right-wr > p{font-family:'Pretendard', sans-serif; font-weight:600; font-size:30px; letter-spacing:-0.4px; line-height:1.4; color:#fff;}

@keyframes circle_tx {
	0{transform:rotate(0);}
	50%{transform:rotate(360deg);}
	100% {transform:rotate(0);}
}
@keyframes mvArrow {
	0%, 100% {transform:translateY(-3px);}
	50% {transform:translateY(5px);}
}

/*--------------------------------------------------------------
	3. #mNoti SKKU HUSS 새소식
--------------------------------------------------------------*/
#mNoti .mTit_wrap{justify-content:flex-start; gap:90px;}
#mNoti .mTit_desc{padding-top:6px; text-align:left;}
.mNoti_wrap{display:flex; align-items:stretch; gap:30px;}
.mNoti_box{position:relative; padding:52px 50px 50px; border-radius:26px; background:#fff; box-shadow:0 10px 40px rgba(40,70,130,.07);}
.mNoti_notice{flex:0 0 auto; width:calc(45% - 14px);}
.mNoti_best{flex:1 1 auto; min-width:0;}

.mNoti_box .box_head{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:36px;}
.mNoti_box .box_tit{font-size:30px; font-weight:700; color:#111; letter-spacing:-1px; line-height:1.3;}
.mNoti_box .box_tit em{font-style:normal;}
.mNoti_notice .box_tit em{color:#1d4f91;}
.mNoti_best .box_tit em{color:#3b8fd9;}

/* 최신글 공통 텍스트 : Pretendard / 제목 최대 2줄 말줄임 */
.noti_list .tit, .noti_list .cont,
.best_item .tit,
.gall_item .cate, .gall_item .tit{font-family:'Pretendard', sans-serif;}

/* 공지사항 리스트 */
.noti_list li + li{margin-top:38px;}
.noti_list li a{display:flex; align-items:flex-start; gap:36px;}
.noti_list .thumb{flex:0 0 auto; display:block; width:236px; height:161px; border-radius:10px; overflow:hidden; background:#f2f4f8;}
.noti_list .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.noti_list .txt{flex:1 1 auto; min-width:0; padding-top:2px;}
.noti_list .tit{display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-height:66px; font-size:20px; font-weight:600; color:#222; letter-spacing:-0.6px; line-height:1.4; transition:color .3s ease;}
.noti_list .cont{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:8px; font-size:16px; font-weight:400; color:#777; letter-spacing:-0.4px; line-height:1.5;}
.noti_list .date{display:block; margin-top:22px; font-size:15px; font-weight:500; color:#aaa; letter-spacing:0; line-height:1;}
.noti_list li a:hover .tit, .noti_list li a:focus .tit{color:#1d4f91;}
.noti_list li a:hover .thumb img, .noti_list li a:focus .thumb img{transform:scale(1.06);}

/* 사업단 우수성과 슬라이드 */
.best_slide{width:100%;}
.best_item{display:block; width:100%;}
.best_item .thumb{position:relative; display:block; width:100%; padding-top:59.4%; border-radius:10px; overflow:hidden; background:#f2f4f8;}
.best_item .thumb img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.best_item .tit{display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:66px; margin-top:16px; font-size:20px; font-weight:600; color:#222; letter-spacing:-0.6px; line-height:1.4; transition:color .3s ease;}
.best_item .date{display:block; margin-top:20px; font-size:15px; font-weight:500; color:#aaa; line-height:1;}
.best_item:hover .thumb img, .best_item:focus .thumb img{transform:scale(1.06);}
.best_item:hover .tit, .best_item:focus .tit{color:#3b8fd9;}

/* 우수성과 진행바 : 가운데 정렬 / 짧은 너비 / 하늘색 */
.best_progress{width:350px; max-width:100%; height:4px; margin:44px auto 0; background-size:100% 2px;}
.best_progress .bar{background:#3b8fd9; border-radius:4px;}

/*--------------------------------------------------------------
	4. #mGall NOW HUSS 갤러리
--------------------------------------------------------------*/
#mGall .mGall_head{flex-wrap:wrap; align-items:center; gap:14px 24px;}
#mGall .mGall_head .mTit{margin-right:40px;}
#mGall .mGall_head .more_btn{margin-left:auto;}

/* 게시판 선택 버튼 */
.mGall_cate{display:flex; align-items:center; gap:6px; padding-top:6px;}
.mGall_cate .cate_btn{height:36px; padding:0 16px; border:0; border-radius:6px; background:#eef1f5; font-size:14px; font-weight:600; color:#666; letter-spacing:-0.3px; cursor:pointer; transition:background .3s ease, color .3s ease;}
.mGall_cate .cate_btn:hover{background:#e1e6ed; color:#333;}
.mGall_cate .cate_btn.on{background:#111; color:#fff; font-weight:600;}

/* 오른쪽으로 이어져 보이는 슬라이드 영역
   : 왼쪽은 .mInner 콘텐츠 시작점에 맞추고, 오른쪽은 화면 밖으로 이어지도록 처리 */
.mGall_slide_area{position:relative; margin-left:40px; overflow:hidden;}
.gall_slide{width:100%;}
@media (min-width: 1681px){
	.mGall_slide_area{margin-left:calc((100% - 1680px) / 2 + 40px);}
}

.gall_slide .swiper-slide{height:auto;}
.gall_item{display:flex; flex-direction:column; width:100%; height:100%; border-radius:16px; overflow:hidden; background:#eaf1f9; transition:background .3s ease;}
.gall_item .thumb{position:relative; display:block; width:100%; padding-top:56.3%; border-radius:16px; overflow:hidden; background:#dfe6ef;}
.gall_item .thumb img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gall_item .txt{flex:1 1 auto; display:block; padding:26px 30px 30px;}
.gall_item .cate_wr{display:flex; align-items:center; gap:6px;}
.gall_item .cate{display:inline-block; height:24px; padding:0 9px; border-radius:4px; background:#111; font-size:14px; font-weight:400; color:#fff; line-height:24px; letter-spacing:-0.2px;}
.gall_item .yt_ico{display:flex; align-items:center; justify-content:center; width:34px; height:24px; border-radius:4px; background:#e62117;}
.gall_item .yt_ico img{display:block; width:12px; height:auto;}
.gall_item .tit{display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:60px; margin-top:14px; font-size:20px; font-weight:600; color:#222; letter-spacing:-0.5px; line-height:1.4; transition:color .3s ease;}
.gall_item .date{display:block; margin-top:26px; font-size:14px; font-weight:500; color:#aaa; line-height:1;}
.gall_item:hover, .gall_item:focus{background:#dde9f6;}
.gall_item:hover .thumb img, .gall_item:focus .thumb img{transform:scale(1.06);}
.gall_item:hover .tit, .gall_item:focus .tit{color:#1d4f91;}

#mGall .m_progress{margin-top:60px;}
#mGall .mNo_data{margin-top:20px;}

/*--------------------------------------------------------------
	5. #mKey 1단계 주요성과
--------------------------------------------------------------*/
#mKey .mTit_desc br{display: none;}
.mKey_wrap{display:flex; align-items:stretch; gap:30px;}
.mKey_vision{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; width:26.7%; min-height:638px; padding:50px 46px 56px; border-radius:24px; background:#e6f2fd url("../images/main/mKey_box01.jpg") no-repeat center bottom; background-size:cover; text-align:left;}
.mKey_boxes{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:26px;}
.mKey_row{display:flex; align-items:stretch; gap:30px; flex:1 1 auto; min-height:306px;}
.mKey_box{position:relative; padding:40px; border-radius:24px; background:#fff;}

/* 비전 */
.mKey_vision .key_label{display:block; font-size:17px; font-weight:600; color:#144b85; letter-spacing:-0.4px; line-height:1.3;}
.mKey_vision .vision_tit{display:block; margin-top:28px; font-size:34px; font-weight:800; color:#144b85; letter-spacing:-1.2px; line-height:1.3;}
.mKey_vision .vision_sub{margin-top:28px;}
.mKey_vision .vision_sub .s_txt{display:block; font-family:'Pretendard', sans-serif; font-size:16px; font-weight:500; color:#777; letter-spacing:-0.4px;}
.mKey_vision .vision_sub .b_txt{display:block; margin-top:6px; font-family:'Pretendard', sans-serif; font-size:22px; font-weight:700; color:#222; letter-spacing:-0.6px; line-height: 1.1;}
.mKey_vision .vision_visual{align-self:stretch; margin-top:auto; padding-top:36px; text-align:center;}
.mKey_vision .vision_img img{display:inline-block; width:100%; max-width:323px; height:auto;}
/* 원 2개 하단에 겹치는 알약 텍스트 */
.mKey_vision .vision_pill{position:relative; z-index:2; display:inline-block; margin-top:-26px; padding:12px 28px; border-radius:100px; background:linear-gradient(0deg, #fff, transparent); border: 2px solid #f6f7fa; box-shadow:0 8px 20px rgba(40,80,150,.1); font-size:16px; font-weight:500; color:#222; letter-spacing:-0.5px; line-height:1.4;}
.mKey_vision .vision_pill b{font-weight:500; color:#3161c9;}

/* 공통 수치 박스 */
.mKey_box .key_head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.mKey_box .key_label{display:block; padding-top:4px; font-size:18px; font-weight:600; color:#222; letter-spacing:-0.5px;}
.mKey_box .key_ico{flex:0 0 auto;}
.mKey_box .key_ico img{display:block; max-width:100%; height:auto;}
.mKey_box .key_num{display:flex; align-items:baseline; margin-top:6px; font-family:'Outfit', sans-serif; font-size:68px; font-weight:500; color:#144b85; letter-spacing:-1.5px; line-height:1;}
.mKey_box .key_num em{margin-left:8px; font-family:'Paperlogy', 'Pretendard', sans-serif; font-size:26px; font-weight:600; font-style:normal; letter-spacing:0;}
.mKey_box .key_desc{margin-top:36px; font-family:'Pretendard', sans-serif; font-size:16px; font-weight:500; color:#777; letter-spacing:-0.4px; line-height:1.5; word-break: keep-all;}

/* 교육과정 운영 / 비교과 프로그램 */
.mKey_box.box02{flex:730 1 0; min-width:0; display:flex; gap:60px; background:#f4f6f9 url("../images/main/mKey_box02.jpg") no-repeat center center; background-size:cover;}
.mKey_box.box02 .key_col{position:relative; flex:1 1 50%; min-width:0;}
/* 가운데 회색 세로선 */
.mKey_box.box02 .key_col + .key_col:before{content:""; position:absolute; left:-31px; top:72px; width:2px; height:72px; background:#cfd4db;}

/* 협력기관 */
.mKey_box.box03{flex:380 1 0; min-width:0; background:#5b6066 url("../images/main/mKey_box03.jpg") no-repeat center center; background-size:cover;}
.mKey_box.box03 .key_label{color:#fff;}
.mKey_box.box03 .key_num{color:#fff;}
.mKey_box.box03 .key_desc{color:rgba(255,255,255,.75);}

/* 평균 만족도 */
.mKey_box.box04{flex:386 1 0; min-width:0; background:#ebf6fb;}

/* 융합인재 양성 실적 */
.mKey_box.box05{flex:723 1 0; min-width:0; background:#154a7c url("../images/main/mKey_box05.jpg") no-repeat center center; background-size:cover;}
.mKey_box.box05 .key_label{display:block; color:#fff;}
.mKey_box.box05 .key_num{margin-top:36px; color:#fff;}
.mKey_box.box05 .key_desc{max-width:340px; margin-top:30px; font-weight: 400; color:#fff; line-height:1.6;}
.mKey_box.box05 .key_desc b{display:block; margin-top:4px; font-size:22px; font-weight:600; color:#fff; letter-spacing:-0.5px; line-height: 1.1;}

/*--------------------------------------------------------------
	6. #mLink #소통하는 SKKU HUSS
--------------------------------------------------------------*/
#mLink{padding-top:150px;}
.mLink_box{position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; min-height:161px; padding:20px 150px 20px 266px; border-radius:26px; background:#2b3f63 url("../images/main/mLink_BG.jpg") no-repeat center center; background-size:cover;}
.mLink_txt{display:flex; align-items:center;}
/* 휴대폰 일러스트 : 박스 윗부분을 벗어나도록 배치 */
.mLink_img{position:absolute; left:57px; bottom:15px; z-index:2;}
.mLink_img img{display:block; width:163px; height:auto; animation:mLinkFloat 3.5s ease-in-out infinite;}
.mLink_tit h2{font-size:34px; font-weight:800; color:#fff; letter-spacing:-1.2px; line-height:1.3;}
.mLink_tit p{margin-top:10px; font-size:16px; font-weight:400; color:rgba(255,255,255,.75); letter-spacing:-0.5px;}

/* SNS 버튼 : 라운딩 박스 */
.mLink_btns{display:flex; align-items:center; gap:24px;}
.mLink_btns li a{display:flex; align-items:center; justify-content:center; width:80px; height:80px; border-radius:20px; overflow:hidden; background:#fff; transition:transform .3s ease, box-shadow .3s ease;}
.mLink_btns li a img{display:block; width:100%; height:100%; object-fit:cover;}
.mLink_btns li a:hover, .mLink_btns li a:focus{transform:translateY(-6px); box-shadow:0 10px 18px rgba(0,0,0,.25);}

/*--------------------------------------------------------------
	7. #mUniv #참여대학 사업단
--------------------------------------------------------------*/
#mUniv{padding:110px 0 130px;}
#mUniv .mTit_wrap.mTit_center{margin-bottom:56px;}
.mUniv_tit{font-size:34px; font-weight:700; color:#111; letter-spacing:-1px;}
.mUniv_tit br{display: none;}
.mUniv_tit b{font-weight:800; color:#1d4f91;}
.mUniv_tit:before{display:none;}

.mUniv_list{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px;}
.mUniv_list li a{display:flex; align-items:center; justify-content:center; width:254px; height:132px; padding:20px 36px; border-radius:66px; background:#fff; box-shadow:0 12px 30px rgba(30,60,120,.08); transition:box-shadow .3s ease, transform .3s ease;}
.mUniv_list li a img{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.mUniv_list li a:hover, .mUniv_list li a:focus{transform:translateY(-6px); box-shadow:0 18px 34px rgba(30,60,120,.14);}

/*--------------------------------------------------------------
	8. 하단 footer (메인/서브 공용)
--------------------------------------------------------------*/
footer{clear:both; position:relative; background:#2a2c3f;}
footer:after{content:''; display:block; clear:both;}

footer .footer-top{padding:30px 0 25px; border-bottom:1px solid rgba(255,255,255,.1);}
footer .footer-top .line_wr{position:relative; display:flex; justify-content:space-between; align-items:center; width:100%; max-width:1700px; margin:0 auto; padding:0 40px;}
footer .ft-logo{display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px;}
footer .ft-logo > a{width:304px;}
footer .ft-logo > a > img{max-width:100%;}

footer .ft-right{display:flex; align-items:center; justify-content:flex-end; gap:40px;}
footer .select_footer{position:relative; width:270px; height:54px; z-index:5; text-align:left;}
footer .select_footer ul{bottom:52px; display:none; position:absolute; z-index:999; border:0; background:#f8f8f8; width:280px; border-radius:10px 10px 0 0; transition:.3s;}
footer .select_footer ul.open{display:block; padding:15px 0 0;}
footer .select_footer ul li{color:#bebebe; text-indent:25px;}
footer .select_footer ul li a{display:block; font-weight:500; font-size:16px; color:#a3afb9; padding:7px 0; transition:all 0.4s ease;}
footer .select_footer ul li a:hover{background:#f8f9fb; color:#144b85;}
footer .select_f_btn{position:relative; border:0; display:block; width:280px; height:60px; font-weight:500; background:#3f4156; text-align:left; text-transform:uppercase; padding:0 25px; font-size:18px; letter-spacing:-0.4px; color:#a3afb9; border-radius:10px;}
footer .select_f_btn .ir{width:100%; display:flex; height:100%; align-items:center; justify-content:space-between;}
footer .select_f_btn .arrow{position:absolute; top:50%; right:10px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; background:#fff; border-radius:6px; width:40px; height:40px; transition:all 0.4s ease;}
footer .select_f_btn .arrow img{transition:all 0.4s ease;}
footer .select_f_btn.on{border-radius:0 0 10px 10px; background:#f8f8f8; color:#2a2c3f;}
footer .select_f_btn.on .arrow img{transform:scaleY(-1);}

footer .footer-mid{position:relative; display:flex; justify-content:space-between; align-items:flex-start; width:100%; max-width:1700px; margin:0 auto; padding:40px 40px 60px;}
footer address{display:block;}
footer address span{display:inline-block; margin:0 40px 20px 0; font-weight:400; font-style:normal; font-size:19px; color:#fff;}
footer address span.addr{display:block;}
footer address span em{font-style:normal;}
footer address a{display:inline-block; margin-left:5px; font-weight:400; font-style:normal; color:#fff; transition:all 0.4s ease;}
footer address a:hover{opacity:.7;}

footer a.sku_logo{display:block; transition:all 0.4s ease;}
footer a.sku_logo img{width:237px; height:57px;}
footer a.sku_logo:hover{opacity:.7;}

footer .footer-bot{position:relative; width:100%; max-width:1700px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; padding:30px 50px; background:#232433; border-radius:30px 30px 0 0;}
footer cite{font-size:15px; color:#fff; font-weight:400; font-style:normal;}
footer cite a{font-weight:400; color:#fff;}

footer .ft-menu{display:inline-flex; gap:50px; font-size:0; line-height:0; padding:0; margin:0 0 10px; flex-direction:row; align-items:center; flex-wrap:wrap;}
footer .ft-menu li{transition:.2s ease-out;}
footer .ft-menu li a{font-size:17px; line-height:1; color:#fff; font-weight:500; transition:.2s ease-out;}
footer .ft-menu li:hover a{opacity:.6;}

footer .adm-btn{position:relative; height:29px;}
footer .adm-btn a{background:rgba(255,255,255,.1); color:#fff; border-radius:100px; height:29px; padding:0 13px; line-height:1; font-size:13px; font-weight:500; letter-spacing:-.5px; gap:3px; display:flex; justify-content:center; align-items:center; margin-bottom:-7px; transition:.3s;}
footer .adm-btn a:hover{background:rgba(255,255,255,1); color:#2a2c3f;}

/*==============================================================================
	9. 반응형 (clamp 미사용 : 구간별 크기 직접 지정)
==============================================================================*/

/* ---------- 1700 이하 ---------- */
@media (max-width: 1700px){
	#visual .slo-wr{max-width:none; padding:300px 40px 0;}
	#visual .slogan small{font-size:32px;}
	#visual .slogan big img{width:560px; height:60px;}
	#visual .mv-control{margin-top:50px;}
	#visual .mv-progress{left:40px; right:40px; max-width:none; bottom:70px;}
	#visual .right-wr{gap:30px;}
	#visual .right-wr > p{font-size:26px;}
	#visual .right-wr .scroll_wr{width:140px; height:140px; line-height:140px;}
	#visual .right-wr .scroll_wr::before{top:calc(50% - 55px); left:calc(50% - 55px); width:110px; height:110px;}

	.mSection{padding:110px 0 0;}
	#mLink{padding-top:140px;}
	#mUniv{padding:100px 0 120px;}
	.mTit{font-size:46px;}

	.mNoti_box{padding:46px 40px 44px;}
	.noti_list li a{gap:28px;}
	.noti_list .thumb{width:210px; height:143px;}

	.mKey_vision{padding:44px 36px 50px;}
	.mKey_vision .vision_tit{font-size:30px;}
	.mKey_box{padding:40px 36px 36px;}
	.mKey_box .key_num{font-size:60px;}
	.mKey_box .key_num em{font-size:24px;}
	.mKey_box.box02{gap:50px;}
	.mKey_box.box02 .key_col + .key_col:before{left:-26px; top:66px; height:66px;}

	.mLink_box{padding:20px 100px 20px 240px;}
	.mLink_img{left:46px;}

	.mUniv_list li a{width:230px; height:120px; border-radius:60px;}
}

/* ---------- 1400 이하 ---------- */
@media (max-width: 1400px){
	#visual .slo-wr{padding:280px 30px 0;}
	#visual .slogan small{font-size:28px; margin-bottom:16px;}
	#visual .slogan big img{width:470px; height:51px;}
	#visual .mv-control{margin-top:44px;}
	#visual .mv-paging{font-size:17px; gap:12px;}
	#visual .mv-progress{left:30px; right:30px; bottom:60px;}
	#visual .right-wr > p{font-size:22px;}
	#visual .right-wr .scroll_wr{width:120px; height:120px; line-height:120px;}
	#visual .right-wr .scroll_wr::before{top:calc(50% - 48px); left:calc(50% - 48px); width:96px; height:96px;}
	#visual .right-wr .scroll_wr img{width:16px; height:27px;}

	.mInner{padding:0 30px;}
	.mGall_slide_area{margin-left:30px;}
	.mSection{padding:90px 0 0;}
	#mLink{padding-top:120px;}
	#mUniv{padding:90px 0 100px;}
	.mTit{font-size:40px;}
	.mTit .dot i:before{width:5px; height:5px; margin-left:-2.5px;}
	.mTit:before{left:-30px; width:56px; height:55px; margin-top:-38px;}
	.mTit_wrap{margin-bottom:34px;}
	.mTit_wrap.mTit_center{margin-bottom:48px;}
	.mTit_desc{font-size:15px;}
	#mNoti .mTit_wrap{gap:50px;}
	.more_btn{height:44px; padding:0 22px; font-size:15px;}

	.mNoti_wrap{gap:24px;}
	.mNoti_notice{width:calc(45% - 12px);}
	.mNoti_box{padding:36px 30px; border-radius:22px;}
	.mNoti_box .box_head{margin-bottom:28px;}
	.mNoti_box .box_tit{font-size:25px;}
	.noti_list li + li{margin-top:28px;}
	.noti_list li a{gap:22px;}
	.noti_list .thumb{width:170px; height:116px;}
	.noti_list .tit{font-size:18px; max-height:56px;}
	.noti_list .cont{font-size:15px; margin-top:6px;}
	.noti_list .date{font-size:14px; margin-top:14px;}
	.best_item .tit{font-size:18px; height:56px; margin-top:14px;}
	.best_item .date{font-size:14px; margin-top:14px;}
	.best_progress{width:280px; margin-top:34px;}

	.mGall_cate .cate_btn{height:34px;}
	.gall_item .txt{padding:22px 24px 24px;}
	.gall_item .tit{font-size:17px; height:56px;}
	.gall_item .date{margin-top:20px;}
	#mGall .m_progress{margin-top:46px;}

	.mKey_wrap{gap:20px;}
	.mKey_vision{width:30%; min-height:560px; padding:36px 30px 40px; border-radius:20px;}
	.mKey_vision .key_label{font-size:16px;}
	.mKey_vision .vision_tit{font-size:27px; margin-top:20px;}
	.mKey_vision .vision_sub{margin-top:20px;}
	.mKey_vision .vision_sub .s_txt{font-size:14px;}
	.mKey_vision .vision_sub .b_txt{font-size:20px;}
	.mKey_vision .vision_visual{padding-top:26px;}
	.mKey_vision .vision_pill{margin-top:-20px; padding:10px 20px; font-size:14px;}
	.mKey_boxes{gap:20px;}
	.mKey_row{gap:20px; min-height:270px;}
	.mKey_box{padding:32px 30px 30px; border-radius:20px;}
	.mKey_box .key_label{font-size:16px;}
	.mKey_box .key_ico img{width:48px;}
	.mKey_box .key_num{font-size:52px;}
	.mKey_box .key_num em{font-size:22px; margin-left:6px;}
	.mKey_box .key_desc{font-size:14px; margin-top:24px; line-height:1.7;}
	.mKey_box.box02{gap:40px;}
	.mKey_box.box02 .key_col + .key_col:before{left:-21px; top:60px; height:56px;}
	.mKey_box.box05 .key_num{margin-top:24px;}
	.mKey_box.box05 .key_desc{margin-top:22px;}
	.mKey_box.box05 .key_desc{max-width:230px;}
	.mKey_box.box05 .key_desc b{font-size:18px;}

	.mLink_box{min-height:150px; padding:20px 50px 20px 200px; border-radius:22px;}
	.mLink_img{left:30px;}
	.mLink_img img{width:140px;}
	.mLink_tit h2{font-size:28px;}
	.mLink_tit p{font-size:15px;}
	.mLink_btns{gap:16px;}
	.mLink_btns li a{width:68px; height:68px; border-radius:18px;}

	#mUniv .mTit_wrap.mTit_center{margin-bottom:44px;}
	.mUniv_tit{font-size:30px;}
	.mUniv_list{gap:18px;}
	.mUniv_list li a{width:210px; height:110px; padding:18px 30px; border-radius:55px;}
}

/* ---------- 1170 이하 (태블릿) ---------- */
@media (max-width: 1170px){
	#mVisual{height:auto;}
	#visual{height:auto; margin:0 auto; padding-bottom:0;}
	#visual .visual-wr{min-height:620px;}
	#visual .slo-wr{flex-direction:column; align-items:flex-start; gap:50px; padding:200px 24px 100px;}
	#visual .slogan{width:100%;}
	#visual .slogan small{font-size:24px;}
	#visual .slogan big img{width:100%; max-width:420px; height:auto;}
	#visual .mv-control{margin-top:36px;}
	#visual .mv-progress{left:24px; right:24px; bottom:44px;}
	#visual .right-wr{width:100%; gap:24px;}
	#visual .right-wr > p{font-size:19px;}
	#visual .right-wr .scroll_wr{width:104px; height:104px; line-height:104px;}
	#visual .right-wr .scroll_wr::before{top:calc(50% - 42px); left:calc(50% - 42px); width:84px; height:84px;}
	#visual .right-wr .scroll_wr img{width:14px; height:23px;}

	.mInner{padding:0 24px;}
	.mGall_slide_area{margin-left:24px;}
	.mSection{padding:80px 0 0;}
	#mLink{padding-top:110px;}
	#mUniv{padding:80px 0 90px;}
	.mTit{font-size:36px; letter-spacing:-1.2px;}
	.mTit:before{left:-26px; width:50px; height:49px; margin-top:-34px;}
	.mTit_wrap{margin-bottom:28px;}
	.mTit_wrap.mTit_center{gap:14px; margin-bottom:38px;}
	#mNoti .mTit_wrap{gap:40px;}
	.more_btn{height:42px; padding:0 20px;}

	/* 새소식 - 세로 배치 */
	.mNoti_wrap{flex-direction:column; gap:20px;}
	.mNoti_notice{width:100%;}
	.mNoti_best{width:100%;}
	.mNoti_box{padding:34px 30px; border-radius:20px;}
	.noti_list .thumb{width:200px; height:136px;}

	/* 주요성과 - 세로 배치 */
	.mKey_wrap{flex-direction:column; gap:18px;}
	.mKey_vision{width:100%; min-height:0; padding:40px 36px 44px; border-radius:20px;}
	.mKey_vision .vision_tit{font-size:30px;}
	.mKey_vision .vision_visual{margin-top:30px; padding-top:0;}
	.mKey_boxes{gap:18px;}
	.mKey_row{gap:18px; min-height:0;}
	.mKey_box{padding:32px 30px 30px;}

	/* 소통하는 SKKU HUSS - 세로 배치 / 휴대폰 이미지는 박스 위로 */
	.mLink_box{flex-direction:column; align-items:center; gap:24px; min-height:0; padding:110px 24px 36px; border-radius:20px; text-align:center;}
	.mLink_txt{flex-direction:column; align-items:center;}
	.mLink_img{left:50%; top:-40px; bottom:auto; margin-left:-60px;}
	.mLink_img img{width:120px;}
	.mLink_tit h2{font-size:27px;}
	.mLink_tit p{font-size:15px; margin-top:8px;}
	.mLink_btns{gap:14px;}

	.mUniv_tit{font-size:28px;}
	.mUniv_list{gap:16px;}
	.mUniv_list li a{width:190px; height:96px; padding:16px 26px; border-radius:48px;}
}

/* ---------- 980 이하 ---------- */
@media (max-width: 980px){
	#visual .visual-wr{min-height:560px;}
	#visual .slo-wr{padding:180px 20px 90px; gap:40px;}
	#visual .slogan small{font-size:21px; margin-bottom:12px;}
	#visual .slogan big img{max-width:360px;}
	#visual .mv-progress{left:20px; right:20px; bottom:40px;}
	#visual .right-wr > p{font-size:17px;}

	.mTit{font-size:32px;}
	.mKey_row{flex-wrap:wrap;}
	.mKey_box.box02, .mKey_box.box03, .mKey_box.box04, .mKey_box.box05{flex:1 1 100%; width:100%;}
	.mKey_box .key_num{font-size:48px;}
	.mKey_box.box05{background-position:right center;}
}

/* ---------- 767 이하 (모바일) ---------- */
@media (max-width: 767px){
	#visual .visual-wr{min-height:0;}
	#visual .slo-wr{padding:150px 16px 80px; gap:34px;}
	#visual .slogan small{font-size:18px; margin-bottom:10px;}
	#visual .slogan big img{max-width:100%;}
	#visual .mv-control{margin-top:28px;}
	#visual .mv-control .mv-play{margin-left:20px;}
	#visual .mv-paging{font-size:16px; gap:10px; margin:0 8px;}
	#visual .mv-paging .bar{height:10px;}
	#visual .mv-progress{left:16px; right:16px; bottom:32px;}
	#visual .right-wr{align-items:flex-start; gap:18px;}
	#visual .right-wr > p{font-size:15px; line-height:1.5;}
	#visual .right-wr .scroll_wr{flex:0 0 auto; width:80px; height:80px; line-height:80px;}
	#visual .right-wr .scroll_wr::before{top:calc(50% - 32px); left:calc(50% - 32px); width:64px; height:64px;}
	#visual .right-wr .scroll_wr img{width:12px; height:20px;}

	.mInner{padding:0 16px;}
	.mGall_slide_area{margin-left:16px;}
	.mContWrap{background-position: center 0; background-size: cover;}
	.mSection{padding:60px 0 0;}
	#mLink{padding-top:90px;}
	#mUniv{padding:60px 0 70px;}

	.mTit_wrap{flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:22px;}
	.mTit_wrap.mTit_center{align-items:center; margin-bottom:28px;}
	.mTit{font-size:28px; letter-spacing:-1px;}
	.mTit .dot i:before{top:-2px; width:4px; height:4px; margin-left:-2px;}
	.mTit:before{left:-18px; width:42px; height:41px; margin-top:-28px;}
	.mTit_desc{font-size:14px;}
	#mNoti .mTit_wrap{gap:10px;}
	#mNoti .mTit_desc{padding-top:0;}
	#mNoti .mTit_desc br{display:none;}
	.more_btn{height:38px; padding:0 16px; font-size:14px; gap:6px;}
	.more_btn .ico{width:14px; height:14px;}

	.mNoti_box{padding:26px 20px; border-radius:16px;}
	.mNoti_box .box_head{margin-bottom:20px;}
	.mNoti_box .box_tit{font-size:22px;}
	.noti_list li + li{margin-top:20px;}
	.noti_list li a{gap:16px;}
	.noti_list .thumb{width:120px; height:82px; border-radius:8px;}
	.noti_list .txt{padding-top:0;}
	.noti_list .tit{font-size:16px; max-height:48px;}
	.noti_list .cont{font-size:14px; margin-top:4px;}
	.noti_list .date{font-size:13px; margin-top:10px;}
	.best_item .thumb{border-radius:8px;}
	.best_item .tit{font-size:16px; height:48px; margin-top:12px;}
	.best_item .date{font-size:13px; margin-top:12px;}
	.best_progress{width:200px; margin-top:24px;}

	#mGall .mGall_head{align-items:flex-start; gap:12px;}
	#mGall .mGall_head .mTit{margin: 0 auto;}
	#mGall .mGall_head .more_btn{margin-left:0;}
	.mGall_cate{flex-wrap:wrap; padding-top:0;}
	.mGall_cate .cate_btn{height:32px; padding:0 12px; font-size:13px;}
	.gall_item{border-radius:12px;}
	.gall_item .thumb{border-radius:12px;}
	.gall_item .txt{padding:18px 18px 20px;}
	.gall_item .cate{height:22px; padding:0 8px; font-size:11px; line-height:22px;}
	.gall_item .yt_ico{width:30px; height:22px;}
	.gall_item .yt_ico img{width:11px;}
	.gall_item .tit{font-size:16px; height:48px; margin-top:10px;}
	.gall_item .date{font-size:13px; margin-top:16px;}
	#mGall .m_progress{margin-top:30px;}

	.mNo_data{min-height:130px; padding:30px 16px; font-size:15px; border-radius:12px;}

	.mKey_wrap{gap:14px;}
	.mKey_vision{padding:30px 22px 34px; border-radius:16px;}
	.mKey_vision .key_label{font-size:15px;}
	.mKey_vision .vision_tit{font-size:24px; margin-top:14px; letter-spacing:-1px;}
	.mKey_vision .vision_sub{margin-top:16px;}
	.mKey_vision .vision_sub .s_txt{font-size:14px;}
	.mKey_vision .vision_sub .b_txt{font-size:19px;}
	.mKey_vision .vision_visual{margin-top:24px;}
	.mKey_vision .vision_img img{max-width:260px;}
	.mKey_vision .vision_pill{margin-top:-18px; padding:9px 16px; font-size:13px;}
	.mKey_boxes{gap:14px;}
	.mKey_row{gap:14px;}
	.mKey_box{padding:26px 22px; border-radius:16px;}
	.mKey_box.box02{flex-direction:column; gap:30px;}
	/* 세로 배치에서는 구분선을 가로선으로 */
	.mKey_box.box02 .key_col + .key_col:before{left:0; top:-15px; width:100%; height:1px;}
	.mKey_box .key_label{font-size:15px; padding-top:2px;}
	.mKey_box .key_ico img{width:40px;}
	.mKey_box .key_num{font-size:42px; letter-spacing:-1px;}
	.mKey_box .key_num em{font-size:18px;}
	.mKey_box .key_desc{font-size:13px; margin-top:16px;}
	.mKey_box.box05 .key_num{margin-top:20px;}
	.mKey_box.box05 .key_desc{margin-top:16px;}
	.mKey_box.box05 .key_desc b{font-size:16px;}
	/* 모바일 전용 배경 이미지 (그래프가 텍스트 아래에 위치) */
	.mKey_box.box05{padding-bottom:120px; background:#154a7c url("../images/main/mKey_box05_m.jpg") no-repeat right bottom; background-size:cover;}
	.mKey_box.box05 .key_desc{max-width:none;}

	.mLink_box{gap:18px; padding:90px 18px 28px; border-radius:16px;}
	.mLink_img{top:-36px; margin-left:-50px;}
	.mLink_img img{width:100px;}
	.mLink_tit h2{font-size:22px;}
	.mLink_tit p{font-size:14px;}
	.mLink_btns{gap:10px;}
	.mLink_btns li a{width:56px; height:56px; border-radius:14px;}

	#mUniv .mTit_wrap.mTit_center{margin-bottom:28px;}
	.mUniv_tit{font-size:20px; letter-spacing:-0.8px;}
	.mUniv_tit br{display: block;}
	.mUniv_list{gap:10px;}
	.mUniv_list li{width:calc(50% - 5px);}
	.mUniv_list li a{width:100%; height:76px; padding:12px 22px; border-radius:38px; box-shadow:0 8px 20px rgba(30,60,120,.08);}
}

/* ---------- 480 이하 ---------- */
@media (max-width: 480px){
	#visual .slo-wr{padding:130px 16px 70px;}
	#visual .slogan small{font-size:16px;}
	#visual .right-wr{flex-direction:column; align-items:flex-start; gap:16px;}
	#visual .right-wr > p{font-size:14px;}
	#visual .right-wr .scroll_wr{width:70px; height:70px; line-height:70px;}
	#visual .right-wr .scroll_wr::before{top:calc(50% - 28px); left:calc(50% - 28px); width:56px; height:56px;}
	#visual .mv-progress{bottom:28px;}

	.mTit{font-size:24px;}
	.mTit:before{left:-14px; width:36px; height:35px; margin-top:-24px;}
	.mNoti_box .box_tit{font-size:20px;}
	.noti_list .thumb{width:96px; height:66px;}
	.noti_list .tit{font-size:15px; max-height:44px;}
	.noti_list .cont{display:none;}
	.noti_list .date{margin-top:8px;}

	#mKey .mTit_desc br{display: block;}
	.mKey_vision .vision_tit{font-size:21px;}
	.mKey_box .key_num{font-size:36px;}
	.mLink_tit h2{font-size:20px;}
	.mLink_btns li a{width:50px; height:50px; border-radius:12px;}
	.mUniv_list li a{height:64px; padding:10px 16px;}

	.mTit{margin:0 auto;}
	.mTit_desc{width:100%; text-align:center; line-height:1.4; word-break:keep-all;}
	#mNoti .mTit_desc{text-align:center;}
	#mNoti .mTit_desc br{display:block;}
	.more_btn{height:30px; padding:0 12px; font-size:12px; gap:4px;}
	.more_btn .ico{width:10px; height:10px;}
	.mGall_cate{width:100%; justify-content:center;}
	#mGall .mGall_head .more_btn{margin:0 auto;}
	.mUniv_tit{font-size:20px;}
}

/* ---------- 하단 footer 반응형 ---------- */
@media (max-width: 980px){
	footer .footer-top .line_wr{flex-direction:column; align-items:center; gap:24px;}
	footer .footer-mid{flex-direction:column; align-items:center; gap:24px; padding:30px 24px 40px; text-align:center;}
	footer .footer-bot{flex-direction:column; align-items:center; gap:14px; padding:24px 24px;}
	footer cite{text-align:center;}
}
@media (max-width: 767px){
	footer .footer-top{padding:24px 0 20px;}
	footer .footer-top .line_wr{padding:0 16px;}
	footer .ft-logo{align-items:center; gap:16px; justify-content:center;}
	footer .ft-logo > a{width:230px;}
	footer .ft-right{display:inline-flex; width:100%; gap:12px;}
	footer .select_footer{width:100%; height:50px;}
	footer .select_f_btn{width:100%; height:50px; font-size:16px; padding:0 18px;}
	footer .select_f_btn .arrow{width:34px; height:34px; right:8px;}
	footer .select_footer ul{bottom:50px; width:100%;}
	footer .footer-mid{padding:26px 16px 34px;}
	footer address span{display:block; margin:0 0 10px 0; font-size:15px; line-height:1.5;}
	footer a.sku_logo img{width:190px; height:auto;}
	footer .footer-bot{padding:20px 16px; border-radius:20px 20px 0 0;}
	footer cite{font-size:13px; line-height:1.5;}
	footer .ft-menu{gap:16px; justify-content:center; margin-bottom:6px;}
	footer .ft-menu li a{font-size:14px;}
}


/* TOP 버튼 */
#top_btn{position:fixed; right:40px; bottom:40px; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; width:64px; height:64px; line-height:1; padding:0; border:0; border-radius:50%; background:#144b85; color:#fff; box-shadow:0 10px 30px rgba(28,63,140,.35); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(20px) scale(.9); transition:opacity .4s ease, visibility .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease, box-shadow .3s ease;}
#top_btn.is_show{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
#top_btn:hover, #top_btn:focus-visible{background:#3b8fd9; border:0; color:#fff; box-shadow:0 14px 34px rgba(59,143,217,.45); transform:translateY(-4px) scale(1);}
#top_btn:focus-visible{outline:2px solid #144b85; outline-offset:4px;}
#top_btn .top_ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none;}
#top_btn .top_ring circle{fill:none; stroke-width:2.5;}
#top_btn .ring_bg{stroke:rgba(255,255,255,.18);}
#top_btn .ring_bar{stroke:#fff; stroke-linecap:round; transition:stroke-dashoffset .15s linear;}
#top_btn .top_ico{position:relative; display:block; width:20px; height:20px; overflow:hidden;}
#top_btn .top_ico i{position:absolute; left:0; top:0; width:100%; font-size:20px; line-height:20px; transition:transform .45s cubic-bezier(.65,0,.35,1);}
#top_btn .top_ico i + i{transform:translateY(100%);}
#top_btn:hover .top_ico i:first-child{transform:translateY(-100%);}
#top_btn:hover .top_ico i + i{transform:translateY(0);}
#top_btn .top_txt{margin-top:2px; font-family:'Outfit', sans-serif; font-size:11px; font-weight:600; letter-spacing:1px;}
@media (max-width:768px){
	#top_btn{right:16px; bottom:16px; width:52px; height:52px;}
	#top_btn .top_ico, #top_btn .top_ico i{font-size:18px; line-height:18px; height:18px;}
	#top_btn .top_txt{display:none;}
}
@media (prefers-reduced-motion:reduce){
	#top_btn, #top_btn .top_ico i{transition:none;}
}
@media (max-width: 480px){
	footer .ft-right{flex-wrap:wrap;}
}