@charset "utf-8";

#header{width:100%; position: fixed; top:0; background: #fff; height: 90px; z-index: 9999;}
#header.nav_color{background: #fff; box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.07)}
#nav{width:1200px; margin: 0 auto;}
#nav .h1_logo{float:left;}
#nav .h1_logo a{display: block; background:url(/images/h1_logo.png) no-repeat 0 0; width:234px; height: 109px; transition:0.5s all;}
#header.nav_color #nav .h1_logo a{background: url(/images/h1_logo.png) no-repeat 0 -122px; height: 69px;}
#nav .depth{float:right;}
#nav .depth .navi_set{width: 100px; display: block; float:left; position: relative; transition:0.2s all;}
#nav .depth .navi_set:hover{height: 100px; background: #1dab9a;}
#nav .depth .navi_set >a{padding-left: 0px; transition:0.2s all;}
#nav .depth .navi_set:hover >a{color: #fff; padding-left: 20px;}

#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;}
.kod_link{margin-top: 15px;}

/*서브페이지 레이아웃*/
#sub_container{width:100%;}
.sub_visual{width:100%; margin-top: 90px; padding: 15em 0 20em 0; background-size: cover; background-position: center center;}
.sub_visual h2{font-family :'Titillium Web',sans-serif; font-size: 70px; font-weight: 200; text-align: center; color: #fff; text-shadow:0px 0px 10px rgba(0,0,0,0.3);}
.sub_tit_bar{width:40px; height: 1px; background:#ddd; margin: 0 auto;}
.sub_tit_ko{text-align: center; color:#fff; font-weight: 200; font-size: 52px; text-shadow:0px 0px 10px rgba(0,0,0,0.3);}
.sub_tit_txt{text-align: center; color:#fff; margin-top: 30px; font-weight: 200; font-size: 18px; }
.sub_tit_txt span{font-size: 24px; font-weight: 500;}


.sub_visual_01{background-image: url(/images/sub_visual_01.jpg); padding: 5em 0 8em 0; }
.sub_visual_02{background-image: url(/images/sub_visual_02.jpg);}
.sub_visual_03{background-image: url(/images/sub_visual_03.jpg);}
.sub_visual_03_2{background-image: url(/images/sub_visual_03_2.jpg);}
.sub_visual_03_3{background-image: url(/images/sub_visual_03_3.jpg);}
.sub_visual_03_4{background-image: url(/images/sub_visual_03_4.jpg);}
.sub_visual_03_5{background-image: url(/images/sub_visual_03_5.jpg);}
.sub_visual_03_6{background-image: url(/images/sub_visual_03_6.jpg);}
.sub_visual_04{background-image: url(/images/sub_visual_04.jpg);}
.sub_visual_05{background-image: url(/images/sub_visual_05.jpg); padding: 5em 0 8em 0; }


.snb{width:1200px; margin: -35px auto 0; background: #f4f4f4; z-index: 97; height: 70px;}
/*.snb ul{text-align: center;}*/
.snb ul li{float: left; width:190px; text-align: center; margin-right: 10px;}
.snb ul li a{display: block; width:100%; font-weight: 400; color:#777; height: 70px; line-height: 70px; font-size: 15px;}
.snb ul li a:hover span{color:#1dab9a; font-weight: 300; border-bottom: 2px solid #1dab9a;}
.snb ul li .active{background: #fff;}
.snb ul li .active span{color:#1dab9a; font-weight: 300;}

.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;}
.sub_contents_tit h3{padding: 100px 0 20px 0; line-height: 1.3em; text-align: center; font-size: 52px; font-weight: 200; letter-spacing: -2px;}
.sub_cont_path{margin: 0 auto;}
.sub_cont_path ul{text-align: center; margin-bottom: -100px;}
.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: 10px; top:80px; width:150px; background: #fff; padding:10px 15px 15px 20px; box-shadow:6px 6px 0px rgba(0,0,0,0.2)}
	#nav .depth .navi_set .subnav li{height: 40px; line-height: 40px;}
	#nav .depth .navi_set .subnav li a{font-size: 14px; display: block; width:150px; height: 40px;}
	#nav .depth .navi_set .subnav li a:hover{font-weight: 500; color:#1dab9a !important;}
	#nav .depth .navi_set .mm{font-size: 15px; display:block; height: 90px; line-height: 90px;  padding-left: 15px;}
	#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; }
	#m_nav .h1_logo a{display: block; background:url(/images/h1_logo_bl.png) no-repeat; width:186px; height: 46px;}
	#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_visual{margin-top: 61px; padding: 5em 1em 10em 1em !important; box-sizing: border-box;}
	.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){

}