/* 공통 프레임 - start */
/* container */
.container {
    width:100%;
    height:100vh;
}

/* content */
.content_wrap {
	margin:0;
	width:82%;
	/*width: 100%;*/
	height:fit-content;
	float:right;
}
.content > h2 {
	display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-bottom: 15px;
    padding-left: 30px;
    font-size: 18px;
    color: #00315c;
    font-weight: normal;
    border-bottom: 1px solid #ddd;
    background: url(/img/icon_tit.jpg) no-repeat 0 50%;
    box-sizing: border-box;
}
.content > h2 select {
	color: white;
    background: #00315c;
}
.loc_content {
	margin-top:57px;
	padding:15px;
}
.input_calendar {
	width:180px !important;
	height:32px;
	text-align:center;
}
.ui-datepicker {
	z-index:9999 !important;
}
.stop-dragging {
	-ms-user-select: none; 
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* 페이징버튼 */
div.page_wrap {
    width:100%;
	text-align: center;
	margin-top:20px;
}
div.page_wrap ul {
    display:inline-block;
}
div.page_wrap ul li {
	margin: 15px 5px;
    display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #00315c;
	border: 1px solid #cbced0;
	box-sizing: border-box;
	cursor: pointer;
}
div.page_wrap ul li:hover,
div.page_wrap ul li.active {
    color: #fff;
	background-color: #3b4467;
}

/* 스크롤탑 버튼 */
.scrollTop {
	position:fixed;
	right:40px;
	bottom:40px;
	width:40px;
	height:40px;
	color:#fff;
	font-size:28px;
	font-weight:bold;
	text-align:center;
	line-height:40px;
	background:#00315c;
	border-radius:3px;
	cursor:pointer;
	z-index:1;
}

/* highlight.js */
.coffeescript .javascript, .javascript .xml, .tex .hljs-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .hljs-cdata, .xml .php, .php .xml {
    opacity: 1 !important;
}
@media screen and (max-width: 1300px){
	.content_wrap {
		width:76%;
	}
}
@media screen and (max-width: 999px){
	.content_wrap {
		margin-top:65px;
		width:100%;
	}
	.loc_content {
		margin-top:46px;
	}
}
@media screen and (max-width: 768px){
	.content h2 {
		height: 40px;
    	line-height: 40px;
	}
}
/* 공통 프레임 - end */



/* header.html - start */
/* header */
.header_wrap {
	display:flex;
	flex-direction:column;
	align-items:center;
	position:fixed;
	width:18%;
	height:100%;
	background:#00315c;
	z-index:2;
}
.header_wrap .header {
	width:100%;
	height:fit-content;
}
.header_wrap .header .logo {
	padding-top:50px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
}
.header_wrap .header .logo h1 {
	font-size:40px;
}
.header_wrap .header .logo h2 {
	font-size:27px;
}
.header_wrap .header .logo_f_bar {
	margin:20px 0;
	text-align:center;
}
.header_wrap .header .logo_f_bar img {
	width:166px;
}
.header_wrap .header_bot {
	width:100%;
	height:fit-content;
	overflow:auto;
}

/* search bar */
.search_wrap {
	padding:20px 0;
	width:100%;
	height:auto;
	text-align:center;
}
.search_wrap .search_bar {
    padding-left:45px;
    width:90%;
    height:40px;
    color:#fff;
    font-size:14px;
    background:url(/img/i_search.png) no-repeat 10px 50%;
    border:2px solid #fff;
    border-radius:5px;
}

/* login bar */
.login_wrap {
	display:flex;
	width:100%;
	height:auto;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
	background:#fff;
	cursor:pointer;
	text-align:left;
}
.login_wrap:hover .login {
	margin:0;
	width:90%;
}
.login_wrap_af:hover .login {
	margin:0;
	width:calc(100% - 74px) !important;
	background:#32b750;
}
.login_wrap_af:hover .login div span:first-child {
	display:none;
}
.login_wrap_af:hover .login div span:last-child {
	display:block;
}
.login_wrap_af:hover .logout {
	margin:0;
	width:80px;
}
.login_wrap_af:hover .logout div.thumb img {
	display:block;
}
.login_wrap .login {
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0;
	width:100%;
	height:74px;
	line-height:74px;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	background:#00315c;
	transition:all 0.2s linear;
}
.login_wrap .login div {
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0;
	padding:0 10px;
}
.login_wrap .login div span:last-child {
	display:none;
}

.login_wrap .logout {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	margin:0;
	width:0;
	height:74px;
	line-height:74px;
	transition:all 0.2s linear;
}
.login_wrap .logout div.thumb {
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	width:calc(100% - 2px);
	height:100%;
	background:#eea337;
	transition:all 0.3s linear;
}
.login_wrap .logout div.thumb img {
	display:none;
	width:26px;
	height:28px;
}

/* gnb */
ul.gnb {
	width:100%;
	height:auto;
	background:#fff;
}
ul.gnb li {
	margin:0;
	width:100%;
	height:auto;
	text-align:center;
	border-bottom:2px solid #fff;
	background:#00315c;
	transition:all 0.2s linear;
}
ul.gnb li:hover {
	margin:0;
	width:90%;
}
ul.gnb li.gnb_mypage {
	display:none;
}
ul.gnb li a {
	display:block;
	padding:20px 0;
	width:100%;
	height:100%;
	color:#fff;
	font-size:24px;
	font-weight:bold;
}

/* m_header */
.m_header_wrap {
	display:none;
    position:fixed;
	width:100%;
	height:65px;
    background:#00315c;
    z-index:1;
}
.m_header_wrap .m_logo {
	cursor:pointer;
}
.m_header_wrap .m_menu,
.m_header_wrap .m_search {
	margin:0;
	width:60px;
	height:auto;
	text-align:center;
	cursor:pointer;
}

/* m_search */
.m_search_wrap {
	display:none;
	flex-direction:column;
	align-items:center;
	position:fixed;
	width:50%;
	height:100vh;
	background:#00315c;
	z-index:2;
}
.m_search_wrap .m_search_box {
	display: flex;
	align-items: center;
	justify-content:center;
	margin-top:15px;
	width: 100%;
	height: 52px;
}
.m_search_wrap .m_search_box {
	text-align:center;
}
.m_search_wrap .m_search_box .search_bar {
    padding-left:45px;
    width:90%;
    height:40px;
    color:#fff;
    font-size:14px;
    background:url(/img/i_search.png) no-repeat 10px 50%;
    border:2px solid #fff;
    border-radius:5px;
}

/* lay, bg */
#mlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
#mlay .mbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    filter: alpha(opacity = 50);
}

/* 반응형 */
@media screen and (max-width: 1300px){
	.header_wrap {
		width:24%;
	}
}
@media screen and (max-width: 999px){
	.header_wrap {
		width:50%;
		height:100vh;
		top:0;
		right:0;
		left:-150%;
		z-index:999;
		transition:.5s;
	}
	
	.search_wrap {
		display:none;
	}
	
	.login_wrap .login {
		margin:0;
		width:100%;
		height:60px;
		line-height:60px;
		font-size:18px;
	}
	.login_wrap:hover .login {
		width:100%;
	}
	.login_wrap .logout {
		height:60px;
		line-height:60px;
	}
	.login_wrap:hover .logout {
		width:0;
	}
	.login_wrap_af .login,
	.login_wrap_af:hover .login {
		margin:0;
		width:calc(100% - 60px) !important;
		background:#32b750;
	}
	.login_wrap_af .login div span:first-child,
	.login_wrap_af:hover .login div span:first-child {
		display:none;
	}
	.login_wrap_af .login div span:last-child,
	.login_wrap_af:hover .login div span:last-child {
		display:block;
	}
	.login_wrap_af .logout div.thumb img {
		display:block;
	}
	.login_wrap_af .logout,
	.login_wrap_af:hover .logout {
		width:60px;
		height:60px;
		line-height:60px;
	}
	
	ul.gnb li:hover {
		margin:0;
		width:100%;
	}
	ul.gnb li a {
		font-size:18px;
	}
	
	.m_header_wrap {
		display:flex;
	    align-items:center;
	    justify-content:space-around;
	}
	
	.m_search_wrap {
		display:flex;
		top:0;
		right:-150%;
		left:0;
		z-index:999;
		transition:.5s;
	}
}
@media screen and (max-width: 500px){
	.header_wrap .header .logo h1 {
		font-size:28px;
	}
	.header_wrap .header .logo h2 {
		font-size:19px;
	}
	.header_wrap .header .logo_f_bar img {
		width:120px;
		height:2px;
	}
	
	.login_wrap .login {
		font-size:14px;
	}
	
	ul.gnb li a {
		font-size:14px;
	}
}
/* header.html - end */



/* footer.html - start */
.footer {
    width:1000px;
    height:135px;
    margin:40px auto 0;
}
.footer .f_logo {
    float:left;
    width:60px;
    height:100%;
    padding-top:30px;
    box-sizing:border-box;
}
.footer ul {
    float:right;
    width:900px;
    height:auto;
    margin-top:35px;
}
.footer ul li {
    float:left;
    width:auto;
    line-height:25px;
    margin-right:20px;
    font-size:14px;
    color:#000;
}
.copyright {
    width:100%;
    height:auto;
    padding:0 0 35px;
    margin:auto;
    border-top:1px solid #eee;
}
.copyright p {
    display:block;
    width:1000px;
    height:auto;
    margin:0 auto;
    padding-top:15px;
    line-height:18px;
    font-size:13px;
    color:#c4c4c4;
    background:url(/img/img_footer_bar.jpg) no-repeat 0 0;
    box-sizing:border-box;
}
@media screen and (max-width: 1300px){
	.footer {
	    display:inline-block;
	    width:100%;
	    height:auto;
	    padding:0 3% 20px;
	    box-sizing:border-box;
	}
	.footer .f_logo {
	    float:none;
	    height:72px;
	    padding-top:0;
	    margin:20px auto;
	}
	.footer ul {
	    margin-top:0;
	    width:100%;
	}
	.copyright p {
	    width:100%;
	    padding:15px 3% 0;
	}
}
/* footer.html - end */



/* location.html - start */
.location {
	position:fixed;
    width:100%;
    height:auto;
    border-bottom:1px solid #eee;
    background:#fff;
    z-index:1;
}
.location ul {
	padding-left:30px;
    width:auto;
    height:56px;
}
.location ul li {
	padding:10px;
    float:left;
    width:auto;
    line-height:36px;
    margin-right:20px;
    font-size:18px;
    color:#000;
}
@media screen and (max-width: 999px){
	.location ul {
		padding-left:15px;
		height:46px;
	}
	.location ul li {
		padding:5px;
		line-height:36px;
	    margin-right:15px;
	    font-size:14px;
	}
	.location ul li a img {
		padding-top:4px;
		width:24px;
		height:24px;
	}
}
/* location.html - end */



/* captcha.html - start */
#modal_wrap_captcha {
	width: 100vw;
	height:100vh;
	position: absolute;
	z-index: 999;
	background: rgba(0, 0, 0, 0.6);
	align-items:center;
	justify-content:center;
}
#modal_captcha {
	width: 500px;
	height: auto;
	position: relative;
	z-index: 999;
	border-radius: 5px;
	background: white;
	transition:width 0.2s;
}
#modal_captcha .write_wrap {
	width: 100%;
	margin-bottom: 30px;
}
#modal_captcha .captcha_wrap {
	padding:10px 10px 0 10px;
	width:auto;
	height:auto;
	text-align:center;
}
#modal_captcha .captcha_wrap > img {
	width:100%;
	border:1px solid #ddd;
	border-bottom:0;
}
#modal_captcha .captcha_wrap .captcha_text {
	display:flex;
	padding-bottom:30px;
	width:100%;
	height:auto;
	border-bottom:1px solid #ddd;
}
#modal_captcha .captcha_wrap .captcha_text > input {
	width:calc(100% - 40px);
	height:40px;
	font-size:16px;
}
#modal_captcha .captcha_wrap .captcha_text > div {
	width: 38px;
    height: 38px;
    background-image: url(/img/reload.png);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 8px 8px;
    border: 1px solid #ddd;
    cursor:pointer;
}
#modal_captcha .but {
	width: 90px;
	height: 35px;
	line-height: 35px;
	box-sizing: border-box;
	margin: 0 auto;
	background: #181e2a;
	color: white;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
	margin-top: 30px;
	font-size: 13px;
}
#modal_captcha .but:hover {
	background: #484451;
}
@media screen and (max-width:600px) {
    #modal_captcha {
        width: 90%;
        transition:width 0.2s;
    }
}
/* captcha.html - end */



/* 데이터테이블 - start*/
table.dataTable {
	width:100% !important;
}
table.dataTable th,
table.dataTable td {
    padding:8px 5px !important;
    text-align:center;
    white-space:nowrap;
    box-sizing:border-box;
    vertical-align:middle;
}

/* 데이터테이블 상세보기 - child */
table.dataTable>tbody>tr.child ul.dtr-details {
	width:100%;
	overflow:hidden;
}
table.dataTable>tbody>tr.child ul.dtr-details>li {
	padding:8px 0 !important;
	border:none !important;
	text-align:left;
	float:left;
	width:50%;
}
table.dataTable td.child {
	padding:10px 15px;
	white-space:normal;
}
table.dataTable>tbody>tr.child span.dtr-title,
table.dataTable>tbody>tr.child span.dtr-data {
	display:inline-block;
	vertical-align:middle;
}
table.dataTable>tbody>tr.child span.dtr-title {
	width:75px;
	word-break: break-all;
}
table.dataTable>tbody>tr.child span.dtr-data {
	width:calc(100% - 95px);
	word-break: break-all;
	margin-left:15px;
}
table.dataTable>tbody>tr.child span.dtr-data a.link {
	color:#916c46;
	font-weight:bold;
}
table.dataTable.dtr-column>tbody>tr>td.control {
	text-indent:-9999px;
}
table.dataTable.dtr-column>tbody>tr>td.control:before, 
table.dataTable.dtr-column>tbody>tr>th.control:before {
	line-height:16px !important;
	left:calc(50% - 10px) !important;
	top:auto !important;
	margin:0 !important;
}
.dataTables_filter {
	display:none;
}

/* 데이터테이블 페이징 버튼 */
.dataTables_paginate {
	overflow:hidden;
	width:100%;
	text-align:center;
}
.paginate_button {
	display:inline-block;
	height:25px;
	width:30px;
	height:30px;
	margin:15px 5px;
	line-height:30px;
	color:#00315c;
	border:1px solid #cbced0;
	box-sizing:border-box;
	cursor:pointer;
}
.paginate_button.next,
.paginate_button.last,
.paginate_button.previous,
.paginate_button.first {
	width:auto;
	padding:0 10px;
}
.paginate_button:hover,
.paginate_button.current {
	color:#fff;
	background-color:#3b4467;
}
@media screen and (max-width:768px) {
	table.dataTable>tbody>tr.child ul.dtr-details>li {
		width:100%;
	}
}
/* 데이터테이블 - end*/

/* 프린트 */
@media only print {
	.header_wrap,
	.location,
	.footer,
	.copyright,
	.scrollTop {
		display:none;
	}
	.loc_content {
		margin:0;
	}
	.content_wrap {
		width:100%;
	}
}