.grenting .img { height: 29.7rem; border-radius: 1rem; overflow: hidden; line-height: 0; }
.grenting .img img { width: 100%; height: 100%; object-fit: cover; }
.grenting dl { display: flex; margin-top: 3.5rem; gap: 1rem; word-break: keep-all; }
.grenting dt { flex: 1; font-size: 2.5rem; font-weight: 700; line-height: normal; }
.grenting dd { flex: 1; }
.grenting dd p + p { margin-top: 1.5rem; }
.grenting dd .sign { display: flex; align-items: center; justify-content: end; gap: 1rem; margin-top: 3rem; font-size: 1.2rem; font-weight: 600; }
.grenting dd .sign strong { font-size: 1.5rem; font-weight: 700; }

.centerCard { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 3rem; }
.centerCard .card { position: relative; width: calc((100% - 2rem) / 2); border: 1px solid #ccc; border-radius: 0.5rem; padding: 1.5rem 2rem; overflow: hidden; }
.centerCard .card::before { position: absolute; bottom: 0; right: 0; background: url('/images/web/sangdam/sub/center_infoCard_logo.png') no-repeat bottom right / contain; width: 6.45rem; height: 6.55rem; opacity: 0.5; content: ""; }
.centerCard .card .card_head { display: flex; justify-content: space-between; gap: 1rem; }
.centerCard .card .card_head.on { justify-content: end; }
.centerCard .card .card_head .badge { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.centerCard .card .card_head .badge span { display: inline-flex; justify-content: center; align-items: center; padding: 0.3rem 0.7rem; font-size: 0.9rem; border: 1px solid #0098D8; color: #0098D8; border-radius: 5px; }
.centerCard .card .card_head .badge span.on { color: #fff; background: #0098D8; }
.centerCard .card .card_head .call { height: fit-content; flex: none; display: flex; align-items: center; gap: 5px; color: #555; background: #F5F5F5; border-radius: 5px; padding: 5px 0.5rem; font-size: 0.8rem; }
.centerCard .card .name { margin: 1.2rem 0 1.4rem; font-size: 1.5rem; font-weight: 700; color: #000; }
.centerCard .card dl { display: flex; gap: 1.5rem; padding-top: 1.1rem; border-top: 1px dashed #ccc; }
.centerCard .card dl dt { flex: none; font-size: 1rem; font-weight: 700; color: #000; }
.centerCard .card dl dd ul li { font-size: 0.9rem; word-break: keep-all; }
.centerCard .card dl dd ul li + li { margin-top: 0.2rem; }

.histy { position: relative; display: flex; }
.histy .txt_box { width: 25rem; line-height: normal; word-break: keep-all; }
.histy .txt_box p { font-size: 3rem; font-weight: 700; color: #000; margin-bottom: 1.9rem; }
.histy .txt_box span { font-size: 5rem; font-weight: 800; color: #E6F8FF; }
.histy .histy_list { position: relative; width: calc(100% - 25rem); }
.histy .histy_list::before { position: absolute; top: 1rem; left: 0; width: 1px; height: calc(100% - 1.7rem); background: #ccc; content: ""; }
.histy .histy_actbar { position: absolute; top: 15px; left: 0; width: 1px; background: #0098D8; }
.histy .histy_list dl + dl { margin-top: 2.5rem; }
.histy .histy_list dl dt { position: relative; line-height: normal; font-size: 2rem; font-weight: 700; color: #0098D8; margin-bottom: 1.5rem; padding-left: 5.3rem; }
.histy .histy_list dl dt::before { position: absolute; top: 15px; left: -6.5px; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #ccc; content: ""; transition: 0.3s; }
.histy .histy_list dl dt::after { position: absolute; top: 3px; left: -0.9rem; width: 2rem; height: 2rem; border-radius: 50%; background: #C8EFFF; opacity: 0.7; content: ""; z-index: -1; opacity: 0; transition: 0.3s; }
.histy .histy_list dl ul li { position: relative; display: flex; font-size: 0.9rem; color: #000; padding-left: 5.3rem; word-break: keep-all; }
.histy .histy_list dl ul li::before { position: absolute; top: 0.5rem; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: #ccc; content: ""; transition: 0.3s; }
.histy .histy_list dl ul li + li { margin-top: 0.8rem; }
.histy .histy_list dl ul li strong { width: 6.5rem; flex: none; font-weight: 700; font-size: 1rem; }

.histy .histy_list dl dt.act::before { background: #0098D8; }
.histy .histy_list dl dt.act::after { opacity: 1; }
.histy .histy_list dl ul li.act::before { background: #0098D8; }


.mapBox { position: relative; }
.mapBox .mapArea { height: 20rem; overflow: hidden; background: #ddd; }
.mapBox .mapInfo { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 1.5rem 0; border-bottom: 1px dashed #ddd; }
.mapBox .mapInfo .loct { display: flex; word-break: keep-all; }
.mapBox .mapInfo .loct p { flex: none; width: 6.65rem; font-size: 1.2rem; font-weight: 700; color: #121212; }
.mapBox .mapInfo .loct span { font-size: 1.1rem; }
.mapBox .mapInfo .con { background: #F6F8F9; border-radius: 0.5rem; padding: 0.8rem 1.5rem; }
.mapBox .mapInfo .con ul { display: flex; gap: 5rem; }
.mapBox .mapInfo .con ul li { display: flex; font-size: 1rem; white-space: nowrap; }
.mapBox .mapInfo .con ul li strong { width: 5rem; flex: none; color: #2097D9; font-weight: 700; }

.platform { border-radius: 1.5rem; background: #E9F8FF; padding: 4.4rem 2.5rem; }
.platform .tit { text-align: center; font-size: 2rem; font-weight: 700; color: #000; margin-bottom: 3.8rem; }
.platform .lst { display: flex; gap: 2.4rem; }
.platform .lst dl { flex: 1; background: #fff; border-radius: 0.5rem; overflow: hidden; }
.platform .lst dl dt { font-size: 1rem; font-weight: 600; background: #0098D8; color: #fff; text-align: center; padding: 1rem; word-break: keep-all; }
.platform .lst dl dd { padding: 1.4rem 1.5rem; }
.platform .lst dl dd .txt { font-size: 0.9rem; font-weight: 700; color: #111; margin-bottom: 0.5rem; }
.platform .lst dl dd ul + .txt { margin-top: 1rem; }
.platform .lst dl dd ul { border: 1px solid #ccc; padding: 0.8rem; border-radius: 5px; }

.procs { margin-top: 3rem; }
.procs > ul { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; }
.procs > ul > li { position: relative; width: calc((100% - 2rem) / 2); border: 1px solid #ccc; border-radius: 0.5rem; padding: 3.5rem 2rem 2.5rem; }
.procs > ul > li .num { position: absolute; top: -1px; left: -1px; display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: #0098D8; color: #fff; font-size: 1.5rem; font-weight: 700; }
.procs > ul > li .txt_box .tit { font-size: 1.2rem; font-weight: 700; color: #000; margin-bottom: 1.2rem; line-height: 150%; }

.flex_list > li { display: flex; }
.flex_list > li strong { min-width: 5rem; flex: none; font-weight: 700; }

.stepBox ul { display: flex; gap: 2.65rem; }
.stepBox ul li { position: relative; flex: 1; border-radius: 0.5rem; border: 1px solid #ccc; text-align: center; padding: 1.2rem; }
.stepBox ul li + li::before { position: absolute; top: 50%; left: -1.85rem; transform: translateY(-50%); color: #888; font-family: 'Remixicon'; font-size: 1rem; content: "\ea6e"; }
.stepBox ul li .img { line-height: 0; }
.stepBox ul li .step { min-width: 7.5rem; height: 2.5rem; display: inline-flex; justify-content: center; align-items: center; margin: 1.2rem auto 0.7rem; border-radius: 2rem; background: #0098D8; color: #fff; }
.stepBox ul li .txt { font-size: 1rem; }
.stepBox ul li.fin { display: flex; flex-direction: column; gap: 1rem; border-color: #002756; }
.stepBox ul li.fin .txt { flex: 1; display: flex; justify-content: center; align-items: center; font-weight: 700; }
.stepBox ul li.fin a { width: 100%; }

@media (max-width:1440px){
    .mapBox .mapInfo .loct p { width: 4rem; }
    .mapBox .mapInfo .con ul { gap: 3rem; }
}

@media (max-width:1240px){
    .centerCard .card { width: 100%; }

    .histy .txt_box { width: 17rem; }
    .histy .txt_box p { font-size: 2rem; padding-right: 5rem; }
    .histy .txt_box span { font-size: 3rem; }
    .histy .histy_list { width: calc(100% - 17rem); }
    .histy .histy_list dl dt { padding-left: 3rem; }
    .histy .histy_list dl ul li { padding-left: 3rem; }

    .mapBox .mapInfo { align-items: baseline; }
    .mapBox .mapInfo .con { padding: 0.5rem 0.8rem; }
    .mapBox .mapInfo .con ul { flex-direction: column; gap: 0.2rem; }
    .mapBox .mapInfo .con ul li { font-size: 0.9rem; }
    .mapBox .mapInfo .con ul li strong { width: 4rem; }

    .platform { padding: 2rem; }
    .platform .tit { font-size: 1.5rem; margin-bottom: 1.5rem; }
    .platform .lst { gap: 1.5rem; }
    .platform .lst dl dt { padding: 0.8rem; }
    .platform .lst dl dd { padding: 1rem; }
    .platform .lst dl dd ul { padding: 0.5rem 0.8rem; }

    .procs > ul > li { padding: 2.8rem 1.5rem 1.5rem; }
    .procs > ul > li .num { width: 2rem; height: 2rem; font-size: 1rem; }
    .procs > ul > li .txt_box .tit { font-size: 1.1rem; margin-bottom: 0.8rem; }

    .stepBox ul { flex-wrap: wrap; }
    .stepBox ul li { flex: none; width: calc((100% - 2.65rem) / 2); }
}

@media (max-width:960px){
    .grenting .img { height: auto; }
    .grenting dl { flex-direction: column; margin-top: 2rem; }
    .grenting dt { font-size: 2rem; }

    .centerCard .card { padding: 1.5rem; }
}

@media (max-width:840px){
    .histy { display: block; }
    .histy .txt_box { width: 100%; }
    .histy .txt_box p { padding-right: 0; margin-bottom: 0; }
    .histy .txt_box span { position: absolute; top: 1rem; right: 0; z-index: -1; }
    .histy .histy_list { width: 100%; margin-top: 2rem; }
    .histy .histy_list dl + dl { margin-top: 1.8rem; }
    .histy .histy_list dl dt { font-size: 1.3rem; margin-bottom: 0.8rem; padding-left: 2rem; }
    .histy .histy_list dl dt::before { width: 0.6rem; height: 0.6rem; top: 11px; left: -5.5px; }
    .histy .histy_list dl dt::after { width: 1.5rem; height: 1.5rem; top: 3px; left: -13px; }
    .histy .histy_list dl ul li { padding-left: 2rem; }
    .histy .histy_list dl ul li + li { margin-top: 0.2rem; }
    .histy .histy_list dl ul li strong { width: 5rem; font-size: 0.9rem; }
}

@media (max-width:768px){
    .centerCard .card { padding: 1.1rem; }
    .centerCard .card::before { width: 5rem; height: 5rem; }
    .centerCard .card .card_head .badge span { padding: 3px 0.5rem; font-size: 0.8rem; }
    .centerCard .card .card_head .call { padding: 3px 0.5rem; }
    .centerCard .card .name { font-size: 1.2rem; margin: 1rem 0; }
    .centerCard .card dl { padding-top: 1rem; }
    .centerCard .card dl dt { font-size: 0.9rem; }

    .histy .txt_box p { font-size: 1.5rem; }
    .histy .txt_box span { font-size: 2rem; }

    .mapBox .mapArea { height: 18rem; }
    .mapBox .mapInfo { padding: 1rem 0; }
    .mapBox .mapInfo .loct p { font-size: 1rem; }
    .mapBox .mapInfo .loct span { font-size: 1rem; }

    .platform { padding: 1.5rem; border-radius: 1rem; }
    .platform .lst { flex-direction: column; }

    .procs { margin-top: 2rem; }
    .procs > ul { flex-direction: column; }
    .procs > ul > li { width: 100%; }
} 

@media (max-width:580px){
    .mapBox .mapInfo { display: block; }
    .mapBox .mapInfo .con { margin-top: 0.5rem; }

    .flex_list > li { display: block; }

    .stepBox ul li { width: 100%; }
    .stepBox ul li + li::before { top: -2rem; left: 50%; transform: translateX(-50%); content: "\ea4e"; }
    .stepBox ul li .img img { height: 130px; }
    .stepBox ul li .step { margin: 0.7rem 0; height: 2rem; }
}

@media (max-width:480px){
    .grenting dt { font-size: 1.4rem; }
    .grenting dd .sign { display: block; font-size: 0.9rem; text-align: right; margin-top: 1.5rem; }
    .grenting dd .sign strong { font-size: 1.1rem; }

    .platform .tit { font-size: 1.2rem; margin-bottom: 1rem; }
}