@charset "utf-8";

/**
공통 레이아웃
*/
.m{display:none;}
.mask{visibility:hidden; opacity:0; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.35);}
.mask.on{z-index:95; visibility:visible; opacity:1; transition:0.3s ease;}

body{width:100%; min-width:320px; overflow-x:hidden;}

#skip-navigation{z-index:9999; position:absolute; left:0; top:0;}
#skip-navigation *{list-style:none; margin:0; padding:0;}
#skip-navigation a{display:block; width:1px; height:1px; overflow:hidden; color:#000; white-space:nowrap;}
#skip-navigation a:focus,
#skip-navigation a:active{width:100px; height:auto; background:#ffd;}

.inner{position:relative; width:1200px; margin:0 auto;}

#top{width:100%; height:44px; background:#d7d7d7;}
#top:before{content:''; display:block; clear:both;}
#top .global{float:left;}
#top .global > li{position:relative; float:left; border-left:1px solid #d7d7d7;}
#top .global > li > a{position:relative; display:block; padding:0 2.2em; line-height:44px; color:#ffffff; background:#3a5ab3;}
#top .global > li > a:hover,
#top .global > li > a:active,
#top .global > li > a:focus{background:#6f6f6f;}
#top .global > li > a.current{color:#535452; background:#fff;}
#top .global > li.member > a{padding-right:2.6em;}
#top .global > li.member > a:after{content:''; position:absolute; top:19px; right:25px; width:5px; height:5px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; transform:rotate(45deg); transition:0.3s ease;}
#top .global > li.member.on > a:after{transform:rotate(-135deg);}

#member_list{display:none; z-index:97; position:absolute; top:44px; left:0; width:100%; padding:0 5px; box-sizing:border-box; border:1px solid #d7d7d7; background:#fff;}
#member_list li:last-child a{border-bottom:none;}
#member_list a{display:block; width:100%; padding:8px 0; border-bottom:1px dotted #ccc; text-align:center;}

#top ul li:first-child{border-left:none;}

#header{position:relative; height:177px;}
.logo {z-index:11; position:absolute; top:39px; left:0;}
.logo *{display:inline-block; vertical-align:top;}
.logo a{text-decoration:none;}
.logo img {padding-right:8px;}
.logo em {margin:6px 0 0 0; font-size:25px;}

#font_control {float:right; padding:37px 0;}
#font_control ul{overflow:hidden; width:100%;}
#font_control li{float:left; width:42px; height:37px; line-height:37px; font-size:11px; text-align:center; border:1px solid #d6d6d6; border-left:none;}
#font_control li:first-child{color:#555; border-left:1px solid #d6d6d6;}
#font_control li a{display:block; height:37px; line-height:37px;}
#font_control li.btns a{text-indent:-999px; font-size:0; background:url(/assembly/images/common/ico_util.png) no-repeat 14px 11px;}
#font_control li.big a{background-position:16px -38px;}
#font_control li.small a{background-position:17px -82px;}
#font_control li a:hover{background-color:#f9f9f9;}

/* 메인메뉴 */
#menuArea{position:absolute; left:0; top:156px; width:100%; z-index:96; border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf; background:#fff;}
#menuArea:before{z-index:-1; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:64px;}
#menuArea .line{display:none; position:absolute; top:63px; left:0; width:100%; height:216px; background:#f8f8f8; border-top:1px solid #cfcfcf;}

body.on .mask{z-index:92; visibility:visible; opacity:1; top:auto; bottom:0; height:calc(100% - 214px);}

#mainmenu{height:64px; width:1200px;  margin:0 auto;}
#topmenu{float:left; width:100%;}
#topmenu > li{position:relative; float:left; width:14.28%; line-height:0;}
#topmenu > li > a{display:block; color:#333; font-size:18px; line-height:64px; text-align:center; text-decoration:none; z-index:97;}

#topmenu > li:hover > a,
#topmenu li a:active,
#topmenu li a:focus,
#topmenu li a:hover,
#topmenu > li.current_on > a{color:#3a5ab3;}

#topmenu li .menu{z-index:96; position:absolute; top:64px; left:0; width:100%; height:216px; box-sizing:border-box; border-right:1px solid #cdcdcd; background:#fff;}
#topmenu > li > .menu > ul{position:absolute; top:0; left:0; width:100%; box-sizing:border-box; padding:15px 0 0 0;}
#topmenu li:first-child .menu{border-left:1px solid #cdcdcd;}
#topmenu li ul li{float:none; width:100%;}
#topmenu li ul li a{display:block; box-sizing:border-box; padding-left:25px; color:#151515; text-align:left; line-height:195%;}

#topmenu li li a:hover,
#topmenu li li a:active,
#topmenu li li a:focus,
#topmenu li li.current_on a{color:#1d547d;}

#topmenu li ul li a:focus,
#topmenu li ul li a:hover{background:#f8f8f8;}
#topmenu ul ul{display:none !important;}

/* 하단*/
#footer {padding:30px 0; background:#595f6a; line-height: 150%; font-weight:200; color:#a5a8ae;}
#footer address br {display:none;} 

/*
서브 레이아웃
*/
/* 문서정보 */
#subVisual{position:relative; overflow:hidden; clear:both; width:100%; height:160px; background:#3b5ab4 url(/assembly/images/assembly/common/subvisual.jpg) no-repeat top 0 left 50%;}
#subVisual .slogan{position:relative; padding:38px 0 0 40%; color:#fff;}
#subVisual .slogan:before {content:''; position:absolute; top:15px; left:26%; width:139px; height:142px; background:url(/assembly/images/assembly/common/subvisual_ico.png) no-repeat;}
#subVisual .slogan em{font-weight:100; font-size:30px;}
#subVisual .slogan span{font-weight:800;}
#subVisual .slogan p{margin-top:10px; font-weight:100; font-size:17px;}

#subContent{position:relative; overflow:hidden; max-width:1200px; margin:0 auto; padding:0 0 5em 0; background:url(/assembly/images/common/bg_sub.gif) repeat-y;}
#subContent #content{float:right; width:77%;}

/* 서브메뉴 */
#submenu{float:left; width:220px;}
#submenu .sm_tit{width:100%; height:120px; font-size:26px; text-align:center; line-height:120px; color:#fff; background:#1fb79e;}
#submenu .depth2 li{line-height:0;}
#submenu .depth2 li a{display:block; margin-top:-1px; padding:0 0 0 20px; font-size:17px; line-height:48px; color:#787878; border:1px solid #e5e5e5; text-decoration:none;}
#submenu .depth2 > li > a:hover,
#submenu .depth2 > li > a:focus,
#submenu .depth2 > li > a:active,
#submenu .depth2 > li.current_on > a{position:relative; border-color:#1fb79e; color:#333333;}

#submenu .depth2 > li > a:hover:after,
#submenu .depth2 > li > a:focus:after,
#submenu .depth2 > li > a:active:after,
#submenu .depth2 > li.current_on > a:after{content:''; display:block; position:absolute; top:18px; right:14px; border-top:6px solid transparent; border-right:0 solid transparent; border-bottom:6px solid transparent; border-left:6px solid #333333;}
#submenu .depth2 > li > a:hover:before,
#submenu .depth2 > li > a:focus:before,
#submenu .depth2 > li > a:active:before,
#submenu .depth2 > li.current_on > a:before{z-index:2; content:''; display:block; position:absolute; top:21px; right:17px; border-top:3px solid transparent; border-right:0 solid transparent; border-bottom:3px solid transparent; border-left:3px solid #fff;}

#submenu .depth2 li ul {display:none; padding:0.6em 0 0.6em 21px; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; background:#f3f9fd;}

#submenu .depth2 li.current_on ul,
#submenu .depth2 li:hover ul,
#submenu .depth2 li:focus ul,
#submenu .depth2 li:active ul{display:block;}

#submenu .depth2 li ul li a{position:relative; padding:0.4em 0 0.4em 0.8em; font-size:100%; line-height:100%; color:#5a5a5a; border:none;}
#submenu .depth2 li ul li a:before{content:''; display:block; position:absolute; top:13px; left:0; width:3px; height:3px; background:#888;}
#submenu .depth2 li ul li a:hover,
#submenu .depth2 li ul li a:focus,
#submenu .depth2 li ul li a:active,
#submenu .depth2 li ul li.current_on a{color:#3761ad;}
#submenu .depth2 li ul li a:hover:before,
#submenu .depth2 li ul li a:focus:before,
#submenu .depth2 li ul li.current_on a:before{border-color:#3761ad; background:#3761ad;}

/* 문서정보 */
#location{overflow:hidden; width:100%; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; background:#f7f7f7;}
#location a{float:left; width:52px; height:50px; text-indent:-999px; font-size:0; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; background:url(/assembly/images/common/ico_sub.png) no-repeat 17px 18px;}
#location span{position:relative; float:left; min-width:205px; height:50px; line-height:50px; padding:0 0 0 1.5em; border-right:1px solid #e5e5e5; vertical-align:top;}
#location span:after{content:''; display:block; position:absolute; top:50%; right:15px; width:5px; height:10px; margin:-5px 0 0 0; background:url(/assembly/images/common/ico_sub.png) no-repeat 0 -95px;}
#location span.end:after{display:none;}

#pageTitle h3{padding:1em 0 1.1em; line-height:150%; font-size:33px;}

@media all and (max-width:1200px) {
	.inner,	#mainmenu{width:98%;}
	#subContent{width:98%; background-size:200px auto;}
	#submenu{width:200px;}
	#submenu .depth2 li a {font-size:16px;}
}

@media all and (max-width:1024px) {
	img{max-width:100%;}
	.m{display:block;}
	.w{display:none;}

	#top{height:35px; font-size:15px;}
	#top .global > li > a{padding:0 1em; line-height:35px;}
	#top .global > li.member > a:after{top:14px;}
	#member_list{top:35px;}
	#member_list a{padding:5px 0;}
	
	#header{height:70px;}
	.logo{top:15px; width:100%; text-align:center;}
	.logo img{height:42px; padding:0;}
	.logo em {margin-top:9px;}

	#subVisual {background-size:cover;}
	#subVisual .slogan:before {left:19%;}
	#subVisual .slogan {padding-left:35%;}

	.m_top .logo em {margin-top:10px; color:#fff;}
	.m_top .logo em br {display:none;}

	/* 모바일 메뉴 */
	.btn_menu{display:block; z-index:94; position:absolute; top:51px; left:10px;  width:40px; height:40px; padding:0 8px; border-radius:3px; background:none;} 
	.btn_menu .bar{display:block; width:100%; height:3px; margin:4px 0 4px 0; background:#23639b;}
	.btn_menu_close{display:block; z-index:94; position:absolute; top:27px; right:3%; width:50px; height:50px; border-radius:50%; border:1px solid #d8e3f2; background:none;}
	.btn_menu_close .bar{position:absolute; top:24px; left:12px; display:block; width:25px; height:1px; background:#d8e3f2;}
	.btn_menu_close .bar1{transform:rotate(45deg);}
	.btn_menu_close .bar2{transform:rotate(-45deg);}

	.m_menu{position:absolute; top:0; left:-100%; width:60%; height:100%; z-index:99; background:#245080; transition:0.5s;}
	.m_menu.on {left:0;}
	.m_menu .m_top{position:relative; height:106px;}
	.m_menu .logo{top:31px; left:2%; width:98%; text-align:left;}
	.m_menu > ul{float:left; width:100%;}
	.m_menu > ul a{display:block; text-decoration:none; cursor:pointer;}
	.m_menu > ul > li{border-bottom:1px solid rgba(18,53,90,0);}
	.m_menu > ul > li > a{height:3em; line-height:3em; color:#fff; font-size:130%; padding:0 0 0 1em; background:#12355a url(/assembly/images/common/bul_menu.png) no-repeat 95% -27px;}
	.m_menu > ul > li > .on{background-color:#5bb7c4; background-position:95% 23px;}
	.m_menu > ul > li > div {display:none; padding:1.3em 0.8em 0.7em 1.2em; background:#fff;}
	.m_menu > ul > li .on + div{display:block;} 
	.m_menu > ul > li > div > ul > li {margin:0 0 0.8em 0;}
	.m_menu > ul > li > div > ul > li > a{position:relative; padding:0 0 0 1.2em; font-size:115%;}
	.m_menu > ul > li > div > ul > li > a:before{content:''; display:block; position:absolute; top:6px; left:0.2em; width:13px; height:13px; border:4px solid #527eb8; border-left:4px solid #1b4a93; border-top:4px solid #114392;}
	.m_menu > ul > li > div > ul > li > ul{overflow:hidden; width:97%; margin:0.1em 0 0 0.2em; padding:0.5em 0 0.5em 0.5em; box-sizing:border-box; border:1px solid #e6e6e6; border-radius:5px; background:#f5f5f5;}
	.m_menu > ul > li > div > ul > li > ul li{float:left; width:50%;}
	.m_menu > ul > li > div > ul > li > ul li a{position:relative; padding:2px 0 2px 10px;}
	.m_menu > ul > li > div > ul > li > ul li a:before{content:''; display:block; position:absolute; top:12px; left:2px; width:3px; height:3px; background:#4387d8;}

	#subContent{width:98%; padding:0 0 3em 0; background:none;}
	#subContent #content{float:none; width:100%;}
	
	#location span{height:34px; line-height:34px; padding:0 1.5em 0 0; min-width:0; border-right:none;}
	#location span:after{right:10px;}
	#location span.end:after{display:none;}
	#location a{width:22px; height:34px; background-position:0 10px; border-left:none; border-right:none;}
	
	#pageTitle h3{padding:0.5em 0 0.8em 0; font-size:29px;}
	
	#footer{text-align:center;}
}

@media all and (max-width:860px) {
	#subVisual .slogan:before {left:15%;}
	#subVisual .slogan {padding-left:33%;}
}

@media all and (max-width:768px) {
	#top{height:32px;}
	#top .global > li > a{line-height:32px; padding:0 0.8em; font-size:14px;}
	#top .global > li.member > a {padding-right:2em;}
	#top .global > li.member > a:after{top:12px; right:14px;}
	#member_list{top:32px;}

	#header{height:60px;}
	.logo{top:12px;}
	.logo img{height:38px;}
	.logo em {margin-top:7px; font-size:23px;}

	.btn_menu{top:46px; width:33px; height:33px; padding:0 5px;}
	.btn_menu .bar{margin:3px 0;}
	.btn_menu_close{top:25px; width:34px; height:34px;}
	.btn_menu_close .bar{top:15px; left:4px;}
	
	.m_menu .m_top{height:82px;}
	.m_menu .logo{top:23px;}
	.m_top .logo em {margin-top:7px; font-size:21px;}
	.m_top .logo img{height:38px;}
	.m_menu > ul > li > a{padding:0 0 0 0.7em; font-size:16px; background-size:17px auto; background-position:94% -17px;}
	.m_menu > ul > li > .on{background-position:94% 17px;}
	.m_menu > ul > li > div{padding:0.6em 0.7em 0.5em 0.7em;}
	.m_menu > ul > li > div > ul > li{margin:0 0 0.3em 0;}
	.m_menu > ul > li > div > ul > li > a{padding-left:1em; font-size:15px; background-size:13px;}
	.m_menu > ul > li > div > ul > li > a:before {top:7px; width: 8px; height: 8px; border-width: 2px;}
	.m_menu > ul > li > div > ul > li > ul{padding:0.4em 0 0.4em 0.4em;}
	.m_menu > ul > li > div > ul > li > ul li a{font-size:14px;}

	#subVisual {height:auto;}
	#subVisual .slogan {padding:2em 0 2em 135px;}
	#subVisual .slogan:before {top:29px; left:10px; background-size:75%;}
	#subVisual .slogan em {font-size:26px;}
	#subVisual .slogan p {font-size:15px;}
		
	#location .inner{width:96%; font-size:14px;}
	#location span{height:28px; line-height:28px;}
	#location span:after{right:7px;}
	#location a{height:28px; background-position:0 7px;}
	#subContent{width:96%;}

	#pageTitle h3{padding:0.4em 0 0.6em 0; font-size:24px;}

	#footer{padding:2em 0; font-size:15px;}
}

@media all and (max-width:580px) {
	.logo{top:17px;}
	.logo img{height:30px;}
	.logo em {margin-top:3px; font-size:21px;}
}

@media all and (max-width:568px) {
	#top .global {width:100%;}
	#top .global > li {width:24.8%;}
	#top .global > li > a {font-size:13px; text-align:center;}

	.m_top .global{display:block;} 
	.m_top .logo em {margin-top:-2px; line-height:120%; font-size:18px;}
	.m_top .logo em br {display:block;}
	.m_menu{width:290px;}
	.m_menu > ul > li > a{background-position:92% -17px;}
	.m_menu > ul > li > .on{background-position:92% 17px;}

	#subVisual .slogan {padding:2em 15px;}
	#subVisual .slogan:before {background:none;}
	#subVisual .slogan em {font-size:21px;}
	#subVisual .slogan p {font-size:14px; line-height:1.4em;}
	
	#pageTitle h3{padding:0.4em 0; font-size:22px;}

	#footer address br {display:block;} 
}

@media all and (max-width:500px){
	#top .global > li {width:23%;}
	#top .global > li.member {width:30%;}
	
	#subVisual .slogan {padding:1.5em 15px;}
	#subVisual .slogan p {font-size:13px;}
}

@media all and (max-width:430px) {
	#top{height:30px;}
	#top .global > li > a{line-height:30px; padding:0 0.7em;}
	#top .global > li.member > a:after{top:11px;}
	#member_list{top:30px;}
	#member_list a{font-size:14px;}

	.logo em {font-size:20px;}
	
	#location span{padding:0 1.2em 0 0;}
	#location span.end{padding:0;}
	#location span:after{right:5px;}

	#footer {font-size:14px;}
}

@media all and (max-width:360px) {
	#top .global > li > a {font-size:12px;}
	
	.logo {top: 16px;}
	.logo em {font-size:17px;}

	#subVisual .slogan em {font-size:19px;}

	.btn_menu {left:0;}

	#footer{font-size:13px;}
}