@charset "utf-8";

/*----------------------------------------
			   visiual style
----------------------------------------*/

#notice .notice-visiual{
	clear:both;
	margin-top:60px;
}

@media (max-width:979px){
	#notice .notice-visiual{
		margin-top:0;
	}
}

#notice .notice-visiual .span12{
	height:520px;
	background:  url(../images/banner_notice.jpg)  50% 50% no-repeat;
	background-size:cover; 
	position: relative;
}

@media (max-width:979px){
	#notice .notice-visiual .span12{
		height:400px;
	}
}

@media (max-width:767px){
	#notice .notice-visiual .span12{
		height:300px;
	}
}

@media (max-width:600px){
	#notice .notice-visiual .span12{
		height:250px;
	}
}

#notice .notice-visiual .span12 img{
	width:100%;
	height:100%;
}

#notice .notice-visiual .span12 span{
	font-size: 50px;
	position: absolute;
	left: 50%;
	top: 47%;
	font-weight: bold;
	display: inline-block;
	background-color: rgba(255,255,255,0.6);
	padding: 40px;
    transform: translateX(-55%);
	-o-transform: translateX(-55%);
	-ms-transform: translateX(-55%);
	-moz-transform: translateX(-55%);
	-webkit-transform: translateX(-55%);	
}

@media (max-width:1199px){
	#notice .notice-visiual .span12 span{
		font-size:45px;
		padding:35px;
	}
}

@media (max-width:979px){
	#notice .notice-visiual .span12 span{
		font-size:40px;
		padding:30px;
	}
}

@media (max-width:767px){
	#notice .notice-visiual .span12 span{
		font-size:35px;
		padding:25px;
	}
}

@media (max-width:600px){
	#notice .notice-visiual .span12 span{
		font-size:30px;
		padding:20px;
	}
}



/*----------------------------------------
			  common style
----------------------------------------*/
#notice .head{
	margin-bottom: 40px;	
}

#notice .bar{
	background-color: #005E75;
}

#notice .first_letter{
	color: #005E75;
}

/*----------------------------------------
			  first style
----------------------------------------*/
#notice .first{
	padding:100px 0 40px;
	width:100%;
}

@media (max-width:979px){
	#notice .first{
		padding:50px 0 40px;
	}
}

#notice .first .container ul.filter{
	margin-left:50%;
	margin-bottom:0;
	float:left;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
}

@media (max-width:767px){
	#notice .first .container ul.filter{
		width:280px;
	}
	#notice .padding20{
		padding: 0 20px;
	}
}

@media (max-width:510px){
	#notice .first .container ul.filter{
		width:480px;
	}
}

#notice .first .container ul.filter li{
	float:left;
	margin-left:10px;
	margin-right:10px;
	padding-bottom:3px;
	width:120px;
}

@media (max-width:510px){
	#notice .first .container ul.filter li{
		margin-left:5px;
		margin-right:5px;
		width:110px;
	}
}

#notice .first .container ul.filter li.selected{
	border-bottom:3px solid #ccc;
	transition:border-color .4s;
	-o-transition:border-color .4s;
	-moz-transition:border-color .4s;
	-webkit-transition:border-color .4s;
}

#notice .first .container ul.filter li.selected:hover{
	border-bottom:3px solid #48d1cc;
}

#notice .first .container ul.filter li:first-child{
	margin-left:0;
}

#notice .first .container ul.filter li:nth-child(4){
	margin-right:0;
}

#notice .first .container ul.filter li label{
	font-size:20px;
	color:#000;
	display:block;
	text-align:center;
}

@media (max-width:767px){
	#notice .first .container ul.filter li label{
		font-size:17px;
	}
}

@media (max-width:510px){
	#notice .first .container ul.filter li label{
		font-size:15px;
	}
}

#notice .first .container ul.filter li label input{
	display:none;
}

/*----------------------------------------
			  second style
----------------------------------------*/
#notice .second{
	margin-bottom:100px;
}

@media (max-width:979px){
	#notice .second{
		margin-bottom:50px;
	}
}

#notice .second .container>div .col1{
	width:10%;
}

#notice .second .container>div .col2{
	width:15%;
}

#notice .second .container>div .col3{
	width:55%;
}

#notice .second .container>div .col4{
	width:20%;
}

#notice .second .container>div{
	width:100%;
	height:50px;
	/*border-bottom:1px dashed #ccc;*/
	background:#fff;
}

@media (max-width:767px){
	#notice .second .container>div{
		height:40px;
	}
}

#notice .second .container>div>div{
	font-size:18px;
	color:#000;
	text-align:center;
	line-height:50px;
	float:left;
}

@media (max-width:767px){
	#notice .second .container>div>div{
		font-size:13px !important;
		line-height:40px;
	}
}

@media (max-width:510px){
	#notice .second .container>div>div{
		font-size:12px !important;
		letter-spacing:-1px;
	}
}

#notice .second .container .row2 div{
	font-family:"Noto Sans KR";
	font-size:16px;
	font-weight:300;
	color:#000;
}

#notice .second .container .row2 .col3{
	text-align:left;
	cursor:pointer;
}

#notice .second .container .row2 .col3:hover{
	color:#777;
}

#notice .second .container .row2 .context{
	width:100%;
	padding-left:25%;
	padding-right:15%;
	text-align:left;
	box-sizing:border-box;
	border-bottom:1px solid #000;
	background:#f6f5f5;
}

#notice .second .container .row2 .context p{
	line-height:1.8;
	margin-top:10px;
	font-family:"Noto Sans KR";
	font-size:16px;
	font-weight:300;
	color:#626161 !important;
}

@media (max-width:767px){
	#notice .second .container .row2 .context p{
		font-size:14px !important;
	}
}

@media (max-width:510px){
	#notice .second .container .row2 .context p{
		font-size:12px !important;
	}
}

#notice .second .container .row2 .context p img{
	margin-top:-5px;
}

@media (max-width:767px){
	#notice .second .container .row2 .context p img{
		margin-top:-3px;
	}
}

#notice .second .container .top{
	background:#e9e9e9;
	border-bottom:1px solid #e9e9e9; 
}

#notice .second .container .top div{
	font-size:18px;
}

@media (max-width:767px){
	#notice .second .container .top div{
		font-size:16px !important;
	}
}

@media (max-width:510px){
	#notice .second .container .top div{
		font-size:14px !important;
	}
}