@charset "utf-8";
#main{max-width:100%; overflow: hidden;}
.mcnt1{overflow: hidden; position: relative;width: 100%; max-width:100%;  height: 100dvh !important; transition:.3s; z-index: 20;}
.mcnt1 .item{width: 100%; height: 100dvh; position: relative; overflow: hidden; }
.mcnt1 .item .mv_img{width: 100%; height: 100%;}
.mcnt1 .item .mv_img img{width: 100%; height: 100%; object-fit:cover; transition:2.2s;} 
.mcnt1 .active .mv_img img{transform:scale(1.05) rotate(.001deg); }
.mcnt1 .active .mv_img{transform:scale(1.05) rotate(.001deg); }
.mcnt1 .m_txt{position: absolute; left: 0; top: 0; width: 100%; height: 100%;  align-items:center; box-sizing: border-box;  }
.mcnt1 .m_txt .box {display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%;  	flex-direction: column; text-align: left; padding-bottom: 125px;}
.mcnt1 .m_txt .box h3{position: relative; font-size: 70px; font-weight: 700; line-height: 120%; /* 84px */ background: linear-gradient(91deg, #00CAFF -29.55%, #0048B3 99.25%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;   opacity: 0; filter:blur(10px); transition:.4s; top: 30px;   margin-bottom: 20px; margin-left: -3px;}
.mcnt1 .m_txt .box h3 span{display: block; font-size: 50px; font-weight: 700; line-height: 140%;}
.mcnt1 .m_txt .box p{color: #444; font-size: 22px; font-weight: 600; line-height: 160%;  position: relative; opacity: 0; filter:blur(10px); transition:.4s .4s; top: 30px;  margin-left: -3px;}
.mcnt1 .active .m_txt .box h3,
.mcnt1 .active .m_txt .box  p{opacity: 1;  top: 0; filter:blur(0px); }
.mcnt1 .mv-controll{position: absolute; left: 50%; bottom: calc(35vh - 50px); z-index: 100; display: flex; align-items:center; gap:16px; line-height: 0; translate:-50% 0; width: 1440px; margin-left: -3px;}
.mcnt1 .mv-controll .mv-slider-bt{cursor: pointer;}
.mcnt1 .mv-controll .dots{display: flex; align-items:center; gap:8px; }
.mcnt1 .mv-controll .dots .dot{cursor:pointer; width: 6px; height: 6px; background: rgba(102, 102, 102, 0.60); border-radius: 50%; box-sizing: border-box; transition:.3s; position: relative; overflow: hidden;}
.mcnt1 .mv-controll .dots .dot .line-bar{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.mcnt1 .mv-controll .dots .dot .line-bar i{position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(91deg, #00CAFF -29.55%, #0048B3 99.25%);}
.mcnt1 .mv-controll .dots .dot.current{width: 80px; border-radius: 50px;}

.mcnt2-wrap{display: flex; justify-content: center; margin-top: -156px; position: relative; z-index: 100;}
.mcnt2-wrap .mcnt2{max-width:1697px; width: 100%; border-radius: 20px 20px 0 0; background: #003F9D; backdrop-filter: blur(10px); height: 156px; padding: 0 58.5px;}
.mcnt2-wrap .mcnt2 > ul{display: flex; align-items:center; }
.mcnt2-wrap .mcnt2 > ul > li{flex:1; }
.mcnt2-wrap .mcnt2 > ul > li > a{position: relative; display: flex; flex-direction: column; align-items:center; justify-content: center; height: 156px; gap:8px; z-index: 10;}
.mcnt2-wrap .mcnt2 > ul > li > a:after{position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 162px; border-radius: 20px 20px 0 0; background: linear-gradient(130deg, #00CAFF 23%, #0048B3 125.23%); opacity: 0; height: 0%; z-index: -1; transition:.3s;}
.mcnt2-wrap .mcnt2 > ul > li > a .tbx{color: #FFF; text-align: center; font-size: 20px; font-weight: 400; line-height: 160%; }
.mcnt2-wrap .mcnt2 > ul > li:hover > a:after{opacity: 1; height: 162px;}

.mcnt3-wrap{position: relative; background: linear-gradient(103deg, #EFF3FC 25.31%, #EDF2FF 98.83%); padding: 180px 0 140px; z-index: 1;}
.mcnt3-wrap:before{position: absolute; content: ''; width: 100%; height: 100%; background: url(../img/main/mcnt3-bg.png) left bottom no-repeat; left: 0; bottom: 0; z-index: -1;}
.mcnt3{display: flex; justify-content: space-between; gap:20px;}
.mcnt3 .lbx{display: flex; flex-direction: column; gap:30px; padding-top: 40px;}
.mcnt3 .lbx .tit{display: flex; flex-direction: column; gap:10px;}
.mcnt3 .lbx .tit small{color: #00BEF0; font-size: 22px; font-weight: 600; line-height: 160%;  letter-spacing: 1.32px;}
.mcnt3 .lbx .tit h3{color: #222; font-size: 40px; font-weight: 700; line-height: 140%; }
.mcnt3 .lbx p{color: #666; font-size: 22px; font-weight: 400; line-height: 160%; }
.mcnt3 .rbx .box-wrap{display: flex; flex-wrap:wrap; gap:20px; max-width:916px;}
.mcnt3 .rbx .box-wrap .box{flex:1 1 25%; border-radius: 12px; border: 2px solid #DEE4F0; background: #FFF; box-sizing: border-box; height: 258px; transition:.3s;}
.mcnt3 .rbx .box-wrap .box a{display: flex; flex-direction: column; width: 100%; height: 100%; padding: 44px 24px 24px 40px; position: relative; z-index: 1;}
.mcnt3 .rbx .box-wrap .box a:before{position: absolute; content: ''; width: 100%; height: 100%; background: url(../img/main/mcnt3-box.png) right bottom no-repeat; left: 0; bottom: 0;}
.mcnt3 .rbx .box-wrap .box a .txt{display: flex; flex-direction: column; }
.mcnt3 .rbx .box-wrap .box a .txt small{color: #003F9D; font-size: 18px; font-weight: 700; line-height: 160%; transition:.3s;}
.mcnt3 .rbx .box-wrap .box a .txt b{color: #222; font-size: 28px; font-weight: 700; line-height: 160%; transition:.3s; }
.mcnt3 .rbx .box-wrap .box a .txt span{color: #FFF; font-size: 18px; font-weight: 400; line-height: 160%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; margin-top: 12px;}
.mcnt3 .rbx .box-wrap .box a figure{position: absolute; right: 24px; bottom: 24px; display: flex; align-items:center; justify-content: center; width: 90px; height: 90px;}
.mcnt3 .rbx .box-wrap .box:hover{translate:0 -10px; box-shadow: 6px 10px 20px 0 rgba(0, 68, 194, 0.25); border-radius: 12px; background: #003F9D;
	a .txt small{color: #00BEF0;}
	a .txt b{color: #fff;}
}

.main-tit{display: flex; flex-wrap:wrap; justify-content: space-between; align-items:center; margin-bottom: 40px;}
.main-tit h3{color: #222; font-size: 40px; font-weight: 700; line-height: 160%; }
.main-tit .link-box > a{display: flex; align-items: center; gap: 12px;}
.main-tit .link-box > a p{color: #303030; font-size: 20px; font-weight: 600; line-height: 160%; }
.main-board{display: flex; gap:40px; }
.main-board > a{width: calc(25% - 20px); }


.mcnt4-wrap{margin-top: 140px;;}
.mcnt4 .main-board > a figure{position: relative; border-radius: 10px; /* border: 1px solid #EEE; */ box-sizing: border-box;}
.mcnt4 .main-board > a figure:after{position: absolute; content: ''; width: 100%; height: 100%; background: url(../img/main/mcnt4-video.png) center no-repeat; left: 0; top: 0; transition:.3s; }
.mcnt4 .main-board > a figure:before{position: absolute; content: ''; width: 100%;	height: 100%; border-radius: 10px; border: 3px solid #003F9D; box-sizing: border-box; overflow: hidden; transition:.3s; opacity: 0;}

.mcnt4 .main-board > a figure span{overflow: hidden; display: block; border-radius: 12px;}
.mcnt4 .main-board > a figure img{width: 100%; height: 100%; object-fit:cover; transition:.3s;}

.mcnt4 .main-board > a figure figcaption{position: absolute; right: 12px; bottom: -12px; display: inline-flex; padding: 4px 12px; align-items:center; justify-content: center; text-align: center; color: #FFF; font-size: 16px; font-weight: 700; line-height: normal; border-radius: 100px;}
.mcnt4 .main-board > a figure figcaption.c1{background: #254BE6;}  /* 디지털·AI */
.mcnt4 .main-board > a figure figcaption.c2{background: #6B24F9;} /* 진로·학업설계 */
.mcnt4 .main-board > a figure figcaption.c3{background: #EA662D;} /* 취업역량 */
.mcnt4 .main-board > a figure figcaption.c4{background: #76D031;} /* 사회·인성 */
.mcnt4 .main-board > a figure figcaption.c5{background: #30C4E5;} /* 자기경영·리더십 */
.mcnt4 .main-board > a figure figcaption.c6{background: #E49516;} /* 경제·금융 */
.mcnt4 .main-board > a figure figcaption.c7{background: #F242C6;} /* 문해력 */
.mcnt4 .main-board > a figure figcaption.c8{background: #0BB27D;} /* 성장전환기 */
.mcnt4 .main-board > a figure figcaption.c9{background: #E2181B;} /* 교원연수 */
.mcnt4 .main-board > a figure figcaption.c10{background: #816CF6;} /* 기업교육 */
.mcnt4 .main-board > a .tbx{display: flex; flex-direction: column; gap:6px; margin-top: 20px;}
.mcnt4 .main-board > a .tbx b{color: #222; font-size: 22px; font-weight: 700; line-height: 160%; width: 100%; transition:.3s;}
.mcnt4 .main-board > a .tbx p{color: #666; font-size: 18px; font-weight: 400; line-height: 160%; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden; text-overflow: ellipsis; transition:.3s;}
.mcnt4 .main-board > a:hover{
	figure img{scale:1.1;}
	figure:after{background: url(../img/main/mcnt4-video-h.png) center no-repeat;}
/*  figure:before{opacity: 1;} */
/*  .tbx b{color: #003F9D; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
 .tbx p{color: #222;} */
}

.mcnt5-wrap{margin-top: 140px; margin-bottom: 300px;}

.mcnt5 .main-board > a > figure{overflow: hidden; }
.mcnt5 .main-board > a > figure img{width: 100%; height: 100%;  aspect-ratio: 1 / 1; transition:.3s;}
.mcnt5 .main-board > a:hover > figure img{scale:1.1;}