@charset "utf-8";

.wrap-contents * { font-family: 'Gmarket Medium' !important;}
.wrap-contents .con-list > li:before { top: 5px !important;}


/* 20260114 4depth 추가 */
.anchorTab { margin: 0 auto; }
.anchorTablist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.anchorTablist .tab-item { background-color: #f1f3f5; color: #333; padding: 12px 10px; border-radius: 6px; text-align: center; cursor: pointer; border: 1px solid #ddd; font-weight: 500; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.anchorTablist .tab-item a { display: block; width: 100%; height: 100%; color: inherit; }
.anchorTablist .tab-item:hover { background-color: #ffffff; border: 2px solid #093f6e; color: #093f6e; font-weight: 700; box-shadow: 0 4px 10px rgba(9, 63, 110, 0.15); transform: translateY(-1px); }
.anchorTablist .tab-item:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(9, 63, 110, 0.18); }
.anchorTablist .tab-item.on { background-color: #ffffff; border: 2px solid #093f6e; color: #093f6e; font-weight: 700; box-shadow: 0 3px 8px rgba(9, 63, 110, 0.18); }
.anchorTablist .tab-item.on a { color: #093f6e; }
.tab-panel { display:none; }
.tab-panel.on { display:block; }
.con-table { display:block; }

@media all and (max-width:1024px) { .anchorTablist { grid-template-columns: repeat(2, 1fr); } }

/* HK사업 - 지역인문학센터 노둣돌 */
.nd-wrap {margin: 0 auto;}
.nd-wrap .nd-lead {background: #e3f0d6; padding: 20px 25px; margin: 30px 0; line-height: 1.7; border-radius: 15px;}
.nd-wrap .nd-intro { margin-bottom: 30px;}
.nd-wrap .nd-intro p {line-height: 1.8; margin-bottom: 20px;}
.nd-wrap .nd-intro .nd-sign {text-align: right; margin-bottom:0;}
.nd-wrap .nd-photo {width: 260px; height: 260px; border-radius: 50%; overflow: hidden; float: right; margin: 0 0 10px 10px;}
.nd-wrap .nd-photo img { width: 100%; height: 100%; object-fit: cover; display: block;}

.nd-wrap .nd-section-title {font-size: 25px; font-weight: bold; margin-bottom: 15px;}
.nd-wrap .nd-bar {background: #deebf3; padding: 20px 25px; font-weight: bold; color: #0693e3; margin-bottom: 30px;}
.nd-wrap .nd-card-wrap {display: flex; gap: 50px; flex-wrap: wrap;}
.nd-wrap .nd-card {width: calc(33.333% - 33.333px); height: 300px; overflow: hidden; display:flex; align-items: center; justify-content: center; position: relative; border-radius: 15px; padding: 20px;}
.nd-wrap .nd-card.card01 {background: url('/sites/inmun/images/sub/nodut-img01.jpg')no-repeat center center/cover;}
.nd-wrap .nd-card.card02 {background: url('/sites/inmun/images/sub/nodut-img02.jpg')no-repeat center center/cover;}
.nd-wrap .nd-card.card03 {background: url('/sites/inmun/images/sub/nodut-img03.jpg')no-repeat center center/cover;}
.nd-wrap .nd-card::before {content:''; width: 100%; height: 100%; position:absolute; top: 50%; left:50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.6; filter: brightness(0.6);}
.nd-wrap .nd-card.card01::before {background-color: #fcb900;}
.nd-wrap .nd-card.card02::before {background-color:#7bdcb5;}
.nd-wrap .nd-card.card03::before {background-color:#0693e3;}
.nd-wrap .nd-card-text {color: #fff; font-size: 24px; font-weight: bold; line-height: 1.7; position: relative; z-index: 10; text-align: center;}

@media (max-width: 1400px) {
  .nd-wrap .nd-card-wrap {gap: 20px;}
  .nd-wrap .nd-card {width: calc(33.333% - 13.333px);}
  .nd-wrap .nd-card-text {font-size: 22px;}
}
@media (max-width:1024px) {
  .nd-wrap .nd-photo {width:220px; height:220px;}
  .nd-wrap .nd-card {height:260px;}
  .nd-wrap .nd-card-text {font-size:20px;}
}
@media (max-width:768px) {
  .nd-wrap .nd-lead {padding:15px 18px; margin:20px 0; font-size:17px;}
  .nd-wrap .nd-intro {margin-bottom:20px;}
  .nd-wrap .nd-intro p {font-size:17px; margin-bottom:15px;}
  .nd-wrap .nd-photo {float:none; width:180px; height:180px; margin: 30px auto 25px;}
  .nd-wrap .nd-section-title {font-size:22px;}
  .nd-wrap .nd-bar {padding:12px 15px; font-size:17px; margin-bottom: 20px;}
  .nd-wrap .nd-card {width:100%; height:220px; margin-bottom:0;}
}
@media (max-width: 550px) {
  .nd-wrap .nd-card-wrap {gap: 12px;}
}

.bi-wrap .bi-lead {background: #e3f0d6; padding: 20px 25px; margin: 30px 0; line-height: 1.7; border-radius: 15px;}
.bi-wrap .bi-item-wrap {display: flex; gap: 50px; flex-wrap: wrap;}
.bi-wrap .bi-item-wrap .bi-item {width: calc(50% - 25px);}
.bi-wrap .bi-title {background:#deebf3; padding:20px; text-align:center; font-size:24px; font-weight: bold; margin-bottom: 30px;}
.bi-wrap .bi-body h4 {font-size:18px; font-weight:bold; margin-bottom: 12px;}
.bi-wrap .bi-body ul {margin-bottom: 25px; padding-left: 15px;}
.bi-wrap .bi-body ul li {margin-bottom: 7px;}

@media (max-width: 1400px) {
  .bi-wrap .bi-item-wrap {gap: 20px;}
  .bi-wrap .bi-item-wrap .bi-item {width: calc(50% - 10px);}
}
@media (max-width:1024px) {
  .bi-wrap .bi-title {font-size: 22px;}
}
@media (max-width:768px) {
  .bi-wrap .bi-lead {padding: 15px 20px; margin: 20px 0; font-size: 17px;}
  .bi-wrap .bi-item-wrap .bi-item {width: 100%;}
  .bi-wrap .bi-title {font-size:20px; padding:18px 16px; margin-bottom: 15px;}
  .bi-wrap .bi-body h4 {font-size:17px;}
}

.bi-wrap .bi-photo-wrap {margin-top: 50px;}
.bi-wrap .bi-photo-wrap ul {display:flex; flex-wrap: wrap; gap: 20px;}
.bi-wrap .bi-photo-wrap ul li {width: calc(33.333% - 13.333px);}
.bi-wrap .bi-photo-wrap ul li  img {width: 100%; height: 100%; object-fit: cover; max-height: 300px;}
.bi-wrap .bi-photo-wrap ul:nth-of-type(2) {margin-top: 20px;}
.bi-wrap .bi-photo-wrap ul:nth-of-type(2) li {width: calc(50% - 10px);}

@media (max-width: 768px) {
  .bi-wrap .bi-photo-wrap {margin-top: 30px;}
  .bi-wrap .bi-photo-wrap ul {gap: 10px;}
  .bi-wrap .bi-photo-wrap ul li {width: calc(33.333% - 6.666px);}
  .bi-wrap .bi-photo-wrap ul:nth-of-type(2) {margin-top: 10px;}
  .bi-wrap .bi-photo-wrap ul:nth-of-type(2) li {width: calc(50% - 5px);}
}
@media(max-width: 550px) {
  .bi-wrap .bi-photo-wrap ul li {width: 100%;}
  .bi-wrap .bi-photo-wrap ul:nth-of-type(2) li {width: 100%;}
}

/* ----- 2026225 서브 컨텐츠 수정 ----- */
.wrap-contents .con-list2 > li {line-height: 32px; margin-bottom: 5px;}
.wrap-contents .con-list2 > li:last-child {margin-bottom:0;}
.wrap-contents .con-list2 > li:before {top: 12px;}

.wrap-contents .b-basic {padding: 7px 20px 5px 40px;}


/* ----- 인사말 ----- */
#greeting {position: relative; padding-bottom: 80px; word-break: keep-all;}
#greeting .inner .top-box {position: relative; margin-bottom: 80px; overflow: visible;}
#greeting .inner .top-box .img {overflow: hidden; border-radius: 20px;}
#greeting .inner .top-box .img > img {max-width: 100%; border-radius: 20px;}
#greeting .inner .top-box .tit {position: absolute; right: 10px; bottom: -35px; width: 360px; padding: 40px; border-radius: 20px 20px 20px 50px; background: linear-gradient(135deg, #1e3a8a 0%, #1a2760 100%); box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.18); color: #fff;}
#greeting .inner .top-box .tit span {line-height: 1.3; font-weight: normal; color: #fff;}
#greeting .inner .top-box .tit span small {display: block; margin-bottom: 10px; color: #c8d7ff; font-size: 18px;}
#greeting .inner .top-box .tit span big {display: block; font-size: 24px; white-space: nowrap;}
#greeting .inner .top-box .tit span big strong {display: inline; font-weight: bold; font-size: 28px; margin-left: 4px;}
#greeting .inner .bottom-box .text-area .flex-wr {display: flex; margin-top: 40px; align-items: flex-start;}
#greeting .inner .bottom-box .text-area p {font-size: 20px; line-height: 1.6; color: #333; font-weight: 500;}
#greeting .inner .bottom-box .text-area p + p {margin-top: 30px;}
#greeting .ceo-name {margin-top: 40px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 15px; color: #222; font-size: 22px; font-weight: 500;}
#greeting .ceo-name span {font-size: 24px; color: #101010; text-align: right;}
#greeting .ceo-name span b {color: #224188; font-weight: 500;}
#greeting .ceo-name strong {font-size: 36px; color: #000; font-weight: normal;}

@media (max-width: 1400px) {
  #greeting .inner .top-box .tit {right: 25px;}
}
@media (max-width: 1200px) {
  #greeting {padding-bottom: 60px;}
  #greeting .inner .top-box {margin-bottom: 60px;}
  #greeting .inner .top-box .tit {width: 350px; padding: 35px;}
  #greeting .inner .bottom-box .text-area .txt {padding-left: 0;}
  #greeting .inner .bottom-box .text-area .flex-wr {display: block;}
}
@media (max-width: 768px) {
  #greeting {padding-bottom: 40px;}
  #greeting .inner .top-box {margin-bottom: 30px; padding: 0;}
  #greeting .inner .top-box .img {margin: 0; border-radius: 0;}
  #greeting .inner .top-box .img > img {border-radius: 0;}
  #greeting .inner .top-box .tit {position: relative; bottom: auto; left: 0; right: 0; width: 100%; padding: 18px 15px; text-align: center; border-radius: 0; box-shadow: none;}
  #greeting .inner .top-box .tit span small {font-size: 14px;}
  #greeting .inner .top-box .tit span big {font-size: 18px; white-space: nowrap;}
  #greeting .inner .top-box .tit span big strong {font-size: 20px; display: inline;}
  #greeting .inner .bottom-box .text-area p {font-size: 15px; line-height: 1.5;}
  #greeting .inner .bottom-box .text-area p + p {margin-top: 20px;}
  #greeting .ceo-name {margin-top: 20px; flex-direction: column; align-items: center; text-align: center; gap: 5px;}
  #greeting .ceo-name span {font-size: 18px;}
  #greeting .ceo-name strong {font-size: 24px;}
}


/* ----- 비전 ----- */
.wrap-contents .block-level02 ul.block-container {display: grid; border: 1px solid #e1e1e1; border-radius: 10px; overflow: hidden; margin-bottom: 70px;}
.wrap-contents .block-level02 ul.block-container > li {display: flex; align-items: center; padding: 45px 40px; text-align: left; border-bottom: 1px solid #e1e1e1;}
.wrap-contents .block-level02 ul.list-dot {display: flex; flex-direction: column; gap: 4px; margin-top: 10px;}
.wrap-contents .block-level02 ul.list-dot > li {position: relative; padding-left: 18px;}
.wrap-contents .block-level02 ul.list-dot > li::before {content: ''; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background-color: #aaa; border-radius: 50%;}
.wrap-contents .block-level02 ul.block-container li .text-box {flex: 1;}
.wrap-contents .block-level02 ul li .icon-box {display: flex; align-items: center; justify-content: center; margin-right: 25px; width: 90px; height: 90px; background-color: #eaf1f9; border-radius: 15px;}
.wrap-contents .block-level02 ul li .icon-box img {width: 80%; height: auto;}
.wrap-contents .block-level02 ul li .text-box span {color: #143970; font-size: 19px; text-transform: uppercase;}
.wrap-contents .block-level02 ul li .text-box p {margin-top: 8px; font-size: 19px; word-break: keep-all;}

@media (max-width: 1200px) {
  .wrap-contents .block-level02 ul.block-container {margin-bottom: 40px;}
  .wrap-contents .block-level02 ul.block-container > li {padding: 30px 25px;}
}
@media (max-width: 1024px) {
  .wrap-contents .block-level02 ul.block-container {grid-template-columns: 1fr;}
  .wrap-contents .block-level02 ul.block-container > li .icon-box {margin-right: 20px;}
}
@media (max-width: 768px) {
  .wrap-contents .block-level02 ul.block-container > li {flex-direction: column; align-items: flex-start; padding: 22px 18px;}
  .wrap-contents .block-level02 ul.block-container > li .icon-box {width: 64px; height: 64px; margin: 0 0 12px 0; border-radius: 14px;}
  .wrap-contents .block-level02 ul.block-container > li .icon-box img {width: 70%;}
  .wrap-contents .block-level02 ul.block-container > li .text-box {width: 100%;}
  .wrap-contents .block-level02 ul.block-container > li .text-box span {font-size: 17px; line-height: 1.2;}
  .wrap-contents .block-level02 ul.block-container > li .text-box p {margin-top: 6px; font-size: 16px; line-height: 1.45;}
  .wrap-contents .block-level02 ul.block-container > li .text-box .list-dot {margin-top: 10px;}
  .wrap-contents .block-level02 ul.block-container > li .text-box .list-dot > li {padding-left: 16px;}
  .wrap-contents .block-level02 ul.block-container > li .text-box .list-dot > li::before {top: 7px;}
}


/* ----- 연혁 ----- */
.history {position: relative; padding-bottom: 0;}
.history .inner {display: flex; padding-bottom: 0;}

.history .his-tab-wrap {margin-right: 150px; position: sticky; height: 100vh; top: 130px; background: #ccc;}
.history .his-tab-wrap:before {content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: url(../images/sub/history-year.jpg) center no-repeat; background-size: cover; filter: brightness(0.7);}
.history .his-tab {display: flex; flex-direction: column; position: sticky; height: 480px; top: 230px; padding-top: 80px;}
.history .his-tab:after {content: ''; position: absolute; left: 0; top: 105px; height: 100vh; border-right: 1px solid #ffffff; z-index: 0;}
.history .his-tab li {text-align: center; position: relative; margin-bottom: 20px;}
.history .his-tab li:before {content: ''; position: absolute; top: 50%; left: -3px; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50px; background: #ffffff; z-index: 1;}
.history .his-tab li a {padding: 15px 35px 15px 25px; width: 205px; font-size: 23px; font-weight: 600; line-height: 1; text-align: left; color: #fff; border-radius: 50px; border-top-left-radius: 0; border-bottom-left-radius: 0; transition: 0.3s;}
.history .his-tab li a:hover {color: var(--maincolor); transition: 0.3s;}
.history .his-tab li.on:before {background: var(--maincolor); right: 0;}
.history .his-tab li.on a {background: #fff; font-weight: 700; color: var(--maincolor);}

.history .his-cont {width: 100%;}
.history .cont {display: flex; margin-bottom: 50px; padding-top: 50px;}
.history .cont .year {position: sticky; top: 10px; height: 70px; margin-right: 150px; font-size: 65px; font-weight: 900;}
.history .cont .sec {position: relative; margin-top: 10px;}
.history .cont .sec dl {position: relative; z-index: 0; padding-left: 50px; padding-bottom: 50px; opacity: 0.2; transition: 0.5s;}
.history .cont .sec dl:after {content: ''; position: absolute; top: 20px; left: 0; height: 100%; border-left: 1px solid #ffe8da; z-index: -1;}
.history .cont .sec dl dt {position: relative; margin-bottom: 20px; font-size: 35px; font-weight: 800; line-height: 1;}
.history .cont .sec dl dt:before {content: ''; position: absolute; top: 13px; left: -55px; width: 10px; height: 10px; border-radius: 50px; background: #ff8a40;}
.history .cont .sec dl dd {margin-left: 3px; margin-bottom: 5px; font-size: 22px; word-break: keep-all; line-height: 1.45;}
.history .cont .sec dl dd img {margin-top: 10px; max-width: 100%; border-radius: 15px;}
.history .cont .sec dl dd ul.list-basic.list-dot {margin-top: 8px; margin-left: 0; padding-left: 0; list-style: none;}
.history .cont .sec dl dd ul.list-basic.list-dot > li {position: relative; margin: 0 0 6px; padding-left: 14px; font-size: 18px; color: #8b8b8b; line-height: 1.35;}
.history .cont .sec dl dd ul.list-basic.list-dot > li::before {content: ""; position: absolute; left: 0; top: 0.62em; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #8f8f8f;}
.history .cont .sec dl.on {opacity: 1; transition: 0.5s;}
.history .cont .sec dl.on:before {opacity: 0; transition: 0.3s;}

@media (max-width: 1500px) {
  .history .cont .year {margin-right: 90px; font-size: 55px; font-weight: 900;}
}
@media (max-width: 1300px) {
  .history .his-tab-wrap {display: none;}
  .history .his-cont {width: 100%;}
}
@media (max-width: 1024px) {
  .history .his-tab {margin-bottom: 50px !important;}
  .history .cont {padding-top: 0;}
  .history .cont .year {top: 0; margin-right: 50px; font-weight: 800;}
}
@media (max-width: 768px) {
  .history .cont .year {margin-right: 40px; font-size: 40px;}
  .history .cont .sec {margin-top: 15px;}
  .history .cont .sec dl {padding-left: 30px; padding-bottom: 45px;}
  .history .cont .sec dl dt {margin-bottom: 13px; font-size: 25px;}
  .history .cont .sec dl dt:before {left: -35px; top: 8px;}
  .history .cont .sec dl dd {font-size: 19px; line-height: 1.35;}
  .history .cont .sec dl dd ul.list-basic.list-dot > li {padding-left: 12px; font-size: 16px;}
  .history .cont .sec dl dd ul.list-basic.list-dot > li::before {width: 4px; height: 4px;}
}
@media (max-width: 550px) {
  .history .cont {flex-direction: column;}
  .history .cont .year {margin-right: 0;}
  .history .cont .sec {margin-left: 25px;}
}


/* ----- 네트워크 ----- */
.siteCards {margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;}
.siteCards__item {border-radius: 16px; overflow: hidden; border: 1px solid rgba(11,31,85,0.18); background: #fff;}
.siteCards__link {display: block; color: inherit; text-decoration: none;}
.siteCards__thumb {display: block; background: #f1f5ff; aspect-ratio: 16/10; overflow: hidden;}
.siteCards__thumb img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease;}
.siteCards__body {display: flex; flex-direction: column; text-align: center; padding: 14px 14px 16px; min-height: 150px;}
.siteCards__title {min-height: 38px; margin: 0 0 6px; font-size: 18px; line-height: 1.25; font-weight: 900; color: #0b1f55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.siteCards__url {margin-top: auto; margin-bottom: 10px; display: block; font-size: 16px; line-height: 1.3; color: rgba(15,23,42,0.62); word-break: break-all;}
.siteCards__btn {display: block; text-align: center;}
.siteCards__btn .b-basic {display: inline-block;}
.siteCards__item:hover .siteCards__thumb img {transform: scale(1.04);}

@media (max-width: 1200px) {
  .siteCards {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 768px) {
  .siteCards {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
  .siteCards__body {min-height: 140px;}
}
@media (max-width: 550px) {
  .siteCards {grid-template-columns: 1fr;}
  .siteCards__body {min-height: 0;}
}


/* ----- 로고 ----- */
.logo-wrap {margin-bottom: 30px;}
.logo-top {display: flex; gap: 24px; align-items: center; margin-bottom: 25px;}
.logo-box {flex: 0 0 30%; min-width: 280px;}
.logo-desc {flex: 1 1 70%; display: flex; align-items: center; padding: 0 10px;}
.logo-desc p {margin: 0; line-height: 1.7; word-break: keep-all; font-size: 20px;}
.logo-top .gray-border-box {padding: 30px 24px; min-height: 0;}
.logo-top .gray-border-box img {max-width: 200px; width: 100%; height: auto; display: block; margin: 0 auto;}
.signature-row {display: flex; gap: 20px; margin-top: 10px;}
.signature-row .gray-grid-box {flex: 1 1 33.333%; margin-top: 0; padding: 20px;}
.logo-bottom {display: flex; gap: 30px; align-items: stretch;}
.logo-bottom .logo-item {flex: 1 1 50%;}
.gray-border-box {display: flex; gap: 12px; align-items: center; padding: 65px 30px; border: 1px solid #e2e2e2; border-radius: 10px; min-height: 150px;}
.gray-grid-box {display: flex; justify-content: center; align-items: center; padding: 30px; margin-top: 10px; border: 1px solid #e2e2e2; border-radius: 10px; min-height: 150px;}
.gray-grid-box img {max-width: 100%; height: auto; display: block; margin: 0 auto;}
.brand-color-wrapper {display: flex; flex-direction: column; gap: 15px;}
.brand-color-wrapper .wrap {display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
.brand-color {position: relative; width: 100%; min-width: 250px; height: 100px; margin-bottom: 15px;}
.brand-color.color-green {background: #13ae67;}
.brand-color.color-blue {background: #5dc2d0;}
.brand-color.color-purple {background: #4d4398;}
.brand-color.color-orange {background: #ee780c;}
.brand-color.color-brown {background: #b79d62;}
.brand-color.color-silver {background: #9c9c9e;}
.brand-color.color-gold {background: #a37e39;}
.brand-color.color-gray {background: #898989;}
.brand-color-type {background: #767676; width: 200px; height: 50px; border-radius: 25px; display: inline-flex; justify-content: center; align-items: center; color: #fff; font-weight: 600;}
.brand-color-innner .title {font-weight: 500; font-size: 17px;}
.brand-color .cont {position: absolute; right: 0; bottom: 0; margin: 0 7px 8px 0; color: #fff; font-weight: 600;}
.gray-border-box.brand-box {padding: 35px 30px; min-height: auto; align-items: flex-start; flex-direction: column; margin-bottom: 20px;}
.gray-border-box.brand-box-sub {margin-top: 0 !important;}

@media (max-width: 768px) {
  .logo-top, .logo-bottom {flex-direction: column;}
  .logo-box {flex: 1 1 auto; min-width: 0; width: 100%;}
  .logo-desc {padding: 0;}
  .logo-top .gray-border-box {padding: 22px 18px;}
  .logo-top .gray-border-box img {max-width: 240px;}
  .brand-color-wrapper {gap: 18px;}
  .brand-color-wrapper .wrap {flex-direction: column; gap: 18px;}
  .brand-color {width: 300px; margin-bottom: 8px;}
  .brand-color-innner .title {font-size: 18px;}
  .gray-border-box.brand-box {padding: 26px 20px;}
  .gray-border-box.brand-box-sub {padding-top: 52px;}
}
@media (max-width: 768px) {
  .signature-row {flex-direction: column; gap: 16px;}
  .signature-row .gray-grid-box {flex: 1 1 100%; width: 100%; padding: 18px;}
}
.research-img img {width: 50%; max-width: 50%; height: auto; display: block; margin: 0 auto;}


/* ----- 민간자격과정 - 자격증 발급절차 ----- */
.stepFlow {display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 0 18px; overflow: visible;}
.stepFlow__item {width: 210px; min-height: 130px; padding: 16px 18px; box-sizing: border-box; border-radius: 16px; background: #fff; border: 2px solid #0b1f55; box-shadow: 0 6px 12px rgba(11, 31, 85, 0.16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; flex: 1;}
.stepFlow__badge {width: 38px; height: 38px; border-radius: 10px; background: #0b1f55; color: #fff; font-weight: 900; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; padding-top: 4px;}
.stepFlow__title {font-size: 17px; line-height: 1.25; font-weight: 800; color: #0b1f55;}
.stepFlow__arrow {display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;}
.stepFlow__arrow::before {content: "▶"; font-size: 18px; color: #0b1f55;}

@media (max-width: 768px) {
  .stepFlow {flex-direction: column; gap: 12px;}
  .stepFlow__item {width: 100%; max-width: 420px;}
  .stepFlow__arrow::before {content: "▼";}
}