﻿/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url('../css/akom_common.css');

#wrap{max-width:100%;}
.con { float:left; height:250px; overflow:hidden; transition:all 0.5s; animation:scale 1s 1;}
.con { float:left; height:250px; overflow:hidden; }

#mainban{width:70%; height:500px;}
#mainban img{width:100%; height:100%;}

#es_komedi{width:30%; background:#54ad40; }
#es_komedi .komedi_wrap{width:90%; margin:25px auto 0; overflow:hidden;}
#es_komedi .komedi_wrap .tit{font-weight:bold;}
#es_komedi .komedi_wrap ul{}
#es_komedi .komedi_wrap ul li{float:left; width:25%;  }
#es_komedi .komedi_wrap .tit{ color:#fff; margin-bottom:10px;  }
#es_komedi .komedi_wrap a{ display:block; width:100%;   }
#es_komedi .komedi_wrap a .komedi_icon{ display:block; width:inherit; height:130px; border-right:1px solid #54ad40;  box-sizing: border-box;  }
#es_komedi .komedi_wrap #icon01{background:#167600 url(../img/icon11.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi .komedi_wrap #icon02{background:#167600 url(../img/icon12.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi .komedi_wrap #icon03{background:#167600 url(../img/icon13.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi .komedi_wrap #icon04{background:#167600 url(../img/icon14.png) no-repeat; background-position:50%; background-size:40%; }

#es_komedi .komedi_wrap a #icon01:hover{background:#fff url(../img/icon11_hover.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi .komedi_wrap a #icon02:hover{background:#fff url(../img/icon12_hover.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi .komedi_wrap a #icon03:hover{background:#fff url(../img/icon13_hover.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi .komedi_wrap a #icon04:hover{background:#fff url(../img/icon14_hover.png) no-repeat; background-position:50%; background-size:40%; }

#es_komedi .komedi_wrap a.komedi_icon:hover{background:#fff;}
#es_komedi .komedi_wrap .txt_info{color:#fff; text-align:center; margin-top:10px;  display:block; letter-spacing: -1px;}
 

#es_komedi_no_dp{width:30%; background:#54ad40; }
#es_komedi_no_dp .komedi_wrap{width:90%; margin:25px auto 0; overflow:hidden;}
#es_komedi_no_dp .komedi_wrap .tit{font-weight:bold;}
#es_komedi_no_dp .komedi_wrap ul{}
#es_komedi_no_dp .komedi_wrap ul li{float:left; width:25%;  }
#es_komedi_no_dp .komedi_wrap .tit{ color:#fff; margin-bottom:10px;  }
#es_komedi_no_dp .komedi_wrap a{ display:block; width:100%;   }
#es_komedi_no_dp .komedi_wrap a .komedi_icon{ display:block; width:inherit; height:130px; border-right:1px solid #54ad40;  box-sizing: border-box;  }
#es_komedi_no_dp .komedi_wrap #icon01_no_dp{background:#167600 url(../img/icon11.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi_no_dp .komedi_wrap #icon02_no_dp{background:#167600 url(../img/icon12.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi_no_dp .komedi_wrap #icon03_no_dp{background:#167600 url(../img/icon13.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi_no_dp .komedi_wrap #icon04_no_dp{background:#167600 url(../img/icon14.png) no-repeat; background-position:50%; background-size:40%; }

#es_komedi_no_dp .komedi_wrap a #icon01_no_dp:hover{background:#fff url(../img/icon11_hover.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi_no_dp .komedi_wrap a #icon02_no_dp:hover{background:#fff url(../img/icon12_hover.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi_no_dp .komedi_wrap a #icon03_no_dp:hover{background:#fff url(../img/icon13_hover.png) no-repeat; background-position:50%; background-size:40%; }
#es_komedi_no_dp .komedi_wrap a #icon04_no_dp:hover{background:#fff url(../img/icon14_hover.png) no-repeat; background-position:50%; background-size:40%; }

#es_komedi_no_dp .komedi_wrap a.komedi_icon:hover{background:#fff;}
#es_komedi_no_dp .komedi_wrap .txt_info{color:#fff; text-align:center; margin-top:10px;  display:block; letter-spacing: -1px;}


.no_dp{ display:none;}
/*
.icon_ban{width:15%; float:left; height:250px; transition:all 0.5s; animation:scale 1s 1; border-left:1px solid #dedede; border-top:1px solid #dedede; box-sizing:border-box; letter-spacing:-1px; }
*/
.icon_ban{width:30%; float:left; height:83.3px; transition:all 0.5s; animation:scale 1s 1; border-left:1px solid #dedede; border-top:1px solid #dedede; box-sizing:border-box; letter-spacing:-1px; }

.icon_ban .txt_wrap{width:100%; margin:auto; margin-top:140px;}
.icon_ban .txt_wrap span{display:block; text-align:center;}
/*
.icon_ban .txt_wrap_corona{width:100%; margin:auto; margin-top:100px; text-align:center;}
*/
.icon_ban .txt_wrap_corona{width:100%; margin:auto; margin-top:10px; text-align:center;}

.icon_ban .txt_wrap_corona_3{width:100%; margin:auto; margin-top:100px; text-align:center;}
.icon_ban .txt_wrap span.tit{ font-size:135%; color:#000; font-weight:bold; }
.icon_ban .txt_wrap_corona span.tit_corona{ font-size:200%; color:#ffffff; font-weight:600;}
.icon_ban .txt_wrap_corona_3 span.tit_corona{ font-size:200%; color:#ffffff; font-weight:600;}
.icon_ban .txt_wrap span.txt_info{margin-top:7px; font-size:110%; color:#666; }
.icon_ban#ban01{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban02{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban01_no_dp{ background:#FF0000; background-position:50% 25%; background-size:35%; height:83.3px;}
.icon_ban#ban02_no_dp{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban03_no_dp{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban03{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban04{ background:#fff url(../img/icon18.png) no-repeat; background-position:50% 25%; background-size:35%;}

.icon_ban#ban01:hover{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban02:hover{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban01_no_dp:hover{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban02_no_dp:hover{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban03_no_dp:hover{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban03:hover{ background:#FF0000; background-position:50% 25%; background-size:35%;}
.icon_ban#ban04:hover{ background:#f6f6f6 url(../img/icon18.png) no-repeat; background-position:50% 25%; background-size:35%;}


#mem_menu{width:35%;}
.mem_menu_wrap{width:100%;}
.mem_menu_wrap ul{width:inherit;height:250px; background:#223162;}
.mem_menu_wrap ul li{width:25%; float:left; }
.mem_menu_wrap ul li a{display:block; width:100%; height:235px; text-align:center;}
.mem_menu_wrap ul li a span.txt{padding-top:130px; display:block; font-size:140%; color:#fff;}
.mem_menu_wrap ul li a.mem01 span.txt{color:#000;}
.mem_menu_wrap ul li a.mem01{ background:#ffd200 url(../img/icon06.png) no-repeat; background-position: 50% 30%;}
.mem_menu_wrap ul li a.mem02{ background:#54ad40 url(../img/icon07.png) no-repeat; background-position: 50% 30%;}
.mem_menu_wrap ul li a.mem03{ background:#085d93 url(../img/icon08.png) no-repeat; background-position: 50% 30%;}
.mem_menu_wrap ul li a.mem04{ background:#1380d7 url(../img/icon09.png) no-repeat; background-position: 50% 30%;}

#event_ban{width:35%;  overflow:hidden;  position:relative;}

#faq{width:35%; background:#f6f6f6; border-top:1px solid #dedede;}

#news{width:35%; background:#fff; border-top:1px solid #dedede;}
.board_box{width:85%; margin:30px auto 0;}
.board_box h3{position:relative;}
.board_box h3.tit span{font-weight:bold;}
.board_box h3 a.btn_more{position: absolute; display: block; right:0; top:-3px; font-size:80%; background: url(../img/icon10.png)no-repeat right 10px top 50%; border:1px solid #d6d6d6; padding:2px 35px 2px 15px;}
.board_box .board_list{ margin-top:20px;}
.board_box .board_list ul li{height:35px; line-height:35px; font-size:120%; display: block; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; height:auto;}
.board_box .board_list ul li .bd_img{float:left; width:46%; height:120px;}
.board_box .board_list ul li .bd_img img{width:100%; height:100%;}
.board_box .board_list ul li .bd_txt{float:right; width:52%; }
.board_box .board_list ul li .bd_txt .con_tit{display: block; font-size:100%; font-weight:bold; line-height:20px; height:40px; overflow: hidden; color:#000;}
.board_box .board_list ul li .bd_txt .con_txt{display: block; font-size:100%; line-height:20px; height:60px; overflow: hidden; margin-top:10px;}


#rss_news{width:30%; background:#fff; border-top:1px solid #dedede;}
#ban05{width:30%; background:#fff; border-top:1px solid #dedede;}




/* 검색 */
.search_box{width:300px; height:100%; background-color:#F5F5F5;position:absolute;	top:0; left:-300px; border:1px solid #d7d7d7; padding:150px 40px;	z-index:5;	box-sizing:border-box;}
.search_box .input_box{	margin-top:20px; ;}
.search_box .input_box span{display:block; float:left; margin:0; padding:0; }
.search_box .input_box .btn_search{ background:#525252 url(../img/icon19.png) no-repeat; background-position:50%; width:40px; height:40px; border:0;}
.search_box #search_input{width:178px;padding-left:10px;box-sizing:border-box; height:40px;border:1px solid #B7B7B7;}
.search_box .search_list_box{clear:both}
.search_box .search_h3{	padding:20px 0 0 0;	border-bottom:2px solid #000000; height:30px; }
.search_box .search_list{margin-top:20px;}
.search_box .search_list .list{list-style:none;padding:10px;	border-bottom:1px solid #BDBDBD;}


@keyframes scale {
	0% { transform:scale(0); }	
	100% { transform:scale(1); }
}

/*반응형*/
@media screen and (max-width:1279px) {  
	
/*레이아웃*/

#mainban{width:100%; }
#es_komedi{width:50%; }
#es_komedi_no_dp{width:50%; }
#mem_menu{width:50%;}
#event_ban{width:50%; }
#news{width:50%; }
#faq{width:50%;}
#rss_news{width:50%;}
.icon_ban{width:25%;}

/*의료봉사게시판*/
.icon_ban#ban05{width:50%;}

/*배열정리*/
#es_komedi{display:none;}
.icon_ban#ban01{display:none;}
.icon_ban#ban02{display:none;}
.icon_ban#ban03{display:none;}
.no_dp{display:block !important; height:250px; width:100%;}

#es_komedi02{display:block;}

 /*아이콘크기*/
.icon_ban .txt_wrap{width:80%; margin-top:150px;}
.icon_ban .txt_wrap_corona{width:100%; margin-top:10px;}
.icon_ban .txt_wrap_corona_3{width:100%; margin-top:85px;}
.icon_ban#ban01{ background-size:42%; background-position:50% 19%;}
.icon_ban#ban02{ background-size:42%; background-position:50% 19%;}
.icon_ban#ban01_no_dp{ background-size:42%; background-position:50% 19%;}
.icon_ban#ban02_no_dp{ background-size:42%; background-position:50% 19%;}
.icon_ban#ban03_no_dp{ background-size:42%; background-position:50% 19%;}
.icon_ban#ban03{ background-size:42%; background-position:50% 19%;}
.icon_ban#ban04{ background-size:42%; background-position:50% 19%;}	
}

@media screen and (min-width:1280px) and (max-width:1699px) {  


	
#mainban{width:70%; }
#es_komedi{width:30%; }
#es_komedi_no_dp{width:30%; }
#mem_menu{width:35%;}
#event_ban{width:35%; }
#news{width:35%; }
#faq{width:35%;}
#rss_news{width:30%;}
/*의료봉사게시판 메인메이지*/
.icon_ban#ban05{width:30%;}
/*.icon_ban{width:15%;}*/
.icon_ban{height:67px;}


.con{height:200px;}
#mainban{height:400px;}
#event_ban{ }
/*
.icon_ban{height:200px;}
*/

#faq{height:250px;}
#news{height:250px;}
#rss_news{height:250px;}

#mainban img{width:100%; height:100%;}



.icon_ban .txt_wrap{margin-top:115px; width:80%; letter-spacing:-1px;}
.icon_ban .txt_wrap_corona{margin-top:10px; width:100%; letter-spacing:-1px;}
.icon_ban .txt_wrap_corona_3{margin-top:60px; width:100%; letter-spacing:-1px;}
.icon_ban#ban01{background-position:50% 19%;}
.icon_ban#ban02{background-position:50% 19%;}
.icon_ban#ban01_no_dp{background-position:50% 19%;}
.icon_ban#ban02_no_dp{background-position:50% 19%;}
.icon_ban#ban03_no_dp{background-position:50% 19%;}
.icon_ban#ban03{background-position:50% 19%;}
.icon_ban#ban04{background-position:50% 19%;}


#es_komedi .komedi_wrap a .komedi_icon{height:100px;}
#es_komedi .komedi_wrap{margin-top:20px;}

#es_komedi_no_dp .komedi_wrap a .komedi_icon{height:100px;}
#es_komedi_no_dp .komedi_wrap{margin-top:20px;}

/*아이콘크기*/
.icon_ban#ban01{ background-size:42%;}
.icon_ban#ban02{ background-size:42%;}
.icon_ban#ban01_no_dp{ background-size:42%;}
.icon_ban#ban02_no_dp{ background-size:42%;}
.icon_ban#ban03_no_dp{ background-size:42%;}
.icon_ban#ban03{ background-size:42%;}
.icon_ban#ban04{ background-size:42%;}

.mem_menu_wrap ul li a{ height:190px; }
.mem_menu_wrap ul li a span.txt{padding-top:110px;}
}


@media screen and (min-width:1700px) { 
	
.icon_ban#ban01{ background-size:40%;}
.icon_ban#ban02{ background-size:40%;}
.icon_ban#ban03{ background-size:40%;}
.icon_ban#ban04{ background-size:40%;}

#mainban img{width:100%; height:100%;}

#footer .inner_wrap .foot_banner02{display:block;}
.hd_ban{display: none;}
	
}


@media screen and (min-width:1880px) { 
 #wrap{width:100%;}
#mainban img{width:100%; height:100%;}
}

/*전체메뉴추가*/
.menuall_wrap{position:absolute; background:#f6f6f6;  width:800px; left:-800px; top:0; z-index:5; height:100%;}
.menuall_wrap ul {width:80%; margin: auto; margin-top:160px; }
.menuall_wrap ul li{float:left; width:30%; margin-right:25px; }
.menuall_wrap ul li a{}
.menuall_wrap ul li.last{margin-right:0;}


.menuall_wrap ul li.site01{ height:310px;}
.menuall_wrap ul li.site01 .tit{ border-bottom:1px solid #000; height:50px; line-height:50px; font-weight: bold; padding-left:30px; margin-bottom:15px; }
.menuall_wrap ul li.site01 .sub_tit{ display:block; height:40px; line-height:40px; background:#f6f6f6; overflow: hidden; text-align: center; font-size:16px; }
.menuall_wrap ul li.site01 a{float:left; display: block; width:100%; height:30px; line-height: 30px;  }
.menuall_wrap ul li.site01 a:hover{background:#f6f6f6;}
.menuall_wrap ul li.site01 a span{ background:url(../img/common/bar.jpg) no-repeat; background-position:10px 50%; display:inline-block; width:30px; height:inherit;  vertical-align: middle;}

.menuall_wrap ul li.site02{float:left; width:100%; margin-right:25px;  margin-right:0; margin-left:15px; }
.menuall_wrap ul li.site02 a{display: block; width:27%; margin-right:5px; float:left;  height:40px; line-height: 40px;   padding-left:20px; border:1px solid #cecece;   margin-top:10px; background:#fff url('../img/icon04.png')no-repeat ; background-position: 90% 50%;}





