﻿/*** 헤더 시작 ***/
/*#header { display:block; !*position:fixed; *!top:0; left:0; width: 100%; margin:0 auto; background: #fff; z-index: 100; border-bottom: 1px solid #f1f1f1; }*/
#header { position:fixed; height:46px; top:0; left:0; width: 100%; margin:0 auto; background: #fff; z-index: 98; border-bottom: 1px solid #f1f1f1; transform: translate3d(0,0,0); transition: all 0.2s;}
#header.hide_h { top:0; left:0; width: 100%; margin:0 auto; background: #fff; z-index: 98; border-bottom: 1px solid #f1f1f1; transform: translate3d(0,-51px,0); transition: all 0.2s;}
/*#sidebar { z-index: 100; transform: translate3d(-270px,0,0); transition: all 0.2s; }
#sidebar.open { overflow-y: auto; transform: translate3d(0,0,0); transition: all 0.2s; }*/
#header .header-wrap { margin: 0 auto; line-height: 90px; font-size: 1.5em; font-weight: normal; position: relative; padding: 0; }
#header .header-wrap:after { content: ''; display: block; clear: both; }+
#header .header-wrap #logo { float: left; padding: 0; margin: 0; text-align: left; font-size: 35px; font-weight: 300; color: #fff; line-height:90px; padding:0 40px;}
/*#header .header-wrap #logo img { width: 22px; left: 100px;top: 8px; }*/
#header .header-wrap #logo .title { position: fixed; color: #555; line-height: 23px; font-size: 14px; font-weight: 700; top: 10px; left: 50%; white-space: nowrap; text-align: center;
	-webkit-transform: translate(-50%); -ms-transform: translate(-50%); -moz-transform: translate(-50%); -o-transform: translate(-50%); transform: translate(-50%); }
#header .header-wrap #logo .title img { float: left; margin-top: 2px; }
#header .header-wrap #logo .title div { display: inline-block; margin-left: 5px; letter-spacing: -0.1em; }
#header .header-wrap .header_bar { float:right; display:flex; justify-content:right;}
#header .header-wrap .header_bar h1,
#header .header-wrap .header_bar h2,
#header .header-wrap .header_bar h3,
#header .header-wrap .header_bar h4,
#header .header-wrap .header_bar h5 { vertical-align:middle; line-height:90px; }
#header .header-wrap .header_bar:after { content: ''; display: block; clear: both; }
#header .btn_sidebar { display:block; position:absolute; left:20px; top:12px; width:20px; height:20px; }
#header .btn_sidebar span {position:absolute; top:50%; display:block; width:100%; height:2px; background:#444; transition: 0.5s;}
#header .btn_sidebar span:before {transform:translateY(-7px); content:''; display:block; width:100%; height:2px; background:#444;}
#header .btn_sidebar span:after {transform:translateY(5px); content:''; display:block; width:100%; height:2px; background:#444;}
#header .btn_sidebar.on span { transform:rotate(135deg); }
#header .btn_sidebar.on span:before { display:none; }
#header .btn_sidebar.on span:after { transform:rotate(90deg); }
#header .btn_top_search {display:block; position:absolute; right:20px; top:13px; width:20px; height:20px; background:url(/assets/img/icon_top_search.png) 0 0 no-repeat; background-size:100% 100%;}
.sidebar_back { display:none; background:#000; opacity:0.5; position:fixed; z-index:110; width:100%; height:100%; }
.nav_top #header .header-wrap { padding:0; }
.nav_top #header .header-wrap #logo { float:none; }
.tray_control { display:none; }
/*** 헤더 끝 ***/

/*** 사이드바 시작 ***/
#sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 999; width: 270px; padding:0 0 20px 0; background: #fff; overflow-y: auto; }
#sidebar > ul {}
#sidebar > ul > li { position: relative; font-size: 12px; border-bottom:1px solid #eee; }
#sidebar > ul > li > a { position: relative; line-height: 47px; padding:0 20px; vertical-align: middle; color: #4c9bfb; display: block; }
#sidebar > ul > li > a > span { position: relative; z-index: 4; }
#sidebar > ul > li.single > a:after { background:none; }
#sidebar > ul > li > a:after { position: absolute; right:20px; top: 13px; background: url(/assets/img/icon_navright.png) center center no-repeat; content: ''; width: 15px; height: 15px; display: block; z-index: 4; transition: transform 0.4s ease-in-out; }
#sidebar > ul > li > a.on { color: #4c9bfb; font-weight: 700; transition: background 0.4s ease-in-out; }
#sidebar > ul > li > a.on:after { transform: rotate(90deg); }
/* 백그라운드 그라데이션 hack */
#sidebar > ul > li > ul { display: none; margin-bottom:10px; }
#sidebar > ul > li > ul > li { font-size: 12px; }
#sidebar > ul > li > ul > li a { display: block; padding:0 20px 0 40px; line-height: 30px; font-weight: 300; background:url(/assets/img/sidebar_under.png) 29px 10px no-repeat; color: #555; }
#sidebar_overlay { position: fixed; width: 100%; height: 100%; background: rgba(220, 220, 220, 0.7); z-index: 103; display: none; top: 0;}
#sidebar .side_policy {position:absolute; left:0; bottom:0; width:100%; border-top:1px solid #eee; line-height:47px;}
#sidebar .side_policy:after {clear:both; content:''; display:block;}
#sidebar .side_policy div {float:left; width:50%; text-align:center;}
#sidebar .side_policy div:nth-child(1) {border-right:1px solid #eee;}
#sidebar .side_policy div a {font-weight: 300; color: #555; font-size:12px;}

.nav_top #sidebar { position:static; width:100%; padding: 0; height:89px; border-right: 0; border-left: 0; border-bottom:0; overflow: visible; }
.nav_top .container { padding: 110px 20px 50px 20px !important; }
.nav_top #sidebar > ul { text-align: left; padding:0;}
.nav_top #sidebar > ul > li { display: inline-block; position: relative; margin: 0; height:89px; }
.nav_top #sidebar > ul > li > a {padding:0 15px 0 15px; border-bottom: 0; margin-bottom: 0; text-align: left; font-size:16px; color:#777; line-height:89px; vertical-align:middle;}
.nav_top #sidebar > ul > li > a:hover {font-weight:400; color:#000;}
.nav_top #sidebar > ul > li > a:after {display:none;}
.nav_top #sidebar > ul > li > a:before {display:none;}
.nav_top #sidebar > ul > li > a.on {background:transparent; font-weight:400; color:#000;}
.nav_top #sidebar > ul > li > ul { display: none; margin-top: 0; }
.nav_top #sidebar > ul > li > ul > li { text-align: left; }
.nav_top #sidebar > ul > li:after {display:none;}
.nav_top #sidebar > ul > li:hover:after {display:none;}
.nav_top #sidebar > ul > li:hover > ul { display: block; left: 50%; margin-left: -75px; width:150px; position: absolute; padding: 10px 0; border: 1px solid #e9e9e9; background: #fff; z-index: 99; }
.nav_top #sidebar > ul > li > ul > li a {border:0; text-align:center; padding:0; margin:0;}
.nav_top #header .btn_sidebar {display:none;}
.nav_right #sidebar { right: 0; left: auto; border-left: 1px solid #e9e9e9; border-right: 0; }
.nav_right .container { padding: 110px 280px 100px 50px }
/*** 사이드바 끝 ***/

/*** 컨테이너 시작 ***/
.container { width:1000px; padding: 0; margin: 0 auto; }
.container.full_size { width: 100%; padding: 110px 50px 100px 330px; }
.container.grey_bg {background:#f3f7f8;}
/*** 컨테이너 끝 ***/

/*** 푸터 시작 ***/
#footer { position: fixed; bottom: 0; left: 0; z-index:100; width: 100%; height: 50px; background: #fff; border-top: 1px solid #e0dede; padding: 15px 30px 15px 30px; margin-top: 15px; }
#footer .footer-wrap { width: 100%; margin: 0 auto; }
#footer .footer-wrap .b_logo { display: inline-block; vertical-align: middle; margin-right: 20px; }
#footer .footer-wrap .b_logo img { width: 70px; }
#footer .footer-wrap .copyright { display: inline-block; color: #555; }
#footer.footer_right { text-align: right; }
#footer.footer_center { text-align: center; }
/*** 푸터 끝 ***/


/* 모바일 */
@media only screen and (min-width:320px) and (max-width:1280px) {
	#header .header-wrap #logo { float:none; line-height:40px; text-align:center; padding:0 10px;}
	#header .header-wrap { width: 100%; line-height:40px; }
	#header #gnb-menu { width: 100%; }
	.intro_text { display:none; }
	.nav_top #sidebar { height:40px; }
	.nav_top #sidebar > ul { text-align:center; }
	.nav_top #sidebar > ul > li { height:40px; }
	.nav_top #sidebar > ul > li > a { line-height:40px; padding:0 5px; font-size:13px; }
	/*#sidebar {top:0; bottom:0; transform: translate3d(-250px,0,0);}*/
	#sidebar { z-index: 104; transform: translate3d(-270px,0,0); transition: all 0.2s; }
	#sidebar.open { overflow-y: auto; transform: translate3d(0,0,0); transition: all 0.2s; }
	.container { width: 100%; padding:0; margin-top: 46px }
	#footer { padding:10px 10px; font-size:13px; height:auto; }
	#footer .footer-wrap { width: 100%; }
}

/* 스크롤바
*::-webkit-scrollbar { width:4px; height:5px; }
*::-webkit-scrollbar-button:start:decrement, *::-webkit-scrollbar-button:end:increment {display:block; width:4px; height:1px; background:rgba(0,0,0,.05); }
*::-webkit-scrollbar-track { background:rgba(0,0,0, 0.9); }
*::-webkit-scrollbar-thumb { background:rgba(255,255,255, 0.9); }
*/
/* 셀렉트 화살표적용 */
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(/assets/img/select_arw.png) !important; background-position :right 12px top 50% !important; background-repeat:no-repeat !important;}
select::-ms-expand { display: none; }
/* IE 10, 11의 네이티브 화살표 숨기기 */