@charset 'utf-8';

/*
z-index → (최상:9999)
1. div.sitemap = 10001
1. 
2. div.sitemap_dimm = 10000
3. div#header = 9999
4. div.m_menu_wrap = 9998
4. div.dimm    = 9998
4. div.m_dimm = 9998
5. div#top      = 9997
5. div#navi     = 9997
*/

.w_pic { display:block; }
.m_pic { display:none; }
div.dimm { position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.85; filter:alpha(opacity=85); z-index:9998; display:none; }
div.m_dimm { position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.85; filter:alpha(opacity=85); z-index:9998; display:none; }
div.sitemap_dimm { position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.85; filter:alpha(opacity=85); z-index:10000; display:none; }

#header { position:fixed; left:0; top:0; width:100%; min-width:320px; height:83px; background:#fff; border-bottom:1px solid #1e5cc1; z-index:100000; }
#header div.inner_header { position:relative; margin:0 auto; width:1220px; }
#header h1 { padding:22px 0 0 4px; }

#header #gnb { position:absolute; left:293px; top:29px; width:700px; }
#header #gnb > li { float:left; margin-right:70px; }
#header #gnb > li.last { margin-right:0; }

#header div.submenu { position:absolute; top:46px; padding-top:9px; width:163px; background:url('../img/common/submenu_edge.png') center top no-repeat; display:none; }
#header div.submenu1 { left:-57px; }
#header div.submenu2 { left:70px; }
#header div.submenu5 { left:507px; }

#header div.submenu ul { padding:15px; background:#313131; }
#header div.submenu li { margin-bottom:10px; }
#header div.submenu a { font-size:14px; color:#fff; }
#header div.submenu a:hover { border-bottom:1px solid #fff; }
#header div.submenu a span { font-size:12px; color:#919191; }

#header ul.utilmenu { position:absolute; right:0; top:35px; }
#header ul.utilmenu li { float:left; padding-left:7px; margin-left:9px; height:9px; background:url('../img/common/icon_util.jpg') left center no-repeat; }

#header p.btn_menu_toggle { position:absolute; right:15px; top:8px; width:64px; display:none; }

#navi { position:fixed; bottom:0; left:0; width:100%; height:51px; background:#3c495e; z-index:9997; }
#navi div.inner_navi { position:relative; margin:0 auto; width:1220px; }
#navi div.inner_navi ul { width:100%; border-left:1px solid #51627f; }
#navi div.inner_navi ul:after { content:""; display:block; clear:both; }
#navi div.inner_navi li { float:left; width:25%; text-align:center; height:51px; line-height:51px; }
#navi div.inner_navi li a { display:block; border-right:1px solid #51627f; border-bottom:1px solid #51627f; }
#navi div.inner_navi li a.portfolio { background:url('../img/common/fm_bg.jpg') 0 0 repeat; }
#navi div.inner_navi li img { vertical-align:middle; }

#navi div.inner_navi div.navi_left { position:absolute; left:-380px; top:0; }
#navi div.inner_navi div.navi_right { position:absolute; right:-380px; top:0; }

#footer { padding:55px 0 170px 0; height:96px; background:#171617; }
#footer div.inner_footer { position:relative; margin:0 auto; width:1220px; }
#footer h2 { margin-left:20px; }
#footer p.addr { position:absolute; left:270px; top:0; }
#footer p.info { position:absolute; left:600px; top:0; }
#footer ul.foot_item { position:absolute; right:20px; top:0; }
#footer ul.foot_item:after { content:""; display:block; clear:both; }
#footer ul.foot_item li { float:left; margin-left:7px; }
#footer p.copy { position:absolute; right:20px; top:42px; }
#footer p.copy img.copy_img2 { display:none; }

#top { position:fixed; left:50%; margin-left:630px; bottom:-100px; opacity:0; z-index:9997; }
#top img { max-width:inherit; }

/* 포트폴리오 */
#container div.portfolio_wrap { position:relative; margin:0 auto; left:50%; margin-left:-630px; width:1260px; padding-bottom:50px; }
#container div.portfolio_wrap:after { content:""; display:block; clear:both; }
#container div.portfolio_wrap div.grid { float:left; margin:20px; width:380px; }
#container div.portfolio_wrap dt { position:relative; height:0; padding:0 0 48% 0; margin-bottom:15px; }
#container div.portfolio_wrap dt img { position:absolute; left:0; top:0; width:100%; height:auto; }
#container div.portfolio_wrap dd { text-align:center; display:block; width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-size:14px; color:#000; }

/*
#boxer .boxer-image { max-width:inherit; }
.boxer-open #boxer-overlay { opacity:1; background:#eaeaea; z-index:10000; }
.boxer-open #boxer { z-index:10001; }
#boxer .boxer-position { display:none; }
#boxer div.boxer-caption { width:100%; }
#boxer div.boxer-caption:after { content:""; display:block; clear:both; }
#boxer .boxer-caption.gallery p { padding-top:10px; color:#0f0f0f; }
#boxer .boxer-caption.gallery p.caption { float:left; width:26.5%; font-size:30px; font-weight:bold; text-align:center; }
#boxer .boxer-caption.gallery p.alt { float:right; width:73.5%; font-size:14px; line-height:1.4; }

#boxer .boxer-close { width:24px; height:25px; background:url('../img/portfolio/portfolio_close.png') 0 0 no-repeat; }
#boxer .boxer-control { width:38px; height:75px; }
#boxer .boxer-control.previous { background:url('../img/portfolio/portfolio_prev.png') 0 0 no-repeat; }
#boxer .boxer-control.next { background:url('../img/portfolio/portfolio_next.png') 0 0 no-repeat; }
*/
/*
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { background:url('../img/portfolio/portfolio_close.jpg') right 3px no-repeat; padding-right:0; right:0; text-indent:-20000px; }
.mfp-bg { opacity:1; filter: alpha(opacity=100); background:#eaeaea; z-index:10000; }
.mfp-wrap { z-index:10001; }

.mfp-title { float:left; padding:10px 0 !important; width:26.5%; font-size:30px; line-height:1.2; font-weight:bold; text-align:center; color:#0f0f0f; }
.mfp-alt { float:right; padding:10px 0  !important; width:73.5%; font-size:14px; line-height:1.4; text-align:left; color:#0f0f0f; }
*/

.portfolio_dimm { position:fixed; left:0; top:0; width:100%; height:100%; background:#eaeaea; z-index:10000; display:none; }
.portfolio_popup { position:absolute; z-index:10001; left:50%; margin-left:-640px; max-width:1280px; width:100%; display:none; }
.portfolio_popup div.portfolio_close { height:36px; }
.portfolio_popup div.portfolio_close a { float:right; }
.portfolio_popup div.portfolio_pic { text-align:center; background:#fff; }
.portfolio_popup div.portfolio_content { width:100%; }
.portfolio_popup div.portfolio_content:after { content:''; display:block; clear:both; }
.portfolio_popup div.portfolio_content p.tit { padding:10px 0; width:100%; font-size:24px; line-height:1.2; font-weight:bold; text-align:left; color:#0f0f0f; }
.portfolio_popup div.portfolio_content p.con { display:none; }
.portfolio_popup div.portfolio_content p { padding:10px 0; width:100%; font-size:14px; line-height:1.4; color:#0f0f0f; }
.portfolio_popup div.portfolio_content p img { width:auto !important; max-width:100%; height:auto !important; }
.portfolio_prev { position:fixed; left:15px !important; top:50%; margin-top:-37.5px; z-index:10002; }
.portfolio_next { position:fixed; right:15px !important; top:50%; margin-top:-37.5px; z-index:10002; }
.portfolio_popup .bx-wrapper img { margin:0 auto; }
.portfolio_popup .bx-wrapper .bx-loading { display:none; }
/* 포트폴리오 end */

/* 사이트맵 */
.sitemap { position:absolute; left:50%; margin-left:-429px; width:858px; z-index:10001; display:none; }
.sitemap > ul { width:100%; }
.sitemap > ul > li { float:left; width:20%; text-align:center; }
.sitemap > ul > li > a { display:block; margin-bottom:15px; margin-left:2px; font-size:20px; font-weight:bold; color:#fff; padding:55px 0; height:40px; background:#1f5dc1; }
.sitemap > ul > li:first-child > a { margin-left:0; }
.sitemap > ul > li > a > span { display:block; margin-top:5px; font-size:14px; font-weight:normal; }
.sitemap > ul > li > a > span br { display:none; }

.sitemap > ul ul li { margin-bottom:12px; text-align:left; }
.sitemap > ul ul li a { font-size:14px; color:#fff; }
.sitemap > ul ul li a:hover { border-bottom:1px solid #bfbfbf; }
.sitemap p.btn_close { position:absolute; right:5px; top:-35px; }
.sitemap p.btn_close a { display:block; width:24px; height:24px; transition:transform 1s; -webkit-transition:-webkit-transform 1s; }
.sitemap p.btn_close a:hover { transform:rotate(180deg); -webkit-transform:rotate(180deg); }
/* 사이트맵 end */

@media screen and (max-width:1350px) {
	.portfolio_popup { margin-left:-45%; width:90%; max-width:100%; }
}

@media screen and (max-width:1250px) {
	#header ul.utilmenu { right:20px; }
}

@media screen and (max-width:1220px) { /* section I */
	#header div.inner_header { width:100%; }
	#header h1 { padding:22px 0 0 20px; }
	#header #gnb { left:22%; }
	#header ul.utilmenu { top:17px; }
	#header ul.utilmenu li { float:none; margin-bottom:10px; }

	#navi div.inner_navi { width:100%; }

	#footer div.inner_footer { width:100%; }
	#footer p.addr { left:25%; }
	#footer p.info { left:50%; }

	#top { left:inherit; margin-left:0; right:15px; }

	#container div.portfolio_wrap { width:100%; margin-left:-49.5%; }
	#container div.portfolio_wrap div.grid { width:32%; margin:20px 0.5%; }
}

@media screen and (max-width:1024px) { /* section II */
	#header #gnb > li { margin-right:50px; }
	#header div.submenu2 { left:51px; }
	#header div.submenu5 { left:428px; }
}

@media screen and (max-width:900px) {
	#header #gnb { left:26%; }
	#header #gnb > li { margin-right:5.5%; }
	#header div.submenu2 { left:5.5%; }
	#header div.submenu5 { left:54.5%; }

	/* 사이트맵 */
	.sitemap { width:96%; margin-left:-48%; }
	/* 사이트맵 end */
}

@media screen and (max-width:860px) {
	#header ul.utilmenu { display:none; }
}

@media screen and (max-width:800px) {
	#footer { height:inherit; padding:50px 0 100px 0; }
	#footer h2 { margin-bottom:40px; }
	#footer p.addr { position:static; margin:0 0 50px 20px; }
	#footer p.info { position:static; margin:0 0 40px 20px; }
	#footer p.copy { position:static; margin-left:20px; }
	#footer p.copy img.copy_img1 { display:none; }
	#footer p.copy img.copy_img2 { display:block; width:169px; }
	#footer ul.foot_item { top:inherit; bottom:0; }

	/* 포트폴리오 */
	#container div.portfolio_wrap { width:96%; margin-left:-48%; }
	#container div.portfolio_wrap div.grid { width:49%; margin:20px 0.5%; }

	.mfp-title { font-size:24px; }
	.mfp-alt { font-size:13px; }
	/* 포트폴리오 end */
}

@media screen and (max-width:768px) {
	.sitemap > ul > li > a { font-size:16px; }
	.sitemap > ul > li > a > span br { display:block; }
	.sitemap > ul ul li a { font-size:13px; }
}

@media screen and (max-width:760px) {
	#header #gnb { left:28%; }
	#header #gnb > li { margin-right:3%; }
	#header div.submenu2 { left:3%; }
	#header div.submenu5 { left:44.5%; }
}

@media screen and (min-width:641px) {
	div.m_menu_wrap { display:none !important; }
	div.m_dimm { display:none !important; }
}

@media screen and (max-width:640px) { /* section III */
	.w_pic { display:none; }
	.m_pic { display:block; }

	#header { height:122px; }
	#header h1 { padding:20px; }
	#header #gnb { position:static; width:100%; border-top:1px solid #d0d0d0; border-bottom:1px solid #1e5cc1; background:#fff; }
	#header #gnb:after { content:""; display:block; clear:both; }
	#header #gnb > li { margin-right:0; width:19.89999999999%; }
	#header #gnb > li > a { display:block; border-right:1px solid #d0d0d0; background:#fff; }
	#header #gnb > li.last > a { border-right:0; }
	#header #gnb > li > a img { width:88px; margin:0 auto; }
	#header div.submenu { display:none !important; }

	#header p.btn_menu_toggle { display:block; }
	#header p.btn_menu_toggle a.on { display:block; transition:transform 500ms; -webkit-transition:transform 500ms; }
	#header p.btn_menu_toggle a.on:hover { transform:rotate(180deg); }

	#navi { height:102px; }
	#navi div.inner_navi li { width:50%; }

	div.m_menu_wrap { position:fixed; left:0; top:0; width:100%; height:100%; background:#3d72ca; z-index:9998; display:none; overflow-y:auto; }
	div.m_menu_wrap > ul { padding-top:123px; }
	div.m_menu_wrap > ul > li { position:relative; }
	div.m_menu_wrap > ul > li > a { display:block; padding-left:15px; height:60px; line-height:60px; width:100%; font-size:15px; color:#fefefe; border-bottom:2px solid #2652b5; border-top:2px solid #5d8ed7; }
	div.m_menu_wrap > ul > li > a span { font-size:14px; color:#fefefe; }
	div.m_menu_wrap span.btn_arrow { position:absolute; right:10px; top:12px; width:40px; cursor:pointer; }
	div.m_menu_wrap > ul ul { padding:10px 0; background:#1c468d url('../img/common/nav_sub_bg.jpg') left top repeat-x; border-bottom:2px solid #2652b5; display:none; }
	div.m_menu_wrap > ul ul li { padding:10px 15px; }
	div.m_menu_wrap > ul ul a { display:block; font-size:13px; color:#fefefe; }

	#footer { height:inherit; padding:50px 0 150px 0; }

	#top { right:2%; }

	/* 포트폴리오 */
	#container div.portfolio_wrap { width:96%; }
	#container div.portfolio_wrap div.grid { margin-bottom:20px; width:100%; }

	.mfp-title { float:none; width:100%; padding-bottom:0; font-size:16px; }
	.mfp-alt { float:none; width:100%; padding-top:0 !important; font-size:12px; }

	.portfolio_popup div.portfolio_content p.tit { float:none; width:100%; }
	.portfolio_popup div.portfolio_content p { float:none; width:100%; padding:0; }
	/* 포트폴리오 end */

	/* 사이트맵 */
	div.sitemap { display:none !important; }
	div.sitemap_dimm { display:none !important; }
	/* 사이트맵 end */
}

@media screen and (max-width:480px) { /* section IV */
	#header h1 { padding:15px; width:120px; }
	#header p.btn_menu_toggle { width:48px; right:10px; }

	#header { height:86px; }
	#header #gnb > li > a img { width:58px; }

	div.m_menu_wrap > ul { padding-top:87px; }
	div.m_menu_wrap > ul > li > a { height:50px; line-height:50px; }
	div.m_menu_wrap > ul > li > a span { font-size:12px; }
	div.m_menu_wrap > ul ul li { padding:7px 15px; }
	div.m_menu_wrap span.btn_arrow { width:34px; top:10px; }
}

@media screen and (max-width:400px) {
	#footer p.addr { margin:0 0 30px 20px; }
	#footer p.info { margin:0 0 30px 20px; }
	#footer ul.foot_item { position:static; margin:0 0 30px 10px; }
}