@charset "utf-8";


/**서브비주얼 **/
/* R&D */
.nth-1 .sub-visual-bg span {
       background-image: url('../images/common/sub_visual01.jpg') !important;
}

.nth-1 .sub-visual-txt .sub-visual-slogan {
       color: #fff;
}

/* ICT */
.nth-2 .sub-visual-bg span {
       background-image: url('../images/common/sub_visual02.jpg') !important;
}

.nth-2 .sub-visual-txt .sub-visual-slogan {
       color: #fff;
}

/* NEWS */
.nth-3 .sub-visual-bg span {
       background-image: url('../images/common/sub_visual03.jpg') !important;
}

.nth-3 .sub-visual-txt .sub-visual-slogan {
       color: #011226;
}

/* TAEKSAN */
.nth-4 .sub-visual-bg span {
       background-image: url('../images/common/sub_visual04.jpg') !important;
}

@media (max-width: 1024px) {
       .sub-content-wrap>.inner {
              margin: 0;
       }


}


/* 리스트 블릿 공통 */
ul.bu li {
       position: relative;
       line-height: 1.5;
       word-break: keep-all;
       overflow-wrap: break-word;
       color: #374b5e;
       margin-bottom: 1.5rem;
       font-weight: 500;
       padding-left: 1.5rem;
}

ul.bu li::before {
       position: absolute;
       top: .6em;
       left: auto;
       margin-left: -1.5rem;
       width: 5px;
       height: 5px;
       border-radius: 100%;
       background: #374b5e;
       content: "";
}


/* 컨텐츠 상단 타이틀 공통 */
.cont-top-title {
       padding: 4rem 3% 7rem;
}

.cont-top-title p {
       line-height: 1.3;
       font-size: 3.4rem;
       letter-spacing: -1px;
       color: rgb(1, 18, 38);
       text-align: center;
       font-weight: 400;
}

.cont-top-title p strong {
       font-weight: 600;
}

.em-blue {
       color: var(--color-blue);
}

@media (max-width: 1024px) {
       .cont-top-title {
              padding: 2rem 3% 5rem;
       }

       .cont-top-title p {
              font-size: 2.8rem;
       }

}



/* 공통 데이타 판텔 박스 */
.data-panel {
       padding: 8rem 10rem;
       box-sizing: border-box;
       background-color: #f2f5f7;
       background-image: url("../images/contents/rd-panel-bg.png");
       background-repeat: no-repeat;
       background-position: center top;
       background-size: 100% auto;
}

.data-panel-item+.data-panel-item {
       margin-top: 8rem;
}

.data-panel-head {
       overflow: hidden;
       text-align: center;
       margin-bottom: 5rem;
}

/* 제목 */
.head-tit {
       display: flex;
       align-items: center;
       width: 100%;
       gap: 2.5rem;
}

.head-tit::before,
.head-tit::after {
       flex: 1 1 0;
       min-width: 4rem;
       height: 1px;
       background-color: #8fa5ba;
       content: "";
}

.head-tit h3 {

       margin: 0;
       font-size: 2.4rem;
       font-weight: 600;
       line-height: 1.4;
       color: #011226;
       text-align: center;
       word-break: keep-all;
}

/* h3 내부 태그 대응 */
.data-panel-head h3 span,
.data-panel-head h3 em,
.data-panel-head h3 small {
       display: inline;
}

.data-panel-head h3 span.small,
.data-panel-head h3 small {
       font-size: 1.8rem;
       font-weight: 500;
       color: #476077;
}




/* 설명 */
.data-panel-head p {
       font-size: 1.8rem;
       font-weight: 500;
       color: #374b5e;
       word-break: keep-all;
       margin-top: 2rem;
}

.cont-text {
       margin-top: 2rem;
}

.data-panel .cont-text .bu li {
       display: inline-block;
       font-size: 1.8rem;
}

@media (max-width: 1024px) {
       .data-panel {
              padding: 6rem 5rem;
       }

       .data-panel-item+.data-panel-item {
              margin-top: 7rem;
       }

       .data-panel-head h3 span.small,
       .data-panel-head h3 small {
              display: block;
              margin-top: .5rem;
       }
}

@media (max-width: 768px) {
       .data-panel {
              padding: 5rem var(--inner-padding) 7rem;
       }

       .data-panel-item+.data-panel-item {
              margin-top: 5rem;
       }


       .data-panel-head h3 {
              padding: 0 3%;
              font-size: 18px;
              line-height: 1.2;
       }

       .head-tit {
              display: block;
       }

       .head-tit::before,
       .head-tit::after {
              display: none;
       }

       .data-panel-head p {
              font-size: 14px;
              line-height: 1.3;

       }

       .data-panel .cont-text .bu li {
              font-size: 14px;
       }

       .data-panel-head p br {
              display: none;
       }


}


/* R&D > 홍수 */
.flood-page {}

.flood-panel {
       margin-top: 3rem;
       padding: 8rem 12rem 8rem;
       box-sizing: border-box;
       background-color: #f2f5f7;
       background-image: url("../images/contents/flood-bg.png");
       background-repeat: repeat;
       background-position: left top;
       background-size: cover;

}




.flood-panel-head p {
       margin-top: 2rem;
       font-size: 1.8rem;
       color: #374b5e;
       font-weight: 500;
}


.responsive-img {
       display: block;
       width: 100%;
       /*box-shadow: 0 0 20px rgba(143, 165, 186, .35);*/
}

.responsive-img img {
       display: block;
       width: 100%;
       height: auto;
}

@media (max-width: 1024px) {


       .flood-panel {
              padding: 5rem;
       }

}

@media (max-width: 768px) {

       .flood-head {
              margin-bottom: 3rem;
       }

       .flood-panel {
              padding: 5rem 3rem;
       }

       .flood-panel-head h3::before,
       .flood-panel-head h3::after {
              display: none;
       }

       .flood-panel-head {
              margin-bottom: 3rem;
       }


       .flood-panel-head p {
              font-size: 14px;
              line-height: 1.2;
       }

       .flood-panel-head p br {
              display: none;
       }
}

/* ICT > 리빙랩*/

/* 운영방안 */
.livinglab-operation {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 2rem;
}

.livinglab-operation li {
       position: relative;
       min-width: 0;
       padding: 5rem 2rem 2.5rem;
       border: 1px solid #8fa5ba;
       border-radius: 5px;
       box-sizing: border-box;
       background: #fff;
       box-shadow: 0 0 20px rgba(143, 165, 186, .35);
       text-align: center;
}

.livinglab-operation-num {
       display: flex;
       align-items: center;
       justify-content: center;
       position: absolute;
       top: -1.8rem;
       left: 50%;
       width: 3.5rem;
       height: 3.5rem;
       border-radius: 50%;
       background: #31597e;
       font-size: 1.8rem;
       font-weight: 400;
       color: #fff;
       transform: translateX(-50%);
}

.livinglab-operation-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 6rem;
       margin-bottom: 2rem;
}

.livinglab-operation-icon img {
       display: block;
       width: auto;
       height: auto;
       max-width: 5.5rem;
       max-height: 5.5rem;
}

.livinglab-operation .tit {
       display: block;
       margin-bottom: .8rem;
       font-size: 20px;
       font-weight: 700;
       line-height: 1.4;
       color: #011226;
       word-break: keep-all;
}

.livinglab-operation .sub-tit {
       display: block;
       min-height: 5rem;
       margin-bottom: 2rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid #c7d2dc;
       font-size: 16px;
       font-weight: 600;
       color: #004699;
       word-break: keep-all;
}

.livinglab-operation .text {
       font-size: 14px;
       font-weight: 500;
       line-height: 1.5;
       color: #374b5e;
       word-break: keep-all;
}



/* AIoT 설치 사례 ====================================== */

.livinglab-iot-list {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: .5rem;
}

@media (max-width: 1024px) {
       .livinglab-operation {
              grid-template-columns: repeat(3, 1fr);
       }
}

@media (max-width: 768px) {

       /* 운영방안 */
       .livinglab-operation {
              grid-template-columns: repeat(2, 1fr);
              gap: 5rem 2.5rem;
       }

       .livinglab-operation li {
              padding: 3.5rem 1.4rem 2rem;
       }

       .livinglab-operation li:last-child {
              grid-column: 1 / -1;
              width: calc(50% - .75rem);
              justify-self: center;
       }

       .livinglab-operation-num {
              top: -1.4rem;
              width: 3rem;
              height: 3rem;
              font-size: 13px;
       }

       .livinglab-operation-icon {
              height: 4.5rem;

       }

       .livinglab-operation .tit {
              font-size: 16px;
       }

       .livinglab-operation .sub-tit {
              font-size: 15px;
              ;
       }




       /* AIoT */
       .livinglab-iot-list {
              grid-template-columns: 1fr;
              gap: 2rem;
       }
}

/* ICT > 침수 예·경보  */

.warning-process-cont {
       width: 100%;
}

.warning-process {
       width: 100%;
       padding: 0 5%;
}

.warning-process-title {
       display: flex;
       width: 100%;
       margin-bottom: 4rem;
}

.warning-process-title strong {
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 1;
       height: 4.5rem;

       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
       font-size: 16px;
       font-weight: 600;
       color: #fff;
}

.warning-process-title .tit1 {
       background-image: url("../images/contents/warning-step-tit.svg");
}

.warning-process-title .tit2 {
       background-image: url("../images/contents/warning-step-tit2.svg");
}

.warning-process-title .tit3 {
       background-image: url("../images/contents/warning-step-tit3.svg");
}

/* 프로세스 이미지 행 */
.warning-process-row {
       display: flex;
       align-items: center;
       width: 100%;
       margin-top: 5rem;
       /* padding: 0 1rem; */
       box-sizing: border-box;
}

.warning-process-img {
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 1;
       min-width: 0;
       height: 14rem;
}

.warning-process-img img {
       display: block;
       width: 100%;
       height: 11rem;
       object-fit: contain;
}

/* 화살표 */
.warning-process-arrow {
       display: block;
       flex: 0 0 8rem;
       width: 8rem;
       height: 5rem;
       background: url("../images/contents/warning-arrow.svg") no-repeat center / contain;
}





/* TABLET ============================================== */

@media (max-width: 1024px) {
       .warning-process {
              padding: 0;
       }



       .warning-process-row {
              padding: 0 2rem;
       }

       .warning-process-img {
              height: 12rem;
       }

       .warning-process-img img {
              max-width: 82%;
       }

       .warning-process-arrow {
              flex: 0 0 3rem;
              width: 3rem;
              height: 3rem;
       }
}

/* ===================================================== */
/* MOBILE ============================================== */

@media (max-width: 640px) {
       .warning-page .cont-top-title p br {
              display: none;
       }

       .warning-process {
              display: flex;
              align-items: stretch;
              width: 100%;
              background-color: #f1f4f7;
              border-top: 1px solid #8fa5ba;
              border-bottom: 1px solid #8fa5ba;
       }

       /* 왼쪽 제목 열 */
       .warning-process-title {
              display: flex;
              flex: 0 0 8rem;
              width: 8rem;
              flex-direction: column;
              margin-bottom: 0;
       }

       /* PC용 SVG 배경 제거 */
       .warning-process-title .tit1,
       .warning-process-title .tit2,
       .warning-process-title .tit3 {
              background: none;
       }

       .warning-process-title strong {
              display: flex;
              align-items: center;
              justify-content: center;
              flex: 1;
              position: relative;
              height: auto;
              min-height: 10rem;
              box-sizing: border-box;
              background: linear-gradient(180deg, #5cbb83 0%, #1887b0 100%) !important;
              font-size: 14px;
              font-weight: 600;
              line-height: 1.3;
              color: #fff;
              text-align: center;
       }

       /* 첫 단계 : 아래 화살촉 */
       .warning-process-title .tit1 {
              clip-path: polygon(0 0,
                            100% 0,
                            100% calc(100% - 1.5rem),
                            50% 100%,
                            0 calc(100% - 1.5rem));
       }

       /* 중간 단계 : 위쪽 홈 + 아래 화살촉 */
       .warning-process-title .tit2 {
              margin-top: 1rem;
              padding-top: 1.5rem;
              clip-path: polygon(0 0,
                            50% 1.5rem,
                            100% 0,
                            100% calc(100% - 1.5rem),
                            50% 100%,
                            0 calc(100% - 1.5rem));
       }

       /* 마지막 단계 : 위쪽 홈만 */
       .warning-process-title .tit3 {
              margin-top: 1rem;
              padding-top: 1.5rem;
              clip-path: polygon(0 0,
                            50% 1.5rem,
                            100% 0,
                            100% 100%,
                            0 100%);
       }

       /* 이미지 세로 1열 / 2열 */
       .warning-process-row {
              display: flex;
              align-items: stretch;
              flex: 1;
              min-width: 0;
              width: auto;
              margin: 0;
              padding: 3rem 0;
              flex-direction: column;

       }



       .warning-process-img {
              height: 8rem;
       }

       .warning-process-img img {

              height: 7rem;

       }

       /* 가로 화살표 → 세로 화살표 */
       .warning-process-arrow {
              display: block;
              flex: 0 0 5rem;
              width: 4rem;
              height: 2.5rem;
              margin: 0 auto;
              background: url("../images/contents/warning-arrow.svg") no-repeat center / contain;
              transform: rotate(90deg) !important;
       }
}


/* 프로세스 3단계 */
.system-process {
       display: flex;
       align-items: stretch;
       justify-content: space-between;
       gap: 6rem;
       margin-top: 5rem;
}

/* 공통 박스 */
.system-process-box {
       position: relative;
       min-width: 0;
       border: 1px solid #8fa5ba;
       border-radius: .5rem;
       box-sizing: border-box;
       background-color: #fff;
       box-shadow: 0 0 2rem rgba(143, 165, 186, .35);
}

/* 시안 기준 폭 */
.system-process-box.data {
       flex: 0 0 23%;
}

.system-process-box.ai {
       flex: 0 0 23%;
}

.system-process-box.result {
       flex: 1;
}

/* 단계 사이 화살표 */
.system-process-box:not(:last-child)::after {
       position: absolute;
       top: 50%;
       right: -4rem;
       width: 4rem;
       height: 12rem;
       background: url("../images/contents/system-arrow.svg") no-repeat center / contain;
       content: "";
       transform: translateY(-50%);
}

/* 상단 타이틀 */
.system-process-box>h4 {
       position: absolute;
       top: -1rem;
       left: -.5rem;
       z-index: 2;
       min-width: 20rem;
       height: 4rem;
       padding: .4rem 4rem 2rem 2rem;
       box-sizing: border-box;
       background: url("../images/contents/livinglab-tit-bg.svg") no-repeat left top / cover;
       font-size: 20px;
       font-weight: 700;
       line-height: 1.4;
       color: #fff;
}

/* 박스 내부 */
.system-process-inner {
       height: 100%;
       padding: 4rem 3rem 1.5rem 3rem;
       box-sizing: border-box;
}

.system-process-desc {
       padding-bottom: 1.5rem;
       border-bottom: 1px solid #c7d2dc;
       font-size: 14px;
       font-weight: 500;
       line-height: 1.5;
       color: #374b5e;
       text-align: center;
       word-break: keep-all;
}


/* 01. 데이터 수집 ===================================== */

.system-data-list li {
       display: flex;
       align-items: center;
       min-height: 8.5rem;
       padding: 2rem 1rem;
       border-bottom: 1px solid #d1dae3;
       box-sizing: border-box;
       gap: 2rem;
}

.system-data-list li:last-child {
       border-bottom: 0;
}

.system-data-list img {
       flex: 0 0 5rem;
       width: 5rem;
       height: 5rem;
       object-fit: contain;
}

.system-data-list div {
       display: flex;
       align-items: center;
       gap: 2rem;
}

.system-data-list strong {
       display: block;
       margin-bottom: .5rem;
       font-size: 16px;
       font-weight: 600;
       line-height: 1.4;
       color: #00539b;
}

.system-data-list p {
       font-size: 14px;
       font-weight: 500;
       line-height: 1.3;
       color: #374b5e;
       word-break: keep-all;
}


/* 02. AI 예측 엔진 */

.system-process-box.result>h4 {
       min-width: 28rem;
}

.system-ai-list li {
       display: flex;
       align-items: center;
       position: relative;
       min-height: 7.5rem;
       padding: 1rem;
       border-bottom: 1px solid #c7d2dc;
       box-sizing: border-box;

}

.system-ai-list li:last-child {
       border-bottom: 0;
}

/* 원형 아이콘 영역 */
.system-ai-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 0 0 6rem;
       width: 6rem;
       height: 6rem;
       border-radius: 50%;
       box-sizing: border-box;
       background-color: #e5ecf5;
}

/* 실제 아이콘 */
.system-ai-icon img {
       display: block;
       width: 3.2rem;
       height: 4rem;
       object-fit: contain;
}

.system-ai-list .cont-icon {
       display: flex;
       align-items: center;
       gap: 2rem;
}

/* 단계 사이 아래 화살표 */
.system-ai-list li:not(:last-child)::after {
       position: absolute;
       bottom: -.9rem;
       left: 50%;
       z-index: 2;
       width: 1.5rem;
       height: 2rem;
       background: url("../images/contents/system-arrow-down.svg") no-repeat center / contain;
       content: "";
}

.system-ai-list strong {
       font-size: 16px;
       font-weight: 600;
       color: #00539b;
}

.system-ai-list img {
       flex: 0 0 6rem;
       width: 6rem;
       height: 3.5rem;
       object-fit: contain;
}

.system-ai-function {
       display: flex;
       margin-top: .5rem;
       flex-wrap: wrap;
       gap: .5rem;
}

.system-ai-function li {
       display: flex;
       align-items: center;
       justify-content: center;
       width: calc(50% - .35rem);
       min-height: 5rem;
       padding: .7rem;
       border-radius: .5rem;
       box-sizing: border-box;
       background-color: #31597e;
       font-size: 12px;
       font-weight: 500;
       color: #fff;
       text-align: center;
}



/* 03. 예측 결과 & 자동운영  */

.system-result-cont {
       display: flex;
       align-items: stretch;
       margin-top: 2rem;
       gap: 2rem;
}

.system-result-cont>h4 {
       min-width: 40rem;
}

.system-process-box.result .system-process-desc {
       padding-bottom: 0;
       border-bottom: 0;
}

.system-result-list {
       flex: 0 0 44%;
}

.system-result-list li {
       padding: 1.8rem;
       margin-bottom: 1rem;
       border-radius: .3rem;
       box-sizing: border-box;
       background-color: #e5ecf5;
}

.system-result-list li:last-child {
       margin-bottom: 0;
}

.system-result-list strong {
       display: block;
       margin-bottom: .5rem;
       font-size: 16px;
       font-weight: 600;
       color: #0d7b37;
}

.system-result-list p {
       font-size: 14px;
       font-weight: 500;
       line-height: 1.2;
       color: #374b5e;
       word-break: keep-all;
}

.system-result-chart {
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 1;
       min-width: 0;
}

.system-result-chart img {
       display: block;
       width: 100%;
       height: auto;
}

/* 펌프 시설 도입 */

.pump-process {
       display: flex;
       align-items: center;
       gap: 6rem;
       padding: 0 5rem;
       box-sizing: border-box;
}

.pump-process-item {
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 1;
       position: relative;
       min-width: 0;
}

.pump-process-item img {
       display: block;
       width: 100%;
       height: auto;
}

/* As-Is → To-be 화살표 */
.pump-process-item:not(:last-child)::after {
       position: absolute;
       top: 50%;
       right: -3.9rem;
       width: 4rem;
       height: 12rem;
       background: url("../images/contents/system-arrow.svg") no-repeat center / contain;
       content: "";
       transform: translateY(-50%);
}


/* 통 이미지*/

.system-dev-page .responsive-img {}

.system-dev-page .responsive-img img {
       display: block;
       width: 100%;
       height: auto;
}

@media (max-width: 1204px) {

       /* 프로세스 3단계 */

       .system-process {
              align-items: stretch;
              gap: 5rem 4rem;
              margin-top: 4rem;
              padding: 0;
              flex-wrap: wrap;
       }

       .system-process-box.data,
       .system-process-box.ai {
              flex: 0 0 calc(50% - 2rem);
              width: calc(50% - 2rem);
              min-width: 0;
       }

       .system-process-box.result {
              flex: 0 0 100%;
              width: 100%;
              min-width: 0;
       }


       .system-process-box.ai::after {
              top: auto;
              right: auto;
              bottom: -6.5rem;
              left: 50%;
              height: 10rem;
              transform: translateX(-50%) rotate(90deg);
       }


       .system-process-box>h4 {
              width: auto;
              min-width: 20rem;
              font-size: 15px;
       }

       .system-process-box.result>h4 {
              min-width: 25rem;
       }


       /* 데이터 수집 */

       .system-data-list li {

              gap: 1.5rem;
       }

       .system-data-list li p span br {
              display: none;
       }

       .system-ai-list strong br {
              display: none;
       }


       /* AI 예측 엔진 */

       .system-process-box.ai .system-process-inner {
              display: block;
       }

       .system-ai-list {
              margin: 0;
       }

       .system-ai-function {
              display: flex;
              margin-top: 1rem;
              padding: 0;
              flex-direction: row;
              flex-wrap: wrap;
              gap: .5rem;
       }

       .system-ai-function li {
              width: calc(50% - .25rem);
       }


       /* 예측 결과 */

       .system-result-cont {

              gap: 1.5rem;
       }

       .system-result-list {
              flex: 0 0 42%;
              min-width: 0;
       }



       /* 펌프 시설 */

       .pump-process {
              gap: 5rem;
              padding: 0 4rem;
       }
}



@media (max-width: 768px) {
       .pump-process {
              display: flex;
              gap: 4rem;
              padding: 0 1rem;
              flex-direction: column;
       }

       .pump-process-item {
              flex: none;
              width: 100%;
       }

       .pump-process-item img {
              display: block;
              width: 100%;
              height: auto;
       }

       .system-process-box.data::after {
              top: auto;
              right: auto;
              bottom: -6.5rem;
              left: 50%;
              height: 10rem;
              transform: translateX(-50%) rotate(90deg);
       }

       .pump-process-item:not(:last-child)::after {
              top: auto;
              right: auto;
              bottom: -6.5rem;
              left: 50%;
              width: 4rem;
              height: 10rem;
              transform: translateX(-50%) rotate(90deg);
       }

       .system-dev-page .responsive-img,
       .system-dev-page .responsive-img img {
              display: block;
              width: 100%;
              height: auto;
       }

       .system-process-box.ai .system-process-inner {
              display: grid;
              grid-template-columns: 1.2fr .8fr;
              column-gap: 1rem;
       }

       .system-process-box.ai .system-process-desc {
              grid-column: 1 / -1;
       }

       .system-ai-list {
              grid-column: 1;
              margin: 0;
       }

       .system-ai-list li:not(:last-child)::after {
              bottom: -.8rem;
              left: 50%;
              width: 1.2rem;
              height: 1.6rem;
       }

       .system-ai-function {
              display: flex;
              grid-column: 2;
              margin: 0;
              padding: .5rem 0;
              flex-direction: column;
              justify-content: space-around;
              flex-wrap: nowrap;
              gap: .5rem;
              align-items: center;
       }

       .system-ai-function li {
              width: calc(80% - .25rem);
       }

}

@media (max-width: 640px) {
       .system-process {
              flex-direction: column;
       }

       .system-process-box.data,
       .system-process-box.ai,
       .system-process-box.result {
              flex: none;
              width: 100%;
       }

       .system-process-inner {
              padding-left: 2%;
              padding-right: 2%;
       }


       .system-ai-list strong,
       .system-data-list strong {
              font-size: 15px;
       }

       .system-result-list strong {
              font-size: 14px;
       }

       .system-result-list p {
              font-size: 13px;
       }

       .system-result-list li {
              padding: 1.5rem;
       }

}

/* ICT > 스마트 계측관리 시스템  */

/* 현장 설치 구성도 및 내역 */
.system-install {
       display: flex;
       align-items: stretch;
       gap: 3rem;
       padding: 2rem 6rem 0;
       box-sizing: border-box;
       margin-top: 4rem;
}

/* 현장 이미지 */
.system-photo {
       display: block;
       flex: 1;
       min-width: 0;
       margin-top: 0;
}

.system-photo img {

       object-fit: cover;
}

/* 장비 내역 */
.system-table {
       flex: 0 0 29%;
       min-width: 0;
}

.system-table table {
       width: 100%;
       height: 100%;
       border-collapse: collapse;
       table-layout: fixed;
       background-color: #fff;
}

.system-table caption {
       position: absolute;
       width: 1px;
       height: 1px;
       margin: -1px;
       padding: 0;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
}

.system-table th,
.system-table td {
       padding: 1.2rem .8rem;
       border: 1px solid #d1dae3;
       box-sizing: border-box;
       font-weight: 500;
       text-align: center;
       vertical-align: middle;
       color: #374b5e;
       word-break: keep-all;
}

.system-table th:first-child,
.system-table td:first-child {
       border-left: 0;
}

.system-table th:last-child,
.system-table td:last-child {
       border-right: 0;
}

.system-table thead th {
       background-color: #4d8ecb;
       font-weight: 600;
       color: #fff;
       font-size: 1.4rem;

}

.system-table tbody th,
.system-table tbody td {
       font-size: 14px;
       background-color: #fff;
       font-weight: 500;
       color: #374b5e;
}

.system-table thead th {
       font-size: 14px;
       ;
}

@media (max-width: 1024px) {
       .system-install {
              gap: 2rem;
              padding: 0;
       }

       .system-table {
              flex-basis: 32%;
       }

       .livinglab-operation .sub-tit {

              min-height: auto;
       }

       .system-table th,
       .system-table td {
              padding: .8rem .6rem;

       }
}

@media (max-width: 768px) {
       .system-install {
              display: block;
              padding: 0;
       }



       .system-photo {
              width: 100%;
       }

       .system-photo img {
              width: 100%;
              height: auto;
              object-fit: initial;
       }

       .system-table {
              width: 100%;
              margin-top: 2rem;
       }

       .system-table table {
              height: auto;
       }

       .system-table th,
       .system-table td {
              padding: .8rem .5rem;

              line-height: 1.4;
       }
}





/* R&D > 토사재해 */
.landslide-item {
       position: relative;
}

.landslide-top {
       position: relative;
       display: flex;
       align-items: flex-start;
       gap: 2rem;
       margin-top: 6rem;
       padding-bottom: 8rem;
}

.landslide-input {
       display: flex;
       flex: 1;
       gap: 1.5rem;
}

/* 상단 카드 */
.landslide-card {
       position: relative;
       min-height: 20rem;
       padding: 5rem 2rem 3rem 1rem;
       border: 1px solid #8fa5ba;
       border-radius: 5px;
       box-sizing: border-box;
       background-color: #fff;
       box-shadow: 0 .5rem 1.5rem rgba(1, 18, 38, .08);
}

.landslide-area {
       flex: 0 0 18rem;
}

.landslide-area::after {
       position: absolute;
       top: calc(100% + 15px);
       left: 50%;
       width: 10rem;
       height: 15rem;
       background: url("../images/contents/landslide-arrow.png") no-repeat center top / contain;
       content: "";
       transform: translateX(-50%);
       pointer-events: none;
}

.landslide-data {
       flex: 1;
}

/* 카드 라벨 */
.landslide-label {
       display: inline-flex;
       align-items: center;
       position: absolute;
       top: -1rem;
       left: -1px;
       z-index: 1;
       min-width: 14rem;
       height: 4rem;
       padding: 0 2rem;
       box-sizing: border-box;
       background: linear-gradient(90deg, #50b67b, #1987b5);
       box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
       font-size: 2rem;
       font-weight: 700;
       color: #fff;
       clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%);
}

.landslide-label.sec {
       background: #31597e;
}

/* 취약지구 선정 */
.landslide-pin {
       text-align: center;
}

.landslide-pin span {
       display: block;
}

.landslide-pin img {
       display: block;
       width: auto;
       max-width: 100%;
       height: 10rem;
       margin: 0 auto;
       object-fit: contain;
}

.landslide-pin p {
       margin-top: 1rem;
       font-size: 1.6rem;
       font-weight: 500;
       color: #374b5e;
}

/* 입력자료 */
.landslide-data-list {
       display: flex;
       gap: 1rem;
}

.landslide-data-list>div {
       flex: 0 0 7rem;
       font-size: 1.8rem;
       line-height: 1.2;
}

.landslide-data-list>div .tit {
       display: block;
       padding-left: 1rem;
       font-weight: 800;
       color: #000;
}

.landslide-data-list ul {
       flex: 1;
       padding: 1rem;
       border-radius: 10px;
       background-color: rgba(143, 165, 186, .2);
}

.landslide-data-list li {
       display: flex;
       align-items: center;
       margin: .7rem 0;
       font-size: 1.4rem;
       font-weight: 500;
       color: #374b5e;
}

.landslide-data-list li span {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex: 0 0 2rem;
       height: 2rem;
       margin-right: .8rem;
       border-radius: 50%;
       background-color: #31597e;
       font-size: 1.3rem;
       font-weight: 600;
       color: #fff;
}

/* 강우량·토사유출량 분포도 */
.landslide-map-list {
       display: flex;
       align-items: flex-start;
       align-self: flex-start;
       flex: 0 0 44%;
       gap: 1rem;
}

.landslide-map-list figure {
       flex: 1;
       min-width: 0;
       margin: 0;
       border-radius: 10px;
       overflow: hidden;
       box-sizing: border-box;
       box-shadow: 0 .5rem 1.5rem rgba(1, 18, 38, .08)
}

.landslide-map-list img {
       display: block;
       width: 100%;
       height: auto;
}




/* 토사재해 분석 프로세스 통 이미지 */
.landslide-process {
       position: relative;
       padding: 7rem 3rem 4rem;
       border: 1px solid #c9d4de;
       border-radius: 5px;
       box-sizing: border-box;
       background-color: #fff;
       box-shadow: 0 .5rem 1.5rem rgba(1, 18, 38, .08);
}

.process-list {
       display: block;
       width: 100%;
}

.process-list .responsive-img,
.process-list .responsive-img img {
       display: block;
       width: 100%;
}

.process-list .responsive-img img {
       height: auto;
}

/* 하단 장점 */
.landslide-benefit {
       display: flex;
       justify-content: space-between;
       gap: 0;
       margin-top: 5rem;
}

.landslide-benefit li {
       display: flex;
       align-items: flex-start;
       position: relative;
       flex: 1;
       gap: 1.5rem;
       min-width: 0;
       padding: 0 2rem;
       box-sizing: border-box;
}

/* 항목 사이 세로 구분선 */
.landslide-benefit li:not(:last-child)::after {
       position: absolute;
       top: 50%;
       right: 0;
       width: 1px;
       height: 80%;
       background-color: #c9d4de;
       content: "";
       transform: translateY(-50%);
}

/* 장점 아이콘 공통 */
.benefit-icon {
       display: block;
       flex: 0 0 5rem;
       width: 5rem;
       height: 5rem;
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
       font-size: 0;
       text-indent: -9999px;
       overflow: hidden;
}

/* 아이콘 이미지 */
.landslide-benefit li:nth-child(1) .benefit-icon {
       background-image: url("../images/contents/landslide-benefit01.png");
}

.landslide-benefit li:nth-child(2) .benefit-icon {
       background-image: url("../images/contents/landslide-benefit02.png");
}

.landslide-benefit li:nth-child(3) .benefit-icon {
       background-image: url("../images/contents/landslide-benefit03.png");
}

.landslide-benefit li:nth-child(4) .benefit-icon {
       background-image: url("../images/contents/landslide-benefit04.png");
}

.landslide-benefit li:nth-child(5) .benefit-icon {
       background-image: url("../images/contents/landslide-benefit05.png");
}

/* 제목 공통 */
.landslide-benefit strong {
       display: block;
       margin-bottom: .7rem;
       font-size: 1.6rem;
       font-weight: 700;
}

/* 아이콘과 동일한 제목 색상 */
.landslide-benefit li:nth-child(1) strong {
       color: #17609a;
}

.landslide-benefit li:nth-child(2) strong {
       color: #68ad54;
}

.landslide-benefit li:nth-child(3) strong {
       color: #6d49a8;
}

.landslide-benefit li:nth-child(4) strong {
       color: #ef9629;
}

.landslide-benefit li:nth-child(5) strong {
       color: #289aae;
}

.landslide-benefit p {
       font-size: 1.4rem;
       line-height: 1.5;
       font-weight: 500;
       color: #374b5e;

}


@media (max-width: 1204px) {
       .landslide-top {
              display: block;
              padding-bottom: 8rem;
       }

       .landslide-map-list {
              margin-top: 3rem;
       }

       .landslide-process {
              padding: 6rem 3rem 3rem;
       }

       .landslide-benefit {
              flex-wrap: wrap;
              row-gap: 3rem;
       }

       .landslide-benefit li {
              flex: 0 0 50%;
              padding: 0 2rem;
       }

       /* 분포도 2열 */
       .landslide-map-list {
              display: flex;
              gap: 1.2rem;
              margin-top: 1.5rem;
              padding-left: 32%;
       }

       .landslide-map-list figure {
              flex: 1;
              min-width: 0;
       }

       /* 기존 선 초기화 */
       .landslide-benefit li:not(:last-child)::after {
              display: none;
       }

       /* 각 줄의 첫 번째 항목 오른쪽만 세로선 */
       .landslide-benefit li:nth-child(odd):not(:last-child)::after {
              display: block;
              position: absolute;
              top: 50%;
              right: 0;
              width: 1px;
              height: 80%;
              background-color: #c9d4de;
              content: "";
              transform: translateY(-50%);
       }
}


/* MOBILE ============================================== */
@media (max-width: 768px) {
       .landslide-page .data-panel {
              padding: 5rem 1.6rem 7rem;
       }

       .landslide-page .data-panel-head {
              margin-bottom: 3rem;
       }

       /* 상단 전체 */
       .landslide-top {
              display: block;
              padding-bottom: 3rem;
       }

       .landslide-data-list li {
              font-size: 12px;
       }

       /* 취약지구 선정 + 입력자료 2열 유지 */
       .landslide-input {
              display: flex;
              align-items: stretch;
              gap: 1.2rem;
       }

       .landslide-data-list>div .tit {
              padding-left: 0;
       }

       .landslide-card {
              min-height: 0;
              padding: 4.5rem 1rem 1.5rem;
       }

       .landslide-card+.landslide-card {
              margin-top: 0;
       }

       .landslide-area {
              flex: 0 0 30%;
       }

       .landslide-area::after {
              width: 7rem;
              height: 8rem;
       }

       .landslide-data {
              flex: 1;
              min-width: 0;
       }

       /* 라벨 */
       .landslide-label {
              top: -.8rem;
              min-width: 9rem;

              padding: 0 10px;
              font-size: 15px;
              clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
       }

       /* 취약지구 아이콘 */
       .landslide-pin img {
              width: auto;
              height: 7rem;
              margin: 2rem auto 0;
       }

       .landslide-pin p {
              font-size: 15px;
              line-height: 1.2;
       }



       /* 입력자료 */
       .landslide-data-list {
              display: flex;
              align-items: flex-start;
              gap: .8rem;
       }

       .landslide-data-list>div {
              flex: 0 0 5rem;

       }

       .landslide-data-list ul {
              flex: 1;
              min-width: 0;
              padding: .7rem;
              border-radius: 6px;
       }



       .landslide-map-list figure+figure {
              margin-top: 0;
       }

       .landslide-map-list img {
              width: 100%;
              height: auto;
              object-fit: contain;
       }

       /* 토사재해 분석 프로세스 */
       .landslide-process {
              padding: 5rem 1.2rem 2rem;
              border-radius: 5px;
       }

       .landslide-process .landslide-label {
              min-width: 10rem;
       }

       .process-list {
              display: block;
              width: 100%;
       }

       .process-list .responsive-img {
              width: 100%;
       }

       .process-list .responsive-img img {
              width: 100%;
              height: auto;
       }

       /* 하단 장점 2열 */
       .landslide-benefit {
              display: flex;
              flex-wrap: wrap;
              gap: 2.5rem 1.5rem;
              margin-top: 4rem;
       }

       .landslide-benefit li {
              display: flex;
              align-items: flex-start;
              flex: 0 0 calc(50% - .75rem);
              width: calc(50% - .75rem);
              gap: 1rem;
              padding: 0 1.5rem;
       }

       .landslide-benefit li+li {
              margin-top: 0;
       }

       .benefit-icon {
              flex: 0 0 4rem;
              width: 4rem;
              height: 4rem;
       }



       /* 마지막 재해 예방은 왼쪽 한 칸 */
       .landslide-benefit li:last-child {
              flex-basis: calc(50% - .75rem);
              width: calc(50% - .75rem);
       }

       .landslide-benefit li:after,
       .landslide-benefit li:nth-child(odd):not(:last-child)::after {
              display: none;
       }

       .landslide-benefit strong {
              font-size: 16px;
              margin-bottom: 10px;
       }

       .landslide-benefit p {
              font-size: 14px;
              line-height: 1.2;
       }
}



/* PDDI 공식  */


.drought-formula {
       font-weight: 700;
       font-size: 3rem;
       margin: 3rem 0 1.5rem;
       color: #011226;
       text-align: center;
}



.drought-formula .risk {
       color: #f42a38;
}

.drought-formula .exposure {
       color: #ed7133;
}

.drought-formula .response {
       color: #2e7ec8;
}



/* 벤다이어그램 + 위험성 / 노출성 / 대응능력 ============ */

.drought-factor-wrap {
       position: relative;
       margin-top: 8rem;
       padding-left: 34%;
       box-sizing: border-box;
}

/* 벤다이어그램 : 레이아웃에서 띄움 */
.drought-factor-venn {
       position: absolute;
       top: 0;
       left: 0;
       width: 28%;
       transform: translateY(-50%);
}



/* 벤다이어그램 → 요소 설명 화살표 */
.drought-factor-venn::after {
       position: absolute;
       top: 7rem;
       right: -5rem;
       width: 8rem;
       height: 12rem;
       background: url("../images/contents/drought-arrow.svg") no-repeat center / contain;
       content: "";
       transform: translateY(-50%);
}



/* 위험성 / 노출성 / 대응능력 */

.drought-factor-list {
       display: flex;
       width: 100%;
       min-width: 0;
       gap: 1rem;
}

.drought-factor-list li {
       display: flex;
       align-items: start;
       flex: 1;
       min-width: 0;
       min-height: 12rem;
       padding: 2rem;
       border-radius: 5px;
       box-sizing: border-box;
       color: #fff;
       gap: 1rem;
}

/* 색상 */
.drought-factor-list .risk {
       background-color: #df5b64;
}

.drought-factor-list .exposure {
       background-color: #ee925d;
}

.drought-factor-list .response {
       background-color: #62a4dc;
}


/* 아이콘 */
.drought-factor-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 0 0 4.8rem;
       width: 3.5rem;
       height: 3rem;
}

.drought-factor-icon img {
       width: 100%;
       height: 100%;
       object-fit: contain;
}


/* 텍스트 */
.drought-factor-list strong {
       display: block;
       margin-bottom: .6rem;
       font-size: 1.8rem;
       font-weight: 700;
       line-height: 1.4;
}

.drought-factor-list p {
       font-size: 1.4rem;
       font-weight: 500;
       line-height: 1.3;
       word-break: keep-all;
}


/* AS-IS / TO-BE*/

.drought-status {
       position: relative;
       width: 66%;
       margin: 5rem 0 0 auto;
       padding: 5.5rem 2.5rem 2.5rem;
       border: 1px solid #b9cad8;
       border-radius: .5rem;
       box-sizing: border-box;
       background-color: #fff;
       box-shadow: 0 .5rem 1.5rem rgba(1, 18, 38, .08);
}



/* 상단 타이틀  */

.drought-status-title {
       display: flex;
       align-items: center;
       justify-content: center;
       position: absolute;
       top: -2.5rem;
       left: 50%;
       z-index: 3;
       width: 30rem;
       height: 5.8rem;
       background: url("../images/contents/drought-status-title.svg") no-repeat center bottom;

       font-size: 2rem;
       font-weight: 600;
       color: #fff;
       transform: translateX(-50%);
       clip-path: polygon(10% 0,
                     90% 0,
                     100% 50%,
                     90% 100%,
                     10% 100%,
                     0 50%);
}

.drought-status.to-be .drought-status-title {
       background: url("../images/contents/drought-status-title2.svg") no-repeat center bottom;

}

.drought-status-title span {
       margin-left: .5rem;
       font-size: 1.4rem;
       font-weight: 600;
}


/* 내부 3열 ============================================ */

.drought-status-list {
       display: flex;
       align-items: stretch;
       position: relative;
       z-index: 2;
       gap: 2rem;
}

.drought-status-list>div {
       flex: 1;
       min-width: 0;
       padding: 1.5rem 2rem;
       border: 1px solid #d5dfe7;
       box-sizing: border-box;
       background-color: #ffffff;
       text-align: center;
       border-radius: 5px;

}

.drought-status-list>div>strong {
       display: block;
       position: relative;
       z-index: 2;
       margin-top: -3rem;
       margin-bottom: 1rem;
       padding: .6rem .5rem;
       font-size: 1.6rem;
       font-weight: 600;
       color: #fff;
       border-radius: 5px 5px 0 0;
}


/* 타이틀 색상 */
.drought-status-list .risk>strong {
       background-color: #dc4247;
}

.drought-status-list .exposure>strong {
       background-color: #f89e2d;
}

.drought-status-list .response>strong {
       background-color: #3589d6;
}

.drought-status-list .blue>strong {
       background-color: #8fa5ba;
}


/* 텍스트 */
.drought-status-list p,
.drought-status-list li {
       position: relative;
       z-index: 2;
       font-size: 1.4rem;
       font-weight: 500;
       color: #374b5e;
       word-break: keep-all;
       line-height: 1.4;
       ;
}

.drought-status-list ul {
       display: flex;
       position: relative;
       z-index: 2;
       flex-direction: column;
       gap: .5rem;
}

.drought-status-list li {
       padding: .45rem .5rem;
       background-color: #fff;
       font-size: 13px;
       letter-spacing: -1px;
}


/* TO-BE =============================================== */

.drought-status.to-be {
       width: 66%;
       margin-top: 1rem;

}

.drought-status.to-be .drought-status-list li {
       border-radius: 5px;
       border: 1px solid #c7d2dc;
}

/* To-Be 워터마크 ====================================== */

.drought-status.to-be .drought-status-list>div {
       position: relative;
       background-color: rgba(143, 165, 186, .3);
       font-weight: 600;
}

/* 공통 */
.drought-status.to-be .drought-status-list>div::before {
       position: absolute;
       left: 50%;
       bottom: 2rem;
       width: 10rem;
       height: 10rem;
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
       content: "";
       pointer-events: none;
       transform: translateX(-50%);
}

/* 가뭄위험성 */
.drought-status.to-be .risk::before {
       background-image: url("../images/contents/drought-risk.svg");
       opacity: .3;
}

/* 노출성 */
.drought-status.to-be .exposure::before {
       background-image: url("../images/contents/drought-exposure.svg");
       opacity: .3;
}

/* 대응능력 */
.drought-status.to-be .response::before {
       background-image: url("../images/contents/drought-response.svg");
       opacity: .08;
}

/* ===================================================== */
/* AS-IS → TO-BE 화살표 ================================ */

/*
HTML의
<div class="drought-status-arrow"></div>
는 그대로 사용.
화살표 모양은 CSS 도형이 아니라 background 이미지.
*/

.drought-status-arrow {
       width: 16rem;
       height: 7rem;
       margin: -.2rem 27% 4rem auto;
       background: url("../images/contents/drought-arrow-down.svg") no-repeat center / contain;
       transform: rotate(90deg);
}

/* 기존 도형 화살표 제거 */
.drought-status-arrow::before,
.drought-status-arrow::after {
       display: none;
}


/* ===================================================== */
/* TABLET ============================================== */

@media (max-width: 1024px) {

       /* 벤다이어그램 */
       .drought-factor-wrap {
              padding-left: 31%;
       }

       .drought-factor-venn {
              width: 25%;
       }

       .drought-factor-venn::after {
              right: -4rem;
              width: 3rem;
              height: 4rem;
       }




       /* 3요소 */
       .drought-factor-list {
              gap: .8rem;
       }

       .drought-factor-list li {
              min-height: 11rem;
              padding: 1.5rem;
              gap: 1rem;
       }

       .drought-factor-icon {
              flex: 0 0 4rem;
              width: 4rem;
              height: 4rem;
       }



       /* As-Is / To-Be */
       .drought-status,
       .drought-status.to-be {
              width: 69%;
       }

       .drought-status-list {
              gap: 1rem;
       }

       .drought-status {
              padding-right: 1.5rem;
              padding-left: 1.5rem;
       }

       /* 화살표 */
       .drought-status-arrow {
              width: 12rem;
              height: 9rem;
              margin-right: 31.5%;
       }
}




@media (max-width: 768px) {


       /* 벤다이어그램 */

       .drought-factor-wrap {
              display: flex;
              margin-top: 3rem;
              padding-left: 0;
              flex-direction: column;
              gap: 6rem;
       }

       .drought-factor-venn {
              position: relative;
              top: auto;
              left: auto;
              width: 60%;
              margin: 0 auto;
              transform: none;
       }

       /* 벤다이어그램 → 카드 화살표 */
       .drought-factor-venn::after {
              top: auto;
              right: auto;
              bottom: -7rem;
              left: 50%;
              width: 10rem;
              height: 10rem;
              transform: translateX(-50%) rotate(90deg);
       }

       .drought-status-title {

              font-size: 16px;
       }

       .drought-status-title span {
              font-size: 14px;
              ;
       }

       /* 위험성 / 노출성 / 대응능력 */

       .drought-factor-list {
              display: flex;
              width: 90%;
              flex-direction: column;
              gap: 1rem;
              margin: 0 auto;
       }

       .drought-factor-list li {
              gap: 2rem;
              width: 100%;
              min-height: 8rem;
              padding: 2rem 1.5rem;
       }


       .drought-factor-list strong {

              font-size: 16px;
       }

       .drought-factor-list p {
              font-size: 14px;
       }

       .drought-factor-list p br {
              display: none;
       }


       /* ================================================= */
       /* AS-IS / TO-BE */

       .drought-status,
       .drought-status.to-be {
              width: 100%;
              margin: 6rem 0 0;
              padding: 5rem 1.2rem 1.5rem;
       }

       .drought-status.to-be {
              margin-top: 0;
       }

       .drought-status.as-is .drought-status-list>div>strong {
              font-size: 15px;
       }



       .drought-status-list {
              gap: .7rem;
       }

       .drought-status-list>div {
              padding: 1rem .5rem;
       }

       .drought-status-list>div>strong {
              margin: -1rem -.5rem 1rem;
              padding: .6rem .2rem;
              font-size: 15px;

       }




       /* ================================================= */
       /* To-Be 워터마크 */

       .drought-status.to-be .risk::before,
       .drought-status.to-be .exposure::before,
       .drought-status.to-be .response::before {
              right: -.5rem;
              bottom: -.5rem;
              width: 7rem;
              height: 7rem;
       }


       /* ================================================= */
       /* As-Is → To-Be */

       .drought-status-arrow {

              margin: 0 auto;
              transform: rotate(90deg);
       }

       .drought-status.as-is {
              width: 100%;
              margin: 4rem 0 0;
              padding: 3.5rem 1rem 1rem;
       }

       .drought-status.as-is .drought-status-list {
              display: flex;
              flex-direction: column;
              gap: 0;
       }

       .drought-status.as-is .drought-status-list>div {
              display: flex;
              align-items: stretch;
              width: 100%;
              min-height: auto;
              margin-top: 1rem;
              padding: 0;
              border: 0;

              background-color: #fff;
              text-align: left;
       }

       .drought-status.as-is .drought-status-list>div:last-child {
              border-bottom: 0;
       }

       /* 왼쪽 제목 */
       .drought-status.as-is .drought-status-list>div>strong {
              display: flex;
              align-items: center;
              justify-content: center;
              flex: 0 0 12rem;
              margin: 0;
              padding: .8rem 1.5rem;
              color: #fff;
              text-align: center;
              border-radius: 0;
       }

       /* 오른쪽 내용 */
       .drought-status.as-is .drought-status-list>div>p {
              display: flex;
              align-items: center;
              flex: 1;
              padding: .8rem 1rem;
              border-bottom: 1px solid #d5dfe7;
              border-top: 1px solid #d5dfe7;
              word-break: keep-all;
              font-size: 14px;
       }

       .drought-status.as-is .drought-status-list>div>p br {
              display: none;
       }

       /* 기존 blue 라벨 */
       .drought-status.as-is .drought-status-list .blue>strong {
              background: linear-gradient(90deg, #4eb983 0%, #1687b0 100%);
       }

       .drought-formula {
              border-top: 1px solid #8fa5ba;
              padding-top: 4rem;
              font-size: 18px;
       }

       .drought-formula strong {
              font-weight: 600;
              display: block;
       }



}

/* 인사말 */
.greeting {
       padding: 3rem 0 5rem;
       overflow: hidden;
}


.greeting-visual {
       position: relative;
       width: 100%;
       margin-bottom: 20rem;
}

.greeting-visual>img {
       display: block;
       width: 100%;
       height: 36rem;
       object-fit: cover;
}

.greeting-slogan {
       position: absolute;
       right: -2px;
       bottom: -14rem;
       width: 80%;
       padding: 6rem 4.5rem;
       background: linear-gradient(90deg, #1475ad, #5fc285);
       color: #fff;
}

.greeting-slogan span {
       display: block;
       margin-bottom: 1.2rem;
       font-size: 1.6rem;
       color: #52ff91;
       font-weight: 500;
}

.greeting-slogan strong {
       display: block;
       font-size: 2.4rem;
       font-weight: 600;


}

.greeting-text {
       width: 77%;
       margin-left: auto;
}

.greeting-text h3 {
       margin-bottom: 4rem;
       font-size: 3.4rem;
       font-weight: 400;
       line-height: 1.5;
       color: #17283a;
}

.greeting-text h3 strong {

       font-weight: 600;
}

.greeting-text p {
       margin-bottom: 3rem;
       font-size: 1.8rem;
       line-height: 1.7;
       color: #374b5e;
       font-weight: 500;
       word-break: keep-all;
}

.greeting-text p:last-child {
       margin-bottom: 0;
}

.greeting-text em {
       font-weight: 600;
       color: #1f5e91;
}

@media (max-width: 1024px) {
       .greeting {
              padding: 6rem 0 10rem;
       }



       .greeting-visual>img {
              height: 32rem;
       }

       .greeting-slogan {
              width: 82%;
              padding: 3.5rem 4rem;
       }

       .greeting-text {
              width: 78%;
       }

       .greeting-text h3 {
              font-size: 2.6rem;
       }
}

@media (max-width: 768px) {
       .greeting {
              padding: 5rem 0 0;
       }

       .greeting-visual {
              margin-bottom: 4rem;
       }

       .greeting-visual>img {
              height: 24rem;
       }

       .greeting-slogan {
              position: relative;
              bottom: auto;
              right: auto;
              width: 100%;
              padding: 2.8rem 2.5rem;
       }

       .greeting-slogan strong {
              font-size: 2rem;
       }

       .greeting-text {
              width: 100%;
       }

       .greeting-text h3 {
              margin-bottom: 3rem;
              font-size: 20px;
              line-height: 1.2;
       }

       .greeting-text h3 br {
              display: none;
       }

       .greeting-text p {
              font-size: 14px;
              line-height: 1.5;
       }
}

@media (max-width: 576px) {
       .greeting-visual>img {
              height: 21rem;
       }

       .greeting-slogan {
              padding: 2.5rem 2rem;
       }

       .greeting-slogan span {
              font-size: 13px;
       }

       .greeting-slogan strong {
              font-size: 19px;
       }
}

/* 수행실적 */
.history-intro {
       margin-bottom: 7rem;
       font-size: 2rem;
       line-height: 1.65;
       text-align: center;
       color: var(--color-main);
       word-break: keep-all;
}

.history-list {
       margin-top: 4rem;
       border-top: 1px solid #d2dbe3;
       border-bottom: 1px solid #d2dbe3;
       box-sizing: border-box;
}

.history-year {
       display: flex;
}

.history-year>h3 {
       flex: 0 0 160px;
       align-self: flex-start;
       position: sticky;
       top: calc(var(--header-height) + 30px);
       padding: 5rem 2rem 0 0;
       font-size: 5rem;
       font-weight: 500;
       line-height: 1;
       color: #004699;
}

.history-year:first-child>h3 {
       padding-top: 18rem;
}

.history-items {
       flex: 1;
       padding: 3rem 0 4rem;
       border-top: 1px solid #d2dbe3;
       border-left: 1px solid #d2dbe3;
}

.history-year:first-child .history-items {
       border-top: 0 none;
}

.history-year:first-child .history-items li:first-child {
       margin-bottom: 3rem;
}

.history-items>li {
       display: flex;
       flex-wrap: wrap;
       position: relative;
       min-height: 12rem;
       padding: 3rem 0 3rem 7rem;
}

.history-items>li::before {
       position: absolute;
       top: 3rem;
       left: -5px;
       width: 9px;
       height: 9px;
       border-radius: 50%;
       background: #004699;
       content: "";
}

.history-date {
       flex: 0 0 100%;
       display: block;
       margin-bottom: 2rem;
       font-size: 1.8rem;
       font-weight: 500;
       line-height: 1;
       color: #004699;
}

.history-content {
       display: flex;
       align-items: center;
       width: 100%;
}

.history-logo {
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 0 0 200px;
       height: 80px;
       margin-right: 4rem;
       border: 1px solid #dfe5ea;
       box-sizing: border-box;
       background: #fff;
}

.history-logo img {
       display: block;
       width: auto;
       height: auto;
       max-width: 100%;
       max-height: 100%;
}

.history-text {
       flex: 1;
       min-width: 0;
}

.history-text .tit {
       display: block;
       margin-bottom: .5rem;
       font-size: 1.6rem;
       font-weight: 500;
       color: #374b5e;
}

.history-text p {
       font-size: 2rem;
       font-weight: 600;
       line-height: 1.5;
       word-break: keep-all;
       color: #011226;
}

@media (max-width: 1024px) {
       .history-year>h3 {
              flex-basis: 120px;
              font-size: 3.5rem;
       }

       .history-items>li {
              padding-left: 4rem;
       }

       .history-logo {
              flex-basis: 160px;
              height: 64px;
              margin-right: 3rem;
       }
}

@media (max-width: 768px) {
       .history {
              padding: 5rem 0 8rem;
       }



       .history-intro br {
              display: none;
       }

       .history-year {
              align-items: flex-start;
       }

       .history-year>h3 {
              flex: 0 0 60px;
              position: static;
              padding: 2.5rem 1rem 0 0;
              font-size: 20px;
              font-weight: 600;
       }

       .history-year:first-child>h3 {
              padding-top: 2.5rem;
       }

       .history-items {
              padding: 1rem 0 3rem;
       }

       .history-items>li {
              min-height: 0;
              padding: 1.8rem 0 2rem 2rem;

       }

       .history-items>li:last-child {
              border-bottom: 0;
       }

       .history-items>li::before {
              top: 2.5rem;
              left: -4px;
              width: 7px;
              height: 7px;
       }

       .history-date {
              margin-bottom: 0;
              font-size: 18px;
              font-weight: 600;

       }


       .history-content {
              display: block;

       }

       .history-logo {
              flex-basis: 200px;
              width: 200px;
              height: auto;
              margin: 2rem 0 0 0;
              padding: 0;
       }

       .history-text .tit {
              margin: 2rem 0 1rem;
              font-size: 16px;
       }

       .history-text p {
              font-size: 16px;
       }


}

@media (prefers-reduced-motion: reduce) {
       .history [data-aos] {
              opacity: 1 !important;
              transform: none !important;
              transition: none !important;
       }
}




/* 조직구성 */
.top .org {
       overflow: hidden;
       padding: 7rem 0 12rem;
}

.org-list {
       display: flex;
       flex-direction: column;
       gap: 7rem;
       margin-top: 3rem;
}

.org-item {
       display: flex;
       align-items: center;
}

.org-item:nth-child(even) {
       flex-direction: row-reverse;
}

.org-img,
.org-text {
       width: 50%;
}

.org-img {
       height: 32rem;
       overflow: hidden;
       background: #eef2f4;
}

.org-img img {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
       transition: transform .5s;
}

.org-item:nth-child(odd) .org-text {
       padding-left: 6rem;
}

.org-item:nth-child(even) .org-text {
       padding-right: 6rem;
}

.org-text {
       position: relative;
       overflow: hidden;
}

.org-num {
       display: block;
       position: relative;
       margin-bottom: -1.8rem;
       font-size: 13rem;
       font-weight: 700;
       line-height: 1;
       color: #e8ecf0;

       /* 추가 */
       clip-path: inset(0 0 35% 0);
}


.org-text h3 {
       position: relative;
       z-index: 20;
       margin-bottom: 1.2rem;
       font-size: 3.4rem;
       font-weight: 600;
       line-height: 1.3;
       color: var(--color-mian);
}

.org-text h3::after {
       display: block;
       width: 2.4rem;
       height: 2px;
       margin-top: 15px;
       background: #011226;
       content: "";
}

.org-text>strong {
       display: block;
       margin-bottom: .8rem;
       font-size: 2rem;
       line-height: 1.5;
       color: var(--color-mian);
       font-weight: 600;
       ;
}

.org-text ul {
       display: flex;
       flex-direction: column;
       gap: .3rem;
}

.org-text li {
       position: relative;
       padding-left: 1.5rem;
       line-height: 1.55;
       font-size: 1.6rem;
       color: #374b5e;
       word-break: keep-all;
}

.org-text li::before {
       position: absolute;
       top: .7em;
       left: 0;
       width: 3px;
       height: 3px;
       border-radius: 100%;
       background: #8fa5ba;
       content: "";
}

@media (hover: hover) and (pointer: fine) {
       .org-item:hover .org-img img {
              transform: scale(1.03);
       }
}

@media (max-width: 1024px) {


       .org-list {
              gap: 6rem;
       }

       .org-img {
              height: 28rem;
       }

       .org-item:nth-child(odd) .org-text {
              padding-left: 4rem;
       }

       .org-item:nth-child(even) .org-text {
              padding-right: 4rem;
       }

       .org-num {
              font-size: 7rem;
       }

       .org-text h3 {
              font-size: 2.4rem;
       }
}

@media (max-width: 768px) {
       .org-list {
              gap: 5rem;
       }

       .org-item,
       .org-item:nth-child(even) {
              flex-direction: column;
       }

       .org-img,
       .org-text {
              width: 100%;
       }

       /* .org-img {
       height: 40rem;
       }*/

       .org-item:nth-child(odd) .org-text,
       .org-item:nth-child(even) .org-text {
              padding: 2.5rem 0 0;
       }

       .org-num {
              font-size: 3rem;
              margin-bottom: 2px;
       }

       .org-text h3 {
              font-size: 20px;
       }

       .org-text>strong {
              font-size: 16px;
       }

       .org-text li {
              font-size: 14px;
       }
}

/*오시는 길 */
.location-map {
       height: 63rem;
       border-radius: 1rem;
       overflow: hidden;
}

.location-map .item {
       height: 100%;
}

.contact-map iframe {
       width: 100%;
       height: 100%;
       border: 0;
}

.contact-section {
       padding: 3rem 0 0;
}



.contact-map-wrap {
       position: relative;
       width: 100%;
       max-width: 120rem;
       margin: 0 auto;
}

.contact-map {
       overflow: hidden;
       width: 100%;
       height: 56rem;
       background-color: #edf1f4;
}

.contact-map img {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
}

.contact-info {
       position: absolute;
       right: 0;
       bottom: -9rem;
       width: 45%;
       padding: 2rem 2rem;
       background:
              linear-gradient(110deg,
                     #1671aa 0%,
                     #368fa8 52%,
                     #5abc82 100%);
       color: #fff;
}

.contact-info-head {
       display: flex;
       align-items: center;

       margin-bottom: 2rem;
}

.contact-info-logo {
       width: 24rem;
       max-height: 6rem;
       object-fit: contain;
       object-position: left center;
}

.contact-info-list {
       width: 100%;
       margin: 0;
}

.contact-info-item {
       display: grid;
       grid-template-columns: 17rem minmax(0, 1fr);
       position: relative;

       border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.contact-info-item::before,
.contact-info-item::after {
       display: inline-block;
       content: '';
       position: absolute;
       left: 0;
       bottom: -1px;
       width: 17rem;
       height: 2px;
       background-color: #011226;
       z-index: 3;
}

.contact-info-item:first-child:before {
       display: inline-block;
       bottom: 0;
       top: -1px;
       ;

}

.contact-info-item:last-child {
       border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.contact-info-item dt {
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       padding: 1.5rem 1.5rem;
       font-size: 1.6rem;
       font-weight: 500;
       line-height: 1.5;
       text-align: center;
       color: #fff;
}



.contact-info-item dd {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 0.5rem 1.5rem;
       padding: 1.5rem 3rem;
       font-size: 1.6rem;
       font-weight: 500;
       line-height: 1.5;
}

.contact-info-item a {
       color: inherit;
       text-decoration: none;
}

.contact-info-separator {
       margin-left: 1rem;
       font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
       .contact-info-item a:hover {
              text-decoration: underline;
              text-underline-offset: 0.4rem;
       }
}


@media (max-width: 1024px) {

       .contact-map {
              width: calc(100% - 6rem);
              height: 48rem;
       }

       .contact-info {
              bottom: -6rem;
              width: 70%;
              min-height: auto;
              padding: 3.5rem 4rem;
       }

       .contact-info-logo {
              width: 21rem;
       }


}


@media (max-width: 768px) {

       .contact-map {
              order: 1;
              width: 100%;
              height: 45rem;
       }

       .contact-info {
              order: 2;
              position: relative;
              right: auto;
              bottom: auto;
              width: 100%;
              min-height: auto;
              padding: 3rem 2rem;
       }

       .contact-info-item dt::after {
              display: none;
       }

       .contact-info-item dd {
              display: block;
              font-size: 14px;
       }

       .contact-info-item dd a {
              display: block;
       }

       .contact-info-separator {
              display: inline-block;
              margin-right: 0.5rem;
              margin-left: 0;
       }
}




@media (max-width: 576px) {


       .contact-info {
              padding: 2.8rem 2rem;
       }

       .contact-info-logo {
              width: 16rem;
       }

       .contact-info-item::before,
       .contact-info-item::after {

              height: 1px;

       }

}

/* TAEKSAN > 회사소개  */

.company-page {
       position: relative;
}

.company-section {
       position: relative;

}

.company-section-head {
       margin-bottom: 5rem;
       text-align: center;
}


.company-overview {
       display: flex;
       align-items: stretch;
       gap: 4rem;
       padding-bottom: 4rem;
}


/* TABLE */
.company-overview-table {
       flex: 1;
       min-width: 0;
}

.company-overview-table table {
       width: 100%;
       border-collapse: collapse;
       table-layout: fixed;

       background-color: #fff;
}

.company-overview-table caption {
       position: absolute;
       width: 1px;
       height: 1px;
       margin: -1px;
       padding: 0;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
}

.company-overview-table .company-table-head {
       width: 14rem;
}

.company-overview-table th,
.company-overview-table td {
       padding: 1.2rem 1.5rem;
       border-bottom: 1px solid #d2dbe3;
       box-sizing: border-box;
       font-size: 1.6rem;
       font-weight: 500;
       line-height: 1.6;
       vertical-align: middle;
       word-break: keep-all;
}

.company-overview-table th {
       background-color: #fff;
       font-weight: 600;
       color: #011226;
       text-align: center;
       border-top: 2px solid #011226;
}

.company-overview-table tr:last-child th {
       border-bottom: 2px solid #011226;
}

.company-overview-table tr:first-child td {
       border-top: 1px solid #d2dbe3;
}

.company-overview-table td {
       padding: 1rem 4rem;
       color: #374b5e;
       text-align: left;
}

.company-table-space {
       margin-left: 2rem;
}


/* IMAGE */
.company-overview-img {
       flex: 0 0 40%;
       min-width: 0;
       overflow: hidden;
}

.company-overview-img img {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
}

.company-section-head {
       margin: 4rem 0;
}

.company-section-head h3 {
       font-size: 3.4rem;
       color: #011226;
       letter-spacing: -1px;
       line-height: 1.4;
}

.company-section-head h3 strong {
       font-weight: 600;

}

/* BUSINESS ============================================ */
/*
.company-business-visual {
padding: 5rem;
box-sizing: border-box;
background-color: #f2f5f7;
text-align: center;
}

.company-business-visual img {
display: block;
width: 70%;
max-width: 75rem;
height: auto;
margin: 0 auto;
}*/

/* ai 영상기반 */
.company-ai {
       margin: 8rem 0;
}

.company-ai-list {
       display: flex;
       flex-wrap: wrap;
       gap: 2rem 4rem;
       padding-top: 2rem;
}

.company-ai-list>li {
       display: flex;
       align-items: center;
       width: calc((100% - 8rem) / 3);
       min-height: 16rem;
       padding: 2.5rem 2rem;
       border: 1px solid #d0e4fc;
       border-radius: 10px;
       box-sizing: border-box;
       background-color: #fff;
       gap: 1.2rem;
       transition:
              transform .3s ease,
              box-shadow .3s ease,
              border-color .3s ease;
}




/* ICON */
.company-ai-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 0 0 9rem;
       width: 6rem;
       height: 6rem;
}

.company-ai-icon img {
       display: block;
       width: auto;
       height: auto;
       max-width: 100%;
       max-height: 100%;
}


/* TEXT */
.company-ai-text {
       flex: 1;
       min-width: 0;
}

.company-ai-text>strong {
       display: block;
       margin-bottom: .7rem;
       font-size: 2rem;
       font-weight: 600;
       line-height: 1.4;
       color: #004699;
       word-break: keep-all;
}

.company-ai-text p {
       font-size: 14px;
       font-weight: 500;
       color: #374b5e;

}

/* PUBLIC ICT */

.company-public-list {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       gap: 13rem;
       margin: 5rem 0;
}

.company-public-item {
       flex: 0 1 45rem;
       /*width: 40rem;
       max-width: 40%;
       min-width: 0;*/
}

.company-public-item img {
       display: block;
       width: 100%;
       height: auto;
       margin: 0 auto;
}



@media (max-width: 1024px) {


       .company-section-head {
              margin-bottom: 4rem;
       }



       /* OVERVIEW */
       .company-overview {
              gap: 3rem;
       }

       .company-overview-table .company-table-head {
              width: 11rem;
       }


       .company-overview-img {
              flex-basis: 35%;
       }




       /* AI */
       .company-ai-list {
              gap: 1.5rem;
       }

       .company-ai-list>li {
              width: calc((100% - 1.5rem) / 2);
              min-height: 12rem;

              gap: 1.5rem;
       }

       .company-ai-icon {
              flex-basis: 6rem;
              width: 6rem;
              height: 6rem;
       }

       /* ICT */
       .company-public-list {
              gap: 5rem;
       }

       .company-public-item {
              flex-basis: 45%;
       }
}




@media (max-width: 768px) {


       .company-overview {
              flex-direction: column;
              gap: 5rem;

       }

       .company-overview-table {
              width: 100%;
       }

       .company-table-space {
              display: block;
              margin: .3rem 0 0;
       }

       .company-overview-img {
              flex: none;
              width: 100%;
       }

       .company-overview-img img {
              height: auto;
       }

       .company-overview-table th,
       .company-overview-table td {

              padding-left: 3%;
              padding-right: 3%;
              font-size: 14px;
              ;
       }

       .contact-info-item dt,
       .contact-info-item dd {
              font-size: 14px;

       }

       .company-overview-table td br {
              display: none;
       }

       .company-business-visual img {
              width: 100%;
       }

       /* AI PLATFORM */

       .company-ai-list {
              /* flex-direction: column; */
              gap: 2rem;
       }

       .company-ai-list>li {
              display: block;
              width: calc((100% - 2rem) / 2);
              min-height: 9rem;
              gap: 0;

       }

       .company-ai-icon {
              flex: 0 0 5.5rem;
              margin-bottom: 10px;

       }

       .company-public .company-section-head {
              margin-bottom: 3rem;
       }


       .company-public-list {
              display: flex;
              align-items: center;
              flex-direction: column;
              gap: 4rem;
       }

       .company-ai-text>strong {
              font-size: 18px;
       }

       .company-public-item {
              flex: none;
              width: 80%;
              max-width: 40rem;
       }

}