/******** Contents Board Responsive 2015 *********/

/** > 568px **/
@media (min-width:568px){
	
	.OB_footer {padding: 28px 0 40px;}
	.OB_footer {padding-top: 28px;}
	#mainVisuall .area .txt{padding:20px 15px 60px;}

}

/** > 768px **/
@media (min-width:768px){
	
	.OB_footer {margin-top:0; padding: 28px 0 40px;}
	
	#mainVisual {padding:0;}
	#mainVisual .grab{max-width:100%;}
	#mainVisual .area .txt {max-width:768px;}
	#mainVisual .area .txt a {width:auto; text-align:left;}
	
	.research, .weatherinfo, .public ul li a, .dateinfo	{padding-left:30px; padding-right:30px;}
	.research, .weatherinfo, .public, .dateinfo	{margin-top:0;}
	.research {float:left; width:60%; height: 235px;}
	.research ul {width:420px;}
	.research ul li.result {display:block;}
	.research ul li {background: url("/resources/images/OB/main/bg_black_25.png"); width:95px; height:95px; border-radius:100px; text-align:center; float:left; margin-left:13px;}
	.weatherinfo {float:left; width:40%; height: 235px;}
	.public {float:left; width:60%;}
	.public ul {height: 475px; background: #fff;}
	.public ul li a {padding-bottom:23px;}
	.dateinfo {float:left; width:40%; height: 475px;}

}

/** > 1000px **/
@media (min-width:1000px){
	
	#mainVisual .grab {padding:0 15px; height:370px; max-width:1270px;}
	#mainVisual .area {position:relative; float:left; width:500px;}
	#mainVisual .area .areabg{position:relative; bottom:auto; background:none; top: 90px; margin-left: 0;}
	#mainVisual .area .txt strong {font-size:42px;}
	#mainVisual .area .txt{padding:0; margin:50px 0 0; max-width:540px;}
	#mainVisual .area .txt p.kor {font-size:24px;}
	#mainVisual .area .txt p.en {font-size:16px; margin-top: 20px;}
	#mainVisual .area .txt a{margin-top:35px;}
	#mainVisual .area .control_area{bottom:25px;}
	#mainVisual .area .control_area .control{max-width:1300px; text-align:left;}
	#mainVisual .area .control_area .control a{width:13px; height:13px;}
	#mainVisual #visual #area_0, #mainVisual #visual #area_1, #mainVisual #visual #area_2, #mainVisual #visual #area_3 {height:100%; background-size: auto;}
	
	.BOAO_main, #mainVisual .area {height:715px;}
	.contents {width:630px; position:absolute; right:15px;}
	
	.research, .weatherinfo, .public ul li a, .dateinfo	{padding-left:20px; padding-right:20px;}
	.research {float:left; width:65%; height: 230px;}
	.research ul {margin-top: 10px; width:auto; margin-top:10px;}
	.weatherinfo {float:left; width:35%; padding: 25px 15px 49px; height: 230px;}
	.weatherinfo > img {width:110px;}
	.public {float:left; width:65%;}
	.public ul li.event a, .public ul li.visitor a, .public ul li.view a, .public ul li.news a, .public ul li.direction a
	{background-size:46px;}
	.public ul li a {padding: 20px 25px 27px;}
	.dateinfo {float:left; width:35%; height: 485px;}
	.research ul li {margin-left: 4px; width: 89px; height:89px;}

}	

/** > 1200px **/
@media (min-width:1200px){
	
	.BOAO_main, #mainVisual .area {height:730px;}
	.BOAO_main .contents {width:700px; right:0;}
	
	.research, .weatherinfo, .public ul li a, .dateinfo	{padding-left:25px; padding-right:25px;}
	.research {width:65%; height: 240px;}
	.research ul {margin-top: 17px;}
	.weatherinfo {width:35%; padding-bottom:65px; height: 240px;}
	.weatherinfo > img {width:auto;}
	.public {width:65%;}
	.public ul {height: 490px; background: #fff;}
	.public ul li.event a, .public ul li.visitor a, .public ul li.view a, .public ul li.news a, .public ul li.direction a
	{background-size:auto;}
	.dateinfo {width:35%; height: 490px;}
	.research ul li {margin-left: 8px; width: 95px; height:95px;}
	
	#mainVisual .area {position:relative; float:left; width:550px;}
	#mainVisual .area .areabg {margin-left:0;}
	#mainVisual .area .txt {margin-left:0;}
	#mainVisual .area .txt strong {font-size:55px;}
	#mainVisual .area .txt p.kor {font-size:34px;}
	#mainVisual .area .txt p.en {font-size:20px; margin-top: 25px;}

}