@charset "utf-8";
@import "sub.css";

/* 공통 */
.con_tit {font-size: 2.25rem; font-weight: 700; margin: 4rem 0 2rem; text-align: center;}
.con_tit + .con_sub_tit {margin-top: 0;}
.con_sub_tit {font-size: 1.5rem; font-weight: 700; margin: 1.75rem 0 1rem; padding-left: 1rem; position: relative;}
.con_sub_tit::before {content: ""; width: 3px; height: 3px; border: 3px solid transparent; background-image: linear-gradient(#fff, #fff),
linear-gradient(45deg, #60C3AE 0%,  #155EE8 100%); background-origin: border-box; background-clip: content-box, border-box; border-radius: 50%; position: absolute; left: 0; top: 10px;}
.con_sub_tit ~ .con_sub_tit {margin-top: 3rem;}

.con_box {padding: 1.5rem; font-size: 1.0625rem; line-height: 1.5; border-radius: 15px; background: #F5F8FB;}
.con_box img {max-width: 100%; mix-blend-mode: multiply;}
.txt_box {padding: 1.5rem 2rem; font-size: 1.0625rem; line-height: 1.5; border-radius: 15px; background: #F9F9F9;}
.img_box {padding: 4rem; border-radius: 15px; background: #F9F9F9;}
.img_box img {max-width: 100%; mix-blend-mode: multiply;}

.contents p {font-size: 1.0625rem;}
.t_center {text-align: center!important;}
.t_left {text-align: left!important;}

@media (max-width: 767px) {
    .con_tit {font-size: 1.85rem; margin: 3rem 0 1.5rem;}

    .img_box {padding: 1.5rem;}
}


/* 탭 */
.tab_tit {margin-bottom: 3.125rem; display: flex;}
.tab_tit li {flex: 1 1 auto}
.tab_tit li button {display: block; width: 100%; text-align: center; font-size: 1.0625rem; font-weight: 500; color: #7a7a7a; padding: 1rem; border-bottom: 2px solid #ebebeb; white-space: nowrap;}
.tab_tit li.on button {color: #155EE8; border-bottom: 2px solid #155EE8;}
.tab_content li {display: none;}
.tab_content li.active {display: block;}

@media (max-width: 1420px) {
    .tab_tit li a {width: auto!important;}
}

@media (max-width: 767px) {
    .tab_tit {flex-wrap: wrap; gap: .5rem;}
    .tab_tit li {width: calc(100% / 2 - .25rem); flex: initial;}
    .tab_tit li button {border: 1px solid #ddd;}
    .tab_tit li.on button {border: 1px solid #155EE8;}
}


/* 도트 리스트 */
.dot_list {display: flex; flex-wrap: wrap; gap: 5px;}
.dot_list > li {width: 100%; font-size: 1.0625rem; line-height: 1.5; padding-left: 10px; position: relative;}
.dot_list > li::before {content: ""; width: 2px; height: 2px; background: #222; border-radius: 50%; position: absolute; left: 0; top: 10px;}
.dot_list > li ul {display: flex; flex-wrap: wrap; gap: 5px; padding-left: 1rem;}
.dot_list > li ul li {width: 100%; font-size: 1.0625rem; line-height: 1.5; position: relative;}


/* 숫자 리스트 */
.num_list {display: flex; flex-wrap: wrap; gap: 5px; list-style: none; counter-reset: item;}
.num_list > li {width: 100%; font-size: 1.0625rem; line-height: 1.5; padding-left: 22px; position: relative; counter-increment: item;}
.num_list > li::before {content: counter(item); border-radius: 50%; position: absolute; left: 0; top: 4px; font-size: .8125rem; color: #fff; padding: 1px; background: #222; width: 14px; height: 14px; text-align: center; line-height: 14px;}
.num_list > li > ol,
.num_list > li > ul {margin-top: 5px;}
.num_list.type02 > li {font-size: 1.0625rem; padding-left: 18px;}
.num_list.type02 > li::before {color: #555; background: #fff; font-size: 1rem; font-weight: 500; top: 4px;}

.sub_list {display: flex; flex-wrap: wrap; gap: 5px;}
.sub_list > li {width: 100%; font-size: 1.0625rem; line-height: 1.5; padding-left: 15px; position: relative;}
.sub_list > li::before {content: ""; width: 5px; height: 5px; border-left: 1px solid #222; border-bottom: 1px solid #222; position: absolute; left: 3px; top: 7px;}


/* 다운로드 리스트 */
.down_list {display: flex; gap: 5px 20px;}
.down_list li a {display: inline-block; padding: 15px 60px 15px 25px; background: #fff; border: 1px solid #222; border-radius: 10px; font-size: 1.0625rem; position: relative; transition: .3s; overflow: hidden;}
.down_list li a::before {content: ""; background: url(/images/icon/ico_down_b.svg) center center no-repeat; width: 9px; height: 8px; background-size: cover; position: absolute; right: 29px; top: 50%; transform: translateY(-200%); opacity: 0; transition: .3s;}
.down_list li a::after {content: ""; background: url(/images/icon/ico_down_b.svg) center center no-repeat; width: 9px; height: 8px; background-size: cover; position: absolute; right: 29px; top: 50%; transform: translateY(-50%); transition: .3s;}
.down_list li a:hover::before {transform: translateY(-50%); opacity: 1;}
.down_list li a:hover::after {transform: translateY(200%); opacity: 0;}

@media (max-width: 767px) {
    .down_list {flex-wrap: wrap;}
    .down_list li {width: 100%;}
    .down_list li a {width: 100%;}
}


/* 테이블 */
.tbl_wrap {border-top: 1px solid #222; overflow-x: auto; margin-top: .3rem;}
.tbl_wrap + .tbl_wrap {margin-top: 3rem;}
.tbl_wrap .tbl {width: 100%;}
.tbl_wrap .tbl tr {border-bottom: 1px solid #ebebeb;}
.tbl_wrap .tbl tr th {padding: 15px 10px; font-size: 1.0625rem; font-weight: 700; background: #F2F3F5; border-right: 1px solid #ebebeb; text-align: center; white-space: nowrap;}
.tbl_wrap .tbl tr th:last-child {border-right: 0;}
.tbl_wrap .tbl tr td {padding: 15px 10px; font-size: 1.0625rem; font-weight: 400; background: #fff; border-right: 1px solid #ebebeb; text-align: center; word-break: break-word;}
.tbl_wrap .tbl tr td:last-child {border-right: 0;}
.tbl_wrap .tbl tr td.dashed {position: relative;}
.tbl_wrap .tbl tr td.dashed::before {content: ""; width: 0; height: 100%; border-left: 1px solid #fff; position: absolute; left: -1px; top: 0; z-index: 1;}
.tbl_wrap .tbl tr td.dashed::after {content: ""; width: 0; height: 100%; border-left: 1px dashed #ebebeb; position: absolute; left: -1px; top: 0; z-index: 2;}


/* 사이트맵 */
.sitemap {line-height: 1.5;}
.sitemap .depth1 {display: flex; flex-wrap: wrap; border-top: 2px solid #222;}
.sitemap .depth1 > li {width: 100%; display: flex; flex-wrap: wrap; gap: 0 2rem; align-items: flex-start; border-bottom: 1px solid #ebebeb;}
.sitemap .depth1 > li > h3 {width: 20%; height: 100%; padding: 2rem; font-size: 1.0625rem; border-right: 1px solid #ebebeb;}
.sitemap .depth1 > li .depth2 {width: calc(80% - 2rem); height: 100%; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; padding: 2rem 0;}
.sitemap .depth1 > li .depth2 > li {width: calc(100% / 4 - 15px); display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;}
.sitemap .depth1 > li .depth2 > li > a {font-size: 1.0625rem; font-weight: 600;}
.sitemap .depth1 > li .depth2 > li .depth03 {width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start;}
.sitemap .depth1 > li .depth2 > li .depth03 > li {width: 100%;}
.sitemap .depth1 > li .depth2 > li .depth03 > li a {font-size: 1rem; color: #828282; padding-left: 7px;}
.sitemap .depth1 > li a {position: relative; transition: .3s;}
.sitemap .depth1 > li a:hover {color: #155EE8!important;}
.sitemap .depth1 > li a[target=_blank]::after {content: ""; background: url(/images/icon/ico_link_b.svg) center center no-repeat; width: 14px; height: 14px; background-size: cover; position: absolute; right: -16px; top: 2px;}
.sitemap .depth1 > li .depth2 > li .depth03 > li a[target=_blank]::after {opacity: .6;}
.sitemap .depth1 > li .depth2 > li .depth03 > li a::before {content: ""; width: 2px; height: 2px; border-radius: 50%; background: #828282; position: absolute; left: 0; top: 8px;}

@media (max-width: 767px) {
    .sitemap .depth1 {gap: 2rem;}
    .sitemap .depth1 > li + li {border-top: 2px solid #222;}
    .sitemap .depth1 > li > h3 {border-bottom: 1px dashed #ebebeb; font-size: 1.125rem;}
    .sitemap .depth1 > li > h3,
    .sitemap .depth1 > li .depth2 {width: 100%; height: auto; padding: 1.5rem;}
    .sitemap .depth1 > li .depth2 > li {width: calc(100% / 2 - 10px);}
}

@media (max-width: 500px) {
    .sitemap .depth1 > li .depth2 > li {width: 100%;}
}


/* 데이터 공유 요청 */
.sm_btn {padding: 2px 5px; background: #F2F3F5; color: #555; font-weight: 700; font-size: .75rem; border-radius: 5px; vertical-align: middle;}
.data_request {display: flex; flex-wrap: wrap;}
.data_request > li {width: 50%;}
.email_wrap {display: flex; align-items: center; justify-content: space-between; gap: 10px;}

@media (max-width: 767px) {
    .data_request > li {width: 100%;}
    .dia_effect li br {display: none;}
}


/* 데이터 신청 결과 조회 */
.data_result span {display: inline-block; font-size: .9375rem; font-weight: 600; padding: 5px 10px; border-radius: 5px;}
.data_result span#dataProcess {background: #EFF1F6; color: #3F3F3F;}
.data_result span#dataApprove {background: #E4FFE5; color: #00790E;}
.data_result span#dataReject {background: #FFEBEB; color: #DC3545;}


/* 단장 인사말 */
.greeting {display: flex; flex-wrap: wrap; gap: 50px;}
.greeting_box {width: 100%; padding: 4rem; position: relative; animation: boxShow 1s ease; animation-fill-mode: forwards; opacity: 0;}
.greeting_box::before {content: ""; background: linear-gradient(45deg, #60C3AE 0%,  #155EE8 100%); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -2; border-radius: 0 200px 0 0; box-shadow: 0 2px 24px rgba(21,94,232,.15);}
.greeting_box::after {content: ""; background: url(/images/contents/symbol_logo.png) right bottom no-repeat; width: 700px; height: 100%; background-size: 65%; position: absolute; right: 20px; bottom: -10px; opacity: .1; z-index: -1;}
.greeting_box span {color: #fff; font-size: .9375rem;}
.greeting_box .txt {padding: 50px 0; font-size: 2.25rem; color: #fff; line-height: 1.5; position: relative;}
.greeting_box .txt::before {content: ""; width: 0; height: 20px; border-left: 2px solid #fff; position: absolute; left: 0; top: 20px;}
.greeting_box .sign {text-align: right; color: #fff; font-size: .9375rem;}
.greeting_box .sign span {font-size: 1.375rem; font-weight: 700; display: inline-block; margin-left: 10px; letter-spacing: .1rem;}
.greeting_txt p {padding: 1.5rem 0; font-size: 1.375rem; line-height: 2; word-break: break-word;}
.greeting_txt p b {font-size: 1.5rem;}

@media (max-width: 767px) {
    .greeting br {display: none;}
    .greeting_box {padding: 2.5rem;}
    .greeting_box::before {border-radius: 0;}
    .greeting_box::after {background-size: 50%;}
    .greeting_box .txt {font-size: 1.5rem;}
}


/* 비전 및 목표 */
.vision .v_tit {text-align: center; font-size: 2.75rem; line-height: 1.5; font-weight: 400; animation: boxShow 1s ease; animation-fill-mode: forwards; opacity: 0;}
.vision .v_tit b {font-weight: 900;}
.vision .v_txt {font-size: 1.8125rem; text-align: center; margin: 50px 0; animation: boxShow 1s ease; animation-fill-mode: forwards; opacity: 0; animation-delay: 0.5s;}
.vision .v_txt b {color: #155EE8;}
.vision .v_dia{width: 100%; position: relative; animation: boxShow 1s ease; animation-fill-mode: forwards; opacity: 0; animation-delay: 1s;}
.business {display: flex; flex-wrap: wrap; gap: 0 30px; padding: 3rem; margin: 5rem 0; background: #F9F9F9; border-radius: 15px; animation: boxShow 1s ease; animation-fill-mode: forwards; opacity: 0; animation-delay: 1.5s;}
.business .box {width: calc(100% / 3 - 20px); padding: 0 3rem; text-align: center;}
.business .box + .box {border-left: 1px dashed #b3b3b3;}
.business .box .ico {display: flex; width: 100px; height: 100px; margin: 0 auto; align-items: center; justify-content: center; padding: 20px; background: #fff; border-radius: 50%;}
.business .box .ico img {width: 100%;}
.business .box h5 {font-size: 1.5rem; font-weight: 700; margin: 30px 0 20px; color: #413070;}
.business .box p {font-size: 1.25rem; line-height: 1.5;}
.goals {margin-bottom: 75px; display: flex; justify-content: center; gap: 30px; padding: 0 7rem;}
.goals li {width: 100%; padding: 50px 0 30px; border-radius: 500px 500px 0 0; background: linear-gradient(to bottom, #fff, transparent); text-align: center; box-shadow: 0 -6px 12px rgba(0,0,0,.05);}
.goals li span {font-size: 1.0625rem; font-weight: 600;}
.goals li .txt {margin-top: 10px; font-size: 1.5rem; font-weight: 700; color: #155EE8; line-height: 1.5;}
.develop {display: flex; flex-wrap: nowrap; justify-content: center; gap: 50px;}
.develop strong {display: block; font-size: 1.5rem; font-weight: 700; text-align: center; position: relative; margin-top: 20px;}
.develop strong::before {content: ""; width: 80%; height: 20px; border: 1px dashed #555; border-top: none; position: absolute; left: 50%; top: -30px; transform: translateX(-50%);}
.develop .con01 strong {color: #00A07C;}
.develop .con02 strong {color: #063981;}
.develop ul {width: 100%; display: flex; flex-wrap: nowrap; position: relative; gap: 4rem 50px;}
.develop ul > li {position: relative;}
.develop ul > li .num {display: block; font-size: 1rem; font-weight: 700; text-align: center;}
.develop ul > li .circle {width: 160px; height: 160px; background: #fff; color: #fff; font-size: 1.25rem; font-weight: 600; line-height: 1.5; text-align: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 20px; margin: 2rem auto; position: relative; transition: .3s;}
.develop ul > li .circle::before {content: ""; width: 10px; height: 16px; background: url(/images/icon/ico_dia_arrow_b.svg) center no-repeat; background-size: cover; position: absolute; left: -16%; top: 50%; transform: translateY(-50%);}
.develop .con01 ul > li:nth-child(1) .circle::before {display: none;}
.develop .con01 ul > li:nth-child(1) .circle {background: #91C140;}
.develop .con01 ul > li:nth-child(2) .circle {background: #00A07C;}
.develop .con02 ul > li:nth-child(1) .circle {background: #2899AC;}
.develop .con02 ul > li:nth-child(2) .circle {background: #164A8E;}
.develop .con02 ul > li:nth-child(3) .circle {background: #063981;}
.develop .con02 ul > li:nth-child(4) .circle {background: #04174F;}

@media (max-width: 1279px) {
    .goals {padding: 0;}
    .develop,
    .develop ul {gap: 30px;}
    .develop ul > li .circle {width: 130px; height: 130px; font-size: 1.25rem;}
}

@media (max-width: 1023px) {
    .develop,
    .develop ul {flex-wrap: wrap; width: 100%;}
    .develop > div,
    .develop ul > li {width: 100%;}
    .develop > div {padding: 20px; border-radius: 10px;}
    .develop strong::before {display: none;}
    .develop .con01 {background: #E4F9F4;}
    .develop .con02 {background: #E5EDF9;}
    .develop ul > li .circle {width: 100%; height: auto; border-radius: 10px; margin: 5px auto; padding: 10px;}
    .develop ul > li .circle::before {display: none;}
}

@media (max-width: 767px) {
    .vision .v_tit {font-size: 2.25rem;}
    .vision .v_box {width: 100%;}
    .business {padding: 2rem;}
    .business .box {width: 100%; padding: 2rem;}
    .business .box + .box {border-left: none; border-top: 1px dashed #b3b3b3;}
    .business .box .ico {width: 60px; height: 60px; padding: 10px;}
    .goals {flex-wrap: wrap; gap: 20px; margin-bottom: 20px;}
    .goals li {width: 100%; background: #fff; border-radius: 10px; padding: 10px; box-shadow: none; border: 1px dashed #858585;}
    .goals li .txt br {display: none;}
}


/* 사업단 연혁 */
.history {display: flex; flex-wrap: wrap; gap: 8rem; margin: 4rem 0;}
.history .year {width: 100%; display: flex; flex-wrap: wrap; position: relative;}
.history .year h3 {font-size: 2.25rem; font-weight: 700; padding-top: .5rem; width: 300px; text-align: left;}
.history .year ul {width: calc(100% - 300px); position: relative;}
.history .year ul::after {content: ""; width: 0; height: 100%; border-right: 1px solid #ddd; position: absolute; top: .5rem; left: 80px; z-index: -1;}
.history .year ul li {position: relative; padding-left: 100px; line-height: 1.5;}
.history .year ul li:first-child {margin-top: 1rem;}
.history .year ul li+li {margin-top: 3rem;}
.history .year ul li .month {font-size: 1.125rem; font-weight: 700; position: absolute; top: 0; left: 0;}
.history .year ul li::after {content: ""; width: 5px; height: 5px; background:#155EE8; border-radius: 50%; position: absolute; left: 78px; top: 11px;}
.history .year ul li p {font-size: 1.125rem; margin: 0;}
.history .year ul li p span {color: #2899AC; font-weight: 700;}

@media (max-width: 1023px) {
    .history .year h3 {width: 200px;}
    .history .year ul {width: calc(100% - 200px);}
}

@media (max-width: 500px) {
    .history .year {justify-content: flex-start;}
    .history .year h3 {margin-bottom: 2rem;}
    .history .year ul {width: 100%;}
}



/* 추진체계 */
.org {display: flex; flex-wrap: wrap; gap: 4rem; max-width: 900px; margin: 0 auto;}
.org > ul {width: 100%; display: flex; gap: 2rem; flex-direction: column; justify-content: center; position: relative;}
.org > ul.class02 {flex-direction: inherit; justify-content: space-between;}
.org > ul.class02::before {content: ""; width: calc(100% / 6 * 4); height: 2rem; border: 1px solid #b3b3b3; border-bottom: none; position: absolute; top: -2rem; left: 50%; transform: translateX(-50%); z-index: -1;}
.org > ul.class01::before {content: ""; width: 0; height: 100%; border-left: 1px solid #b3b3b3; position: absolute; left: 50%; top: 2rem; z-index: -1;}
.org > ul > li {width: calc(100% / 3); text-align: center;}
.org > ul > li.center {margin: 0 auto;}
.org > ul > li.right {margin-left: auto; position: relative;}
.org > ul > li.right::before {content: ""; width: 50%; height: 0; border-bottom: 1px solid #b3b3b3; position: absolute; left: -50%; top: 25%;}
.org > ul > li .tit {font-size: 1.25rem; font-weight: 500; color: #fff; padding: 18px; background: #FF7E00; border-radius: 50px;}
.org > ul.class01 > li:nth-child(1) .tit {background: #174C91;}
.org > ul.class01 > li:nth-child(2) .tit {background: #155EE8;}
.org > ul.class01 > li:nth-child(3) .tit {background: #4587c2;}
.org > ul.class01 > li:nth-child(4) .tit {background: #29A7A4;}
.org > ul > li .logo {width: 90%; height: 60px; background: #fff; border-radius: 0 0 3px 3px; margin: -5px auto 0; padding-top: 5px; border: 1px solid #4587c2; border-top: none; z-index: -1; position: relative;}
.org > ul > li .logo img {width: 70%; height: 100%; object-fit: contain; padding: 10px 30px;}
.org > ul.class02 > li .logo {border-color: #ffbe83;}

.org_roll {display: flex; flex-wrap: wrap; gap: 20px;}
.org_roll .box {width: calc(100% / 3 - 13.3333px); min-height: 380px; border-radius: 10px; position: relative; overflow: hidden; background: #4CADFE; border: 2px solid #4CADFE;}
.org_roll .box:nth-child(3) {background: #49BD8E; border-color: #49BD8E;}
.org_roll .box:nth-child(4) {background: #F25E76; border-color: #F25E76;}
.org_roll .box:nth-child(5),
.org_roll .box:nth-child(6) {background: #9C84FE; border-color: #9C84FE;}
.org_roll .box .tit {display: flex; align-items: center; justify-content: center;}
.org_roll .box .tit span {font-size: 1.375rem; font-weight: 600; text-align: center; color: #fff; padding: 1.5rem;}
.org_roll .box .txt {background: #fff; padding: 2rem; width: 100%; height: 100%; border-radius: 10px;}
.org_roll .box .txt .logo {text-align: center; margin-bottom: 2rem;}
.org_roll .box .txt .dot_list li {font-size: 1.125rem;}
/*.org_roll .box::before {content: ""; background: url(/images/layout/gnb_bg.png) right bottom no-repeat; background-size: 100%; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: .5; position: absolute; left: 0; bottom: 0; z-index: -1;}*/
/*.org_roll .box::after {content: ""; background: #F5F8FB;  z-index: -2; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; }*/
/*.org_roll .box .tit {margin-bottom: 3rem; text-align: center;}*/
/*.org_roll .box .tit span {font-size: 1.125rem; font-weight: 700; position: relative; display: block;}*/
/*.org_roll .box .tit .logo {width: 150px; margin: 20px auto 10px;}*/
/*.org_roll .box .tit .logo img {width: 100%; height: 30px; object-fit: contain;}*/
/*.org_roll .box .tit p {font-size: 1rem; color: #555; font-weight: 500;}*/

@media (max-width: 1023px) {
    .org_roll .box {width: calc(100% / 2 - 10px);}
}

@media (max-width: 767px) {
    .org > ul > li {width: 100%;}
    .org > ul > li.right::before {display: none;}
    .org > ul.class02 {flex-direction: column; gap: 1rem;}
    .org_roll .box {width: 100%; min-height: auto;}
    /*.org_roll .box .tit {margin-bottom: 1.5rem; text-align: left;}*/
    .org_roll .box .tit .logo {margin: 10px 0;}
}


/* 추진사업 */
.dia {display: flex; flex-wrap: wrap; gap: 100px; justify-content: center; margin: 1rem 0;}
.dia .underline {text-decoration-line: underline; text-decoration-color: #FFEA00; text-decoration-thickness: 5px;}
.dia > ul {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 20px; position: relative;}
.dia > ul > li {width: calc(100% / 3 - 13.3333px); display: flex; flex-wrap: wrap; border-radius: 5px; padding: 2px; position: relative;}
.dia.type01 > ul > li .box {width: 100%; text-align: center; color: #fff; padding: 15px;}
.dia.type01 > ul > li .box .sub {display: inline-block; width: auto; background: #222; color: #FFEA00; font-size: .8125rem; font-weight: 600; padding: 5px 10px; border-radius: 50px;}
.dia.type01 > ul > li .box .tit {font-size: 1.125rem; font-weight: 600; margin-top: 5px;}
.dia.type01 > ul > li .info {width: 100%; background: #fff; padding: 15px; border-radius: 0 0 3px 3px;}
.dia.type01 .class01 > li {background: #08376A;}
.dia.type01 .class02 > li {background: #0078E6;}
.dia .class01::after {content: ""; width: calc(100% / 6 * 4 + 13.3333px); height: 0; border-bottom: 1px solid #b3b3b3; position: absolute; left: 50%; transform: translateX(-50%); bottom: -50px;}
.dia .class01 > li::after {content: ""; width: 0; height: 50px; border-left: 1px solid #b3b3b3; position: absolute; left: 50%; transform: translateX(-50%); bottom: -50px;}
.dia .class02 > li::after {content: ""; width: 0; height: 50px; border-left: 1px solid #b3b3b3; position: absolute; left: 50%; transform: translateX(-50%); top: -50px;}
.dia.type02 .class01 > li {width: 100%; padding: 30px 20px; color: #fff; text-align: center; justify-content: center; font-size: 1.5rem; font-weight: 600; background: #4B3280;}
.dia.type02 .class02 > li {gap: 40px;}
.dia.type02 .class02 > li > div {width: 100%; border-radius: 5px;}
.dia.type02 .class02 > li:nth-child(1) .top {background: #78347D; padding: 2px;}
.dia.type02 .class02 > li:nth-child(2) .top {background: #5A2D5F; padding: 2px;}
.dia.type02 .class02 > li:nth-child(3) .top {background: #3D2F79; padding: 2px;}
.dia.type02 .class02 > li .top .tit {padding: 15px; text-align: center; color: #fff; font-size: 1.125rem; font-weight: 600;}
.dia.type02 .class02 > li .top .txt {padding: 15px; background: #fff; border-radius: 0 0 3px 3px; text-align: center; font-size: 1.065rem;}
.dia.type02 .class02 > li .bottom {padding: 30px 15px 15px; position: relative;}
.dia.type02 .class02 > li .bottom .tit2 {font-size: 1.125rem; color: #fff; font-weight: 600; position: absolute; left: 50%; transform: translateX(-50%); top: -28px; width: 245px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 10px 10px;}
.dia.type02 .class02 > li:nth-child(1) .bottom {border: 2px solid #78347D}
.dia.type02 .class02 > li:nth-child(2) .bottom {border: 2px solid #5A2D5F}
.dia.type02 .class02 > li:nth-child(3) .bottom {border: 2px solid #3D2F79}
.dia.type02 .class02 > li:nth-child(1) .bottom .tit2 {background: url(/images/contents/dia_bg01.png) center no-repeat;}
.dia.type02 .class02 > li:nth-child(2) .bottom .tit2 {background: url(/images/contents/dia_bg02.png) center no-repeat;}
.dia.type02 .class02 > li:nth-child(3) .bottom .tit2 {background: url(/images/contents/dia_bg03.png) center no-repeat;}
.dia_arrow {display: flex; align-items: center; justify-content: center; margin-top: 1.75rem; opacity: .3;}
.dia_effect {display: flex; flex-wrap: wrap; gap: 10px;}
.dia_effect li {width: 100%; padding: 20px; border-radius: 5px; border: 2px solid #699dff; background: #EDF3FF; text-align: center; font-size: 1.25rem; font-weight: 600; line-height: 1.5;}

@media (max-width: 1023px) {
    .dia {gap: 40px;}
    .dia > ul > li {width: 100%;}
    .dia .class01::after {height: 20px; bottom: -40px; border: 1px solid #b3b3b3; border-bottom: none;}
    .dia .class01 > li::after {height: 20px; bottom: -20px;}
    .dia .class02 > li:nth-child(1)::after {display: none;}
    .dia .class02 > li::after {height: 20px; top: -20px;}
}


/* 데이터 소개 */
.data_list01 {display: flex; flex-wrap: wrap; justify-content: center; position: relative; gap: 4rem 0;}
.data_list01 > li {width: calc(100% / 5); transition: .3s;}
.data_list01 > li .num {display: block; font-size: 1rem; font-weight: 700; text-align: center;}
.data_list01 > li .circle {width: 160px; height: 160px; padding: 2rem; background: #fff; border: 10px solid #ebebeb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 2rem auto; position: relative; transition: .3s;}
.data_list01 > li + li .circle::before {content: ""; width: 10px; height: 16px; background: url(/images/icon/ico_dia_arrow_b.svg) center no-repeat; background-size: cover; position: absolute; left: -43%; top: 50%; transform: translateY(-50%);}
.data_list01 > li .tit {font-size: 1.25rem; font-weight: 700; text-align: center; margin-bottom: 1rem;}
.data_list01 > li .txt {width: 160px; margin: 0 auto;}
.data_list02 {display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;}
.data_list02 li {display: flex; flex-direction: column; justify-content: center; gap: 20px;}
.data_list02 li span {width: 250px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.125rem; font-weight: 600; color: #fff;}
.data_list02 li:nth-child(1) span {background: #91C140;}
.data_list02 li:nth-child(1) span:nth-child(2) {background: #00A07C;}
.data_list02 li:nth-child(2) span {background: #2899AC;}
.data_list02 li:nth-child(3) span {background: #164A8E;}
.data_list02 li:nth-child(4) span {background: #04174F;}
.data_list02 li + li {margin-left: 40px;}
.data_list02 li + li span {position: relative;}
.data_list02 li + li span::before {content: ""; width: 10px; height: 16px; background: url(/images/icon/ico_dia_arrow_b.svg) center no-repeat; background-size: cover; position: absolute; left: -25px; top: 50%; transform: translateY(-50%);}
.data_list02 li span.nop {background: none;}
.data_list02 li + li span.nop::before {display: none;}

@media (max-width: 1279px) {
    .data_list01 > li .circle {width: 120px; height: 120px;}
}

@media (max-width: 1023px) {
    .data_list01 > li {width: calc(100% / 3);}
    .data_list02 li {width: 100%; flex-direction: row;}
    .data_list02 li + li {margin-left: 0; margin-top: 40px;}
    .data_list02 li + li span::before {left: 50%; top: -29px; transform: translate(-50%, 0) rotate(90deg);}
    .data_list02 li span {margin: 0 auto;}
}

@media (max-width: 767px) {
    .data_list01 > li .tit {text-align: left; margin: 1rem 0;}
    .data_list01 > li,
    .data_list01 > li .txt {width: 100%;}
    .data_list01 > li .circle {width: 100%; height: auto; padding: 1rem; border-radius: 15px; margin: 10px auto;}
    .data_list01 > li + li .circle::before {left: 50%; top: -63%; transform: translate(-50%, 0) rotate(90deg);}
}


/* 데이터 구축 및 공유 로드맵 */
.roadmap01 {display: flex; gap: 20px; margin-top: 1rem;}
.roadmap01 .box {padding: 1.5rem; border-radius: 10px; width: 100%; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center;}
.roadmap01 .box:nth-child(1) {background: #F4FAFF;}
.roadmap01 .box:nth-child(2) {background: #FBF4FF;}
.roadmap01 .box h6 {width: 100%; font-size: 1.125rem; text-align: center;}
.roadmap01 .box ul {width: 100%; display: flex; gap: 1.5rem;}
.roadmap01 .box ul li {width: 100%; padding: 1.5rem; background: #fff; border-radius: 10px; display: flex; flex-wrap: wrap; gap: .5rem; animation: boxShow 1s ease; animation-fill-mode: forwards; opacity: 0;}
.roadmap01 .box:nth-child(1) ul li:nth-child(2) {animation-delay: 0.5s;}
.roadmap01 .box:nth-child(2) ul li:nth-child(1) {animation-delay: 1s;}
.roadmap01 .box:nth-child(2) ul li:nth-child(2) {animation-delay: 1.5s;}
.roadmap01 .box ul li span {display: block; width: 100%;}
.roadmap01 .box ul li span.num {font-weight: 700; font-size: .9375rem;}
.roadmap01 .box ul li span.txt {text-align: right; font-weight: 500; font-size: 1.0625rem;}
.roadmap01 .box:nth-child(1) ul li {border: 1px solid #155EE8;}
.roadmap01 .box:nth-child(2) ul li {border: 1px solid #923DF9;}
.roadmap01 .box:nth-child(1) ul li span.num {color: #155EE8;}
.roadmap01 .box:nth-child(2) ul li span.num {color: #923DF9;}

.roadmap02 {animation: boxShow 1s ease; animation-fill-mode: forwards; opacity: 0; padding: 2rem 0;}
.roadmap02 .top {display: flex; flex-direction: column; align-items: center;}
.roadmap02 .top img {max-width: 280px; background: #fff; z-index: 1;}
.roadmap02 .top span {font-size: 1.25rem; font-weight: 700; color: #155EE8;}
.roadmap02 ul {display: flex; justify-content: center; margin-top: 30px; position: relative;}
.roadmap02 ul::after {content: ""; width: 62%; height: 50px; border: 1px dashed #b3b3b3; border-bottom: none; position: absolute; top: -70px;}
.roadmap02 ul li {width: 180px; height: 180px; border-radius: 50%; border: 1px solid #155EE8; font-size: 1.0625rem; margin: 0 -5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;}

.roadmap03 ul {display: flex; gap: 20px;}
.roadmap03 ul li:nth-child(1) {width: calc(45% - 20px); padding: 1rem; border: 1px solid #ebebeb;}
.roadmap03 ul li:nth-child(1) img {width: 100%; height: 100%; object-fit: cover;}
.roadmap03 ul li:nth-child(2) {width: 55%;}

@media (max-width: 1023px) {
    .roadmap02 ul li {width: 150px; height: 150px;}
}

@media (max-width: 767px) {
    .roadmap01 {flex-wrap: wrap;}
    .roadmap02 ul li {width: 120px; height: 120px;}
    .roadmap03 ul {flex-wrap: wrap;}
    .roadmap03 ul li:nth-child(1),
    .roadmap03 ul li:nth-child(2) {width: 100%;}
}

@media (max-width: 500px) {
    .roadmap02 ul {flex-wrap: wrap; gap: 5px;}
    .roadmap02 ul::after {width: 90%;}
    .roadmap02 ul li {width: calc(50% - 5px); height: auto; padding: 1rem; border-radius: 10px; margin: 0;}
    .roadmap02 ul li img {display: none;}
}


/* 보유장비 */
.gray_box {display: flex; flex-wrap: wrap; gap: 60px; background: #F7F7F7; padding: 4rem; border-radius: 30px; position: relative; overflow: hidden;}
.gray_box > div {width: calc(50% - 30px);}
.gray_box .txt_wrap .tit {margin-bottom: 80px;}
.gray_box .txt_wrap .tit span {font-size: .9375rem; margin-bottom: 10px; color: #155EE8; font-weight: 600; display: block;}
.gray_box .txt_wrap .tit h5 {font-size: 1.8125rem; margin-bottom: 30px; font-weight: 900;}
.gray_box .txt_wrap .tit p {font-size: 1.125rem; line-height: 1.5;}
.gray_box .img_wrap {background: #fff; padding: 100px; border-radius: 30px; text-align: center;}
.gray_box .img_wrap img {max-width: 400px; width: 100%; height: 100%; object-fit: contain;}
.gray_box .img_wrap .swiper-slide img {opacity: 0}
.gray_box .img_wrap .swiper-slide-active img {opacity: 1;}
.gray_box .tbl_wrap .tbl tr th,
.gray_box .tbl_wrap .tbl tr td {padding: 10px;}
.gray_box .swiper-container {padding: 0; overflow: hidden; position: relative;}
.gray_box .swiper-container .pagination {position: absolute; bottom: 10%; z-index: 9;}
.gray_box .swiper-container .swiper-button-next:after,
.gray_box .swiper-container .swiper-button-prev:after {font-size: 2em!important; color: #555!important;}
.gray_box .swiper-container .swiper-pagination-bullet-active {background: #555!important;}

@media (max-width: 1023px) {
    .gray_box {flex-direction: column-reverse; padding: 30px; gap: 30px;}
    .gray_box > div {width: 100%;}
    .gray_box .txt_wrap .tit {margin-bottom: 30px;}
    .gray_box .img_wrap {padding: 30px;}
    .gray_box .img_wrap img {width: 80%; text-align: center;}
}


/* 개인정보처리방침 */
.label_list {display: flex; flex-wrap: wrap; gap: 20px;}
.label_list li {width: calc(100% / 3 - 13.3333px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 1rem; background: #F2F3F5; border-radius: 10px; font-size: .9375rem;}
.index_list {display: flex; flex-wrap: wrap; gap: 20px;}
.index_list li {width: calc(100% / 2 - 10px);}
.index_list li a {display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; padding: 1rem; border: 1px solid #ddd; border-radius: 10px; transition: .3s;}
.index_list li a:hover {border: 1px solid #155EE8;}
.index_list li a img {width: 40px;}
.privacy_tit {font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 1rem -.5rem; display: flex; align-items: center; gap: 5px;}
.privacy_tit > img {width: 2rem;}


@keyframes boxShow {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}


/* 오시는 길 */
.map {position: relative;}
.map_skip{position: absolute; z-index: -1; background: rgba(0, 0, 0, .7); font-size: 1rem; color: #fff; opacity: 0; padding: 1rem;}
.map_skip:focus{top: 0; opacity: 1; color: #fff; z-index: 10;}
.map .root_daum_roughmap {width: 100%!important;}
.root_daum_roughmap .wrap_map {height: 450px!important;}
.map .root_daum_roughmap .wrap_controllers,
.map .cont {display: none!important;}
.map_detail {padding: 3.125rem 6rem 0;}
.map_detail li {display: flex; flex-wrap: wrap; padding: 5rem 0;}
.map_detail li + li {border-top: 1px solid #ebebeb;}
.map_detail li h3 {width: 25%; font-size: 1.75rem; margin-bottom: 1.5rem;}
.map_detail li .info {width: 75%;}
.map_detail li .info h4 {font-size: 1.375rem; margin: 0 0 1rem; padding-left: 1.75rem; position: relative;}
.map_detail li .info h4:nth-of-type(1)::before {content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23212121'%3E%3Cpath d='M17 20H7V21C7 21.5523 6.55228 22 6 22H4C3.44772 22 3 21.5523 3 21V12H2V8H3V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V8H22V12H21V21C21 21.5523 20.5523 22 20 22H18C17.4477 22 17 21.5523 17 21V20ZM5 5V12H19V5H5ZM7.5 18C8.32843 18 9 17.3284 9 16.5C9 15.6716 8.32843 15 7.5 15C6.67157 15 6 15.6716 6 16.5C6 17.3284 6.67157 18 7.5 18ZM16.5 18C17.3284 18 18 17.3284 18 16.5C18 15.6716 17.3284 15 16.5 15C15.6716 15 15 15.6716 15 16.5C15 17.3284 15.6716 18 16.5 18Z'/%3E%3C/svg%3E") no-repeat center / contain; width: 1.375rem; height: 1.375rem; background-size: cover; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.map_detail li .info h4:nth-of-type(2)::before {content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23212121'%3E%3Cpath d='M17.2 20L19 21.5V22H5V21.5L6.8 20H5C3.89543 20 3 19.1046 3 18V7C3 4.79086 4.79086 3 7 3H17C19.2091 3 21 4.79086 21 7V18C21 19.1046 20.1046 20 19 20H17.2ZM11 12V5H7C5.89543 5 5 5.89543 5 7V12H11ZM13 12H19V7C19 5.89543 18.1046 5 17 5H13V12ZM7.5 18C8.32843 18 9 17.3284 9 16.5C9 15.6716 8.32843 15 7.5 15C6.67157 15 6 15.6716 6 16.5C6 17.3284 6.67157 18 7.5 18ZM16.5 18C17.3284 18 18 17.3284 18 16.5C18 15.6716 17.3284 15 16.5 15C15.6716 15 15 15.6716 15 16.5C15 17.3284 15.6716 18 16.5 18Z'/%3E%3C/svg%3E") no-repeat center / contain; width: 1.375rem; height: 1.375rem; background-size: cover; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.map_detail li .info h4:nth-of-type(3)::before {content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M19 20H5V21C5 21.5523 4.55228 22 4 22H3C2.44772 22 2 21.5523 2 21V12L4.51334 5.29775C4.80607 4.51715 5.55231 4 6.386 4H17.614C18.4477 4 19.1939 4.51715 19.4867 5.29775L22 12V21C22 21.5523 21.5523 22 21 22H20C19.4477 22 19 21.5523 19 21V20ZM4.136 12H19.864L17.614 6H6.386L4.136 12ZM6.5 17C7.32843 17 8 16.3284 8 15.5C8 14.6716 7.32843 14 6.5 14C5.67157 14 5 14.6716 5 15.5C5 16.3284 5.67157 17 6.5 17ZM17.5 17C18.3284 17 19 16.3284 19 15.5C19 14.6716 18.3284 14 17.5 14C16.6716 14 16 14.6716 16 15.5C16 16.3284 16.6716 17 17.5 17Z'/%3E%3C/svg%3E") no-repeat center / contain; width: 1.375rem; height: 1.375rem; background-size: cover; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.map_detail li .info h4 ~ h4 {margin-top: 2.5rem;}
.map_detail li .info p {font-size: 1.125rem; line-height: 2;}
.map_detail li .info p em {font-style: normal; font-weight: 500; padding: .125rem .25rem; color: #fff; background: #E51E6E; font-size: 1rem; border-radius: 3px;}

@media (max-width: 767px) {
    .map_detail {margin: 3rem 0 0;}
    .map_detail li {padding: 3rem 0;}
    .map_detail li h3,
    .map_detail li .info {width: 100%;}
}