@charset "utf-8";

@import url('common.css');
@import url('layout2.css');

.banner_ui{position:relative;/*height:570px;*/ width: 100%; max-width: 1920px; margin: 0 auto; overflow:hidden;}
.banner_ui .swiper-container{padding: 30px 0 22px;}
.banner_ui .swiper-slide{cursor: pointer; width: 890px !important; height: 440px; background-size: cover !important; box-shadow: 1px 1px 10px rgb(0 0 0 / 20%); border-radius: 20px;}
.banner_ui .swiper-slide a{display: block; width: 100%; height: 100%; background-size: contain !important;  border-radius: 20px; box-shadow: -1px -1px 10px rgb(0 0 0 / 20%);}
.banner_ui .swiper-slide a img{width: 100%; height: auto; display: none;}
.banner_ui .swiper-container-horizontal>.swiper-pagination-bullets, .banner_ui .swiper-pagination-custom, .banner_ui .swiper-pagination-fraction{bottom: 0;}

.swiper-pagination {
  position: relative;
  margin-top: 20px;           /* 배너와 간격 확보 */
  height: 40px !important;    /* 위로 안밀리게 고정 높이 */
  z-index: 10;
}

.swiper-pagination-bullet {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 20px;
  font-size: 14px;
  border: 1px solid #757777;
  box-sizing: border-box;
  border-radius: 4px;
  background: transparent;
  color: #000 !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background: #332c71 !important;
  color: #fff !important;
  border-color: #332c71 !important;
  /*text-decoration: underline !important;*/
  font-weight: bold;
  /*text-decoration: underline;
  transform: scale(1.2);
  border: 2px solid #000;*/
}

.swiper-pagination-bullet-active::after {
  content: "○";
  position: absolute;
  bottom: 3px;  /* bullet 아래에 고정 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #ffffff;
  line-height: 1;
  pointer-events: none;
}

/*
.banner_ui .swiper-pagination-bullet{width: 62px; height: 6px; background: #d0d0d9; margin: 0 1px; border-radius: 0; vertical-align: bottom; position: relative; border: 1px solid #151343}
.banner_ui .swiper-pagination-bullet-active{background: #151343;}
.banner_ui .swiper-pagination-bullet-active::after{content: ""; position: absolute; width: 100%; bottom: -4px; left: 0; height: 2px; background: #151343;}
*/

.banner_ui .naviWrap{max-width: 890px; width: 100%; height: 62px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
.banner_ui .swiper-button-next{width: 62px; height: 62px; border-radius: 100%; border: 1px solid #fff; background: url(../images/main/swiper_next.png) no-repeat 50% 50%; right: -92px;}
.banner_ui .swiper-button-prev{width: 62px; height: 62px; border-radius: 100%; border: 1px solid #fff; background: url(../images/main/swiper_prev.png) no-repeat 50% 50%; left: -92px;}

.visualSlider{position:relative;font-size:0}
.visualSlider div{height:570px;}
.visualSlider div p{font-size:0;}
.visualSlider div img{display:none;}
.visualSlider div a{display:block;height:100%;outline:none;}
.visualSlider .slick-dots{position:absolute;width:100%;bottom:55px;text-align:center}
.visualSlider .slick-dots li{display:inline-block;}
.visualSlider .slick-dots li~li{margin-left:15px}
.visualSlider .slick-dots li button{width:12px;height:12px;border:2px solid #00ae8d;border-radius:100%;font-size:0;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.visualSlider .slick-dots li.slick-active button{background:#00ae8d}

.btn_m_edu{display:none}

.cola{max-width:1240px;margin:0 auto;padding:40px 0 54px;}
.cola ul{text-align:center;font-size:0}
.cola li{display:inline-block;width:25%;vertical-align:top;}
.cola li a{position:relative;display:block;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.cola li strong{display:block;margin-bottom:12px;color:#000;font-weight:900;font-size:24px;}
.cola li p{min-height:75px;line-height:22px;font-size:16px;}
.cola li a:before{content:"";display:block;width:60px;height:60px;margin:0 auto 20px;transform:translateZ(0);box-shadow:0 0 1px transparent}
.cola li a:after{content:"";display:block;width:27px;height:27px;margin:20px auto 0;border-radius:100%;background:url(../images/main/ico_arrow.png) no-repeat 50% 50% #bcbbd0;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.cola li.l1 a:before{background:url(../images/main/ico_1.png) no-repeat 50% 50%;}
.cola li.l2 a:before{background:url(../images/main/ico_2.png) no-repeat 50% 50%;}
.cola li.l3 a:before{background:url(../images/main/ico_3.png) no-repeat 50% 50%;}
.cola li.l4 a:before{background:url(../images/main/ico_4.png) no-repeat 50% 50%;}
.cola li a:hover{color:#332c71}
.cola li a:hover:before{animation-name:wobble-horizontalY;animation-duration:1s;animation-timing-function:ease-in-out;animation-iteration-count:1}
.cola li a:hover:after{background-color:#332c71}
@keyframes wobble-horizontalY {16.65%{transform:translateY(-8px)}33.3%{transform:translateY(3px)}49.95%{transform:translateY(-4px)}66.6%{transform:translateY(2px)}83.25%{transform:translateY(-1px)}100%{transform:translateY(0)}}

.colb{height:554px;padding:135px 0 0;box-sizing:border-box;background:url(../images/main/bg_colb.jpg) no-repeat 50% 50%;}
.colb .box{max-width:1240px;margin:0 auto;}
.colb .box:after{content:"";display:block;clear:both;height:0;}
.colb .notice_ui{position:relative;float:left;width:600px;height:295px;padding:40px 40px 0 40px;background:#fff;box-sizing:border-box;box-shadow:10px 10px 0 rgba(00, 00, 00, .2)}
.colb .notice_ui .more{position:absolute;top:40px;right:40px;width:20px;height:20px;font-size:0;background:url(../images/main/btn_more.png) no-repeat 50% 50%;}
.colb .slick-dots{position:absolute;top:-38px;right:30px}
.colb .slick-dots li{display:inline-block;}
.colb .slick-dots li~li{margin-left:7px}
.colb .slick-dots li button{width:9px;height:9px;border:1px solid #9ca1a5;border-radius:100%;font-size:0;box-sizing:border-box;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.colb .slick-dots li.slick-active button{border:0;background:#332c71}
.colb .notice_ui h2{font-size:23px;color:#000;font-weight:900;}
.colb .notice_ui .item{padding-top:20px;}
.colb .notice_ui a{display:block;}
.colb .notice_ui .tit{font-size:21px;color:#000;font-weight:900;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.colb .notice_ui .date{margin-top:15px;font-size:14px;color:#939393}
.colb .notice_ui .memo{height:72px;margin-top:15px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; word-wrap:break-word;}
.colb .board a{display:block;width:100%;height:100%;padding:40px 0 0 25px;box-sizing:border-box;}
.colb .board{position:relative;float:left;width:295px;height:295px;box-sizing:border-box;box-shadow:10px 10px 0 rgba(00, 00, 00, .2)}
.colb .board h2{z-index:1;position:relative;font-size:23px;color:#000;font-weight:900}
.colb .board p{z-index:1;position:relative;margin-top:20px;line-height:20px;font-size:15px;color:#666;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.colb .board a:before{z-index:1;content:"";position:absolute;left:0;bottom:0;width:54px;height:54px;background:url(../images/main/ico_plus.png) no-repeat 50% 50% #b3b3b3;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.colb .board a:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(00, 00, 00, 0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.colb .board a:hover p{color:rgba(255, 255, 255, 1);}
.colb .board a:hover h2{color:rgba(255, 255, 255, 1);}
.colb .board a:hover:after{background:rgba(00, 00, 00, .7)}
.colb .board a:hover:before{background-color:#332c71}
.colb .bd1{margin-left:25px;background:url(../images/main/bg_bd1.png) no-repeat 50% 50%}
.colb .bd2{float:right;background:url(../images/main/bg_bd2.png) no-repeat 50% 50%}

.colc{padding:30px 0;background:#fafafa}
.colc .siteSlider{max-width:1240px;margin:0 auto;}
.colc .siteSlider .item{height:55px;/*margin-right:70px;*/text-align:center; padding: 0 35px; box-sizing: border-box;}
.colc .siteSlider .item a{display:block;line-height:55px;}
.colc .siteSlider .item img{display:inline-block ! important; max-width: 100%;}

.autoplay-btn {
  display: inline-block;
  background: url('../images/slides_stop.png') no-repeat center center;
  cursor: pointer;
  width:30px;height:30px;position: absolute;left: 5%;top: 90%;z-index: 30;text-align: center;line-height: 40px;background-color: rgba(0, 0, 0, 0.3);border-radius: 40px;text-indent: -9999em; /* 필요시 outline 등 스타일 추가 */
}
.autoplay-btn.play {
  background-image: url('../images/slides_start.png');
}
.blind {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1240px) {
	/*.main{min-width:1024px;}*/
	/*.banner_ui{height:520px;}*/
	.banner_ui .swiper-slide{width: 790px !important; height: 391px;}
	.banner_ui .naviWrap{max-width: 790px;}
	.banner_ui .swiper-button-next{right: 0;}
	.banner_ui .swiper-button-prev{left: 0;}

	.visualSlider div{height:520px;background-size:cover ! important}
	.colb{height:auto;padding:30px;background-size:cover ! important}
	.colb .notice_ui{width:50%;}
	.colb .board{width:24%;float:left;margin-left:1%}

	.colc{padding: 30px 20px;}
	.colc .siteSlider .item{ padding: 0 15px;}
}

@media (max-width: 900px) {
	.main{min-width:auto;}
	.banner_ui{height:auto}
	.banner_ui .swiper-container{padding: 0 0 12px;}
	.banner_ui .swiper-slide{background: none !important; width: 100% !important; height: auto; border-radius: 0;}
	.banner_ui .swiper-slide a{background:0 !important;}
	.banner_ui .swiper-slide a img{display: block; width: 100%;}
	.banner_ui .naviWrap{display: none;}
	.banner_ui .swiper-pagination-bullet{width: 31px; height: 18px;}
	.banner_ui .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 1px;}

	.visualSlider div{height:auto}
	.visualSlider div p{display:none}
	.visualSlider div img{display:block;width:100%;}
	.visualSlider .slick-dots{bottom:25px}
	.visualSlider .slick-dots li button{border:2px solid #fff;background:#fff}
	.visualSlider .slick-dots li.slick-active button{border:2px solid #00ae8d;}

	.cola{padding:30px 0 0}
	.cola li{width:50%;margin-bottom:30px}
	.cola li strong{font-size:19px;}
	.cola li p{min-height:55px;line-height:19px;font-size:13px;}
	.cola li a:before{width:30px;height:30px;margin-bottom:10px;background-size:contain ! important}
	.cola li a:after{width:20px;height:20px;margin-top:10px;background-size:9px auto ! important; content: none;}

	.btn_m_edu{display:block;height:45px;line-height:45px;text-align:center;background:#00ae8d}
	.btn_m_edu a{display:inline-block;font-size:16px;color:#fff;font-weight:600}
	.btn_m_edu a:before{content:"";position:relative;top:-3px;display:inline-block;width:18px;height:18px;vertical-align:middle;margin-right:5px;background:url(../images/main/mo/ico_edu.png) no-repeat 50% 50%;background-size:contain}

	.colb{padding:20px 0 0 0;background-size:auto 55% ! important;background-position:50% 0 ! important;}
	.colb .notice_ui{float:none;width:auto;height:auto;padding:20px;margin:0 20px 50px}
	.colb .notice_ui h2{font-size:19px;}
	.colb .notice_ui .tit{font-size:16px}
	.colb .notice_ui .more{top:20px;right:20px;}
	.colb .notice_ui .memo{height:60px}
	.colb .slick-dots{width:100%;top:auto;right:auto;bottom:-50px;text-align:center}
	.colb .slick-dots li button{border:2px solid #fff;background:#fff}
	.colb .slick-dots li.slick-active button{border:2px solid #00ae8d;}
	.colb .board{float:none;width:100%;height:auto;margin:0;}
	.colb .board h2{font-size:19px}
	.colb .board p{line-height:19px;font-size:13px;}
	.colb .board a{padding:20px;}
	.colb .board a:before{display:none}
	.colb .bd1{background:url(../images/main/mo/bg_bd1.png) no-repeat right 0 #707789;background-size:auto 160px}
	.colb .bd2{background:url(../images/main/mo/bg_bd2.png) no-repeat right 0 #f98d60;background-size:auto 160px}

	.colc{display:none}
}

@media (max-width: 330px) {
	 .cola li p{font-size:12px;}
}