@charset "UTF-8";

#header{position:absolute; background:none;}

/* contents */
#container{width:100%; max-width:100%; padding-top:0;}
#contents{max-width:1000px; margin:0 auto 40px;}

/* main */
.visual_wrap{position:relative; background:url("/Resources/Kor/Ob/images/index/visual_bg.jpg") 0 0 no-repeat; background-size:cover;}
.visual_wrap .inner{position:relative; width:100%; max-width:1000px; height:500px; margin:0 auto;}
.visual_wrap .inner h2{position:absolute; left:50%; top:50%; transform:translate(-55%,-50%);}
.visual_wrap .inner p{position:absolute; left:0; top:50%; transform:translate(0,-50%); font-size:23px; line-height:32px; color:#bcfdff;}
.visual_wrap .inner .img{position:absolute; right:0; bottom:0;}
.visual_wrap .inner img{width:100%;}
.content h3{margin-bottom:20px; font-size:25px; color:#222; line-height:1.2;}
.btn_link{display:inline-block; position:absolute; width:85px; height:35px; padding-left:10px; border:1px solid #c9c9c9; background:url("/Resources/Kor/Ob/images/common/link_icon.png") 67px center no-repeat; line-height:35px; box-sizing:border-box;}

.main_top{position:relative; padding:40px 30px; margin:-60px 0 20px; background-color:#f2f2f2;}
.main_top:after{display:block; clear:both; content:'';}
.main_top h3{float:left; margin-bottom:0;}
.main_top .bx-wrapper{float:left; width:67%; padding-top:8px; margin-left:9%;}
.main_top .bx-controls{display:none;}
.main_top ul .news_list{height:30px;}
.main_top ul .news_list a{display:block;}
.main_top ul .news_list p{overflow:hidden; display:inline-block; width:57.1428%; font-weight:400; white-space:nowrap; text-overflow:ellipsis;}
.main_top ul .news_list span{margin-left:40px;}
.main_top .btn_link{position:absolute; right:30px; top:40px;}

.main_bottom > ul{overflow:hidden;}
.main_bottom > ul > li{float:left; position:relative; width:26%; height:170px; margin-left:2%; box-sizing:border-box;}
.main_bottom > ul > li:first-child{margin-left:0;}
.main_bottom .notice_box{width:44%; padding:30px; border:1px solid #c9c9c9;}
.main_bottom .notice_box h3{margin-bottom:35px;}
.main_bottom .notice_box .btn_link{position:absolute; right:30px; top:25px;}
.main_bottom .notice_box ul li{position:relative; margin-top:10px;}
.main_bottom .notice_box ul li:first-child{margin-top:0;}
.main_bottom .notice_box ul li a{overflow:hidden; display:block; width:75%; white-space:nowrap; text-overflow:ellipsis;}
.main_bottom .notice_box ul li .day{position:absolute; right:0; top:0; font-size:13px; color:#888;}
.main_bottom .link_box{}
.main_bottom .link_box.box01{background-color:#6cb2e2;}
.main_bottom .link_box.box02{background-color:#856ce2;}
.main_bottom .link_box a{display:block; padding:25px 30px; }
.main_bottom .link_box h3{color:#fff;}
.main_bottom .link_box p{color:#fff; line-height:1.4;}
.main_bottom .link_box .icon{position:absolute; background-position:0 0; background-repeat:no-repeat; background-size:cover;}
.main_bottom .link_box.box01 .icon{right:30px; bottom:30px; width:63px; height:50px; background-image:url("/Resources/Kor/Ob/images/index/link_icon04.png");}
.main_bottom .link_box.box02 .icon{right:30px; bottom:30px; width:59px; height:53px; background-image:url("/Resources/Kor/Ob/images/index/link_icon02.png");}

@media all and (max-width:1024px){
	#contents{width:auto; padding:0 40px;}
	.visual_wrap .inner{width:auto; margin:0 40px;}
}

@media all and (max-width:768px){
	/* main */
	.visual_wrap{padding-top:96.3541%; background:url("/Resources/Kor/Ob/images/index/tablet_main.jpg") 0 0 no-repeat; background-size:cover;}
	.visual_wrap .inner{display: none;}
	#contents{margin-bottom:100px;}
	.content h3{margin-bottom:15px; font-size:34px;}
	.btn_link{width:125px; height:45px; padding-left:20px; background-position:100px center; font-size:20px; line-height:45px;}

	.main_top{padding:40px 30px 110px; margin:-110px 0 30px;}
	.main_top h3{float:none; width:100%;}
	.main_top .btn_link{position:absolute; top:auto; left:50%; right:auto; bottom:40px; margin-left:-63px;}
	.main_top .bx-wrapper{float:none; width:100%; padding-top:0; margin-left:0;}
	.main_top ul .news_list{}
	.main_top ul .news_list h4{display:none;}
	.main_top ul .news_list p{width:80%; margin-bottom:0; font-size:22px;}
	.main_top ul .news_list span{position:absolute; right:2px; top:0; font-size:20px;}
	
	.main_bottom > ul > li{float:none; width:100%; height:auto; margin-left:0;}
	.main_bottom .notice_box{width:100%; padding:40px 30px; margin-bottom:20px;}
	.main_bottom .notice_box h3{margin-bottom:20px;}
	.main_bottom .notice_box .btn_link{right:30px; top:40px;}
	.main_bottom .notice_box ul li{margin-top:15px; font-size:20px;}
	.main_bottom .notice_box ul li .day{font-size:18px;}
	.main_bottom .link_box{float:left; width:48.5%; min-height:auto;}
	.main_bottom .link_box.box02{margin-left:3%;}
    .main_bottom .link_box a{ padding:30px;}
	.main_bottom .link_box p{font-size:20px;}
	.main_bottom .link_box .icon{position:absolute; background-position:0 0; background-repeat:no-repeat; background-size:cover;}
	.main_bottom .link_box.box02 .icon{right:30px; bottom:25px;}
	.main_bottom .link_box.box01 .icon{right:30px; bottom:25px;}
}

@media all and (max-width:640px){

	#contents{padding:0 25px; margin-bottom:70px;}
	
	/* main */
	.visual_wrap{padding-top:112.6%; background:url("/Resources/Kor/Ob/images/index/mobile_main.jpg") 0 0 no-repeat; background-size:cover;}
	
	.content h3{margin-bottom:15px; font-size:22px;}
	.btn_link{left:auto; top:auto; width:10px; height:18px; padding-left:0; background:url("/Resources/Kor/Ob/images/common/link_icon_m.png") 0 0 no-repeat; background-size:cover; border:none; font-size:0; line-height:0;}

	.main_top{padding:30px 20px; margin:-90px 0 10px;}
	.main_top ul .news_list{height:auto;}
	.main_top ul .news_list span{margin-left:0;}
	.main_top .btn_link{position:absolute; left:auto; top:auto; right:20px; top:33px; margin-left:0;}
	.main_top ul .news_list p{display: -webkit-box; width:100%; min-height:44px; margin-bottom:10px; font-size:16px; line-height:1.4; white-space:normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.main_top ul .news_list span{position:relative; font-size:13px;}
	
	.main_bottom .notice_box{padding:20px; margin-bottom:10px;}
	.main_bottom .notice_box h3{margin-bottom:20px;}
	.main_bottom .notice_box .btn_link{right:20px; top:24px;}
	.main_bottom .notice_box ul li{margin-top:15px; font-size:15px;}
	.main_bottom .notice_box ul li .day{font-size:13px;}
	.main_bottom .link_box{float:left; width:100%;}
	.main_bottom .link_box.box01{margin-bottom:10px;}
	.main_bottom .link_box.box02{margin-left:0%;}
    .main_bottom .link_box a{padding:20px;}
	.main_bottom .link_box p{font-size:15px;}
	.main_bottom .link_box .icon{position:absolute; background-position:0 0; background-repeat:no-repeat; background-size:cover;}
	.main_bottom .link_box.box02 .icon{right:30px; bottom:25px;}
	.main_bottom .link_box.box01 .icon{right:30px; bottom:25px;}
}