@charset "utf-8";

/*클리어픽스*/
.clearfix:after { display: block; height: 0; clear: both; content: ''; }

/* 사이트 공통 스타일 */
*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { -webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 62.5%; }
html, body { width:100%; height:100%; }

/*웹 폰트*/
body { font-family:  'Noto Sans KR','애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo','맑은 고딕', 'Malgun Gothic','dotum', 'Helvetica', 'Arial', sans-serif; font-size:12px; color:#12144d; letter-spacing: -0.5px; background: #f6f7fc; }
a { text-decoration:none; color:#12144d; }
::-moz-selection {background:#004ed3; color:#FFF; text-shadow:none;}
::selection {background:#004ed3; color:#FFF; text-shadow:none;}
::-moz-selection {background:#004ed3; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#004ed3; color:#FFF; text-shadow:none;}

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo','맑은 고딕', 'Malgun Gothic','dotum', 'Helvetica', 'Arial', sans-serif; font-size:16px;color:#12144d;letter-spacing:0;outline:0; }
select { font-family:  'Noto Sans KR','dotum', 'Helvetica', 'Arial', sans-serif; font-size:16px; color:#12144d; width: 150px; height: 24px; border-radius: 2px; border-color: #e7e7e7; margin-left: 12px; outline: 0; }
input::placeholder,
textarea::placeholder { color: #9da2c7; }
textarea { white-space: pre-wrap; }

/*숨김처리*/
.blind { position:absolute; font-size:0; line-height:0; height:0; }

/*테스트*/
.testBorder { border:1px solid red !important; }
.testBg { background-color:yellow !important; }

/*클리어픽스*/
.clearFix { display:block; clear:both; font-size:0; height:0; }

/* 레이아웃 */
.container { position: relative; width: 100%; height: 100%; z-index: 998;}
.container .nav-wrap { position: fixed; z-index: 9999; left: 0; top: 0; width: 75px; height: 100%; background: #fff; border-right: 1px solid #dee3eb;}
.container .content-wrap { position: relative; width: -webkit-calc(100% - 75px); width: calc(100% - 75px); height: auto; margin-left: 75px; }

/* 레프트 네비 */
.nav-wrap .menu { text-align: center; }
.nav-wrap .menu ul li { position: relative; width: 100%; height: 70px; border-bottom:1px solid #dee3eb }
.nav-wrap .menu ul li a { width: 100%; height: 100%; display: block; padding-top: 13px; color: #12144d; font-size: 1.1rem; -webkit-transition: background .2s ease; -o-transition: background .2s ease; transition: background .2s ease; line-height: 11px;}
.nav-wrap .menu ul li a p { padding-top: 5px; }
.nav-wrap .menu ul li:not(:first-child):hover a { background: #e4e5ed; opacity: 1; }
.nav-wrap .menu ul li.home a.pc { padding-top: 24px; }
.nav-wrap .menu ul li.home a.pc img { width: 45px; height: 24px; }
.nav-wrap .menu ul li.home a.mo { display: none; }
.nav-wrap .menu ul li.home a.mo img { width: 180px; height: 33px; }
.nav-wrap .menu ul li.select a { background: #e4e5ed; }

.nav-wrap.on .all-menu { display: block; }
.nav-wrap .all-menu { display: none; position: absolute; top: 0; left: 75px; width: 200px; height: 100%; background: #fff; z-index: 9999; box-shadow: 8px 0 9px rgba(0,20,50,.15); }
.nav-wrap .all-menu ul { padding: 15px 0; border-bottom: 1px solid #e7eaf0; }
.nav-wrap .all-menu ul li a { display: block; padding: 5px 20px; color: #313262; -webkit-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; }
.nav-wrap .all-menu ul li a img { height: 12px; position: relative; top: 3px; margin-right: 3px; }
.nav-wrap .all-menu ul li a span.material-icons { position: relative; top: 3px; margin-right: 2px; font-size: 15px; }
.nav-wrap .all-menu ul li.tit a { color: #a0a4bd; }
.nav-wrap .all-menu ul li:hover a { color: #a0a4bd; }

/* 퀵메뉴 */
.top-menu { padding: 12px 25px; border-bottom: 1px solid #dee3eb; position:absolute; width:100%; z-index:999; top:0; left:0; }
.top-menu .header-menu { float: right; }
.top-menu .header-menu>li>a { display: block; height: 100%; width: 100%; text-align: center; border-radius: 3px; padding: 0 8px; transition: background .2s ease; color: #555; font-size:1.2rem}
.top-menu .header-menu>li>a:hover { background: #edf0ff; }
.top-menu .header-menu>li>a>i {margin-right: 3px; }
.top-menu .site-navigation { white-space: nowrap; display: block; color: #555; display: block; float: left; font-size:1.2rem; position: relative; }
.top-menu .site-navigation i,
.top-menu .site-navigation a { color: #999; transition: opacity .25s ease; }
.top-menu .site-navigation a { font-weight: 300; }
.top-menu .site-navigation a:hover { opacity: 0.7; }
.top-menu .site-navigation a:last-of-type { font-weight: 500; color: #12144d; }
.top-menu .site-navigation i { margin: 0 6px; opacity: 0.3; }