/* sub common */
body {margin-top: 80px; font-size: 1em;}

:root {
  --snb_color: #314459;
  --sub_title_color: #006db3;
  --txt_green: #009933;
}

/* color */
.bold {font-weight: 500;}
.green {color: var(--txt_green);}
.navy {color: var(--snb_color);}
.blue {color: var(--sub_title_color);}

/* font-size */
.fz20 {font-size: 20px;}
.fz25 {font-size: 25px;}

/* side_menu */
.snb {max-width: 280px; margin: 0 0 200px 30px;}
.snb .title_wrap {display: flex; justify-content: center; align-items: center; width: 280px; box-sizing: border-box; height: 150px; margin-top: -40px; background: url(../img/sub/bg_snb.png) no-repeat, linear-gradient(90deg, rgba(23,183,187,1) 0%, rgba(1,109,179,1) 100%); border-radius: 0 40px 0 0;}
.snb .title_wrap .side_title {font-size: 30px; font-weight: 600; color: #fff;}
.snb ul.snb_list > li.depth_01 {border: 1px solid #d4d4d4; margin-top: -1px;}
.snb ul.snb_list > li.depth_01:first-child {border-top: 0;}
.snb ul.snb_list > li.depth_01.on > a {background: #314459; color: #fff;}
.snb ul.snb_list > li.depth_01.on > a::after {width: 20px; height: 20px; background: url(../img/sub/ico_snb_arrow.png) no-repeat bottom;}
.snb ul.snb_list > li.depth_01 > a {display: flex; justify-content: space-between; padding: 20px; font-size: 20px; color: var(--snb_color); font-weight: 500;}
.snb ul.snb_list > li.depth_01 > a::after {content: ''; display: inline-block; width: 20px; height: 20px; background: url(../img/sub/ico_snb_arrow.png) no-repeat top;}
.snb ul.snb_list > li.depth_01 > a:hover {background: #314459; color: #fff;}
.snb ul.snb_list > li.depth_01 > ul.depth_02 {display: none; padding: 10px 20px; background: #f1f1f4;}
.snb ul.snb_list > li.depth_01 > ul.depth_02 > li.on {color: var(--sub_title_color);}
.snb ul.snb_list > li.depth_01 > ul.depth_02 > li.on > a::before {background: #006db3;}
.snb ul.snb_list > li.depth_01 > ul.depth_02 > li > a {display: flex; align-items: center; padding: 10px 0; font-size: 18px; font-weight: 400;}
.snb ul.snb_list > li.depth_01 > ul.depth_02 > li > a:hover {color: var(--sub_title_color);}
.snb ul.snb_list > li.depth_01 > ul.depth_02 > li > a:hover::before {background: #006cb3;}
.snb ul.snb_list > li.depth_01 > ul.depth_02 > li > a::before {content: ''; display: inline-block; min-width: 3px; height: 3px; margin-right: 10px; background: #333;}
/* // side_menu */


/* container */
.container {max-width: 1280px; margin: 0 auto; display: flex; justify-content: center}
/* //container */


/* body_outer */
.body_outer {max-width: calc(100% - 340px); width: 100%; margin: 0 30px;}
/* //body_outer */


/* body_head */
.body_head {border-bottom: 1px solid #d4d4d4;}
/* //body_head */


/* body_content */
.body_content {min-height: 500px; margin-top: 40px; letter-spacing: -0.4px;}
/* //body_content */


/* content_group */
.content_group {margin-bottom: 50px; line-height: 1.5;}
/* //ontent_group */


/* lnb */
.body_head .lnb {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 15px 0;}
.body_head .lnb .title_wrap h3 {font-size: 35px; font-weight: 500; color: var(--snb_color);}
.body_head .lnb .location {padding: 10px 0; color: #666;}
.body_head .lnb .location ul {display: flex;}
.body_head .lnb .location ul::before {content: ''; display: inline-block; width: 15px; height: 16px; margin-right: 15px; background: url(../img/sub/ico_location_home.png) no-repeat;}
.body_head .lnb .location ul li::after {content: ''; display: inline-block; width: 8px; height: 13px; margin: 0 15px; background: url(../img/sub/ico_location_arrow.png) no-repeat;}
.body_head .lnb .location ul li:last-child {font-weight: 500;}
.body_head .lnb .location ul li:last-child::after {display: none;}

.page_title .m_lnb {display: none;}
.page_title .m_lnb .location {}
.page_title .m_lnb .location ul {display: flex; color: #fff;}
.page_title .m_lnb .location ul::before {content: ''; display: inline-block; width: 15px; height: 16px; margin-right: 15px; background: url(../img/sub/ico_location_home.png) no-repeat; filter: brightness(5);}
.page_title .m_lnb .location ul li::after {content: ''; display: inline-block; width: 8px; height: 13px; margin: 0 15px; background: url(../img/sub/ico_location_arrow.png) no-repeat; filter: brightness(5);}
.page_title .m_lnb .location ul li:last-child {font-weight: 500;}
.page_title .m_lnb .location ul li:last-child::after {display: none;}
/* //lnb */


/* page_title */
.page_title {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 200px; background: url(../img/sub/bg_sub_01.jpg) no-repeat; background-size: cover;}
.page_title h2 {font-size: 40px; font-weight: 500; color: #fff;}
.page_title h2::after {display: block; content: ''; width: 35px; height: 2px; margin: 20px auto; background: #fff;}
.page_title .sub_txt {font-size: 20px; font-weight: 400; color: #fff;}
/* // page_title */


.content_title h4 {display: flex; align-items: center; margin-bottom: 20px; font-size: 25px; font-weight: 500; color: var(--sub_title_color);}
.content_title h4::before {display: block; content: ''; width: 23px; height: 23px; margin-right: 10px; background: url(../img/sub/ico_sub_title.png) no-repeat;}
.content_title h5 {margin-bottom: 15px; font-size: 22px; font-weight: 500; color: var(--snb_color);}

/* list_type_01 */
.list_type_01 > ul {}
.list_type_01 > ul > li {position: relative; margin-bottom: 15px; padding-left: 15px; font-size: 18px; line-height: 1.5;}
.list_type_01 > ul > li::before {position: absolute; top: 11px; left: 0; content: ''; width: 6px; height: 6px; background: #006cb3; border-radius: 50%;}
.list_type_01 > ul > li > ul > li {padding-top: 7px;}

/* list_type_02 (history) */
.list_type_02 > ul {}
.list_type_02 > ul > li {position: relative; margin-bottom: 15px; padding-left: 130px; font-size: 18px; line-height: 1.5;}
.list_type_02 > ul > li span {display: flex; align-items: center; position: absolute; left: 0; color: var(--sub_title_color);}
.list_type_02 > ul > li span::before {margin-right: 10px; content: ''; width: 6px; height: 6px; background: #006cb3; border-radius: 50%;}
/*position: absolute; top: 11px; left: 0;*/
.list_type_02 > ul > li > ul > li {padding-top: 7px;}


/* table_type_01 */
.table_type_01 {overflow-x: auto; border-top: 2px solid #006cb3;}
.table_type_01 table {width: 100%; border: 1px solid #d4d4d4; margin-bottom: 20px; text-align: center;}
.table_type_01 table.fix {table-layout: fixed;}
.table_type_01 tr th, .table_type_01 tr td {padding: 10px;}
.table_type_01 thead tr {background: #f1f1f4; font-weight: 500;}
.table_type_01 tbody tr th {background: #f8f8f8; border-top: 1px solid #d4d4d4; word-break: keep-all;}
.table_type_01 thead tr, .table_type_01 tbody tr td {border-left: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4; height: 40px; word-break: keep-all;}
.table_type_01 thead tr th {border-top: 1px solid #d4d4d4;}
.table_type_01 thead tr th,
.table_type_01 thead tr td,
.table_type_01 tbody tr td:last-child {border-left: 1px solid #d4d4d4;}
.table_type_01 thead tr td:first-child {border-left: 0;}
/* table_unit */
.table_unit {display: block; margin-bottom: 5px; text-align: right; font-size: 16px; font-weight: 500;}


/* board_type_01 */
.board_type_01 {border-top: 2px solid #006cb3;}
.board_type_01 .table_wrap {overflow-x: auto;}
.board_type_01 table {width: 100%; margin-bottom: 50px; text-align: center;}
.board_type_01 table.fix {table-layout: fixed;}
.board_type_01 tr th, .board_type_01 tr td {padding: 10px;}
/*.board_type_01 thead {border-top: 2px solid #006cb3;}*/
.board_type_01 thead tr {background: #f1f1f4; font-weight: 500;}
.board_type_01 tbody tr { border-top: 1px solid #d4d4d4;}
.board_type_01 tbody tr:last-child {border-bottom: 1px solid #d4d4d4;}
.board_type_01 tbody tr:last-child td {border-bottom: 1px solid #d4d4d4;}
.board_type_01 tbody tr th {background: #f8f8f8; border-top: 1px solid #d4d4d4; word-break: keep-all;}
.board_type_01 tbody td.ico_notice {width: 20px; height: 21px; background: url(../img/sub/ico_notice.png) no-repeat center;}
.board_type_01 tbody td.subject {text-align: left;}
.board_type_01 tbody td.subject a {display: inline-block; width: calc(100% - 20px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.board_type_01 thead tr, .board_type_01 tbody tr td {height: 40px; word-break: keep-all; border-top: 1px solid #d4d4d4;}
.board_type_01 .btn_wrap {margin-top: 30px; text-align: right;}
.board_type_01 .btn_wrap button {width: 100px; height: 35px; font-size: 16px; padding: 5px 15px; margin:0 5px 0; background: #fff; color: #555; border: 1px solid #555; transition: 0.1s;}
.board_type_01 .btn_wrap button:hover {background: #555; color: #fff;}
.board_type_01 a:hover {text-decoration: underline; text-underline-position: under; color: #006cb3;}
.board_pagination {text-align: center;}
.board_pagination a {display: inline-block; width: 30px; height: 30px; border: 1px solid #ddd; margin-right: 3px; text-align: center;}
.board_pagination a.active {background: #555; border: 1px solid #555; color: #fff;}

.board_search {margin-bottom: 30px;}
.board_search form {}
.board_search form fieldset {display: flex; width: 600px; margin: 0 auto;}
.board_search form fieldset select {width: 100px; height: 35px; padding: 5px; border: 1px solid #ddd;}
.board_search form fieldset select option {}
.board_search .input_wrap {display: flex; width: calc(100% - 100px);}
.board_search .input_wrap input {width: calc(100% - 100px); height: 35px; margin:0 10px; padding: 0 10px; box-sizing: border-box; border: 1px solid #ddd;}
.board_search .input_wrap button.btn_search {width: 100px; height: 35px; border: 1px solid #ddd; color: #fff; background: #555;}

.board_view {}
.board_view .board_header {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; background: #f7f7f7; border-top: 2px solid #006cb3; border-bottom: 1px solid #ddd;}
.board_view .board_header h4 {overflow: hidden; width: 100%; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 22px;}
.board_view .split {display: flex; margin-top: 5px;}
.board_view .split span {color: #666;}
.board_view .split span::after {display: inline-block; content: ''; width: 1px; height: 15px; margin: 0 15px; vertical-align: -1px; background: #b3b3b3;}
.board_view .split span:last-child::after {display: none;}
.board_view .file_area {padding: 15px; border-bottom: 1px solid #ddd;}
.board_view .file_area .file_wrap {font-size: 14px;}
.board_view .file_area .file_wrap strong {margin-right: 10px;}
.board_view .file_area .file_wrap:last-child {margin: 0;}
.board_view .board_data {padding: 30px 15px; border-bottom: 1px solid #ddd; word-break: break-all;}
.board_view .board_data p {word-break: keep-all;}
.board_view .post_link {display: flex; justify-content: space-between; padding: 15px; border-bottom: 1px solid #ddd;}
.board_view .post_link .link_wrap {display: flex; justify-content: space-between; align-items: center; width: 50%; height: 30px;}
.board_view .post_link .link_wrap::after {display: inline-block; content: ''; width: 1px; height: 30px; background: #ddd;}
.board_view .post_link .link_wrap:last-child::after {display: none;}
.board_view .post_link .link_wrap a {display: flex; align-items: center; font-weight: 500;}
.board_view .post_link .link_wrap a.prev {}
.board_view .post_link .link_wrap a.prev::before {content: ''; width: 9px; height: 16px; margin-right: 5px; background: url(../img/sub/board_link_arrow.png) no-repeat;}
.board_view .post_link .link_wrap a.next {}
.board_view .post_link .link_wrap a.next::after {content: ''; width: 9px; height: 16px; margin-left: 5px; background: url(../img/sub/board_link_arrow.png) no-repeat; transform: rotate(180deg);}
.board_view .post_link .link_wrap p {width: calc(100% - 60px); padding: 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.board_view .post_link .link_wrap p.no_data {color: #999;}
.board_view .btn_wrap {margin-top: 30px; text-align: right; display: flex; justify-content: space-between;}
----------------------------------*/

.board_write {}
.board_write tr:first-child th, .board_write tr:first-child td {border-top: none;}
.board_write table {width: 100%; border-top: 2px solid #111; border-bottom: 2px solid #111;}
.board_write table th {padding: 12px 10px; text-align: center; background: #f9f9f9; border-bottom: 1px solid #d9d9d9;}
.board_write table td {padding: 12px 10px; border-left: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;}
.board_write table th:first-child {border-left: 0; word-break: keep-all;}
.board_write table tbody th {width: 20%; font-weight: 500;}
.board_write table tbody td {width: 80%;}
.board_write table tbody td.td_align {display: flex; align-items: center;}
.board_write table tbody td .secure_text {display: flex;}
.board_write table tbody td.radio_area {display: flex; width: 100%;}
.board_write table tbody td.radio_area .input_wrap {display: flex; align-items: center; margin-right: 10px;}
.board_write table tbody td.radio_area .input_wrap:last-child {margin-right: 0;}
.board_write table tbody td.radio_area .input_wrap .radio_lb {cursor: pointer;}
.board_write table input[type=text] {border: 1px solid #d9d9d9; height: 40px; line-height: 40px; padding: 0 10px;}
.board_write table input[type=password] {border: 1px solid #d9d9d9; height: 40px; line-height: 40px; padding: 0 10px;}
.board_write table input.title {width: 90%;}
.board_write table textarea {width: 90%; padding: 10px; border: 1px solid #c1c1c1;}
.board_write .btn_wrap {margin-top: 30px; text-align: right;}
.board_write .btn_wrap button {width: 100px; height: 35px; font-size: 16px; padding: 5px 15px; margin:0 5px 0; background: #555; color: #fff;}
.board_write .btn_wrap button.btn_line {border: 1px solid #555; background: #fff; color: #333;}

/* borad button_type */
button.btn_board {width: 100px; height: 35px; font-size: 16px; padding: 5px 15px; margin:0 5px 0; background: #fff; color: #555; border: 1px solid #555; transition: 0.2s;}
button.btn_board:hover {background: #555; color: #fff;}
button.btn_board.edit {background: #006cb3; color: #fff;}
button.btn_board.del {background: #314459; color: #fff;}


.refresh img {vertical-align: middle;}

@media (max-width:768px) {
  .board_search form fieldset {display: block;}
  .board_search form fieldset select {width: 100%;}
  .board_search form fieldset .input_wrap {display: block; width: 100%;}
  .board_search form fieldset .input_wrap input {width: 100%; margin: 10px 0;}
  .board_search .input_wrap button.btn_search {width: 100%; font-size: bold;}

}


/* sub responsive */

@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
.body_outer {max-width: calc(100% - 60px);}
  .snb {display: none;}
}

@media screen and (max-width: 768px) {
  .board_search form fieldset {width: auto;}
}

@media screen and (max-width: 640px) {
  .body_outer {margin: 0 20px;}
  .page_title h2 {font-size: 30px;}
  .content_title h4 {margin-bottom: 15px; font-size: 20px;}
  .content_title h4::before {width: 18px; height: 18px; background-size: contain;}
  .content_title h5 {font-size: 18px;}
  .board_view .board_header h4 {font-size: 20px;}
  .page_title .m_lnb {display: block;}
  .page_title .sub_txt {display: none;}
  .body_head .lnb {display: none;}
  .list_type_01 ul {margin-left: 20px;}
  .page_title .m_lnb .location ul li::after {margin-right: 10px;}
  .list_type_01 ul {margin-left: 0;}
  .list_type_01 > ul > li {font-size: 16px;}
  .page_title .m_lnb .location ul li {font-size: 14px;}
  .board_view .post_link {padding: 10px; font-size: 14px;}
  .board_type_01 .btn_wrap button {width: 70px; font-size: 14px; padding: 5px 10px;}
  button.btn_board {width: 70px; font-size: 14px; padding: 5px 10px; margin: 0;}
  .board_write table tbody td.td_align {flex-direction: column; align-items: flex-start;}
  .board_write table tbody td .secure_text {margin-bottom: 10px;}
}