@charset "UTF-8";

/**
 *title
 */

.hts_title {
	height:50px;
	line-height:48px;
	padding:0 15px;
	background-color:#1e2745;
	font-size:18px;
	color:#fff
}

/**
 *공통
 */

.ellipsis {
	display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}

/**
 *layout
 */

.box {
	max-height:729px;
	overflow:auto;
	padding:18px;
	background-color:#fff
}

.noti li {
	line-height:1.8;
	font-size:13px
}

.noti li span {
	font-weight:500;
	color:#0060b1
}

/**
 *tab
 */

.tab {
	display:flex;
	position:relative
}

.tab:before {
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
	height:2px;
	background-color:#1f3981
}

.tab li {
	flex:1
}

.tab li a {
	position:relative;
	display:block;
	height:49px;
	line-height:44px;
	text-align:center;
	background-color:#f4f4f6;
	border:1px solid #9da0ae;
	border-right:0;
	font-size:14px;
	color:rgba(30,39,69,0.5)
}

.tab li:last-child a {
	border-right:1px solid #9da0ae
}

.tab li.active a {
	background-color:#fff;
	font-weight:500;
	color:#434b63
}

.tab li.active a:before {
	content:'';
	position:absolute;
	top:-1px;
	bottom:-1px;
	left:-1px;
	right:-1px;
	z-index:1;
	border:2px solid #1f3981;
	border-bottom-color:#fff
}

@media all and (max-width: 788px) {
	.tab {
		display: grid;
        grid-template-columns: 1fr 1fr 1fr;
		border-top:1px solid #9da0ae;
		border-left:1px solid #9da0ae;
	}
	
	.tab:before {
		display:none
	} 
	
	.tab li {
		flex:0 0 33.3%
	}
	
	.tab li a {
		height:40px;
		line-height:38px;
		border-right:1px solid #9da0ae;
		border-top:0;
		border-left:0;
		font-size:13px
	}
	
	.tab li.active a:before {
		display:none
	}
}
 
/**
 *table
 */

.table {
	border-top:1px solid #000
}

.table thead th {
	height:43px;
	padding:0 10px;
	background-color:#f1f4f9;
	border-bottom:1px solid #eaeaea
}

.table tbody td {
	padding:0 10px;
	border-bottom:1px solid #eaeaea
}

.table.v1 tbody td {
	height:43px;
	text-align:center
}

.th_70 {
	width:70px
}

.th_100 {
	width:100px
}

.td_noti {
	display:inline-block;
	height:23px;
	line-height:21px;
	padding:0 10px;
	background-color:#0060b1;
	font-size:12px;
	color:#fff
}

.td_left {
	text-align:left !important
}

.td_left button:hover {
	color:#0060b1
}

.status {
	display:inline-block;
	height:25px;
	line-height:23px;
	padding:0 10px;
	font-size:12px;
	background-color:#999;
	color:#fff
}

.status.active {
	background-color:#0060b1
}

.new {
	font-weight:500;
	color:#0060b1
}

@media all and (max-width: 788px) {
	.table.v1 tbody td {
		height:auto;
		padding:8px 10px
	}
}

/**
 *검색
 */

.sch {
	display:flex;
	justify-content:flex-end;
	margin:15px 0 13px
}

.sch_select {
	width:95px;
	margin-right:6px
}

.sch_select select {
	width:100%;
	height:40px;
	padding:0 10px;
	border:1px solid #eaeaea
}

.sch_input {
	display:flex;
	position:relative;
	width:212px
}

.sch_input input {
	width:100%;
	height:40px;
	padding:0 40px 0 10px;
	border:1px solid #eaeaea
}

.sch_input button {
	position:absolute;
	top:-1px;
	right:0;
	width:40px;
	height:40px
}

@media all and (max-width: 788px) {
	.sch_input, .sch_input form {
		width:100%
	}
}

/**
 *페이징
 */

.pagination {
	display:flex;
	justify-content:center;
	margin:30px 0 12px
}

.page_num {
	display:flex
}

.pg_page, .page_num * {
	display:flex;
	justify-content:center;
	align-items:center;
	width:20px;
	height:20px;
	margin:0 3px
}

.pg_prev {
	margin-right:10px
}

.pg_next {
	margin-left:10px
}

/**
 *게시판 상세
 */

.bo_v_top {
	padding:15px; 
	border-top:1px solid #000; 
	border-bottom:1px solid #ccc;
	background-color:#f1f4f9
}

.bo_v_info {
	display:flex;
	align-items:center
}

.bo_v_info span {
	position:relative;
	margin-right:8px; 
	font-size:13px;
	font-weight:500;
	color:#1e2745
}

.bo_v_title {
	display:flex;
	justify-content:space-between;
	margin-top:8px
}

.bo_v_title strong {
	flex:1;
	padding-right:20px;
	font-size:16px
}

.bo_v_title span {
	margin-top:2px;
	font-size:14px;
	color:#666
}

.bo_v_cont {
	min-height:180px;
	padding:15px
}

.bo_v_cont img {
	max-width:100% 
}

.bo_v_cont .questions {
	padding:15px 10px;
	border:1px solid #e0e0e0;
	white-space:pre-wrap;
}

.bo_v_cont .answer {
	padding:15px 10px 15px 38px;
	border:1px solid #e0e0e0;
	border-top:0;
	background:#f5f5f5 url('/images/hts/answer.png') no-repeat left 10px top 10px;
	white-space:pre-wrap;
}

.bo_v_file {
	margin-bottom:25px;
	background-color:#f5f5f5;
	border-top:1px solid #e0e0e0
}

.bo_v_file li {
	padding:15px;
	border-bottom:1px solid #e0e0e0
}

.bo_v_file li img {
	margin-right:7px
}

.bo_v_control {
	border-top:1px solid #eaeaea
}

.bo_v_control strong {
	position:relative;
	margin-right:7px;
	padding-right:7px;
	font-weight:500;
	color:#1e2745
}

.bo_v_control strong:first-child:before {
	content:'';
	position:absolute;
	top:5px;
	right:-1px;
	width:1px;
	height:8px;
	background-color:#999
}

.bo_v_control th {
	position:relative;
	padding:15px 0 15px 15px; 
	text-align:left; 
	border-bottom:1px solid #eaeaea; 
	font-weight:500
}

.bo_v_control th i {
	margin-left:20px
}

.bo_v_control td {
	border-bottom:1px solid #eaeaea
}

.bo_v_control td a:hover {
	text-decoration:underline
}

@media all and (max-width: 788px) {
	.bo_v_title {
		align-items:flex-end
	}
	
	.bo_v_title strong {
		font-size:15px
	}
	
	.bo_v_cont .answer {
		padding:15px 10px 15px 35px;
		background:#f5f5f5 url('/images/hts/answer.png') no-repeat left 12px top 15px/13px
	}
}

/**
 *버튼
 */

.btn_wrap {
	display:flex;
	justify-content:center;
	margin:30px 0 12px
}

.btn {
	width:100px;
	height:45px;
	line-height:43px;
	margin:0 5px;
	text-align:center;
	border:1px solid #e0e0e0;
	font-size:14px
}

.btn_submit {
	border-color:#0060b1;
	background-color:#0060b1;
	color:#fff
}

/**
 *form
 */

.form_box {
	margin:18px 0
}

.form_box h2 {
	position:relative;
	margin-bottom:15px;
	padding-left:10px;
	font-size:16px
} 

.form_box h2:before {
	content:"";
	position:absolute;
	top:2px;
	left:0;
	width:3px;
	height:13px;
	background-color:#0060b1
}

.frm_input {
	width:100%;
	height:40px;
	padding:8px;
	border:0;
	border:1px solid #eaeaea;
	background-color:#fff
}

.frm_input:disabled {
	background-color:#f5f5f5
}

.frm_input:focus {
	border-color:#0060b1
}

.frm_input:focus::-webkit-input-placeholder {
	color:#fff
}

.frm_input:focus::-moz-placeholder {
	color:#fff
}

.frm_input:focus:-ms-input-placeholder {
	color:#fff
}

.frm_input:focus:-moz-placeholder {
	color:#fff
}

textarea.frm_input {
	min-height:222px;
	resize:none
}

.bo_form {
	border-top:1px solid #eaeaea
}

.bo_form th {
	padding:15px;
	background-color:#f1f4f9;
	border-bottom:1px solid #eaeaea;
	border-right:1px solid #eaeaea;
	font-weight:500
}

.bo_form td {
	padding:10px 15px;
	border-bottom:1px solid #eaeaea
}

.write_phone, .write_email {
	display:flex;
	align-items:center
}

.write_phone select {
	width:120px;
	margin-right:6px
}

.write_phone div {
	flex:0 0 80px;
	padding-left:10px; 
	text-align:right
}

.write_email select {
	margin-left:6px
}

.hyphen {
	height:33px;
	line-height:29px;
	margin:0 5px
}

.chk_box {
	display:flex;
	margin:0 -10px
}

.chk_box div {
	margin:0 10px
}

.checkbox, .radio {
	position:relative
}

.input_checkbox, .input_radio {
	position:absolute;
	top:2px;
	left:0;
	width:14px;
	height:14px;
	opacity:0
}

.label_checkbox, .label_radio {
	position:relative;
	display:inline-block;
	padding-left:21px;
	cursor:pointer
}

.label_checkbox:before {
	content:"\f00c";
	font-family: FontAwesome;
	font-size:10px;
	color:transparent;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	left:0;
	top:2px;
	width:14px;
	height:14px;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:3px
}

.label_radio:before {
	content:"\f00c";
	font-family: FontAwesome;
	font-size:10px;
	color:transparent;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	left:0;
	top:2px;
	width:14px;
	height:14px;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:50%
}

.input_checkbox:checked + label:before, .input_radio:checked + label:before {
	border-color:#0060b1;
	background-color:#0060b1;
	color:#fff
}

.input_checkbox:disabled + label:before, .input_radio:disabled + label:before {
	background-color:#ccc
}

@media all and (max-width: 788px) {
	.bo_form th {
		padding:5px
	}
	
	.bo_form td {
		padding:10px
	}
}

/**
 *Intro 공지
 */

.banner {
	position:relative;
	width:790px;
	height:293px;
	border:1px solid #1759a3
}

.visual_img {
	display:flex;
	justify-content:center;
	align-items:center;
	height:293px
}
 
.visual_img img {
	max-width:100%;
	max-height:100%
} 

.banner .bx-pager {
	position:absolute;
	bottom:13px;
	left:0;
	right:0;
	z-index:51;
	display:flex;
	justify-content:center
}

.banner .bx-pager a {
	display:block;
	width:10px;
	height:10px;
	margin:0 3px;
	border-radius:50%;
	background-color:#fff;
	text-indent:-9999px
}

.banner .bx-pager a.active {
	background-color:#1759a3
}

.intro_board {
	position:relative; 
	overflow:hidden;
	width:790px;
	margin-top:1px
}

.bo_tab {
	display:flex;
	background-color:#1759a3
}

.bo_tab li {
	position:relative;
	width:105px;
	height:35px;
	line-height:30px;
	text-align:center;
	border:1px solid #1759a3;
	cursor:pointer;
	font-weight:300;
	color:#fff
}

.bo_tab li.active {
	background-color:#fff;
	border-bottom-color:#fff;
	font-weight:700;
	color:#1759a3
}

.bo_tab li:after {
	content:'';
	position:absolute;
	top:10px;
	right:-3px;
	z-index:1;
	width:1px;
	height:10px;
	background-color:rgba(255,255,255,0.3)
}

.bo_tab li.active:after {
	display:none
}

.tab_content {
	height:164px;
	padding:10px 15px;
	background-color:#fff
}

.tab_content ul {
	height:144px;
	overflow:auto;
	padding-right:10px
}

.tab_content li a {
	display:flex;
	justify-content:space-between;
	padding:3px 0
}

.tab_content li a:hover {
	color:#1759a3
}

.more {
	position:absolute;
	top:7px;
	right:7px;
	font-weight:300; 
	color:#fff
}

.more i {
	margin-right:2px; 
	font-size:10px
}

@media all and (max-width: 788px) {
	.banner {
		width:100%;
		height:auto
	}
	
	.visual_img {
		height:auto
	}
	
	.visual_img img {
		width:100%
	}
	 
	.intro_board {
		width:100%
	} 
	
	.bo_tab {
		flex-wrap:wrap
	}
	 
	.bo_tab li {
		width:33.3%
	}
	
	.more {
		display:none
	}	 
	
	.tab_content, .tab_content ul {
		height:auto 
	}
	
	.tab_content li a {
		padding:4px 0
	}
}