@charset "utf-8";

#sub {letter-spacing:-.03em;}
#sub #footer {border-top:1px solid #ddd;}
/* sub-visual */
.sub-visual {height:550px; background-repeat:no-repeat; background-size:cover; background-position:center center; display:flex; padding:0 15px; align-items:center; justify-content:center; text-align:center;}
.sub-visual01 {background-image:url('../img/sub/sub-visual01.jpg');}
.sub-visual02 {background-image:url('../img/sub/sub-visual02.jpg');}
.sub-visual03 {background-image:url('../img/sub/sub-visual03.jpg');}
.sub-visual04 {background-image:url('../img/sub/sub-visual04.jpg');}
.sub-visual05 {background-image:url('../img/sub/sub-visual05.jpg');}
.sub-visual06 {background-image:url('../img/sub/sub-visual06.jpg');}
.sub-visual010{background-image:url('../img/sub/sub-visual010.jpg');}
.sub-visual h2 {font-size:58px; line-height:1.2em; color:#fff;}

.sub_10_1_ .sub-title {display:none;}
#mb_login {padding-top:100px;}
/* lnb */
#lnb {border-bottom:1px solid #ccc;}
.lnb ul {display:flex;}
.lnb ul li {width:100%; position:relative;}
.lnb ul li:before {content:''; width:1px; height:18px; background:#ccc; position:absolute; top:50%; margin-top:-9px; left:0;}
.lnb ul li:last-child:after {content:''; width:1px; height:18px; background:#ccc; position:absolute; top:50%; margin-top:-9px; right:0;}
.lnb ul li a {height:70px; font-size:18px; line-height:1.6em; color:#666; font-weight:500; display:flex; align-items:center; justify-content:center; text-align:center; position:relative;}
.lnb ul li.active a {color:#003876;}
.lnb ul li a:hover {color:#003876;}
.lnb ul li a:before {content:''; width:0; left:50%; height:1px; background:#003879; position:absolute; bottom:-1px; opacity:0; transition:all 0.4s; z-index:11;}
.lnb ul li.active a:before {width:100%; left:0; opacity:1;}
.lnb ul li a:hover:before {width:100%; left:0; opacity:1;}
.lnb ul li a:after {content:''; width:8px; height:8px; background:#003879; border-radius:50%; position:absolute; left:50%; margin-left:-4px; bottom:-4px;opacity:0;}
.lnb ul li.active a:after {opacity:1;}
/* sub-title */
.sub-title {text-align:center; padding-top:156px; padding-bottom:104px;}
.sub-title p {font-size:20px; font-weight:600; color:#003879; font-family:'Poppins'; line-height:1.5em; margin-bottom:10px;}
.sub-title h3 {font-size:52px; font-weight:600; color:#111; line-height:1.2em;}
/* sub common */
.real-cont {padding-bottom:180px; position:relative;}
/* sub 01 02 */
.greeting-tt {opacity:0.07; position:absolute; bottom:-4px; left:0;}
.greeting .col {display:flex; align-items:center; margin-bottom:100px;}
.greeting .img-box {position:relative; width:1%; flex:1 1 auto; height:580px;}
.greeting .img-box .img {position:absolute; top:0; right:0;}
.greeting .img-box .img img {max-width:none;}
.greeting .tit-box {width:100%; max-width:640px; padding-left:180px;}
.greeting .tit-box h4 {font-size:42px; line-height:1.4em; color:#111; font-weight:600; position:relative; display:inline-block;}
.greeting .tit-box h4:before,
.greeting .tit-box h4:after {content:''; width:110px; height:80px; background-repeat:no-repeat; background-size:cover; position:absolute; opacity:0.07;}
.greeting .tit-box h4:before {background-image:url('../img/sub/greeting-left.png'); top:-100px; left:-100px;}
.greeting .tit-box h4:after {background-image:url('../img/sub/greeting-right.png'); right:-95px; bottom:-100px;}
.greeting .tit-box h4 span {position:relative;}
.greeting .tit-box h4 span:before {content:''; width:calc(100% + 10px); background:rgba(96,165,242,0.2); height:30px; bottom:-5px; left:-5px; position:absolute; z-index:-1;}
.greeting .txt-box {margin-bottom:50px;}
.greeting .txt-box p {font-size:20px; line-height:1.5em; color:#666; margin-bottom:38px;}
.greeting .txt-box p:last-child {margin-bottom:0;}
.greeting .txt-box p strong {color:#003876; font-weight:600;}
.greeting .name {text-align:right;}
.greeting .name p {font-size:24px; line-height:1.4em; color:#333; font-weight:500; margin-bottom:24px;}
.greeting .name h5 {font-size:30px; line-height:1.3em; color:#111; font-weight:600;}
/* sub 01 03 */
.organization .img-box {margin-bottom:146px;}
.organization .txt-box h4 {font-size:44px; font-weight:600; color:#111; line-height:1.2em; margin-bottom:76px; text-align:center;}
.organization table {width:100%; border-collapse:collapse; border-spacing:0; text-align:center;}
.organization table thead th {font-size:20px; font-weight:500; line-height:1.5em; color:#fff; background:#003876; border-right:1px solid #ddd; padding:15px 10px;}
.organization table thead th:first-child {border-radius:10px 0 0 0;}
.organization table thead th:last-child {border-radius:0 10px 0 0; border-right:0;}
.organization table tbody {font-size:20px; line-height:1.5em; color:#666;}
.organization table tbody td {padding:15px 10px; border-bottom:1px solid #ddd; border-left:1px solid #ddd; font-weight:400;}
.organization table tbody td:first-child {font-weight:500; background:#f5f5f5; border-left:0;}
.organization table tbody td p {text-align:left; padding:0 15px; margin-bottom:12px; position:relative;}
.organization table tbody td p:last-child {margin-bottom:0;}
.organization table tbody td p.bl {padding-left:25px;}
.organization table tbody td p.bl:before {content:''; width:5px; height:2px; background:#666; position:absolute; left:15px; top:13px;}
/* sub 04 */
.directions .maps {border-radius:20px; overflow:hidden; margin-bottom:46px;}
.directions .maps .root_daum_roughmap {width:100% !important; height:470px !important;}
.directions .maps .root_daum_roughmap .wrap_map {height:470px !important;}
.directions .maps .root_daum_roughmap .map_border {border:0 !important; width:0 !important; height:0 !important;}
.directions .txt-box {position:relative; padding-right:140px;}
.directions .txt-box .btns {position:absolute; top:0; right:0;}
.directions .txt-box .btns ul {display:flex; margin:0 -5px;}
.directions .txt-box .btns ul li {padding:0 5px;}
.directions .txt-box .btns ul li a {display:block; background:#999; border-radius:5px; transition:all 0.4s;}
.directions .txt-box .btns ul li a:hover {background:#003876;}
.directions .txt-box dl {display:flex; font-size:20px; line-height: 1.5em; margin-bottom:8px;}
.directions .txt-box dt {width:100%; max-width:120px; color:#333; font-weight:600;}
.directions .txt-box dd {width:1%; flex:1 1 auto; color:#666;}
.directions .txt-box dd a {display:inline-block;}

/* sub 05 01 */
.status .year {display:flex; justify-content:center; margin-bottom:36px;}
.status .year ul {display:flex; padding:6px; background:#f4f8fb; border-radius:28px;}
.status .year ul li button {background:#f4f8fb; font-size:16px; line-height:42px; font-weight:500; color:#666; text-align:center; padding:0 20px; border-radius:21px; border:0; transition:all 0.4s; display:block;}
.status .year ul li.active button {background:#003876; color:#fff;}
.status .year ul li button:hover {background:#003876; color:#fff;}
.status .depth {margin-bottom:80px;}
.status .depth ul {display:flex;}
.status .depth ul li {width:20%; position:relative; text-align:center;}
.status .depth ul li:after {content:''; width:1px; height:16px; background:#ddd; position:absolute; top:50%; margin-top:-8px; right:0;}
.status .depth ul li:last-child:after {display:none;}
.status .depth ul li button {font-size:16px; height:64px; line-height:1.5em; display:flex; align-items:center; border:0; border-bottom:2px solid #ddd; color:#666; font-weight:500; transition:color 0.4s; background:transparent; width:100%; justify-content:center; text-align:center;}
.status .depth ul li.active button {border-color:#003876; color:#003876;}
.status .chart-wrap {padding:60px; border-radius:20px; background:#f8f8f8; display:flex; justify-content:space-between;}
.status .chart {width:100%; max-width:630px;}
.status .chart01 {padding-right:10px; position:relative;}
.status .chart02 {padding-left:10px;}
.status .chart01 .tit {padding:16px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ddd; margin-bottom:50px;}
.status .chart01 .tit h4 {font-size:24px; line-height:1.25em; color:#333; font-weight:400;}
.status .chart01 .tit h4 strong {color:#111; font-weight:600; display:inline-block; margin-right:12px;}
.status .chart01 .tit p {font-size:18px; line-height:1.6em; color:#666;}
.status .chart01 .tit p strong {font-weight:600; color:#003876; padding-right:20px; position:relative; display:inline-block;}
.status .chart01 .tit p strong:after {content:''; width:1px; height:16px; background:rgba(0,56,118,0.7); position:absolute; top:50%; margin-top:-8px; right:10px;}

.status .chart02 .box {background:#fff; border:1px solid #ddd; border-radius:10px; padding:50px; height:100%;}
.status .chart02 .box .tit {margin-bottom:24px;}
.status .chart02 .box .tit h4 {font-size:22px; line-height:1.4em; color:#333; font-weight:600;}
.status .chart02 .box .txt {width:100%; max-width:200px; margin:40px auto 0; height:36px; padding:0 30px; background:#f4f8fb; border-radius:5px; display:flex; align-items:center;}
.status .chart02 .box .txt .tt {padding-right:30px; font-size:14px; font-weight:500; color:#333; position:relative;}
.status .chart02 .box .txt .tt:after {content:''; width:1px; height:12px; background:#666; position:absolute; top:50%; margin-top:-6px; right:15px;}
.status .chart02 .box .txt .total {font-size:14px; color:#666;}
.status .table {margin-bottom:60px; display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.status table {width:100%; border-collapse:collapse; border-spacing:0; text-align:center; font-size:16px; line-height:1.667em;}
.status table thead {background:#003876;}
.status table thead th {font-size:18px; line-height:1.5em; color:#fff; font-weight:500; padding:15px 10px; border-right:1px solid #ddd;}
.status table thead th:first-child {border-radius:10px 0 0 0;}
.status table thead th:last-child {border-right:0; border-radius:0 10px 0 0;}
.status table thead td { color:#003876; font-weight:500; background:#f4f8fb; padding:15px 10px; border-bottom:1px solid #ddd; border-left:1px solid #ddd;}
.status table tbody th {color:#003876; font-weight:500; background:#f4f8fb; padding:15px 10px; border-bottom:1px solid #ddd;}
.status table tbody td {color:#666; background:#fff; border-bottom:1px solid #ddd; border-left:1px solid #ddd; padding:15px 10px;}
.status table tfoot th {color:#333; font-weight:500; background:#f8f8f8; border-bottom:1px solid #ddd; padding:15px 10px;}
.status table tfoot td {color:#666; padding:10px 25px; text-align:left; border-bottom:1px solid #ddd; border-left:1px solid #ddd;}


/*
.status  .apexcharts-canvas,
.status  .apexcharts-svg,
.status  .apexcharts-plot-series,
.status  .apexcharts-series path {pointer-events: none !important; cursor: default !important;}

.status  .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-left, 
.status  .apexcharts-legend.apx-legend-position-top.apexcharts-align-left, 
.status  .apexcharts-legend.apx-legend-position-right, 
.status  .apexcharts-legend.apx-legend-position-left {justify-content: flex-end !important;}
.status  .apexcharts-legend-series {display:block !important; padding-left:15px; position:relative;}
.status  .apexcharts-legend-marker {width:6px !important; height:6px !important; position:absolute; left:0 !important; top:7px !important;}
*/

.chart-box {display:flex;}
.chart-box .chart-pie {width:100%; max-width:300px;}
.chart-box .custom-legend {width:1%; flex:1 1 auto; padding-left:20px;}
.chart-box .custom-legend div {font-size:16px; line-height:1.8em; color:#666; position:relative; padding-left:12px;}
.chart-box .custom-legend div span {width:6px; height:6px; position:absolute; left:0; top:10px;}


/* sub 05 02 */
.execution .col {display:flex; justify-content:space-between; margin-bottom:36px;}
.execution .col .row {width:100%; max-width:600px; display:flex; align-items:center;}
.execution .col .row .tit {width:100%; max-width:110px;}
.execution .col .row .tit p {font-size:16px; line-height:1.5em; color:#333; font-weight:700; position:relative; padding-left:30px;}
.execution .col .row .tit p:before {content:''; width:18px; height:18px; background-repeat:no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-9px; left:0; opacity:0.4;}
.execution .col .row .tit.date p:before {background-image:url('../img/sub/execution-date.png');}
.execution .col .row .tit.sort p:before {background-image:url('../img/sub/execution-sort.png');}
.execution .col .row .selec-box {width:100%; padding-left:4px;}
.execution .col .row .selec-box select {width:100%; height:40px; background:#f8f8f8 url('../img/sub/execution-select.png') center right 15px no-repeat; border-radius:5px; padding:0 15px; border:0; font-size:15px; font-weight:300; color:#666; appearance:none;}
.execution .table {display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.execution table {width:100%; border-spacing:0; border-collapse:collapse; text-align:center; font-size:18px; line-height:1.667em;}
.execution table thead {background:#003876;}
.execution table thead th {font-size:20px; line-height:1.5em; color:#fff; font-weight:500; padding:15px 10px; border-right:1px solid #ddd;}
.execution table thead th:first-child {border-radius:10px 0 0 0;}
.execution table thead th:last-child {border-right:0; border-radius:0 10px 0 0;}
.execution table tbody th {color:#003876; font-weight:500; background:#f4f8fb; padding:15px 10px; border-bottom:1px solid #ddd;}
.execution table tbody td {color:#666; background:#fff; border-bottom:1px solid #ddd; border-left:1px solid #ddd; padding:15px 10px;}
.execution table td.percent {padding:10px 8px; text-align:left;}
.execution table td.percent span {font-size:14px; font-weight:600; line-height:40px; border-radius:0 10px 10px 0; display:block; padding:0 10px;}

.execution table tbody td.percent span.red {color:#760000; background:#ead9d9;}
.execution table tbody td.percent span.green {color:#067600; background:#d9ead9;}
.execution table tbody td.percent span.blue {color:#003876; background:#d9e3ea;}



.execution table tfoot th {color:#333; background:#f8f8f8; font-weight:500; padding:15px 10px; border-bottom:1px solid #ddd;}
.execution table tfoot td {color:#333; font-weight:500; padding:15px 10px; border-bottom:1px solid #ddd; border-left:1px solid #ddd;}

.execution table tfoot td.percent span.red {color:#111; background:#ff5454;}
.execution table tfoot td.percent span.green {color:#111; background:#007605;}
.execution table tfoot td.percent span.blue {color:#fff; background:#d9e3ea;}

/* sub 06 01 */
.performance .tab {margin-bottom:76px;}
.performance .tab ul {display:flex;}
.performance .tab ul li {width:20%; position:relative; text-align:center;}
.performance .tab ul li:after {content:''; width:1px; height:16px; background:#ddd; position:absolute; top:50%; margin-top:-8px; right:0;}
.performance .tab ul li:last-child:after {display:none;}
.performance .tab ul li button {font-size:16px; height:64px; line-height:1.5em; display:flex; align-items:center; border:0; border-bottom:2px solid #ddd; color:#666; font-weight:500; transition:color 0.4s; background:transparent; width:100%; justify-content:center; text-align:center;}
.performance .tab ul li.active button {border-color:#003876; color:#003876;}
.performance .cnt {margin-bottom:76px;}
.performance .cnt:last-child {margin-bottom:0;}
.performance .cnt .tit {margin-bottom:36px;}
.performance .cnt .tit h4 {font-size:28px; line-height:1.2em; color:#111; font-weight:600; position:relative; padding-left:20px;}
.performance .cnt .tit h4:before {content:''; width:4px; height:22px; background:#003876; border-radius:2px; position:absolute; top:5px; left:0;}
.performance .table {display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.performance table {width:100%; border-collapse:collapse; border-spacing:0; text-align:center; font-size:18px; line-height:1.667em;}
.performance table thead {background:#003876;}
.performance table thead th {font-size:20px; line-height:1.5em; color:#fff; font-weight:500; padding:15px 10px; border-right:1px solid #ddd;}
.performance table thead th:first-child {border-radius:10px 0 0 0;}
.performance table thead th:last-child {border-right:0; border-radius:0 10px 0 0;}
.performance table thead td { color:#003876; font-weight:500; background:#f4f8fb; padding:15px 10px; border-bottom:1px solid #ddd; border-left:1px solid #ddd;}
.performance table tbody th {color:#003876; font-weight:500; background:#f4f8fb; padding:15px 10px; border-bottom:1px solid #ddd;}
.performance table tbody td {color:#666; background:#fff; border-bottom:1px solid #ddd; border-left:1px solid #ddd; padding:15px 10px;}
.performance table tfoot th {color:#333; font-weight:500; background:#f8f8f8; border-bottom:1px solid #ddd; padding:15px 10px;}
.performance table tfoot td {color:#666; padding:10px 25px; text-align:left; border-bottom:1px solid #ddd; border-left:1px solid #ddd;}
 




.custom-tooltip {
    position: absolute;
    top:0;
    left:0;
    /* background: rgba(0,0,0,0.8); */
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    display: none;
    z-index: 9999;
    white-space: nowrap;
}