@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 레이아웃 css
 * date : 2019-09-25
******************************************************** */
@import url( "base.css" );
@import url( "m_board.css" );
@import url( "button.css" );
@import url( "m_menu.css" );
@import url( "font-awesome.css" );


*{box-sizing:border-box;font-size:1em}
 img{max-width:100%;}
 .equip_tbl  img { max-width:100%!important; height:auto!important; }
 .view_info .view_txt ul li.notice span { padding-right:0!important; }
.up_map .root_daum_roughmap { padding:0; }

.ctt { padding-top:50px; word-break:keep-all; position:relative; padding:30px 15px 65px;  }
.ctt h4  { font-size:23px; line-height:35px; margin-bottom:20px; font-weight:500; }
.ctt h4:before { width:26px; height:5px; display:block; content:""; background:url('/assets/image/sub/tit_bar.png') left 0 no-repeat; }
.ctt p { word-break: keep-all; }
.ctt .imgArea { margin-top:50px; }



.ctt:after { content:''; display:block; height:15px; width:100%; background:#e7ebf2; position:absolute; left:0;bottom:0; }
/* .ctt a[href^="http://"]{position:relative;padding-right:25px;display:inline-block;font-weight:300;letter-spacing:-0.08em}
.ctt a[href^="http://"]:after{position:absolute;top:5px;right:5px;content:' \f08e'  ; font-family: 'FontAwesome';}

.ctt a[href^="https://"]{position:relative;padding-right:25px;display:inline-block;font-weight:300;letter-spacing:-0.08em}
.ctt a[href^="https://"]:after{position:absolute;top:5px;right:5px;content:' \f08e'  ; font-family: 'FontAwesome';} */

.box_blue{border:1px solid #ccd0e1;border-top:2px solid #059edb;border-bottom:1px solid #a2a5b2;padding:25px 20px 25px;vertical-align:middle;margin-bottom:40px}
.box_gray{background:#f4f5f9;padding:20px;}

.hidden{font-size: 0 !important;    width: 0 !important;    height: 0 !important;    color: transparent !important;    line-height: 0 !important;position: absolute;    left: -1000px;    top: 0;    overflow: hidden;    text-indent: -30000px;}

/*float*/
.fl{float:left!important}
.fr{float:right!important}
.half{width:48%;float:left;margin-left:30px}

.third{width:30%;float:left;margin-left:35px}
.half:first-child,.third:first-child{margin-left:0}


/* Sprite Map */
.sprite {
	background:url('../image/mobile/common/sprite-map-icon.png') no-repeat;
	-webkit-background-size:300px 300px;
	background-size:300px 300px;
	display:inline-block;
	overflow:hidden;
	color:transparent;
	white-space:nowrap;
	font-size:0;
	line-height: 0;
	text-indent: -999px;
	vertical-align: middle;
}


/* Popup Window */
.window-wrap{
	background:rgba(0,0,0,.7);
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 10000
}

/* Slide Menu */
.slide-on{
	position: relative;
	overflow-x: hidden;
}
.slide{
	position: absolute;
	overflow-y: auto;
	top: 0;
	width: 100%;
	height: 100%;
	background:#fff;
}
.slider-group{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.slide-leftmenu{
	left: 0;
}
.slide-rightmenu{
	right: 0;
}
.window-wrap, .slide{
	display:none;
}

/* --------------------------------------------
 * sub layout
/* ------------------------------------------ */

#sub-wrap { min-height:300px; padding:0px; }

/* placeholder */
::placeholder {  color: #80acc3;  opacity: 1; /* Firefox */}
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #80acc3;}
::-ms-input-placeholder { /* Microsoft Edge */ color: #80acc3;}


/* tab */	
.tab{margin-bottom:50px}
.tab:after{display:block;content:'';clear:both}
.tab li{float:left;    margin-left: -1px;  margin-top: -1px;  height: 100%;  vertical-align: middle;  height: 100%;}
.tab li a{display:block;border:1px solid #ccd1d9;  height: 60px;text-align:center;    padding: 20px 10px;    transition: all 0.3s;    -webkit-transition: all 0.3s;font-size:20px;    line-height: 1;}
.tab li a:hover,.tab li a.on{background:#004993;color:#fff;}
.tab.tab_col_2 li{width:50%}
.tab.tab_col_3 li{width:33.3%}
.tab.tab_col_4 li{width:25%}
.tab.tab_col_5 li{width:20%}
.col_2 { width:50%!important; }

/* box */
.boxArea{border-top:1px solid #000;padding:20px;background:#f8f8f8}
.boxArea:after{display:block;content:'';clear:both}

/* list */
.list_bk li { background:url('../image/mobile/common/bk_list_ico.png') left 11px no-repeat; padding-left:15px; margin-bottom:4px; letter-spacing:-0.025em; }

.list_gray li { background:url('../image/mobile/common/ico_list_gray.png') left 12px no-repeat; padding-left:12px; margin-bottom:10px; overflow:hidden; word-break: keep-all; color:#444a54; }
.list_gray li:after { content:'';display:block; clear:both; }
.list_gray li em { display:inline-block; font-weight:500; width:20%; float:left; }
.list_gray li span { width:80%; display:inline-block; float:left; }

/* subtit */

.subtit { width:100%; height:100px; text-align:center; position:relative; background:#0086cd url('../image/mobile/sub/subtit_bg.png') right center no-repeat; padding:25px 0; background-size:cover; }
.subtit.tit_dep3 { height:125px;  } 
.subtit .navi { color:#fff;  }
.subtit .navi h2 { font-size:16px; font-weight:500; background:#04287e; display:inline-block; position:absolute; top:0; left:0; padding:6px 25px 8px; line-height:130%; }
.subtit .navi h3 { font-size:30px; font-weight:500; word-break:keep-all; text-shadow:0px 2px 0 rgba(0,0,0,0.23); }
.pt30 { padding-top:30px!important; }

.bbs_contents p { word-break: break-word; }
.bbs_contents table { width:100%!important; }


/* --------------------------------------------
 * footer
/* ------------------------------------------ */

.footer { width:100%; overflow:hidden; background:#656d78;  }
.footer > ul > li { width:50%; float:left; color:#fff; } 
.footer > ul > li a { color:#fff; padding:15px 0; }
.ft_nav { overflow:hidden; border-bottom:1px solid #444a54;  }
.ft_nav li a { display:block; font-size:15px; text-align:center;  position:relative; }
.ft_nav li:first-child a:after {  background:#a3b5cd; content:''; position:absolute; right:0; top:10px; width:1px; height:32px; }
.ft_link { padding-left:25px;overflow:hidden; }
.ft_link .sns { padding-top:5px; }
.ft_link .sns li a { text-indent:-99999px; display:block;  background:url('../image/mobile/common/sprite-map-icon.png') 0 0 no-repeat; width:40px; height:40px; background-size:300px 300px; float:left; }
.ft_link .sns li.blog a { background-position:-50px 0px; }
.ft_link .sns li.insta a { background-position:-100px 0px; }
.ft_link .sns li.youtube a { background-position:-150px 0px; }

.site_map { padding:15px 0; }
.site_map select { width:92%; margin:0 auto; height:33px; border:1px solid #444a54; color:#fff!important; font-size:13px!important; padding:0 10px;
						background:url('../image/mobile/common/site_map_arr.png') 90% center no-repeat; 
						-webkit-appearance: none; 
						-moz-appearance: none; 
						appearance: none; }
						
.site_map select::-ms-expand {display: none; }
.site_map select option { background:#fff; color:#000; text-align:center;  }

.address { clear:both; font-size:13px; color:#aab2bd; padding:0 15px 20px; line-height:18px; }

/*-------------------------
js_tab 
-------------------------*/

.js_tab { position: absolute;left:50%;margin-left:-46%;bottom:-20px;  z-index: 10; width:92%;}
.js_tab .title { display: block; border-bottom:none; }
.js_tab .title a { font-size: 18px; display: block;  line-height: 50px; height:50px;overflow:hidden; color: #fff;  background: #04287e!important; border-radius:3px; text-decoration: none;  position: relative;    text-overflow: ellipsis;   -o-text-overflow: ellipsis;   overflow: hidden;  white-space: nowrap;   word-wrap: normal !important; text-align:left; padding-left:20px; font-weight:300; }
 .js_tab .title a:after {  content: "\f078";  display: block;  width: 13px;  height: 7px;  ;  position: absolute;  right: 15px;  top: 10%;  margin-top: -3px;
    -webkit-transform: rotate(0deg);   transform: rotate(0deg);   -webkit-transition: all .3s ease;    transition: all .3s ease;font-family: 'FontAwesome';}
.js_tab .title.on a:after {  -webkit-transform: rotate(180deg);   transform: rotate(180deg);top:90%}

 .tabBtn { display: none;   border: 1px solid #2061c2;   border-top: 0;   position: absolute;   left: 0;   width: 100%;   box-sizing: border-box;   margin: 0;background:#fff}
 .tabBtn a { display: block; width: auto;  text-align: left;  border: 0;  margin: 0;  border-bottom: 1px solid #d2d2d2;  padding: 8px 15px;  font-size: 15px;  line-height: 19px;   background: #fff;  font-weight: normal;color:#000}
 .tabBtn a.on, .tabBtn a:hover, .tabBtn a:active {  background: #f5f5f5;  color: #2061c2;}

/* --------------------------------------------
 * layout
/* ------------------------------------------ */



/* --------------------------------------------
 * 검색2
/* ------------------------------------------ */

.search_wrap2{position: relative;display: block;margin-bottom: 30px;padding: 15px 20px 10px 20px;background: #fff;border: 1px solid #d9d9d9;}
.search_wrap2:before {content: "";position: absolute;bottom: -4px;left: -1px;display: block; width: 100%;height: 3px;  background: #f1f1f1;}
.search_wrap2 .basic_box .inner {position: relative;}
.search_wrap2 .basic_box * {vertical-align: middle;}
.search_wrap2 .board_total {display: inline-block; float: left; margin: 0; padding-left: 18px; color: #666; font-size: 13px; line-height: 36px; display:none}

.search_wrap2 fieldset{padding:0}
.search_wrap2 .basic_search{ width:80%;margin:0 auto;  padding-left: 0;}

.search_wrap2 .group,.search_wrap2 .input-group{display: inline-block; width: auto;}
.search_wrap2 .group .input input,.search_wrap .group .select select{width:100%}
.search_wrap2 .basic_search .input-group input[type="submit"] {position: relative;width: 48px;height: 36px; border: none;  background-image:none;background:#337ab7;color:#fff}
.search_wrap2 .basic_search .input-group input{height:34px;border:1px solid #999}
.search_wrap2 .board_total .red{color:#f00}
.search_wrap2 .basic_search .input, .search_wrap2 .basic_search .select { display: inline-block; vertical-align: top;}
.select2 select { height: 34px; width: 150px;}

.search_wrap2 .input-group {position: relative; border-collapse: separate;}
.basic_search2 .input-group input[type="text"] { width: 350px;}
.search_wrap2 select,.search_wrap2 input,.search_wrap2 button{vertical-align:middle}

.search_wrap2 button {height: 34px;   vertical-align: middle;    padding: 0px 20px !important;    vertical-align: top!important;}


/* --------------------------------------------
 * 버튼
/* ------------------------------------------ */
a.btn {
	
	font-size: 18px;
	letter-spacing: 0;
	color: #fff;
	text-align: center;
	padding: 8px 40px;
	display: inline-block;
	cursor: pointer;
	color: #fff;
	margin: 0 3px;
}

a.btn_down {
	height: 30px;
	border: 1px solid #00aeef;
	background: #fff;
	font-size: 13px;
	letter-spacing: 0;
	color: #fff;
	text-align: center;
	padding: 5px 10px;
	display: inline-block;;
	cursor: pointer;
	color: #00aeef;
	margin: 0 10px;
	border-radius: 2px
}


button.btn {
	height: 30px;
	border: 1px solid #444a54;
	background: #656d78;
	font-size: 13px;
	letter-spacing: 0;
	color: #fff;
	text-align: center;
	padding: 5px 20px;
	display: inline-block;
	box-shadow: 0 1px rgba( 255, 255, 255, 0.5 ) inset;
	cursor: pointer;
	color: #fff;
	margin: 0 3px;
	border-radius:3px
}


button.red,a.red {
	background: #e9573f !important
}

button.green,a.green {
	background: #2ba283 !important;
	border:1px solid #1a8468
}

button.blue,a.green {
	background: #38bc9a !important
}

button.small,a.small {
	font-size: 12px;
	padding: 5px 10px
}
button.small:hover, a.small:hover{font-size:12px!important}


button.lg,a.lg {
	font-size: 15px;
	padding: 10px 20px;
	height:auto;
}
button.lg:hover, a.lg:hover{font-size:15px!important}

.btn_add{
	border: 1px solid #444a54;
	background: #656d78;
	font-size: 12px;
	letter-spacing: 0;
	color: #fff;
	text-align: center;
	padding: 5px 10px;
	display: inline-block;
	box-shadow: 0 1px rgba( 255, 255, 255, 0.5 ) inset;
	cursor: pointer;
	color: #fff;
	margin: 0 3px;
	border-radius:3px}

/* --------------------------------------------
 * 버튼영역
/* ------------------------------------------ */
.btnArea {
	margin: 1em 0;
	text-align: center;
	*zoom: 1;
}

.btnArea:after {
	content: "";
	display: block;
	clear: both;
}

.btnArea .fLeft {
	float: left;
	display: block;
}

.btnArea .fRight {
	float: right;
	display: block
}

.btnArea button .btnArea .fLeft button, .btnArea .fRight button {
	width: 100%
}

/* --------------------------------------------
 * 테이블
/* ------------------------------------------ */
.center {
	text-align: center;
}

.left {
	text-align: left;
}


table caption {
	position: relative;
	height: 0;
	font-size: 0;
	line-height: 0;
}

.tbl_basic {
	margin-bottom: 10px;
	width: 100%;
	border-top: 2px solid transparent;
}

.tbl_basic th, .tbl_basic td {
	padding: 10px 15px;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
	margin-left: -1px;
	vertical-align: middle;
	word-wrap: break-word;
	word-break: keep-all;
}

.tbl_basic th:last-child, .tbl_basic td:last-child {
	border-right: none
}

.tbl_basic th.trw, .tbl_basic td.trw {
	border-right: 1px solid #ccc;
}

.tbl_basic thead th{border-bottom:1px solid #616161}

.tbl_basic tbody th, .tbl_basic thead th {
	vertical-align: middle;
}

.tbl_basic thead th, .tbl_basic tfoot th {
	background:#f8f8f8;
}

.tbl_basic tbody th { /*color:#004993;*/
	color: #333;
}

.tbl_basic thead th {
	color: #333;
}

.tbl_basic td  .btn-file {
	font-size: 12px;
}

.tbl_basic .tbt_dashed {
	border-bottom-style: dashed;
}

.tbl_basic {
	border-top-color: #000;
	border-bottom-color: #ddd;
}

.tbl_basic th, .tbl_basic td {
	border-right-color: #ccc;
	border-bottom-color: #ccc;
}

.tbl_basic tbody th {
	background-color: #f8f8f8;
}


.tbl_basic td input{height:30px;border:1px solid #adadad}
.tbl_basic td textarea{resize:none;}
input.date{background-position:right 50%!important}

/* --------------------------------------------
 * text color
/* ------------------------------------------ */

.txt_red{color:#d43d45}
.txt_blue{color:#40b3df}
.txt_green{color:#38bc9a}


/* --------------------------------------------
 * 레이어팝업
/* ------------------------------------------ */
.layer_bPopup{border:3px solid #000;padding:20px;width:500px;height:auto;overflow:hidden;position:relative;background:#fff;z-index:10000}
.required_guide{border:1px solid #e9573f;margin-bottom:10px;background:#fff6f5;border-radius:3px;padding:5px 10px}
.required{color:#d43d45}
.data_list td span label{margin:0 15px 0 5px}
.layer_bPopup .title {font-size:25px;line-height:120%;border-bottom:2px solid #000;padding:0 0 10px 0;font-weight:bold;margin-bottom:5px;letter-spacing:-0.05em;}

.layer_bPopup .btn.lg{font-size:17px;padding:10px 30px;height:auto}

.modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100000; /* Sit on top */
    padding-top: 0; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    margin: 15% auto; /* 15% from the top and centered */
}
.close{position:absolute;top:0;right:0}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/*이용문의*/
.box_info{border:3px solid #38bc9a;padding:20px;margin-bottom:30px;color:#38bc9a;font-weight:500;font-size:20px}
.box_info dt{font-size:18px;letter-spacing:-0.08em;font-weight:500;margin-bottom:20px;border-bottom:1px dashed #656d78;padding-bottom:10px}
.box_info dd{font-size:16px;font-weight:300;margin-bottom:5px;background:url(/assets/image/common/dot_bk.png)0 10px no-repeat;padding-left:10px}


/* --------------------------------------------
 * 팝업
/* ------------------------------------------ */
#pop h1{padding:20px;background:#1a4692;color:#fff;font-weight:500;font-size:25px}
#pop .pop_wrap{padding:10px;}

/*-------------------------
테이블 가로스크롤
-------------------------*/
.h_scroll {overflow:auto;position:relative}
.h_scroll .tbl-calendar,.h_scroll .tbl-event, .h_scroll .tbl-basic{width:910px!important;}
.h_scroll .touch{background:url(/assets/image/mobile/common/ic_hscroll.png)0 0 no-repeat;background-size:27px 27px;padding-left:30px;margin-bottom:10px;height:30px}