@charset "UTF-8";

/*서브 구조*/
#contentsWrap { position: relative; z-index: 9; }
main { font-size: 16px; padding-bottom: 60px; }
main #content {width:100%;}
.section{position: relative;}
.search_content { padding: 40px 0 0; }
.lnb_wrap {margin-top:55px; height: 50px; background: #32528d; }

.content_header {padding: 60px 0 60px; max-width: 1200px; margin: 0 auto; background: url(/img/common/sub1.png) no-repeat 100% -20px;}
.content_header .title {padding-top:20px; color: #0e4a83; font-size: 32px;font-weight: 400; background: url(/img/common/titleLine.png) no-repeat 0 0}
.content_header .disc_txt { padding: 50px 0 55px; border-bottom: 1px solid #ccc; font-size: 20px; }
.content_header.-line { border-bottom: 1px solid #ccc;}
.content_header span { display: inline-block; background: url(/img/common/devision_title.gif) no-repeat 0 0; width: 10px; height: 25px; vertical-align: middle; margin: 0 12px 0 16px; }
.content_header small { color: #555; font-size: 26px; }

.container { max-width: 1200px; margin: 0 auto; position: relative;}
.container:after { content: ""; clear: both; display: block; }

/*visual*/
.visual {float: right; position: absolute;right: 0px; top: 130px; height: 239px; width:262px; /*background: url(/img/common/sub2.png) no-repeat 100% 0;*/}

/* 구조 : 상단*/
#header { border-top: 2px solid #284a7e; position: relative; z-index: 13; background-color:#fff;}
#header h1 { display:inline-block; position: absolute; top:60px; z-index: 10; }
#header h1 a { display: inline-block; width:195px; height:41px; background: url(/img/common/logo.png) no-repeat 100% 0;text-indent: -9999em; background-size:95% }
.ut_menu { position: absolute; right: 0; top: 25px; }
.ut_menu li { float: left; line-height:24px; background: url(/img/common/linkBullet.png) no-repeat 100% 11px; padding-right: 12px; }

.ut_menu li.developerLi{background:none; padding-right: 0; }
.ut_menu li#timer{background:none; padding-right: 0;}
.ut_menu li + li { margin-left: 10px; line-height: 24px;}
.ut_menu li a{font-size: 15px; color: #42619a; line-height: 24px;}
.ut_menu li a.ut_btn { display: inline-block; color: #1069ab; background: url(/img/common/icon_ut_arrow.png) no-repeat 100% 0; padding-right: 22px; }
.ut_menu li a.topSearchBtn{display:inline-block; background: url(/img/common/searchOpen.png) no-repeat 0 0; width: 24px; height: 24px; margin-left: 20px; }
.ut_menu li a.home{display:none;}
.ut_menu li .certification{background: #e9eff5; border-radius: 12px; padding:0 12px; font-size: 12px; color: #354a74; }
.ut_menu li .certification span{font-weight: 500; color: #fff; background: #0a74bb; font-size: 10px; padding: 1px 3px; border-radius: 2px; margin-right: 8px;}
.ut_menu li .certification .clear{color: #0a74bb; font-weight: 500; font-size: 12px; margin-left: 8px;}

a.btn_multi { background-image: url(/img/common/btn_allmenu.png); width: 24px; height: 20px; display:none; margin:13px;}

.top_menu #gnb { position: relative; top:50px;}
.top_menu #gnb .menu_wrap { position: relative; z-index: 5; background: #fff;}
.top_menu #gnb .menu_wrap ul.menu {padding-left: 21%;}
.top_menu #gnb.hover:after, .top_menu #gnb.focus:after { content: ""; display: block; position: absolute; left: 0; top: 61px; width: 100%; height: 260px; border-bottom: 1px solid #e1e1e1; background: #fff; z-index: 4; }
.top_menu #gnb.hover .menu_wrap, .top_menu #gnb.focus .menu_wrap { border-bottom: 1px solid #e1e1e1; }
.top_menu #gnb.hover .dimmed_black, .top_menu #gnb.focus .dimmed_black {position: fixed; left: 0; top: 305px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 3; }
/* .top_menu #gnb.hover .dimmed_black, .top_menu #gnb.focus .dimmed_black {position: fixed; left: 0; top: 165px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 3; } */


.top_menu #gnb.hover .menu_d2, .top_menu #gnb.focus .menu_d2 { height: 250px; opacity: 1; visibility: visible; }
.top_menu .menu:after { content: ""; display: block; clear: both; }
.top_menu .menu .menu_d1 { float: left; position: relative; width:20%; text-align: center;}
.top_menu .menu .menu_d1:nth-child(1){ width:18%;}
.top_menu .menu .menu_d1:nth-child(2){ width:22%;}
.top_menu .menu .menu_d1:nth-child(3){ width:20%;}
.top_menu .menu .menu_d1:nth-child(4){ width:18%;}
.top_menu .menu .menu_d1:nth-child(5){ width:22%;}
.top_menu .menu .menu_d1 > .menu_d2 { text-align: left; }
/* .top_menu .menu .menu_d1.active > a:after {content:""; position:absolute; bottom:-2px; left:0; right:0; border-bottom:2px solid #ff7062;} */

.top_menu .menu .menu_d1 > a { display: inline-block; position: relative; top: 0; text-align: center; height: 70px; line-height: 70px; font-size: 20px; color: #2f3943; font-weight: 400;}
.top_menu .menu .menu_d1:last-child .menu_d2 { border-right: 1px solid #e1e1e1; }
.top_menu .menu .menu_d1.hover .menu_d2, .top_menu .menu .menu_d1.focus .menu_d2 { background: #eee; }
.top_menu .menu .menu_d2 { opacity: 0; visibility: hidden; position: absolute; left: 0; top: 70px; border-left: 1px solid #e1e1e1; width: 100%; padding-top: 20px;}
.top_menu .menu .menu_d2 li a { display: block; color: #555; padding-left: 60px; height: 36px; line-height: 36px; font-size: 15px;}
.top_menu .menu .menu_d2 li a:hover, .top_menu .menu .menu_d2 li a:focus { color: #fff; background-color: #F56254; }

.top_menu .menu .mn_1 .menu_d2 li a { padding-left: 20px; }
.top_menu .menu .mn_2 .menu_d2 li a { padding-left: 8px; }
.top_menu .menu .mn_3 .menu_d2 li a { padding-left: 20px; }
.top_menu .menu .mn_4 .menu_d2 li a { padding-left: 10px; }
.top_menu .menu .mn_5 .menu_d2 li a { padding-left: 8px; }

.lnb_mn2 {min-width: 260px;}

/* 구조 : 하단*/
#footer { position: relative; z-index: 10; }
.foot_wrap { border: 1px solid #d7d9dd; border-left: 0; border-right: 0; }

.foot_ut_menu { float: left; overflow: hidden; }
.foot_ut_menu li { float: left; line-height: 1.1; height: 50px; padding-top: 17px; }
.foot_ut_menu li + li { background: url(/img/common/blit_util.gif) no-repeat 0 50%; padding-left: 17px; margin-left: 15px; }
.foot_ut_menu li a { color: #555; font-size: 16px; }

.family_menu { float: right; position: relative; }
.family_menu .btn_family { display: block; border: 1px solid #d7d9dd; border-top: 0; border-bottom: 0; text-align: left; width: 253px; height: 50px; padding-left: 20px; font-size: 16px; position: relative; }
.family_menu .btn_family i { display: inline-block; background: url(/img/common/arrow_ft_family.png) no-repeat; position: absolute; right: 25px; top: 50%; margin-top: -3px; width: 12px; height: 6px; }
.family_menu .btn_family.on i { transform: rotate(180deg); }
.family_menu ul { display: none; position: absolute; bottom: 40px; border: 1px solid #ddd; left: 0; width: 100%; background: #f2f2f2; padding: 17px 20px; height: 150px; overflow-y: auto; }
.family_menu ul li a { color: #555; font-size: 16px; }
.family_menu ul li a:focus, .family_menu ul li a:hover { text-decoration: underline; }
.family_menu ul li + li { margin-top: 12px; }
.family_menu .js_family_close { position: absolute; left: -99999em; }

.foot_content { padding: 40px 0 60px; background-color: #f2f2f2; }
.foot_content p.mois{ position: absolute; left: 0; top: 0; background: url(/img/common/logo_foot_gray.jpg) no-repeat 0 0; width: 167px; height: 48px; 
    
    background-size: 100% 100%;
    width: 210px;
    height: 56px;
    
}
.foot_content .panel_center { padding: 0 220px 0 265px; color: #555; font-size: 15px; line-height: 30px; text-align: left; }
.foot_content .marks { position: absolute; right: 0; top: 0; }
.foot_content .marks p { float: left; }
/* .foot_content .marks p + p { margin-left: 20px; } */
.foot_content p.mois{background: url(/img/common/logo_foot_gray.jpg) no-repeat 0 0; width: 190px; height: 57px;text-indent: -9999em; margin-right: 10px;}
.foot_content .marks p.mark_wa{background: url(/img/common/mark_wa.png) no-repeat 0 0; width: 80px; height: 57px;text-indent: -9999em; margin-right: 10px;}
.foot_content .marks p.mark_klid{background: url(/img/common/mark_klid.png) no-repeat 0 0; width: 123px; height: 57px;text-indent: -9999em;}
.foot_content a {display:block; text-indent: -9999em; font-size: 1px; width:100%; height: 100%;}

/**/
#lnb { position: relative; z-index: 10; }
#lnb:after { content: ""; display: block; clear: both;}
#lnb > li { float: left; position: relative; font-size: 15px;}
#lnb > li.goto_home a { display: block; text-indent: -9999em; font-size : 1px; width: 48px; height: 50px; border: 1px solid #647aa7; border-top: 0; border-bottom: 0; background: url(/img/common/home.png) no-repeat 50% 50%;  }
#lnb > li button{min-width: 260px; }
#lnb > li button.menu { display: block; color: #fff; font-size:16px; font-weight: 400; height: 50px; padding: 0 0 0 30px; border-right: 1px solid #647aa7; text-align: left; background: url(/img/common/menuDown.png) no-repeat 95% 50%; }
#lnb > li button.menu.active {background: url(/img/common/menuUp.png) no-repeat 95% 50%; }
#lnb > li button.menuDown { display: block; color: #fff; font-weight: 400; height: 50px; padding: 0 0 0 30px; border-right: 1px solid #647aa7; text-align: left; background: url(/img/common/menuDown.png) no-repeat 95% 50%; }
#lnb > li button.menuUp { display: block; color: #fff; font-weight: 400; height: 50px; padding: 0 0 0 30px; border-right: 1px solid #647aa7; text-align: left; background: url(/img/common/menuUp.png) no-repeat 95% 50%; }
#lnb ul { display: none; position: absolute; left: 0; right: 0; top: 50px; background: #fff; border: 1px solid #ddd; padding: 10px 0; }
#lnb ul li + li { margin-top: 1px; }
#lnb ul li a { display: block; padding: 6px 0 6px 30px; font-size: 15px; }
#lnb ul li a:hover, #lnb ul li a:focus { text-decoration: underline; background: #f2f2f2; }

/***** START : 반응형 CSS ******/
@media (max-width: 399px) {	
	/*하단*/
	.foot_content { text-align: center;}
	.foot_content h1 { display: inline-block; float: none;}
	.foot_content .panel_center { float: none; text-align: center; padding-top: 10px; font-size: 12px;}
	}	

@media (max-width: 1199px) {
	.lnb_wrap .container { margin: 0;}
	#lnb > li.goto_home a { border-left: 0;}
	
	.container { transition: margin 0.15s ease-in 0.15s; will-change: auto; width: auto; margin: 0 10px;} 
	.content_header {padding: 60px 0 50px; background: none;}
	.search_wrap .search_inner { margin: 25px 0 0;}
	.search_wrap .search_inner .box_search { padding: 15px 30px 15px 20px; margin: 0 50px;}
	.search_wrap .search_inner .box_search .input_country { width: 44vw; font-size: 16px; height: 35px;}
	.search_wrap .search_inner .box_search .js_country_open { font-size: 16px; height: 35px;}
	.search_wrap .search_inner .box_search .btn_search { margin-top: 8px; width: 21px; height: 21px; background-size: 100% auto;}
	.search_wrap .search_inner .js_dialog_close { top: 15px; right: 15px; width: 40px; height: 40px; padding-right: 0; font-size: 0; background-size: 100% auto; background-position: 0 0;} 
	
	#header h1 {position: absolute;top: 60px; left: -20px;}
	#header h1 a { background-size: 87%;  }
	
	#header .head_top { height: auto;}
	#header .head_top h1 { padding: 20px 0;}
	#header .head_top h1 a { max-width: 130px; line-height: 1;}
	#header .head_top .etc_menu { top: 33px;}
	#header .head_top .ut_menu { top: 33px;}
	#header .head_top .ut_menu li a { font-size: 12px; height: 14px; line-height: 14px;}
	
	.top_menu #gnb.hover:after, .top_menu #gnb.focus:after {height: 240px;}
	.top_menu #gnb.hover .menu_d2, .top_menu #gnb.focus .menu_d2 { height: 230px;}
	.top_menu .menu .menu_d1 {width:20%; }
	.top_menu .menu .menu_d2 li a {height: 32px; line-height: 32px; }
	.top_menu .menu .mn_1 .menu_d2 li a { padding-left: 15px; }
	.top_menu .menu .mn_2 .menu_d2 li a { padding-left: 13px; }
	.top_menu .menu .mn_3 .menu_d2 li a { padding-left: 18px; }
	.top_menu .menu .mn_4 .menu_d2 li a { padding-left: 10px; }
	.top_menu .menu .mn_5 .menu_d2 li a { padding-left: 10px; }
	.top_menu #gnb .menu_wrap .container { margin: 0;}
	.top_menu .menu .menu_d1 > a { font-size: 18px;}
	.top_menu .menu .menu_d2 li a { padding-left: 10px; font-size: 12px; letter-spacing: -0.025em;}
	
	/* 구조 : 하단 */
	.foot_wrap .container { margin: 0;}
	.foot_ut_menu { padding-left: 20px;}
	.foot_ut_menu li { height: 40px; padding-top: 13px;}
	.foot_ut_menu li + li { padding-left: 12px; margin-left: 10px;}
	.foot_ut_menu li a { font-size: 14px;}
	.family_menu .btn_family { height: 40px; font-size: 14px;}
	.family_menu ul li a { font-size: 14px;}
	.foot_content { padding: 25px 0 35px;}
	.foot_content h1 { background-size: 80% 80%; width: 210px; height: 52px; margin-top: 5px; margin-left: 20px;}
	.foot_content p.mois{background-size: 80%;}
	.foot_content .marks p.mark_wa{background-size: 80%;}
	.foot_content .marks p.mark_klid{background-size: 80%;}
	.foot_content .panel_center { padding: 0 180px; font-size: 13px;}
/* 	.foot_content .marks { width: 25%;} */
	.foot_content .marks p { width: 50%; padding: 0 5px;}
	.foot_content .marks p + p { margin: 0;} 
	}
@media (max-width: 899px) {
	main { font-size: 13px; padding-bottom: 40px; }
	#contentsWrap { padding-top: 50px;}
	#content { font-size: 14px; padding-bottom: 20px; margin: 0 10px;}
	body.main #content{margin: 0 0;} 
	
	.lnb_wrap { height: 40px; margin-top:-1px;}
	#lnb > li.goto_home a { border-left: 0; width: 40px; height: 40px; line-height: 40px; font-size: 15px;}
/* 	#lnb > li button.menu { font-size: 16px; min-width: 0; width: calc(50vw - 28.5px); background-size: 8.5px auto; height: 40px; display: none;} */
	#lnb > li button.menu { display: none;}
	#lnb > li:nth-child(3) button { border-right: 0;}
	#lnb ul { top: 40px; padding: 5px 0;}
	#lnb ul li a { font-size: 16px;}
	
	.content_header {margin: 0 10px; padding: 100px 0 10px 0; background: none;}
	.content_header .title { font-size: 26px; padding-top: 15px;}
	
	.ut_menu li#timer{background:none; padding-right: 0; line-height: 30px; padding: 5px 0 0 0;}
		
	
	body.main.banner #header{position:relative;}
	body.main.banner #mainCotent{padding-top:0}
	#mainCotent #content{padding-bottom:0}
	#header { /* mobile */ position: fixed; left: 0; top:0; width: 100%; border-bottom: 1px solid #ddd;}
	#header h1 {position: absolute;top: 6px; left: -60px;}
	#header h1 a {background: url(/img/common/logo.png) no-repeat 100% 0;  background-size: 65%; }
	#header .mobile_menu_set { position: fixed; left: 0; display:none;}
	#header .mobile_menu_set.-open { display:block; top:48px; overflow-y: auto;}
	#header .mobile_menu_set.-open .visual{ display:none;}
	
	body.main.banner #header .mobile_menu_set{top:297px;}
	
	
	#header .head_top { height: 46px; border-bottom: 0;}
	#header .head_top > .container { margin: 0;}
	#header .head_top h1 { text-align: center; padding: 11px 0 0 10px;}
	#header .head_top h1 a { display: inline-block; vertical-align: top;}
	#header .head_top .etc_menu { position: absolute; width: 100%; left: 0; top: 12px;}
	#header .head_top .etc_menu li { float: none; position: absolute;}
	#header .head_top .etc_menu li:nth-child(3) {right: 10px;}
	#header .head_top .etc_menu .btn_menu { display: block; right: 10px;}
	#header .head_top .etc_menu .btn_menu .js_menu_close { background-image: url(/img/common/btn_menu_close.png); background-size: 100% auto; width: 20px; height: 20px;}
	#header .head_top .etc_menu .btn_sitemap { display: none;}
	#header .head_top .ut_menu { right: inherit; width: 100%; top: 48px;}
	#header .head_top .ut_menu li { width: 40%; background: #284a7e;}
	#header .head_top .ut_menu li:nth-child(1) {width: 20%;}
	#header .head_top .ut_menu li + li { background: #284a7e; margin-left: 0; padding-left: 0;}
	#header .head_top .ut_menu li a { display: block; height: 37.5px; line-height: 37.5px; text-align: center; color: #fff;}
	#header .head_top .ut_menu li a.ut_btn { display: none;}
	
	.top_menu #gnb {position: relative; top: 40px;}
	.top_menu #gnb .menu_wrap{padding-left: 0px;}
	.top_menu #gnb .menu_wrap ul.menu{padding: 0px;}
	.top_menu { top: 50px; bottom: 0; width: 100%; z-index: 14; background: rgba(0, 0, 0, .5);}/* 배경 반투명*/
	.top_menu #gnb .menu .menu_d1 { float: none; width: auto;}
	.top_menu #gnb .menu .menu_d1 > a { display: block; padding: 15px 15px 15px 20px; text-align: left; height: auto; line-height: 1.1; font-size: 16px; border-bottom: 1px solid #016ab1; position: relative; background: -webkit-gradient(linear, left top, right top, color-stop(0, #0d87bb), color-stop(1, #0a74bb)); background: -moz-linear-gradient(left, #0d87bb 0%, #0a74bb 100%); background: -webkit-linear-gradient(left, #0d87bb 0%, #0a74bb 100%); background: -o-linear-gradient(left, #0d87bb 0%, #0a74bb 100%); background: -ms-linear-gradient(left, #0d87bb 0%, #0a74bb 100%); background: linear-gradient(to left, #0d87bb 0%, #0a74bb 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d87bb', endColorstr='#0a74bb', gradientType=1); color: #fff;}
	.top_menu #gnb .menu .menu_d1 > a:after { content: ""; display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(0); background: url(/img/common/arrow_mobile_menu.png) no-repeat 0 0; width: 19px; height: 11px; background-size: 100% auto;}
	.top_menu #gnb .menu .menu_d1.on { border-bottom: 1px solid #ddd;}
	.top_menu #gnb .menu .menu_d1.on > a:after { transform: translateY(-50%) rotate(180deg);}
	.top_menu #gnb .menu .menu_d1.on .menu_d2 { height: auto; opacity: 1;}
	.top_menu #gnb .menu .menu_d2 { position: static; height: 0; overflow: hidden; opacity: 0; visibility: visible; padding-top: 0; border-left: 0; background: #f5f5f5;}
	.top_menu #gnb .menu .menu_d2 li + li { border-top: 1px solid #e1e1e1;}
	.top_menu #gnb .menu .menu_d2 li a { color: #555; font-size: 16px; padding: 18px 0px 18px 30px; display: block; height: auto; line-height: 1.1;}
	.top_menu #gnb .menu .menu_d2 li a:hover, .top_menu #gnb .menu .menu_d2 a:focus { color: #fff; background-color: #F56254;}
	
	.ut_menu { position: absolute; right: 0; top: 0; background: #284a7e}
	.ut_menu li { float: left; line-height:40px; height: 40px; margin-left: 20px; background: url(/img/common/linkBullet.png) no-repeat 0 50%; padding-left: 12px;}
	.ut_menu li:first-child{display:none;}
	.ut_menu li a { color: #fff; }
	.ut_menu li + li { padding-left: 14px; line-height:40px; }
	.ut_menu li a.topSearchBtn{display: none}
	.ut_menu li.developerLi{display: none}
	.ut_menu li a.developers{display: none}
	.ut_menu li a.home {display: inline-block;}
	
	a.btn_multi { display:block; float: right;}
	
	#footer .container { margin: 0;}
	#footer .container:after { content: ""; display: block; clear: both;}
	.foot_content { padding: 0;}
	.foot_content h1 {display: none}
	.foot_content .panel_center { text-align: center; float: inherit; padding: 20px 0; margin-left: 0px; font-size: 12px;}
	.foot_content p.mois{ display: none }
	.foot_content .marks { display: none}
	.foot_wrap .foot_ut_menu { display: none}
	.family_menu .btn_family { height: 40px; font-size: 12px;}
	.family_menu ul { padding: 10px;}
	.family_menu ul li a { font-size: 12px;} 
}

@media (max-width: 767px) {
	main { font-size: 12px; padding-bottom: 30px; }
	#content { font-size: 12px;}
	.lnb_wrap {display:none}
	#lnb > li button { font-size: 14px; padding-left: 15px;}
	#lnb > li ul li a { font-size: 14px; padding-left: 15px;}
	
	.foot_wrap .foot_ut_menu { display: none}
	.foot_wrap .family_menu { width: 48.6111111111%;}
	.foot_wrap .family_menu .btn_family { width: 100%; font-size: 12px;}
	.foot_content .panel_center { font-size: 11px;} 	
	.visual {display: none}
	}
	

/***** END : 반응형 CSS ******/