@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100&display=swap');


a {text-decoration: none!important;}
hr.gap10 {border: none;height: 10px;margin: 0;padding: 0;}
hr.gap30 {border: none;height: 30px;margin: 0;padding: 0;}
hr.gap50 {border: none;height: 50px;margin: 0;padding: 0;}
hr.gap80 {border: none;height: 80px;margin: 0;padding: 0;}
.carousel-caption-sub .nav {justify-content: center!important;}
.youtube-wrap
{position: relative;width: 100%;padding-bottom: 56.25%;}
.youtube-wrap2
{position: relative;width: 100%;padding-bottom: 100%;}
.youtube-wrap3
{position: relative;width: 100%;padding-bottom: 80.25%;}
.player {position: absolute;width: 100%;height: 100%;background: #000;}

.sec-tit {margin-bottom: 18px; width: 100%;}
.sec-tit span
{color: #444;font-weight: 400;font-size: 24px;position: relative;display: block;padding-left: 20px;font-family: 'Noto Sans KR'; letter-spacing: -0.07em;word-break: keep-all;}
.sec-tit span::before,.sec-tit span::after
{content: "";position: absolute;width: 10px;height: 10px;border-radius: 100%;}
.sec-tit span::before
{left: 0;top: 5px; background: #c9c9c9;}
.sec-tit span::after
{left: 6px; top: 10px; background: #1f75c0;}

.sub-nav {margin: 50px auto 50px;}
.sub-nav li {width: 20%;padding-right: 10px;}
.w2 > li {width: 50%;}
.w3 > li {width: 33.33%;}
.sub-nav li:last-child {padding-right: 0;}
.sub-nav li a
{display: block;border: 1px solid #ddd;background: #f7f7f7; font-size: 17px;color: #666;padding: 10px 5px;}
.sub-nav li.on a,
.sub-nav li:hover a
{background: #023caa;border-color: #023caa;color: #fff;}

.cont-tit
{text-align: left;font-size: 52px;color: #70be55;font-weight: 900;}
.aside-area h5
{font-size: 18px;font-weight: 500;color: #444;margin: 8px 0 0px;font-family: 'Noto Sans KR';padding-left: 35px;letter-spacing: -0.02em;}
.aside-area .sec-tit {padding-left: 15px;}
.aside-area li
{font-size: 16px;color: #666;}
.img-area {margin-top: 30px;}

.spec {padding-left: 20px;}
.spec li {position: relative;padding-left: 15px;margin-bottom: 10px;}
.spec li::before
{content: ""; position: absolute; width: 10px; height: 10px; border-radius: 100%; background: #1f75c0; left: 0; top:9px;}
.spec li p
{font-size: 18px;margin: 30px 0 15px;font-weight: 400;font-family: 'Noto Sans KR';margin: 0;color: #444;}

.sub-spec {padding-left: 20px;}
.sub-spec li {position: relative;padding-left: 15px;margin-bottom: 5px;}
.sub-spec li::before
{content: ""; position: absolute; width: 5px; height: 5px; border-radius: 100%; background: #1f75c0; left: 0; top:10px;}
.sub-spec li dt {font-size: 16px;font-weight: 500;font-family: 'Noto Sans KR';margin: 0;color: #444; display: inline-block;width: 28%; vertical-align: top;}
.sub-spec li dd {font-size: 16px;font-weight: 400;font-family: 'Noto Sans KR';margin: 0;color: #666; display: inline-block;width: 70%; word-break: keep-all;}
.sub-spec li p {font-size: 16px;font-weight: 300;font-family: 'Noto Sans KR';margin: 0;color: #666;word-break: keep-all;}
.sub-spec.dt-s li dt {width: 9%;}
.sub-spec.dt-s li dd {width: 90%;}

.sub-spec.dt-m li dt {width: auto; padding-right: 5px;}

.spec .sub-spec {padding-left: 0;    margin-top: 10px;}
.spec .sub-spec li {margin-bottom: 5px;padding-left: 12px;}
.spec .sub-spec li::before {top: 10px;}


.img-wrapper {padding-left: 20px; text-align: center;}
.bd-area {border: 1px solid #ddd;}
.bd img {border: 1px solid #ddd; padding: 15px 0;}
.img-wrap.bd img {padding: 0;}
.cont-tit
{text-align: left;font-size: 30px;color: #333;font-weight: 600;position: relative;padding-left: 35px;font-family: 'Noto Sans KR'; letter-spacing: -0.05em;}
.cont-tit::before
{content: "";position: absolute;left: 0;top: 9px;width: 24px;height: 24px;border-radius: 100%;border: 5px solid #344398;}

.cont-tit-center {text-align: center;}
.cont-tit-center span {font-size: 30px;color: #333;font-weight: 600;position: relative;padding-left: 35px;font-family: 'Noto Sans KR'; letter-spacing: -0.05em;}
.cont-tit-center span::before
{content: "";position: absolute;left: 0;top:13px;width: 24px;height: 24px;border-radius: 100%;border: 5px solid #344398;}

.aside-area .spec
{padding-left: 40px;margin: 15px 0;}
.aside-area .img-area {padding-left: 35px;}
.cont-g img {max-width: 100%;}
.modal-dialog {max-width: 80%;    margin: 0 auto;}
.modal-header .close {font-size: 35px;}
.btn-danger {font-size: 16px;}
button.btn {font-size: 16px;}


#search_table {margin: 0 auto;}


.certi h5
{font-size: 18px;font-weight: 500;color: #444;margin: 8px 0 0px;font-family: 'Noto Sans KR';letter-spacing: -0.02em;}
.pdnone {font-family: 'Noto Sans KR';font-size: 17px; font-weight: 300; letter-spacing: -0.02em; color: #545454;margin-bottom: 0; word-break: keep-all;}
strong {color: #023caa;}
.cont-g table {width: 100%; border-top: 3px solid #576fb9; border-bottom: 3px solid #576fb9;}
.cont-g table thead tr {border-bottom: 2px solid #576fb9;}
.cont-g table tbody tr {border-bottom: 1px solid #576fb9;}
.cont-g table tbody tr:last-child {border-bottom: none;}
.cont-g table thead th, .cont-g table tbody th, .cont-g table tbody td {border-right: 1px solid #576fb9;padding: 5px;}
.cont-g table thead th:last-child, .cont-g table tbody td:last-child {border-right: none;}

.cont-g table thead th:first-child {width: 10%;}
.cont-g table thead th:nth-child(2) {width: 45%;}
.cont-g table thead th:nth-child(3) {width: 45%;}
.cont-g table thead th,.cont-g table tbody th {font-family: 'Noto Sans KR'; font-size: 16px; color: #708dd3; letter-spacing: -0.02em; font-weight: 500; word-break: keep-all;}
.cont-g table tbody td {font-family: 'Noto Sans KR'; font-size: 15px; color: #545454; letter-spacing: -0.02em; font-weight: 300;}
.pdl {padding-left: 20px;}

.img-tit {color: #656b8f; font-family: 'Noto Sans KR'; font-size: 17px; letter-spacing: -0.02em; font-weight: 500;margin-bottom: 15px;}
.img-txt {color: #666; font-family: 'Noto Sans KR'; font-size: 15px; letter-spacing: -0.02em; font-weight: 400;margin-top: 10px;}

.img-area .d-flex .sub-spec {padding-left: 0;margin-top: 20px;}
.img-area .d-flex .sub-spec li {margin-bottom: 0;padding-left: 10px;}
.img-area .d-flex .sub-spec li::before {top: 9px;}
.img-area .d-flex .sub-spec li p {font-size: 15px;letter-spacing: -0.05em;}
.sub-spec li p strong {font-size: 1.1em; font-weight: 700;color: #576fb9;}

.img-area.bd-area .d-flex > li {border-right: 1px solid #ddd;    padding: 20px 0;}
.img-area.bd-area .d-flex > li:last-child {border-right: none;}
.pdl .row .pdnone {font-weight: 500;  margin-top: 20px;}

td .sub-spec li:last-child {margin-bottom: 0;}
td ul {margin-bottom: 0;}


.box-list {margin-bottom: 0;height: 100%;}
.box-list li {color: #fff; font-family: 'Noto Sans KR'; font-size: 17px; letter-spacing: -0.02em; font-weight: 500;margin-bottom: 0px;background: #708dd3; padding: 10px; border-radius: 50px;  width: 240px;}





.his_list {position: relative; width: 100%;}
.his_list ul{margin:0 auto!important; padding:0!important;}
.his_list ul li {margin-bottom: 50px; list-style-type: none;  display: flex; flex-direction: row; align-items: center;position: relative;}
.his_point {
    min-width: 15px;
    height: 15px;
    background-color: #708cd3;
    border-radius: 100%;
    z-index: 2;
    border: 3px #fff solid;
    position: absolute;
    top: 10px;
    left: -4px;
    transition: all 0.5s;
}
.his_list ul li:hover .his_point {background: #334295; border-color: #334295;}
.his_list h3 {
    text-align: left;
    font-size: 28px;
    margin-bottom: 2v0px!important;
    font-family: 'Lato'!important;
    color: #334295;
    font-weight: 700;
}
.his_list ul li .his_content {width: 100%; padding-left: 60px}
.his_list ul li .date {width: 50%;padding: 0 20px;font-weight: normal;}
.his_list p {font-family: 'Noto Sans KR';margin-bottom: 0; color: #7b7878; font-size: 17px!important;}
.his_list::before
{content: "";position: absolute; height: 105%; width: 6px;top: -2%; left: 0; background-color: #efefef;}
.h_no {display: inline-block; color: #333; font-weight: 700; vertical-align: top;padding-right: 15px;}
.h_cons{display: inline-block;padding-left: 0px;}
.h_cons br{display: inline-block!important;}


.modal {z-index: 9999999999!important;}

#footerwrap {border-top: 1px solid #ddd; }

.lnb-menu a:hover {border-top: none!important;}



.lnb-menu{position:relative;top:-48px;width:100%;padding:12px 0 0 0;text-align:center;font-size:14px;font-weight:normal;}
.lnb-menu a:link{color:#fff;padding:12px 0 0 0;}
.lnb-menu a:visited{color:#fff;padding:12px 0 0 0;}
.lnb-menu a:hover{color:#023caa;border-top:1px solid #023caa;padding:12px 0 0 0;}
.lnb-menu .on{color:#023caa;border-top:1px solid #023caa;padding:12px 0 0 0; font-weight: 700;}
.lnb-line{color:#ccc;font-size:10px;margin:0 20px 0 20px;position:relative;top:-1px;}
.lnb-tline{position:relative;top:-48px;border-top:1px solid #fff;opacity:0.2;}
#lnb-wrap {position:relative;top:0px;height:30px;list-style: none;width:100%;margin:0 0 26px 0;z-index:100;}
#lnbmenu,
#lnbmenu ul,
#lnbmenu ul li,
#lnbmenu ul li a {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#lnbmenu {width: 100%;height:30px;}
#lnbmenu ul ul {display: none;}
.align-right {float: right;}
#lnbmenu > ul > li > a {
  padding: 12px 20px;
  border-left: 0px solid #5a85c4;
  border-right: 0px solid #5a85c4;
  border-top: 0px solid #5a85c4;
  cursor: pointer;
  z-index: 2;
  font-size:1.5em;
  text-align:center;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
#lnbmenu > ul > li > a:hover,
#lnbmenu > ul > li.active > a,
#lnbmenu > ul > li.open > a {
  color: #fff;
  background:#5a85c4;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 18px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}
#lnbmenu > ul > li > a:hover > span::after,
#lnbmenu > ul > li.active > a > span::after,
#lnbmenu > ul > li.open > a > span::after {
  border-color: #fff;
}
.holder::before {
  top: 19px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#lnbmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  border-left: 0px solid #00a8e1;
  border-right: 0px solid #00a8e1;
  padding: 16px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  color: #5b5c5e;
  background: #eee;
  box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.1);
}
#lnbmenu ul ul li:hover > a,
#lnbmenu ul ul li.open > a,
#lnbmenu ul ul li.active > a {
  background: #eee;
  color: #5b5c5e;
}
#lnbmenu ul ul li:first-child > a {
  box-shadow: none;
}
#lnbmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#lnbmenu ul ul ul li a {
  padding-left: 30px;
}
#lnbmenu > ul > li > ul > li:last-child > a,
#lnbmenu > ul > li > ul > li.last > a {
  border-bottom: 1px solid #ccc;
}
#lnbmenu > ul > li > ul > li.open:last-child > a,
#lnbmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#lnbmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#lnbmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#lnbmenu ul ul li.active > a::after,
#lnbmenu ul ul li.open > a::after,
#lnbmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}




.sub-side-tab .side_flaoting {position: absolute;top: 450px; }
.sub-side-tab.scroll .side_flaoting
{position: fixed; top: 150px;}


.w4 li {width: 25%;}
.flow-list {justify-content: center;}
.flow-list li {
    max-width: 230px;
    height: 230px;
    border-radius: 100%;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.05em;
/*    background: #ddd;*/
    margin-right: 30px;
    color: #fff;
    position: relative;
}
.flow-list li:nth-child(1) {background-color: #4bcee3;}
.flow-list li:nth-child(2) {background-color: #5a9ed5;}
.flow-list li:nth-child(3) {background-color: #718dd3;}
.flow-list li:nth-child(4) {background-color: #354498;}
.flow-list li p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.flow-list li::before {
    content: "";
    position: absolute;
    right: -23px;
    top: 50%;
    border-left: 15px solid #023caa;
    border-right: 0px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: translateY(-50%);
}
.flow-list li:last-child::before {display: none;}



.flow-row p {font-size: 15px;margin: 0px auto; color: #fff;}
.flow-row p strong {font-size: 1.1em;margin-bottom: 5px;}
.flow-row li {padding: 12px 0px 10px 100px;position: relative;height: 70px;}
.flow-row li::after {content: ""; position: absolute; z-index: 1;right: -40; top: 0;border-left: 40px solid ; border-top: 35px solid transparent;border-bottom: 35px solid transparent;border-right: 0px solid transparent;}

.flow-row li:nth-child(1) {background-color: #a7d1f5;width: calc(25% - 40px);padding-left:50px;z-index: 5;}
.flow-row li:nth-child(1)::after {border-left: 40px solid #a7d1f5;}
.flow-row li:nth-child(2) {background-color: #77c1ff; animation-delay: 0.2s;z-index: 4;}
.flow-row li:nth-child(2)::after {border-left: 40px solid #77c1ff;}
.flow-row li:nth-child(3) {background-color: #a1c2ff; animation-delay: 0.4s;z-index: 3;}
.flow-row li:nth-child(3)::after {border-left: 40px solid #a1c2ff;}
.flow-row li:nth-child(4) {background-color: #adacff;z-index: 2; animation-delay: 0.6s;}
.flow-row li:nth-child(4)::after {border-left: 40px solid #adacff;}


.text-center.aside-area h5 {padding-left: 0;}

.goto-link {flex-wrap: wrap;}
.goto-link li {margin-right: 5px;}
.goto-link li p {color: #023caa;font-weight: 500;font-size: 17px;font-family: 'Noto Sans KR'; letter-spacing: -0.05em; border: 1px solid; margin-top: 5px;}

.goto-link li:hover img {opacity: 0.6;}
.goto-link li:hover p {background-color: #023caa; color: #fff;border-color:  #023caa;}






@media (max-width: 1199px){
    .sub-map-bg .img-area.text-center {text-align: left!important;    padding: 0 65px;}
    .tab-content .business-explain h2 span {float: initial!important;}
    .sub-map-bg {margin: 0 auto!important;max-width: 530px;}
    .sub-side-tab {display: none!important;}
}


.navbar-inverse .navbar-nav .open .dropdown-menu > li > a
{font-size: 14px;}


@media (max-width: 575px){

    .his_list::before{left:0;}
    .his_list ul li .his_content { width: 100%;padding-left: 30px;}
    history-table {margin-top: 50px;}

}


@media (max-width: 480px){
    .h_cons{display: block; font-size: 14px; padding-left: 0; letter-spacing: -0.02em;}

}







@media screen and (max-width: 1200px){
    .flow-row {flex-wrap: wrap;}
    .sub-nav li {width: auto!important;}
    .sub-nav ul {justify-content: center; flex-wrap: wrap;}
    .modal-dialog {max-width: 100%; margin-top: 2%;}
    .flow-row li {padding-left: 80px!important;}
}
@media screen and (max-width: 1024px){
    .flow-list {flex-wrap: wrap;}
    .flow-list li {width: 150px; height: 150px; font-size: 15px; margin-bottom: 10px;}
    .flow-row li {width: 25%!important;padding-left: 60px!important;}
}
@media screen and (max-width: 992px){
    .flow-row li {width: 40%!important;}
    #lnb-wrap {display: none!important;}
    #menu-container01 .navbar-wrapper .navbar .container { width: 100%!important;}
    #menu-container01 .container > .navbar-header { width: 100%!important;}
    .lnb-menu a {padding: 0px!important;    margin: 0 10px;}
    .lnb-menu a span {display: inline-block;border: 1px solid; padding:5px 10px!important;}
    .lnb-menu {padding: 0!important;top: -5%!important;}
    .sub-spec li dt, .sub-spec li dd ,.sub-spec.dt-s li dt,.sub-spec.dt-s li dd
    {display: block; width: 100%;}
}
@media screen and (max-width: 768px){
    .carousel-caption-sub {bottom: 45%!important;}
    .lnb-menu a span {padding: 5px!important;}
    .lnb-menu a {margin: 0 5px!important;}
    td .sub-spec {padding-left: 0;}
    .pdnone br {display: none!important;}
}
@media screen and (max-width: 680px){

    .flow-row li {width: 90%!important;}
    #lnb-wrap {display: block!important;}
    .lnb-menu {display: none!important;}
    .carousel-caption-sub {bottom: 35%!important;}
    .sub-nav li a {font-size: 14px; padding: 5px;    letter-spacing: -0.05em;}
    .sub-nav li {padding-right: 2px; padding-bottom: 5px;}
    .sub-spec li p {font-size: 14px;}
}
@media screen and (max-width: 575px){
    .flow-list li {width: 120px; height: 120px; word-break: keep-all; font-size: 14px;}
    .flow-list li p br{display: none!important;}
        .tlogo img {max-height: 50px;}

    #lnb-wrap {top: -30px;}

    .cont-tit-center span, .cont-tit {font-size: 24px;     padding-left: 20px;}
    .cont-tit-center span::before, .cont-tit::before {width: 14px; height: 14px; top: 11px;}
    .aside-area h5 {padding-left: 20px;font-size: 15px;}
    .aside-area .spec {padding-left: 20px;}
    .spec li {margin-bottom: 5px;}
    .spec li::before {width: 5px; height: 5px;}
    .spec li p {font-size: 14px; }
    .sec-tit {margin-bottom: 10px;}
    .sec-tit span {font-size: 18px; }
    .sec-tit span::before, .sec-tit span::after {width: 8px; height: 8px;}




}
