
/* ************ 메인페이지 스타일 ************ */
/*** 공통 ***/

.main .titWrap h2 {font-size:50px; line-height:1.2;} 
.main .inner {max-width:1400px; margin: 0 auto;}

.main .mainpart.part2 .inner {padding:170px 0;}
.swiper-container.w991swiper {overflow:visible;}
.counter-container {display:inline-flex; overflow:hidden; border-radius:8px; margin:80px auto;}

/* 탭 버튼 영역 */
.tab-wrapper {display:flex; overflow-x:auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ white-space: nowrap; cursor:pointer;border-bottom:2px solid #ccc; padding: 5px 0;}
.tab-wrapper::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera */}

/* 탭 버튼 개별 */
.tabBtn {flex:0 0 auto; padding:10px 20px; margin:0 5px; font-size:16px; background:#f9f9f9; border-radius:20px; transition:all 0.3s ease; user-select:none; white-space:nowrap;}
.tabBtn.on {background:red; color:#fff; font-weight:bold;}
/* 콘텐츠 영역 */
.tabInner {margin-top:20px;}
.tabInner .tabItem {display:none;}
.tabInner .tabItem.on {display: block;}


/*** 메인 대표화면 ***/
.main .visual {position:relative; width:100%; height:100vh; background:url(/images/main/main_bg.webp) no-repeat center 70% / cover;}
.main .visual .inner {position:relative; height:100%; width:100%;}
.main .visual-cont {display:flex; position:absolute; top:40%; width:100%;}
.main .visual-txt {color:#fff; width:50%;}
.main .visual-txt h2 {font-size:60px; line-height:1.2;}
.main .visual-txt p {font-size:20px; opacity:0.7; margin-top:40px; line-height:1.3;}
.main .visual-btnwrap {display:grid; grid-template-columns:repeat(3,1fr); gap:20px; width:50%;}
.main .visual-btnwrap a {display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:20px; background:var(--base1); padding:30px;}
.main .visual-btnwrap a span {}
.main .visual-btnwrap a:hover {color:var(--base1); background:#fff;}
.main .visual-btnwrap a span {font-size:18px; color:#fff; margin-top:30px; font-weight:700; transition:all 0.3s;} 
.main .visual-btnwrap a:hover span {color:var(--base1);}

/*** 메인 공지사항 ***/
.main .main-notice {width:100%; height:100px; overflow:hidden; background:rgba(14,63,146,0.7); color:#fff; position:absolute; bottom:0;}
.main .main-notice .inner {display:flex;}
.main .main-notice h2 {font-size:24px; font-weight:700; position:relative; padding-left:45px; display:flex; align-items:center; margin-right:50px;}
.main .main-notice h2:before {content:""; display:block; width:35px; height:35px; border-radius:50%; background:var(--base1) url(/images/main/icon/i-notice.svg) no-repeat center / 15px; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.main .main-notice-swiper {width:calc(100% - 260px);}
.main .main-notice-swiper .swiper-slide {display:flex; gap:20px; align-items:center; font-size:18px; transition:all 0.3s;}
.main .main-notice-swiper .swiper-slide:hover {color:#ffeb3b;}
.main .main-notice-swiper .swiper-slide p {overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-inline-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;word-break:keep-all; width:85%;}
.main .main-notice .notice-btn {display:block; position:relative; width:15px; margin-right:20px;}
.main .main-notice .swiper-button-prev {background:url(/images/main/icon/i-notice_prev.svg) no-repeat center / contain; width:15px; height:10px; left:0; top:30%;} 
.main .main-notice .swiper-button-next {background:url(/images/main/icon/i-notice_next.svg) no-repeat center / contain; width:15px; height:10px; left:0; top:58%;}
.main .main-notice .detail-btnWrap {display:flex; align-items:center;}
.main-notice .detail-btn {display:block; font-size:14px; padding:8px 20px; color:#000; font-weight:500; background:#fff; border-radius:2rem; transition:all 0.3s;}
.main-notice .detail-btn:hover {background:var(--base1); color:#fff;}

/*** 사업성과 및 실적 ***/
.main .performance {padding:120px 0;}

.performance h2 {font-size:40px;}

.performance .titWrap {display:flex; justify-content:space-between; align-items:flex-start;}
.performance .titWrap .btnWrap {display:flex;}
.performance .titWrap .btnWrap a {display:inline-block; font-size:18px; font-weight:600; padding:12px 20px; border:1px solid #e0e0e0;}
.performance .titWrap .btnWrap a:hover {background:var(--base1); color:#fff;}
.performance .titWrap .btnWrap a+a {border-left:0;}
.performance .titWrap .btnWrap a:first-child {border-top-left-radius:10px; border-bottom-left-radius:10px;} 
.performance .titWrap .btnWrap a:last-child {border-top-right-radius:10px; border-bottom-right-radius:10px;}

.performance .perform-list {display:grid; grid-template-columns:repeat(4,1fr); gap:70px; margin-top:70px;}
.performance .perform-list-top {display:flex; overflow:hidden; gap:30px;}
.performance .perform-list .list-type {display:block; font-size:16px; font-weight:500; color:#666; position:relative;}
.performance .perform-list-top .line {position:relative; display:block; width:100%;}
.performance .perform-list-top .line:before {content:""; display:block; width:0; height:2px; background:#000; position:absolute; left:0; top:50%; transform:translateY(-50%); transition:all 0.3s; opacity:1; z-index:3;}
.performance .perform-list dt {overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-inline-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;word-break:keep-all; font-size:24px; font-weight:600; margin-top:20px; line-height:1.3;}
.performance .perform-list dd {overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-inline-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;word-break:keep-all; margin-top:10px; color:#666; font-size:18px;}
.performance .perform-list .list-date {color:#666; font-size:16px; display:block; margin-top:20px;}
.performance .perform-list li {transition:all 1s;}
.performance .perform-list li:hover dt {color:var(--base1);}
.performance .perform-list li:hover .list-type {color:var(--base1);}
.performance .perform-list li:hover .line:before {width:100%;}


/*** 사업목표·사업비전·교육목표 ***/
.main .busi_edu {position:relative; background:#f5f5f5; }
.main .busi_edu .inner {display:flex; color:#666; gap:100px; padding-bottom:120px;}
.main .busi_edu-right .bg {position:absolute; width:100vw; left:0; top:0; height:53%; object-fit:cover;}
.main .busi_edu-left_wrap {width:42%;} 
.main .busi_edu-left {background:var(--base2-2) url(/images/main/busi_edu_left_bg.svg) no-repeat center / cover; border-radius:20px; width:100%; padding:70px; box-shadow:30px 30px 20px 0 rgba(0, 0, 0, 0.20); box-sizing:border-box; position:relative; z-index:1; margin-top:120px;}
.main .busi_edu-left .link-btn {background:#2970E8; color:#fff; border-radius:10px; font-size:18px; padding:18px 30px; display:inline-block; margin-top:35px; display:inline-flex; gap:20px; align-items:center;}
.main .busi_edu-left .link-btn .arrow {width:57px; height:2px; background:#fff; margin-top:10px; position:relative;}
.main .busi_edu-left .link-btn .arrow:before {content:""; display:block; width:15px; height:2px; background:#fff; transform:rotate(45deg); position:absolute; right:-2px; bottom:5px;}
.main .busi_edu-left .link-btn:hover {background:#fff; color:#2970E8;}
.main .busi_edu-left .link-btn:hover .arrow, .main .busi_edu-left .link-btn:hover .arrow:before {background:#2970E8;}
.main .busi_edu-left .tabInner {margin-top:40px;}
.main .busi_edu-left .tab-wrapper {gap:20px; overflow:visible;}
.main .busi_edu-left .tabBtn {background:none; color:#5591F8; position:relative; font-weight:600;}
.main .busi_edu-left .tabBtn.on {color:#fff;}
.main .busi_edu-left .tabBtn.on:before {content:""; display:block; width:100%; height:2px; position:absolute; top:-10px; background:#fff;}
.main .busi_edu-left p {color:#fff; font-size:24px; width:75%; min-height:160px;}
.main .busi_edu-right {width:calc(58% - 100px); padding-top:120px;}
.main .busi_edu-right-top {}
.main .busi_edu-right-top > div {display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative;}
.main .busi_edu-right-top a {text-align:center; background:#fff; padding:40px; color:#000; font-size:18px; font-weight:600; border-radius:20px;}
.main .busi_edu-right-top a:hover {color:#2970E8;}
.main .busi_edu-right-top a:hover img {}
.main .busi_edu-right-top a span {display:block; line-height:1.3; margin-top:30px;}
.main .busi_edu-right-bottom {position:relative; z-index:1; width:100%; background:#fff; border:1px solid #e5e5e5; border-radius:20px; padding:50px; box-sizing:border-box; margin-top:100px; display:flex; gap:50px; align-items:center;}
.main .busi_edu-right-bottom h3 {color:var(--base2-2); font-size:24px; font-weight:600; line-height:1.3; }
.main .busi_edu-right-bottom > div {display:grid; grid-template-columns:1fr 1fr; gap:50px; width:calc(100% - 228px); }
.main .busi_edu-right-bottom > div a {display:block; font-size:18px; color:#000; font-weight:500;}
.main .busi_edu-right-bottom > div a .line {height:13px; border-bottom:1px solid #000; margin-top:10px; position:relative;}
.main .busi_edu-right-bottom > div a .line:before {content:""; display:block; width:20px; height:1px; background:#000; transform:rotate(45deg); position:absolute; right:-3px; bottom:6px; }
.main .busi_edu-right-bottom > div a:hover {color:#2970E8;}
.main .busi_edu-right-bottom > div a:hover .line {border-bottom:1px solid #2970E8;}
.main .busi_edu-right-bottom > div a:hover .line:before {background:#2970E8;}
/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
.main .visual {height:80vh;}
.main .visual-cont {padding:0 30px; box-sizing:border-box; top:50%; transform:translateY(-60%); flex-direction:column; gap:50px;}
.main .visual-txt {width:100%;}
.main .visual-txt h2 {font-size:45px;}
.main .visual-txt p {margin-top:30px;}
.main .visual-btnwrap a {padding:30px 25px; position:relative;}
.main .visual-btnwrap a img {width:50px; height:50px;}
.main .visual-btnwrap a span {margin-top:20px; font-size:17px;}

/*** 메인 공지사항 ***/
.main .main-notice .inner {padding:0 30px; box-sizing:border-box;}
.main .main-notice h2 {font-size:20px;}
.main .main-notice-swiper .swiper-slide {font-size:16px;}

/*** 사업성과 및 실적 ***/
.main .performance {padding:80px 30px;}
.main .titWrap h2 {font-size:40px;}
.performance .titWrap .btnWrap a {font-size:16px;}
.performance .perform-list {margin-top:50px;}

.main .busi_edu .inner {padding:0 30px 80px; gap:60px;}
.main .busi_edu-left {margin-top:80px;}
.main .busi_edu-right {padding-top:80px; width:calc(58% - 60px);}
}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
.main .visual {height:75vh;}	
.main .visual-btnwrap {width:70%;}
.main .visual-txt h2 {font-size:36px;}
.main .visual-txt p {font-size:18px;}
.main .visual-btnwrap a img {width:45px; height:45px;} 
.main .visual-btnwrap a span {font-size:16px;}
	
.main .main-notice h2 {margin-right:10px; text-indent:-9999px;}	
.main .main-notice-swiper {width: calc(100% - 166px);}

.main .titWrap h2 {font-size:30px;}
.main .performance {padding:60px 30px;}
.performance .perform-list {gap:40px;}
.performance .perform-list dt {font-size:20px;}
.performance .perform-list dd {font-size:16px;}
.performance .titWrap .btnWrap a {padding:8px 15px;}


.main .busi_edu .inner {padding:0; flex-direction:column;}
.main .busi_edu-left_wrap {width:100%; padding:60px 30px 0; box-sizing:border-box;}
.main .busi_edu-left {width:100%; margin:0; padding:50px;}
.main .busi_edu-left .link-btn {font-size:16px;}
.main .busi_edu-left p {font-size:20px; min-height:65px;}
.main .busi_edu-right {width:100%; background:url(/images/main/busi_edu_bg.webp) no-repeat center / cover; padding:30px 30px 60px; box-sizing:border-box;}
.main .busi_edu-right .bg {display:none;}

.main .busi_edu-right-top a {padding:30px 20px;}
.main .busi_edu-right-top a span {margin-top:10px;}
.main .busi_edu-right-top a img {width:40px; height:40px;}
.main .busi_edu-right-bottom {margin-top:20px;}
.main .busi_edu-right-bottom h3 {font-size:20px;}
.main .busi_edu .inner {gap:30px;}
}


@media screen and (max-width:767px) { 
.main .visual {height:70vh; min-height:600px;}
.main .visual-txt h2 {font-size:30px;}
.main .visual-txt p {font-size:16px;}
.main .visual-btnwrap {width:90%;}


.main .main-notice-swiper .swiper-slide {flex-direction:column; align-items:flex-start; gap:0px;
justify-content:center;}
.main .main-notice .detail-btnWrap {display:none;}
.main .main-notice-swiper {width:100%;}

.main .main-notice h2 {display:none;}

.main .titWrap h2 {font-size:26px;}


.performance .titWrap {align-items:center; gap:15px 30px; flex-wrap:wrap;}
.performance .perform-list {margin-top:30px; gap:45px 30px; grid-template-columns:1fr 1fr;}
.performance .perform-list dt {margin-top:10px;}
.performance .perform-list .list-date {margin-top:10px;}

.main .busi_edu-left {}
.main .busi_edu-left .link-btn {padding:15px 20px; margin-top:25px;}
.main .busi_edu-right-top > div {gap:10px;}
.main .busi_edu-left p {font-size:18px; width:100%;}
.main .busi_edu-right-top a {padding:20px 15px;}
.main .busi_edu-right-top a span {font-size:16px;}
.main .busi_edu-right-bottom {padding:30px; flex-direction:column; gap:30px;}
.main .busi_edu-right-bottom > div {width:100%;}
.main .busi_edu-right-bottom > div a .line {margin-top:0;}
.main .busi_edu-right-bottom h3 {text-align:center;}
}

@media screen and (max-width:500px) {
.main .visual-cont {padding:0 20px;}
.main .visual-txt h2 {font-size:28px;}
.main .visual-btnwrap {gap:10px;}
.main .visual-btnwrap a {padding:20px 10px;}
.main .visual-btnwrap a img {height:40px; width:40px;}
.main .visual-btnwrap a span {margin-top:10px;}

.main .main-notice .inner {padding:0 20px;}
.main .main-notice-swiper .swiper-slide p {width:100%; -webkit-line-clamp:2; line-height:1.3; margin-top:6px;}
.main .visual-btnwrap {width:100%;}
.performance .titWrap .btnWrap a {font-size:14px; white-space:nowrap;}
.main .titWrap h2 {font-size:24px;}

.main .performance {padding:50px 20px;} 
.performance .perform-list {grid-template-columns:1fr;}

.main .busi_edu-left {padding:50px 30px 40px;}
.main .busi_edu-left_wrap {padding:50px 20px 0;}
.main .busi_edu-left .tabInner {margin-top:25px;}
.main .busi_edu-right {padding:30px 20px 50px;}
.main .busi_edu-right-bottom {gap:20px;}
.main .busi_edu-right-bottom > div a p {font-size:16px;}
}
