@charset "utf-8";
@import url("/public/css/font.css");

/******************************************************************************
 *** initialize ***************************************************************
 ******************************************************************************/
* {margin: 0; padding: 0; line-height: 1.5em; -webkit-overflow-scrolling: touch; box-sizing: border-box; -webkit-hyphens: auto; hyphens: auto; vertical-align: middle; font-size: inherit; box-sizing: border-box; font-family: inherit;}
html, body {height: 100%; font-size: 12px; font-family: 'Noto Sans KR', 'Nanum Gothic', 'Dotum', 'Gulim', 'sans-serif';}
body {color: #333; -webkit-text-size-adjust: none; word-break: keep-all; word-wrap: break-word;}
legend, caption, figcaption {display: none;}
p,ul,ol,li,dl,dt,dd,form {list-style-image: none; list-style-position: outside; list-style-type: none; border: 0px;}
img,fieldset, frameset, frameborder, frame {border: 0; border: none;}
table {width: 100%; border-collapse: collapse;}
table th, table td {box-sizing: content-box;}
a, img, span, b, input, select, em, textarea, label, strong {vertical-align: middle; outline-style: none; color: inherit; font-family: inherit;}
a {color: inherit; text-decoration: none; cursor: pointer; color: inherit; font-family: inherit;}
a:hover {text-decoration: none;}
textarea {resize: none;}
button {border: none; background: none; outline: none; cursor: pointer;}
label,button {cursor: pointer;}
i,em {font-style: normal;}
br {line-height: inherit;}
hr {border: none; line-height: inherit;}
input[type="text"], input[type="password"], input[type="file"], textarea {padding: 0.33rem; color: #7b7b7b; -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; border: 1px solid #ccc; background: #ffffff;}
select {padding-left: 0.33rem; border-radius: 0; color: #7b7b7b; border: 1px solid #ccc; background: #ffffff;}

input[type="text"], input[type="password"] ,input[type="file"] {padding: 3px 5px; height: 24px; max-width: 100%;}
input[type="file"] {padding: 0 3px;}
input[type="radio"], input[type="checkbox"] {margin-top: -2px;}
select {height: 28px; font-size: 12px;}
textarea {width: 100%; height: 100px;}

::-webkit-input-placeholder {color: #cccccc;}
::-moz-placeholder {color: #cccccc;}
:-ms-input-placeholder {color: #cccccc;}
:-moz-placeholder {color: #cccccc;}

/* 공통 */
.align-box {clear: both; height: auto; padding-top: 10px; padding-bottom: 2px; text-align: center;}
.align-box:after {content: ""; display: block; clear: both;}
.align-box .align-left {float: left;}
.align-box .align-right {float: right;}

.align-left {text-align: left !important;}
.align-right {text-align: right !important;}


/******************************************************************************
 *** layout *******************************************************************
 ******************************************************************************/
body.main {background: #f0f0f0;}
body {font-family: 'NotoSansCJKkr', sans-serif;}

/* Top 메뉴 */
.wrapper {width: 1000px; height: 130px; margin: 0 auto; position: relative;}

#header {position: relative; width: 100%; z-index: 101; border-bottom: 5px solid #6ab298; background: linear-gradient(179deg, #FFF 64.62%, #EEE 98.83%); box-shadow: 0 5px 5px rgba(0,0,0,0.1); z-index: 10;}
#header .gnb-wrap .wrapper {position: relative;}
#header .gnb-wrap .wrapper:after {content: ''; display: block; clear: both;}
#header .gnb-wrap .wrapper h1 {padding: 15px 0; display: block; text-align: center;}
#header .gnb-wrap .wrapper h1 a {height: 20px; display: block;}
#header .gnb-wrap .wrapper h1 img {height: 62px;}
#header .gnb-wrap .gnb {position: absolute; bottom: 0; left: 50%; width: 1000px; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#header .gnb-wrap .wrapper ul.menuList {display: flex;}
#header .gnb-wrap .wrapper ul li {position: relative; width: 25%; float: left;}
#header .gnb-wrap .wrapper ul li ~ li {background: url("/public/images/2-gnb.png") no-repeat 0 100%;}
#header .gnb-wrap .wrapper ul li ~ li:before {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 1px; height: 70%; background: #ccc;}
#header .gnb-wrap .wrapper ul li > a {position: relative; display: block; text-align: center; line-height: 50px; font-size: 18px; letter-spacing: -0.29px; color: #464646; font-weight: 500; background-image: linear-gradient(transparent calc(100% - 3px), #f0544f 3px); background-repeat: no-repeat; background-size: 0% 100%; transition: all 0.2s; white-space: nowrap;}
#header .gnb-wrap .wrapper ul li > a:hover {color: #f0cd6e;}
#header .gnb-wrap .wrapper ul li.on > a::after {content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background: #391378; z-index: 0;}
#header .gnb-wrap .wrapper ul li a img {vertical-align: middle; max-width: 100%; height: 33px;}
#header .gnb-wrap .wrapper ul li ul {display: none !important; position: absolute; top: 0; left: 0; background: #fff;}
#header .gnb-wrap .wrapper ul li ul a {line-height: 40px; padding: 0 0; white-space: nowrap;}
#header .gnb-wrap .wrapper ul li:hover ul a:after {display: none;}
#header .gnb-wrap .wrapper .banner {position: absolute; top: 0; right: 0; background: #000; width: 150px; height: 100%;}
/* footer */
.footer-new {clear: both; background: #2d3653; color: #ccc; font-size: 13px; line-height: 1.8;}
.footer-inner {width: 1000px; margin: 0 auto; padding: 0 20px;}
.footer-top {display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
.footer-nav ul {display: flex; gap: 24px; list-style: none;}
.footer-nav ul li a {color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.2s;}
.footer-nav ul li a:hover {color: #6ab298;}
.footer-links {display: flex; gap: 16px;}
.footer-links a {color: #999; font-size: 13px; text-decoration: none; transition: color 0.2s;}
.footer-links a:hover {color: #f0cd6e;}
.footer-body {display: flex; justify-content: space-between; padding: 24px 0;}
.footer-logo {font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 12px;}
.footer-addr p {color: #999; font-size: 13px; line-height: 1.8;}
.footer-copyright {color: #777; font-size: 13px; margin-top: -5px;}
.footer-contact {text-align: right; color: #999; font-size: 13px; line-height: 1.8;}
.footer-contact .footer-tel {font-size: 16px; font-weight: 700; color: #6ab298; margin-bottom: 12px;}

/* 내용 */
#container {position: relative; width: 1000px; margin: 0 auto; z-index: 1; padding-top: 5px; overflow: hidden;}

/* snb 메뉴 */
.snb {float: left; width: 220px; float: left; position: absolute; top: -5px; left: 0; bottom: 0; box-shadow: 0 0 10px rgba(0,0,0,0.1); background: #fff; z-index: 1;}
.snb h2 {font-size: 24px; padding: 0 20px; padding-top: 30px;}
.snb h2 img {vertical-align: top;}
.snb .snb-menu > ul {margin-top: 27px;}
.snb .snb-menu > ul > li > a {position: relative; display: block; padding: 13px 10px 14px 20px; height: 54px; font-size: 14px; color: #848383; font-weight: bold; color: #181818; border-bottom: 1px solid #e8e8e8; display: flex; flex-direction: row; align-items: center;}
.snb .snb-menu > ul > li.on > a:before {content: ""; display: block; position: absolute; top: 50%; right: 15px; width : 16px; height: 16px; background: url("data: img/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAn1BMVEX////+/v7x8Ozv7+/+///y7+rw7+3v7+3///39//zu7uz//v/w7+vx8O7v8Ov+/f/w7Onu7ent7Ojh4Nzh4Nvv7unt7unt7uju7evw7Ovk4N3t7e3v7uz+/vzw7u/+/v/9//7w8O6npJuppZmopJmqpJaro5iqo5mrpZmrpZeqpJipppero5arpJqpppWppZqspZWropmno5ipo5f///+AOX+LAAAAInRSTlMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPKwcEQAAAAFiS0dEAIgFHUgAAAAHdElNRQflAQwVBxZck/SUAAAAr0lEQVQY00WPCRKCMAxFP4IUxYUqIi6IWopttKJ4/7tZtiGTTCY/y7wAgANM7sK1qTfPw7SQLkYB8EvJ+ioAZvDmD8EQBOjXQvhKLtCVYRvLUq+wbrsR55uIbxXF3NouwZOUlqJ4GSPfZGQFQaRKUX1KQ5q+uka05+mBH5WJ09M54knLYY+SZgNphix0LoYGMIQ5cvh2AiOqRVe/TnAa4YrAJ8V6UvuaFW510Ry1/gcPOQ4VNzFOCQAAAABJRU5ErkJggg==") no-repeat 0 0; background-size: auto 100%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.snb .snb-menu > ul > li {margin-top: -1px;}
.snb .snb-menu > ul > li:hover > a {color: #2d3653;}
.snb .snb-menu > ul > li.on > a {border: 2px solid #f7cf5d;}
.snb .snb-menu > ul > li > a.img {position: relative; border: none; height: auto; padding: 0; padding-bottom: 1px;}
.snb .snb-menu > ul > li > a.img:before {display: none;}
.snb .snb-menu > ul > li > a.img:after {content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #ccc; z-index: 1;}
.snb .snb-menu > ul > li > a > img {position: relative; top: 0;}/* top: 2px; height: 25px; */
.snb .snb-menu > ul > li ul {display: none; padding: 10px 0; border-bottom: 1px solid #e2e2e2; border-top: 1px solid #e2e2e2;}
.snb .snb-menu > ul > li.on ul {display: block;}
.snb .snb-menu > ul > li ul li a {position: relative; display: block; padding: 5px 15px 5px 20px; color: #888888; font-size: 13px; word-break: break-all;}
.snb .snb-menu > ul > li ul li.on a {color: #2d3653; font-weight: bold;}
.snb .snb-menu > ul > li ul li:hover a {color: #2d3653;}
.snb .snb-menu > ul > li ul li.on a:after {content: ""; display: block; position: absolute; top: 50%; right: 10px; width : 0; height: 0; margin-top: -4px; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-left: 6px solid #ccc;}
.snb .snb-menu .volunteer-wrap {margin-top: 30px; background: #f7f7f7;}
.snb .snb-menu .volunteer-wrap .volunteer {overflow: hidden; padding: 20px 0 40px 0; background: url(/public/images/2-volunteer-btm.png) no-repeat 0 100%;}
.snb .snb-menu .volunteer-wrap h2 {text-align: center; padding-top: 30px; color: #bbb; font-size: 14px;}
.snb .snb-menu .volunteer-wrap .menu a {float: left; width: 33.3333%; text-align: center; margin: 10px 0;}
.snb .snb-menu .volunteer-wrap .menu a img {background: #f7f7f7;}
.snb .snb-banner {margin-top: 30px; text-align: center;}
.snb .banner {margin-top: 10px; text-align: center;}
.snb .banner img {max-width: 100%; width: 90%;}

.page-tit {margin-bottom: 15px;}
.page-tit strong {font-size: 28px; color: #333333; font-weight: normal;}
.page-tit .left,
.page-tit .right {display: table-cell; line-height: 0.5em;}
.page-tit .right {text-align: right;}


/******************************************************************************
 *** main *********************************************************************
 ******************************************************************************/
body.main #header {height: 135px;}
body.main #container {min-height: 500px;}
body.main #gnb > ul > li {padding-bottom: 0 !important;}
body.main #gnb > ul > li > ul {display: none !important;}

.main #container {height: 580px;}
.main .section-1 {float: left; width: 397px;}
.main .section-1 h2 {color: #666; font-size: 14px;}
.main .section-2 {float: left; height: 100px; height: 580px; margin: 0 -9px; width: 224px;}
.main .section-3 {float: right; width: 397px;}
.main .section-3 .main-banner {padding: 0 0 0 20px; margin-top: 20px;}
.main .section-3 .main-banner ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; margin-top: 25px;}
.main .section-3 .main-banner ul li a {display: block;}
.main .section-3 .main-banner ul li img {width: 100%;}
.main .section-3 h2 {color: #666; font-size: 14px;}

.main .notice-list {position: relative; margin-top: 15px; width: 367px;}
.main .notice-list .tit {float: left; padding: 6px 0; padding-left: 10px; margin-left: 8px; cursor: pointer; background: url("/public/images/2-notice-bar.png") no-repeat 0 50%;}
.main .notice-list .tit:first-child {margin-left: 0px; padding-left: 0px; background: none;}
.main .notice-list .notice-box {display: none; clear: both; padding-top: 10px;}
.main .notice-list .more {position: absolute; top: 7px; right: 5px; font-size: 9px;}
.main .notice-list .list {position: relative; width: 100%;}
.main .notice-list .list ul {width: 100%;}
.main .notice-list .list li {position: relative; font-size: 13px;}
.main .notice-list .list li:first-child {margin-top: 0px;}
.main .notice-list .list li a {display: block; width: 240px; padding: 3px 0 3px 15px; overflow: hidden; text-overflow: ellipsis; color: #7d7d7d; white-space: nowrap; background: url("/public/images/dot-ico.png") no-repeat 0 50%;}
.main .notice-list .list li a:hover {text-decoration: underline;}
.main .notice-list .list li .date {position: absolute; top: 3px; right: 10px; color: #7d7d7d;}

.main .quick {overflow: hidden; text-align: center;}
.main .quick h2 {padding-top: 20px; color: #bbb; font-size: 14px;}
.main .quick .menu {height: 342px;}
.main .quick .menu a {display: inline-block; margin: 19px 4px 0 4px;}

.main .call-center {clear: both; height: 190px; margin: 19px 7px 0 7px; padding-top: 30px; text-align: center; background: #eff5f4;}


/******************************************************************************
 *** content ******************************************************************
 ******************************************************************************/
.container {position: relative; width: 1000px; max-width: 100%; margin: 0 auto; margin-top: 5px; padding: 350px 0 30px 0; display: flex; background: url("/public/images/2-snb.png") repeat-y 0 0;}
.container:after {content: ""; display: block; clear: both;}

.content {position: relative; width: auto; flex: 1; margin: 0 auto; max-width: 990px; padding-left: 260px;}
.content .page-tit-wrap {margin-top: 50px; position: relative; border-bottom: 1px solid #aaa498; margin-bottom: 9px;}
.content .page-tit-wrap:after {content: ''; display: block; clear: both;}
.content .page-tit {padding-top: 5px; padding-bottom: 12px; color: #373b44; font-size: 24px; font-weight: bold; line-height: 1em;}
.content .page-tit .tit {margin-right: 15px; display: inline-block; line-height: 1em; vertical-align: baseline; white-space: nowrap;}

.sub-visual {position: absolute; top: 135px; left: 50%; margin-left: -640px;}
.visual {text-align: center;}
.visual img {max-width: 100%;}

/* 게시판 목록 */
.board-type {margin-top: 30px;}
.board-type table {table-layout: fixed; width: 100%; border-bottom: 1px solid #d2d2d2;}
.board-type thead {border-left: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2;}
.board-type tr:hover {background-color: #ffffe6;}
.board-type th {padding: 12px 5px; border-top: 1px solid #d2d2d2; font-size: 14px; color: #444; background: #f8f8f8; text-align: center; vertical-align: middle; word-break: keep-all; word-wrap: break-word;}
.board-type td {padding: 15px 5px; border-top: 1px solid #d2d2d2; font-size: 14px; text-align: center; color: #444; vertical-align: middle; word-break: keep-all; word-wrap: break-word;}
.board-type td.right {text-align: right; padding-right: 10px;}
.board-type.view td {text-align: left; padding-left: 20px;}
/* 게시판 상세 */
.subject thead th {border-top: 1px solid #e2e2e2; padding: 12px 0 !important; font-size: 14px; color: #333; border-bottom: 1px solid #e2e2e2; background: #f8f8f8;}
.subject thead th.first {padding-left: 10px !important; border-left: 1px solid #e2e2e2;}
.subject thead th.last {border-right: 1px solid #e2e2e2;}

.tbl-detail {clear: both; width: 100%; color: #666;}
.tbl-detail td {padding: 6px 0; border-bottom: 1px solid #d0d0cd;}
.tbl-detail th {padding: 9px 0 6px 0; background: #e5e2dc;}
.tbl-detail th.first {padding: 8px 0 7px 15px;}
.tbl-detail tbody th {padding: 9px 0 6px 0; border-bottom: 1px solid #d0d0cd; background: none;}
.tbl-detail td {padding: 9px 0 6px 0; border-bottom: 1px solid #d0d0cd;}
.tbl-detail td.info {padding: 12px 10px; font-size: 13px; color: #444; text-align: center;}

.btn-type {display: inline-block; cursor: pointer; height: 38px; line-height: 38px; padding: 0 20px; text-align: center; font-size: 13px; border-radius: 2px; vertical-align: middle;}
.btn-type.btn {border: 1px solid #d8d8d8; color: #6a6a6a; background: #fff;}

/* html 콘텐츠 */
.introduce, .history {font-size: 14px;}

.introduce {margin-top: 30px;}
.introduce .tit {margin-top: 20px; font-size: 16px; color: #0077a2; border-bottom: 1px solid #d9d9db; padding-left: 17px; padding-bottom: 7px; font-weight: bold; background: url("/public/images/dot-ico-2.png") 0 20% no-repeat;}
.introduce .txt {position: relative; margin: 10px 0; color: #666666; text-align: justify;}

.history .board-tab {display: table; width: 100%; position: relative; padding: 5px 5px 1px 5px; margin: 30px 0 15px; box-sizing: border-box; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; border-radius: 3px; color: #000000; font-size: 12px; background: #c4c4c4; Old browsers background: -moz-linear-gradient(top, #c4c4c4 0%, #afafaf 50%, #9c9c9c 100%); FF3.6-15 background: -webkit-linear-gradient(top, #c4c4c4 0%,#afafaf 50%,#9c9c9c 100%); Chrome10-25,Safari5.1-6 background: linear-gradient(to bottom, #c4c4c4 0%,#afafaf 50%,#9c9c9c 100%); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#c4c4c4', endColorstr='#9c9c9c',GradientType=0 ); IE6-9;}
.history .board-tab a {display: inline-block; min-width: 60px; margin-left: 2px; padding: 7px 14px; text-decoration: none; text-align: center; border-radius: 3px 3px 0 0; color: #565656; background: #ececec; Old browsers background: -moz-linear-gradient(top, #ececec 0%, #e7e7e7 49%, #e7e7e7 49%, #dcdcdc 50%, #f9f9f9 100%); FF3.6-15 background: -webkit-linear-gradient(top, #ececec 0%,#e7e7e7 49%,#e7e7e7 49%,#dcdcdc 50%,#f9f9f9 100%); Chrome10-25,Safari5.1-6 background: linear-gradient(to bottom, #ececec 0%,#e7e7e7 49%,#e7e7e7 49%,#dcdcdc 50%,#f9f9f9 100%); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#f9f9f9',GradientType=0 ); IE6-9;}
.history .board-tab a.on {position: relative; background: #fff;}
.history .board-tab a.on:after {position: absolute; bottom: -2px; left: 0; content: ''; display: block; width: 100%; height: 3px; background: #fff;}

.organigation {padding: 30px 0;}
.organigation > .org-box > .org-bx {position: relative; z-index: 2;}
.organigation .org-box {position: relative;}
.organigation .org-box .left-org {position: absolute; top: 0; left: 0; z-index: 1;}
.organigation .org-box .right-org {position: absolute; top: 0; right: 0; z-index: 1;}
.organigation .org-box ~ .org-box .org-bx {padding-top: 80px; position: relative;}
.organigation .org-box ~ .org-box.small-gap .org-bx {padding-top: 30px;}
.organigation .org-box:first-child .org-bx {padding-top: 0;}
.organigation .org-box ~ .org-box .org-bx:before {content: ''; display: block; height: 100%; width: 1px; background: #9a9a9a; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.organigation .org-box .org {width: 100%; background: #fff; position: relative; width: 150px; margin: 0 auto;}
.organigation .org-box .org .tit {padding: 5px; min-height: 30px; background: #fff28c; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 13px; text-align: center;}
.organigation .org-box .org .desc {padding: 5px; min-height: 30px; border: 1px solid #9a9a9a; background: #fff; display: flex; justify-content: center; align-items: center; color: #6d6d6d; font-size: 12px; text-align: center;}
.organigation .org-box .center-org {position: relative; display: flex; padding-top: 60px; justify-content: space-around;}
.organigation .org-box .center-org:before {content: ''; display: block; height: 60px; width: 1px; background: #9a9a9a; position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.organigation .org-box .center-org .org-bx {padding-top: 0; flex: 1;}
.organigation .org-box .center-org .org-box ~ .org-box {margin-left: 30px;}
.organigation .org-box .center-org .org-box,
.organigation .org-box .center-org .org-box .org-bx,
.organigation .org-box .center-org .org-box .org-bx .org {width: 100%;}
.organigation .org-box .center-org .org-box .org-bx {padding-top: 10px;}
.organigation .org-box .center-org .org-box:before {content: ''; display: block; position: absolute; top: 0; left: 0%; width: 150%; height: 1px; background: #9a9a9a;}
.organigation .org-box .center-org .org-box:first-child:before {left: 50%; width: calc(50% + 30px);}
.organigation .org-box .center-org .org-box:last-child:before {left: initial; right: 50%; width: calc(50% + 30px);}
.organigation .org-box .center-org.btm-line .org-box .org-bx {padding-bottom: 10px;}
.organigation .org-box .center-org.btm-line .org-box.btm-line-no .org-bx {padding-bottom: 0;}
.organigation .org-box .center-org.btm-line .org-box:after {content: ''; display: block; position: absolute; bottom: 0; left: 0%; width: 150%; height: 1px; background: #9a9a9a;}
.organigation .org-box .center-org.btm-line .org-box:first-child:after {left: 50%; width: calc(50% + 30px);}
.organigation .org-box .center-org.btm-line .org-box:last-child:after {left: initial; right: 50%; width: calc(50% + 30px);}

.organigation .org-box .left-org .org-box:not(:first-child) .org-bx,
.organigation .org-box .right-org .org-box:not(:first-child) .org-bx {padding-top: 0; margin-top: 10px;}
.organigation .org-box .left-org .org-box .org,
.organigation .org-box .right-org .org-box .org {width: 200px;}
.organigation .org-box .left-org .line-t:before,
.organigation .org-box .right-org .line-t {content: ''; display: block; height: 10px; width: 1px; background: #9a9a9a; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.organigation .org-box ~ .org-box .left-org,
.organigation .org-box ~ .org-box .right-org {padding-top: 80px;}

.organigation .org-box .left-org .org-box:first-child:before {content: ''; display: block; height: 1px; width: 100%; background: #9a9a9a; position: absolute; top: 15px; left: 100%; transform: translateX(0); -webkit-transform: translateX(0);}
.organigation .org-box .left-org .org-box .org-bx:before {content: ''; display: block; height: 1px; width: 20px; background: #9a9a9a; position: absolute; top: 15px; left: 100%; transform: translateX(0); -webkit-transform: translateX(0);}
.organigation .org-box .left-org .org-box .org-bx:after {content: ''; display: block; height: calc(100% + 10px); width: 1px; background: #9a9a9a; position: absolute; top: -10px; left: calc(100% + 20px);}
.organigation .org-box .left-org .org-box:first-child .org-bx:after {top: 15px; height: calc(100% + 10px);}
.organigation .org-box .left-org .org-box:last-child .org-bx:after {top: initial; bottom: calc(100% - 15px); height: 25px;}
.organigation .org-box .left-org .org-box:only-child .org-bx:after {display: none;}

.organigation .org-box .right-org .org-box:first-child:before {content: ''; display: block; height: 1px; width: 100%; background: #9a9a9a; position: absolute; top: 15px; left: initial; right: 100%; transform: translateX(0); -webkit-transform: translateX(0);}
.organigation .org-box .right-org .org-box .org-bx:before {content: ''; display: block; height: 1px; width: 20px; background: #9a9a9a; position: absolute; top: 15px; left: initial; right: 100%; transform: translateX(0); -webkit-transform: translateX(0);}
.organigation .org-box .right-org .org-box .org-bx:after {content: ''; display: block; height: calc(100% + 10px); width: 1px; background: #9a9a9a; position: absolute; top: -10px; right: calc(100% + 20px);}
.organigation .org-box .right-org .org-box:first-child .org-bx:after {top: 15px; height: calc(100% + 10px);}
.organigation .org-box .right-org .org-box:last-child .org-bx:after {top: initial; bottom: calc(100% - 15px); height: 25px;}
.organigation .org-box .right-org .org-box:only-child .org-bx:after {display: none;}

.data-tbl {clear: both;}
.data-tbl table {width: 100%; table-layout: fixed; font-size: 13px;}
.data-tbl table th {padding: 7px 5px; color: #45473c; font-weight: normal; border: 1px solid #cdcccb; border-top: 5px solid #dddfde; background: #f6faec;}
.data-tbl table tr:first-child th:first-child {border-top: 5px solid #9ac12a;}
.data-tbl table td {padding: 7px 5px; color: #45473c; border: 1px solid #cdcccb; text-align: center; background: #ffffff;}
.data-tbl table td.align-left {text-align: left; padding-left: 15px;}