@charset "UTF-8";
main button{ font-size: 12px} 
.container{ padding-bottom: 0} 
#footer{ margin-top: 0} 
/* 메인비주얼 */
.main_visual{ position: relative; width: 100%; background:#f7f7f7}
.main_visual .swiper-wrapper{ position: relative; z-index: 1; width: 100%; max-width:1280px; margin: 0 auto;} 
.main_visual{ } 
.main_visual .swiper-slide{ position: relative; height: 400px; width: 100%; display: flex; align-items: center; background-color: #f7f7f7 } 
.main_visual .img{ position: absolute; left:0; top: 0; ;width: 100%;height:400px; object-fit: cover; z-index: 1;  background-repeat: no-repeat; background-position:38px 50%;  background-color: #f7f7f7;}
.main_visual img{ min-width: 100%; height: 560px; width: auto; object-fit: cover; display: none} 
.main_visual .v_txt{ position: relative; z-index: 2; width:420px;color: #fff; background:#0253a5;box-shadow: 10.5px 18.2px 19.4px 0.6px rgba(0, 0, 0, 0.25); padding:35px 40px; height: 280px;  } 
.main_visual .v_txt .tit{ font-weight: 500; line-height: 1.24;  letter-spacing: -0.45px; font-size:1.2857rem;} 
.main_visual .v_txt .tit strong{ display: block;font-weight: 600; font-size:2.4285rem; letter-spacing: -0.85px; margin-top: 10px} 
.main_visual .v_txt .txt{ word-break: keep-all; font-weight: 400; font-size:1.1428rem;  margin-top:15px;line-height: 1.5;  letter-spacing: -0.4px; } 
.slide_tool{ position: absolute; z-index: 2; bottom:90px; width: 100%; max-width: 1200px; left: 50%; transform: translateX(-50%); display: flex; align-items: center} 
.main_visual .swiper-button-prev, .main_visual .swiper-button-next{ display: none } 
.main_visual.swiper-container-horizontal > .swiper-pagination-bullets{ position: relative; width: auto; bottom: auto; left: auto} 
.main_visual .swiper-pagination{ position: relative; opacity: 1; transition: none; line-height: 15px} 
.swiper-pagination-clickable .swiper-pagination-bullet{ width: 10px; height:5px; margin-right: 5px; opacity: 1; background:rgba(255,255,255,0.76); transition:width .3s ; border-radius: 0; vertical-align: middle; margin-top: -2px} 
.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:25px; background: #fff;  } 
.play_pause{ line-height: 1}
.swiper-button-play{ display: none;font-size: 0} 
.swiper-button-pause{ font-size: 0;}
.swiper-button-play:before, .swiper-button-pause:before{font-style: normal; font-weight: normal; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "remixicon"; content: "\EFDA"; color: rgba(255,255,255,0.6); font-size: 15px; line-height: 15px}
.swiper-button-play:before{content: "\F012";} 
@media screen and (min-width:1300px) {
	.main_visual .img:before{ content: ""; display: block; width: 60px; height: calc(100% + 50px); background:#f7f7f7; position: absolute; left:-40px; top: 0; z-index: 1}
}

/************ 
컨텐츠 
************/
.contentWrap{ margin: 4rem auto 0 auto; padding: 0 40px; width: 100%; max-width: 1280px } 
.contentWrap h2{ font-size:  1.2857rem; font-weight: 600; color: #222;  padding-bottom: 14px; position: relative }
.contentWrap .blind{ padding: 0 !important; margin: 0 !important} 
/* 더보기 버튼 기본 */
.bt_more{ position: absolute; right: 0; top:-3px; width: 30px; height: 30px; display: block ;  } 
.bt_more:before, .bt_more:after{ content: ""; display: block; width: 19px; height: 1px; background: #606060;  position: absolute; left:6px;top: 50%} 
.bt_more:after{ transform: rotate(90deg);  } 
/* 리스트 기본 */
ul.list{ display: flex;}
ul.list .img{ margin-bottom: 15px} 
ul.list .img img{image-rendering: -moz-crisp-edges; image-rendering:-o-crisp-edges;       image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;}
ul.list .tit{ font-size: 1.142rem; font-weight: 500; color: #222;  display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis} 
ul.list .date{ font-size: 1rem; color: #999; font-weight: 500 } 
ul.list .dec{ font-size: 1rem;line-height: 1.29;color: #606060;height:4.08rem; margin-bottom: 15px; overflow: hidden; display: -webkit-box; word-wrap: break-word; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 100%; font-weight: 200; padding-top: 5px } 
ul.list li> a{ display: block; } 
/* 탭 기본 */
.tab_list_w{ display: flex; font-size: 1.428rem;  color: #838281; width: 100%; border-bottom: 1px solid #222222; margin-bottom:0  } 
.tab_list_w li{ position: relative;} 
.tab_list_w li button{ font-size: 1.2857rem;  color: #838281; font-weight:400; padding-bottom: 10px; min-width:120px; line-height: 1.6; margin-bottom: -1px} 
.tab_list_w li.active button{ color: #222; font-weight: 600; border-bottom: 4px solid #00a6e7} 


/* 뉴스 */
.news_container{ padding: 0; display: flex; justify-content: space-between;gap:60px} 
.news_bx{ position: relative; width: 50%;} 
.news_bx ul.list{ flex-direction: column;} 
.news_bx ul.list li{ border-bottom: 1px solid #e1e1e1} 
.news_bx ul.list li:last-of-type{ border-bottom-color:#606060 } 
.news_bx ul.list a{ display: flex; flex-direction: row-reverse; justify-content: space-between ;gap:45px; align-items: center; padding: 0 30px} 
.news_bx ul.list .txt{ width: calc(100% - 50px); overflow: hidden; padding: 20px 0} 
.news_bx ul.list .txt .tit{ font-size: 1.0714rem; font-weight: 400  } 
.news_bx ul.list p.date{ display: flex; flex-direction: column-reverse; text-align: center; color: #777; font-size: 0.928rem; line-height: 1.2; width: 50px; flex-shrink: 0} 
.news_bx ul.list p.date > strong{ font-size: 1.42857rem; font-weight: 600; color: #007bcb } 


/* 사이버 교육원*/
.cyber_bx{ width: 50%; position: relative}
.cyber_bx h2:after{ content: ""; display: block; width: 110px; height: 4px; background:#00a6e7; position: absolute; left: 0; bottom:0  }
.cyber_bx .list{ flex-wrap: wrap; background:#f7f7f7; padding: 45px 30px 10px   } 
.cyber_bx .list li{ width: 33.333%; text-align: center; margin-bottom: 30px; color: #222; font-size:1.0714rem; font-weight: 500;letter-spacing: -0.38px; } 
.cyber_bx .list i{ display: block; width: 70px; height: 70px; margin: 0 auto 10px auto} 

/* 자주 찾는 메뉴 */
.hot_bx{ margin-top: 60px; position: relative; display: flex; align-items: center; padding: 25px 0 30px 0; justify-content: space-between; gap:120px} 
.hot_bx:before{ content: ""; background: #0253a5; position: absolute; left: 50%; top:0; transform: translate(-50%); width: 100vw; height: 100%; z-index: -1} 
.hot_bx h2{ color: #fff; font-size: 1.4285rem; width: 130px; flex-shrink: 0; padding-bottom: 0} 
.hot_bx h2 span{ font-weight: 500; font-size: 1.0714rem; display: block} 
.hot_bx i{ display: block; overflow: hidden; margin-bottom: 5px} 
.hot_bx .list{ width: calc(100% - 130px); display: flex; justify-content: space-between; padding-right: 70px} 
.hot_bx .list li{ color: #fff; font-size:1.0714rem; font-weight: 500; text-align: center;} 
.hot_bx .list i img{ max-height:40px;max-width: 40px; } 

/* 교육조회 */
.edu_bx{ display: flex; margin-top: 60px; gap:50px; align-items: center; } 
.edu_bx h2{ font-size: 1.4285rem; line-height: 1.4; width: 260px; flex-shrink: 0} 
.edu_bx h2 > span{ font-size: 1.1428rem; font-weight: 400; line-height: 1.5; color: #606060; display: block;margin-top: 15px} 
.edu_bx .list{ display: flex; flex-wrap: wrap} 
.edu_bx .list li{ width: 33.333%; padding-right: 40px } 
.edu_bx .list li:nth-of-type(n+4){margin-top:40px } 
.edu_bx .list li a{ display: flex; gap:25px; align-items: center } 
.edu_bx .list li a p{ width: calc(100% - 54px)} 
.edu_bx .list i{ display: block; overflow: hidden; text-align: center; width: 54px; flex-shrink: 0} 
.edu_bx .list i img{ max-width: 54px; max-height: 50px} 
.edu_bx .list li a p>strong{ color: #222; font-size:1.1428rem; font-weight: 500; display: block } 


/* 관련사이트 */
.banner_bx{ height: 100px; display: flex; align-items: center; justify-content: space-between; width: calc(100% + 80px); margin-left: -40px; max-width: 1280px; position: relative;margin-top: 120px } 
.banner_bx:before{ position: absolute; left: 50%; top: 0; transform: translate(-50%); width: 100vw; height: 1px; background:#e1e1e1; content: ""} 
.banner_bx .swiper-container{ width: calc(100% - 100px); margin: 0; order: 1 } 
.banner_bx .swiper-wrapper{ align-items: center} 
.banner_bx .swiper-wrapper li{}
.banner_bx .swiper-wrapper li img{ width: auto; max-width: 100%; max-height: 35px;image-rendering: -moz-crisp-edges; image-rendering:-o-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;} 
.banner_bx .slide_tool{ position: relative; width: 80px; order: 2; bottom: auto; left: auto; transform: none; justify-content: center } 
.banner_bx .swiper-button-prev:after, .banner_bx .swiper-button-next:after{ color:#606060; font-size: 15px } 
.banner_bx .swiper-button-prev{ left: 0} 
.banner_bx .swiper-button-next{ right: 0} 
.banner_bx .swiper-button-pause, .banner_bx .swiper-button-play{ position: relative; text-align: center; width: 8px; height: 15px; line-height: 15px; vertical-align: top} 
.banner_bx .swiper-button-play{ width: 20px} 
.banner_bx .swiper-button-play:before, .banner_bx .swiper-button-pause:before{ color: #606060; font-size: 20px; font-weight: normal; width: 20px; height: 15px} 
.banner_bx .swiper-button-pause:before, .banner_bx .swiper-button-pause:after{content:""; display: block; width: 2px; height: 15px; position: absolute; left: 0; background: #606060; top: 0 }
.banner_bx .swiper-button-pause:after{ left: auto; right: 0} 

@media screen and (max-width:1300px) {
	.banner_bx{width:calc(100% + 40px); margin-left: -20px; padding: 0 0px} 
}
@media screen and (max-width:1299px) {
	.main_visual .img{ background-position: 50% 50%} 
}
@media screen and (max-width:1280px) {
	.main_visual .v_txt{ padding-left: 40px; padding-right: 40px} 	
	.main_visual .slide_tool{ padding-left: 40px} 
	.cyber_bx .list{ padding-left: 10px; padding-right: 10px} 
	
}
@media screen and (max-width:1100px) {
	.contentWrap{ padding: 0 20px} 	
}
@media screen and (max-width:1023px) {
	.news_container{ gap:25px} 
	.news_bx ul.list a{gap:15px; padding: 0 15px} 
	.cyber_bx .list{ padding-left: 10px; padding-right: 10px} 
	.cyber_bx ul.list li> a{ line-height: 1.4; padding: 0 3px} 
	.hot_bx{gap:50px}
	.hot_bx .list{ padding-right: 20px} 
	.edu_bx{ flex-direction: column; align-items: flex-start; gap:0px} 
	.edu_bx h2{ width: 100%; margin-bottom: 20px} 
	.edu_bx h2 > span{ margin-top: 10px} 
	.edu_bx h2 br{ display: none} 
	.edu_bx .list li{ padding-right: 15px} 
	.edu_bx .list li:nth-of-type(n+4){ margin-top: 20px} 
}

@media screen and (max-width:767px) {	
	.contentWrap h2{ padding-bottom: 11.5px; margin-bottom: 20px} 
	.main_visual{ padding-bottom:130px; background: #fff} 
	.main_visual .swiper-slide{ align-items: flex-start} 
	.main_visual img{ display: block; height: auto} 
	.main_visual .swiper-slide, .main_visual .img{ height: auto; background: none !important} 
	.main_visual .img{ position: relative; } 
	.main_visual .v_txt{ padding: 30px 20px; position: absolute; left: 0; bottom: -90px; max-width: 70%; min-width:260px;box-shadow: 3.8px 6.5px 10px rgba(0, 0, 0, 0.09); height: auto   } 
	.main_visual .v_txt .tit{ font-size: 1.166rem; font-weight: 500} 
	.main_visual .v_txt .tit strong{ font-size: 1.8333rem; font-weight: 600}
	.main_visual .v_txt .txt{ font-size: 1rem; letter-spacing: -0.3px; line-height: 18px; margin-top: 19.5px; word-break: keep-all; font-weight: 400} 
	.swiper-pagination-clickable .swiper-pagination-bullet{ margin: 0 2px; background: #cee6ff; width: 20px; height: 6.5px} 
	.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active, .popzone_bx .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:40px; background: #00a6e7} 
	.main_visual .play_pause, .main_visual .swiper-button-prev, .main_visual .swiper-button-next{ display: none} 
	.main_visual .slide_tool{ padding: 0;  bottom: 0px; text-align: center; width: 100%} 
	.main_visual .swiper-pagination{ width: 100%; text-align: center} 
	.contentWrap{ margin-top: 50px} 
	.news_container{ flex-direction: column; gap:60px} 
	.news_container [class$=_bx]{ width: 100%} 
	.tab_list_w li button{ font-size: 17px;min-width: 100px} 
	ul.list .tit{ white-space: normal; text-overflow: inherit; } 
	.news_bx ul.list p.date{ font-size: 1rem} 
	.news_bx ul.list p.date > strong{ font-size:1.58333rem; color: #00a6e7 } 
	.news_bx ul.list .txt{ padding: 15px 0} 
	.contentWrap h2{margin-bottom: 0; border-bottom: 1px solid #606060}
	.cyber_bx .list{ padding: 30px 10px 20px 10px} 
	.cyber_bx .list li{ width: 50%; margin-bottom: 20px} 
	.cyber_bx .list i{ width: 60px; height: 60px} 
	.hot_bx{ flex-direction: column; align-items: flex-start; gap:25px; padding-bottom: 10px;} 
	.hot_bx h2{ width: 100%; border-bottom-color: #80d3f3; font-size: 1.416rem} 
	.hot_bx h2 span{ display: none} 
	.hot_bx .list{ overflow-x: auto; width: 100%; padding-bottom: 20px; width: calc(100% + 20px);gap:35px} 
	.edu_bx h2{ border: none; font-size: 1.416rem; margin-bottom:10px;font-size: 1.416rem} 
	.edu_bx h2 > span{ border-top: 1px solid #606060; padding-top: 20px; margin-top: 15px; position: relative} 
	.edu_bx h2 > span:before{ content: ""; display: block; position: absolute; left: 0; top: -4px; width: 185px; height: 4px; background:#00a6e7 } 
	.edu_bx .list{ flex-direction: column; flex-wrap: nowrap; gap:30px} 
	.edu_bx .list li{ width: 100%; margin: 0 !important;padding-right: 0} 
	.banner_bx{ height: 70px; width: 100%; margin-left: 0; margin-top: 80px}
	.banner_bx .swiper-container{ width: 100%}
	.banner_bx .slide_tool{ display: none} 
}