/******** Contents Board Responsive 2024 *********/

@media (max-width : 1450px){
	#mainVisual{width:100%; padding:80px 50px;}
    #wrap .footer .grab {padding: 0 50px;}
    #mainVisual .area .areabg{padding:40px 0;}
	#mainVisual .area .txt{padding: 0}
	.BOAO_main .contents{top: 20px; width: auto;}
	.research{position: initial; left:auto; bottom:auto; max-width:600px; padding: 30px 0 80px 0;}
	.weatherinfo {position: relative; left:auto; bottom:auto;  width: 100%; height: auto; padding: 30px;}
	.weatherinfo img{width: 100px;}
	.weatherinfo:before{ right:0; left:auto; background:url(/soao/resources/images/main/weatherinfo_img_02.png) center right no-repeat;    background-size: 200px;}
}

@media (max-width : 1320px){
	#mainVisual .area .tit{font-size:45px; line-height:1.3}
	.weatherinfo:before{background-size: 180px;}
}

@media (max-width : 1200px){
    #mainVisual .area .areabg{padding:30px 0;}
	#mainVisual .area .tit{font-size: 40px;}
	.weatherinfo:before{display:none;}
	.research{padding: 30px 0 60px 0; width:100%;}
}



@media (max-width : 1000px){
	#mainVisual #visual #area_0{background-size: cover}
	#mainVisual .grab{flex-direction: column;}
	#mainVisual .area{width: 100%; max-width:100%;} 
    #mainVisual .area .areabg{padding:0;}
	
	#wrap .footer .grab{padding: 0}
	
	.BOAO_main .contents{width: 100%;  position: initial; top: auto;}
	.contents .con_right{float: none;   width: 100%; display: block; padding-top:20px;}
	.contents .info{width: 100%;  float: none;}
	
	#mainVisual .area .areabg,
	.research{max-width:100%;text-align:center;}
	.research{padding:50px 0 20px 0; }
	
}


@media (max-width : 940px){	
	#mainVisual{padding: 50px 30px}
	#mainVisual .area .kor{font-size: 16px;}
}


@media (max-width : 720px){
	#mainVisual{padding: 30px 15px}
	#mainVisual .area .kor{font-size: 15px;}
	
	.OB_footer{padding: 0}
}


@media (max-width : 540px){
	#mainVisual .area .txt{text-align: center;}
	.research{text-align: center; padding-top: 20px;}
	.news a,
	.weatherinfo p,
	.research p{font-size: 14px;}
	.research ul li a{font-size:15px;}
	.research ul li a.active{padding: 0; width: 100px; height: 50px; line-height: 50px;}
	
	.research ul{display: block;  border-radius: 10px; padding: 10px 0; height: auto; margin-top:15px;}
	.research ul li{width: 100%; margin: 0;}
	.research ul li a{margin: 5px 0;}
	.research ul li a:hover,
	.research ul li a.active{width: 90%; height: 40px; line-height: 40px;}
	.research ul li a span{display: inline-block; margin-left:5px;}
	.research ul li a:hover, .research ul li a.active{padding: 0}
	
	
	.weatherinfo,
	.contents .info{border-radius:0 0 30px 0; padding:20px;}
	
	.news .news_tit,
	.contents .info h4,
	.weatherinfo h4{font-size:18px;}
}


@media (max-width : 400px){
	#mainVisual .area .tit{font-size:35px; line-height:1.3;}
}

@media (max-width : 330px){
	
}