@charset "utf-8";

/* main_visual **************************************************************************************************/
.main_visual{ position:relative; text-align:center; overflow: hidden; z-index: 1; margin-bottom: 40px;}
.main_visual *{ box-sizing: border-box;}

.main_visual:before{position: absolute; content: ''; display: inline-block;top: 0;z-index: 99; width: calc(10% - 20px);height: 500px;background-color: #ffffc9;left: 0; border-radius: 0 30px 30px 0;}
.main_visual:after {position: absolute; content: ''; display: inline-block;top: 0;z-index: 99; width: calc(10% - 20px);height: 500px;background-color: #ffffc9;right: 0; border-radius: 30px 0 0 30px;}

.main_visual .slideWrap{position:relative; margin: 0 10%;}
.main_visual .slideWrap .slick-list{ overflow:visible; overflow: hidden;border: 1px solid #ddd;border-radius: 30px; }
.main_visual .slideWrap .slide .mv_guide{width:100%; height:500px; background-position: center; background-repeat: no-repeat; background-color: #fff;   position: relative;z-index: 99; }
.main_visual .slideWrap .slide .mv_img01{ background-image:url("../images/main/main_visual01.png");}
.main_visual .slideWrap .slide .mv_img02{ background-image:url("../images/main/main_visual02.png");}
.main_visual .slideWrap .slide .mv_img03{ background-image:url("../images/main/main_visual03.png");}

.main_visual .slideWrap .slide .main_txt{position:absolute;top:110px; left: 10%; text-align: left;font-size: 40px; letter-spacing: -0.08em;}
.main_visual .slideWrap .slide .main_txt strong{font-size: 46px; font-weight: 800;}




/* 이전&다음 아이콘 설정 */
.main_visual .slick-arrow{ position:absolute; top:50%;transform:translateY(-50%); display:block; width:90px; height:90px;background-color:#fff; background-position:center; background-repeat:no-repeat; font:0/0 a;z-index: 999; border-radius: 50%; border: 1px solid #ddd;}
.main_visual .slick-arrow.slick-prev{left:-35px;background-image:url(../images/main/visual_btn_prev.png);}
.main_visual .slick-arrow.slick-next{ right:-35px;background-image:url(../images/main/visual_btn_next.png);}


/* 돌아가는 이미지갯수 표시 아이콘 설정*/
.main_visual .slideWrap .slide .slick-slide{overflow:hidden; position:relative;}
.main_visual .slideWrap .slick-navi{ position:absolute; z-index:56; bottom:190px;left:11%;text-align: center;}
.main_visual .slideWrap .slick-dots{ display:inline-block; vertical-align:top;}
.main_visual .slideWrap .slick-dots li{ display:inline-block;margin:0 3px; overflow:hidden; font:0/0 a; vertical-align:top; border-radius:10px; box-shadow: 0 0 2px rgba(0,0,0,0.3); border:none;}
.main_visual .slideWrap .slick-dots li button[type="button"]{ width:15px; height:15px;  border:none; font:0/0 a;}
.main_visual .slideWrap .slick-dots .slick-active button[type="button"]{width:70px; height:15px; background:#ffcc4d;}

/* 시작&멈춤 아이콘 설정*/
.main_visual .slideWrap .slick-play{display:inline-block; width:15px; height:15px; border-radius: 0; margin:0 3px; border:none; background:transparent url('../images/main/visual_nav_stop.png') center no-repeat; font:0/0 a;  vertical-align:top;}
.main_visual .slideWrap .slick-play.pause{background:url('../images/main/visual_nav_play01.png') center  no-repeat;}





@media all and (max-width:1520px) {
.main_visual:before{display: none;}
.main_visual:after {display: none;}
 .main_visual .slideWrap{margin: 0 3%; overflow: hidden;}

.main_visual .slick-arrow{background-color:rgb(0,0,0,0.1);border: none;} 
.main_visual .slick-arrow.slick-prev{left:20px;}
.main_visual .slick-arrow.slick-next{ right:20px;} 
}



@media all and (max-width:1280px) {
.main_visual .slideWrap .slide .mv_guide{height: 400px; background-size: cover;}
 
.main_visual .slideWrap .slide .main_txt{font-size: 30px;}
.main_visual .slideWrap .slide .main_txt strong{font-size: 34px;}
 
.main_visual .slick-arrow{width:70px; height:70px;background-size: 15px;}
 
.main_visual .slideWrap .slick-navi{bottom:140px;}
.main_visual .slideWrap .slick-dots li button[type="button"]{ width:12px; height:12px;}
.main_visual .slideWrap .slick-dots .slick-active button[type="button"]{width:60px; height:12px;}
 
.main_visual .slideWrap .slick-play{width:12px; height:12px;background-size: 12px;}
.main_visual .slideWrap .slick-play.pause{background-size: 12px;} 
}

@media all and (max-width:1023px) {
.main_visual .slideWrap .slide .mv_guide{height: 280px;}
.main_visual .slideWrap .slide .main_txt{font-size: 24px; top: 50px;}
.main_visual .slideWrap .slide .main_txt strong{font-size: 26px;}
.main_visual .slideWrap .slick-navi{bottom:100px;}
 
}

@media all and (max-width:767px) {
.main_visual{ margin-bottom: 30px;}
.main_visual .slideWrap .slick-list{ border-radius: 15px; }
.main_visual .slideWrap .slide .mv_guide{height: 200px;}
.main_visual .slideWrap .slide .main_txt{font-size: 15px; top: 25px;}
.main_visual .slideWrap .slide .main_txt strong{font-size: 20px;} 
 
.main_visual .slick-arrow{width:40px; height:40px;background-size: 8px;}
 
.main_visual .slideWrap .slick-navi{ bottom:60px; display: none;} 
}


/*main_container*/
#main_container{margin: 0 10%;}

@media all and (max-width:1520px){
 #main_container{margin: 0 3%;}
}
@media all and (max-width:767px){
 #main_container{margin: 0 5%;}
}

.section01{display: flex; justify-content: space-between;margin-bottom:40px;}
.section01 > div{border:1px solid #ddd;border-radius: 30px; padding: 40px;}
.section01 > div h4 {position: relative; font-size: 28px; margin-bottom: 20px;}
.section01 > div h4 .more_view {display: block; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; background: url("../images/main/icon_more.png") center no-repeat;overflow: hidden; text-indent: -500px;}
.section01 > div h4 a img{margin-top: -2px;}

.section01 > div a strong{font-size: 18px; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 25px;display: block; font-weight: 400;transition: all 0.2s;}
.section01 > div a:hover strong{text-decoration: underline;font-weight: 600;}

.section01 .notice_area{width: 38%;}
.section01 .notice_area ul{border-top: 1px solid #ddd; display: flex; flex-direction: column;}
.section01 .notice_area ul li{margin-top: 30px;overflow: hidden;text-overflow: ellipsis;}
.section01 .notice_area ul li a{display: block; background: url("../images/main/icon_arrow.png") right center no-repeat;padding-right: 50px;}
.section01 .notice_area ul li a i{font-size: 14px; color: #666;display: block; margin-bottom: 3px;}

.section01 .board_area{width: 60%; padding: 40px 25px;}
.section01 .board_area h4{ margin:0 15px; margin-bottom: 20px;}
.section01 .board_area .board_box{ padding: 0 10px;}
.section01 .board_area .board_box a {display: flex; flex-direction: column; }
.section01 .board_area .board_box a > *{width: 100%; display: block;}
.section01 .board_area .board_box a span{border-radius: 10px; overflow: hidden; height: 180px;}
.section01 .board_area .board_box a img {width: 100%; min-height: 100%; transition: all 0.2s;}
.section01 .board_area .board_box a:hover img{transform:scale(1.2, 1.2);}
.section01 .board_area .board_box a strong{text-align: center; margin-top:20px; padding: 0 3%;}


@media all and (max-width:1023px){
.section01 .notice_area{width: 30%;}
.section01 .board_area{width: 68%;}
}

@media all and (max-width:1023px){
.section01{flex-direction: column;}
.section01 > div{padding: 30px;} 
.section01 .notice_area{width: 100%; margin-bottom: 40px;}
.section01 .board_area{width: 100%;}

}

@media all and (max-width:767px){
 .section01{margin-bottom:30px;}
 .section01 > div{border-radius: 15px;} 
 .section01 > div h4 {font-size: 20px; margin-bottom: 10px;}
 
.section01 > div a strong{font-size: 16px;}
 
 .section01 .notice_area{ margin-bottom: 30px;}
 .section01 .notice_area ul li{margin-top: 20px;}
	
.section01 .board_area{padding: 30px 15px;}
 

}




.section02{margin-bottom:60px;}
.section02 ul{display: flex; justify-content: space-between;}
.section02 ul li{width: 32%;}

.section02 ul li a{display: flex; width: 100%; padding: 30px 10%;  justify-content: space-between;align-items: center; background-color: #ffed56;border-radius: 30px;}
.section02 ul li:nth-of-type(2) a{background-color: #74d196;color: #fff}
.section02 ul li:nth-of-type(3) a{background-color: #7697ec;color: #fff}
.section02 ul li a strong{font-size: 24px;display: flex; flex-direction: column;align-items: flex-start; }
.section02 ul li a strong > span{display: inline-block;font-size: 15px; color: #fff; background-color: #f59600; padding: 5px 15px;margin-top: 10px; border-radius: 15px;transition: all 0.4s;}
.section02 ul li a:hover strong >span {background-color: #fff!important; color: #000;}
.section02 ul li:nth-of-type(2) a strong > span{background-color: #14974f;}
.section02 ul li:nth-of-type(3) a strong > span{background-color: #2241c6;}

.section02 ul li a > span{width: 90px;height:90px;background-repeat: no-repeat;background-position: center; background-color: #fff;border-radius: 50%;}
.section02 ul li a:hover > span,
.section02 ul li a:focus > span{ transform: rotateY(180deg);transition:all 0.5s ease-out;}
.section02 ul li:nth-of-type(1) a > span{background-image: url("../images/main/icon01.png");}
.section02 ul li:nth-of-type(2) a > span{background-image: url("../images/main/icon02.png");}
.section02 ul li:nth-of-type(3) a > span{background-image: url("../images/main/icon03.png");}



@media all and (max-width:1023px){
	.section02 ul li a strong{font-size: 20px;}
	.section02 ul li a > span{width: 70px;height:70px; background-size: 50px;;}	
}

@media all and (max-width:767px){
	.section02{margin-bottom:30px;}
	.section02 ul{flex-direction: column;}
	.section02 ul li{width: 100%; margin-top: 10px;}
	.section02 ul li:first-of-type{margin-top: 0px;}
	.section02 ul li a{padding: 20px 10%;border-radius: 15px;}
}