/* 서브 비주얼 */
.subvisual {width: 100%; height: 30rem; position: relative; overflow: hidden;}
.subvisual .inner {display: flex; align-items: center; position: relative; height: 100%;}
.subvisual .inner::after {content: ''; display: inline-block; background: url('../img/sub/subvisual.svg') no-repeat 50% 50% / contain; position: absolute; width: 77%; height: 73%; top: 50%; right: 0; transform: translateY(-50%); }
.subvisual .subvisual-title {z-index: 5;}
.subvisual .subvisual-figure {position: absolute; top: 50%; background: url('../img/sub/subvisual-figure.svg') no-repeat 50% 50% / contain; width: 7%; height: 73%;}
.subvisual .subvisual-figure.figure1 {left: 0; transform: translate(-50%, -50%);}
.subvisual .subvisual-figure.figure2 {right: 0; transform: translate(50%, -50%);}

.subpage-container {padding: 7rem 0 8rem;} 
.subpage-container .inner {display: flex; align-items: flex-start; column-gap: 2%;}
/* 서브 lnb */
.sublnb {width: 23.5%; min-width: 30rem;}
.sublnb .sublnb-depth2 {display: flex; flex-direction: column; row-gap: 4rem;}
.sublnb .sublnb-depth2 > li {display: flex; flex-direction: column; align-items: flex-start; row-gap: 1.8rem;}
.sublnb .sublnb-depth2 > li > a {position: relative; color: #888; font-weight: 700;}
.sublnb .sublnb-depth2 > li.current > a {color: #222;}
.sublnb .sublnb-depth2 > li.current > a::after {content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--blue); position: absolute; right: -0.8rem; top: 0;}
.sublnb .sublnb-depth3 {display: flex; flex-direction: column; row-gap: 1.5rem;}
.sublnb .sublnb-depth3 li {line-height: 1.15;}
.sublnb .sublnb-depth3 a {color: #444; position: relative; padding-left: 3rem;}
.sublnb .sublnb-depth3 a::before {content: ""; display: inline-block; width: 2rem; height: 0.2px; background: #d9d9d9; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.sublnb .sublnb-depth3 li.current a {color: var(--blue);}
.sublnb .sublnb-depth3 li.current a::before {background: var(--blue);}

/*서브 공통*/
.subpage-content {display: flex; flex-direction: column; row-gap: 5rem; flex: 1;}
.subpage-content--heading .heading-title {position: relative; padding-left: 2rem;}
.subpage-content--heading .heading-title::before {content: ""; display: inline-block; width: 0.9rem; height: 3.4rem; border-radius: 5rem; background: var(--blue); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.heading-depth3 {display: flex; align-items: center; column-gap: 2.5rem;}
.heading-depth3 span {position: relative; font-weight: 600;}
.heading-depth3 span::before {content: ""; display: inline-block; width: 0.5px; height: 2rem; border-radius: 999px; background: #D9D9D9; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%);}
.subpage-content--body {display: flex; flex-direction: column; row-gap: 6rem;}
.subpage-content--body + .subpage-content--heading {margin-top: 6rem;}
.row-heading--title {padding-bottom: 2rem; position: relative; width: fit-content;}
.row-heading--title::after {content: ""; display: inline-block; position: absolute; width: 6px; height: 6px; border-radius: 999px; right: -11px; top: 3px; background: var(--blue);}
.row-text {font-size: 1.7rem; word-break: keep-all;}
.dot-text {display: block; position: relative; padding-left: 1.4rem; font-size: 1.7rem;}
.dot-text::before {content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 999px; background: #6F6F6F; position: absolute; left: 2px; top: 0.85rem; }
.row-text > .dot-text {display: block;}
.box {border-radius: 1rem;}
.border-box {border: 1px solid #E4E6EC}
.lightblue-bg {background-color: #F6F9FF;}
.blue-bg {background-color: #E4ECFF;}
.green-bg {background-color: #E4F0EC;}
.yellow-bg {background-color: #FFF6E4;}
.purple-bg {background-color: #F0E4FF;}
.grey-bg {background-color: #F1F2F6;} 
.row-flex {display: flex; }

/* 서브 공통 리스트 */
.info-list {display: flex; flex-direction: column; row-gap: 1rem;}
.info-list li {display: flex; align-items: baseline; column-gap: 2rem; position: relative; padding-left: 0.8rem;}
.info-list li::before {content: ""; display: inline-block; width: 0.3rem; height: 0.3rem; border-radius: 999px; background: #888888; position: absolute; left: 0; top: 0.8rem; transform: translateY(-50%); font-size: inherit;}
.info-list span {line-height: 1.2;}
.info-list .info-title {color: #888888;}

/*사업소개*/
.subpage-trainning.intro .box-list {display: flex; align-items: flex-start; flex-wrap: wrap; column-gap: 1%; row-gap: 1rem;}
.subpage-trainning.intro .box-list .box {border: 1px solid #E4ECFF; padding: 1.5rem 2rem; width: 49.5%}
.subpage-trainning.intro .box-list .box:last-child {width: 100%;}
.subpage-trainning.intro .system .border-box {padding: 6.5rem;}
.subpage-trainning.intro .system .box-img {width: 88%; margin: 0 auto;}
.subpage-trainning.intro .system .box-img img {width: 100%;}
.subpage-trainning.intro .row-flex {column-gap: 6%; margin-top: 3rem;}
.subpage-trainning.intro .center .box {width: 47%; padding: 4rem 4.5rem 8.7rem; position: relative;}
.subpage-trainning.intro .center .box::before {content: ""; display: inline-block; width: 15rem; heighT: 15rem; position: absolute; bottom: 2rem; right: 4rem;}
.subpage-trainning.intro .center .box:nth-child(1)::before {background: url('../img/sub/trainningIntro_center_icon01.png') no-repeat 50% 50% / contain;}
.subpage-trainning.intro .center .box:nth-child(1)::after {content: ""; display: inline-block; width: 8.8rem; height: 1.5rem; background: url('../img/sub/center_arrow.png') no-repeat 50% 50% / cover; position: absolute; top: 50%; left: 99%; transform: translate(0, -50%); z-index: 1;}
.subpage-trainning.intro .center .box:nth-child(2)::before {background: url('../img/sub/trainningIntro_center_icon02.png') no-repeat 50% 50% / contain;}
.subpage-trainning.intro .center .box-title {padding-bottom: 2rem;} 


/*공동훈련센터 지정현황*/
.center-list {display: flex; flex-direction: column; row-gap: 3rem;}
.center-item {display: flex; align-items: center; border: 1px solid #E4E6EC; border-radius: 1rem; position: relative; overflow: hidden;}
.center-item > div {align-self: stretch; padding: 4rem 4.5rem;}
.center-item .center-item--img {display: flex; align-items: center; justify-content: center; width: 33.5%; border-right: 1px solid #E4E6EC}
.center-item .center-item--img img {max-width: 23rem; width: 90%;}
.center-item .center-item--text {flex: 1;}
.center-item .center-item--text .item-text--title {padding-bottom: 2.5rem;}
.center-item .info-content a {transition: .15s;}
.center-item::after {content: ""; display: inline-block; width: 27.8rem; height: 27.8rem; bottom: -3.7rem; right: -2.2rem; background: url('../img/sub/status_box_figure.png') no-repeat 50% 50% / contain; position: absolute;}

/*공동훈련센터 훈련과정 현황*/
.subpage-trainning .table-wrap {border-radius: 1rem; overflow: hidden; border: 1px solid #E4E6EC;}
.subpage-trainning table {border-collapse: collapse; width: 100%;  }
.subpage-trainning table th, .subpage-trainning table td {font-size: 1.5rem; padding: 1.5rem 1rem; text-align: center; border-left: 1px solid #E4E6EC; border-right: 1px solid #E4E6EC;}
.subpage-trainning table th:first-child, .subpage-trainning table td:first-child {border-left: 0;} 
.subpage-trainning table th:last-child, .subpage-trainning table td:last-child {border-right: 0;}
.subpage-trainning table th {font-weight: 600;}
.subpage-trainning table td {border-top: 1px solid #E4E6EC;}

.subpage-trainning.course .body-row {display: flex; flex-direction: column; row-gap: 2.5rem;}
.subpage-trainning.course .row-heading {display: flex; flex-direction: column; position: relative;}
.subpage-trainning.course .course-logo {display: flex; align-items: center; justify-content: center; position: absolute; width: 18%; height: 100%; top: 50%; right: 0; transform: translateY(-50%); border: 1px solid #E4E6EC; border-radius: 1rem;}
.subpage-trainning.course .course-logo img {max-width: 80%; margin: 0 auto;}
.subpage-trainning.course table td:first-child {background: #F9F9F9}

/*t산업구조변화대응 등 특화훈련 - 사업소개*/
.dot-list {display: flex; flex-direction: column; row-gap: 0.5rem;}
.subpage-specialized .row-text + .row-text {margin-top: 2rem;}
.proccess-list {display: flex; align-items: flex-start; column-gap: 1.5%; margin-top: 2rem;}
.proccess-item {width: calc((100% - 7.5%) / 6); display: flex; flex-direction: column; align-items: center; row-gap: 3.5rem;}
.proccess-item .item-figure {width: 100%; height: 0; padding-top: 100%; position: relative; overflow: hidden;}
.proccess-item:nth-child(1) .item-figure {background: url('../img/sub/proccess_figure01.png') no-repeat 50% 50% / cover;}
.proccess-item:nth-child(2) .item-figure {background: url('../img/sub/proccess_figure02.png') no-repeat 50% 50% / cover;}
.proccess-item:nth-child(3) .item-figure {background: url('../img/sub/proccess_figure03.png') no-repeat 50% 50% / cover;}
.proccess-item:nth-child(4) .item-figure {background: url('../img/sub/proccess_figure04.png') no-repeat 50% 50% / cover;}
.proccess-item:nth-child(5) .item-figure {background: url('../img/sub/proccess_figure05.png') no-repeat 50% 50% / cover;}
.proccess-item:nth-child(6) .item-figure {background: url('../img/sub/proccess_figure06.png') no-repeat 50% 50% / cover;}
.proccess-item .item-figure .figure-inner {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 1rem; text-align: center;}
.proccess-item .item-figure span {font-weight: 700; line-height: 1.2;}
.proccess-item .item-figure p {line-height: 1.4; font-weight: 600;}
.proccess-item .item-figure p span {font-weight: 400; font-size: 1.4rem;}
.proccess-item .item-text {display: flex; align-items: center; justify-content: center; background: #F6F9FF; border: 1px solid #E4ECFF; border-radius: 2rem; height: 9rem; width: 100%; text-align: center; line-height: 1.4; position: relative;}
.proccess-item .item-text::before {content: ""; display: inline-block; width: 1px; height: 3.5rem; background: #e4ecff; position: absolute; bottom: 101%; left: 50%; transform: translate(-50%, 0); z-index: 1;}
.proccess-item .item-text::after {content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 999px; background: #E4ECFF; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1;}



/*일자리창출 - 지역형 플러스 일자리 사업 */
.subpage-job.plus table .dot-text {font-size: 1.5rem;}
.subpage-job .table-wrap {border-radius: 1rem; overflow: hidden; border: 1px solid #E4E6EC;}
.subpage-job table {border-collapse: collapse; width: 100%;  }
.subpage-job table th, .subpage-job table td {font-size: 1.5rem; padding: 1.5rem 1rem; text-align: center; border-left: 1px solid #E4E6EC; border-right: 1px solid #E4E6EC; word-break: keep-all;}
.subpage-job table th:first-child, .subpage-job table td:first-child {border-left: 0;} 
.subpage-job table th:last-child, .subpage-job table td:last-child {border-right: 0;}
.subpage-job table th {font-weight: 600;}
.subpage-job table td {border-top: 1px solid #E4E6EC;}
.subpage-job table li {text-align: left;}
.table-guide, .transport-guide {padding-top: 1.5rem;}

/*인사말*/
.subpage-greeting .subpage-content--body {position: relative;}
.subpage-greeting .subpage-content--body::after {content: ""; display: inline-block; width: 62.5rem; height: 40rem; background: url('../img/sub/greeting_figure.png') no-repeat 50% 50% / contain; position: absolute; right: 0; top: 0; max-width: 56%;}
.subpage-greeting .row-text {display: flex; flex-direction: column; row-gap: 3rem; padding-top: 5rem;}
.subpage-greeting .row-text--title {line-height: 1.4em;}

/*공동훈련센터 훈련과정 현황*/
.subpage-organization .table-wrap {border-radius: 1rem; overflow: hidden; border: 1px solid #E4E6EC;}
.subpage-organization table {border-collapse: collapse; width: 100%;  }
.subpage-organization table th, .subpage-organization table td {font-size: 1.5rem; padding: 1.5rem 1rem; text-align: center; border-left: 1px solid #E4E6EC; border-right: 1px solid #E4E6EC;}
.subpage-organization table th:first-child, .subpage-organization table td:first-child {border-left: 0;} 
.subpage-organization table th:last-child, .subpage-organization table td:last-child {border-right: 0;}
.subpage-organization table th {font-weight: 600;}
.subpage-organization table td {border-top: 1px solid #E4E6EC;}
.subpage-organization table td:last-child {text-align: left;}
.subpage-organization .organization-diagram {padding-bottom: 6rem; border-bottom: 1px solid #E4E6EC;}
.subpage-organization img {width: 100%;}
.subpage-organization .img-mb {display: none;}


/*오시는 길*/
#map {width: 100%; height: 54rem; border-radius: 1rem;}
.customoverlay {position:relative;bottom: 5.5rem;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;font-weight:bold;overflow:hidden;background: #d95050;background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 13px center; border-radius: 6px;}
.customoverlay .title {display:block;text-align:center;background:#fff;padding: .8rem 1.2rem;font-size:14px;font-weight:bold;border-radius:6px;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
.subpage-location .address {display: flex; align-items: center; column-gap: 1rem; font-weight: 600; margin-top: 4rem;}
.transport-list {display: flex; flex-direction: column; row-gap: 2rem;}
.transport-list .border-box {display: flex; align-items: center; border-radius: 1rem; }
.transport-list .border-box > div {align-self: stretch;}
.transport-list .border-box .box-img {display: flex; align-items: center; width: 30%; padding: 3rem; column-gap: 2rem; position: relative;}
.transport-list .border-box .box-img::after {content: ""; display: inline-block; width: 1px; height: 60%; background: #E4E6EC; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #E4E6EC;}
.transport-list .border-box .box-img img {width: 10rem;}
.transport-list .border-box .box-text {display: flex; align-items: center; flex: 1; padding: 3rem 5rem;}
.transport-list ul {display: flex; flex-direction: column; row-gap: 1rem;}
.transport-list li {display: flex; align-items: center; column-gap: 1.5rem;}
.transport-list .transport-mark {padding: 0.5rem 1rem; color: #fff; border-radius: 5px; font-size: 1.2rem; font-weight: 500; line-height: 1.2;}
.transport-list .transport-mark.mark-subway {background: #50A232 ; }
.transport-list .transport-mark.mark-bus {background: #70B0E0; }

/* 약관 */
.term-text {word-break: keep-all}
.term-text .indent--once {padding-left: 1rem;}
.term-text .indent--twice {padding-left: 2rem;}
.term-text .indent--thirce {padding-left: 3rem;}
.term-text .box {padding: 4rem; margin-bottom: 5rem;}

@media (hover: hover) {
    .center-item .info-content a:hover {color: var(--blue)}
    .row-text a:hover {color: var(--blue)}
}

@media (min-width: 2001px) {
    .subvisual {height: 36rem;}
    .subvisual .inner::after {left: auto;}
    .subpage-greeting .subpage-content--body {width: 85%;}
}

@media (max-width: 1440px) {
    .subpage-trainning.intro .center .box::before {width: 13rem; height: 13rem; }
}

@media (max-width: 1280px) {
    .subvisual .subvisual-figure.figure1, .subvisual .subvisual-figure.figure2 {display: none;}

    .subpage-trainning.intro .center .box:nth-child(1)::after {width: 14%; height: 0.95rem;}

    #map {height: 45rem;}
}

@media (max-width: 1024px) {
    .sublnb {display: none;}
    .subvisual .inner {flex-wrap: wrap; align-items: flex-end;}
    .subvisual .subvisual-title {width: 100%; text-align: left;}
    .subvisual .inner::after {position: static; width: 97%; transform: translateY(0); height: 19rem;}
    .subpage-content {width: 100%;}

    .subpage-trainning.intro .system .border-box {padding: 3rem;}
    .subpage-trainning.intro .center .box {padding: 3rem 3.5rem 7rem;}
    .subpage-trainning.intro .center .box::before {width: 12rem; height: 12rem; bottom: 2rem; right: 2rem;}

    .center-item > div {padding: 3rem 3.5rem;}

    .transport-list .border-box .box-img {width: 35%;}
}

@media (max-width: 786px) {
    .subpage-organization .table-wrap {overflow-x: auto;}
    .subpage-organization .table-wrap table {table-layout: fixed;}
}

@media (max-width: 480px) {
    .subvisual {height: auto; padding: 4rem 0 0;}
    .subvisual .inner::after {width: 100%; height: 12rem;}

    .subpage-container {padding: 7rem 0 5rem;}
    .subpage-content {row-gap: 3rem;}
    .subpage-content--heading .heading-title {padding-left: 1.8rem;}
    .subpage-content--heading .heading-title::before {width: 0.7rem; height: 2.8rem;}
    .heading-depth3 {flex-direction: column; align-items: flex-start; row-gap: 1rem;}
    .heading-depth3 span {padding-left: 2rem;}
    .subpage-content--body {row-gap: 4rem;}
    .subpage-content--body + .subpage-content--heading {margin-top: 2rem;}
    .row-heading--title {padding-bottom: 1.6rem;}
    .row-text br {display: none;}
    .row-flex {flex-wrap: wrap;}

    .subpage-trainning.intro .box-list .box {width: 100%;}
    .subpage-trainning.intro .system .border-box {padding: 2rem 0;}
    .subpage-trainning.intro .system .box-img {width: 95%;}
    .subpage-trainning.intro .row-flex {row-gap: 4rem;}
    .subpage-trainning.intro .center .box {width: 100%; padding: 3rem 2.5rem 7rem;}
    .subpage-trainning.intro .center .box::before {width: 9rem; height: 9rem;}
    .subpage-trainning.intro .center .box:nth-child(1)::after {width: 5.4rem; height: 0.8rem; top: 106%; left: 50%; transform: translate(-50%, 0) rotate(90deg);}

    .center-item {flex-wrap: wrap;}
    .center-item .center-item--img {width: 100%; border-right: 0; border-bottom: 1px solid #E4E6EC; min-height: 24rem;}
    .center-item .center-item--text {width: 100%;}
    .center-item > div {padding: 3rem 2.5rem;}
    .info-list li {flex-direction: column; row-gap: 0.6rem;}

    .subpage-trainning.course .row-heading {flex-wrap: wrap; }
    .subpage-trainning.course .course-logo {position: static; transform: translateY(0); width: 50%; margin-top: 2rem;}

    .proccess-list {flex-direction: column; row-gap: 2rem;}
    .proccess-item {width: 100%; flex-direction: row; column-gap: 4rem;}
    .proccess-item .item-figure {width: calc(50% - 4rem); padding-top: calc(50% - 4rem);}
    .proccess-item .item-figure .figure-inner {row-gap: 0.6rem;}
    .proccess-item .item-text {width: 50%;}
    .proccess-item .item-text::before { width: 4rem; height: 1px; bottom: 50%; left: auto; right: 100%; transform: translate(0, 50%);}
    .proccess-item .item-text::after {top: 50%; left: 0;}
    .proccess-item .item-text p {word-break: keep-all;}

    .subpage-greeting .subpage-content--body::after {opacity: 0.2; top: auto; bottom: 0; max-width: 100%}

    .subpage-organization .organization-diagram {padding-bottom: 3rem;}
    .subpage-organization .img-mb {display: block;}
    .subpage-organization .img-pc {display: none;}
    .subpage-organization .table-wrap {overflow-x: auto;}
    .subpage-organization .table-wrap table {white-space: nowrap; width: auto;}
    .subpage-organization table th, .subpage-organization table td {padding: 1.2rem 1rem;}

    #map {height: 34rem;}
    .subpage-location .address {flex-direction: column;}
    .subpage-location .address span {width: 100%;}
    .subpage-location .address .slash {display: none;}
    .transport-list .border-box {flex-direction: column;}
    .transport-list .border-box .box-img {width: 100%; flex-direction: column; row-gap: 1rem; padding: 2rem;}
    .transport-list .border-box .box-img::after {right: 50%; transform: translate(50%, 0); top: auto; bottom: 0; width: calc(100% - 5rem); height: 1px;}
    .transport-list .border-box .box-img img {width: 8rem;}
    .transport-list .border-box .box-text {flex: none; padding: 2.5rem;}
    .transport-list li {flex-direction: column; row-gap: 0.6rem; align-items: flex-start;}

    .term-text .box {padding: 2.5rem 2rem; margin-bottom: 5rem;}
}