@charset "UTF-8";

/* roadmap */
.roadmaps {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;scroll-behavior: smooth;padding: 270px 0 142px;transition: padding 0.1s 0.1s ease;}
.roadmaps::-webkit-scrollbar {width: 5px;height: 5px;}
.roadmaps::-webkit-scrollbar-thumb {background-color: #c1c1c1;}

.roadmaps.scroll-down {padding-top:210px;}
.roadmaps.scroll-down header {transform: translateY(-161px);}
.roadmaps.scroll-down .roadmap-logo {transform: translateY(42px);}

.roadmap-logo {position: fixed;bottom: 0;left: 0;width: 100%;height: 42px;flex-shrink: 0;transition: transform 0.12s ease-out;}
.roadmap-logo::before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #eee;}
.roadmap-logo .logo {position: relative;width: 100%;max-width: 1540px;height: 100%;margin: 0 auto;background: url(https://ui.multicampus.com/b2c/event/2024/02/0227/logo.png) right 20px center no-repeat;background-size: 130px;}

header {position: fixed;left: 0;top: 0;width: 100%;z-index: 10;transition: transform 0.1s 0.1s ease;background: #f5f5f5;}

.header-wrap  {display:flex;position:relative;max-width:1500px;margin:0 auto;padding:57px 60px;justify-content: center;align-items: center;}
.header-wrap .titWrap {position:absolute;left:60px;top:50%;transform: translateY(-50%);}
.header-wrap .titWrap h1 {font-size:40px;font-weight:bold;letter-spacing: -0.03em;}
.header-wrap .titWrap .roadmap-btn-wrap {position:absolute;right:0;top:50%;transform:translateY(-50%);}

.tab-area ul {display:flex;position:relative;z-index: 100;width:280px;height:46px;;margin:0 auto;background-color:#fff;border-radius:23px;transition: transform 0.2s ease;}
.tab-area ul li {width:150px;overflow:hidden;}
.tab-area ul li + li {margin-left:-20px;}
.tab-area a {display:flex;justify-content:center;align-items:center;height:46px;font-size:22px;color:#5D5D5D;border:1px solid #CCCCCC;}
.tab-area a.active{position:relative; background:#fff;background-color:#0E2E85;color:#fff;font-weight:bold;border-color:#0E2E85;border-radius:23px !important;}
.tab-area ul li:first-child a {border-radius:23px 0 0 23px;}
.tab-area ul li:last-child a {border-radius:0 23px 23px 0;}

.roadmap-nav {border-top:1px solid #ccc;}
.roadmap-nav ul {position: relative;display:flex;width: 100%;max-width: 1500px;margin: 0 auto;padding:0 60px;}
.roadmap-nav ul li {flex: 1 0 auto;}
.roadmap-nav ul li a {position:relative;display:flex;height:70px;padding:0 12px;align-items: center;justify-content: center;font-size:18px;color:#909090}
.roadmap-nav ul li a.on {font-weight:bold;}
.roadmap-nav ul li a:hover:after,
.roadmap-nav ul li a.on:after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;}

.roadmap-cont {position:relative;width:100%;max-width:1500px;margin:0 auto;padding:0 60px;background: #fff;}
[class*="roadmap-nav_"] .link br {display: none;}

.roadmap-head {padding: 0 0 20px;}

.roadmap-btn-wrap {text-align: right;padding-bottom:10px;}
.roadmap-btn-wrap .button-download {display: inline-flex;height: 50px;padding: 0 55px 0 20px;border-radius: 25px;border:1px solid #CCC;align-items: center;font-size:18px;color:#909090;background:url(https://ui.multicampus.com/b2c/event/2024/02/0227/icon_roadmap_down_bk.png) no-repeat right 20px center;background-size: 23px 21px;}
.roadmap-btn-wrap .button-download span {color:#5287D6;}

.roadmap-info {display:flex;justify-content: space-between;align-items: center;}
.roadmap-title {font-size: 30px;line-height:44px;letter-spacing: -0.03em;}
.roadmap-title br {display: none;}

.roadmap-info .roadmap-label {display:flex;align-items: center;gap:20px;}
.roadmap-info p.new {display:none;}
.roadmap-info p.disabled {height:30px;line-height:30px;font-size:13px;background-color:#eee;color:#666;border-radius:4px;padding:0 30px;}

.roadmap-desc {padding-left: 5px;text-indent: -5px;color: #5d5d5d;word-break: keep-all;}
.roadmap-desc::before {content: "*";}
.roadmap-desc.bottom {margin-top: 10px;}

.roadmap-flags {display: flex;align-self: flex-end;}
.roadmap-flags ul + ul {margin-left: 30px;}
.roadmap-flags-ilst {display: flex;align-items: center;}
.roadmap-flags-ilst + .roadmap-flags-ilst {margin-top: 2px;}
.roadmap-flags-ilst [class*="roadmap-flag-"] {margin-right: 4px;margin-top: -1px;}

[class*="roadmap-flag-"] {display: inline-flex;align-items: center;justify-content: center;height: 15px;padding: 0 4px 0 4px;font-size: 10px;letter-spacing: -0.03em;border-radius: 3px;}
.roadmap-flag-new {/*background: #fe6b00;*/color: #fe6b00;;}
.roadmap-flag-new::before {content: "NEW";}
[class*="roadmap-flag-other"] {width: 26px;background: #444;color: #fff;}
.roadmap-flag-other-os,
.roadmap-flag-other-ds {width: 21px;}
.roadmap-flag-other-os::before {content: "OS";}
.roadmap-flag-other-ds::before {content: "DS";}
.roadmap-flag-other-dx {width:auto;}
.roadmap-flag-other-dx::before {content: "DX 전략";}
.roadmap-flag-other-cloud {width:auto;}
.roadmap-flag-other-cloud::before {content: "클라우드";}
.roadmap-flag-other-security::before {content: "보안";}
.roadmap-flag-accredit {background: #e5e5e5;}
.roadmap-flag-accredit::before {content: "공인";}
.roadmap-flag-ondemand {background: #e5e5e5;}
.roadmap-flag-ondemand:before {content: "On-Demand";}
[class*="roadmap-flag-sw"] {width: 16px;height: 16px;border-radius: 50%;}
.roadmap-flag-sw-javascript {background: #ffaf55;}
.roadmap-flag-sw-java {background: #3ce34d;}
.roadmap-flag-sw-dotnet {background: #50aeff;}
.roadmap-flag-sw-kotlin {background: #f662bb;}

.link [class*="roadmap-flag-"] {position: absolute;left: 0;top: 0;}
.link [class*="sec roadmap-flag-"] {left: 30px;}

.tblWrap .table-group {display:flex;}
.tblWrap .table-group table + table {margin-left:-1px;margin-right:-1px;}
.tblWrap .table-group table + table th:first-child {display:none;}
.tblWrap .table-group table .grid .moTit {display: none;word-break: keep-all;word-wrap: break-word;min-width:1%;}


[class*="roadmap-detail_"] {width: 100%;border-top-width: 3px;border-top-style: solid;}
[class*="roadmap-detail_"] thead {background: #f5f5f5;}
[class*="roadmap-detail_"] thead th[scope="col"]:first-of-type {color: #5d5d5d;}
[class*="roadmap-detail_"] th {font-size: 18px;letter-spacing: -0.03em;}
[class*="roadmap-detail_"] th[scope="row"] {width: 71px;color: #ffffff;}
[class*="roadmap-detail_"] th,
[class*="roadmap-detail_"] td {border: 1px solid #ffffff;}
[class*="roadmap-detail_"] .grid {position: relative;display: flex;align-items: center;justify-content: center;}
[class*="roadmap-detail_"] .grid .bg i {display: inline-flex;justify-content: center;align-items: center;flex-direction: column;}
[class*="roadmap-detail_"] .grid .bg {display: grid;grid-gap: 1px;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
[class*="roadmap-detail_"] .grid ul {display: grid;grid-gap: 1px;position: relative;width: 100%;height:100%;word-break: keep-all;}
[class*="roadmap-detail_"] .grid .bg.wide {grid-template-columns: 1fr;border-bottom: 1px solid #fff;}
[class*="roadmap-detail_"] .grid ul li {display: flex;padding:5px;min-width: 1%;}
[class*="roadmap-detail_"] thead .grid {flex-direction: column; min-height: 52px;}
[class*="roadmap-detail_"] thead .grid .category-title {display:flex;width:100%;min-height:52px;align-items:center;justify-content: center; border-bottom:1px solid #fff;}
[class*="roadmap-detail_"] thead .grid .bg {position:relative;min-height:52px;background: #fff;grid-gap: 1px;}
[class*="roadmap-detail_"] thead .grid .bg i {background: #f1f1f1;padding:5px 10px;word-break: keep-all;}
[class*="roadmap-detail_"] tbody .grid {min-height: 86px;padding: 15px 0;}
[class*="roadmap-detail_"] tbody .grid .bg.dotted i:last-child {border-right:3px dotted red}

[class*="roadmap-detail_"] .link {position: relative;flex: 1;display: flex;justify-content: center;align-items: center;min-height: 56px;padding: 15px 10px;background: #ffffff;color: #1e1e1e;font-size: 15px;letter-spacing: -0.03em;text-align: center;line-height: 1.4;border:1px solid transparent;border-radius: 2px;overflow: hidden;word-wrap: break-word;word-break:keep-all;transition:border-color .1s;}
[class*="roadmap-detail_"] .link:not(.disabled):hover {font-weight:500;border-color:rgba(0,0,0,.5);}
/* [class*="roadmap-detail_"] .link::before {content: "";position: absolute;top: 0;right: 0;width: 6px;height: 100%;} */
.roadmap-detail_security .intermediate .grid ul li:nth-child(1) .link {padding: 10px 8px 7px 4px;}


@media screen and (max-width: 1200px) {

    .header-wrap {padding:51px 30px;justify-content: space-between;}
    .header-wrap .titWrap {position:static;transform: translateY(0);}

    .roadmap-nav ul {padding:0 30px;}

    .roadmap-nav ul {overflow-x:auto;white-space: nowrap;} /*메뉴 다넣고 스크롤 생기는지 확인*/
    .roadmap-nav ul::-webkit-scrollbar {width: 5px;height: 5px;} /*메뉴 다넣고 스크롤 생기는지 확인*/
    .roadmap-nav ul::-webkit-scrollbar-thumb {background-color: #c1c1c1;} /*메뉴 다넣고 스크롤 생기는지 확인*/
    .roadmap-nav ul li a {padding:0 12px;}

    .roadmap-cont {padding:0 30px;}

    [class*="roadmap-detail_"] .link {word-break: break-all;}
}


@media screen and (max-width: 768px) {

    .roadmaps.scroll-down {padding-top:190px;}
    .roadmaps.scroll-down header {transform: translateY(-71px);}

    .roadmap-logo {height: 40px;}
    .roadmap-logo .logo {background-image: url(https://ui.multicampus.com/b2c/event/2024/02/0227/logo_m.png);background-size: 100px;}


    .roadmaps {padding:156px 0 60px 0;}
    .header-wrap {padding:20px;}
    .header-wrap .titWrap h1 {font-size:21px;}

    .tab-area ul {width:118px;height:24px;}
    .tab-area ul li {width:64px;}
    .tab-area ul li + li {margin-left:-10px;}
    .tab-area a {height:24px;font-size:13px;}
    .tab-area a.active{border-radius:12px !important;}
    .tab-area ul li:first-child a {border-radius:12px 0 0 12px;}
    .tab-area ul li:last-child a {border-radius:0 12px 12px 0;}

    .roadmap-nav ul {overflow-x:auto;padding:0 20px;white-space: nowrap;}
    .roadmap-nav ul::-webkit-scrollbar {width: 5px;height: 5px;}
    .roadmap-nav ul::-webkit-scrollbar-thumb {background-color: #c1c1c1;}
    [class*="roadmap-nav_"] .link {height:45px;min-height:45px;font-size:13px !important;}

    .roadmap-head {padding-bottom: 12px;}
    .roadmap-head .roadmap-btn-wrap {display:none;}
    .roadmap-title {font-size:16px;line-height:24px;}
    .roadmap-info p.new {display:flex;font-size:12px;color:#5D5D5D;align-items: center;line-height:1;}
    .roadmap-info p.new:before {content:"";display:block;width:8px;height:8px;margin-right:6px;background:#FE6B00;border-radius:4px;}
    .roadmap-info p.disabled {height:24px;line-height:24px;font-size:12px;padding:0 20px;}
    .roadmap-cont {min-width:auto; padding:0 20px;}

    .roadmap-cont {min-width:auto; padding:0 20px;}


    .roadmap-rt-info {display:none;}

    [class*="roadmap-detail_"] thead th[scope="col"]:first-of-type,
    [class*="roadmap-detail_"] thead .grid .bg i,
    [class*="roadmap-detail_"] th {font-size:13px;}
    [class*="roadmap-detail_"] th[scope="row"] {width:32px;line-height:16px;}
    [class*="roadmap-detail_"] thead .grid .bg i {/*word-break: keep-all;*/}
    [class*="roadmap-detail_"] .link {min-height:50px;padding: 8px 10px;font-size:12px;line-height:16px;word-break: keep-all;}
    [class*="roadmap-detail_"] tbody .grid {min-height:80px;padding:7px 0;}
    [class*="roadmap-detail_"] .grid ul li {padding:3px 10px !important}

    .tblWrap .table-group {flex-direction:column;gap:20px;}
    .tblWrap .table-group table + table {margin-top:0;}
    .tblWrap .table-group table + table th:first-child {display:table-cell;}

    .tblWrap .table-group table .grid {height:auto !important;}
    .tblWrap .table-group table .grid .pcTit {display: none;}
    .tblWrap .table-group table .grid .moTit {display: block;}

    .roadmap-flag-new {content: "";position: absolute;top: 0;left:auto !important;right: 0;width: 3px;height: 100%;padding:0;background:#fe6b00;font-size:0;border-radius:0 2px 2px 0;}

}

@media screen and (max-width: 412px) {
    [class*="roadmap-detail_"] .link {word-break: break-all;}
}

/* AI  */
.roadmap-detail_ai {color: #0e2e85;}
.roadmap-nav_ai .link:hover,
.roadmap-nav_ai .link.on {color:#0e2e85;}
.roadmap-nav_ai .link:hover:after,
.roadmap-nav_ai .link.on:after {background-color: #0e2e85;}
.roadmap-detail_ai tbody .grid .bg i:nth-child(odd) {background: #e4e9f7;}
.roadmap-detail_ai tbody .grid .bg i:nth-child(even) {background: #d8e0f3;}
.roadmap-detail_ai .high th[scope="row"],
.roadmap-detail_ai .high .link::before {background: #0e2e85;}
.roadmap-detail_ai .intermediate th[scope="row"],
.roadmap-detail_ai .intermediate .link::before {background: #153aa1;}
.roadmap-detail_ai .beginner th[scope="row"],
.roadmap-detail_ai .beginner .link::before {background: #2f58c5;}

.roadmap-detail_ai.cate1 .grid .bg {grid-template-columns: 1fr 1fr 1fr;}

.roadmap-detail_ai.cate1 .high .grid ul {grid-template-columns: repeat(6, 1fr);grid-template-rows: 1fr 1fr 1fr;}
.roadmap-detail_ai.cate1 .high .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_ai.cate1 .high .grid ul li:nth-child(2) {grid-area: 3 / 3 / 3 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_ai.cate1 .high .grid ul li:nth-child(3) {grid-area: 3 / 4 / 3 / 4;padding:5px 20px 5px 5px}
.roadmap-detail_ai.cate1 .high .grid ul li:nth-child(4) {grid-area: 2 / 3 / 2 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_ai.cate1 .high .grid ul li:nth-child(5) {grid-area: 2 / 4 / 2 / 4;padding:5px 20px 5px 5px}
.roadmap-detail_ai.cate1 .high .grid ul li:nth-child(6) {grid-area: 1 / 3 / 1 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_ai.cate1 .high .grid ul li:nth-child(7) {grid-area: 1 / 4 / 1 / 4;padding:5px 20px 5px 5px}
.roadmap-detail_ai.cate1 .high .grid ul li:nth-child(8) {grid-area: 2 / 7 / 2 / 5;padding:5px 20px 5px 20px}

@media screen and (max-width: 768px) {
    .roadmap-detail_ai.cate1 .high .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(5, 1fr);}
    .roadmap-detail_ai.cate1 .high .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_ai.cate1 .high .grid ul li:nth-child(2) {grid-area: 6 / 2 / 6 / 2;}
    .roadmap-detail_ai.cate1 .high .grid ul li:nth-child(3) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_ai.cate1 .high .grid ul li:nth-child(4) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_ai.cate1 .high .grid ul li:nth-child(5) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_ai.cate1 .high .grid ul li:nth-child(6) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_ai.cate1 .high .grid ul li:nth-child(7) {grid-area: 1 / 2 / 1 / 2;}
    .roadmap-detail_ai.cate1 .high .grid ul li:nth-child(8) {grid-area: 3 / 3 / 3 / 3;}
}

.roadmap-detail_ai.cate1 .intermediate .grid ul {grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(3, 1fr);}
.roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 4 / 1 / 3 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 2 / 3 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 2 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 3 / 2 / 2 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 2 / 1 / 1 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(6) {grid-area: 2 / 2 / 1 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(7) {grid-area: 2 / 3 / 2 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(8) {grid-area: 2 / 4 / 2 / 4;padding:5px 20px 5px 5px}


@media screen and (max-width: 768px) {
    .roadmap-detail_ai.cate1 .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(5, 1fr);}
    .roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 6 / 1 / 6 / 1;}
    .roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(6) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(7) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_ai.cate1 .intermediate .grid ul li:nth-child(8) {grid-area: 6 / 2 / 6 / 2;}

}

.roadmap-detail_ai.cate1 .beginner .grid ul {grid-template-columns: repeat(6, 1fr);}
.roadmap-detail_ai.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 7;padding:5px 20px 5px 20px}
.roadmap-detail_ai.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 1 / 1 / 1 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_ai.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 1 / 3 / 1 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_ai.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 4 / 1 / 4;padding:5px 20px 5px 5px}



@media screen and (max-width: 768px) {
    .roadmap-detail_ai.cate1 .beginner .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);}
    .roadmap-detail_ai.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 4;}
    .roadmap-detail_ai.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_ai.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_ai.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;}
}

/* 생성형 AI 활용 */
.roadmap-detail_ai_use {color: #0e2e85;}
.roadmap-nav_ai_use .link:hover,
.roadmap-nav_ai_use .link.on {color:#0e2e85;}
.roadmap-nav_ai_use .link:hover:after,
.roadmap-nav_ai_use .link.on:after {background-color: #0e2e85;}

.roadmap-detail_ai_use thead th:nth-child(2) {width: calc(100% - 61px);}
.roadmap-detail_ai_use tbody .grid .bg i:nth-child(odd) {background: #e4e9f7;}
.roadmap-detail_ai_use tbody .grid .bg i:nth-child(even) {background: #d8e0f3;}

/*배경 컬러 */
.roadmap-detail_ai_use + .roadmap-detail_ai_use tbody .grid .bg i:nth-child(odd) {background: #d8e0f3;}
.roadmap-detail_ai_use + .roadmap-detail_ai_use tbody .grid .bg i:nth-child(even) {background: #e4e9f7;}


.roadmap-detail_ai_use .high th[scope="row"],
.roadmap-detail_ai_use .high .link::before {background: #0e2e85;}


.roadmap-detail_ai_use .intermediate th[scope="row"],
.roadmap-detail_ai_use .intermediate .link::before {background: #153aa1;}


.roadmap-detail_ai_use.cate1 .grid .bg {grid-template-columns: 1fr 1fr 1fr;}
.roadmap-detail_ai_use.cate2 .grid .bg {grid-template-columns: 1fr 1fr;}

.roadmap-detail_ai_use.cate1 {width:62%;flex-shrink: 0;}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(7, 1fr);}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 6 / 2 / 6 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(6) {grid-area: 7 / 2 / 7 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(7) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(8) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(9) {grid-area: 3 / 3 / 3 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_ai_use.cate2 {flex-shrink: 0;width:38%}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(6, 1fr);}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 6 / 2 / 6 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(6) {grid-area: 5 / 2 / 5 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(7) {grid-area: 4 / 2 / 4 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(8) {grid-area: 3 / 2 / 3 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(9) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(10) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}

.roadmap-detail_ai_use .beginner th[scope="row"],
.roadmap-detail_ai_use .beginner .link::before {background: #2f58c5;}

.roadmap-detail_ai_use.cate1 .beginner .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(6, 1fr);}
.roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(5) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(6) {grid-area: 3 / 3 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(7) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(8) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_ai_use.cate2 .beginner .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(8, 1fr);}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 8 / 1 / 8 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(2) {grid-area: 7 / 1 / 7 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 6 / 1 / 6 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(4) {grid-area: 5 / 1 / 5 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(5) {grid-area: 4 / 1 / 4 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(6) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(7) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(8) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(9) {grid-area: 5 / 2 / 5 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(10) {grid-area: 4 / 2 / 4 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(11) {grid-area: 3 / 2 / 3 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(12) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(13) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}


@media screen and (max-width: 768px) {
    .roadmap-detail_ai_use.cate1 {flex-shrink: 1;width:100%}
    .roadmap-detail_ai_use.cate1 .intermediate .grid ul {grid-template-rows: repeat(3, 1fr);}
    .roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;}
    .roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 2 / 3 / 2 / 3;}
    .roadmap-detail_ai_use.cate1 .intermediate .grid ul li:nth-child(6) {grid-area: 1 / 3 / 1 / 3;}

    .roadmap-detail_ai_use.cate2 {flex-shrink: 1;width:100%}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 7 / 2 / 7 / 2;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(6) {grid-area: 6 / 2 / 6 / 2;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(7) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(8) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(9) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(10) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_ai_use.cate2 .intermediate .grid ul li:nth-child(11) {grid-area: 1 / 2 / 1 / 2;}

    .roadmap-detail_ai_use.cate1 .beginner .grid ul {grid-template-rows: repeat(3, 1fr);}
    .roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(5) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(6) {grid-area: 1 / 2 / 1 / 2;}
    .roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(7) {grid-area: 2 / 3 / 2 / 3;}
    .roadmap-detail_ai_use.cate1 .beginner .grid ul li:nth-child(8) {grid-area: 1 / 3 / 1 / 3;}

    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 8 / 1 / 8 / 1;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(2) {grid-area: 7 / 1 / 7 / 1;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 6 / 1 / 6 / 1;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(4) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(5) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(6) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(7) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(8) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(9) {grid-area: 6 / 2 / 6 / 2;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(10) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(11) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(12) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(13) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_ai_use.cate2 .beginner .grid ul li:nth-child(14) {grid-area: 1 / 2 / 1 / 2;}
}



/* 데이터 사이언스  */
.roadmap-detail_science {color: #2845ac;}
.roadmap-nav_science .link:hover,
.roadmap-nav_science .link.on {color:#2845ac;}
.roadmap-nav_science .link:hover:after,
.roadmap-nav_science .link.on:after {background-color: #2845ac;}

.roadmap-detail_science tbody .grid .bg i:nth-child(odd) {background: #e8ecf7;}
.roadmap-detail_science tbody .grid .bg i:nth-child(even) {background: #dce3f5;}

/*배경 컬러 */
.roadmap-detail_science + .roadmap-detail_science tbody .grid .bg i:nth-child(odd) {background: #dce3f5;}
.roadmap-detail_science + .roadmap-detail_science tbody .grid .bg i:nth-child(even) {background: #e8ecf7;}

.roadmap-detail_science .high th[scope="row"],
.roadmap-detail_science .high .link::before {background: #2845ac;}
.roadmap-detail_science.cate1 .intermediate th[scope="row"],
.roadmap-detail_science.cate1 .intermediate .link::before {background: #4562cd;}

.roadmap-detail_science.cate1 .grid .bg {grid-template-columns: 1fr 1fr 1fr;}
.roadmap-detail_science.cate2 .grid .bg {grid-template-columns: 2fr 1fr 1fr;}


.roadmap-detail_science.cate1 .high .grid ul {grid-template-columns: 1fr 1fr 1fr;}
.roadmap-detail_science.cate1 .high .grid ul li:nth-child(1) {grid-area: 1 / 1 / 2 / 2;}


.roadmap-detail_science.cate1 .intermediate .grid ul {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;}
.roadmap-detail_science.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 3 / 3 / 3 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_science.cate1 .beginner th[scope="row"],
.roadmap-detail_science.cate1 .beginner .link::before {background: #6681e4;}

.roadmap-detail_science.cate1 .beginner .grid ul {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr 1fr;}
.roadmap-detail_science.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 3 / 2 / 3 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate1 .beginner .grid ul li:nth-child(5) {grid-area: 4 / 3 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate1 .beginner .grid ul li:nth-child(6) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_science.cate2 .high .grid ul {grid-template-columns: 1fr 1fr 1fr 1fr;}
.roadmap-detail_science.cate2 .high .grid ul li:nth-child(1) {grid-area: 1 / 1 / 2 / 2;}

.roadmap-detail_science.cate2 .intermediate th[scope="row"],
.roadmap-detail_science.cate2 .intermediate .link::before {background: #4562cd;}

.roadmap-detail_science.cate2 .intermediate .grid ul {grid-template-columns: 1fr 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;}
.roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(6) {grid-area: 2 / 4 / 2 / 4;padding:5px 20px 5px 20px}

.roadmap-detail_science.cate2 .beginner th[scope="row"],
.roadmap-detail_science.cate2 .beginner .link::before {background: #6681e4;}

.roadmap-detail_science.cate2 .beginner .grid ul {grid-template-columns: 1fr 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr 1fr;}
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 1;padding:5px 5px 5px 20px}
/* .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;padding:5px 5px 5px 20px} */
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 3 / 2 / 3 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(4) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(5) {grid-area: 4 / 3 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(6) {grid-area: 3 / 3 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(7) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(8) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(9) {grid-area: 1 / 4 / 1 / 4;padding:5px 20px 5px 20px}

@media screen and (max-width: 768px) {
    .roadmap-detail_science.cate1 .intermediate .grid ul {grid-template-rows: 1fr 1fr;}
    .roadmap-detail_science.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 2 / 2 / 2 / 2;}


    .roadmap-detail_science.cate2 .intermediate .grid ul {grid-template-columns: 1fr 1fr 1fr;}
    .roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_science.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 3 / 1 / 3 / 1;}

    .roadmap-detail_science.cate2 .grid .bg {grid-template-columns: 1fr 1fr 1fr;}

    .roadmap-detail_science.cate2 .beginner .grid ul {grid-template-columns: 1fr 1fr 1fr;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(4) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(5) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(6) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(7) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(8) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(9) {grid-area: 1 / 2 / 1 / 2;}
    .roadmap-detail_science.cate2 .beginner .grid ul li:nth-child(10) {grid-area: 1 / 3 / 1 / 3;}
}

/* 클라우드 로드맵 */
.roadmap-detail_cloud {color: #5287d6;}
.roadmap-nav_cloud .link:hover,
.roadmap-nav_cloud .link.on {color:#5287d6;}
.roadmap-nav_cloud .link:hover:after,
.roadmap-nav_cloud .link.on:after {background-color: #5287d6;}
.roadmap-detail_cloud tbody .grid .bg i:nth-child(odd) {background: #e8ecf7;}
.roadmap-detail_cloud tbody .grid .bg i:nth-child(even) {background: #dce6f6;}
.roadmap-detail_cloud .high th[scope="row"],
.roadmap-detail_cloud .high .link::before {background: #5287d6;}
.roadmap-detail_cloud .intermediate th[scope="row"],
.roadmap-detail_cloud .intermediate .link::before {background: #4f8ce4;}
.roadmap-detail_cloud .beginner th[scope="row"],
.roadmap-detail_cloud .beginner .link::before {background: #6198e9;}

.roadmap-detail_cloud .grid .bg {grid-template-columns: 1fr 2fr;}

.roadmap-detail_cloud .high .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: 1fr;}
.roadmap-detail_cloud .high .grid ul li:nth-child(1) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}

.roadmap-detail_cloud .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);}
.roadmap-detail_cloud .intermediate .grid ul li:nth-child(1) {grid-area: 7 / 1 / 7 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .intermediate .grid ul li:nth-child(2) {grid-area: 7 / 2 / 7 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .intermediate .grid ul li:nth-child(3) {grid-area: 6 / 2 / 6 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .intermediate .grid ul li:nth-child(4) {grid-area: 5 / 2 / 5 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .intermediate .grid ul li:nth-child(5) {grid-area: 4 / 2 / 4 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .intermediate .grid ul li:nth-child(6) {grid-area: 3 / 2 / 3 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .intermediate .grid ul li:nth-child(7) {grid-area: 2 / 2 / 2 / 4;padding:5px 20px 5px 20px}

.roadmap-detail_cloud .beginner .grid ul {grid-template-columns: repeat(3, 1fr);}

.roadmap-detail_cloud .beginner .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .beginner .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .beginner .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .beginner .grid ul li:nth-child(4) {grid-area: 3 / 2 / 3 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .beginner .grid ul li:nth-child(5) {grid-area: 2 / 2 / 2 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_cloud .beginner .grid ul li:nth-child(6) {grid-area: 1 / 2 / 1 / 2;padding:5px 5px 5px 20px}
.roadmap-detail_cloud .beginner .grid ul li:nth-child(7) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 5px}

@media screen and (max-width: 768px) {
    .roadmap-detail_cloud .grid .bg {grid-template-columns: 1fr 1fr;}

    .roadmap-detail_cloud .high .grid ul {grid-template-columns: repeat(2, 1fr);}

    .roadmap-detail_cloud .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_cloud .intermediate .grid ul li:nth-child(1) {grid-area: 8 / 1 / 8 / 1;}
    .roadmap-detail_cloud .intermediate .grid ul li:nth-child(2) {grid-area: 8 / 2 / 8 / 2;}
    .roadmap-detail_cloud .intermediate .grid ul li:nth-child(3) {grid-area: 7 / 2 / 7 / 2;}
    .roadmap-detail_cloud .intermediate .grid ul li:nth-child(4) {grid-area: 6 / 2 / 6 / 2;}
    .roadmap-detail_cloud .intermediate .grid ul li:nth-child(5) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_cloud .intermediate .grid ul li:nth-child(6) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_cloud .intermediate .grid ul li:nth-child(7) {grid-area: 2 / 2 / 2 / 2;}
    
    .roadmap-detail_cloud .beginner .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_cloud .beginner .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 3;padding:5px 20px 5px 20px}
    .roadmap-detail_cloud .beginner .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
    .roadmap-detail_cloud .beginner .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
    .roadmap-detail_cloud .beginner .grid ul li:nth-child(4) {grid-area: 4 / 2 / 4 / 2;padding:5px 20px 5px 20px}
    .roadmap-detail_cloud .beginner .grid ul li:nth-child(5) {grid-area: 3 / 2 / 3 / 2;padding:5px 20px 5px 20px}
    .roadmap-detail_cloud .beginner .grid ul li:nth-child(6) {grid-area: 2 / 2 / 2 / 2;padding:5px 5px 5px 20px}
    .roadmap-detail_cloud .beginner .grid ul li:nth-child(7) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 5px}
}



/* 보안 */
.roadmap-detail_security {color: #459ddf;}
.roadmap-nav_security .link:hover,
.roadmap-nav_security .link.on {color:#459ddf;}
.roadmap-nav_security .link:hover:after,
.roadmap-nav_security .link.on:after {background-color: #459ddf;}
.roadmap-detail_security tbody .grid .bg i:nth-child(odd) {background: #dbe9f3;}
.roadmap-detail_security tbody .grid .bg i:nth-child(even) {background: #d1e4f2;}
.roadmap-detail_security .high th[scope="row"],
.roadmap-detail_security .high .link::before {background: #459ddf;}
.roadmap-detail_security .intermediate th[scope="row"],
.roadmap-detail_security .intermediate .link::before {background: #54a7e4;}
.roadmap-detail_security .beginner th[scope="row"],
.roadmap-detail_security .beginner .link::before {background: #65b0e9;}


.roadmap-detail_security.cate1 .grid .bg {grid-template-columns: 1fr 1fr;}
.roadmap-detail_security.cate1 .high .grid ul {grid-template-columns: repeat(2, 1fr);}

.roadmap-detail_security.cate1 .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(5, 1fr);}
.roadmap-detail_security.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 5 / 2 / 5 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 4 / 2 / 4 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate1 .intermediate .grid ul li:nth-child(6) {grid-area: 3 / 2 / 3 / 2;padding:5px 20px 5px 20px}

.roadmap-detail_security.cate1 .beginner .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);}
.roadmap-detail_security.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}


.roadmap-detail_security.cate2 .grid .bg {grid-template-columns: 1fr 1fr;}

.roadmap-detail_security.cate2 .high .grid ul {grid-template-columns: repeat(2, 1fr);}
.roadmap-detail_security.cate2 .high .grid ul li:nth-child(1) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px;min-height:84px;}

.roadmap-detail_security.cate2 .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(5, 1fr);}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(6) {grid-area: 5 / 2 / 5 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(7) {grid-area: 4 / 2 / 4 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(8) {grid-area: 3 / 2 / 3 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(9) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}

.roadmap-detail_security.cate2 .beginner .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);}
.roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}

.roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(5) {grid-area: 3 / 2 / 3 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(6) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(7) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}

@media screen and (max-width: 768px) {
    .roadmap-detail_security.cate1 .intermediate .grid ul {grid-template-rows: repeat(3, 1fr);}
    .roadmap-detail_security.cate1 .beginner .grid ul {grid-template-rows: repeat(2, 1fr);}

    .roadmap-detail_security.cate2 .grid .bg {grid-template-columns: 1fr 1fr;}

    .roadmap-detail_security.cate2 .high .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_security.cate2 .high .grid ul li:nth-child(1) {grid-area: 1 / 1 / 1 / 1;min-height:auto;}
    
    .roadmap-detail_security.cate2 .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(6) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(7) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(8) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_security.cate2 .intermediate .grid ul li:nth-child(9) {grid-area: 2 / 2 / 2 / 2;}
    
    .roadmap-detail_security.cate2 .beginner .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(5) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(6) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_security.cate2 .beginner .grid ul li:nth-child(7) {grid-area: 1 / 2 / 1 / 2;}
}



/* SW 개발 로드맵 */
[class*="roadmap-detail_sw"] {color: #997bdf;}
[class*="roadmap-nav_sw"] .link:hover,
[class*="roadmap-nav_sw"] .link.on {color:#997bdf;}
[class*="roadmap-nav_sw"] .link:hover:after,
[class*="roadmap-nav_sw"] .link.on:after {background-color: #997bdf;}

[class*="roadmap-detail_sw"] .high th[scope="row"],
[class*="roadmap-detail_sw"] .high .link::before {background: #997bdf;}
[class*="roadmap-detail_sw"] .intermediate th[scope="row"],
[class*="roadmap-detail_sw"] .intermediate .link::before {background: #a38adc;}
[class*="roadmap-detail_sw"] .beginner th[scope="row"],
[class*="roadmap-detail_sw"] .beginner .link::before {background: #ac95e3;}
[class*="roadmap-detail_sw"] tbody .grid .bg i:nth-child(odd) {background: #e9e4f2;}
[class*="roadmap-detail_sw"] tbody .grid .bg i:nth-child(even) {background: #e1d9f2;}
[class*="roadmap-detail_sw"] .link.cate-sw-javascript::before {background: #ffaf55;}
[class*="roadmap-detail_sw"] .link.cate-sw-java::before {background: #3ce34d;}
[class*="roadmap-detail_sw"] .link.cate-sw-dotnet::before {background: #50aeff;}
[class*="roadmap-detail_sw"] .link.cate-sw-kotlin::before {background: #f662bb;}

/* SW 개발 로드맵1 */
.roadmap-detail_sw1.cate1 {width:46%;flex-shrink: 0;}
.roadmap-detail_sw1.cate1 .grid .bg {grid-template-columns:2fr 1fr;}

.roadmap-detail_sw1.cate1 .high .grid ul {grid-template-columns: repeat(3, 1fr);}
.roadmap-detail_sw1.cate1 .high .grid ul li:nth-child(1) {grid-area: 1 / 1 / 1 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_sw1.cate1 .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr);}
.roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 1 / 1 / 1 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_sw1.cate1 .beginner .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr);}
.roadmap-detail_sw1.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 1 / 1 / 1 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}


.roadmap-detail_sw1.cate2 .grid .bg {grid-template-columns:1fr 1fr 2fr;}
.roadmap-detail_sw1.cate2 .high .grid ul {grid-template-columns: repeat(4, 1fr);}

.roadmap-detail_sw1.cate2 .intermediate .grid ul {grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, 1fr);}
.roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 2 / 3 / 2 / 5;padding:5px 20px 5px 20px}

.roadmap-detail_sw1.cate2 .beginner .grid ul {grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, 1fr);}
.roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(2) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 3 / 2 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 3 / 1 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(5) {grid-area: 2 / 4 / 2 / 4;padding:5px 20px 5px 5px}
.roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(6) {grid-area: 1 / 4 / 1 / 4;padding:5px 20px 5px 5px}

@media screen and (max-width: 768px) {
    .roadmap-detail_sw1.cate1 {width:100%;flex-shrink:1;}
    .roadmap-detail_sw1.cate1 .grid .bg {grid-template-columns:1fr 1fr;}

    .roadmap-detail_sw1.cate1 .high .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_sw1.cate1 .high .grid ul li:nth-child(1) {grid-area: 1 / 1 / 1 / 1;}

    .roadmap-detail_sw1.cate1 .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);}
    .roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_sw1.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 2 / 1 / 2;}

    .roadmap-detail_sw1.cate1 .beginner .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);}
    .roadmap-detail_sw1.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_sw1.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_sw1.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_sw1.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;}

    .roadmap-detail_sw1.cate2 .grid .bg {grid-template-columns:1fr 1fr 1fr;}
    .roadmap-detail_sw1.cate2 .high .grid ul {grid-template-columns: repeat(3, 1fr);}

    .roadmap-detail_sw1.cate2 .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);}
    .roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;}
    .roadmap-detail_sw1.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 2 / 3 / 2 / 5;}

    .roadmap-detail_sw1.cate2 .beginner .grid ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(4, 1fr);}
    .roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(2) {grid-area: 1 / 2 / 1 / 2;}
    .roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(3) {grid-area: 4 / 3 / 4 / 3;}
    .roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(4) {grid-area: 3 / 3 / 3 / 3;}
    .roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(5) {grid-area: 2 / 3 / 2 / 3;}
    .roadmap-detail_sw1.cate2 .beginner .grid ul li:nth-child(6) {grid-area: 1 / 3 / 1 / 3;}
}



/* SW 개발 로드맵2 */
.roadmap-detail_sw2.cate1 {width:67%;flex-shrink: 0;}
.roadmap-detail_sw2.cate1 .grid .bg {grid-template-columns: 1fr 1fr;}

.roadmap-detail_sw2.cate1 .high .grid ul {grid-template-columns: repeat(4, 1fr);}
.roadmap-detail_sw2.cate1 .high .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .high .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .high .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_sw2.cate1 .intermediate .grid ul {grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(6, 1fr);}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 1 / 1 / 1 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(6) {grid-area: 6 / 3 / 6 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(7) {grid-area: 5 / 3 / 5 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(8) {grid-area: 4 / 3 / 4 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(9) {grid-area: 3 / 3 / 3 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(10) {grid-area: 2 / 3 / 2 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(11) {grid-area: 1 / 3 / 1 / 5;padding:5px 20px 5px 20px}

.roadmap-detail_sw2.cate1 .beginner .grid ul {grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(5, 1fr);}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 2 / 1 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(5) {grid-area: 1 / 1 / 1 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(6) {grid-area: 5 / 3 / 5 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(7) {grid-area: 5 / 4 / 5 / 4;padding:5px 20px 5px 5px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(8) {grid-area: 4 / 3 / 4 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(9) {grid-area: 3 / 3 / 3 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(10) {grid-area: 2 / 3 / 2 / 5;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(11) {grid-area: 1 / 3 / 1 / 5;padding:5px 20px 5px 20px}


.roadmap-detail_sw2.cate2 .grid .bg {grid-template-columns: 1fr 1fr;}

.roadmap-detail_sw2.cate2 .high .grid ul {grid-template-columns: repeat(2, 1fr);}

.roadmap-detail_sw2.cate2 .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(6, 1fr);}
.roadmap-detail_sw2.cate2 .intermediate .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate2 .intermediate .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate2 .intermediate .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate2 .intermediate .grid ul li:nth-child(4) {grid-area: 3 / 2 / 3 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_sw2.cate2 .intermediate .grid ul li:nth-child(5) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}

.roadmap-detail_sw2.cate2 .beginner .grid ul {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);}
.roadmap-detail_sw2.cate2 .beginner .grid ul li:nth-child(1) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}

@media screen and (max-width: 768px) {
    .roadmap-detail_sw2.cate1 {width:100%;flex-shrink:1;}

    .roadmap-detail_sw2.cate1 .high .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_sw2.cate1 .high .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 3;}
    .roadmap-detail_sw2.cate1 .high .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 3;}
    .roadmap-detail_sw2.cate1 .high .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;}
    
    .roadmap-detail_sw2.cate1 .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(6) {grid-area: 6 / 2 / 6 / 2;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(7) {grid-area: 5 / 2 / 5 / 2;}

    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(8) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(9) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(10) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_sw2.cate1 .intermediate .grid ul li:nth-child(11) {grid-area: 1 / 2 / 1 / 2;}
    
    .roadmap-detail_sw2.cate1 .beginner .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(4) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(5) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(6) {grid-area: 6 / 2 / 6 / 2;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(7) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(8) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(9) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(10) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_sw2.cate1 .beginner .grid ul li:nth-child(11) {grid-area: 1 / 2 / 1 / 2;}

    .roadmap-detail_sw2.cate2 .intermediate .grid ul {grid-template-rows: repeat(3, 1fr);}

    .roadmap-detail_sw2.cate2 .beginner .grid ul {grid-template-rows: repeat(1, 1fr);}

}




/* SW 개발 로드맵3 */
.roadmap-detail_sw3 .grid .bg {grid-template-columns: 2fr 1fr;}

.roadmap-detail_sw3 .high .grid ul {grid-template-columns: repeat(3, 1fr);}

.roadmap-detail_sw3 .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);}
.roadmap-detail_sw3 .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw3 .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw3 .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw3 .intermediate .grid ul li:nth-child(4) {grid-area: 5 / 3 / 5 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw3 .intermediate .grid ul li:nth-child(5) {grid-area: 4 / 3 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw3 .intermediate .grid ul li:nth-child(6) {grid-area: 3 / 3 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw3 .intermediate .grid ul li:nth-child(7) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_sw3 .intermediate .grid ul li:nth-child(8) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_sw3 .beginner .grid ul {grid-template-columns: repeat(3, 1fr)}
.roadmap-detail_sw3 .beginner .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_sw3 .beginner .grid ul li:nth-child(2) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_sw3 .beginner .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_sw3 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 5px}

@media screen and (max-width: 768px) {
    .roadmap-detail_sw3 .grid .bg {grid-template-columns: 1fr 1fr;}

    .roadmap-detail_sw3 .high .grid ul {grid-template-columns: repeat(2, 1fr);}
    
    .roadmap-detail_sw3 .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_sw3 .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_sw3 .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_sw3 .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_sw3 .intermediate .grid ul li:nth-child(4) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_sw3 .intermediate .grid ul li:nth-child(5) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_sw3 .intermediate .grid ul li:nth-child(6) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_sw3 .intermediate .grid ul li:nth-child(7) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_sw3 .intermediate .grid ul li:nth-child(8) {grid-area: 1 / 2 / 1 / 2;}
    
    .roadmap-detail_sw3 .beginner .grid ul {grid-template-columns: repeat(2, 1fr)}
    .roadmap-detail_sw3 .beginner .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_sw3 .beginner .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_sw3 .beginner .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_sw3 .beginner .grid ul li:nth-child(4) {grid-area: 1 / 1 / 1 / 1;}

}



/* DB 로드맵 */
.roadmap-detail_db {color: #9280c4;}
.roadmap-nav_db .link:hover,
.roadmap-nav_db .link.on {color:#9280c4;}
.roadmap-nav_db .link:hover:after,
.roadmap-nav_db .link.on:after {background-color: #9280c4;}
.roadmap-detail_db tbody .grid .bg i:nth-child(odd) {background: #eae6f5;}
.roadmap-detail_db tbody .grid .bg i:nth-child(even) {background: #e2dcf0;}
.roadmap-detail_db .high th[scope="row"],
.roadmap-detail_db .high .link::before {background: #9280c4;}
.roadmap-detail_db .intermediate th[scope="row"],
.roadmap-detail_db .intermediate .link::before {background: #a797d4;}
.roadmap-detail_db .beginner th[scope="row"],
.roadmap-detail_db .beginner .link::before {background: #b6a7df;}

.roadmap-detail_db .grid .bg {grid-template-columns: 1fr 1fr 3fr;}

.roadmap-detail_db .high .grid ul {grid-template-columns: repeat(5, 1fr);}
.roadmap-detail_db .high .grid ul li:nth-child(1) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}

.roadmap-detail_db .intermediate .grid ul {grid-template-columns: repeat(5, 1fr);}
.roadmap-detail_db .intermediate .grid ul li:nth-child(1) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_db .intermediate .grid ul li:nth-child(2) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
.roadmap-detail_db .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 3 / 3 / 5;padding:5px 5px 5px 20px}
.roadmap-detail_db .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 3 / 2 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_db .intermediate .grid ul li:nth-child(5) {grid-area: 2 / 4 / 2 / 4;padding:5px 5px 5px 5px}
.roadmap-detail_db .intermediate .grid ul li:nth-child(6) {grid-area: 1 / 3 / 1 / 5;padding:5px 5px 5px 20px}

.roadmap-detail_db .beginner .grid ul {grid-template-columns: repeat(5, 1fr);}
.roadmap-detail_db .beginner .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_db .beginner .grid ul li:nth-child(2) {grid-area: 1 / 2 / 1 / 5;padding:5px 5px 5px 20px}
.roadmap-detail_db .beginner .grid ul li:nth-child(3) {grid-area: 4 / 3 / 4 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_db .beginner .grid ul li:nth-child(4) {grid-area: 4 / 4 / 4 / 4;padding:5px 5px 5px 5px}
.roadmap-detail_db .beginner .grid ul li:nth-child(5) {grid-area: 4 / 5 / 4 / 5;padding:5px 20px 5px 5px}
.roadmap-detail_db .beginner .grid ul li:nth-child(6) {grid-area: 3 / 3 / 3 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_db .beginner .grid ul li:nth-child(7) {grid-area: 3 / 4 / 3 / 4;padding:5px 5px 5px 5px}
.roadmap-detail_db .beginner .grid ul li:nth-child(8) {grid-area: 3 / 5 / 3 / 5;padding:5px 20px 5px 5px}
.roadmap-detail_db .beginner .grid ul li:nth-child(9) {grid-area: 2 / 3 / 2 / 3;padding:5px 5px 5px 20px}
.roadmap-detail_db .beginner .grid ul li:nth-child(10) {grid-area: 2 / 4 / 2 / 4;padding:5px 5px 5px 5px}
.roadmap-detail_db .beginner .grid ul li:nth-child(11) {grid-area: 2 / 5 / 2 / 5;padding:5px 20px 5px 5px}


@media screen and (max-width: 768px) {

    .roadmap-detail_db .grid .bg {grid-template-columns: 1fr 1fr 1fr;}

    .roadmap-detail_db .high .grid ul {grid-template-columns: repeat(3, 1fr);}
    .roadmap-detail_db .high .grid ul li:nth-child(1) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
    
    .roadmap-detail_db .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);}
    .roadmap-detail_db .intermediate .grid ul li:nth-child(1) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 20px}
    .roadmap-detail_db .intermediate .grid ul li:nth-child(2) {grid-area: 1 / 2 / 1 / 2;padding:5px 20px 5px 20px}
    .roadmap-detail_db .intermediate .grid ul li:nth-child(3) {grid-area: 4 / 3 / 4 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .intermediate .grid ul li:nth-child(4) {grid-area: 3 / 3 / 3 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .intermediate .grid ul li:nth-child(5) {grid-area: 2 / 3 / 2 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .intermediate .grid ul li:nth-child(6) {grid-area: 1 / 3 / 1 / 3;padding:5px 5px 5px 20px}
    
    .roadmap-detail_db .beginner .grid ul {grid-template-columns: repeat(3, 1fr);}
    .roadmap-detail_db .beginner .grid ul li:nth-child(1) {grid-area: 2 / 1 / 2 / 1;padding:5px 20px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(2) {grid-area: 1 / 2 / 1 / 4;padding:5px 5px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(3) {grid-area: 10 / 3 / 10 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(4) {grid-area: 9 / 3 / 9 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(5) {grid-area: 8 / 3 / 8 / 3;padding:5px 20px 5px 5px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(6) {grid-area: 7 / 3 / 7 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(7) {grid-area: 6 / 3 / 6 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(8) {grid-area: 5 / 3 / 5 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(9) {grid-area: 4 / 3 / 4 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(10) {grid-area: 3 / 3 / 3 / 3;padding:5px 5px 5px 20px}
    .roadmap-detail_db .beginner .grid ul li:nth-child(11) {grid-area: 2 / 3 / 2 / 3;padding:5px 5px 5px 20px}


}

/* IT 인프라 */
.roadmap-detail_it_infra {color: #7578c7;}
.roadmap-nav_it_infra .link:hover,
.roadmap-nav_it_infra .link.on {color:#7578c7;}
.roadmap-nav_it_infra .link:hover:after,
.roadmap-nav_it_infra .link.on:after {background-color: #7578c7;}
.roadmap-detail_it_infra tbody .grid .bg i:nth-child(odd) {background: #e1e1f0;}
.roadmap-detail_it_infra tbody .grid .bg i:nth-child(even) {background: #d6d7ea;}
.roadmap-detail_it_infra .high th[scope="row"],
.roadmap-detail_it_infra .high .link::before {background: #7578c7;}
.roadmap-detail_it_infra .intermediate th[scope="row"],
.roadmap-detail_it_infra .intermediate .link::before {background: #8688cb;}
.roadmap-detail_it_infra .beginner th[scope="row"],
.roadmap-detail_it_infra .beginner .link::before {background: #9395d1;}

.roadmap-detail_it_infra .grid .bg {grid-template-columns: 2fr 1fr;}

.roadmap-detail_it_infra .high .grid ul {grid-template-columns: repeat(3, 1fr);}
.roadmap-detail_it_infra .high .grid ul li:nth-child(1) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_it_infra .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 1;padding:5px 5px 5px 20px}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 2 / 2 / 2;padding:5px 20px 5px 5px}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(5) {grid-area: 5 / 3 / 5 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(6) {grid-area: 4 / 3 / 4 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(7) {grid-area: 3 / 3 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(8) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .intermediate .grid ul li:nth-child(9) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}

.roadmap-detail_it_infra .beginner .grid ul {grid-template-columns: repeat(3, 1fr);}
.roadmap-detail_it_infra .beginner .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .beginner .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .beginner .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .beginner .grid ul li:nth-child(4) {grid-area: 3 / 3 / 3 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .beginner .grid ul li:nth-child(5) {grid-area: 2 / 3 / 2 / 3;padding:5px 20px 5px 20px}
.roadmap-detail_it_infra .beginner .grid ul li:nth-child(6) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 20px}

@media screen and (max-width: 768px) {
    .roadmap-detail_it_infra .grid .bg {grid-template-columns: 1fr 1fr;}

    .roadmap-detail_it_infra .high .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_it_infra .high .grid ul li:nth-child(1) {grid-area: 1 / 2 / 1 / 2;}
    
    .roadmap-detail_it_infra .intermediate .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(1) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(2) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(3) {grid-area: 2 / 1 / 2 / 1;}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(4) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(5) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(6) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(7) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(8) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_it_infra .intermediate .grid ul li:nth-child(9) {grid-area: 1 / 2 / 1 / 2;}
    
    .roadmap-detail_it_infra .beginner .grid ul {grid-template-columns: repeat(2, 1fr);}
    .roadmap-detail_it_infra .beginner .grid ul li:nth-child(1) {grid-area: 3 / 1 / 3 / 2;}
    .roadmap-detail_it_infra .beginner .grid ul li:nth-child(2) {grid-area: 2 / 1 / 2 / 2;}
    .roadmap-detail_it_infra .beginner .grid ul li:nth-child(3) {grid-area: 1 / 1 / 1 / 2;}
    .roadmap-detail_it_infra .beginner .grid ul li:nth-child(4) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_it_infra .beginner .grid ul li:nth-child(5) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_it_infra .beginner .grid ul li:nth-child(6) {grid-area: 1 / 2 / 1 / 2;}
}

/* DX 전략 로드맵 */
.roadmap-detail_dx_strategy {color: #4b439d;}
.roadmap-nav_dx_strategy .link:hover,
.roadmap-nav_dx_strategy .link.on {color:#4b439d;}
.roadmap-nav_dx_strategy .link:hover:after,
.roadmap-nav_dx_strategy .link.on:after {background-color: #4b439d;}
.roadmap-detail_dx_strategy tbody .grid .bg i:nth-child(odd) {background: #e4e2f7;}
.roadmap-detail_dx_strategy tbody .grid .bg i:nth-child(even) {background: #dad8f3;}
.roadmap-detail_dx_strategy .high th[scope="row"],
.roadmap-detail_dx_strategy .high .link::before {background: #4b439d;}
.roadmap-detail_dx_strategy .intermediate th[scope="row"],
.roadmap-detail_dx_strategy .intermediate .link::before {background: #625bb0;}
.roadmap-detail_dx_strategy .beginner th[scope="row"],
.roadmap-detail_dx_strategy .beginner .link::before {background: #736bc5;}


.roadmap-detail_dx_strategy .grid .bg {grid-template-columns:1fr 2fr 1fr;}

.roadmap-detail_dx_strategy .high .grid ul {grid-template-columns: repeat(4, 1fr);}
.roadmap-detail_dx_strategy .high .grid ul li:nth-child(1) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}

.roadmap-detail_dx_strategy .intermediate .grid ul {grid-template-columns: repeat(4, 1fr);}
.roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 1 / 2 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 1 / 1 / 1;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(6) {grid-area: 3 / 2 / 3 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(7) {grid-area: 1 / 2 / 1 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(8) {grid-area: 5 / 4 / 5 / 4;padding:5px 20px 5px 20px}

.roadmap-detail_dx_strategy .beginner .grid ul {grid-template-columns: repeat(4, 1fr);}
.roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(1) {grid-area: 4 / 2 / 4 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(2) {grid-area: 3 / 2 / 3 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(3) {grid-area: 2 / 2 / 2 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(4) {grid-area: 1 / 2 / 1 / 2;padding:5px 5px 5px 20px}
.roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(5) {grid-area: 1 / 3 / 1 / 3;padding:5px 20px 5px 5px}
.roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(6) {grid-area: 3 / 4 / 3 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(7) {grid-area: 2 / 4 / 2 / 4;padding:5px 20px 5px 20px}
.roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(8) {grid-area: 1 / 4 / 1 / 4;padding:5px 20px 5px 20px}


@media screen and (max-width: 768px) {
    .roadmap-detail_dx_strategy .grid .bg {grid-template-columns:1fr 1fr 1fr;}

    .roadmap-detail_dx_strategy .high .grid ul {grid-template-columns: repeat(3, 1fr);}
    
    .roadmap-detail_dx_strategy .intermediate .grid ul {grid-template-columns: repeat(3, 1fr);}
    .roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(1) {grid-area: 5 / 1 / 5 / 1;}
    .roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(2) {grid-area: 4 / 1 / 4 / 1;}
    .roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(3) {grid-area: 3 / 1 / 3 / 1;}
    .roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(4) {grid-area: 2 / 1 / 2 / 3;}
    .roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(5) {grid-area: 1 / 1 / 1 / 1;}
    .roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(6) {grid-area: 3 / 2 / 3 / 3;}
    .roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(7) {grid-area: 1 / 2 / 1 / 3;}
    .roadmap-detail_dx_strategy .intermediate .grid ul li:nth-child(8) {grid-area: 5 / 3 / 5 / 3;}
    
    .roadmap-detail_dx_strategy .beginner .grid ul {grid-template-columns: repeat(3, 1fr);}
    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(1) {grid-area: 5 / 2 / 5 / 2;}
    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(2) {grid-area: 4 / 2 / 4 / 2;}
    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(3) {grid-area: 3 / 2 / 3 / 2;}
    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(4) {grid-area: 2 / 2 / 2 / 2;}
    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(5) {grid-area: 1 / 2 / 1 / 2;}

    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(6) {grid-area: 4 / 3 / 4 / 3;}
    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(7) {grid-area: 3 / 3 / 3 / 3;}
    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(8) {grid-area: 2 / 3 / 2 / 3;}
    .roadmap-detail_dx_strategy .beginner .grid ul li:nth-child(9) {grid-area: 1 / 3 / 1 / 3;}
}