@charset "utf-8";


#header{width:100%; position: fixed; top:0; background: url(/images/m_nav_bg.png); height: 100px; z-index: 9999;}
#header.nav_color{background: url(/images/nav_color.jpg);}
#nav{width:1200px; margin: 0 auto;}
#nav .h1_logo{float:left; margin-top: 20px; }
#nav .h1_logo a{display: block; background-image:url(/images/h1_logo.png); background-size: cover;width:353px; height: 59px;}
#nav .depth{float:right;}
#nav .depth .navi_set{display: block; float:left; position: relative;}

#nav .depth .navi_set .subnav{display: none; }
.toggle_menu{display: none; position: absolute; right:0px; top: 0px; text-align: -99999px;}
#m_nav{display: none;}

#footer{width:100%; border-top: 1px solid #ddd; background: #f6f6f6;}
#foot{padding:40px 0; text-align: center; width:90%; margin: 0 auto;}
#foot address{font-style: normal; color:#999; font-size: 12px;}
.foot_copy p{margin-top: 10px; color:#999;font-size: 12px;}
.foot_copy a{color:#999; font-weight: bold;}


/*서브페이지 레이아웃*/
#sub_container{width:100%; }
.sub_visual{width:100%; margin-top: 100px; background-position: center center; height: 280px;}
.sub_visual h2{font-family :'Titillium Web',sans-serif; font-size: 56px; font-weight: 200; text-align: center; padding-top: 40px;}
.sub_tit_bar{width:40px; height: 1px; background:#ddd; margin: 10px auto;}
.sub_tit_ko{text-align: center; color:#555; font-weight: 200; font-size: 18px;}
.sub_visual_01{background-image: url(/images/sub_visual_01.jpg);}
.sub_visual_02{background-image: url(/images/sub_visual_02.jpg);}
.sub_visual_03{background-image: url(/images/sub_visual_03.jpg);}
.sub_visual_04{background-image: url(/images/sub_visual_04.jpg);}
.sub_visual_05{background-image: url(/images/sub_visual_05.jpg);}


.snb{width:1200px; margin: -35px auto 0; background: #fff; z-index: 97; border:1px solid #eee;-webkit-box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.07);-moz-box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.07);box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.07); height: 70px;}
.snb ul{text-align: center;}
.snb ul li{display: inline-block; width:130px;*display:inline; zoom:1;}
.snb ul li a{display: block; width:130px; font-weight: 200; color:#777; height: 70px; line-height: 70px; font-size: 16px;}
.snb ul li a:hover span{color:#008bd4; font-weight: 300; border-bottom: 2px solid #008bd4;}
.snb ul li .active span{color:#008bd4; font-weight: 300; border-bottom: 2px solid #008bd4;}

.snb_widen li{width:190px !important;}
.snb_widen li a{width:190px !important;}


.sub_contents{margin: 50px auto 80px; width:1200px;}
.sub_contents_tit{padding-bottom: 20px; border-bottom: 1px solid #eee;}
.sub_contents_tit h3{text-align: center; font-size: 32px;}
.sub_cont_path{margin: 0 auto;}
.sub_cont_path ul{text-align: center;}
.sub_cont_path ul li{display: inline-block;*display:inline; zoom:1;font-weight: 600;font-size: 13px; color:#888;}
.sub_cont_path ul li a{display: block; background: url(/images/sub_home.gif); width:15px; height: 14px; color:#666;  }
.path_ico{background-image: url(/images/sub_path.gif); background-repeat: no-repeat; background-position: center 11px; width:20px; height: 20px;}
.sub_cont_path ul .this_page{} 

.sub_cont_box{margin-top: 30px;}



/*BELOW THE FIXED WIDTH INCLUDING THE WIDTH OF I-PAD PRO*/
@media screen and (min-width:1024px){
	
	#nav .depth .navi_set .subnav{position: absolute; left: 20px; top:80px; width:150px;background: #fff; padding:10px 15px 15px 20px; border-top:3px solid #0960b8; border-right:1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; border-left:1px solid #e5e5e5;}
	#nav .depth .navi_set .subnav li{height: 40px; line-height: 40px;}
	#nav .depth .navi_set .subnav li a{font-size: 14px; font-weight: 200; display: block; width:150px; height: 40px;}
	#nav .depth .navi_set .subnav li a:hover{font-weight: 500; color:#0960b8;}
	#nav .depth .navi_set .mm{font-size: 16px; color:#fff; display: inline-block; height: 100px; line-height: 100px; text-align: center; font-weight: 600;width:110px; }
	#nav .depth .navi_set .subnav{ }
}

/*BELOW THE FIXED WIDTH INCLUDING THE WIDTH OF I-PAD PRO*/
@media screen and (max-width:1023px){
	#header{height: 60px; background: #fff !important; border-bottom: 1px solid #ddd;}
	#m_nav{display: block;}
	#m_nav .h1_logo{clear: left; margin: 0 auto; padding: 10px 5px; background: #fff;}
	#m_nav .h1_logo a{display: block; background-image:url(/images/h1_logo_bl.png);width:236px; height: 39px; background-size: cover;}
	#m_nav{width:100%; position: relative;}	
	#m_nav .depth{clear:right; position: absolute; top:60px;  right: -201px; transition: All 0.2s ease;opacity: 0;width:180px; background: #333; padding: 10px 20px 20px 20px;}
	#m_nav .depth.depth_active{width:180px; opacity: 1;right: 0px;}
	#m_nav .depth .navi_set{clear:both;}
	#m_nav .depth .navi_set > a{color:#eee; font-weight: 600px; padding:20px 0; display: block; border-bottom: 1px solid #444; width:180px; font-size: 18px;}
	#m_nav .depth .navi_set .subnav{display: none; padding:10px 10px 20px 10px; margin-top: 10px;border-bottom: 1px solid #444;}
	#m_nav .depth .navi_set .subnav a{color:#eee; font-weight: 400; font-size: 16px; text-indent: 20px;}
	.toggle_menu{display: block;background:url(/images/m_menu_open.gif); width:60px; height: 60px;}
	.toggle_menu.toggle_active{background:url(/images/m_menu_close.gif);}


	/*SUB PAGE LAYOUT*/
	.sub_contents{margin: 65px auto 80px; width:90%;}
	.sub_contents_tit{padding-top: 30px;}

}


/*BELOW THE TABLET*/
@media screen and (min-width:769px){
	#nav .depth{display: block !important;}
}

/*MOBILE VERSION*/
@media screen and (max-width:768px){

}