﻿@charset "utf-8";

@import url(common.css);

#container {position:relative; height:100%}
#container:after {content:""; display:block; clear:both;}

.main_content {position:relative; z-index:7; width:100%; font-family:'NotoM'}
.main_content:after {content:""; display:block; clear:both;}

.main_visual_wrap { width:100%; height:455px; background:#669edf url('/images/web/navy/main/main_visual_bg.jpg') no-repeat 50% 0}
.main_visual { position:relative; width:1200px; height:454px; margin:0 auto}

.cont1 { position:relative; width:1200px; margin:0 auto; padding:20px 0; overflow:hidden}
.cont2_bg { width:100%; overflow:hidden; background-color:#e0eaf4}
.cont2 {position:relative; width:1200px; margin:20px auto; overflow:hidden}
.cont3_bg { width:100%; overflow:hidden; background-color:#283e56}
.cont3 {position:relative; width:1200px; margin:0 auto; overflow:hidden}

.link_wrap { width:374px; padding:0 23px; float:left; overflow:hidden; margin:30px 0}

.widgDiv1{ /* 비주얼 */
	position:relative; width:840px; height:454px; float:left;
}

.widgDiv2{ /* 사용자별서비스 */
	position:absolute; top:0; right:0; width:360px; height:455px; background:url('/images/web/navy/main/user_bg.gif') repeat; overflow:hidden;
}

.widgDiv3{ /* 바로가기 */
	width:840px; float:left;
}

.widgDiv4{ /* 바로가기02 */
	position:relative; width:358px; height:148px; float:right; border:1px solid #cecece;
}

.widgDiv5{ /* 게시판01 */
	position:relative; width:379px; height:258px; border:1px solid #cecece; background:#fff; padding:35px 20px; float:left;
}

.widgDiv6{ /* 게시판02 */
	position:relative; width:378px; height:258px; border:1px solid #cecece; border-left:0; background:#fff; padding:35px 20px; float:left;
}

.widgDiv7{ /* 바로가기03 */
	width:360px; float:right;
}

.widgDiv8{ /* 바로가기04 */
	width:419px; height:240px; border-top:1px solid #46596e; border-right:1px solid #46596e; float:left; margin:30px 0;
}

.widgDiv9{ /* 홍보링크_전화안내 univ_link */
	position:relative; border-bottom:2px solid #536578; padding:0 0 15px 100px;
}

.widgDiv10{ /* 홍보링크_전화안내 univ_call */
	position:relative; padding:20px 0 0 100px;
}

.widgDiv11{ /* 팝업존 */
	position:relative; overflow:hidden; background-color:#fff;
}


@media (max-width: 800px) {
	
	#container,
	.widgDiv1,
	.widgDiv3, .widgDiv3 li, .widgDiv4,
	.widgDiv5, .widgDiv6,
	.widgDiv8, .link_wrap {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	#container { width:100%; padding:69px 0 0; }
	.main_content { width:100%}
		
	.main_visual_wrap, .main_visual, .widgDiv2, .cont1, .cont2, .cont3,
	.widgDiv3, .widgDiv4, .widgDiv5, .widgDiv6, .widgDiv7, .widgDiv8,
	.link_wrap, .widgDiv11 {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease}
	
	
	/* 비주얼 */
	.main_visual_wrap { height:auto}
	.main_visual { width:100%; height:auto}
	.widgDiv1 {width:100%; height:auto; float:none}
	
	/* 사용자별서비스 */
	.widgDiv2 { position:relative; width:100%; height:auto}

	.cont1,	.cont2,	.cont3 {position:relative; width:96%; margin:0 auto; overflow:hidden}
	.cont2 { margin:3% auto}
	
	/* 바로가기 */
	.widgDiv3 { width:100%; float:none; margin-bottom:3%; border:2px solid #69a0e0; overflow:hidden}
	
	/* 바로가기02 */
	.widgDiv4 {width:100%}
	
	/* 게시판01 */
	.widgDiv5 { width:100%; height:auto; float:none}
	
	/* 게시판02 */
	.widgDiv6 {width:100%; height:auto; border-top:0; border-left:1px solid #cecece; float:none}
	
	/* 바로가기03 */
	.widgDiv7 { width:100%; float:none; margin-top:2%}
	
	/* 바로가기04 */
	.widgDiv8 { width:100%; float:none; margin-top:3%}
	
	/* 홍보링크_전화안내 */
	.link_wrap { width:50%; padding:0 2% 0 0; margin:2% 0}
	.widgDiv9 { padding:0 0 15px 70px}
	.widgDiv10 { padding:20px 20px 0 70px}
	
	/* 팝업존 */
	.widgDiv11 { width:50%; margin-bottom:5%}

}


@media (max-width: 670px) {	

	
	/* 바로가기04 */
	.widgDiv8 { height:auto}
	
	/* 홍보링크_전화안내 */
	.link_wrap { width:100%; float:none; padding:0}
	
	/* 팝업존 */
	.widgDiv11 { width:100%; margin:5% 0 8%}
		
}

@media (max-width: 480px) {		

}

@media (max-width: 380px) {
			
}
