.common_banner.sub_banner {background-size:cover !important;}
.common_banner.sub_banner .con{width:1200px; margin:0 auto; position:relative; z-index:2; height:300px; }
.common_banner.sub_banner .sb_txt {text-align:center; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width: 100%;}
.common_banner.sub_banner .sb_txt h1 {font-size:38px; font-weight:800; color:#fff; line-height:45px;width: 100%;}
.common_banner.sub_banner.sub_banner_1 {background:url("/assets/sub-banner/sub-banner-1.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_2 {background:url("/assets/sub-banner/sub-banner-2.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_3 {background:url("/assets/sub-banner/sub-banner-3.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_4 {background:url("/assets/sub-banner/sub-banner-4.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_5 {background:url("/assets/sub-banner/sub-banner-5.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_5.sub_banner_5-3{background:url("/assets/sub-banner/sub-banner-6.png") no-repeat;}

/* .common_banner.sub_banner.sub_banner_2-1 { background:url("/assets/sub-banner/sub-banner-2-1.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_2-2 { background:url("/assets/sub-banner/sub-banner-2-2.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_2-3 { background:url("/assets/sub-banner/sub-banner-2-3.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_2-4 { background:url("/assets/sub-banner/sub-banner-2-4.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_2-5 { background:url("/assets/sub-banner/sub-banner-2-5.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_2-6 { background:url("/assets/sub-banner/sub-banner-2-6.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_2-7 { background:url("/assets/sub-banner/sub-banner-2-7.jpg") no-repeat;}
.common_banner.sub_banner.sub_banner_2-8 { background:url("/assets/sub-banner/sub-banner-2-8.jpg") no-repeat;} */

.mobile-tab-wrap {display:none;}

.clear::after {content:""; display:block; clear:both;}

/* 404 */
.common_banner.sub_banner.error-404 {background:url("/assets/sub-banner/sub-message.jpg") no-repeat center center; background-size:cover;}




.pc {}
.mobile {display:none;}

/* 서브시작 */
.sub-container {padding-top:60px;}

.sub-page-wrap {padding-top:100px;}

.common-tit {text-align:left;}
.common-tit h2 {color:#254C78; font-size:21px; font-weight:800; position:relative; padding:0 10px; display:inline-block; z-index:2;}
.common-tit h2::after {content:""; background:#FFCC00; border-radius:8px; overflow:hidden; position:absolute; left:0; bottom:-6px; width:100%; height:15px; z-index:-1;}

.aa-tab-list {margin-top:30px;}
.aa-tab-list ul {margin:0 -40px;}
.aa-tab-list ul::after {content:""; display:block; clear:both;}
.aa-tab-list ul li {color:#999999; font-size:34px; font-weight:800; margin:0 40px; float:left; cursor:pointer;}
.aa-tab-list ul li.on {color:#00A0E9;}

.aa-tab-content {margin-top:50px;}
.tab-content {display:none;}
.tab-content.on {display:block;}

.tbl-certi {}
.tbl-certi table {width:100%; table-layout:fixed; border-top:1px solid #2E2E2E;}
.tbl-certi table tr {border-bottom:1px solid #DDDDDD; cursor:pointer;}
.tbl-certi table tr:hover {background:#fbfbfb;}
.tbl-certi table th.year {font-size:18px; font-weight:600; color:#254C78; padding:35px 0; text-align:left; width:90px; vertical-align: middle; }
.tbl-certi table td.name {text-align:left; font-size:21px; font-weight:700; color:#444444; vertical-align: middle;}
.tbl-certi table td.detail {padding: 10px 0; vertical-align: middle; text-align:right; font-size:16px; font-weight:600; color:#999999;}
.tbl-certi table td.detail::after {content:""; background:url("/assets/images/Icon feather-search.png") no-repeat; width:15px; height:15px; display:inline-block; background-size:contain; margin:0 20px; position:relative; top:2px;}

/* 사업분야 */
.tit-img-txt-box {margin-top:30px;}
.tit-img-txt-box .t1 {font-size:42px; color:#444444; font-weight:800;}
.tit-img-txt-box .img {height:432px; border-radius:30px; overflow:hidden; margin-top:50px;}
.tit-img-txt-box .img img {width:100%; height:100%; object-fit: cover;}
.tit-img-txt-box .txt {font-size:20px; font-weight:500; line-height:34px; color:#555555; margin-top:30px;}

.step-list {text-align:center; margin:100px auto 140px;}
.step-list ul {display:flex;}
.step-list ul::after {content:""; clear:both; display:block;}
.step-list ul li {width:200px; margin-right:7vw; float:left; position:relative;}
/* .step-list ul li::after {content:""; width:13.5px; height:23.6px; background:url("/assets/images/Icon ionic-ios-arrow-forward.png") no-repeat; background-size:contain; position:absolute; right:0; top:50%; transform:translateY(-50%);} */
.step-list ul li:last-child {margin-right:0;}
.step-list ul li .st {text-align:left;}
.step-list ul li .st span {color:#666666; font-size:16px; font-weight:700; position:relative; padding-left:22px;}
.step-list ul li .st span::before {content:""; width:12px; height:12px; border-radius:50%; background:#FFCC00; position:absolute; top:3px; left:0;}
.step-list ul li .icon {height:160px; width:100%; border-radius:15px; border:1px solid #EEEEEE; display:flex; align-content: center; justify-content: center; align-items: center; margin-top:15px; position:relative;}
.step-list ul li .icon::after {content:""; width:13.5px; height:23.6px; background:url("/assets/images/Icon ionic-ios-arrow-forward.png") no-repeat; background-size:contain; position:absolute; right:-72px; top:50%; transform:translateY(-50%);}
.step-list ul li:last-child .icon::after {content:none;}
.step-list ul li .icon img {}
.step-list ul li .txt {font-size:16px; font-weight:700; line-height:22px; margin-top:15px; color:#444444;}

.tbl-content {margin-top:40px;}
.tbl-content .tbl-list {margin-bottom:20px;}
.tbl-content .tbl-list .tbl-tit {background:#FBFBFB; height:60px; display:flex; color:#254C78; font-size:18px; font-weight:600; align-items: center; justify-content: flex-start; align-content: center; border-radius:10px; overflow:hidden; padding-left:30px; cursor:pointer;}
.tbl-content .tbl-list .tbl-tit svg {margin-right:15px;}
.tbl-content .tbl-list.on .tbl-tit {background:#254C78; border-radius:10px 10px 0 0; color:#fff;}

.tbl-wrap {margin-bottom:30px;}
table.dataTable {width:100% !important;}
table.dataTable thead th {text-align:center; background:#FBFBFB; color:#254C78; font-size:17px; font-weight:600; padding-top:15px; padding-bottom:15px;}

table.dataTable thead th {border-bottom: 1px solid #EEEEEE !important;}
table.dataTable thead tr th {height: 30px; vertical-align: middle;}
table.dataTable tbody td {border-bottom: 1px solid #EEEEEE !important;}
table.dataTable tbody tr {border-bottom: 1px solid #EEEEEE !important; height: 60px;}
table.dataTable.no-footer {border-bottom: none;}


/* 순수설비 */
table.dataTable thead th:nth-child(1) {width: 50px;}
table.dataTable thead th:nth-child(2) {text-align:left;}
table.dataTable thead th:nth-child(3) {width: 460px;}
table.dataTable thead th:nth-child(4) {width: 260px;}
table.dataTable thead th:nth-child(5) {width: 100px;}
table.dataTable td:nth-child(2) {text-align:left;}
/* table.dataTable td:nth-child(3) {text-align:right;} */
/* table.dataTable td:nth-child(4) {text-align:right;} */
/* table.dataTable td:nth-child(5) {text-align:right;} */
/* 순수설비 */



/* 초순수설비 */
table.dataTable thead .ultrapure-1 {width: 67px !important;}
table.dataTable thead .ultrapure-2 {width: 427px !important;}
table.dataTable thead .ultrapure-3 {width: 473px !important;}
table.dataTable thead .ultrapure-4 {width: 310px !important;}
table.dataTable thead .ultrapure-5 {width: 100px !important;}

table.dataTable .ultra {padding-right: 24px !important; font-size: 16px; color: #555;}




/* 해수담수화 설비, 폐수 방류수 재이용 설비 */
table.dataTable thead .seawater-3 {width: 280px !important;}
table.dataTable thead .seawater-4 {width: 265px;}
table.dataTable thead .seawater-5 {width: 160px !important;}
table.dataTable thead .seawater-6 {width: 100px;}
/* 해수담수화 설비, 폐수 방류수 재이용 설비 */




table.dataTable thead>tr>th.sorting::after {content: none;}
table.dataTable thead>tr>th.sorting::before {content: none;}

table.dataTable tbody th, table.dataTable tbody td {text-align:center; vertical-align: middle; font-size:16px; font-weight:400;}
.dataTables_wrapper .dataTables_paginate {}
.dataTables_wrapper .dataTables_paginate span {display: inline-block;}
.dataTables_wrapper .dataTables_paginate a {}
/* .dataTables_wrapper .dataTables_paginate .paginate_button {border:1px solid #ddd !important; font-size:12px !important; background:none !important; color:#666666 !important; border-radius:3px; padding:0; width:26px; height:26px; line-height:26px; vertical-align: top;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {color:#666666 !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next  {border:none !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous i, .dataTables_wrapper .dataTables_paginate .paginate_button.next i {line-height:24px;}
.1-dataTables_wrapper .dataTables_paginate .paginate_button.current {background:#FFCC00 !important; color:#fff !important; border:1px solid #FFCC00 !Important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {color:#fff !important;} */
.toolbar2 {margin-top:10px;}
.dataTables_wrapper .dataTables_paginate {float:none; text-align:center;}
.dataTables_wrapper table.dataTable tbody td:nth-child(2) {text-align:left;}
.dataTable .view-btn {width:16px; padding:0; border:none; outline:none; pointer-events: none;}
.dataTable .view-btn svg {stroke:#CCCCCC;}
.dataTable .view-btn.active {pointer-events:auto;}
.dataTable .view-btn.active svg {stroke:#555555;}
.dataTable .view-btn svg {max-width:100%;}

.tbl-content .button {text-align: center; margin-top: 25px;}
.tbl-content .button .page-button {border-radius: 5px; background: #FBFBFB; color: #999999; font-size: 14px; font-weight: 600; padding: 7px 11px; margin-right: 10px;}
.tbl-content .button .page-button.active {border-radius: 5px; background: #FFCC00; color: white; font-size: 14px; font-weight: 600; padding: 7px 11px;}



.white-popup-block.st2 {max-width:1000px; background:none; backdrop-filter:none; margin:0 auto;}
.mfp-close-btn-in .white-popup-block.st2 .mfp-close {right:10px; top:10px; font-size:35px;}
.popup-contents {padding:0; border-radius: 15px; overflow:hidden;}
.swiper-pic .swiper-slide {height:600px; background:#fff; cursor:pointer;}
.swiper-pic .swiper-slide img {width:100%; height:100%; object-fit: cover;}
.swiper-pic .swiper-button-prev:after, .swiper-pic .swiper-button-next:after {color:#fff;}

.swiper-thumb {margin-top:10px;}
.swiper-thumb .swiper-slide {height:108px; cursor:pointer;}
.swiper-thumb .swiper-slide img {width:100%; height:100%; object-fit: cover;}


table.dataTable.order-column>tbody tr>.sorting_1, table.dataTable.order-column>tbody tr>.sorting_2, table.dataTable.order-column>tbody tr>.sorting_3, table.dataTable.display>tbody tr>.sorting_1, table.dataTable.display>tbody tr>.sorting_2, table.dataTable.display>tbody tr>.sorting_3 {box-shadow:none ;}

/* 문의하기 */
.contact-tit {display:flex;     justify-content: space-between; align-items: center; margin-top:30px;}
.contact-tit h3 {color:#444444; font-size:42px; font-weight:800; display:inline-block;}
.contact-tit .ic-list {}
.contact-tit ul {float:right;}
.contact-tit ul::after {content:""; display:block; clear:both;}
.contact-tit ul li {color:#666666; font-size:16px; font-weight:500; border-radius:10px; background:#FBFBFB; display:flex; float:left; padding:15px 35px; margin-left:15px;     align-items: center; justify-content: center;}
.contact-tit ul li::first-child {margin-left:0;}
.contact-tit ul li i {color:#CCCCCC; font-size:20px; margin-right:10px;}

.form {margin-top:50px; margin-bottom:120px;}
.form .row {margin-bottom:50px !important;}
.form .row.mb30 {margin-bottom:30px !important;}
.form .row::after {content:""; display:block; clear:both;}
.form .row .col {}
.form .row.row-1 {}
.form .row.row-1 .col {} 
.form .row.row-2 {margin:0 -1%;}
.form .row.row-2 .col {width:48%; margin:0 1%; float:left;}
.form .row label {color:#444444; font-size:20px; font-weight:700;}
.form .row label span.need {color:#E81818;}
.form .row .ipt-base {border:none; outline:none; background:none; box-sizing:border-box; width:100%; font-size:16px; font-weight:500; line-height:24px;}
.form .row input.ipt-base {border-bottom:1px solid #DDDDDD; height:41px; margin-top:5px;}
.form .row select.ipt-base {border:1px solid #DDDDDD; border-radius:10px; height:53px; margin-top:10px; color:#999999;}

/* .form .row .sch-select {float:left; vertical-align: top; } */
.form .row .nice-select {background:none; border:none; width:100%; padding-right:40px;
    border:1px solid #DDDDDD; border-radius:10px; height:53px; margin-top:10px; color:#999999; line-height:51px;
}
.form .row .nice-select span{line-height: 51px;}
.form .row .nice-select:after {border-color:#CCCCCC; width:10px; height:10px; margin-top:-9px; right:33px;}
.form .row .nice-select .option {color:#666;}
.form .row .nice-select .option:hover, .form .row .nice-select .option.focus, .form .row .nice-select .option.selected.focus {background:#eee; color:#254c78; font-weight: 500;} 
.nice-select.open .list {width: 100%;}

.form .row textarea.ipt-base {resize:none; height:140px; border:1px solid #DDDDDD; border-radius:10px; line-height: 24px; padding:15px 20px; margin-top:10px;  font-size: 18px; font-weight:400; color: #555; font-family:'Pretendard', sans-serif !important;}
.form .row.row-btn {display:flex;     justify-content: space-between;}
.form .row.row-btn::after {content:none;}
.form .row.row-btn label {color:#999999; font-size:16px; font-weight:500; cursor:pointer;}
.form .row.row-btn a {color:#CCCCCC; font-size:16px; font-weight:500; cursor:pointer; margin-left:20px;}
.form .row.row-btn a:hover {color:#254C78;}
.form .row.row-btn button {color:#fff; background:#254C78; font-size:16px; font-weight:700; height:46px; padding:0 65px; border-radius:5px;}

.form .row .ipt-base::placeholder {}

/* IE10 이상을 위한 css */
input::placeholder, textarea::placeholder {
    color:#CCCCCC;
    opacity: 1; /* 파이어폭스에서 뿌옇게 나오는 현상을 방지하기 위한 css */
    font-weight:400;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color:#CCCCCC;
    font-weight:400;
  }
  /* IE */
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color:#CCCCCC;
    font-weight:400;
  }
  /* Firefox */
  input:-mos-input-placeholder, textarea:-mos-input-placeholder {
    color:#CCCCCC;
    font-weight:400;
  }

.white-popup-block.st2 {max-width:1000px; /*background:#fff;*/ backdrop-filter:none; margin:50px auto; position:relative;}
.mfp-close-btn-in .white-popup-block.st2 .mfp-close {right:10px; top:10px; font-size:35px; color:#fff; background:rgb(0 0 0 /80%);}
.popup-contents {padding:0; border-radius: 0; overflow:hidden;}
.popup-contents .tit {font-size:30px; font-weight:700; text-align:center; margin-top:100px;}
.popup-contents .txt-only {padding:100px 100px;}
.popup-contents .txt-only pre {white-space: pre-wrap; line-height:1.6;}


/* magnificpopup 팝업 모바일 스크롤 문제 */
body { -webkit-overflow-scrolling: touch; } 
body.mfp-active { overflow: hidden; -webkit-overflow-scrolling: auto; width: 100%; position: fixed; overflow: auto; } 
body .mfp-wrap { position: fixed; overflow: auto; top: 0 !important; }


/* 카탈로그 */
.catalog-wrap {margin-top:50px;}
.catalog-wrap .row {margin-bottom:100px;}
.catalog-wrap .row .col {}
.catalog-wrap .row .col .cata-box {}
.catalog-wrap .row .col .cata-box .tit { font-size:21px; font-weight:700; color:#444444; line-height:34px; border-bottom:1px solid #DDDDDD; margin-bottom:25px; padding-bottom:10px;}
.catalog-wrap .row .col .cata-box .tit span.cnt {font-size:21px; font-weight:400; color:#999999;}
.catalog-wrap .row .col .cata-box .list {}
.catalog-wrap .row .col .cata-box .list ul {margin:0 -20px;}
.catalog-wrap .row .col .cata-box .list ul::after {content:""; display:block; clear:both;}
.catalog-wrap .row .col .cata-box .list ul li {width:300px; border:1px solid #EEEEEE; float:left; margin:0 20px; cursor:pointer;}
.catalog-wrap .row .col .cata-box .list ul li .thumb {width:100%; height:423px; background:#F9F9F9;}
.catalog-wrap .row .col .cata-box .list ul li .thumb img {width:100%; height:100%; object-fit:cover;}

.catalog-wrap .row:nth-of-type(1) .col:nth-of-type(1){margin-bottom: 100px;}

/* R&D */
.r-d-tit {margin-top:30px;}
.r-d-tit .row {display:flex;     justify-content: space-between; align-content: flex-start;}
.r-d-tit .row .col {}
.r-d-tit .row .col h3 {color:#00A0E9; font-size:42px; font-weight:800;}
.r-d-tit .row .col ul.list-bar {margin-top:30px;}
.r-d-tit .row .col ul.list-bar li {color:#555555; font-size:23px; font-weight:600; line-height:48px; position:relative; padding-left:20px;}
.r-d-tit .row .col ul.list-bar li::before {content:"-"; position:absolute; left:0; top:0;}
.r-d-tit .row .col:last-child {width:730px;}
.r-d-tit .row .col .t1 {color:#254C78; font-size:28px; font-weight:600; line-height:38px;}
.r-d-tit .row .col .t1 strong {font-weight:800;}
.r-d-tit .row .col .t2 {margin-top:40px; font-size:21px; font-weight:500; line-height:34px; color:#666666;}
.r-d-wrap .sc-2 {margin-top:120px;}
.r-d-table-box {}
.r-d-table-box .tit {color:#444444; font-size:42px; font-weight:800; margin-top:30px;}
.r-d-table-box .tbl-wrap {margin-top:50px;}
.r-d-table-box table.dataTable {border-top:1px solid #254C78;}
.r-d-table-box table.dataTable thead th {color:#254C78; font-size:18px; font-weight:700; padding-top:20px; padding-bottom:20px; background:#fff;}
.r-d-table-box table.dataTable tbody td {color:#888888; font-size:16px; font-weight:500; padding-top:20px; padding-bottom:20px;}
.r-d-table-box table.dataTable tbody td.tit {color:#555555; font-size:18px; font-weight:600;}
.r-d-table-box table.dataTable.stripe>tbody>tr.odd>*, .r-d-table-box table.dataTable.display>tbody>tr.odd>* {box-shadow:none; background:#FBFBFB;}
.r-d-table-box table.dataTable.display>tbody>tr.odd>.sorting_1, .r-d-table-box table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1, 
.r-d-table-box table.dataTable.display>tbody>tr.even>.sorting_1, .r-d-table-box table.dataTable.order-column.stripe>tbody>tr.even>.sorting_1 
{box-shadow:none !important;}


/* 인사말 */
.mes-flex {display: flex;}
.mes-flex .img {margin-right: 80px;}
.mes-flex .text h2 {font-size: 21px; font-weight: 800; color: #254C78; padding-left: 10px; margin-bottom: -8px;}
.mes-flex .blank {width: 111px; height: 15px; background-color: #FFCC00; border-radius: 8px; margin-bottom: 25px;}
.mes-flex .text .txt {color: #00A0E9; font-size: 42px; line-height: 56px; font-weight: 800; margin-bottom: 35px;}
.mes-flex .text .txt span {color: #254C78;}
.mes-flex .txt-1 {font-size: 19px; color: #555555; line-height: 32px; margin-bottom: 31px;}
.mes-flex .txt-1 strong {font-weight: 600;} 
.mes-flex .sign {display: flex; align-items: center;}
.mes-flex .sign p {color: #555555; margin-right: 28px; font-size: 19px; font-weight: 700;}


/* Philosophy */
.mission h2 {font-size: 21px; font-weight: 800; color: #254C78; padding-left: 10px; margin-bottom: -8px;}
.mission .blank {width: 99px; height: 15px; background-color: #FFCC00; border-radius: 8px; margin-bottom: 25px;}
.mission h3 {font-size: 42px; font-weight: 800; color: #444444; margin-bottom: 50px;}
.mission .img-flex {display: flex; justify-content: space-between;}
.mission .img-flex dl {border: 1px solid #EEEEEE; border-radius: 20px; text-align: center; width: 32%; padding: 0 10px; height: 332px; /*margin-right: 26px;*/ margin-bottom: 140px;}
.mission .img-flex dl img {margin-top: 40px; margin-bottom: 35px;}
.mission .img-flex dl dt {margin-bottom: 15px; font-size: 21px; font-weight: 700; color: #254C78;}
.mission .img-flex dl dd {color: #555555; font-size: 18px; font-weight: 400; line-height: 26px;}

.vision h2 {font-size: 21px; font-weight: 800; color: #254C78; padding-left: 10px; margin-bottom: -8px;}
.vision .blank {width: 80px; height: 15px; background-color: #FFCC00; border-radius: 8px; margin-bottom: 25px;}
.vision h3 {font-size: 42px; font-weight: 800; color: #444444; margin-bottom: 40px;}
.vision .cre-flex {display: flex; justify-content: space-between;}
.vision .cre-flex dl {margin-bottom: 113px; width: 48%;}
.vision .sus-flex dl{width: 48%;}
.vision .cre-flex dl img {display: inline-block; /*padding-right :30px;*/ margin-bottom: 25px;}
.vision .cre-flex dl dt {font-size: 24px; font-weight: 800; color: #FFCC00; margin-bottom: 15px;}
.vision .cre-flex .eco {color: #9AD84A;}
.vision .cre-flex dl dd {font-size: 18px; font-weight: 400; color: #444444; margin-bottom: 12px; line-height: 26px;}
.vision .cre-flex dl dd:last-child {margin-bottom: 0;}
.vision .sus-flex {display: flex; justify-content: space-between;}
.vision .sus-flex dl {margin-bottom: 113px;}
.vision .sus-flex dl img {display: inline-block; /*padding-right :30px;*/ margin-bottom: 25px;}
.vision .sus-flex dl dt {font-size: 24px; font-weight: 800; margin-bottom: 15px;}
.vision .sus-flex dl dd {font-size: 18px; font-weight: 400; color: #444444; margin-bottom: 12px; line-height: 26px;}
.vision .sus-flex dl dd:last-child {margin-bottom: 0;}
.vision .sus-flex .sus {color: #00A0E9;}
.vision .sus-flex .coll {color: #254C78;}


/* 연혁 */
.history h2 {font-size: 21px; font-weight: 800; color: #254C78; padding-left: 10px; margin-bottom: -8px;}
.history .blank {width: 91px; height: 15px; background-color: #FFCC00; border-radius: 8px; margin-bottom: 25px;}

.tab-menu {position: relative;}
.tab-menu ul {display: flex;}
.tab-menu li {font-size: 34px; font-weight: 800; color: #999999; margin:0 80px 35px 0}
.tab-menu li a {color: #999999; cursor: pointer;}
.tab-menu .tablinks.active a {color: #00A0E9;}
.tab-menu-container img {margin-bottom: 40px;}
.tab-slide {transition: 1s;}

.yymmdd {display: flex; margin-bottom: 35px;}
.yymmdd .year {position: relative; font-size: 19px; font-weight: 600; color: #254C78; padding-left: 25px; /*margin-right: 37px;*/ width: 140px; }
.yymmdd .year::before{content: ''; position: absolute; left: 0; top: 45%; transform: translateX(50%); width: 4px; height: 4px; border-radius: 50%; background: #254C78;}
.yymmdd .text p {font-size: 19px; font-weight: 400; color: #444444;}

#tab2, #tab3 {display: none;}

.hstr-wrap .swiper-button-prev {background: none; width: 40px; left: 10px; top: 210px;}
.hstr-wrap .swiper-button-next {background: none; width: 40px; right: 10px; top: 210px;}


.hstr-wrap .swiper-button-prev:after, .hstr-wrap .swiper-button-next:after{content:none;}

.tabcontent li {margin-right:0;}
.r-d-tit .row .col h3{word-break: keep-all;}



/* .sub-page-wrap .mouse_action{display: block;}
.sub-page-wrap .mouse_action:after{content: ''; display: block; clear: both;} */

.sub-page-wrap .mouse_action{display: flex; justify-content: space-between; margin-top: 50px;}
.sub-page-wrap .mouse_action > div{float: left; display: flex; align-items: center;}
.sub-page-wrap .mouse_action > div:nth-of-type(1){width: 45%;}
.sub-page-wrap .mouse_action > div:nth-of-type(2){width: 53%; margin-left: 2%;}
.sub-page-wrap .mouse_action > div:nth-of-type(2){margin-left: 2%;}
/* .sub-page-wrap .mouse_action > div > div{justify-content: space-between;} */
.sub-page-wrap .mouse_action > div > div:nth-of-type(2){display: flex; width: 100%;}
.sub-page-wrap .mouse_action > div > div:nth-of-type(2) > div:not(:first-of-type){margin-left: 3%;}
.sub-page-wrap .mouse_action > div > div > div{display: flex;}
.sub-page-wrap .mouse_action > div > div:nth-of-type(1){width: 85px; height: 35px; line-height: 35px; background-color: #999999; border-radius: 20px; text-align: center; color: #fff; font-size: 16px; margin-right: 3%;}
.sub-page-wrap .mouse_action > div .doubleClick:before{margin-right: 5px; content: ''; display: block; background: url('../images/doubleClick.png') center / contain no-repeat; width: 28px; height: 28px;}
.sub-page-wrap .mouse_action > div .drag:before{margin-right: 5px; content: ''; display: block; background: url('../images/drag.png') center / contain no-repeat; width: 28px; height: 28px;}
.sub-page-wrap .mouse_action > div .wheel:before{margin-right: 5px; content: ''; display: block; background: url('../images/wheel.png') center / contain no-repeat; width: 9px; height: 28px;}
.sub-page-wrap .mouse_action > div .doubleClick,
.sub-page-wrap .mouse_action > div .drag,
.sub-page-wrap .mouse_action > div .wheel{font-size: 16px; line-height: 28px;}



/* 인재채용 */

.recruitment h2 {margin-bottom: 30px; color:#254C78; font-size:21px; font-weight:800; position:relative; padding:0 10px; display:inline-block; z-index:2;}
.recruitment h2::after {content:""; background:#FFCC00; border-radius:8px; overflow:hidden; position:absolute; left:0; bottom:-6px; width:100%; height:15px; z-index:-1;}
.recruitment > div:nth-of-type(1){margin-bottom: 140px;}
.recruitment > div:nth-of-type(1) > ul{justify-content: space-between; display: flex;}
.recruitment > div:nth-of-type(1) > ul li{width: 32.33%; border: 1px solid #EEEEEE; padding: 25px; box-sizing: border-box; border-radius: 15px;}
.recruitment > div:nth-of-type(1) > ul li dl dt{font-size: 20px; color: #444444; font-weight: 600; position: relative; text-align: center; padding-bottom: 15px; margin-bottom: 25px;}
.recruitment > div:nth-of-type(1) > ul li dl dt:after{content: ''; display: block; background: url('../images/list_title_border.png') center / contain no-repeat; width: 60px; height: 1px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
.recruitment > div:nth-of-type(1) > ul li dl dd{line-height: 22px; padding-left: 20px; position: relative;}
.recruitment > div:nth-of-type(1) > ul li dl dd:before{content: '-'; position: absolute; left: 0;}
.recruitment > div:nth-of-type(1) > ul li dl dd:not(:last-child){margin-bottom: 25px;}

.recruitment > div:nth-of-type(2) > p{font-size: 20px; color: #555555; line-height: 30px; margin-bottom: 70px;}
.recruitment > div:nth-of-type(2) > p mark{background-color: #254C78; color: #fff; font-weight: 700;}
.recruitment > div:nth-of-type(2) > ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
.recruitment > div:nth-of-type(2) > ul li{width: 32.33%; margin-bottom: 110px;}

.recruitment > div:nth-of-type(2) > ul li figure{display: flex;}
.recruitment > div:nth-of-type(2) > ul li figure figcaption{margin-left: 20px; padding-top: 25px;}
.recruitment > div:nth-of-type(2) > ul li figure > div{border-top: 3px solid #254C78; width: 100px;}
.recruitment > div:nth-of-type(2) > ul li.gray figure > div{border-top: 3px solid #CCCCCC;}
.recruitment > div:nth-of-type(2) > ul li figure > div img{display: block; max-width: 100%;  margin: 0 auto; padding-top: 25px;}
.recruitment > div:nth-of-type(2) > ul li figure figcaption{border-top: 3px solid #f6f6f6; width: 100%;}
.recruitment > div:nth-of-type(2) > ul li figure figcaption dl dt{font-weight: 600; color: #444444; font-size: 20px; margin-bottom: 10px;}
.recruitment > div:nth-of-type(2) > ul li figure figcaption dl dd{line-height: 20px;}

.recruitment > div:nth-of-type(3) > ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
.recruitment > div:nth-of-type(3) > ul li{position: relative; background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: 80px; width: 49%; border-radius: 10px 10px 0 0; height: 260px;}

.recruitment > div:nth-of-type(3) > ul li:nth-child(1){background-image: url('/assets/images/inside_the_company1.png');}
.recruitment > div:nth-of-type(3) > ul li:nth-child(2){background-image: url('/assets/images/inside_the_company2.png');}
.recruitment > div:nth-of-type(3) > ul li:nth-child(3){background-image: url('/assets/images/inside_the_company3.png');}
.recruitment > div:nth-of-type(3) > ul li:nth-child(4){background-image: url('/assets/images/inside_the_company4.png');}

.recruitment > div:nth-of-type(3) > ul li span{font-size: 16px; color: #555555; font-weight: 500; border-radius: 0 0 10px 10px; line-height: 55px; width: 100%; background-color: #fff; border: 1px solid #EEEEEE; box-sizing: border-box; display: block; text-align: center; position: absolute; bottom: -50px;}
/* 인재채용 */



@media screen and (max-width: 1400px){
  .r-d-tit .row .col:last-child{width: 650px;}
  
  .catalog-wrap .row .col{width: 48%;}
  .catalog-wrap .row .col:nth-of-type(2){margin-left: 4%;}
  .catalog-wrap .row .col .cata-box .list ul{margin: 0;}
  .catalog-wrap .row .col .cata-box .list ul li{width: 49%; margin: 0;}
  
  .catalog-wrap .row .col .cata-box .list ul li:nth-of-type(2){margin-left: 2%;}
  
}

@media screen and (max-width: 1280px){
  .sub-page-wrap .mouse_action{flex-wrap: wrap;}
  .sub-page-wrap .mouse_action > div:nth-of-type(1),
  .sub-page-wrap .mouse_action > div:nth-of-type(2){width: 100%;}
  
  .sub-page-wrap .mouse_action > div:nth-of-type(2){margin-left: 0; margin-top: 20px;}




  .mission .img-flex dl dd{font-size: 14px; line-height: 24px;}
/* 
  .step-list ul{display: block;}
  .step-list ul:after{content: ''; display: block; clear: both;}
  .step-list ul li{float: left; width: 23%; margin-right: 0;}
  .step-list ul li:not(:first-child){margin-left: 2.6%;} */
  .step-list ul{display: block;}
  .step-list ul li{width: 48%; margin-right: 2.66%;}
  .step-list ul li:nth-child(2){margin-right: 0;}

  
  .step-list ul li:nth-child(1),
  .step-list ul li:nth-child(2){margin-bottom: 50px;}

  .common_banner.sub_banner .sb_txt h1{width: 100%;}

  /* .r-d-tit .row .col h3{font-size: 28px;}
  .r-d-tit .row .col{width: 37%;}
  .r-d-tit .row .col:last-child{width: 60%; margin-left: 3%;} */
  table.dataTable thead>tr.seawater>th.sorting{width: 150px !important;}

  .r-d-tit .row{flex-wrap: wrap;}
  .r-d-tit .row .col{width: 100%; margin-bottom: 50px;}
  .r-d-tit .row .col:last-child{width: 100%; margin-left: 0%;}

  
  .catalog-wrap .row{flex-wrap: wrap;}
  .catalog-wrap .row .col{width: 100%;}
  .catalog-wrap .row .col:nth-of-type(2){margin-left: 0;}
  .catalog-wrap .row .col .cata-box .list{margin-bottom: 50px;}
  .catalog-wrap .row .col .cata-box .list ul li{width: 300px;}


  .contact-tit{flex-wrap: wrap;}
  .contact-tit h3{margin-bottom: 30px;}
  .contact-tit ul li{margin-left: 0; padding: 15px 20px; width: 100%; border-radius: 0; justify-content: left;}
  .contact-tit h3{width: 100%;}

  .mes-flex .text .txt{font-size: 32px; line-height: 50px;}
  .mes-flex .txt-1,
  .tit-img-txt-box .txt,
  .r-d-tit .row .col .t2{font-size: 18px;}
  .mission h3,
  .vision h3,
  .tab-menu li,
  .aa-tab-list ul li,
  .tit-img-txt-box .t1,
  .facility-tit h3,
  .r-d-tit .row .col h3,
  .r-d-table-box .tit,
  .contact-tit h3{font-size: 32px;}
  .r-d-tit .row .col ul.list-bar li{font-size: 24px;}
  .r-d-tit .row .col .t1{font-size: 22px;}
  .tit-img-txt-box .txt{font-size: 16px;}
  
  .hstr-wrap .swiper-button-next,
  .hstr-wrap .swiper-button-prev{top: 14vw;}

  .sub-container.contactUs{padding-top: 45px;}

  .recruitment > div:nth-of-type(1) > ul{flex-wrap: wrap;}
  .recruitment > div:nth-of-type(1) > ul li{width: 100%;}
  .recruitment > div:nth-of-type(1) > ul li:not(:last-of-type){margin-bottom: 20px;}
  .recruitment > div:nth-of-type(2) > ul li{width: 30.33%;}
  .recruitment > div:nth-of-type(2) > ul li figure{flex-wrap: wrap;}
  .recruitment > div:nth-of-type(2) > ul li figure > div{margin: 0 auto; width: 100%;}
  .recruitment > div:nth-of-type(2) > ul li figure figcaption{margin-left: 0; margin-top: 20px;}
  .recruitment > div:nth-of-type(2) > ul li figure figcaption dl dt,
  .recruitment > div:nth-of-type(2) > ul li figure figcaption dl dd{line-height: 20px; word-break: keep-all;}

}


@media screen and (max-width: 768px){
  .form .row.row-2{margin: 0;}
  .form .row.row-2 .col{width: 100%; margin-bottom: 50px;}

  .form .row{margin-bottom: 0px !important;}
  .form .row.row-1{margin-bottom: 50px !important;}

  .form .row label{font-size: 18px;}
  
  .form .row.row-2 .col{margin-left: 0;}

  .form .row.row-btn{display: block; }
  .form .row.row-btn button{display: block; margin: 0 auto;}



  /* 경영목표 */
  .mission h3,.vision h3{font-size: 28px;}
  .vision .cre-flex dl dt,
  .vision .sus-flex dl dt{font-size: 18px;}
  .vision .cre-flex dl dd,
  .vision .sus-flex dl dd{font-size: 16px;}
  .mission .img-flex{flex-wrap: wrap;}
  .mission .img-flex dl{width: 100%; margin-bottom: 70px;}
  .vision .cre-flex,.vision .sus-flex{flex-wrap: wrap;}
  .vision .cre-flex dl,
  .vision .sus-flex dl{width: 100%;}
  /* .vision .sus-flex dl{margin-bottom: 0;} */
  /* 대체수자원공급설비 */

  .step-list ul li:nth-child(1),
  .step-list ul li:nth-child(2){margin-bottom: 50px;}

  /* 인사말 */
  .mes-flex .text .txt{font-size: 22px; line-height: 34px;}
  .mes-flex .txt-1{font-size: 18px;}

  /* 연혁 */
  .yymmdd .year{font-size: 16px; width: 30%;}
  .yymmdd .text{width: 70%;}
  .yymmdd .text p{font-size: 16px; padding-left: 15px; box-sizing: border-box;}
  .tab-menu ul{justify-content: space-between;}
  .tab-menu li{margin: 0 0 35px 0; font-size: 24px;}

    

  .aa-tab-list ul,
  .aa-tab-list ul li{margin: 0; width: 50%;}
  .aa-tab-list ul{width: 100%; display: flex;justify-content: space-between;}
  
  .aa-tab-list ul li:nth-child(2){text-align: right;}
/* 
  .contact-tit{flex-wrap: wrap;}
  .contact-tit h3{margin-bottom: 30px;}
  .contact-tit ul li{margin-left: 0; padding: 15px 20px; width: 100%; justify-content: left;} */

  .catalog-wrap .row .col .cata-box .list ul li .thumb{height: 37vh;}
  .catalog-wrap .row .col .cata-box .list ul li:nth-of-type(2){height: 37vh;}
  
  .catalog-wrap .row .col .cata-box .list ul{margin: 0;}
  .catalog-wrap .row .col .cata-box .list ul li{width: 49%; margin: 0;}
  .catalog-wrap .row .col .cata-box .list ul li:nth-of-type(2){margin-left: 2%;}

  .aa-tab-list ul li{font-size: 24px;}

  .step-list ul li{margin-right: 0; width: 100%;}
  .step-list ul li:not(:last-child){margin-bottom: 50px;}
  .step-list ul li .icon::after{display: none;}

  .tbl-certi table td.name{font-size: 16px;}

  .tbl-certi table th.year{width: 60px;}
  .common_banner.sub_banner .sb_txt h1{line-height: 24px;}

  .hstr-wrap .swiper-button-prev,
  .hstr-wrap .swiper-button-next{display: none;}
  .yymmdd .year::before{top: 11%;}

  .tit-img-txt-box .img{height: 150px;}
  .tit-img-txt-box .txt{line-height: 22px;}
  .tit-img-txt-box .t1,
  .r-d-tit .row .col h3,
  .facility-tit h3,
  .r-d-table-box .tit{font-size: 28px; line-height: 36px;}
  .r-d-tit .row .col ul.list-bar li{font-size: 20px; line-height: 36px;}
  .r-d-tit .row .col .t1{font-size: 20px; line-height: 30px; word-break: keep-all;}
  .r-d-tit .row .col .t2{font-size: 16px; word-break: keep-all;}


  .sub-page-wrap .mouse_action > div > div:nth-of-type(1){width: 65px; height: 30px; line-height: 30px; font-size: 14px;}
  .sub-page-wrap .mouse_action > div > div:nth-of-type(2){flex-wrap: wrap;}
  .sub-page-wrap .mouse_action > div > div:nth-of-type(2) > div:not(:first-of-type){margin-left: 0;}
  .sub-page-wrap .mouse_action > div:nth-of-type(1),
  .sub-page-wrap .mouse_action > div:nth-of-type(2){width: 100%; flex-wrap: wrap;}
  .sub-page-wrap .mouse_action > div > div:nth-of-type(1){margin-bottom: 10px;}
  .sub-page-wrap .mouse_action > div .doubleClick,
  .sub-page-wrap .mouse_action > div .drag,
  .sub-page-wrap .mouse_action > div .wheel{font-size: 12px; width: 50%;}
  .sub-page-wrap .mouse_action > div .doubleClick:before,
  .sub-page-wrap .mouse_action > div .drag:before,
  .sub-page-wrap .mouse_action > div .wheel:before{width: 15px; height: 25px;}
  .sub-page-wrap .mouse_action > div:nth-of-type(2) .drag{margin-top: 10px;}
  
  .tbl-certi table td.detail{color: transparent; font-size: 0; }
  .tbl-certi table td.detail::after{padding: 0 10px;}
  .dataTables_wrapper .dataTables_paginate .paginate_button{padding: 0.5em 0.5em;}

  .navi-box ul{justify-content: left;}


  .recruitment > div:nth-of-type(1) > ul li dl dt,
  .recruitment > div:nth-of-type(2) > p{font-size: 18px;}
  
  .recruitment > div:nth-of-type(2) > ul li figure figcaption dl dt{font-size: 16px;}
  .recruitment > div:nth-of-type(2) > ul li figure figcaption dl dd{font-size: 14px;}
  .recruitment > div:nth-of-type(3) > ul{flex-wrap: wrap;}
  .recruitment > div:nth-of-type(3) > ul li{width: 100%; height: 150px;}


}