@charset "utf-8";

/* Layout */
#wrap{min-width:1580px;}
#container{/* position:relative;z-index:20; */padding-left:270px;padding-top:70px;}
.contents-head{position:fixed;top:0;left:270px;right:0;z-index:60;height:70px;padding:17px 40px;background: #f3f6f9;}
.contents-body{min-height:calc(100vh - 116px);padding:30px 35px 20px;background:#fff;border-radius:15px;position:relative;}

/* header */
#header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	min-width: 1580px;
	height: 70px;
	z-index: 30;
	background: #ebf3fc;
	padding: 0 35px;
}
#header .container{display:flex;align-items:center;height:100%;}
#header .logo,
#header .header-right{flex:0 0 auto;}
#header .logo img,
#header .logo span{vertical-align:middle;}
#header .logo img{margin-right:20px;max-height:40px;}
#header .logo span{color:#001a3d;font-size:22px;font-weight:600;text-shadow:2px 2px 0 rgba(72,73,73,.23);letter-spacing:-.065em;}
#header nav{flex:1 1 auto;}
#header .gnb{text-align:center !important;}
#header .gnb li{display:inline-block;padding:0 25px;position:relative;}
#header .gnb li + li::before{content:"";position:absolute;top:50%;left:-2px;margin-top:-2px;width:5px;height:5px;border-radius:50%;background:#6c7fa6;}
#header .gnb li a{display:inline-block;color:#17316c;font-size:18px;font-weight:600;position:relative;}
#header .gnb li a::after{content:"";position:absolute;bottom:-20px;left:0;width:0;height:7px;background:currentColor;transition:.3s width;}
#header .gnb li.on a::after,
#header .gnb li a:hover::after{width:100%;}
#header .header-right{margin-left:auto;}
#header .header-util,
#header .header-menu{display:inline-block;vertical-align:middle;}
#header .header-util{display:inline-block;background:#fff;border-radius:22px;padding:4px 7px 4px 30px;vertical-align:middle;}
#header .header-util li{display:inline-block;color:#6e7273;font-size:13px;vertical-align:middle;}
#header .header-util li + li{margin-left:6px;}
#header .header-util .logout button{background:#6e8cab;width:38px;height:38px;border-radius:50%;background:#deebf9;}
#header .header-util .logout i{color:#1982ee;font-size:18px;}
#header .header-util .greeting{margin-right:10px;color:#196fc6;font-size:16px;}
#header .header-util .greeting strong{font-weight:600;}
#header .header-button{display:inline-block;margin-left:10px;vertical-align:middle;}
#header .header-button .modify{background:#05b0d1;margin-right:5px;}
#header .header-button a,
#header .header-button button{width:46px;height:46px;border-radius:50%;color:#fff;font-size:20px;background:#3a95f2;vertical-align:middle;}
#header .header-button a{display:inline-block;line-height:46px;text-align:center;}
#header .header-menu{margin-left:10px;}
#header .header-menu li{display:inline-block;vertical-align:middle;}
#header .header-menu li + li{margin-left:7px;}
#header .header-menu li a {
	display: inline-block;
	height: 47px;
	border: 2px solid #4a9cf0;
	border-radius: 23px;
	padding: 0 30px;
	color: #1982ee;
	font-size: 16px;
	font-weight: 600;
	line-height: 43px;
}
#header .header-menu li i{font-size:110%;margin-right:7px;}
#header .header-menu li.on a{background:#4a9cf0;color:#fff;}

/* footer */
#footer{position: relative; height: 46px; padding:14px 0; padding-left: 270px; }
#footer .copyright{padding:0 35px;color: #214c97; font-size: 12px; font-weight: 500; text-align: center}

/* snb */
#snb{position: fixed;top: 70px;left: 0;bottom: 0;z-index: 10;width: 270px;background: #17316c;padding-bottom:40px;}
#snb .snb-head {
	height: 92px;
	display: table;
	width: 100%;
	table-layout: fixed;
	background: url("../images/common/bg_snb.jpg") no-repeat 50% 50%;
	color: #fff;
	font-size: 22px;
	font-weight: 500;
	border-bottom: 1px solid #101833;
}
#snb .snb-head .head-wrap{display:table-cell;vertical-align:middle;padding-left:36px;}
#snb .snb-head i,
#snb .snb-head span{vertical-align:middle;}
#snb .snb-head i{margin-right:12px;font-size:128%;}
/* #snb .snb-menu{border-top:1px solid #4b628a;} */
#snb a{display:block;}
#snb .link-depth-1 {
	position: relative;
	display: block;
	height: 50px;
	padding-left: 40px;
	border-bottom: 1px solid #4b628a;
	color: #cad7f5;
	font-size: 16px;
	outline: none;
	line-height: 50px;
	font-weight: 500;
}
#snb .link-depth-1:hover{color:#fff;background:#0887f2;}
#snb .snb-menu > li.on .link-depth-1{color:#fff;font-weight:bold;background:linear-gradient(to left, #00daae 0%, #0a78ff 100%);}
#snb .snb-menu > li.on .link-depth-1::before{background:#cad7f5;}
#snb .has-sub .link-depth-1::after{content:"\f0fe";position:absolute;top:50%;right:30px;font-family:"Font Awesome 5 Pro";font-weight:bold;transform:translateY(-50%);}
#snb .has-sub.on .link-depth-1::after{content:"\f146";}

#snb .depth-2{display:none;background:#2c4889;padding:14px 10px 14px 40px;}
#snb .has-sub.on > .depth-2{display:block;}
#snb .depth-2 > li + li{margin-top:3px;}
#snb .link-depth-2{position:relative;color:rgba(212,225,248,.9);font-size:14px;font-weight:300;letter-spacing:-.02em;padding-left:12px;}
#snb .link-depth-2::before{content:"";position:absolute;top:8px;left:0;width:4px;height:4px;border-radius:50%;background:#c3d7f9;}
#snb .depth-2 > li.on .link-depth-2,
#snb .link-depth-2:hover{color:rgba(255,239,135,.9);}
#snb .depth-2 > li.on .link-depth-2::before,
#snb .link-depth-2:hover::before{background:#e3e161;}

#snb .depth-3{padding:4px 10px 4px 17px;}
#snb .depth-3 > li + li{margin-top:2px;}
#snb .link-depth-3{position:relative;color:rgba(212,225,248,.9);font-size:12px;font-weight:300;letter-spacing:-.02em;padding-left:9px;}
#snb .link-depth-3::before{content:"";position:absolute;top:7px;left:0;width:3px;height:3px;border-radius:50%;background:#c3d7f9;}
#snb .depth-3 > li.on .link-depth-3,
#snb .link-depth-3:hover{color:rgba(255,239,135,.9);}
#snb .depth-3 > li.on .link-depth-3::before,
#snb .link-depth-3:hover::before{background:#e3e161;}

/* Location */
#location{position:absolute;top:40px;right:35px;}
#location ul:after{content:'';display:block;clear:both;}
#location ul li{float:left;color:#666;font-size:13px;}
#location ul li:last-child{color:#444;font-weight:500;}
/* #location ul li.home{font-size:16px;} */
#location ul li:after{content:'>';color:#bcbcbc;margin:0 6px;font-family:serif;}
#location ul li:last-child:after{display:none;}
#location ul li a{color:inherit;}

/* 코드 */
code:not(.hljs){padding:2px 4px;font-size:90%;color:#c7254e;font-family:Consolas,"Courier New",monospace;background-color:#f9f2f4;border-radius:4px}
code.hljs{margin-bottom:30px;overflow-y:auto;max-height:420px;border: 1px solid #ccc;font-family:Consolas;font-size:12px;padding:16px;}
.highlight{position:relative;margin-top:20px;}
.example-box ~ .highlight{margin-top:-1px;}
.highlight pre{white-space:pre-wrap;margin-top:0;}
.hljs-copy{position:absolute;top:0;right:0;background:#fff;padding:5px 8px;outline:0;border:1px solid #ccc;border-bottom-left-radius:3px;color:#666;}
.hljs-copy:hover{background:#2173cf;color:#fff;border-color:#2173cf;}

/* 예시 */
.example-box{border:1px solid #ccc;padding:55px 25px 20px;position:relative;}
.example-box::before{content:"EXAMPLE";position:absolute;top:18px;left:25px;color:#959595;font-weight:bold;font-size:12px;}

/* 스크롤바 */
.simplebar-scrollbar:before{background:#66d7eb;right:3px;left:1px;}
.simplebar-scrollbar.simplebar-visible:before{opacity:.9;}

/* print */
@media print {
	body{background:transparent;}
	#wrap{min-width:initial;}
	#header,
	#footer,
	#snb,
	h2.contents-title,
	.search-box,
	.data-box,
	.table-container ~ .table-container,
	.table-header{display:none;}
	#container{padding-top:0;padding-left:0;}
	#contents{padding:0;}
	#contents .contents-wrap{border-radius:0;padding:0;}
}