﻿@charset "utf-8";

/**************************************************
	Main CSS Document
	IEETU Web Standardization Team
	2025-04-29
**************************************************/

/**************************************************
	Common
**************************************************/
#container > .inr{max-width:initial;}

/**************************************************
	Main
**************************************************/
.cont_main{line-height:1.5;}
.cont_main > div > .inr{max-width:1260px; margin:0 auto; padding:60px 0;}

.cont_main .nav,
.cont_main .nav .area_ctrl2{display:flex; align-items:center;}
.cont_main .nav button,
.cont_main .galleryzone .nav .sp_main,
.cont_main .banzone .nav .pause .sp_main,
.cont_main .banzone .nav .play .sp_main{background:none; display:block; background-image:url(../images/main/sp_slick.png); text-indent:-999999px;}

/* section01 */
.cont_main > .ms01 > .inr{display:flex; align-items:flex-start; gap:40px; padding-top:0;}

/* 팝업존 */
.cont_main .popupzone{overflow:hidden; border-radius:20px; max-width:826px; width:100%;}
.cont_main .popupzone .item img{border-radius:20px;}
.cont_main .popupzone .nav{justify-content:center; align-items:center; padding:0; position:absolute; right:-12px; bottom:-11px; width:179px; height:64px; text-align:center; border-radius:30px; background:rgba(51,58,70,0.9);}
.cont_main .popupzone .nav .count{color:#fff; letter-spacing:4px; margin:-11px 12px 0 0;}
.cont_main .popupzone .nav .count em{font-weight:700; font-size:19px;}
.cont_main .popupzone .nav button{margin-top:-10px;}
.cont_main .popupzone .nav .prev{width:11px; height:17px; background-position:0 0; margin-right:18px;}
.cont_main .popupzone .nav .next{width:11px; height:17px; background-position:-20px 0; margin-left:18px;}
.cont_main .popupzone .nav .pause{width:10px; height:15px; background-position:-40px 0;}
.cont_main .popupzone .nav .play{width:10px; height:15px; background-position:-60px 0;}

/* 바로가기 링크 */
.cont_main .area_site{width:394px; flex:0 0 auto;}
.cont_main .area_site ul{display:flex; flex-wrap:wrap; gap:20px 17px;}
.cont_main .area_site ul li{width:calc(50% - 9px);}
.cont_main .area_site ul li a{display:block; height:111px; padding:15px 10px 0 15px; background-color:#e0f7f7; border:1px solid #e0f7f7; background-repeat:no-repeat;  border-radius:20px; font-size:18px; font-weight:700; line-height:1.4;}
.cont_main .area_site ul li.n01 a{background-image:url(../images/main/ico_site01.png); background-position:right 10px bottom 19px;}
.cont_main .area_site ul li.n02 a{background-color:#d1f3fe; border-color:#d1f3fe; background-image:url(../images/main/ico_site02.png); background-position:right 13px bottom 15px;}
.cont_main .area_site ul li.n03 a{background-color:#ffe3e3; border-color:#ffe3e3; background-image:url(../images/main/ico_site03.png); background-position:right 14px bottom 13px;}
.cont_main .area_site ul li.n04 a{background-color:#fff6db; border-color:#fff6db; background-image:url(../images/main/ico_site04.png); background-position:right 10px bottom 13px;}
.cont_main .area_site ul li.n05 a{background-color:#e0eeff; border-color:#e0eeff; background-image:url(../images/main/ico_site05.png); background-position:right 12px bottom 15px;}
.cont_main .area_site ul li.n06 a{background-color:#e9e7ff; border-color:#e9e7ff; background-image:url(../images/main/ico_site06.png); background-position:right 13px bottom 15px;}
.cont_main .area_site ul li.n07 a{background-color:#fdead5; border-color:#fdead5; background-image:url(../images/main/ico_site07.png); background-position:right 22px bottom 17px;}
.cont_main .area_site ul li.n08 a{background-color:#eff8d6; border-color:#eff8d6; background-image:url(../images/main/ico_site08.png); background-position:right 16px bottom 17px;}
.cont_main .area_site ul li a:hover,
.cont_main .area_site ul li a:focus{border-color:#000 !important;}
.cont_main .area_site ul li a .m_block{display:none;}

/* section02 */
/* 프로그램 */
.cont_main > .ms02{padding:0 0 60px;}
.cont_main > .ms02 > .inr{display:flex; align-items:center; justify-content:space-between; gap:60px; padding:60px 40px 60px 25px; background-image: linear-gradient(to bottom, #fdfadd 50%, #e4f4ed, #e4f4ed); border-radius:20px;}
.cont_main .tit_nav{position:relative; text-align:center; width:340px;}
.cont_main .tit_nav .tit{margin:0 auto 30px; width:165px; height:91px; text-indent:-999999px; background:url(../images/main/program_tit.png) no-repeat;}
.cont_main .tit_nav .calendar{width:340px; height:232px; background:url(../images/main/bg_calendar.png) no-repeat; line-height:1;}
.cont_main .tit_nav .calendar .month{color:#fff; font-weight:700; padding:23px 0 30px;}
.cont_main .tit_nav .calendar .month span{font-size:19px;}
.cont_main .tit_nav .calendar .date{font-size:60px; font-weight:700; margin:0 0 12px;}
.cont_main .tit_nav .calendar .date > span{display:none;}
.cont_main .tit_nav .calendar .cir{width:38px; height:38px; line-height:36px; border-radius:50%; font-size:17px; font-weight:700; margin:0 auto; background:#dfeeed;}
.cont_main .tit_nav .cal_btn{position:absolute; left:35px; top:50%; width:64px; height:64px; border-radius:50%; text-indent:-999999px; background-image:url(../images/main/ico_cal_prev.png);}
.cont_main .tit_nav .cal_btn.next{background-image:url(../images/main/ico_cal_next.png); right:35px; left:initial;}
.cont_main .tit_nav .cal_btn:hover,
.cont_main .tit_nav .cal_btn:focus{box-shadow:0 5px 5px rgba(0, 0, 0, 0.08);}
.cont_main .tit_nav .txt{font-size:14px; margin:25px 0 0;}
.cont_main .area_program{display:flex; gap:40px; width:calc(100% - 280px);}
.cont_main .box_edu{flex:1; border:1px solid #c5cedf; border-radius:20px; padding:20px; background:#fff;}
.cont_main .box_edu .edu_head{display:flex; align-items:center; justify-content:space-between; padding:0 15px; margin:0 0 15px; color:#fff; border-radius:12px; height:58px; background:#3096f6;}
.cont_main .box_edu.box_life .edu_head{background:#1993a1;}
.cont_main .box_edu .edu_head .tit{font-size:24px; font-weight:700;}
.cont_main .box_edu .edu_head .num em{font-size:19px; text-decoration:underline; font-weight:700; padding:0 3px 0 0;}
.cont_main .box_edu .edu_body{height:410px; overflow-y:auto; margin-right:-20px;}
.cont_main .box_edu .edu_body .lst > li{position:relative; padding:0 0 10px; margin:0 10px 15px 0; border-bottom:1px solid #ebebeb;}
.cont_main .box_edu .edu_body .org{display:inline-block; font-size:14px; color:#198bf5; padding:1px 8px; border:1px solid #198bf5; border-radius:4px; font-weight:700;}
.cont_main .box_edu .edu_body .edu_tit{display:block; font-weight:700; margin:8px 0 10px;}
.cont_main .box_edu .edu_body a:hover .edu_tit,
.cont_main .box_edu .edu_body a:focus .edu_tit{text-decoration:underline;}
.cont_main .box_edu .edu_body .period{padding:0 50px 0 0;}
.cont_main .box_edu .edu_body .period > li{display:flex; align-items:center; gap:10px; font-size:14px; margin:0 0 6px;}
.cont_main .box_edu .edu_body .period > li:last-child{margin:0;}
.cont_main .box_edu .edu_body .period > li .p_l{padding:0 3px; border:1px solid #222; border-radius:4px; flex:0 0 auto;}
.cont_main .box_edu .edu_body .prog{display:flex; justify-content:center; align-items:center; position:absolute; right:0; bottom:15px; font-size:14px; font-weight:700; color:#fff; width:40px; height:40px; border-radius:50%; background:#656f83;}
.cont_main .box_edu .edu_body .prog.ing{background:#fb7115;}
.cont_main .box_edu .edu_body a:hover .prog,
.cont_main .box_edu .edu_body a:focus .prog{box-shadow:0 3px 5px rgba(0, 0, 0, 0.2);}

/* section03 */
.cont_main > .ms03{background:#f8f8f8;}
.cont_main > .ms03 > .inr{display:flex; gap:40px;}
.cont_main > .ms03 .tab_box{display:none;}
.cont_main > .ms03 .tab_box.active{display:block;}
.cont_main > .ms03 .tab_lst{display:flex; gap:15px;}
.cont_main > .ms03 .tab_lst .tab_select{font-size:24px; font-weight:700; color:#656f83;}
.cont_main .tab_lst,
.cont_main .area_gallery .tit{margin:0 0 20px; line-height:1.1;}
.cont_main .tab_lst .tab_select.active,
.cont_main .area_gallery .tit{position:relative; display:inline-block; padding:0 15px 0 0; font-size:24px; font-weight:700; color:#222 !important;}
.cont_main .tab_lst .tab_select.active:after,
.cont_main .area_gallery .tit:after{content:""; display:block; position:absolute; top:0; right:0; width:8px; height:8px; border-radius:50%; background:#007ef4;}
.cont_main .btn_more{position:absolute; top:-3px; right:0; overflow:hidden; display:flex; justify-content:center; align-items:center; width:33px; height:32px; border:2px solid #222; border-radius:5px;}
.cont_main .btn_more:hover{background:#e6e6e6;}
.cont_main .btn_more span{display:block; width:17px; height:17px; text-indent:-999999px; background:url(../images/main/ico_more.png); transition:transform 0.3s ease;}
.cont_main .btn_more:hover span{transform:rotate(360deg);}

/* 게시판 */
.cont_main .area_news{position:relative; width:calc(100% - 560px);}
.cont_main .area_news .news_lst{padding:32px 25px; height:287px; background:#fff; border-radius:20px; border:1px solid #e1e5ec; box-shadow:0px 0px 20px rgba(0, 0, 0, 0.08);}
.cont_main .area_news .news_lst li{display:flex; align-items:center; position:relative; padding:0 0 0 13px; margin:0 0 15px;}
.cont_main .area_news .news_lst li:last-child{margin:0;}
.cont_main .area_news .news_lst li:before{content:""; display:block; position:absolute; left:0; top:calc(50% - 2px); width:4px; height:4px; background:#222; border-radius:50%;}
.cont_main .area_news .news_lst li .tit{display:flex; align-items:center; width:calc(100% - 100px);}
.cont_main .area_news .news_lst li .tit > a{display:inline-block; max-width:95%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all;}
.cont_main .area_news .news_lst li .tit > a:hover,
.cont_main .area_news .news_lst li .tit > a:focus{text-decoration:underline;}
.cont_main .area_news .news_lst li .ico_new{margin:0 0 0 5px;}
.cont_main .area_news .news_lst li .date{width:100px; text-align:right;}

/* 포토갤러리 */
.cont_main .area_gallery{position:relative; width:520px;}
.cont_main .area_gallery .tit:after,
.cont_main .area_gallery .tab_lst .tab_select.active:after{background:#f9a01b;}
.cont_main .galleryzone .slider{box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1); border-radius:20px;}
.cont_main .galleryzone .item > a{display:block; position:relative; border-radius:20px; overflow:hidden;}
.cont_main .galleryzone .item > a:after{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image: linear-gradient(to bottom, transparent 40%, #0d0b0b);}
.cont_main .galleryzone .img{display:block; overflow:hidden; position:relative; padding-top:55.195%; background:#f5f5f5;}
.cont_main .galleryzone .img img{position:absolute; top:0; left:0; width:100%; height:100%; transition:transform .3s;}
.cont_main .galleryzone .item > a:hover .img img,
.cont_main .galleryzone .item > a:focus .img img{transform:scale(1.1);}
.cont_main .galleryzone .gly_tit{position:absolute; bottom:25px; width:100%; padding:0 20px; text-align:center; color:#fff; z-index:30;}
.cont_main .galleryzone .item > a:hover .gly_tit,
.cont_main .galleryzone .item > a:focus .gly_tit{text-decoration:underline;}
.cont_main .galleryzone .nav{gap:6px; position:absolute; top:-49px; right:39px;}
.cont_main .galleryzone .nav button{display:flex; justify-content:center; align-items:center; width:33px; height:32px; border:2px solid #222; border-radius:5px; background:none;}
.cont_main .galleryzone .nav button:hover{background:#e6e6e6;}
.cont_main .galleryzone .nav .prev .sp_main{width:10px; height:16px; background-position:0 -40px;}
.cont_main .galleryzone .nav .next .sp_main{width:10px; height:16px; background-position:-20px -40px;}
.cont_main .galleryzone .nav .pause .sp_main{width:10px; height:16px; background-position:-40px -40px;}
.cont_main .galleryzone .nav .play .sp_main{width:10px; height:16px; background-position:-60px -40px;}
.cont_main .galleryzone .nav .count{margin:0 5px 0 0; letter-spacing:0;}
.cont_main .galleryzone .nav .count em{font-weight:700;}

/* section04 */
/* 배너존 */
.cont_main > .ms04 > .inr{padding:40px 40px 40px 110px;}
.cont_main .banzone{height:60px;}
.cont_main .banzone .item{width:220px;}
.cont_main .banzone .area_ctrl{position:absolute; left:-110px; top:50%; margin-top:-20px;}
.cont_main .banzone .nav .pause,
.cont_main .banzone .nav .play{display:flex; justify-content:center; align-items:center; width:40px; height:40px; border:2px solid #888; border-radius:5px; background:none;}
.cont_main .banzone .nav .pause:hover,
.cont_main .banzone .nav .play:hover{background:#f8f8f8;}
.cont_main .banzone .nav .pause .sp_main{width:10px; height:15px; background-position:-40px -20px;}
.cont_main .banzone .nav .play .sp_main{width:10px; height:15px; background-position:-60px -20px;}
.cont_main .banzone .nav .prev,
.cont_main .banzone .nav .next{position:absolute; top:50%; margin-top:-9px;}
.cont_main .banzone .nav .prev{width:11px; height:17px; left:-35px; background-position:0 -20px;}
.cont_main .banzone .nav .next{width:11px; height:17px; right:-40px; background-position:-20px -20px;}

/* ~ 1259px */
@media screen and (max-width:1259px){

	/**************************************************
		Common
	**************************************************/
	#container > .inr{padding:0;}

	/**************************************************
		Main
	**************************************************/
	.cont_main > div > .inr{padding-left:10px; padding-right:10px;}

	/* section02 */
	/* 프로그램 */
	.cont_main > .ms02{padding-left:10px; padding-right:10px;}
	.cont_main > .ms02 > .inr{gap:0;}
	.cont_main .area_program{gap:20px;}
	.cont_main .box_edu .edu_head .tit{font-size:20px;}

	/* section04 */
	/* 배너존 */
	.ms04{padding-left:10px; padding-right:10px;}
	.cont_main .banzone .item{width:auto; padding:0 20px;}

}

/* ~ 1023px */
@media screen and (max-width:1023px){

	/**************************************************
		Common
	**************************************************/
	#header{border-bottom:1px solid #d8d8d8;}

	/**************************************************
		Main
	**************************************************/
	.cont_main{padding:30px 0 0;}

	/* section01 */
	.cont_main > .ms01 > .inr{align-items:center; flex-direction:column;}

	/* 팝업존 */
	.cont_main .popupzone{width:100%;}

	/* 바로가기 링크 */
	.cont_main .area_site{width:100%;}
	.cont_main .area_site ul li{width:calc(33.333% - 12px);}
	.cont_main .area_site ul li.n07,
	.cont_main .area_site ul li.n08{width:calc(50% - 9px);}

	/* section02 */
	/* 프로그램 */
	.cont_main > .ms02 > .inr{flex-direction:column; padding-right:25px;}
	.cont_main .area_program{width:100%;}
	.cont_main .tit_nav .tit{width:297px; height:45px; margin:0 auto 20px; background:url(../images/main/program_tit_m.png) no-repeat; background-size:cover;}
	.cont_main .tit_nav .nav{justify-content:center;}
	.cont_main .tit_nav .calendar{display:flex; align-items:center; gap:7px; background:none; width:auto; height:auto; margin:0 0 15px;}
	.cont_main .tit_nav .calendar .month{color:#222; font-size:25px; padding:0;}
	.cont_main .tit_nav .calendar .month span{font-size:25px;}
	.cont_main .tit_nav .calendar .date{font-size:25px; margin:0;}
	.cont_main .tit_nav .calendar .date > span{display:inline;}
	.cont_main .tit_nav .calendar .cir{font-size:27px; width:55px; height:55px; line-height:53px; margin-left:5px;}
	.cont_main .tit_nav .txt{display:none;}
	.cont_main .tit_nav .cal_btn{left:-20px; bottom:17px; top:initial; width:50px; height:50px; background-size:50px;}
	.cont_main .tit_nav .cal_btn.next{right:-20px;}
	.cont_main .box_edu .edu_body{margin-right:0;}

	/* section03 */
	.cont_main > .ms03 > .inr{flex-direction:column;}

	/* 게시판 */
	.cont_main .area_news{width:100%;}

	/* 포토갤러리 */
	.cont_main .area_gallery{width:100%;}

}

/* ~ 767px */
@media screen and (max-width:767px){

	/**************************************************
		Common
	**************************************************/

	/**************************************************
		Main
	**************************************************/
	.cont_main .nav button,
	.cont_main .galleryzone .nav .sp_main,
	.cont_main .banzone .nav .pause .sp_main,
	.cont_main .banzone .nav .play .sp_main{background-image:url(../images/main/sp_slick_x2.png); background-size:200px;}

	.cont_main > div > .inr{padding:35px 10px;}

	/* 팝업존 */
	.cont_main .popupzone .nav{width:160px; height:55px;}
	.cont_main .popupzone .nav .prev{margin-right:13px;}
	.cont_main .popupzone .nav .next{margin-left:13px;}
	.cont_main .popupzone .nav .count{margin:-8px 8px 0 0;}

	/* 바로가기 링크 */
	.cont_main > .ms01 > .inr{gap:35px;}
	.cont_main .area_site{min-width:initial;}
	.cont_main .area_site ul{gap:12px;}
	.cont_main .area_site ul li{width:calc(33.333% - 8px);}
	.cont_main .area_site ul li.n07,
	.cont_main .area_site ul li.n08{width:calc(50% - 6px);}
	.cont_main .area_site ul li a{height:100px; padding:15px 10px 10px 15px; background-position:right 10px bottom 10px !important;}
	.cont_main .area_site ul li.n01 a{background-image:url(../images/main/ico_site01_x2.png); background-size:auto 28px;}
	.cont_main .area_site ul li.n02 a{background-image:url(../images/main/ico_site02_x2.png); background-size:auto 40px;}
	.cont_main .area_site ul li.n03 a{background-image:url(../images/main/ico_site03_x2.png); background-size:auto 35px;}
	.cont_main .area_site ul li.n04 a{background-image:url(../images/main/ico_site04_x2.png); background-size:auto 40px;}
	.cont_main .area_site ul li.n05 a{background-image:url(../images/main/ico_site05_x2.png); background-size:auto 40px;}
	.cont_main .area_site ul li.n06 a{background-image:url(../images/main/ico_site06_x2.png); background-size:auto 48px;}
	.cont_main .area_site ul li.n07 a{background-image:url(../images/main/ico_site07_x2.png); background-size:auto 40px;}
	.cont_main .area_site ul li.n08 a{background-image:url(../images/main/ico_site08_x2.png); background-size:auto 40px;}
	.cont_main .area_site ul li a .m_block{display:block;}

	/* section02 */
	/* 프로그램 */
	.cont_main > .ms02{padding:0 10px 35px 10px;}
	.cont_main > .ms02 > .inr{padding:30px 15px;}
	.cont_main .area_program{flex-direction:column;}
	.cont_main .tit_nav .tit{width:251px; height:38px;}
	.cont_main .tit_nav .calendar .month,
	.cont_main .tit_nav .calendar .month span,
	.cont_main .tit_nav .calendar .date{font-size:21px;}
	.cont_main .tit_nav .calendar .cir{width:45px; height:45px; line-height:43px; font-size:22px;}
	.cont_main .tit_nav .cal_btn{width:40px; height:40px; background-size:40px; left:20px; bottom:17px;}
	.cont_main .tit_nav .cal_btn.next{right:20px;}
	.cont_main .box_edu{padding:15px;}

	/* section03 */
	.cont_main > .ms03 .tab_lst{gap:10px;}
	.cont_main > .ms03 .tab_lst .tab_select{font-size:20px;}
	.cont_main .tab_lst .tab_select.active, 
	.cont_main .area_gallery .tit{font-size:20px;}
	.cont_main .btn_more{top:-6px;}

	/* 게시판 */
	.cont_main .area_news .news_lst{height:auto; padding:20px;}
	
	/* 포토갤러리 */
	.cont_main .galleryzone .nav{position:initial; justify-content:center; margin:15px 0 0;}

	/* section04 */
	/* 배너존 */
	.cont_main > .ms04 > .inr{padding:20px 30px 20px 80px;}
	.cont_main .banzone .item{padding:0 10px;}
	.cont_main .banzone .area_ctrl{left:-80px;}
	.cont_main .banzone .nav .pause, 
	.cont_main .banzone .nav .play{border-color:#222;}
	.cont_main .banzone .nav .pause .sp_main{background-position:-40px -40px;}
	.cont_main .banzone .nav .play .sp_main{background-position:-60px -40px;}
	.cont_main .banzone .nav .prev{background-position:0 -40px; left:-23px;}
	.cont_main .banzone .nav .next{background-position:-20px -40px; right:-30px;}

}

/* ~ 639px */
@media screen and (max-width:639px){

}

/* ~ 430px */
@media screen and (max-width:430px){

	/**************************************************
		Main
	**************************************************/
	/* 바로가기 링크 */
	.cont_main .area_site ul li a{font-size:16px; padding:12px 5px 10px 10px;}

}