@charset "utf-8";

/**************************************************
	Main CSS Document
	IEETU Web Standardization Team
	2019-07-10
**************************************************/

/**************************************************
	Common
**************************************************/

.main_visual {  overflow:hidden; position:relative; margin-bottom:-6px;}
.main_visual .item { display:block !important; height:472px; background:url(../images/main/main_visual01.png) no-repeat center top; }
.main_visual .item.n2 {background-image:url(../images/main/main_visual02.png);}
.main_visual .slick-slide div div {position:relative;}
.main_visual .slick-slide div div .web {max-width:inherit; position:relative; left:50%; transform:translateX(-50%);}
.main_visual  img.mobile {display:none;}
.main_visual .nav .prev { width:30px; height:58px; background-position:0 0; position:absolute; left:50%; margin-left:-800px; top:50%; margin-top:-29px; text-indent:-9990px;}
.main_visual .nav .next { width:30px; height:58px; background-position:-30px 0; position:absolute; right:50%; margin-right:-800px; top:50%; margin-top:-29px; text-indent:-9990px;}
.main_visual .nav .box {position:absolute; left:50%; margin-left:-630px; top:330px; }
.main_visual .nav .box:after {content:''; display:block; width:100%; clear:both;}
.main_visual .nav .play , .main_visual .nav .pause { float:left; display:block; width:9px; height:11px; background-position:-60px top; text-indent:-9999px; overflow:hidden; display:none; margin-right:19px;}
.main_visual .nav .play {background-position:-67px top; }
.main_visual .nav .play.active , .main_visual .nav .pause.active {display:block;}
.main_visual .nav button {content:''; display:block; background:url(../images/main/prevnext.png) no-repeat; transition: 0.3s;}
.main_visual .nav .pager {float:left; overflow:hidden;}
.main_visual .nav .pager li {float:left; margin-right:19px;}
.main_visual .nav .pager button {display:block; width:8px; height:8px; border-radius:50%;margin-top:1px; background:#000; opacity:.5; text-indent:-999px; overflow:hidden;}
.main_visual .nav .pager .slick-active button {opacity:1;}
.main_visual .nav .count {float:left; vertical-align:top; position:relative; top:-6px;}





.m_status {height:110px; background:#0a51a6; padding-top:19px;}
.m_status .inr {max-width:1260px; margin:0 auto; text-align:center; color:#fff;}
.m_status h3 {display:inline-block; font-size:16px; font-weight:normal;}
.m_status h3:before {content:''; display:inline-block; width:26px; height:24px; background:url(../images/main/ico01.png) no-repeat; position:relative; top:3px; margin-right:6px;}
.m_status h3 span { font-weight:bold; text-decoration: underline; margin:0 2px 0 5px;}
.m_status .lst {display:inline-block; font-size:20px; font-weight:bold; margin:0 40px;}
.m_status .lst:before {content:''; display:inline-block; width:72px; height:72px; border-radius:72px; background:#fff url(../images/main/ico02.png) no-repeat; vertical-align:middle; margin-right:5px; }
.m_status .lst strong { display:inline-block; padding:4px 25px 8px; border:2px solid #3d99e3; margin-left:10px; border-radius:60px; font-size:17px; font-weight:normal; position:relative; top:3px;}
.m_status .lst strong span {font-weight:bold; color:#ffcb08; font-size:29px;}
.m_status a { width:216px; padding-left:10px; height:45px; line-height:45px; background:#fff; text-align:center; display:inline-block; font-size:18px; font-weight:bold; color:#0a57ab; border-radius:60px;}
.m_status a:after {content:''; display:inline-block; border:5px solid transparent; border-left:4px solid #0a57ab; margin-left:10px; position:relative; top:-3px; }


.mt_wrap {background:#f7f7f9; padding:55px 0;}
.mt_wrap .inr {max-width:1260px; margin:0 auto;}
.mt_wrap .inr:after {content:''; display:block; width:100%; clear:both;}
.mt_wrap ul {float:left; width:calc(50% + 30px); margin:0 -10px;}
.mt_wrap ul:after {content:''; display:block; width:100%; clear:both;}
.mt_wrap ul li {float:left; width:calc(33.3333% - 20px); margin:0 10px;}
.mt_wrap ul li a {display:block; height:168px; padding:25px 20px; border:1px solid #fff; background:#fff url(../images/main/quick01.png) no-repeat 88% 84%; border-radius:10px; box-shadow:3px 3px 12px rgba(0,0,0,0.1); transition: 0.3s;}
.mt_wrap ul li a:hover {border:1px solid #179aef; box-shadow: 6px 6px 18px rgba(0,0,0,0.2);}
.mt_wrap ul li:nth-child(2) a {background-image:url(../images/main/quick02.png);}
.mt_wrap ul li:nth-child(3) a {background-image:url(../images/main/quick03.png);}
.mt_wrap ul li a strong {display:block; font-size:19px; position:relative; background:url(../images/main/cursor.png) no-repeat right center; margin-bottom:30px;}
.mt_wrap ul li a span {color:#888; font-size:14px;}
.mt_wrap .donate_go {float:right; display:block; width:calc(50% - 54px); height:168px; border-radius:10px; background:#10929c url(../images/main/donate_go.png) no-repeat 80% bottom; padding:27px 50px; color:#fff; transition: 0.3s;}
.mt_wrap .donate_go:hover {background-color:#0072bc; }
.mt_wrap .donate_go strong {font-size:25px; display:block; margin-bottom:8px;}
.mt_wrap .donate_go .go {display:block; width:81px; height:30px; border:1px solid #fff; border-radius:50px; line-height:28px; font-size:14px; text-align:center; margin-top:20px; transition: 0.3s;}
.mt_wrap .donate_go:hover .go {background:#fff; color:#333; font-weight:bold;}




.main_con {max-width:1260px; margin:60px auto 80px;}
.m_notice {overflow:hidden; margin:0 -27px;}
.m_notice .lst_box {float:left; width:calc(33.3333% - 54px); margin:0 27px; position:relative;}
.m_notice .lst_box h3 { border-bottom:2px solid #0072bc; margin-bottom:25px;}
.m_notice .lst_box h3 strong {display:inline-block; padding:9px 20px 7px; min-width:105px; text-align:center; background:#0072bc; color:#fff; font-size:21px; border-radius:15px 15px 0 0; position:relative; letter-spacing:-2px;}
.m_notice .lst_box.n2 h3 {border-bottom-color:#53b51b;}
.m_notice .lst_box.n2 h3 strong {background:#53b51b;}
.m_notice .lst_box.n3 h3 {border-bottom-color:#ffcb08;}
.m_notice .lst_box.n3 h3 strong {background:#ffcb08; color:#333;}
.m_notice .lst_box div {padding:60px 10px;  border:1px solid #e2e2e2;}
.m_notice .lst_box li {position:relative;}
.m_notice .lst_box li a {display:block; padding:0 100px 0 20px; font-size:16px; position:relative; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; margin-bottom:15px; transition: 0.3s;}
.m_notice .lst_box li a:hover {color:#0072bc; text-decoration:underline;}
.m_notice .lst_box.n2 li a:hover {color:#338c00;}
.m_notice .lst_box.n3 li a:hover {color:#e39000;}
.m_notice .lst_box li a:before {content:''; display:block; width:4px; height:4px; background:#333; border-radius:5px; position:absolute; left:5px; top:9px;}
.m_notice .lst_box li .new{ position:absolute; left:-2px; top:2px; overflow:hidden; width:18px; height:18px;  border-radius:50%; background:#e41e31; color:transparent; white-space:nowrap;}
.m_notice .lst_box li .new:after{content:'N'; display:inline-block; position:absolute; top:0; left:0; bottom:0; right:0; font-size:11px; line-height:18px; color:#fff; text-align:center;}
.cont_main .area_news .lst li a img{vertical-align:middle;}
.m_notice .lst_box li span {position:absolute; right:0; top:0; font-size:16px; color:#777;}
.m_notice .lst_box .more_btn {position:absolute; right:0; top:15px;}
.m_notice .lst_box .more_btn:after {content:'+'; display:inline-block; margin-left:6px; font-family:'dotum'; font-size:16px; color:#555;}
.m_notice .reference {float:left; width:calc(33.3333% - 54px); margin:0 27px; border:1px solid #e2e2e2; border-radius:15px; height:213px; padding:28px 35px; background:url(../images/main/reference_bg.png) no-repeat 90% bottom;}
.m_notice .reference h3 {font-size:24px; padding-bottom:15px;}
.m_notice .reference .txt {display:block; font-size:15px; color:#888; margin-bottom:20px;}
.m_notice .reference a {display:block; width:81px; height:31px; border:1px solid #; line-height:29px; text-align:center; font-size:14px; border:1px solid #e2e2e2; border-radius:50px; position:relative; transition:0.3s;}
.m_notice .reference a:before {content:'→'; display:block; width:19px; height:19px; line-height:17px; border-radius:50px; position:absolute; right:5px; top:5px; transition: 0.3s; width:0px; overflow:hidden;}
.m_notice .reference a:hover {background:#0072bc; border:1px solid #0072bc; color:#fff; width:101px; padding-right:20px;}
.m_notice .reference a:hover:before {width:19px;color:#fff;}

.m_gallery { margin-top:30px; position:relative; }
.m_gallery h3 {font-size:24px; padding-bottom:20px;}
.m_gallery h3 span {font-weight:normal;}
.m_gallery ul { margin:0 -1.3%;}
.m_gallery ul:after {content:''; display:block; width:100%; clear:both;}
.m_gallery ul li {float:left; width:22.4%; margin:0 1.3%;}
.m_gallery ul li a {display:block; overflow:hidden; border-radius:10px; box-shadow:7px 0 15px rgba(0,0,0,0.15);}
.m_gallery ul li .img { display:block; height:223px; overflow:hidden;}
.m_gallery ul li .img img {width:100%; min-height:223px; transition: 0.3s;}
.m_gallery ul li a:hover .img img {transform: scale(1.1);}
.m_gallery ul li .txt { display:block; padding:20px 20px 8px; font-size:18px; font-weight:bold; overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}
.m_gallery ul li .date {font-size:15px; color:#777; margin-left:20px; padding-left:20px; background:url(../images/main/ico_time.png) no-repeat left 3px;}
.m_gallery ul li .dtl {display:block; margin:20px 20px 22px; padding-top:20px; border-top:1px solid #eee; overflow:hidden;}
.m_gallery ul li .dtl em {display: block; float:right; width:98px; height:32px; border-radius:50px; line-height:32px; border:1px solid #00418f; color:#00418f; text-align:center; transition: 0.3s;}
.m_gallery ul li a:hover .dtl em {background:#00418f; color:#fff; font-weight:bold;}
.m_gallery .more_btn {position:absolute; right:0px; top:4px; display:block; width:91px; height:32px; line-height:31px; text-align:center; border:1px solid #d5d5d5; border-radius:50px;}
.m_gallery .more_btn:after {content:'+'; display:inline-block; margin-left:6px; font-family:'dotum'; font-size:16px; color:#555;}

@media screen and (max-width:1459px){
	.main_visual .slick-slide div div .web {left:inherit; transform: none; width:100%;}
}
/* Tablet 1024px ~ 1199px */
@media screen and (max-width:1259px){
	/**************************************************
		Common
	**************************************************/
	/*.main_visual {height:350px;} */
	.main_visual .item { height:350px; background-size:cover;}
	.main_visual .nav .prev {left:30px; margin-left:0; transform: scale(0.75);}
	.main_visual .nav .next {right:30px; margin-right:0; transform: scale(0.75);}
	.main_visual .nav .box {left:40px; margin-left:0;  top:inherit; bottom:30px;}
	
	.mt_wrap { padding:40px 15px;}
	.mt_wrap ul {width:calc(100% - 310px);}
	.mt_wrap .donate_go {width:300px; padding:25px; background-size:190px;}
	
	.main_con { margin:40px 15px;}
	
	
	
	
	.m_gallery {margin-top:10px;}
}



/* Tablet 768px ~ 1023px */
@media screen and (max-width:1023px){
	/**************************************************
		Main
	**************************************************/
	
	/*.main_visual , .main_visual .item {height:290px;}*/
	
	.m_status {height:auto; padding-bottom:30px;}
	.m_status .lst {margin-right:0;}
	.m_status .lst:before {width:55px; height:55px; background-size:100%;}
	.m_status a {display:block; margin:30px auto 0;}
	.mt_wrap ul {width:auto; float:none; margin-bottom:20px;}
	.mt_wrap .donate_go {width:auto; float:none; height:auto; background-position:95% bottom;}
	.mt_wrap .donate_go .txt {margin-right:10px; margin-bottom:6px; display:inline-block;}
	.mt_wrap .donate_go .go {display:inline-block; margin:0;}
	
	.m_notice {margin:0;}
	.m_notice .lst_box , .m_notice .reference{float:none; width:auto; margin:0 0 30px;}
	.m_notice .lst_box li .new {transform: scale(0.8);}
	.m_notice .reference {height:154px; padding:20px;}
	.m_gallery ul li .img {height:190px;}
	.m_gallery ul li .img img {min-height:190px;}
}


/* Mobile 640px ~ 767px */
@media screen and (max-width:820px){
	/**************************************************
		Main
	**************************************************/
	.main_visual , .main_visual .item {height:auto !important;}
	.main_visual  img.web {display:none;}
	.main_visual  img.mobile {display:block; width:100%;}
	.main_visual .nav .prev {left:10px;}
	.main_visual .nav .next {right:10px;}
	.main_visual .nav .box {width:140px; height:30px; overflow:hidden; padding:10px 0 10px 20px; background:#fff; box-shadow: 0 0 1px rgba(0,0,0,0.3); border-radius:50px; left:50%; margin-left:-70px; bottom:20px; text-align:center; }

	
	.m_status {position:relative; padding-bottom:20px;}
	.m_status:before {content:''; display:block; width:100%; height:1px; background:#000; position:absolute; left:0; bottom:83px; opacity:0;}
	.m_status h3 {display:block; background:rgba(0,0,0,0.25); padding:13px 0; margin:0 20px; border-radius:6px 6px 0 0;}
	.m_status .lst {font-size:16px; margin:0; display:block; margin:0 20px; background:rgba(0,0,0,0.25); padding-bottom:20px; border-radius:0 0 6px 6px;}
	.m_status .lst strong span {font-size:18px;}
	.m_status .lst:before {width:40px; height:40px;}
	.m_status a {font-size:16px; margin-top:19px;}
	.m_status a:after {top:-1px;}
	
	.mt_wrap {padding:30px 15px;}
	.mt_wrap ul li {width:auto; float:none; margin-bottom:12px;}
	.mt_wrap ul li a {height:auto; background-position:96% center; padding:15px 18px;}
	.mt_wrap ul li a strong {margin-bottom:8px; background:none;}
	.mt_wrap ul li a br {display:none;}
	
	.mt_wrap .donate_go {padding:20px;}
	.mt_wrap .donate_go strong {font-size:20px;}
	.mt_wrap .donate_go .go {background:#10929c;}
	
	.main_con {margin:30px 15px;}
	.m_notice .lst_box h3 {margin-bottom:18px;}
	.m_notice .lst_box h3 strong {font-size:18px;}
	.m_notice .lst_box li a {font-size:15px; margin-bottom:11px;}
	.m_notice .lst_box li span {font-size:15px;}
	
	.m_gallery ul li { width:47.4%; margin-bottom:20px; }
	.m_gallery ul li .txt {font-size:16px;}
	.m_gallery ul li .dtl { margin:15px 20px; padding-top:15px;}
	.m_gallery ul li .dtl em { font-size:14px; height:28px; line-height:26px; float:none; margin:0 auto;}
}
/* Mobile 320px ~ 639px */
@media screen and (max-width:580px){
	.m_gallery ul li {width:auto; float:none;}
	.m_gallery ul li .img {height:auto;}
	.m_gallery ul li .img img {min-height:inherit;}
	.m_gallery ul li:nth-child(3) , .m_gallery ul li:nth-child(4) {display:none;}
	
	/**************************************************
		Main
	**************************************************/
	
	
	
	
	

}

@media screen and (max-width:460px){
	
	.m_notice .reference {background-size:40% auto;}
	
	
}