@charset "utf-8";
/* CSS Document */

article {overflow:hidden; background:none;}
	#article_index {width: 630px;  margin-right:10px; display:inline-block; float:left;}
	article aside {width:298px;  display:inline-block; *float: left;}
	
	
	
	#Banner, #survey, #participate, #notice, #introduce, #directions,#cocomp {border:1px solid #dedfe0; box-sizing:border-box; box-shadow:1px 1px 4px #656d7d; color:#444;}
	
	/* Banner */
	#Banner{position:relative; margin:0; width:620px; height:400px; overflow:hidden; margin-bottom:20px;} 
	#Banner ul li dl, #Banner ul li dd{ width:620px; height:400px; overflow:hidden; }
	#Banner ul li dl dt a{position:absolute; z-index:1;display:block; width:16px; height:16px; overflow:hidden;background:#444; text-indent:-10em; border-radius:8px}
	.btn1 a{left:540px; top:365px;}
	.btn2 a{left:560px; top:365px;}
	.btn3 a{left:580px; top:365px;}
	#Banner ul li dl dt a.iconOn{background:#fff; border:1px solid #444; box-sizing:border-box; border-radius:8px;}
	
	/* contents  survey,participate */
	#contents {width:620px;  overflow:hidden; padding-bottom:10px;}
		#contents #survey {width:300px; height:400px; background:url("../img/index/servey.jpg"); display:inline-block; float:left;}
			#contents #survey p {padding:20px 0 10px 20px; font-size:30px; font-weight:600; }
			#contents #survey a {border:1px solid #666; display:inline-block; margin-left:20px; padding:8px 15px; font-weight:600; color:#666; *float: left; }
		#contents #participate {width:300px; height:400px; background:url("../img/index/participate.jpg"); display:inline-block; float:right;}
			#contents #participate ul {width:100%; height:100%; position:relative;}
				#contents #participate ul li {display:inline-block; width:66px; height:68px; position:absolute; *float: left;}
				#contents #participate ul li#mix {left:15px; top:15px; background:url("../img/index/participate_icon.png"); }
				#contents #participate ul li#school {left:210px; top:315px; background:url("../img/index/participate_icon2.png"); }
					#contents #participate ul li a {width:100%; height:65%; display:block;  padding-top:35%; text-align:center; font-weight:600; color:#666;}
					
	
	/* aside */
	aside #notice {height:400px; background:#fff; padding:20px; overflow-y:scroll}
		#notice #notice_title {font-size:18px; font-weight:600; border-bottom:1px solid #666; overflow:hidden; padding-bottom:5px;}
			#notice #notice_title p {display:inline-block; *float: left;}
			#notice #notice_title div {width:25px; height:25px; background:#eee; color:#bbb; text-align:center; display:inline-block; float:right;}
		
		#notice ul {padding-top:5px;}
			#notice ul li {border-bottom:1px dotted #ccc; padding:15px;}
				#notice ul li a {color:#444;}
			#notice ul li p.notice_tit {font-weight:600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
			#notice ul li p.notice_con {margin-top:5px;  padding:0 5px; font-size:12px;  overflow:hidden;
	 		text-overflow: ellipsis;	 display: -webkit-box;	 -webkit-line-clamp: 2; /* 라인수 */	 -webkit-box-orient: vertical;	 word-wrap:break-word; 
	 		line-height:1.2em;	 height:2.4em;  }
		
	#introduce a, #directions a,#cocomp a {width:100%; height:100%; display:block; font-size:18px; font-weight:600; color:#444; }
	
    aside #introduce {height:115px; background:url("../img/index/introduce.jpg"); margin:20px 0;}
		aside #introduce a{padding:40px 0 0 20px;}
	aside #cocomp {height:115px; background:url("../img/index/cocomp.jpg"); }
		aside #cocomp a{padding:40px 0 0 20px; }
	
        aside #directions {height:115px; background:url("../img/index/directions.jpg");margin:20px 0;}
		aside #directions a{padding:30px 0 0 205px;}