@charset "UTF-8";


/* @font-face{
    font-family:"Paperlogy";
    src:url("../fonts/Paperlogy-7Bold.woff2") format("woff2");
    font-weight:700;
    font-style:normal;
}

@font-face{
    font-family:"Paperlogy";
    src:url("../fonts/Paperlogy-8ExtraBold.woff2") format("woff2");
    font-weight:800;
    font-style:normal;
} */

:root{--content-width:1320px;
    --header-width:1480px;
    --hero-height:clamp(540px,66.5svh,730px);
    --service-height:clamp(220px,27svh,310px);
    --section-min-height:clamp(720px,92svh,940px);
    --renew-point:#f04e73;
    --renew-navy:#101842;}

*{box-sizing:border-box}

html,
body{margin:0;padding:0}

body{font-family:"KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
    color:#20243a;
    background:#fff;
    overflow-x:hidden;}

a{text-decoration:none;color:inherit}

button{font-family:inherit;border:0;background:none;cursor:pointer}

ul,
li{list-style:none;margin:0;padding:0}

img{max-width:100%;vertical-align:top}

.blind{position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);}

.inner{width:var(--content-width);
    max-width:calc(100% - 80px);
    margin:0 auto;}

#skip{position:absolute;
    left:0;
    top:0;
    z-index:9999;}

#skip a{position:absolute;
    left:-9999px;
    top:0;
    width:1px;
    height:1px;
    overflow:hidden;}

#skip a:focus{left:10px;
    top:10px;
    width:auto;
    height:auto;
    padding:8px 14px;
    background:#111;
    color:#fff;
    font-size:13px;
    border-radius:4px;}

.hero{position:relative;
    height:var(--hero-height);
    overflow:hidden;
    color:#fff;
    background:#1e2a32; /* frame 톤 fallback — PNG 실패 시만 */
    background-image: url("/main/img/renew/main-video-frame.png"); /* context path 맞추기 */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;}
    

.hero-video{position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    object-fit:cover;}

/* mp4 준비 전: frame PNG 가리개 (video는 opacity 0 없이 autoplay) */
.hero-frame-cover{position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background-color:#1e2a32;
    background-image:url("/main/img/renew/main-video-frame.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    transition:opacity .25s ease, visibility .25s ease;}

.hero.is-video-playing .hero-frame-cover{opacity:0;
    visibility:hidden;}

.hero-dim{position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(
        180deg,
        rgba(0,18,45,.36),
        rgba(0,18,45,.14) 45%,
        rgba(0,18,45,.25)
    );}

/* 히어로 영상 정지/재생 — 우하단 아이콘 버튼 */
.hero-video-toggle{
    position:absolute;
    right:clamp(14px,2vw,28px);
    bottom:clamp(14px,2vw,24px);
    z-index:6;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin:0;
    padding:0;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(10,22,40,.45);
    color:#fff;
    cursor:pointer;
    backdrop-filter:blur(4px);
}
.hero-video-toggle i{
    font-size:18px;
    line-height:1;
}
.hero-video-toggle:hover{
    background:rgba(10,22,40,.62);
}
.hero-video-toggle:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
}

.renew-header{position:absolute;
    left:0;
    top:15px;
    z-index:5;
    width:100%;
    padding-top:6px;}

.renew-header .inner{display:flex;
    align-items:center;
    width:var(--header-width);
    max-width:calc(100% - 56px);}

.logo{margin:0;}

.logo a{display:flex;
    align-items:center;
    gap:15px;
    color:#fff;}

.logo img{width:140px;
    height:auto;}

.logo span{font-family:"Paperlogy","KoPub Dotum","KoPub??",sans-serif;
    font-size:31px;
    font-weight:500;
    letter-spacing:-.045em;}

.hero-content{position:relative;
    z-index:3;
    padding-top:clamp(85px,20svh,225px);
    text-align:center;}

.hero-kicker{font-size:20px;
    font-weight:500;
    margin: 0;}

.hero-content h2{margin:0;
    font-family:"Paperlogy","KoPub Dotum","KoPub??",sans-serif;
    font-size:clamp(42px,3.1vw,56px);
    font-weight:600;
    letter-spacing:-.05em;}

.hero-desc{margin:6px 0 40px;
    font-size:16px;
    opacity:.9;}

.main-search{display:flex;
    align-items:center;
    width:min(720px,calc(100% - 80px));
    height:64px;
    margin:0 auto;
    padding:0 0 0 34px;
    border-radius:999px;
    background:rgba(255,255,255,.88);
    box-shadow:0 10px 25px rgba(0,0,0,.18);}

.main-search input{flex:1;
    height:100%;
    border:0;
    background:transparent;
    font-size:16px;
    color:#555;
    outline:none;}
.main-search input:focus-visible{
    outline:2px solid rgba(217,47,81,.55);
    outline-offset:-4px;
    border-radius:8px;
}
.main-search button:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
}

.main-search button{display:flex;
    align-items:center;
    justify-content:center;
    width:70px;
    height:70px;
    margin-right:-18px;
    border-radius:50%;
    background:#D92F51;
    color:#fff;
    box-shadow:0 10px 20px rgba(0,0,0,.18);}

.main-search button i{font-size:32px;
    color:#fff;}

.section-title span,
.map-filter-box > span{display:block;
    color:#C24A5F;
    font-family:"KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
    font-size:14px;
    font-weight:500;}

.section-title h2,
.map-filter-box h2{margin:6px 0 14px;
    color:#151b45;
    font-family:"Paperlogy","KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
    font-size:clamp(34px,2.3vw,40px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.06em;}

.section-title h2 em,
.map-filter-box h2 em{font-style:normal;
    color:#e83f6b;}

.section-title p,
.map-filter-box p{margin:0;
    color:#666;
    font-family:"KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:1.7;
    letter-spacing:-.04em;}

.section-title.left{width:220px;
    flex:none;}

.section-title.center{width:100%;
    text-align:center;}

.section-title.center h2{margin-top:5px;}

.section-title.center p{margin-bottom:44px;}

.main-service{position:relative;
    min-height:var(--service-height);
    padding:clamp(20px,2.8svh,32px) 0 clamp(24px,3.4svh,40px);
    display:flex;
    align-items:center;
    background:#fff;
    overflow:hidden;}

/* ??? ??? � ????? ??? ?? ?? */
.main-service > .ai-credit{
    position:absolute;
    top:clamp(6px,1svh,12px);
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    width:var(--content-width);
    max-width:calc(100% - 80px);
    margin:0;
    padding:0;
    font-size:12px;
    line-height:1.2;
    letter-spacing:-.02em;
    color:#595f6b;
    pointer-events:none;
    user-select:none;
}

.service-bg{position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:100%;
    min-width:1320px;
    max-width:1880px;
    height:auto;
    pointer-events:none;
    user-select:none;
    z-index:0;}

.service-inner{position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(48px,5vw,76px);
    width:var(--content-width);
    max-width:calc(100% - 80px);
    margin:0 auto;}

.section-title.left{flex:0 0 220px;}

.service-card-list{flex:1;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:clamp(24px,2.2vw,34px);
    align-items:center;}

.service-card-list li{min-width:0;}

.service-card-list li:nth-child(1),
.service-card-list li:nth-child(3){transform:translateY(-12px);}

.service-card-list li:nth-child(2),
.service-card-list li:nth-child(4){transform:translateY(18px);}

.service-card-list li.down{margin-top:0;}

.service-card-list a{position:relative;
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    max-height:220px;
    border-radius:14px;
    overflow:hidden;
    background:#eee;
    box-shadow:0 14px 28px rgba(31,55,90,.12);
    transition:.3s;}

.service-card-list a:hover{transform:translateY(-6px);
    box-shadow:0 18px 34px rgba(31,55,90,.18);}

.service-card-list .thumb{width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.35s;}

.service-card-list a:hover .thumb{transform:scale(1.05);}

.hover-box{position:absolute;
    inset:0;
    padding:22px 20px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    background:linear-gradient(
        135deg,
        rgba(229,71,113,.9) 0%,
        rgba(233,90,146,.88) 100%
    );
    opacity:0;
    transition:.35s;}

.service-card-list a:hover .hover-box{opacity:1;}

.hover-icon{width:42px;
    height:42px;
    object-fit:contain;
    margin-bottom:11px;}

.hover-box strong{display:block;
    font-size:19px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:10px;
    letter-spacing:-.04em;}

.hover-line{display:block;
    width:38px;
    height:2px;
    margin:0 auto 12px;
    background:rgba(255,255,255,.8);}

.hover-box p{margin:0;
    font-size:15px;
    line-height:1.5;
    letter-spacing:-.04em;}

.hover-box .arrow{position:absolute;
    right:14px;
    top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(130,19,78,.35);
    color:#fff;
    font-size:20px;
    line-height:1;}

.data-map{position:relative;
    min-height:var(--section-min-height);
    padding:clamp(72px,8svh,104px) 0;
    display:flex;
    align-items:center;
    background:#fff;
    overflow:hidden;}

.data-map-bg{position:absolute;
    /* ?? ?? ~60% ??, ??? 0? ?? / ?? ? ?? ?? */
    --map-side:max(0px, calc((100% - var(--content-width)) / 2));
    left:max(48px, calc(var(--map-side) * 0.4));
    top:50%;
    transform:translateY(-50%);
    width:calc(var(--map-side) + min(470px, 42vw) - max(48px, calc(var(--map-side) * 0.4)));
    max-width:calc(100% - 48px);
    height:min(640px,74svh);
    background:#FEF1EC;
    border-radius:28px;
    z-index:0;}

.data-map-bg-img{position:absolute;
    right:0;
    bottom:0;
    width:min(880px,58vw);
    max-width:none;
    opacity:.12;
    z-index:0;
    pointer-events:none;
    user-select:none;}

.data-map-inner{position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:440px minmax(0,1fr);
    align-items:center;
    gap:clamp(62px,6vw,92px);}

.map-filter-box{position:relative;
    min-height:560px;
    padding:30px 0 64px 0;
    background:transparent;}

.map-filter-box:before{content:"DATAMAP";
    position:absolute;
    left:-64px;
    top:78px;
    writing-mode:vertical-rl;
    color:#f35d6c10;
    font-size:70px;
    font-weight:800;
    letter-spacing:.08em;}

.pin-img{position:absolute;
    right:18px;
    top:66px;
    width:66px;}

.filter-area strong,
.select-area label{display:block;
    font-size:14px;
    color:#333;
    letter-spacing:-.04em;}

.filter-area strong{margin:40px 0 12px;}

.chip-list{display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    width:350px;}

.chip-list button{height:34px;
    border-radius:999px;
    background:#fff;
    color:#555;
    font-size:14px;
    box-shadow:0 4px 12px rgba(230,83,103,.06);
    transition:.2s;}

.chip-list button.on{background:#f05a73;
    color:#fff;}

.select-area{display:flex;
    align-items:center;
    gap:16px;
    width:350px;
    margin-top:14px;}

.select-area label{width:78px;
    flex:none;}

.select-area select{flex:1;
    height:42px;
    padding:0 34px 0 16px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#555;
    font-size:14px;
    box-shadow:0 4px 12px rgba(230,83,103,.06);}

.map-search-btn{width:350px;
    height:54px;
    margin-top:26px;
    border-radius:999px;
    background:#f0526c;
    color:#fff;
    font-size:16px;
    box-shadow:0 10px 22px rgba(240,82,108,.22);}

.map-action-btns{display:flex;
    flex-direction:column;
    gap:10px;
    width:350px;
    max-width:100%;
    margin-top:26px;
    box-sizing:border-box;
    position:relative;
    z-index:4;}

.map-action-btns .map-search-btn,
.map-action-btns .map-detail-btn{display:block;
    width:100%;
    flex:none;
    min-width:0;
    margin-top:0;
    box-sizing:border-box;}

.map-detail-btn{height:48px;
    border-radius:999px;
    border:2px solid #f0526c;
    background:#fff;
    color:#f0526c;
    font-size:15px;
    font-weight:700;
    box-shadow:0 6px 16px rgba(240,82,108,.12);
    cursor:pointer;}

.map-detail-btn:hover{background:#fff5f7;}

.map-detail-btn i{margin-left:4px;}

.renew-main #renewDataMap .map-action-btns .map-search-btn,
.renew-main #renewDataMap .map-action-btns .map-detail-btn{
    width:100%;
    max-width:100%;
    flex:none;
    min-width:0;
}

.renew-main #renewDataMap .map-action-btns{
    width:var(--map-filter-control-width);
    max-width:100%;
    min-width:0;
    margin-left:0;
    padding-left:var(--map-char-btn-pad);
    box-sizing:border-box;
}

.renew-main #renewDataMap .map-filter-title-row .character-img,
.renew-main #renewDataMap .character-img{
    left:var(--map-char-left);
    width:var(--map-char-slot);
    max-width:var(--map-char-slot);
    max-height:144px;
    height:auto;
    object-fit:contain;
    object-position:center bottom;
}

.character-img{position:absolute;
    left:-20px;
    bottom:-42px;
    width:122px;
    filter:drop-shadow(-10px 12px 14px rgba(0,0,0,.16));}

.map-img-box{position:relative;
    min-height:560px;
    display:flex;
    align-items:center;}

.gn-map{display:block;
    width:100%;
    max-width:880px;
    margin:0 auto;
    filter:drop-shadow(0 16px 16px rgba(43,65,90,.13));}

.circle-deco{position:absolute;
    right:150px;
    top:56px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#F5D36A;
    opacity:.45;
    z-index:1;}

.circle-text{position:absolute;
    right:0;
    top:38px;
    width:124px;
    height:124px;
    z-index:2;
    animation:circleRotate 16s linear infinite;}

.circle-text svg{width:100%;
    height:100%;
    overflow:visible;}

.circle-text text{font-size:10px;
    font-weight:700;
    letter-spacing:5px;
    fill:#F0B24A;}

@keyframes circleRotate{
    to{transform:rotate(360deg)}
}

@keyframes plusFade{
    0%,100%{opacity:0;transform:scale(.82) rotate(0deg)}
    45%,65%{opacity:1;transform:scale(1) rotate(90deg)}
}

.popup{position:absolute;
    left:40px;
    top:30px;
    width:500px;
    height:auto;
    z-index:9999;
    background:#f3f3f3;
    box-shadow:0 1px 5px rgba(0,0,0,.5);}

.popup .titleBar{width:100%;
    height:44px;
    line-height:44px;
    background:#3a2850;
    color:#fff;
    font-size:17px;
    text-indent:20px;}

.popup .titleBar button{float:right;
    color:rgba(255,255,255,.6);
    font-size:22px;
    margin:10px 20px 0 0;}

.popup .popCon{width:calc(100% - 30px);
    margin:15px;
    padding-bottom:15px;
    background:#fff;}

.popCon .alt{padding:20px 0 0;
    text-align:center;}

.popCon .btnBoxCenter{width:calc(100% - 30px);
    padding:15px 15px 10px;
    text-align:center;
    border-top:1px solid #ccc;}

button.btnCRed2{min-width:110px;
    height:40px;
    border-radius:5px;
    background:#dc294f;
    color:#fff;
    font-size:16px;}

@media (max-width:1400px){
:root{--content-width:1180px;
        --header-width:1320px;}

.data-map-inner{grid-template-columns:390px minmax(0,1fr);
        gap:48px;}

.gn-map{max-width:780px;}
}

@media (max-width:1280px){
.inner,
.service-inner{width:calc(100% - 80px);
        max-width:none;}

.renew-header .inner{width:calc(100% - 56px);
        max-width:none;}
}

@media (max-width:900px){
.hero{height:clamp(420px,52svh,520px)}

.renew-header .inner{width:calc(100% - 40px);}

.logo img{width:120px;}

.logo span{font-size:22px;}

.hero-content h2{font-size:32px;}

.main-search{width:calc(100% - 40px);
        height:58px;
        padding-left:24px;}

.main-search button{width:62px;
        height:62px;}

.main-search button i{font-size:28px;}

.service-inner,
.data-map-inner{display:block;}

.main-service,
.data-map{min-height:auto;
        display:block;
        padding-top:64px;
        padding-bottom:72px;}

.section-title.left{width:auto;
        margin-bottom:30px;}

.service-card-list{grid-template-columns:repeat(2,1fr);}

.service-card-list li,
.service-card-list li:nth-child(1),
.service-card-list li:nth-child(2),
.service-card-list li:nth-child(3),
.service-card-list li:nth-child(4){transform:none;}

.service-card-list li.down{margin-top:0;}

.map-filter-box{min-height:auto;
        margin-bottom:50px;
        padding:20px 0 30px;}

.chip-list,
.select-area,
.map-search-btn{width:100%;
        max-width:350px;}

.map-img-box{min-height:auto;}

.gn-map{max-width:100%;}
}

:root{--content-width:1500px;
    --header-width:1600px;}

.inner,
.service-inner{width:var(--content-width);
    max-width:calc(100% - 80px);}

.main-service{min-height:clamp(260px,30svh,350px);
    padding:clamp(32px,5svh,80px) 0 clamp(48px,6svh,88px);
    overflow:hidden;
    background:#fff;
    isolation:isolate;}

.service-bg{width:100%;
    min-width:1320px;
    max-width:1880px;
    opacity:.72;}

.service-inner{gap:clamp(48px,5vw,76px);}

.service-card-list{display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:clamp(24px,2vw,34px);
    align-items:center;
    padding:18px 0 26px;}

.service-card-list a{width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    max-height:210px;
    border-radius:16px;
    box-shadow:0 18px 34px rgba(31,55,90,.16);}

.service-card-list .thumb{width:100%;
    height:100%;
    object-fit:cover;}

.data-map{position:relative;
    min-height:clamp(760px,86svh,920px);
    padding:clamp(56px,6svh,76px) 0 clamp(104px,11svh,136px);
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#fff;
    isolation:isolate;}

.data-map-bg{position:absolute;
    /* ?? ?? ?? ?? + ?? inset � ???? ? ?? ?? */
    --map-side:max(0px, calc((100% - var(--content-width)) / 2));
    left:max(48px, calc(var(--map-side) * 0.4));
    top:52px;
    width:calc(var(--map-side) + 470px - max(48px, calc(var(--map-side) * 0.4)));
    max-width:calc(100% - 48px);
    height:calc(100% - 170px);
    transform:none;
    border-radius:28px;
    background:#FEF1EC;
    z-index:0;}

.data-map-bg-img{position:absolute;
    left:50%;
    right:auto;
    bottom:-24px;
    width:100%;
    min-width:1500px;
    max-width:1920px;
    transform:translateX(-50%);
    opacity:1;
    z-index:0;
    pointer-events:none;
    user-select:none;}

.data-map-inner{position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:360px minmax(0, 1fr);
    align-items:center;
    gap:clamp(54px,5vw,78px);}

.map-filter-box{position:relative;
    width:360px;
    min-height:530px;
    margin-left:0;
    padding:50px 0;
    background:transparent;}

.map-filter-box:before{left:-78px;
    top:56px;
    color:#f35d6c0d;
    font-size:74px;}

.pin-img{width:54px;
    right:28px;
    top:44px;}

.character-img{width:116px;
    left:-82px;
    bottom:-22px;
    z-index:3;}

.map-visual-box{position:relative;
    display:grid;
    grid-template-columns:112px minmax(0, 760px);
    align-items:center;
    justify-content:center;
    gap:24px;
    min-height:570px;
    padding:0 6px 0 0;
    overflow:visible;}

.data-svg-map{position:relative;
    grid-column:2;
    grid-row:1;
    width:100%;
    min-width:0;
    max-width:760px;
    margin:0;
    overflow:visible;}

.place-map,
.gn-map-svg{display:block;
    width:100%;
    height:auto;
    overflow:visible;}

.place-map .gn-region,
.place-map path.map-region,
.gn-map-svg .gn-region,
.gn-map-svg path.map-region{fill:#fff;
    stroke:#cddbe7;
    stroke-width:2.2;
    stroke-linejoin:round;
    stroke-linecap:round;
    cursor:pointer;
    outline:none;
    transition:fill .22s ease, stroke .22s ease, transform .22s ease, filter .22s ease;
    transform-box:fill-box;
    transform-origin:center;}

.place-map .gn-boundary,
.gn-map-svg .gn-boundary{fill:none;
    stroke:#cddbe7;
    stroke-width:2.2;
    stroke-linejoin:round;
    stroke-linecap:round;
    pointer-events:none;}

.place-map .gn-map-label,
.place-map .map-label,
.gn-map-svg .gn-map-label,
.gn-map-svg .map-label{fill:#07113b;
    stroke:none;
    font-family:"KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
    font-size:24px;
    font-weight:700;
    letter-spacing:-.06em;
    pointer-events:none;
    user-select:none;
    paint-order:normal;}

.place-map .gn-region:hover,
.place-map .gn-region:focus,
.place-map .gn-region.is-active,
.place-map path.map-region:hover,
.place-map path.map-region:focus,
.place-map path.map-region.is-active,
.gn-map-svg .gn-region:hover,
.gn-map-svg .gn-region:focus,
.gn-map-svg .gn-region.is-active,
.gn-map-svg path.map-region:hover,
.gn-map-svg path.map-region:focus,
.gn-map-svg path.map-region.is-active{fill:#f0526c;
    stroke:#fff;
    transform:translateY(-3px);
    filter:drop-shadow(0 8px 12px rgba(240,82,108,.18));}

.map-legend{position:relative;
    left:auto;
    bottom:auto;
    grid-column:1;
    grid-row:1;
    z-index:7;
    width:112px;
    margin:0;
    padding:14px 16px;
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 26px rgba(43,65,90,.12);}

.map-legend li{display:flex;
    align-items:center;
    gap:10px;
    color:#333;
    font-size:13px;
    line-height:1;
    white-space:nowrap;}

.map-legend li + li{margin-top:10px;}

.legend-color{display:block;width:18px;height:18px;border-radius:4px;flex:none;}

.legend-color.lv1{background:#78d4d8;}

.legend-color.lv2{background:#b7df8a;}

.legend-color.lv3{background:#ffd86f;}

.legend-color.lv4{background:#ffa75f;}

.legend-color.lv5{background:#ff7068;}

.map-hover-pin{display:none;}

.circle-deco{right:18px;
    top:34px;
    width:62px;
    height:62px;
    z-index:3;
    background:#F5D36A;
    opacity:.45;}

.circle-text{right:-78px;
    top:6px;
    width:136px;
    height:136px;
    z-index:4;}

@media (max-width:1600px){
:root{--content-width:1420px;
        --header-width:1500px;}

.data-map-inner{grid-template-columns:350px minmax(0,1fr);
        gap:44px;}

.map-filter-box{width:350px;}

.map-visual-box{grid-template-columns:108px minmax(0, 700px);
        gap:20px;}

.map-legend{width:108px;
        padding:13px 14px;}
}

@media (max-width:1400px){
:root{--content-width:1260px;
        --header-width:1360px;}

.data-map-inner{grid-template-columns:340px minmax(0,1fr);
        gap:30px;}

.map-filter-box{width:340px;}

.map-visual-box{grid-template-columns:104px minmax(0, 620px);
        gap:18px;
        justify-content:start;}

.map-legend{width:104px;
        padding:12px 13px;}

.map-legend li{font-size:12px;
        gap:8px;}

.legend-color{width:16px;
        height:16px;}

.circle-text{right:-58px;}
}

@media (max-width:1280px){
.service-card-list a{max-height:190px;}

.data-map-inner{grid-template-columns:330px minmax(0,1fr);
        gap:24px;}

.map-filter-box{width:330px;}

.map-visual-box{grid-template-columns:102px minmax(0, 560px);
        gap:16px;}
}

@media (max-width:1120px){
.data-map-inner{grid-template-columns:320px minmax(0,1fr);
        gap:20px;}

.map-filter-box{width:320px;}

.map-visual-box{grid-template-columns:1fr;
        justify-items:center;
        gap:16px;}

.data-svg-map{grid-column:1;
        grid-row:1;
        width:min(560px, 100%);}

.map-legend{grid-column:1;
        grid-row:2;
        width:max-content;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px 14px;
        margin-top:0;}

.map-legend li{margin:0;}

.map-legend li + li{margin-top:0;}
}

@media (max-width:980px){
.data-map-inner{display:block;}

.map-filter-box{width:100%;
        min-height:auto;
        padding:28px 0 42px;}

.map-visual-box{display:grid;
        min-height:auto;
        padding:34px 0 0;}

.data-svg-map{width:min(760px, 100%);
        margin:0 auto;}

.character-img{left:0;
        bottom:-28px;}
}

@media (max-width:900px){
.service-card-list{grid-template-columns:repeat(2, minmax(0, 1fr));}

.data-map-bg{width:100%;
        height:430px;
        top:0;
        border-radius:0 0 28px 28px;}

.data-map-bg-img{bottom:0;
        min-width:1000px;
        width:120%;}

.circle-deco,
.circle-text{display:none;}
}

@media (max-width:640px){
.map-legend{padding:11px 12px;
        gap:8px 12px;}

.map-legend li{font-size:12px;}

.legend-color{width:16px;height:16px;}
}

.place-map,
.gn-map-svg{shape-rendering:geometricPrecision;}

.place-map .gn-map-regions,
.gn-map-svg .gn-map-regions{filter:drop-shadow(8px 11px 0 rgba(242, 207, 196, 0.18));}

.place-map .gn-area,
.gn-map-svg .gn-area,
.place-map .gn-region,
.gn-map-svg .gn-region,
.place-map path.map-region,
.gn-map-svg path.map-region{fill:#fff !important;
    stroke:#fff;
    stroke-width:8px;
    stroke-linejoin:round;
    stroke-linecap:round;
    paint-order:stroke fill !important;
    vector-effect:non-scaling-stroke;
    cursor:pointer;
    outline:none;
    transition:fill .22s ease, filter .22s ease;
    transform:none;}

.place-map .gn-boundary,
.gn-map-svg .gn-boundary,
.place-map .gn-line,
.gn-map-svg .gn-line{fill:none !important;
    stroke:#c6d8e8;
    stroke-width:1.15px;
    stroke-linejoin:round;
    stroke-linecap:round;
    opacity:.78;
    pointer-events:none;
    vector-effect:non-scaling-stroke;}

.place-map .gn-region:hover,
.place-map .gn-region:focus,
.place-map .gn-region.is-active,
.place-map .gn-area:hover,
.place-map .gn-area:focus,
.place-map .gn-area.is-active,
.place-map path.map-region:hover,
.place-map path.map-region:focus,
.place-map path.map-region.is-active,
.gn-map-svg .gn-region:hover,
.gn-map-svg .gn-region:focus,
.gn-map-svg .gn-region.is-active,
.gn-map-svg .gn-area:hover,
.gn-map-svg .gn-area:focus,
.gn-map-svg .gn-area.is-active,
.gn-map-svg path.map-region:hover,
.gn-map-svg path.map-region:focus,
.gn-map-svg path.map-region.is-active{fill:#f0526c !important;
    stroke:#fff;
    transform:none;
    filter:drop-shadow(0 8px 12px rgba(240,82,108,.14));}

.place-map .gn-map-label,
.place-map .map-label,
.gn-map-svg .gn-map-label,
.gn-map-svg .map-label{fill:#07113b !important;
    stroke:#fff;
    stroke-width:3px;
    paint-order:stroke fill;}

.service-card-list a{max-height:clamp(222px,11vw,236px);
    border-radius:18px;}

@media (max-width:1280px){
.service-card-list a{max-height:clamp(206px,28vw,224px);
        border-radius:18px;}
}

.renew-header{top:15px;
    padding-top:6px;}

.renew-header .inner,
.renew-header-inner{display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    width:var(--header-width);
    max-width:calc(100% - 56px);}

.renew-user-area{display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:none;
    color:#fff;}

.renew-user-menu{display:flex;
    align-items:center;
    gap:8px;
    color:#fff;}

.renew-user-menu .renew-menu-item{position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:58px;
    min-height:58px;
    padding:4px 2px;
    border-radius:10px;
    color:#fff;
    background:transparent;
    transition:background .2s ease, transform .2s ease;}

.renew-user-menu a.renew-menu-item{color:#fff;}

.renew-user-menu .renew-menu-item:hover,
.renew-user-menu .renew-menu-item:focus-visible,
.renew-notice-menu:hover .renew-notice-trigger,
.renew-notice-menu:focus-within .renew-notice-trigger{background:rgba(255,255,255,.14);
    transform:translateY(-2px);}

.renew-header-icon{display:block;
    width:29px;
    height:29px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;}

.renew-megaphone-icon{width:30px;height:30px;}

.renew-user-menu .renew-menu-item em{font-style:normal;
    font-size:11px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;}

.renew-notice-menu{position:relative;}

.renew-notice-dropdown{position:absolute;
    left:50%;
    top:calc(100% + 8px);
    z-index:30;
    width:118px;
    padding:8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:13px;
    background:rgba(20,25,35,.9);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 14px 34px rgba(5,12,43,.28);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,-9px);
    transition:opacity .22s ease, visibility .22s ease, transform .22s ease;}

.renew-notice-menu:hover .renew-notice-dropdown,
.renew-notice-menu:focus-within .renew-notice-dropdown{opacity:1;
    visibility:visible;
    transform:translate(-50%,0);}

.renew-notice-dropdown::before{content:"";
    position:absolute;
    left:50%;
    top:-6px;
    width:12px;
    height:12px;
    background:rgba(20,25,35,.9);
    border-top:1px solid rgba(255,255,255,.08);
    border-left:1px solid rgba(255,255,255,.08);
    transform:translateX(-50%) rotate(45deg);}

.renew-notice-dropdown li{position:relative;z-index:1;}

.renew-notice-dropdown a{display:block;
    padding:9px 10px;
    border-radius:8px;
    color:#fff;
    font-size:13px;
    line-height:1.2;
    text-align:center;
    transition:background .18s ease, color .18s ease;}

.renew-notice-dropdown a:hover,
.renew-notice-dropdown a:focus-visible{background:rgba(255,255,255,.08);
    color:#fff;}

.renew-notice-dropdown a.is-active,
.renew-notice-dropdown a[aria-current="page"]{color:var(--renew-point);}

.renew-login-button{display:flex;
    align-items:center;
    justify-content:center;
    min-width:74px;
    height:36px;
    margin-left:5px;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:6px;
    background:rgba(255,255,255,.2);
    color:#fff;
    font-size:14px;
    font-weight:700;
    box-shadow:none;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;}

.renew-login-button:hover,
.renew-login-button:focus-visible{background:#fff;
    border-color:#fff;
    color:var(--renew-navy);
    transform:translateY(-1px);}

.hero{height:var(--hero-height);}

.hero-content{padding-top:clamp(82px,19.5svh,218px);}

.main-search{height:58px;
    padding-left:32px;}

.main-search button{width:64px;
    height:64px;
    margin-right:-16px;}

.main-search button i{font-size:30px;
    color:#fff;}

.main-service{min-height:clamp(248px,28.5svh,336px);
    padding:clamp(25px,4.5svh,62px) 0 clamp(44px,5.8svh,82px);}

@media (max-width:900px){
.renew-user-menu{gap:3px;}

.renew-user-menu .renew-menu-item{width:48px;
        min-height:52px;}

.renew-header-icon{width:25px;height:25px;}

.renew-login-button{min-width:64px;
        height:34px;
        padding:0 13px;
        font-size:13px;}

.renew-user-menu .renew-menu-item em{display:none;}

.renew-notice-dropdown{top:calc(100% + 4px);}
}

@media (max-width:640px){
.renew-user-menu{gap:1px;}

.renew-user-menu .renew-menu-item{width:36px;}

.logo span{display:none;}
}

:root{--renew-point:#d92f51;
    --renew-point-soft:rgba(217,47,81,.22);
    --hero-height:clamp(500px,60svh,680px);
    --service-height:clamp(220px,26svh,300px);}

.renew-main .main-search{display:none;}

.renew-main .hero{display:flex;
    flex-direction:column;
    justify-content:center;
    height:var(--hero-height);
    min-height:480px;}

.renew-main .hero-content{display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-top:clamp(48px,6svh,72px);
    padding-bottom:clamp(28px,4svh,48px);
    text-align:center;}

.renew-main .hero-content .hero-desc{margin:10px 0 0;}

.renew-main .main-service{min-height:var(--service-height);
    padding:clamp(28px,3.8svh,44px) 0 clamp(40px,5svh,64px);}

.renew-side-nav{position:fixed;
    left:auto;
    right:clamp(16px,1.6vw,28px);
    top:50%;
    z-index:120;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:16px;
    transform:translateY(-50%);
    pointer-events:none;}

.renew-side-nav a{position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:14px;
    height:14px;
    pointer-events:auto;}
.renew-side-nav a:focus-visible{
    outline:2px solid var(--renew-point,#D92F51);
    outline-offset:6px;
    border-radius:50%;
}
.logo a:focus-visible{
    outline:2px solid #fff;
    outline-offset:4px;
    border-radius:4px;
}

.renew-side-nav a .dot{position:relative;
    z-index:1;
    display:block;
    width:8px;
    height:8px;
    margin:3px;
    border-radius:50%;
    background:rgba(255,255,255,.88);
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
    transition:background .22s ease, transform .22s ease, box-shadow .22s ease;}

.renew-side-nav a .halo{position:absolute;
    left:50%;
    top:50%;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    opacity:0;
    transform:translate(-50%,-50%) scale(.7);
    transition:opacity .22s ease, transform .22s ease, background .22s ease;}

.renew-side-nav a .label{position:absolute;
    right:28px;
    left:auto;
    top:50%;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(20,25,35,.88);
    color:#fff;
    font-size:12px;
    font-weight:600;
    letter-spacing:-.03em;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(6px,-50%);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.16);}

.renew-side-nav a:hover .label,
.renew-side-nav a:focus-visible .label{opacity:1;
    visibility:visible;
    transform:translate(0,-50%);}

.renew-side-nav a.is-active .dot{background:var(--renew-point);
    box-shadow:none;
    transform:scale(1.05);}

.renew-side-nav a.is-active .halo{opacity:1;
    background:var(--renew-point-soft);
    transform:translate(-50%,-50%) scale(1);}

.renew-side-nav a:hover .dot,
.renew-side-nav a:focus-visible .dot{background:var(--renew-point);}

.renew-side-nav.is-light a:not(.is-active) .dot{background:rgba(32,36,58,.28);
    box-shadow:none;}

.renew-side-nav.is-light a.is-active .halo{background:rgba(217,47,81,.18);}

.renew-side-nav.is-light a .label{background:rgba(255,255,255,.96);
    color:#20243a;
    border:1px solid rgba(32,36,58,.08);}

@media (max-height:900px){
.renew-main{--hero-height:clamp(460px,56svh,620px);}
}

@media (max-height:800px){
.renew-main{--hero-height:clamp(420px,52svh,560px);}

.renew-main .hero-content{padding-top:clamp(40px,5svh,56px);
        padding-bottom:clamp(20px,3svh,36px);}

.renew-main .hero-content h2{font-size:clamp(36px,2.8vw,48px);}

.renew-main .main-service{padding-top:clamp(22px,3.2svh,36px);
        padding-bottom:clamp(32px,4.5svh,52px);}
}

@media (max-height:720px){
.renew-main{--hero-height:clamp(380px,48svh,500px);}

.renew-main .service-card-list a{max-height:clamp(160px,22svh,190px);}
}

@media (max-width:1100px){
.renew-side-nav{right:12px;left:auto;
        gap:14px;}

.renew-side-nav a .label{display:none;}
}

@media (max-width:768px){
.renew-side-nav{display:none;}
}

:root{--side-nav-top:50%;
    --section-screen-height:100svh;}

html{scroll-behavior:smooth;
    scroll-padding-top:0;}

#renewHero,
#renewMainService,
#renewDataMap,
#renewCulture,
#renewInfra{scroll-margin-top:0;}

@media (min-width:901px){
.renew-main{--hero-height:62svh;
        --service-height:38svh;}

.renew-main .hero{height:var(--hero-height);
        min-height:500px;
        max-height:690px;}

.renew-main .main-service{min-height:var(--service-height);
        padding:clamp(26px,3.2svh,42px) 0 clamp(34px,4.2svh,58px);}

.renew-main .data-map{min-height:max(760px,var(--section-screen-height));}
}

@media (min-width:901px) and (max-height:899px){
.renew-main{--hero-height:58svh;
        --service-height:42svh;}

.renew-main .hero{min-height:430px;
        max-height:590px;}

.renew-main .main-service{padding-top:22px;
        padding-bottom:34px;}
}

@media (min-width:901px) and (max-height:720px){
.renew-main{--hero-height:56svh;
        --service-height:44svh;}

.renew-main .hero{min-height:380px;
        max-height:500px;}
}

.renew-side-nav{top:var(--side-nav-top);
    left:clamp(18px,1.65vw,30px);
    gap:17px;
    transition:top .28s ease, transform .28s ease;}

.renew-side-nav.is-hero-position{top:calc(var(--hero-height) / 2);}

.renew-side-nav:not(.is-hero-position){top:50%;}

.renew-side-nav a{width:16px;
    height:16px;}

.renew-side-nav a .dot{width:8px;
    height:8px;
    margin:4px;}

.renew-side-nav a.is-active .dot{transform:scale(1.12);}

.renew-side-nav a.is-active .halo{width:24px;
    height:24px;}

.renew-main .data-map{padding:clamp(64px,7svh,92px) 0 clamp(78px,8svh,108px);}

.renew-main .data-map-inner{width:var(--content-width);
    max-width:calc(100% - 96px);
    grid-template-columns:minmax(320px,380px) minmax(0,1fr);
    gap:clamp(34px,4vw,68px);}

.renew-main .map-filter-box{width:100%;
    min-width:0;
    margin:0;
    padding:44px 0 58px;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:min(100%,350px);}

.renew-main .character-img{left:0;
    bottom:-26px;
    width:112px;
    max-width:28%;}

.renew-main .map-visual-box{width:100%;
    min-width:0;
    grid-template-columns:minmax(96px,112px) minmax(0,760px);
    justify-content:center;
    gap:clamp(14px,1.8vw,24px);
    padding:0;}

.renew-main .data-svg-map{width:100%;
    max-width:760px;
    min-width:0;}

.renew-main .map-legend{min-width:0;
    max-width:112px;}

@media (max-width:1500px){
.renew-main .data-map-inner{max-width:calc(100% - 72px);
        grid-template-columns:minmax(310px,350px) minmax(0,1fr);
        gap:32px;}

.renew-main .map-filter-box:before{left:-48px;
        font-size:64px;}

.renew-main .pin-img{right:12px;}

.renew-main .map-visual-box{grid-template-columns:100px minmax(0,680px);
        gap:16px;}

.renew-main .circle-text{right:-34px;}
}

@media (max-width:1280px){
.renew-main .data-map-inner{max-width:calc(100% - 64px);
        grid-template-columns:minmax(300px,330px) minmax(0,1fr);
        gap:26px;}

.renew-main .map-visual-box{grid-template-columns:minmax(0,1fr);
        grid-template-rows:auto auto;
        justify-items:center;
        gap:18px;}

.renew-main .data-svg-map{grid-column:1;
        grid-row:1;
        width:min(100%,650px);}

.renew-main .map-legend{grid-column:1;
        grid-row:2;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        width:auto;
        max-width:100%;
        padding:12px 15px;
        gap:9px 14px;}

.renew-main .map-legend li,
.renew-main .map-legend li + li{margin:0;}

.renew-main .circle-deco,
.renew-main .circle-text{display:none;}
}

@media (max-width:1040px){
.renew-main .data-map{min-height:auto;
        padding:70px 0 82px;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:1fr;
        gap:34px;
        width:calc(100% - 64px);
        max-width:none;}

.renew-main .data-map-bg{top:30px;
        width:calc(100% - 32px);
        height:560px;
        border-radius:0 32px 32px 0;}

.renew-main .map-filter-box{width:min(100%,560px);
        min-height:auto;
        margin:0 auto;
        padding:42px 42px 76px;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:100%;
        max-width:none;}

.renew-main .character-img{left:18px;
        bottom:-18px;
        width:98px;
        max-width:none;}

.renew-main .map-visual-box{width:100%;
        min-height:auto;
        padding-top:8px;}

.renew-main .data-svg-map{width:min(100%,760px);}
}

@media (max-width:900px){
.renew-main .hero{min-height:440px;}

.renew-main .main-service{min-height:auto;}

.renew-main .data-map-inner{width:calc(100% - 40px);}

.renew-main .data-map-bg{top:20px;
        width:calc(100% - 16px);
        height:540px;}

.renew-main .map-filter-box{width:100%;
        padding:38px 28px 76px;}

.renew-main .map-filter-box:before{left:-18px;
        top:70px;
        font-size:54px;}

.renew-main .pin-img{right:24px;
        top:36px;
        width:48px;}

.renew-main .character-img{left:8px;
        bottom:-14px;
        width:88px;}

.renew-main .map-legend{width:100%;
        max-width:620px;}
}

@media (max-width:640px){
.renew-main .data-map{padding:54px 0 66px;}

.renew-main .data-map-inner{width:calc(100% - 28px);
        gap:28px;}

.renew-main .data-map-bg{width:calc(100% - 8px);
        height:520px;
        border-radius:0 24px 24px 0;}

.renew-main .map-filter-box{padding:34px 20px 72px;}

.renew-main .map-filter-box:before{display:none;}

.renew-main .pin-img{right:18px;
        top:32px;
        width:42px;}

.renew-main .filter-area strong{margin-top:30px;}

.renew-main .chip-list{grid-template-columns:repeat(2,minmax(0,1fr));}

.renew-main .select-area{align-items:stretch;
        flex-direction:column;
        gap:7px;}

.renew-main .select-area label{width:auto;}

.renew-main .select-area select,
.renew-main .map-search-btn{width:100%;}

.renew-main .character-img{left:2px;
        width:78px;}

.renew-main .map-legend{justify-content:flex-start;
        padding:11px 12px;
        gap:8px 12px;}
}

.scroll-guide,
.scroll-down,
.hero-scroll,
.hero-scroll-guide,
.scroll-indicator,
.scroll-txt{display:none;}

.renew-side-nav{top:calc(var(--hero-height) / 2);
    transform:translateY(-50%);}

.renew-side-nav.is-light,
.renew-side-nav:not(.is-hero-position).is-light{top:50%;}

.renew-side-nav.is-hero-position{top:calc(var(--hero-height) / 2);}

@media (min-width:1200px) and (max-width:1399px){
.renew-main .service-inner{gap:32px;}

.renew-main .section-title.left{flex-basis:200px;
        width:200px;}

.renew-main .service-card-list{gap:18px;}

.renew-main .service-card-list a{max-height:205px;}

.renew-main .hover-box{padding:16px 12px 14px;}

.renew-main .hover-icon{width:32px;
        height:32px;
        margin-bottom:7px;}

.renew-main .hover-box strong{margin-bottom:7px;
        font-size:16px;}

.renew-main .hover-line{width:30px;
        margin-bottom:8px;}

.renew-main .hover-box p{font-size:11px;
        line-height:1.4;}

.renew-main .hover-box .arrow{right:10px;
        top:10px;
        width:27px;
        height:27px;
        font-size:17px;}
}

@media (max-width:1199px){
.renew-main .main-service{min-height:auto;
        padding:64px 0 78px;}

.renew-main .service-inner{display:block;
        width:min(760px, calc(100% - 64px));
        max-width:none;
        margin:0 auto;}

.renew-main .section-title.left{width:100%;
        margin:0 0 38px;
        text-align:center;}

.renew-main .section-title.left p br{display:none;}

.renew-main .service-card-list{width:min(620px, 100%);
        margin:0 auto;
        padding:0;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:28px;}

.renew-main .service-card-list li,
.renew-main .service-card-list li:nth-child(1),
.renew-main .service-card-list li:nth-child(2),
.renew-main .service-card-list li:nth-child(3),
.renew-main .service-card-list li:nth-child(4){transform:none;}

.renew-main .service-card-list a{width:100%;
        max-height:none;
        border-radius:18px;}

.renew-main .hover-box{padding:20px 16px 18px;}

.renew-main .hover-icon{width:38px;
        height:38px;
        margin-bottom:9px;}

.renew-main .hover-box strong{margin-bottom:8px;
        font-size:18px;}

.renew-main .hover-line{margin-bottom:10px;}

.renew-main .hover-box p{font-size:12px;
        line-height:1.45;}

.renew-main .hover-box .arrow{right:12px;
        top:12px;
        width:30px;
        height:30px;
        font-size:18px;}
}

@media (min-width:901px) and (max-width:1100px){
.renew-side-nav{right:14px;left:auto;
        top:calc(var(--hero-height) / 2);}

.renew-side-nav.is-light{top:50%;}
}

@media (max-width:900px){
.renew-main .main-service{padding:58px 0 70px;}

.renew-main .service-inner{width:min(680px, calc(100% - 48px));}

.renew-main .section-title.left{margin-bottom:34px;}

.renew-main .section-title.left span{font-size:13px;}

.renew-main .section-title.left h2{margin-top:5px;
        font-size:clamp(32px,5.5vw,40px);}

.renew-main .section-title.left p{font-size:14px;}

.renew-main .service-card-list{gap:24px;}
}

@media (max-width:640px){
.renew-main .main-service{padding:48px 0 60px;}

.renew-main .service-inner{width:calc(100% - 40px);}
.renew-main .main-service > .ai-credit{max-width:calc(100% - 40px);width:calc(100% - 40px);}

.renew-main .section-title.left{margin-bottom:30px;}

.renew-main .section-title.left span{font-size:12px;}

.renew-main .section-title.left h2{margin:4px 0 12px;
        font-size:32px;}

.renew-main .section-title.left p{font-size:13px;
        line-height:1.65;}

.renew-main .service-card-list{gap:18px;}

.renew-main .service-card-list a{border-radius:16px;
        box-shadow:0 12px 24px rgba(31,55,90,.13);}

.renew-main .hover-box{padding:14px 10px 12px;}

.renew-main .hover-icon{width:29px;
        height:29px;
        margin-bottom:6px;}

.renew-main .hover-box strong{margin-bottom:6px;
        font-size:15px;
        line-height:1.15;}

.renew-main .hover-line{width:26px;
        height:1px;
        margin-bottom:7px;}

.renew-main .hover-box p{font-size:10px;
        line-height:1.35;}

.renew-main .hover-box .arrow{right:8px;
        top:8px;
        width:25px;
        height:25px;
        font-size:15px;}
}

@media (max-width:420px){
.renew-main .service-inner{width:calc(100% - 28px);}

.renew-main .service-card-list{gap:14px;}

.renew-main .hover-box{padding:11px 7px 9px;}

.renew-main .hover-icon{width:25px;
        height:25px;
        margin-bottom:4px;}

.renew-main .hover-box strong{font-size:13px;
        margin-bottom:4px;}

.renew-main .hover-line{width:22px;
        margin-bottom:5px;}

.renew-main .hover-box p{font-size:9px;}

.renew-main .hover-box .arrow{right:6px;
        top:6px;
        width:22px;
        height:22px;
        font-size:14px;}
}

@media (hover:none){
.renew-main .service-card-list a:hover{transform:none;}

.renew-main .service-card-list a:hover .thumb{transform:none;}
}

.renew-side-nav{top:50%;
    transform:translateY(-50%);}

.renew-side-nav:has(a[data-target="renewHero"].is-active),
.renew-side-nav:has(a[href="#renewHero"].is-active),
.renew-side-nav.is-hero-position{top:calc(var(--hero-height) / 2);}

@media (min-width:901px) and (max-height:899px){
.renew-side-nav:has(a[data-target="renewHero"].is-active),
.renew-side-nav:has(a[href="#renewHero"].is-active),
.renew-side-nav.is-hero-position{top:29svh;}
}

@media (min-width:901px) and (max-height:720px){
.renew-side-nav:has(a[data-target="renewHero"].is-active),
.renew-side-nav:has(a[href="#renewHero"].is-active),
.renew-side-nav.is-hero-position{top:28svh;}
}

@media (min-width:769px) and (max-width:1199px){
.renew-main .main-service{min-height:auto;
        padding:48px 0 62px;}

.renew-main .service-inner{display:flex;
        align-items:center;
        justify-content:space-between;
        width:calc(100% - 64px);
        max-width:none;
        gap:clamp(20px,3vw,34px);
        margin:0 auto;}

.renew-main .section-title.left{flex:0 0 clamp(150px,17vw,190px);
        width:auto;
        margin:0;
        text-align:left;}

.renew-main .section-title.left span{font-size:12px;}

.renew-main .section-title.left h2{margin:5px 0 12px;
        font-size:clamp(30px,3.4vw,38px);}

.renew-main .section-title.left p{font-size:13px;
        line-height:1.65;}

.renew-main .section-title.left p br{display:block;}

.renew-main .service-card-list{flex:1;
        width:auto;
        margin:0;
        padding:14px 0 20px;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:clamp(12px,1.7vw,20px);}

.renew-main .service-card-list li:nth-child(1),
.renew-main .service-card-list li:nth-child(3){transform:translateY(-8px);}

.renew-main .service-card-list li:nth-child(2),
.renew-main .service-card-list li:nth-child(4){transform:translateY(10px);}

.renew-main .service-card-list a{width:100%;
        max-height:none;
        aspect-ratio:1.08 / 1;
        border-radius:16px;}

.renew-main .hover-box{padding:13px 10px 12px;}

.renew-main .hover-icon{width:clamp(24px,3vw,32px);
        height:clamp(24px,3vw,32px);
        margin-bottom:6px;}

.renew-main .hover-box strong{margin-bottom:6px;
        font-size:clamp(13px,1.55vw,16px);
        line-height:1.15;}

.renew-main .hover-line{width:28px;
        height:1px;
        margin-bottom:7px;}

.renew-main .hover-box p{font-size:clamp(9px,1.05vw,11px);
        line-height:1.35;}

.renew-main .hover-box .arrow{right:8px;
        top:8px;
        width:25px;
        height:25px;
        font-size:15px;}
}

@media (min-width:769px) and (max-width:900px){
.renew-main .service-inner{display:flex;}

.renew-main .service-card-list{grid-template-columns:repeat(4,minmax(0,1fr));}

.renew-main .section-title.left{margin-bottom:0;}
}

@media (max-width:768px){
.renew-main .main-service{min-height:auto;
        padding:52px 0 66px;}

.renew-main .service-inner{display:block;
        width:min(620px,calc(100% - 40px));
        max-width:none;
        margin:0 auto;}

.renew-main .section-title.left{width:100%;
        margin:0 0 32px;
        text-align:center;}

.renew-main .section-title.left p br{display:none;}

.renew-main .service-card-list{width:min(560px,100%);
        margin:0 auto;
        padding:0;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;}

.renew-main .service-card-list li,
.renew-main .service-card-list li:nth-child(1),
.renew-main .service-card-list li:nth-child(2),
.renew-main .service-card-list li:nth-child(3),
.renew-main .service-card-list li:nth-child(4){transform:none;}

.renew-main .service-card-list a{width:100%;
        max-height:none;
        aspect-ratio:1 / 1;
        border-radius:17px;}

.renew-main .hover-box{padding:16px 12px 14px;}

.renew-main .hover-icon{width:32px;
        height:32px;
        margin-bottom:7px;}

.renew-main .hover-box strong{margin-bottom:6px;
        font-size:16px;}

.renew-main .hover-line{width:28px;
        margin-bottom:7px;}

.renew-main .hover-box p{font-size:11px;
        line-height:1.35;}

.renew-main .hover-box .arrow{right:9px;
        top:9px;
        width:26px;
        height:26px;
        font-size:16px;}
}

@media (max-width:640px){
.renew-main .hero{min-height:400px;
        height:clamp(400px,58svh,500px);}

.renew-main .renew-header{top:10px;
        padding-top:0;}

.renew-main .renew-header .inner,
.renew-main .renew-header-inner{width:calc(100% - 28px);
        max-width:none;}

.renew-main .logo a{gap:9px;}

.renew-main .logo img{width:92px;}

.renew-main .logo span{display:block;
        font-size:18px;
        line-height:1.15;
        letter-spacing:-.05em;}

.renew-main .hero-content{padding:48px 18px 24px;}

.renew-main .hero-kicker{font-size:14px;}

.renew-main .hero-content h2{max-width:360px;
        margin-top:4px;
        font-size:clamp(27px,7.8vw,34px);
        line-height:1.18;
        letter-spacing:-.055em;
        word-break:keep-all;}

.renew-main .hero-content .hero-desc{max-width:330px;
        margin-top:9px;
        font-size:13px;
        line-height:1.55;
        word-break:keep-all;}

.renew-main .section-title.left span{font-size:12px;}

.renew-main .section-title.left h2{font-size:30px;}

.renew-main .section-title.left p{font-size:13px;}

.renew-main .service-card-list{gap:16px;}

.renew-main .hover-box{padding:12px 8px 10px;}

.renew-main .hover-icon{width:26px;
        height:26px;
        margin-bottom:5px;}

.renew-main .hover-box strong{margin-bottom:4px;
        font-size:14px;}

.renew-main .hover-line{width:22px;
        height:1px;
        margin-bottom:5px;}

.renew-main .hover-box p{font-size:9px;}

.renew-main .hover-box .arrow{right:6px;
        top:6px;
        width:22px;
        height:22px;
        font-size:14px;}
}

@media (max-width:420px){
.renew-main .logo img{width:82px;}

.renew-main .logo span{font-size:16px;}

.renew-main .hero-kicker{font-size:13px;}

.renew-main .hero-content h2{max-width:330px;
        font-size:clamp(25px,7.4vw,30px);}

.renew-main .hero-content .hero-desc{max-width:300px;
        font-size:12px;}

.renew-main .service-inner{width:calc(100% - 28px);}

.renew-main .service-card-list{gap:14px;}
}

#renewMainService{scroll-margin-top:calc((100svh - var(--service-height)) / 2);}

@media (min-width:769px){
#renewMainService{scroll-margin-top:clamp(80px,18svh,180px);}
}

@media (max-width:768px){
#renewMainService{scroll-margin-top:clamp(42px,9svh,82px);}
}

@media (max-width:640px){
.renew-main{--hero-height:clamp(360px,52svh,440px);}

.renew-main .hero{height:var(--hero-height);
        min-height:360px;
        max-height:440px;}

.renew-main .renew-header{top:8px;
        padding-top:0;}

.renew-main .renew-header .inner,
.renew-main .renew-header-inner{width:calc(100% - 24px);
        max-width:none;}

.renew-main .logo a{gap:0;}

.renew-main .logo img{width:88px;}

.renew-main .logo span{display:none;}

.renew-main .hero-content{width:100%;
        padding:42px 12px 18px;}

.renew-main .hero-kicker{font-size:13px;
        line-height:1.2;}

.renew-main .hero-content h2{width:auto;
        max-width:calc(100% - 24px);
        margin-top:5px;
        font-size:clamp(20px,5.6vw,27px);
        line-height:1.15;
        letter-spacing:-.07em;
        white-space:nowrap;
        word-break:normal;}

.renew-main .hero-content .hero-desc{max-width:calc(100% - 38px);
        margin-top:8px;
        font-size:11px;
        line-height:1.45;
        white-space:nowrap;}

.renew-main .hero-video{object-position:center center;}
}

@media (min-width:500px) and (max-width:640px){
.renew-main .hero-content h2{font-size:clamp(23px,4.9vw,27px);}

.renew-main .hero-content .hero-desc{font-size:12px;}
}

@media (max-width:390px){
.renew-main{--hero-height:clamp(350px,50svh,410px);}

.renew-main .hero{min-height:350px;
        max-height:410px;}

.renew-main .logo img{width:80px;}

.renew-main .hero-content{padding-left:8px;
        padding-right:8px;}

.renew-main .hero-content h2{max-width:calc(100% - 12px);
        font-size:clamp(18px,5.35vw,22px);
        letter-spacing:-.075em;}

.renew-main .hero-content .hero-desc{max-width:calc(100% - 16px);
        font-size:10px;}
}

@media (min-width:901px){
.renew-main .main-service{scroll-margin-top:clamp(90px,18svh,170px);}
}

.renew-side-nav:has(a[href="#renewHero"].is-active),
.renew-side-nav:has(a[data-target="renewHero"].is-active),
.renew-side-nav.is-hero-position{top:calc(var(--hero-height) / 2);}

.renew-side-nav:has(a[href="#renewMainService"].is-active),
.renew-side-nav:has(a[data-target="renewMainService"].is-active){top:50%;}

.renew-side-nav:not(.is-light){top:calc(var(--hero-height) / 2);
    transform:translateY(-50%);}

.renew-side-nav.is-light,
.renew-side-nav.is-light.is-hero-position,
.renew-side-nav.is-light:has(a[href="#renewMainService"].is-active),
.renew-side-nav.is-light:has(a[data-target="renewMainService"].is-active){top:50%;
    transform:translateY(-50%);}

.renew-side-nav.is-hero-position:has(a[href="#renewMainService"].is-active),
.renew-side-nav.is-hero-position:has(a[data-target="renewMainService"].is-active){top:50%;}

@media (min-width:1921px){
:root{--content-width:1680px;
        --header-width:1760px;}

.inner,
.service-inner{width:var(--content-width);
        max-width:calc(100% - 120px);}

.main-service > .ai-credit{max-width:calc(100% - 120px);}

.renew-header .inner,
.renew-header-inner{width:var(--header-width);
        max-width:calc(100% - 120px);}

.renew-main .service-inner{gap:64px;}

.renew-main .section-title.left{flex-basis:240px;
        width:240px;}

.renew-main .service-card-list{gap:34px;}

.renew-main .service-card-list a{max-height:250px;}

.renew-main .data-map-inner{max-width:calc(100% - 120px);
        grid-template-columns:390px minmax(0,1fr);
        gap:72px;}

.renew-main .map-visual-box{grid-template-columns:112px minmax(0,820px);}

.renew-main .data-svg-map{max-width:820px;}
}

@media (min-width:2300px){
:root{--content-width:1820px;
        --header-width:1900px;}

.renew-main{--service-height:clamp(340px,34svh,420px);}

.renew-main .service-card-list a{max-height:300px;}

.renew-main #renewMainService .service-card-list > li > a{
    height:clamp(260px,11.7vw,300px);
    max-height:300px;
}

.renew-main .section-title.left{flex-basis:260px;
        width:260px;}
}

@media (min-width:641px) and (max-width:900px){
.renew-main{--hero-height:clamp(430px,54svh,520px);}

.renew-main .hero{height:var(--hero-height);
        min-height:430px;
        max-height:520px;}

.renew-main .renew-header{top:10px;
        padding-top:0;}

.renew-main .renew-header .inner,
.renew-main .renew-header-inner{width:calc(100% - 34px);
        max-width:none;}

.renew-main .logo img{width:108px;}

.renew-main .logo span{display:none;}

.renew-main .hero-content{width:100%;
        padding:58px 28px 28px;}

.renew-main .hero-kicker{font-size:16px;}

.renew-main .hero-content h2{max-width:calc(100% - 40px);
        margin-top:7px;
        font-size:clamp(34px,5.2vw,44px);
        line-height:1.12;
        letter-spacing:-.06em;
        white-space:nowrap;}

.renew-main .hero-content .hero-desc{margin-top:10px;
        font-size:14px;}

.renew-main .hero-video{object-position:center 48%;}
}

@media (max-width:640px){
.renew-main{--hero-height:clamp(320px,46svh,390px);}

.renew-main .hero{height:var(--hero-height);
        min-height:320px;
        max-height:390px;}

.renew-main .renew-header{top:7px;}

.renew-main .renew-header .inner,
.renew-main .renew-header-inner{width:calc(100% - 22px);}

.renew-main .logo img{width:78px;}

.renew-main .logo span{display:none;}

.renew-main .hero-content{padding:36px 10px 14px;}

.renew-main .hero-kicker{font-size:12px;}

.renew-main .hero-content h2{max-width:calc(100% - 16px);
        margin-top:4px;
        font-size:clamp(18px,5.2vw,24px);
        line-height:1.1;
        letter-spacing:-.075em;
        white-space:nowrap;}

.renew-main .hero-content .hero-desc{max-width:calc(100% - 22px);
        margin-top:7px;
        font-size:10px;
        line-height:1.4;
        white-space:nowrap;}

.renew-main .hero-video{object-position:center 48%;}

.renew-main .main-service{padding-top:44px;
        padding-bottom:56px;}
}

@media (max-width:390px){
.renew-main{--hero-height:clamp(300px,44svh,360px);}

.renew-main .hero{min-height:300px;
        max-height:360px;}

.renew-main .logo img{width:72px;}

.renew-main .hero-content h2{font-size:clamp(17px,5vw,21px);}

.renew-main .hero-content .hero-desc{font-size:9px;}
}

@media (min-width:641px) and (max-width:900px){
.renew-main{--hero-height:clamp(380px,49svh,470px);}

.renew-main .hero{height:var(--hero-height);
        min-height:380px;
        max-height:470px;}

.renew-main .hero-content{padding-top:48px;
        padding-bottom:22px;}

.renew-main .hero-video{object-position:center 50%;}
}

@media (max-width:640px){
.renew-main{--hero-height:clamp(280px,40svh,340px);}

.renew-main .hero{height:var(--hero-height);
        min-height:280px;
        max-height:340px;}

.renew-main .renew-header{top:6px;}

.renew-main .logo img{width:76px;}

.renew-main .hero-content{padding:30px 8px 12px;}

.renew-main .hero-kicker{font-size:13px;}

.renew-main .hero-content h2{max-width:calc(100% - 12px);
        margin-top:4px;
        font-size:clamp(20px,5.8vw,27px);
        line-height:1.08;
        letter-spacing:-.075em;
        white-space:nowrap;}

.renew-main .hero-content .hero-desc{max-width:calc(100% - 14px);
        margin-top:6px;
        font-size:10px;
        line-height:1.35;
        white-space:nowrap;}

.renew-main .hero-video{object-position:center 50%;}
}

@media (max-width:390px){
.renew-main{--hero-height:clamp(265px,39svh,320px);}

.renew-main .hero{min-height:265px;
        max-height:320px;}

.renew-main .logo img{width:70px;}

.renew-main .hero-content h2{font-size:clamp(19px,5.6vw,24px);}
}

@media (min-width:1041px){
.renew-main .data-map{overflow:hidden;}

.renew-main .data-map-inner{width:var(--content-width);
        max-width:calc(100% - 120px);
        grid-template-columns:minmax(350px,390px) minmax(0,1fr);
        gap:clamp(42px,4.5vw,74px);}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:52px;
        width:calc(
            (100% - min(var(--content-width), calc(100% - 120px))) / 2
            + 430px
        );
        min-width:500px;
        height:calc(100% - 170px);
        transform:none;
        border-radius:0 34px 34px 0;}

.renew-main .map-filter-box{width:100%;
        min-height:540px;
        padding:48px 0 62px;}

.renew-main .map-filter-box:before{left:-48px;
        top:62px;
        font-size:68px;}

.renew-main .pin-img{right:20px;
        top:44px;}

.renew-main .character-img{left:-36px;
        bottom:-34px;
        width:134px;
        max-width:none;
        z-index:4;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:min(100%,350px);}
}

@media (min-width:1501px) and (max-width:1919px){
.renew-main .data-map-inner{max-width:calc(100% - 150px);
        grid-template-columns:380px minmax(0,1fr);
        gap:58px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width), calc(100% - 150px))) / 2
            + 455px
        );
        min-width:560px;}

.renew-main .map-filter-box:before{left:-54px;}

.renew-main .character-img{left:-42px;
        width:140px;}
}

@media (min-width:1920px){
.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width), calc(100% - 160px))) / 2
            + 470px
        );
        min-width:620px;
        max-width:760px;}

.renew-main .data-map-inner{max-width:calc(100% - 160px);
        grid-template-columns:390px minmax(0,1fr);
        gap:72px;}

.renew-main .character-img{left:-46px;
        width:144px;}
}

@media (min-width:1041px) and (max-width:1500px){
.renew-main .data-map-inner{max-width:calc(100% - 96px);
        grid-template-columns:minmax(330px,360px) minmax(0,1fr);
        gap:32px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width), calc(100% - 96px))) / 2
            + 410px
        );
        min-width:470px;}

.renew-main .map-filter-box:before{left:-34px;
        font-size:60px;}

.renew-main .character-img{left:-22px;
        bottom:-30px;
        width:126px;}

.renew-main .pin-img{right:8px;}
}

@media (max-width:1040px){
.renew-main .character-img{left:12px;
        bottom:-24px;
        width:104px;}
}

@media (max-width:640px){
.renew-main .character-img{left:6px;
        bottom:-18px;
        width:86px;}
}

#renewMainService{scroll-margin-top:clamp(40px,8svh,90px);}

#renewDataMap{scroll-margin-top:clamp(24px,5svh,56px);}

.renew-side-nav:has(a[href="#renewMainService"].is-active),
.renew-side-nav:has(a[data-target="renewMainService"].is-active){top:42%;
    transform:translateY(-50%);}

.renew-side-nav:has(a[href="#renewDataMap"].is-active),
.renew-side-nav:has(a[data-target="renewDataMap"].is-active){top:50%;
    transform:translateY(-50%);}

.renew-main .select-area select{-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-right:42px;
    background-color:#fff;
    background-image:
        linear-gradient(45deg, transparent 50%, #666 50%),
        linear-gradient(135deg, #666 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;}

@media (min-width:1041px){
.renew-main .data-map{min-height:clamp(720px,84svh,900px);
        padding:clamp(54px,6svh,72px) 0 clamp(72px,8svh,96px);}

.renew-main .data-map-inner{width:var(--content-width);
        max-width:calc(100% - 128px);
        grid-template-columns:minmax(350px,390px) minmax(0,1fr);
        gap:clamp(48px,5vw,80px);}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:50px;
        width:calc(
            (100% - min(var(--content-width), calc(100% - 128px))) / 2
            + 500px
        );
        min-width:540px;
        height:calc(100% - 150px);
        transform:none;
        border-radius:0 34px 34px 0;}

.renew-main .map-filter-box{width:100%;
        min-height:520px;
        padding:44px 0 58px;}

.renew-main .map-filter-box:before{left:-40px;
        top:58px;
        font-size:62px;}

.renew-main .character-img{left:-36px;
        bottom:-34px;
        width:138px;
        max-width:none;}

.renew-main .map-visual-box{position:relative;
        display:block;
        min-height:560px;
        padding:0 24px 64px 0;}

.renew-main .data-svg-map{width:min(100%,760px);
        max-width:760px;
        margin:0 auto;}

.renew-main .map-legend{position:absolute;
        right:24px;
        bottom:18px;
        left:auto;
        top:auto;
        width:auto;
        max-width:none;
        display:flex;
        flex-wrap:nowrap;
        gap:10px 14px;
        margin:0;
        padding:12px 16px;}

.renew-main .map-legend li,
.renew-main .map-legend li + li{margin:0;}
}

@media (min-width:1501px) and (max-width:1919px){
.renew-main .data-map-inner{max-width:calc(100% - 160px);
        grid-template-columns:380px minmax(0,1fr);
        gap:64px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width), calc(100% - 160px))) / 2
            + 520px
        );
        min-width:600px;}

.renew-main .map-filter-box:before{left:-48px;}
}

@media (min-width:1920px){
.renew-main .data-map-inner{max-width:calc(100% - 180px);
        grid-template-columns:400px minmax(0,1fr);
        gap:78px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width), calc(100% - 180px))) / 2
            + 560px
        );
        min-width:680px;
        max-width:1000px;}

.renew-main .map-filter-box:before{left:-54px;}

.renew-main .character-img{left:-44px;
        width:146px;}

.renew-main .data-svg-map{max-width:820px;
        width:min(100%,820px);}

.renew-main .map-legend{right:34px;
        bottom:22px;}
}

@media (min-width:1281px) and (max-width:1500px){
.renew-main .data-map-inner{max-width:calc(100% - 120px);
        grid-template-columns:350px minmax(0,1fr);
        gap:38px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width), calc(100% - 120px))) / 2
            + 460px
        );
        min-width:520px;}

.renew-main .map-filter-box:before{left:-30px;
        font-size:56px;}

.renew-main .character-img{left:-24px;
        width:130px;}

.renew-main .data-svg-map{width:min(100%,680px);
        max-width:680px;}
}

@media (min-width:1041px) and (max-width:1280px){
.renew-main .data-map-inner{max-width:calc(100% - 96px);
        grid-template-columns:330px minmax(0,1fr);
        gap:30px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width), calc(100% - 96px))) / 2
            + 430px
        );
        min-width:490px;}

.renew-main .map-filter-box:before{left:-22px;
        font-size:52px;}

.renew-main .character-img{left:-16px;
        width:122px;}

.renew-main .data-svg-map{width:min(100%,610px);
        max-width:610px;}

.renew-main .map-legend{right:12px;
        bottom:10px;
        padding:10px 12px;
        gap:8px 10px;}

.renew-main .map-legend li{font-size:11px;}
}

@media (max-width:1040px){
.renew-main .data-map{min-height:auto;
        padding:40px 0 62px;
        display:block;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:1fr;
        width:100%;
        max-width:none;
        gap:26px;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:0;
        width:100%;
        height:500px;
        transform:none;
        border-radius:0 0 28px 28px;}

.renew-main .map-filter-box{width:min(760px,calc(100% - 64px));
        min-height:auto;
        margin:0 auto;
        padding:38px 42px 74px;
        text-align:center;}

.renew-main .map-filter-box > span{text-align:center;}

.renew-main .map-filter-box h2{display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:12px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;}

.renew-main .map-filter-box p{text-align:center;}

.renew-main .map-filter-box:before{left:16px;
        top:74px;
        font-size:54px;}

.renew-main .pin-img{position:static;
        display:inline-block;
        width:44px;
        margin:0 0 0 10px;
        vertical-align:middle;
        transform:translateY(-3px);}

.renew-main .filter-area,
.renew-main .select-area,
.renew-main .map-search-btn{margin-left:auto;
        margin-right:auto;
        text-align:left;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:100%;
        max-width:560px;}

.renew-main .character-img{left:18px;
        bottom:-26px;
        width:104px;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:100%;
        min-height:auto;
        padding:18px 32px 74px;}

.renew-main .data-svg-map{width:min(100%,760px);
        max-width:760px;
        margin:0 auto;}

.renew-main .map-legend{position:absolute;
        left:50%;
        right:auto;
        bottom:14px;
        top:auto;
        width:max-content;
        max-width:calc(100% - 40px);
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:8px 12px;
        margin:0;
        padding:10px 13px;
        transform:translateX(-50%);}

.renew-main .map-legend li,
.renew-main .map-legend li + li{margin:0;}
}

@media (max-width:640px){
.renew-main .data-map{padding:28px 0 48px;}

.renew-main .data-map-bg{height:450px;
        border-radius:0 0 22px 22px;}

.renew-main .map-filter-box{width:calc(100% - 28px);
        padding:30px 18px 66px;}

.renew-main .map-filter-box h2{gap:8px;
        font-size:30px;}

.renew-main .pin-img{width:36px;
        margin-left:6px;}

.renew-main .map-filter-box p{font-size:13px;}

.renew-main .map-filter-box:before{display:none;}

.renew-main .character-img{left:8px;
        bottom:-20px;
        width:88px;}

.renew-main .map-visual-box{padding:12px 14px 68px;}

.renew-main .map-legend{bottom:10px;
        max-width:calc(100% - 24px);
        padding:9px 10px;
        gap:7px 10px;}

.renew-main .map-legend li{font-size:10px;}

.renew-main .legend-color{width:14px;
        height:14px;}
}

.renew-side-nav:has(a[href="#renewMainService"].is-active),
.renew-side-nav:has(a[data-target="renewMainService"].is-active){top:34%;
    transform:translateY(-50%);}

.renew-side-nav:has(a[href="#renewDataMap"].is-active),
.renew-side-nav:has(a[data-target="renewDataMap"].is-active){top:50%;
    transform:translateY(-50%);}

#renewMainService{scroll-margin-top:0;}

.renew-main .select-area select{-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-right:40px;
    background-color:#fff;
    background-image:
        linear-gradient(45deg,transparent 50%,#666 50%),
        linear-gradient(135deg,#666 50%,transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;}

@media (min-width:1041px){
.renew-main .data-map{min-height:clamp(720px,84svh,900px);
        padding:clamp(54px,6svh,72px) 0 clamp(72px,8svh,96px);}

.renew-main .data-map-inner{width:var(--content-width);
        max-width:calc(100% - 116px);
        grid-template-columns:minmax(350px,390px) minmax(0,1fr);
        gap:clamp(42px,4.4vw,74px);}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:50px;
        width:calc(
            (100% - min(var(--content-width),calc(100% - 116px))) / 2
            + 500px
        );
        min-width:535px;
        height:calc(100% - 150px);
        transform:none;
        border-radius:0 34px 34px 0;}

.renew-main .map-filter-box{width:100%;
        min-height:520px;
        padding:44px 0 58px;}

.renew-main .map-filter-box:before{left:-58px;
        top:58px;
        font-size:64px;}

.renew-main .character-img{left:-48px;
        bottom:-34px;
        width:140px;
        max-width:none;
        z-index:4;}

.renew-main .map-visual-box{position:relative;
        display:grid;
        grid-template-columns:112px minmax(0,760px);
        align-items:center;
        justify-content:center;
        gap:22px;
        min-height:560px;
        padding:0 12px 0 0;}

.renew-main .data-svg-map{grid-column:2;
        grid-row:1;
        width:100%;
        max-width:760px;
        margin:0;}

.renew-main .map-legend{position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        grid-column:1;
        grid-row:1;
        width:112px;
        max-width:112px;
        display:block;
        margin:0;
        padding:14px 16px;
        transform:none;}

.renew-main .map-legend li{display:flex;
        align-items:center;
        gap:10px;
        font-size:13px;
        white-space:nowrap;}

.renew-main .map-legend li + li{margin-top:10px;}
}

@media (min-width:1920px){
.renew-main .data-map-inner{max-width:calc(100% - 180px);
        grid-template-columns:400px minmax(0,1fr);
        gap:76px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 180px))) / 2
            + 575px
        );
        min-width:700px;
        max-width:1000px;}

.renew-main .map-filter-box:before{left:-72px;}

.renew-main .character-img{left:-62px;
        width:148px;}

.renew-main .map-visual-box{grid-template-columns:116px minmax(0,820px);
        gap:26px;}

.renew-main .data-svg-map{max-width:820px;}

.renew-main .map-legend{width:116px;
        max-width:116px;}
}

@media (min-width:1501px) and (max-width:1919px){
.renew-main .data-map-inner{max-width:calc(100% - 144px);
        grid-template-columns:380px minmax(0,1fr);
        gap:58px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 144px))) / 2
            + 520px
        );
        min-width:600px;}

.renew-main .map-filter-box:before{left:-62px;}

.renew-main .character-img{left:-52px;
        width:144px;}

.renew-main .map-visual-box{grid-template-columns:110px minmax(0,720px);}

.renew-main .data-svg-map{max-width:720px;}
}

@media (min-width:1281px) and (max-width:1500px){
.renew-main .data-map-inner{max-width:calc(100% - 96px);
        grid-template-columns:350px minmax(0,1fr);
        gap:34px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 96px))) / 2
            + 455px
        );
        min-width:510px;}

.renew-main .map-filter-box:before{left:-38px;
        font-size:56px;}

.renew-main .character-img{left:-28px;
        width:130px;}

.renew-main .map-visual-box{grid-template-columns:102px minmax(0,650px);
        gap:18px;
        justify-content:center;}

.renew-main .data-svg-map{max-width:650px;}

.renew-main .map-legend{width:102px;
        max-width:102px;
        padding:12px 13px;}

.renew-main .map-legend li{font-size:12px;
        gap:8px;}

.renew-main .legend-color{width:16px;
        height:16px;}
}

@media (min-width:1041px) and (max-width:1280px){
.renew-main .data-map-inner{max-width:calc(100% - 88px);
        grid-template-columns:320px minmax(0,1fr);
        gap:28px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 88px))) / 2
            + 405px
        );
        min-width:465px;}

.renew-main .map-filter-box:before{left:-22px;
        font-size:50px;}

.renew-main .character-img{left:-18px;
        width:120px;}

.renew-main .map-visual-box{grid-template-columns:94px minmax(0,540px);
        gap:14px;
        justify-content:end;}

.renew-main .data-svg-map{max-width:540px;}

.renew-main .map-legend{width:94px;
        max-width:94px;
        padding:11px 10px;}

.renew-main .map-legend li{font-size:11px;
        gap:7px;}

.renew-main .legend-color{width:14px;
        height:14px;}
}

@media (max-width:1040px){
.renew-main .data-map{min-height:auto;
        padding:24px 0 54px;
        display:block;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:1fr;
        width:100%;
        max-width:none;
        gap:22px;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:0;
        width:100%;
        height:560px;
        transform:none;
        border-radius:0 0 28px 28px;}

.renew-main .map-filter-box{position:relative;
        width:min(820px,calc(100% - 56px));
        min-height:auto;
        margin:0 auto;
        padding:42px 46px 82px;
        text-align:center;}

.renew-main .map-filter-box:before{content:"DATAMAP";
        left:50%;
        top:16px;
        width:auto;
        writing-mode:horizontal-tb;
        transform:translateX(-50%);
        color:#f35d6c0c;
        font-size:72px;
        line-height:1;
        letter-spacing:.08em;
        white-space:nowrap;}

.renew-main .map-filter-box > span,
.renew-main .map-filter-box h2,
.renew-main .map-filter-box p{position:relative;
        z-index:2;
        text-align:center;}

.renew-main .map-filter-box h2{display:block;
        margin:6px auto 14px;}

.renew-main .map-filter-box p{margin:0 auto;}

.renew-main .character-img{left:6px;
        top:70px;
        bottom:auto;
        width:112px;
        z-index:3;}

.renew-main .pin-img{position:absolute;
        right:10px;
        top:74px;
        width:58px;
        margin:0;
        transform:none;
        z-index:3;}

.renew-main .filter-area{position:relative;
        z-index:2;
        margin-top:42px;
        text-align:left;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:100%;
        max-width:620px;
        margin-left:auto;
        margin-right:auto;}

.renew-main .select-area{display:flex;
        align-items:center;
        gap:16px;}

.renew-main .map-search-btn{display:block;
        margin-top:24px;
        text-align:center;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:100%;
        min-height:auto;
        padding:12px 28px 72px;}

.renew-main .data-svg-map{width:min(100%,760px);
        max-width:760px;
        margin:0 auto;}

.renew-main .map-legend{position:absolute;
        left:50%;
        right:auto;
        bottom:10px;
        top:auto;
        width:max-content;
        max-width:calc(100% - 36px);
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:8px 12px;
        margin:0;
        padding:10px 13px;
        transform:translateX(-50%);}

.renew-main .map-legend li,
.renew-main .map-legend li + li{margin:0;}
}

@media (max-width:640px){
.renew-main .data-map{padding:18px 0 44px;}

.renew-main .data-map-bg{height:500px;
        border-radius:0 0 22px 22px;}

.renew-main .map-filter-box{width:calc(100% - 24px);
        padding:34px 16px 72px;}

.renew-main .map-filter-box:before{top:14px;
        font-size:46px;}

.renew-main .map-filter-box > span{font-size:13px;}

.renew-main .map-filter-box h2{font-size:28px;
        margin-top:4px;}

.renew-main .map-filter-box p{max-width:280px;
        font-size:12px;
        line-height:1.55;}

.renew-main .character-img{left:0;
        top:68px;
        width:82px;}

.renew-main .pin-img{right:2px;
        top:72px;
        width:42px;}

.renew-main .filter-area{margin-top:34px;}

.renew-main .filter-area strong,
.renew-main .select-area label{font-size:14px;}

.renew-main .chip-list{grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;}

.renew-main .chip-list button{height:34px;
        font-size:14px;}

.renew-main .select-area{flex-direction:row;
        align-items:center;
        gap:10px;
        margin-top:12px;}

.renew-main .select-area label{width:62px;
        flex:none;}

.renew-main .select-area select{min-width:0;
        height:40px;
        font-size:14px;
        padding-left:14px;
        padding-right:36px;}

.renew-main .map-search-btn{height:48px;
        margin-top:18px;
        font-size:15px;
        text-align:center;}

.renew-main .map-visual-box{padding:10px 12px 66px;}

.renew-main .map-legend{bottom:8px;
        max-width:calc(100% - 20px);
        padding:8px 9px;
        gap:6px 9px;}

.renew-main .map-legend li{font-size:9px;}

.renew-main .legend-color{width:12px;
        height:12px;}
}

.renew-side-nav:has(a[href="#renewMainService"].is-active),
.renew-side-nav:has(a[data-target="renewMainService"].is-active){top:21%;
    transform:translateY(-50%);}

.renew-side-nav:has(a[href="#renewDataMap"].is-active),
.renew-side-nav:has(a[data-target="renewDataMap"].is-active),
.renew-side-nav:has(a[href="#renewCulture"].is-active),
.renew-side-nav:has(a[data-target="renewCulture"].is-active),
.renew-side-nav:has(a[href="#renewInfra"].is-active),
.renew-side-nav:has(a[data-target="renewInfra"].is-active){top:50%;
    transform:translateY(-50%);}

@media (min-width:1041px){
.renew-main .data-map-inner{width:var(--content-width);
        max-width:calc(100% - 176px);
        margin-left:auto;
        margin-right:auto;
        grid-template-columns:minmax(330px,390px) minmax(0,1fr);
        gap:clamp(42px,4.4vw,72px);}

.renew-main .map-filter-box{width:100%;
        min-width:0;}

.renew-main .map-visual-box{position:relative;
        display:block;
        min-height:580px;
        padding:0 36px 108px 18px;
        overflow:visible;}

.renew-main .data-svg-map{display:block;
        width:min(100%,760px);
        max-width:760px;
        margin:0 auto;
        grid-column:auto;
        grid-row:auto;}

.renew-main .map-legend{position:absolute;
        right:28px;
        bottom:24px;
        left:auto;
        top:auto;
        z-index:8;
        display:block;
        width:112px;
        max-width:112px;
        margin:0;
        padding:14px 16px;
        transform:none;
        border-radius:14px;}

.renew-main .map-legend li{display:flex;
        align-items:center;
        gap:9px;
        font-size:12px;
        line-height:1;
        white-space:nowrap;}

.renew-main .map-legend li + li{margin-top:9px;}
}

@media (min-width:1281px) and (max-width:1500px){
.renew-main .data-map-inner{max-width:calc(100% - 144px);
        grid-template-columns:350px minmax(0,1fr);
        gap:38px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 144px))) / 2
            + 455px
        );
        min-width:510px;}

.renew-main .map-filter-box:before{left:-44px;}

.renew-main .character-img{left:-34px;}

.renew-main .map-visual-box{padding-left:12px;
        padding-right:22px;}

.renew-main .data-svg-map{max-width:650px;}

.renew-main .map-legend{right:12px;
        bottom:18px;}
}

@media (min-width:1041px) and (max-width:1280px){
.renew-main .data-map-inner{max-width:calc(100% - 132px);
        grid-template-columns:320px minmax(0,1fr);
        gap:30px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 132px))) / 2
            + 405px
        );
        min-width:455px;}

.renew-main .map-filter-box:before{left:-28px;
        font-size:50px;}

.renew-main .character-img{left:-20px;
        width:118px;}

.renew-main .map-visual-box{min-height:540px;
        padding:0 18px 100px 8px;}

.renew-main .data-svg-map{width:min(100%,540px);
        max-width:540px;}

.renew-main .map-legend{right:8px;
        bottom:16px;
        width:96px;
        max-width:96px;
        padding:11px 10px;}

.renew-main .map-legend li{gap:7px;
        font-size:10px;}

.renew-main .legend-color{width:14px;
        height:14px;}
}

@media (min-width:1920px){
.renew-main .data-map-inner{max-width:calc(100% - 210px);}

.renew-main .map-visual-box{padding-right:54px;}

.renew-main .data-svg-map{max-width:1000px;}

.renew-main .map-legend{right:40px;
        bottom:26px;}
}

@media (max-width:1040px){
.renew-main .data-map{min-height:auto;
        padding:0 0 54px;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:1fr;
        width:100%;
        max-width:none;
        gap:24px;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:0;
        width:100%;
        height:560px;
        transform:none;
        border-radius:0;}

.renew-main .map-filter-box{position:relative;
        width:min(860px,calc(100% - 48px));
        min-height:560px;
        margin:0 auto;
        padding:50px 56px 56px;
        text-align:center;}

.renew-main .map-filter-box:before{content:"DATAMAP";
        position:absolute;
        left:50%;
        top:20px;
        width:auto;
        writing-mode:horizontal-tb;
        transform:translateX(-50%);
        color:#f35d6c0c;
        font-size:72px;
        line-height:1;
        letter-spacing:.08em;
        white-space:nowrap;}

.renew-main .map-filter-box > span,
.renew-main .map-filter-box h2,
.renew-main .map-filter-box p{position:relative;
        z-index:3;
        text-align:center;}

.renew-main .map-filter-box h2{margin:6px auto 14px;}

.renew-main .character-img{left:calc(50% - 330px);
        top:72px;
        bottom:auto;
        width:104px;
        max-width:none;
        z-index:4;}

.renew-main .pin-img{position:absolute;
        right:calc(50% - 330px);
        top:78px;
        width:56px;
        margin:0;
        transform:none;
        z-index:4;}

.renew-main .filter-area{position:relative;
        z-index:3;
        margin-top:86px;
        text-align:left;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:100%;
        max-width:680px;
        margin-left:auto;
        margin-right:auto;}

.renew-main .select-area{display:flex;
        align-items:center;
        gap:16px;}

.renew-main .map-search-btn{display:block;
        margin-top:24px;
        text-align:center;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:100%;
        min-height:auto;
        padding:10px 28px 90px;}

.renew-main .data-svg-map{width:min(100%,760px);
        max-width:760px;
        margin:0 auto;}

.renew-main .map-legend{position:absolute;
        right:24px;
        bottom:14px;
        left:auto;
        top:auto;
        display:block;
        width:104px;
        max-width:104px;
        margin:0;
        padding:12px 13px;
        transform:none;}

.renew-main .map-legend li{display:flex;
        align-items:center;
        gap:8px;
        font-size:11px;
        white-space:nowrap;}

.renew-main .map-legend li + li{margin-top:8px;}
}

@media (min-width:641px) and (max-width:800px){
.renew-main .map-filter-box{width:calc(100% - 32px);
        padding-left:38px;
        padding-right:38px;}

.renew-main .character-img{left:calc(50% - 270px);
        width:92px;}

.renew-main .pin-img{right:calc(50% - 270px);
        width:50px;}
}

@media (max-width:640px){
.renew-main .data-map{padding-bottom:42px;}

.renew-main .data-map-bg{height:530px;
        border-radius:0;}

.renew-main .map-filter-box{width:100%;
        min-height:530px;
        padding:38px 18px 40px;}

.renew-main .map-filter-box:before{top:16px;
        font-size:44px;}

.renew-main .map-filter-box > span{font-size:13px;}

.renew-main .map-filter-box h2{font-size:28px;
        margin-top:4px;}

.renew-main .map-filter-box p{max-width:280px;
        margin:0 auto;
        font-size:12px;
        line-height:1.55;}

.renew-main .character-img{left:18px;
        top:78px;
        width:74px;}

.renew-main .pin-img{right:20px;
        top:82px;
        width:40px;}

.renew-main .filter-area{margin-top:78px;
        padding:0 8px;}

.renew-main .filter-area strong,
.renew-main .select-area label{font-size:14px;}

.renew-main .chip-list{grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;}

.renew-main .chip-list button{height:34px;
        font-size:14px;}

.renew-main .select-area{display:flex;
        flex-direction:row;
        align-items:center;
        gap:10px;
        margin-top:12px;}

.renew-main .select-area label{width:62px;
        flex:none;}

.renew-main .select-area select{min-width:0;
        height:40px;
        padding-left:14px;
        padding-right:36px;
        font-size:11px;}

.renew-main .map-search-btn{height:48px;
        margin-top:18px;
        font-size:15px;
        text-align:center;}

.renew-main .map-visual-box{padding:8px 12px 84px;}

.renew-main .data-svg-map{width:100%;
        max-width:100%;}

.renew-main .map-legend{right:10px;
        bottom:8px;
        width:88px;
        max-width:88px;
        padding:9px 8px;}

.renew-main .map-legend li{gap:6px;
        font-size:9px;}

.renew-main .map-legend li + li{margin-top:6px;}

.renew-main .legend-color{width:12px;
        height:12px;}
}

.renew-side-nav{transform:translateY(-50%);}

@media (min-width:1121px){
.renew-main .map-visual-box{position:relative;
        display:block;
        min-height:560px;
        padding:0 34px 104px 10px;
        overflow:visible;}

.renew-main .data-svg-map{display:block;
        width:min(100%,760px);
        max-width:760px;
        margin:0 auto;
        grid-column:auto;
        grid-row:auto;}

.renew-main .map-legend{position:absolute;
        right:18px;
        bottom:18px;
        left:auto;
        top:auto;
        z-index:8;
        display:block;
        width:108px;
        max-width:108px;
        margin:0;
        padding:13px 14px;
        transform:none;}

.renew-main .map-legend li{display:flex;
        align-items:center;
        gap:8px;
        font-size:11px;
        white-space:nowrap;}

.renew-main .map-legend li + li{margin-top:8px;}
}

@media (min-width:1121px) and (max-width:1280px){
.renew-main .data-map-inner{max-width:calc(100% - 136px);
        grid-template-columns:315px minmax(0,1fr);
        gap:34px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 136px))) / 2
            + 400px
        );
        min-width:455px;}

.renew-main .map-filter-box{width:315px;}

.renew-main .map-visual-box{padding-left:14px;
        padding-right:18px;}

.renew-main .data-svg-map{max-width:520px;}

.renew-main .map-legend{right:6px;
        width:94px;
        max-width:94px;
        padding:10px 9px;}

.renew-main .map-legend li{gap:6px;
        font-size:9px;}

.renew-main .legend-color{width:13px;
        height:13px;}
}

@media (max-width:1120px){
.renew-main .data-map{min-height:auto;
        padding:0 0 52px;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:1fr;
        width:100%;
        max-width:none;
        gap:24px;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:0;
        width:100%;
        height:540px;
        transform:none;
        border-radius:0;}

.renew-main .map-filter-box{position:relative;
        width:min(760px,calc(100% - 72px));
        min-height:540px;
        margin:0 auto;
        padding:48px 42px 44px;
        text-align:center;}

.renew-main .map-filter-box:before{content:"DATAMAP";
        left:50%;
        top:20px;
        writing-mode:horizontal-tb;
        transform:translateX(-50%);
        font-size:64px;
        line-height:1;
        white-space:nowrap;}

.renew-main .map-filter-box > span,
.renew-main .map-filter-box h2,
.renew-main .map-filter-box p{position:relative;
        z-index:3;
        text-align:center;}

.renew-main .map-filter-box h2{margin:6px auto 12px;}

.renew-main .character-img{left:calc(50% - 285px);
        top:82px;
        bottom:auto;
        width:90px;
        max-width:none;
        z-index:4;}

.renew-main .pin-img{position:absolute;
        right:calc(50% - 285px);
        top:86px;
        width:48px;
        margin:0;
        z-index:4;}

.renew-main .filter-area{margin-top:76px;
        text-align:left;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:100%;
        max-width:560px;
        margin-left:auto;
        margin-right:auto;}

.renew-main .select-area{display:flex;
        align-items:center;
        gap:14px;}

.renew-main .map-search-btn{display:block;
        margin-top:22px;
        text-align:center;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:100%;
        min-height:auto;
        padding:12px 24px 92px;}

.renew-main .data-svg-map{width:min(100%,720px);
        max-width:720px;
        margin:0 auto;}

.renew-main .map-legend{position:absolute;
        right:18px;
        bottom:12px;
        left:auto;
        top:auto;
        display:block;
        width:102px;
        max-width:102px;
        margin:0;
        padding:11px 12px;
        transform:none;}

.renew-main .map-legend li{display:flex;
        align-items:center;
        gap:7px;
        font-size:10px;
        white-space:nowrap;}

.renew-main .map-legend li + li{margin-top:7px;}
}

@media (min-width:641px) and (max-width:800px){
.renew-main .map-filter-box{width:calc(100% - 48px);
        padding-left:34px;
        padding-right:34px;}

.renew-main .character-img{left:calc(50% - 235px);
        width:82px;}

.renew-main .pin-img{right:calc(50% - 235px);
        width:44px;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{max-width:500px;}
}

@media (max-width:640px){
.renew-main .data-map-bg{height:505px;}

.renew-main .map-filter-box{width:100%;
        min-height:505px;
        padding:34px 22px 34px;}

.renew-main .map-filter-box:before{top:14px;
        font-size:42px;}

.renew-main .map-filter-box h2{font-size:28px;}

.renew-main .map-filter-box p{max-width:280px;
        margin:0 auto;
        font-size:12px;
        line-height:1.5;}

.renew-main .character-img{left:calc(50% - 185px);
        top:74px;
        width:68px;}

.renew-main .pin-img{right:calc(50% - 185px);
        top:78px;
        width:38px;}

.renew-main .filter-area{margin-top:68px;
        padding:0 4px;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{max-width:380px;}

.renew-main .chip-list{grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;}

.renew-main .chip-list button{height:34px;
        font-size:14px;}

.renew-main .select-area{display:flex;
        flex-direction:row;
        align-items:center;
        gap:9px;
        margin-top:11px;}

.renew-main .select-area label{width:62px;
        flex:none;
        font-size:12px;}

.renew-main .select-area select{min-width:0;
        height:40px;
        font-size:14px;}

.renew-main .map-search-btn{height:48px;
        margin-top:17px;
        font-size:13px;}

.renew-main .map-visual-box{padding:8px 12px 82px;}

.renew-main .map-legend{right:8px;
        bottom:8px;
        width:86px;
        max-width:86px;
        padding:8px 7px;}

.renew-main .map-legend li{gap:5px;
        font-size:8px;}

.renew-main .map-legend li + li{margin-top:5px;}

.renew-main .legend-color{width:11px;
        height:11px;}
}

@media (max-width:420px){
.renew-main .character-img{left:14px;}

.renew-main .pin-img{right:16px;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{max-width:330px;}
}

@media (min-width:1041px){
.renew-main .data-map-inner{width:var(--content-width);
        max-width:calc(100% - 176px);
        grid-template-columns:minmax(340px,390px) minmax(0,1fr);
        gap:clamp(58px,5.2vw,92px);
        margin:0 auto;}

.renew-main .map-filter-box{width:100%;
        min-width:0;}

.renew-main .map-visual-box{position:relative;
        display:block;
        min-width:0;
        min-height:570px;
        margin-left:clamp(18px,2vw,42px);
        padding:0 24px 108px 24px;
        overflow:visible;}

.renew-main .data-svg-map{display:block;
        width:min(100%,760px);
        max-width:760px;
        margin:0 auto;
        transform:translateX(clamp(8px,1vw,18px));}

.renew-main .place-map,
.renew-main .gn-map-svg{width:100%;
        max-width:100%;
        overflow:visible;}

.renew-main .map-legend{position:absolute;
        right:22px;
        bottom:22px;
        left:auto;
        top:auto;
        z-index:9;
        display:block;
        width:108px;
        max-width:108px;
        margin:0;
        padding:13px 14px;
        transform:none;}

.renew-main .map-legend li{display:flex;
        align-items:center;
        gap:8px;
        font-size:11px;
        white-space:nowrap;}

.renew-main .map-legend li + li{margin-top:8px;}
}

@media (min-width:1281px) and (max-width:1450px){
.renew-main .data-map-inner{max-width:calc(100% - 164px);
        grid-template-columns:350px minmax(0,1fr);
        gap:64px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 164px))) / 2
            + 455px
        );
        min-width:505px;}

.renew-main .map-visual-box{margin-left:30px;
        padding-left:28px;
        padding-right:18px;}

.renew-main .data-svg-map{width:min(100%,620px);
        max-width:620px;
        transform:translateX(18px);}

.renew-main .map-legend{right:4px;
        bottom:18px;}
}

@media (min-width:1041px) and (max-width:1280px){
.renew-main .data-map-inner{max-width:calc(100% - 144px);
        grid-template-columns:320px minmax(0,1fr);
        gap:54px;}

.renew-main .data-map-bg{width:calc(
            (100% - min(var(--content-width),calc(100% - 144px))) / 2
            + 410px
        );
        min-width:455px;}

.renew-main .map-filter-box{width:320px;}

.renew-main .map-visual-box{min-height:530px;
        margin-left:20px;
        padding:0 14px 96px 20px;}

.renew-main .data-svg-map{width:min(100%,520px);
        max-width:520px;
        transform:translateX(12px);}

.renew-main .map-legend{right:0;
        bottom:14px;
        width:94px;
        max-width:94px;
        padding:10px 9px;}

.renew-main .map-legend li{gap:6px;
        font-size:9px;}

.renew-main .legend-color{width:13px;
        height:13px;}
}

@media (min-width:641px) and (max-width:1040px){
.renew-main .data-map{padding:0 0 52px;
        overflow:hidden;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:1fr;
        width:100%;
        max-width:none;
        gap:34px;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:0;
        width:100%;
        height:500px;
        border-radius:0;
        transform:none;}

.renew-main .map-filter-box{position:relative;
        width:min(760px,calc(100% - 64px));
        min-height:500px;
        margin:0 auto;
        padding:42px 48px 68px;
        text-align:center;}

.renew-main .map-filter-box:before{left:50%;
        top:14px;
        writing-mode:horizontal-tb;
        transform:translateX(-50%);
        font-size:64px;
        white-space:nowrap;}

.renew-main .map-filter-box > span,
.renew-main .map-filter-box h2,
.renew-main .map-filter-box p{position:relative;
        z-index:3;
        text-align:center;}

.renew-main .map-filter-box h2{margin:5px auto 12px;}

.renew-main .map-filter-box p{margin:0 auto;}

.renew-main .character-img{left:calc(50% - 275px);
        top:62px;
        bottom:auto;
        width:86px;
        z-index:4;}

.renew-main .pin-img{position:absolute;
        right:calc(50% - 275px);
        top:68px;
        width:48px;
        margin:0;
        z-index:4;}

.renew-main .filter-area{margin-top:64px;
        padding:0;
        text-align:left;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:100%;
        max-width:560px;
        margin-left:auto;
        margin-right:auto;}

.renew-main .select-area{gap:14px;}

.renew-main .map-search-btn{position:absolute;
        left:50%;
        bottom:0;
        width:min(560px,calc(100% - 96px));
        height:52px;
        margin:0;
        transform:translate(-50%,50%);
        text-align:center;
        z-index:6;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:calc(100% - 48px);
        max-width:900px;
        min-height:auto;
        margin:28px auto 0;
        padding:10px 18px 88px;
        overflow:visible;}

.renew-main .data-svg-map{display:block;
        width:min(100%,720px);
        max-width:720px;
        margin:0 auto;
        transform:none;}

.renew-main .place-map,
.renew-main .gn-map-svg{width:100%;
        max-width:100%;
        overflow:visible;}

.renew-main .map-legend{right:10px;
        bottom:10px;
        width:96px;
        max-width:96px;}
}

@media (max-width:640px){
.renew-main .data-map{padding:0 0 42px;
        overflow:hidden;}

.renew-main .data-map-bg{height:440px;
        border-radius:0;}

.renew-main .map-filter-box{position:relative;
        width:100%;
        min-height:440px;
        padding:30px 24px 58px;}

.renew-main .map-filter-box:before{top:10px;
        font-size:40px;}

.renew-main .map-filter-box h2{margin-top:3px;
        font-size:28px;}

.renew-main .map-filter-box p{max-width:270px;
        font-size:12px;
        line-height:1.45;}

.renew-main .character-img{left:calc(50% - 185px);
        top:54px;
        width:66px;}

.renew-main .pin-img{right:calc(50% - 185px);
        top:59px;
        width:38px;}

.renew-main .filter-area{margin-top:50px;
        padding:0;}

.renew-main .chip-list,
.renew-main .select-area{width:100%;
        max-width:390px;
        margin-left:auto;
        margin-right:auto;}

.renew-main .chip-list{grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;}

.renew-main .chip-list button{height:33px;
        font-size:11px;}

.renew-main .select-area{gap:8px;
        margin-top:10px;}

.renew-main .select-area label{width:58px;
        font-size:11px;}

.renew-main .select-area select{height:39px;
        font-size:11px;}

.renew-main .map-search-btn{position:absolute;
        left:50%;
        bottom:0;
        width:min(390px,calc(100% - 48px));
        height:48px;
        margin:0;
        transform:translate(-50%,50%);
        font-size:13px;
        text-align:center;
        z-index:6;}

.renew-main .map-visual-box{width:calc(100% - 24px);
        margin:28px auto 0;
        padding:8px 4px 82px;
        overflow:visible;}

.renew-main .data-svg-map{display:block;
        width:96%;
        max-width:96%;
        margin:0 auto;
        transform:none;
        overflow:visible;}

.renew-main .place-map,
.renew-main .gn-map-svg{width:100% !important;
        max-width:100%;
        overflow:visible;}

.renew-main .map-legend{right:0;
        bottom:8px;
        width:86px;
        max-width:86px;}
}

@media (max-width:420px){
.renew-main .character-img{left:14px;
        top:54px;}

.renew-main .pin-img{right:16px;
        top:58px;}

.renew-main .map-filter-box{padding-left:18px;
        padding-right:18px;}

.renew-main .map-search-btn{width:calc(100% - 36px);}
}

@media (min-width:769px) and (max-width:1040px){
.renew-main .data-map{position:relative;
        min-height:720px;
        padding:52px 0 84px;
        display:flex;
        align-items:center;
        overflow:hidden;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:300px minmax(0,1fr);
        align-items:center;
        width:calc(100% - 96px);
        max-width:none;
        gap:38px;
        margin:0 auto;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:48px;
        width:calc((100% - (100% - 96px)) / 2 + 365px);
        min-width:410px;
        height:calc(100% - 138px);
        border-radius:0 30px 30px 0;
        transform:none;}

.renew-main .map-filter-box{position:relative;
        width:300px;
        min-height:500px;
        margin:0;
        padding:42px 0 56px;
        text-align:left;}

.renew-main .map-filter-box:before{content:"DATAMAP";
        left:-34px;
        top:60px;
        writing-mode:vertical-rl;
        transform:none;
        font-size:52px;
        line-height:1;
        white-space:normal;}

.renew-main .map-filter-box > span,
.renew-main .map-filter-box h2,
.renew-main .map-filter-box p{position:relative;
        z-index:2;
        text-align:left;}

.renew-main .map-filter-box h2{margin:6px 0 13px;
        font-size:34px;}

.renew-main .map-filter-box p{font-size:13px;
        line-height:1.65;}

.renew-main .pin-img{position:absolute;
        right:0;
        top:56px;
        width:48px;
        margin:0;}

.renew-main .character-img{left:-22px;
        top:auto;
        bottom:-28px;
        width:112px;}

.renew-main .filter-area{margin-top:34px;
        padding:0;
        text-align:left;}

.renew-main .filter-area,
.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:280px;
        max-width:280px;
        margin-left:0;
        margin-right:0;}

.renew-main .chip-list{grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;}

.renew-main .chip-list button{height:29px;
        font-size:10px;}

.renew-main .select-area{display:flex;
        align-items:center;
        gap:10px;
        margin-top:11px;}

.renew-main .select-area label{width:66px;
        flex:none;
        font-size:11px;}

.renew-main .select-area select{height:36px;
        min-width:0;
        font-size:10px;
        padding-left:12px;}

.renew-main .map-search-btn{position:static;
        height:48px;
        margin-top:20px;
        transform:none;
        font-size:12px;
        text-align:center;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:100%;
        min-width:0;
        min-height:500px;
        margin:0;
        padding:0 6px 84px 20px;
        overflow:visible;}

.renew-main .data-svg-map{display:block;
        width:min(100%,520px);
        max-width:520px;
        margin:0 auto;
        transform:translateX(12px);}

.renew-main .map-legend{position:absolute;
        right:0;
        bottom:8px;
        left:auto;
        top:auto;
        display:block;
        width:92px;
        max-width:92px;
        padding:10px 9px;
        transform:none;}

.renew-main .map-legend li{gap:6px;
        font-size:9px;}

.renew-main .map-legend li + li{margin-top:6px;}

.renew-main .legend-color{width:12px;
        height:12px;}
}

@media (max-width:768px){
.renew-main .data-map{min-height:auto;
        padding:0 0 48px;
        display:block;
        overflow:hidden;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:1fr;
        width:100%;
        max-width:none;
        gap:34px;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:0;
        width:100%;
        height:480px;
        border-radius:0;
        transform:none;}

.renew-main .map-filter-box{position:relative;
        width:min(680px,calc(100% - 40px));
        min-height:480px;
        margin:0 auto;
        padding:38px 42px 62px;
        text-align:center;}

.renew-main .map-filter-box:before{content:"DATAMAP";
        left:50%;
        top:12px;
        writing-mode:horizontal-tb;
        transform:translateX(-50%);
        font-size:56px;
        line-height:1;
        white-space:nowrap;}

.renew-main .map-filter-box > span,
.renew-main .map-filter-box h2,
.renew-main .map-filter-box p{position:relative;
        z-index:3;
        text-align:center;}

.renew-main .map-filter-box h2{margin:5px auto 11px;
        font-size:32px;}

.renew-main .map-filter-box p{max-width:420px;
        margin:0 auto;
        font-size:13px;
        line-height:1.6;}

.renew-main .character-img{left:calc(50% - 255px);
        top:58px;
        bottom:auto;
        width:82px;
        z-index:4;}

.renew-main .pin-img{position:absolute;
        right:calc(50% - 255px);
        top:64px;
        width:46px;
        margin:0;
        z-index:4;}

.renew-main .filter-area{width:100%;
        max-width:520px;
        margin:58px auto 0;
        padding:0;
        text-align:left;}

.renew-main .filter-area strong{margin:0 0 11px;
        font-size:12px;
        font-weight:700;}

.renew-main .chip-list,
.renew-main .select-area,
.renew-main .map-search-btn{width:100%;
        max-width:520px;
        margin-left:auto;
        margin-right:auto;}

.renew-main .chip-list{grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;}

.renew-main .chip-list button{height:34px;
        font-size:11px;
        font-weight:400;
        box-shadow:0 4px 12px rgba(230,83,103,.05);}

.renew-main .chip-list button.on{font-weight:500;}

.renew-main .select-area{display:grid;
        grid-template-columns:76px minmax(0,1fr);
        align-items:center;
        gap:12px;
        margin-top:11px;}

.renew-main .select-area label{width:auto;
        font-size:12px;
        text-align:left;}

.renew-main .select-area select{width:100%;
        min-width:0;
        height:42px;
        font-size:12px;
        padding-left:15px;}

.renew-main .map-search-btn{position:absolute;
        left:50%;
        bottom:0;
        width:min(520px,calc(100% - 84px));
        height:50px;
        margin:0;
        transform:translate(-50%,50%);
        font-size:13px;
        text-align:center;
        z-index:7;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:calc(100% - 30px);
        max-width:760px;
        min-height:auto;
        margin:24px auto 0;
        padding:8px 8px 82px;
        overflow:visible;}

.renew-main .data-svg-map{display:block;
        width:94%;
        max-width:680px;
        margin:0 auto;
        transform:none;
        overflow:visible;}

.renew-main .place-map,
.renew-main .gn-map-svg{width:100% !important;
        max-width:100%;
        overflow:visible;}

.renew-main .map-legend{right:4px;
        bottom:6px;
        width:90px;
        max-width:90px;
        padding:9px 8px;}

.renew-main .map-legend li{gap:6px;
        font-size:9px;}
}

@media (max-width:480px){
.renew-main .data-map-bg{height:455px;}

.renew-main .map-filter-box{width:100%;
        min-height:455px;
        padding:28px 22px 58px;}

.renew-main .map-filter-box:before{top:8px;
        font-size:40px;}

.renew-main .map-filter-box > span{font-size:11px;}

.renew-main .map-filter-box h2{font-size:27px;}

.renew-main .map-filter-box p{max-width:270px;
        font-size:11px;
        line-height:1.5;}

.renew-main .character-img{left:18px;
        top:47px;
        width:64px;}

.renew-main .pin-img{right:20px;
        top:51px;
        width:38px;}

.renew-main .filter-area{max-width:390px;
        margin-top:48px;}

.renew-main .chip-list,
.renew-main .select-area{max-width:390px;}

.renew-main .chip-list{grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;}

.renew-main .chip-list button{height:33px;
        font-size:10px;}

.renew-main .select-area{grid-template-columns:66px minmax(0,1fr);
        gap:8px;}

.renew-main .select-area label{font-size:11px;}

.renew-main .select-area select{height:39px;
        font-size:11px;}

.renew-main .map-search-btn{width:calc(100% - 44px);
        height:48px;}

.renew-main .map-visual-box{width:calc(100% - 14px);
        padding-left:0;
        padding-right:0;}

.renew-main .data-svg-map{width:96%;
        max-width:96%;}
}

.renew-main .chip-list{grid-template-columns:repeat(2,minmax(0,1fr));}

@media (min-width:769px){
.renew-main .data-map{position:relative;
        display:flex;
        align-items:center;
        min-height:clamp(700px,84svh,900px);
        padding:56px 0 94px;
        overflow:hidden;}

.renew-main .data-map-inner{position:relative;
        z-index:2;
        display:grid;
        grid-template-columns:clamp(310px,28vw,390px) minmax(0,1fr);
        align-items:center;
        width:min(1500px,calc(100% - 128px));
        max-width:none;
        gap:clamp(54px,5vw,88px);
        margin:0 auto;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:50px;
        width:calc((100% - min(1500px,calc(100% - 128px))) / 2 + 470px);
        min-width:470px;
        height:calc(100% - 150px);
        border-radius:0 34px 34px 0;
        transform:none;}

.renew-main .map-filter-box{position:relative;
        display:block;
        width:100%;
        min-width:0;
        min-height:520px;
        margin:0;
        padding:42px 0 58px;
        text-align:left;}

.renew-main .map-filter-box:before{content:"DATAMAP";
        left:-52px;
        top:58px;
        writing-mode:vertical-rl;
        transform:none;
        font-size:62px;
        line-height:1;
        white-space:normal;}

.renew-main .map-filter-box > span,
.renew-main .map-filter-box h2,
.renew-main .map-filter-box p{position:relative;
        z-index:2;
        text-align:left;}

.renew-main .map-filter-box h2{margin:6px 0 13px;
        font-size:clamp(30px,2.45vw,40px);}

.renew-main .map-filter-box p{margin:0;
        font-size:13px;
        line-height:1.65;}

.renew-main .pin-img{position:absolute;
        right:0;
        top:52px;
        width:54px;
        margin:0;
        transform:none;
        z-index:3;}

.renew-main .character-img{position:absolute;
        left:-42px;
        right:auto;
        top:auto;
        bottom:-32px;
        width:126px;
        max-width:none;
        z-index:4;}

.renew-main .filter-area{width:100%;
        max-width:350px;
        margin:38px 0 0;
        padding:0;
        text-align:left;}

.renew-main .filter-area strong{display:block;
        margin:0 0 11px;
        font-size:12px;
        font-weight:700;}

.renew-main .chip-list{width:100%;
        max-width:350px;
        margin:0;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;}

.renew-main .chip-list button{height:31px;
        font-size:11px;
        font-weight:400;}

.renew-main .chip-list button.on{font-weight:500;}

.renew-main .select-area{display:grid;
        grid-template-columns:74px minmax(0,1fr);
        align-items:center;
        width:100%;
        max-width:350px;
        gap:10px;
        margin:13px 0 0;}

.renew-main .select-area label{width:auto;
        font-size:12px;
        text-align:left;}

.renew-main .select-area select{width:100%;
        min-width:0;
        height:38px;
        padding-left:14px;
        font-size:11px;}

.renew-main .map-search-btn{position:static;
        display:block;
        width:100%;
        max-width:350px;
        height:50px;
        margin:24px 0 0;
        transform:none;
        font-size:13px;
        text-align:center;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:100%;
        min-width:0;
        min-height:560px;
        margin:0;
        padding:0 28px 106px 20px;
        overflow:visible;}

.renew-main .data-svg-map{position:relative;
        display:block;
        width:min(100%,760px);
        max-width:760px;
        margin:0 auto;
        transform:translateX(14px);
        overflow:visible;}

.renew-main .place-map,
.renew-main .gn-map-svg{display:block !important;
        width:100%;
        max-width:100%;
        height:auto;
        overflow:visible;}

.renew-main .map-legend{position:absolute;
        right:18px;
        bottom:18px;
        left:auto;
        top:auto;
        z-index:8;
        display:block;
        width:108px;
        max-width:108px;
        margin:0;
        padding:13px 14px;
        transform:none;}

.renew-main .map-legend li{display:flex;
        align-items:center;
        gap:8px;
        margin:0;
        font-size:11px;
        white-space:nowrap;}

.renew-main .map-legend li + li{margin-top:8px;}
}

@media (min-width:769px) and (max-width:1199px){
.renew-main .data-map-inner{width:calc(100% - 112px);
        grid-template-columns:300px minmax(0,1fr);
        gap:48px;}

.renew-main .data-map-bg{width:calc((100% - (100% - 112px)) / 2 + 370px);
        min-width:420px;}

.renew-main .map-filter-box{min-height:500px;
        padding-top:36px;}

.renew-main .map-filter-box:before{left:-34px;
        top:56px;
        font-size:50px;}

.renew-main .map-filter-box h2{font-size:32px;}

.renew-main .pin-img{right:-2px;
        top:48px;
        width:46px;}

.renew-main .character-img{left:-24px;
        width:112px;}

.renew-main .filter-area,
.renew-main .chip-list,
/* .renew-main .select-area, */
.renew-main .map-search-btn{max-width:280px;}

.renew-main .map-visual-box{min-height:520px;
        padding:0 8px 94px 22px;}

.renew-main .data-svg-map{width:min(100%,540px);
        max-width:540px;
        transform:translateX(12px);}

.renew-main .map-legend{right:0;
        bottom:12px;
        width:94px;
        max-width:94px;
        padding:10px 9px;}

.renew-main .map-legend li{gap:6px;
        font-size:9px;}

.renew-main .legend-color{width:13px;
        height:13px;}
}

@media (min-width:1200px) and (max-width:1450px){
.renew-main .data-map-inner{width:calc(100% - 150px);
        grid-template-columns:350px minmax(0,1fr);
        gap:62px;}

.renew-main .data-map-bg{width:calc((100% - (100% - 150px)) / 2 + 455px);}

.renew-main .data-svg-map{max-width:650px;}
}

@media (max-width:768px){
.renew-main .data-map{display:block;
        min-height:auto;
        padding:0 0 48px;
        overflow:hidden;}

.renew-main .data-map-inner{display:grid;
        grid-template-columns:1fr;
        width:100%;
        max-width:none;
        gap:32px;}

.renew-main .data-map-bg{left:max(40px, calc((100% - var(--content-width)) / 2));
        top:0;
        width:100%;
        height:470px;
        border-radius:0;
        transform:none;}

.renew-main .map-filter-box{position:relative;
        width:min(660px,calc(100% - 40px));
        min-height:470px;
        margin:0 auto;
        padding:36px 38px 60px;
        text-align:center;}

.renew-main .map-filter-box:before{left:50%;
        top:10px;
        writing-mode:horizontal-tb;
        transform:translateX(-50%);
        font-size:52px;
        white-space:nowrap;}

.renew-main .map-filter-box > span,
.renew-main .map-filter-box h2,
.renew-main .map-filter-box p{position:relative;
        z-index:3;
        text-align:center;}

.renew-main .map-filter-box h2{margin:5px auto 10px;
        font-size:31px;}

.renew-main .map-filter-box p{max-width:390px;
        margin:0 auto;
        font-size:12px;
        line-height:1.55;}

.renew-main .character-img{left:calc(50% - 235px);
        top:54px;
        bottom:auto;
        width:76px;}

.renew-main .pin-img{position:absolute;
        right:calc(50% - 235px);
        top:59px;
        width:43px;
        margin:0;}

.renew-main .filter-area{width:100%;
        max-width:500px;
        margin:52px auto 0;
        padding:0;
        text-align:left;}

.renew-main .filter-area strong{margin:0 0 10px;
        font-size:12px;}

.renew-main .chip-list,
.renew-main .select-area{width:100%;
        max-width:500px;
        margin-left:auto;
        margin-right:auto;}

.renew-main .chip-list{grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;}

.renew-main .chip-list button{height:34px;
        font-size:11px;
        font-weight:400;}

.renew-main .select-area{display:grid;
        grid-template-columns:76px minmax(0,1fr);
        align-items:center;
        gap:10px;
        margin-top:11px;}

.renew-main .select-area label{width:auto;
        font-size:12px;}

.renew-main .select-area select{width:100%;
        height:41px;
        font-size:12px;}

.renew-main .map-search-btn{position:absolute;
        left:50%;
        bottom:0;
        width:min(500px,calc(100% - 76px));
        height:50px;
        margin:0;
        transform:translate(-50%,50%);
        font-size:13px;
        text-align:center;}

.renew-main .map-visual-box{position:relative;
        display:block;
        width:calc(100% - 24px);
        max-width:760px;
        margin:24px auto 0;
        padding:8px 4px 82px;
        overflow:visible;}

.renew-main .data-svg-map{display:block;
        width:94%;
        max-width:680px;
        margin:0 auto;
        transform:none;
        overflow:visible;}

.renew-main .map-legend{position:absolute;
        right:0;
        bottom:6px;
        width:90px;
        max-width:90px;
        padding:9px 8px;}
}

@media (max-width:480px){
.renew-main .data-map-bg{height:440px;}

.renew-main .map-filter-box{width:100%;
        min-height:440px;
        padding:28px 20px 58px;}

.renew-main .map-filter-box:before{top:7px;
        font-size:39px;}

.renew-main .map-filter-box h2{font-size:27px;}

.renew-main .character-img{left:14px;
        top:45px;
        width:62px;}

.renew-main .pin-img{right:16px;
        top:49px;
        width:37px;}

.renew-main .filter-area{max-width:390px;
        margin-top:46px;}

.renew-main .chip-list,
.renew-main .select-area{max-width:390px;}

.renew-main .select-area{grid-template-columns:66px minmax(0,1fr);
        gap:8px;}

.renew-main .map-search-btn{width:calc(100% - 40px);
        height:48px;}

.renew-main .map-visual-box{width:calc(100% - 12px);
        padding-left:0;
        padding-right:0;}

.renew-main .data-svg-map{width:96%;
        max-width:96%;}
}

.renew-main{overflow-x:hidden;}

@media (prefers-reduced-motion:reduce){
.renew-main .circle-text{animation:none;}
}

/* =========================================================
   CULTURE / INFRA / RELATED / FOOTER
   ???
   - ?? ?? ?????? ???? ??
   - PC ??/hover ??
   - ??? 2?, ??? ? ? 1?
   ========================================================= */

/* ================= ?? ?? ??? ================= */
.culture .section-title h2,
.infra .section-title h2{
    font-family:"Paperlogy","KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
    font-size:clamp(34px,2.3vw,40px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.06em;
}

.culture .section-title span,
.infra .section-title span{
    font-size:14px;
    font-weight:500;
}

.culture .section-title p,
.infra .section-title p{
    font-size:14px;
    line-height:1.65;
}

/* ================= CULTURE ================= */
.culture{
    position:relative;
    min-height:clamp(700px,90svh,880px);
    padding:clamp(56px,6.5svh,78px) 0 clamp(64px,7.5svh,88px);
    display:flex;
    align-items:center;
    background:#fff;
    overflow:hidden;
}

.culture-bg-img{
    position:absolute;
    inset:0 auto auto 0;
    z-index:0;
    display:block;
    width:100%;
    height:clamp(400px,52svh,510px);
    max-width:none;
    object-fit:cover;
    object-position:center top;
    pointer-events:none;
    user-select:none;
}

.culture::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:clamp(310px,42svh,400px);
    z-index:1;
    height:150px;
    background:linear-gradient(180deg,rgba(255,255,255,0),#fff 88%);
    pointer-events:none;
}

.culture .inner{
    position:relative;
    z-index:2;
}

.culture .section-title span{color:#8c93c8}
.culture .section-title h2{color:#111943}
.culture .section-title p{color:#4f5366}
.culture .section-title.center p{
    margin-bottom:clamp(28px,3.5svh,42px);
}

.culture-slider-wrap{
    position:relative;
    padding:0 28px;
}

.culture-slide,
.culture-slide .slick-list,
.culture-slide .slick-track{
    position:relative;
}

.culture-slide .slick-list{
    overflow:hidden;
    padding:18px 0 30px;
    margin:-18px 0 -30px;
}

.culture-slide .slick-slide{
    padding:0 14px;
}

.culture-card{
    position:relative;
    display:block;
    height:clamp(230px,28svh,290px);
    border-radius:12px;
    overflow:hidden;
    color:#fff;
    background:#ddd;
    box-shadow:0 10px 24px rgba(12,28,48,.14);
}

.culture-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}

.culture-card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:64%;
    background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0));
}

.culture-card .txt{
    position:absolute;
    left:24px;
    right:24px;
    bottom:22px;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:3.2em;
}

.culture-card strong{
    display:block;
    margin-bottom:6px;
    font-family:"Paperlogy","KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
    font-size:20px;
    font-weight:700;
    letter-spacing:-.04em;
    white-space:nowrap;
    overflow:hidden;
    line-height:1.3;
    height:1.3em;
}

.culture-card p{
    margin:0;
    font-size:15px;
    opacity:.86;
    white-space:nowrap;
    overflow:hidden;
    line-height:1.35;
    height:1.35em;
}

.culture-card .c-marquee{
    display:block;
    width:100%;
    overflow:hidden;
}
.culture-card .c-marquee-track{
    display:inline-flex;
    align-items:center;
    gap:2.2em;
    width:max-content;
    white-space:nowrap;
    will-change:transform;
}
.culture-card .c-marquee-track > span{flex:none}
.culture-card .c-marquee-track.is-overflow{
    animation:cultureDescMarquee 14s linear infinite;
}
@keyframes cultureDescMarquee{
    0%,1.25%{transform:translateX(0)}
    100%{transform:translateX(calc(-50% - 1.1em))}
}
@media (prefers-reduced-motion:reduce){
    .culture-card .c-marquee-track.is-overflow{animation:none}
}

.culture-card:hover img{
    transform:scale(1.06);
}

.culture-arrow{
    position:absolute;
    top:50%;
    z-index:5;
    width:42px;
    height:42px;
    margin-top:-21px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.15);
    color:#999;
    font-size:26px;
}

.culture-prev{left:0}
.culture-next{right:0}

.culture-dots{
    margin-top:28px;
    text-align:center;
}

.culture-dots .slick-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
}

.culture-dots li{
    width:auto;
    height:auto;
}

.culture-dots button{
    display:block;
    width:10px;
    height:10px;
    padding:0;
    border-radius:999px;
    background:#d8d8d8;
    font-size:0;
}

.culture-dots .slick-active button{
    width:32px;
    background:#126da3;
}

/* ================= INFRA ================= */
.infra{
    position:relative;
    max-width:calc(100% - 24px);
    min-height:clamp(700px,90svh,880px);
    margin:0 auto;
    padding:clamp(66px,8svh,94px) 0 clamp(74px,9svh,104px);
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#eefbfc;
    border-radius:46px 46px 0 0;
}

.infra-bg-img{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center bottom;
    pointer-events:none;
    user-select:none;
}

.infra .inner{
    position:relative;
    z-index:2;
}

.infra .section-title span{color:#7cb4c1}
.infra .section-title h2{color:#07385c}
.infra .section-title.center p{margin-bottom:0}

.infra-list{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:24px;
    margin-top:clamp(40px,5svh,56px);
}

.infra-list li{
    grid-column:span 2;
    min-width:0;
}

.infra-list li:nth-child(4){
    grid-column:2 / span 2;
}

.infra-list li:nth-child(5){
    grid-column:4 / span 2;
}

.infra-list a{
    position:relative;
    display:block;
    min-height:clamp(150px,18svh,176px);
    padding:38px 126px 34px 34px;
    overflow:hidden;
    border-radius:14px;
    background:#fff;
    box-shadow:0 12px 28px rgba(28,73,82,.12);
    transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}

.infra-list a strong{
    position:relative;
    z-index:3;
    display:block;
    margin-bottom:12px;
    color:#07385c;
    font-family:"Paperlogy","KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
    font-size:21px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.04em;
}

.infra-list a p{
    position:relative;
    z-index:3;
    margin:0;
    color:#555;
    font-size:15px;
    line-height:1.5;
}

.infra-hover-bg,
.infra-list a::before{
    position:absolute;
    left:-42px;
    bottom:-46px;
    z-index:1;
    width:190px;
    height:160px;
    max-width:none;
    opacity:1;
    transition:opacity .28s ease,transform .28s ease;
    pointer-events:none;
}

.infra-list a::before{
    content:"";
    background:url("../img/renew/gn-symbol.png") no-repeat left bottom / contain;
}

.infra-icon-circle{
    position:absolute;
    right:42px;
    bottom:38px;
    z-index:3;
    display:block;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#b9e7ee;
    transition:background .3s ease;
}

.infra-icon{
    position:absolute;
    left:-12px;
    top:7px;
    width:35px;
    max-width:none;
    transition:opacity .3s ease;
}

.infra-icon-hover{
    opacity:0;
}

.infra-list a:hover{
    background:#0e8f99;
    transform:translateY(-6px);
    box-shadow:0 18px 34px rgba(14,143,153,.22);
}

.infra-list a:hover strong,
.infra-list a:hover p{
    color:#fff;
}


.infra-list a:hover .infra-icon-circle{
    background:rgba(255,255,255,.22);
}

.infra-list a:hover .infra-icon-default{opacity:0}
.infra-list a:hover .infra-icon-hover{opacity:1}

.plus{
    position:absolute;
    z-index:1;
    width:28px;
    height:28px;
    max-width:none;
    opacity:0;
    animation:plusFade 4s ease-in-out infinite;
    pointer-events:none;
    user-select:none;
}

.plus01{left:22%;top:86px}
.plus02{right:25%;top:70px;animation-delay:1.2s}
.plus03{right:11%;bottom:120px;animation-delay:2.1s}
.plus04{left:9%;bottom:95px;animation-delay:2.8s}

@keyframes plusFade{
    0%,100%{opacity:0;transform:scale(.82) rotate(0)}
    45%,65%{opacity:1;transform:scale(1) rotate(90deg)}
}

/* ================= RELATED ================= */
.internal-related{
    border-top:1px solid #e2e4ee;
    background:#f5f6fb;
}

.related-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:var(--content-width);
    max-width:calc(100% - 80px);
    min-height:62px;
    margin:0 auto;
    gap:28px;
}

.related-left,
.related-right{
    display:flex;
    align-items:center;
    min-width:0;
    gap:16px;
}

.internal-related strong,
.internal-related h2{
    flex:none;
    color:#333;
    font-size:14px;
    margin:0;
    font-weight:700;
}

.related-left img{
    display:block;
    width:auto;
    max-width:100%;
    max-height:27px;
}

.related-right button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:6px 11px;
    border:1px solid #cfd4e7;
    border-radius:4px;
    background:#fff;
    color:#30385f;
    font-family:inherit;
    font-size:12px;
    line-height:1.2;
    white-space:nowrap;
    cursor:pointer;
    transition:border-color .2s ease,background .2s ease,color .2s ease;
}

.related-right button:hover,
.related-right button:focus-visible{
    border-color:#8d98bd;
    background:#f8f9fd;
    color:#151b45;
    outline:none;
}

/* ================= FOOTER ================= */
#footer{
    background:#20284d;
    color:#fff;
}

.footer_container{
    position:relative;
    width:var(--content-width);
    max-width:calc(100% - 80px);
    margin:0 auto;
    padding:42px 0 48px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}

.footer-logo img{
    width:132px;
}

.footer-logo strong{
    font-family:"Paperlogy","KoPub Dotum","KoPub??",sans-serif;
    font-size:28px;
    font-weight:800;
    letter-spacing:-.04em;
}

.address span{
    color:rgba(255,255,255,.76);
    font-size:12px;
    line-height:1.8;
}

.privacy{
    position:absolute;
    right:0;
    bottom:48px;
    display:flex;
    gap:18px;
}

.privacy a{
    color:rgba(255,255,255,.86);
    font-size:12px;
}
.privacy a:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
    border-radius:2px;
}

/* ================= TABLET ================= */
@media (max-width:1024px){
    .culture,
    .infra{
        min-height:auto;
        display:block;
    }

    .culture{
        padding:58px 0 66px;
    }

    .culture-bg-img{
        height:360px;
    }

    .culture::after{
        top:270px;
        height:130px;
    }

    .culture .section-title h2,
    .infra .section-title h2{
        font-size:34px;
    }

    .culture .section-title p,
    .infra .section-title p{
        font-size:13px;
    }

    .culture-slider-wrap{
        padding:0 34px;
    }

    .culture-slide .slick-slide{
        padding:0 10px;
    }

    .culture-card{
        height:245px;
    }

    .culture-card strong{
        font-size:18px;
    }

    .infra{
        max-width:calc(100% - 18px);
        padding:60px 0 72px;
        border-radius:38px 38px 0 0;
    }

    /* ???: 2 + 2 + 1 */
    .infra-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:min(860px,calc(100% - 48px));
        margin:38px auto 0;
        gap:18px;
    }

    .infra-list li,
    .infra-list li:nth-child(4),
    .infra-list li:nth-child(5){
        grid-column:auto;
    }

    .infra-list li:last-child{
        grid-column:1 / -1;
        width:calc(50% - 9px);
        justify-self:center;
    }

    .infra-list a{
        min-height:140px;
        padding:28px 86px 26px 26px;
    }

    .infra-list a strong{
        font-size:19px;
    }

    .infra-list a p{
        font-size:13px;
    }

    .infra-icon-circle{
        right:26px;
        bottom:26px;
        width:36px;
        height:36px;
    }

    .related-inner{
        width:calc(100% - 48px);
        max-width:none;
        min-height:66px;
        padding:12px 0;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:24px;
    }

    .related-left,
    .related-right{
        display:flex;
        align-items:center;
        flex-wrap:nowrap;
        gap:10px;
        min-width:0;
    }

    .related-left{
        flex:1 1 auto;
    }

    .related-right{
        flex:0 0 auto;
    }

    .internal-related strong,
.internal-related h2{
        flex:none;
        white-space:nowrap;
        margin-right:4px;
    }

    .related-left a{
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:0;
    }

    .related-left img{
        max-width:110px;
        max-height:22px;
    }

    .related-right button{
        padding:6px 9px;
        font-size:11px;
    }

    .footer_container{
        width:calc(100% - 48px);
        max-width:none;
        padding:36px 0 40px;
    }

    .footer-logo{
        flex-wrap:wrap;
    }

    .footer-logo strong{
        font-size:24px;
    }

    .privacy{
        position:static;
        flex-wrap:wrap;
        margin-top:20px;
    }
}

/* ================= MOBILE ================= */
@media (max-width:640px){
    .culture{
        padding:44px 0 52px;
    }

    .culture-bg-img{
        height:255px;
        object-position:center top;
    }

    .culture::after{
        top:185px;
        height:105px;
    }

    .culture .section-title h2,
    .infra .section-title h2{
        margin:5px 0 10px;
        font-size:27px;
        line-height:1.1;
        letter-spacing:-.06em;
    }

    .culture .section-title span,
    .infra .section-title span{
        font-size:12px;
    }

    .culture .section-title p,
    .infra .section-title p{
        font-size:12px;
        line-height:1.55;
    }

    .culture .section-title.center p{
        margin:0 auto 24px;
    }

    .culture-slider-wrap{
        padding:0 38px;
    }

    .culture-slide .slick-slide{
        padding:0 6px;
    }

    .culture-card{
        height:220px;
        border-radius:16px;
    }

    .culture-card .txt{
        left:18px;
        right:18px;
        bottom:18px;
    }

    .culture-card strong{
        font-size:17px;
    }

    .culture-card p{
        font-size:11px;
    }

    .culture-arrow{
        width:38px;
        height:38px;
        margin-top:-19px;
        font-size:22px;
    }

    .culture-dots{
        margin-top:22px;
    }

    .infra{
        max-width:calc(100% - 12px);
        padding:46px 0 56px;
        border-radius:30px 30px 0 0;
    }

    /* ???: ?? ?? ? ? */
    .infra-list{
        grid-template-columns:1fr;
        width:calc(100% - 28px);
        margin-top:28px;
        gap:12px;
    }

    .infra-list li,
    .infra-list li:last-child{
        grid-column:auto;
        width:100%;
    }

    .infra-list a{
        min-height:92px;
        padding:20px 76px 18px 20px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        border-radius:14px;
    }

    .infra-list a strong{
        margin-bottom:6px;
        font-size:17px;
    }

    .infra-list a p{
        font-size:11px;
        line-height:1.45;
    }

    .infra-list a p br{
        display:none;
    }

    .infra-icon-circle{
        right:20px;
        top:50%;
        bottom:auto;
        width:38px;
        height:38px;
        transform:translateY(-50%);
    }

    .infra-icon{
        left:-11px;
        top:7px;
        width:33px;
    }

    /* ?????? ??? ? hover ?? ?? */
    .plus,
    .infra-hover-bg,
    .infra-list a::before{
        display:none;
        animation:none;
    }

    @media (hover:none){
        .infra-list a:hover{
            background:#fff;
            transform:none;
            box-shadow:0 12px 28px rgba(28,73,82,.12);
        }

        .infra-list a:hover strong{color:#07385c}
        .infra-list a:hover p{color:#555}
        .infra-list a:hover .infra-icon-circle{background:#b9e7ee}
        .infra-list a:hover .infra-icon-default{opacity:1}
        .infra-list a:hover .infra-icon-hover{opacity:0}
    }

    .related-inner{
        width:calc(100% - 28px);
        padding:18px 0 20px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:18px;
    }

    .related-left,
    .related-right{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
        width:100%;
    }

    .internal-related strong,
.internal-related h2{
        grid-column:1 / -1;
        margin:0 0 2px;
        font-size:14px;
    }

    .related-left a{
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:0;
        min-height:40px;
        padding:6px;
        border:1px solid #e1e4ed;
        border-radius:6px;
        background:#fff;
    }

    .related-left img{
        width:auto;
        max-width:100%;
        max-height:20px;
    }

    .related-right button{
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:0;
        min-height:38px;
        padding:7px 6px;
        font-size:10px;
        text-align:center;
        white-space:normal;
        word-break:keep-all;
    }

    .footer_container{
        width:calc(100% - 32px);
        padding:30px 0 34px;
    }

    .footer-logo{
        gap:8px;
        margin-bottom:16px;
    }

    .footer-logo img{
        width:102px;
        max-width:38vw;
    }

    .footer-logo strong{
        min-width:0;
        font-size:19px;
        line-height:1.3;
    }

    .address span{
        display:block;
        font-size:11px;
        line-height:1.7;
        word-break:keep-all;
    }

    .privacy{
        justify-content:flex-start;
        gap:9px 14px;
        margin-top:18px;
    }

    .privacy a{
        font-size:11px;
    }
}

@media (max-width:360px){
    .related-left,
    .related-right{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:5px;
    }

    .related-right button{
        padding:6px 4px;
        font-size:9px;
    }

    .infra-list a{
        min-height:86px;
        padding-left:16px;
        padding-right:66px;
    }

    .infra-icon-circle{
        right:16px;
        width:34px;
        height:34px;
    }
}

@media (prefers-reduced-motion:reduce){
    .plus{
        animation:none;
    }
}

/* =========================================================
   FINAL FINISH � ???? ??? ?? / ????? ?? ??
   ========================================================= */

/* Slick ???? ???? ?? ??? ?? ??? ?? ?? */
.culture-slide .slick-list{
    padding-top:0;
    padding-bottom:0;
    margin-top:0;
    margin-bottom:0;
}

.culture-slide .slick-slide,
.culture-slide .slick-slide > div,
.culture-card{
    box-shadow:none;
    filter:none;
}

.culture-card{
    -webkit-filter:none;
}

/* ????? ?? ??? ?? ?? ?? */
.internal-related{
    padding:0;
}

.related-inner{
    min-height:54px;
    padding:9px 0;
    gap:18px;
}

.related-left,
.related-right{
    gap:8px;
}

.internal-related strong,
.internal-related h2{
    font-size:13px;
    line-height:1.2;
}

.related-left img{
    max-height:20px;
}

.related-right button{
    min-height:29px;
    padding:4px 8px;
    font-size:11px;
}

/* ???: ?? ? ?? ????? ? ?? */
@media (max-width:1024px){
    .related-inner{
        min-height:52px;
        padding:8px 0;
        gap:16px;
    }

    .related-left,
    .related-right{
        gap:7px;
    }

    .related-left img{
        max-width:96px;
        max-height:19px;
    }

    .related-right button{
        min-height:28px;
        padding:4px 7px;
        font-size:10px;
    }
}

/* ???: ??? ? ? + ?? 3? ? ?, ?? ?? ??? */
@media (max-width:640px){
    .related-inner{
        width:calc(100% - 24px);
        padding:12px 0 14px;
        gap:12px;
    }

    .related-left,
    .related-right{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
    }

    .internal-related strong,
.internal-related h2{
        margin:0 0 3px;
        font-size:13px;
    }

    .related-left a{
        min-height:32px;
        padding:4px;
        border-radius:5px;
    }

    .related-left img{
        max-height:16px;
    }

    .related-right button{
        min-height:31px;
        padding:4px 3px;
        border-radius:5px;
        font-size:9.5px;
        line-height:1.15;
    }
}

@media (max-width:380px){
    .related-inner{
        width:calc(100% - 18px);
    }

    .related-left,
    .related-right{
        gap:4px;
    }

    .related-right button{
        font-size:9px;
        letter-spacing:-.04em;
    }
}



.service-card-list .hover-icon[src*="icon-pet.png"]{
    width:88px;
    height:88px;
    max-width:none;
    object-fit:contain;
}

/* =========================================================
   LAYOUT CASCADE FIX � !important ?? ? ??? ???
   ========================================================= */
@media (max-width:768px){
.renew-main .hero{
    height:403px;
    min-height:403px;
    max-height:403px;
}
.renew-main .hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.renew-main .service-inner{
    display:block;
    width:min(620px,calc(100% - 40px));
    margin:0 auto;
}
.renew-main .section-title.left{
    width:100%;
    flex:none;
    margin:0 0 32px;
    text-align:center;
}
.renew-main .section-title.left span,
.renew-main .section-title.left h2,
.renew-main .section-title.left p{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
.renew-main .data-map-inner{
    display:flex;
    flex-direction:column;
    gap:28px;
    width:calc(100% - 32px);
    margin:0 auto;
    grid-template-columns:none;
}
.renew-main .map-filter-box{
    order:1;
    width:100%;
    min-height:auto;
    padding:36px 22px 72px;
    border-radius:28px;
}
.renew-main .map-visual-box{
    order:2;
    width:100%;
}
.renew-main .chip-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.renew-main .pin-img{
    right:18px;
    top:28px;
    left:auto;
}
.renew-main .character-img{
    left:8px;
    bottom:-6px;
}
.culture{
    min-height:auto;
    height:auto;
    align-items:flex-start;
}
.culture-slide .slick-slide,
.culture-slide .slick-slide > div{
    height:auto;
}
.culture-card{
    height:clamp(230px,28svh,290px);
    max-height:290px;
}
}
@media (max-width:425px){
.renew-main .hero{
    height:330px;
    min-height:330px;
    max-height:330px;
}
}
@media (min-width:769px){
.renew-main .service-inner{
    display:flex;
    align-items:center;
}
.renew-main .section-title.left{
    flex:0 0 220px;
    width:220px;
    text-align:left;
    margin:0;
}
}


/* =========================================================
   ?? ??: ????? ?? / data-map-bg ?? ?? ?? / ?? ???
   ========================================================= */
.renew-side-nav{
    left:auto;
    right:clamp(16px,1.6vw,28px);
    align-items:flex-end;
}
.renew-side-nav a .label{
    left:auto;
    right:28px;
    transform:translate(6px,-50%);
}
.renew-side-nav a:hover .label,
.renew-side-nav a:focus-visible .label{
    transform:translate(0,-50%);
}
@media (max-width:1100px){
.renew-side-nav{right:12px;left:auto;}
}

/* ?? ??: ?? ?? ~60% ??, ??? 0? ??. ???? max inset?? ?? ?? */
.data-map,
.renew-main .data-map{
    overflow:hidden;
}
.data-map-bg,
.renew-main .data-map-bg{
    --map-side:max(0px, calc((100% - var(--content-width)) / 2));
    left:max(48px, calc(var(--map-side) * 0.4));
    width:calc(var(--map-side) + 470px - max(48px, calc(var(--map-side) * 0.4)));
    max-width:calc(100% - 48px);
    border-radius:28px;
}
@media (max-width:1040px){
.renew-main .data-map-bg{
    --map-side:max(0px, calc((100% - min(var(--content-width), calc(100% - 48px))) / 2));
    left:max(32px, calc(var(--map-side) * 0.35));
    width:calc(var(--map-side) + min(470px, 52vw) - max(32px, calc(var(--map-side) * 0.35)));
    max-width:calc(100% - 32px);
    border-radius:28px;
}
}
@media (max-width:768px){
.renew-main .data-map-bg{
    left:16px;
    width:calc(100% - 32px);
    max-width:none;
    border-radius:24px;
}
}

/* ?? ??? ?? � ?????? ??? ?? ?? ?? */
.renew-main .section-title p,
.renew-main .map-filter-box p{
    font-size:16px;
    line-height:1.65;
}
.renew-main .hover-box p{
    font-size:15px;
    line-height:1.5;
}
.renew-main .hover-box strong{
    font-size:20px;
}
.renew-main .culture-card p{
    font-size:15px;
}
.renew-main .culture-card strong{
    font-size:21px;
}
.renew-main .infra-list a p{
    font-size:15px;
}
.renew-main .map-legend li{
    font-size:13px;
}
.renew-main .chip-list button,
.renew-main .select-area select,
.renew-main .select-area label,
.renew-main .filter-area strong{
    font-size:14px;
}
.renew-main .map-search-btn{font-size:16px;}
.renew-main .map-filter-box > span{font-size:13px;}
.renew-main .map-filter-box h2{font-size:clamp(28px,2.4vw,36px);}

@media (max-width:1100px){
.renew-main .hover-box p{font-size:14px;}
.renew-main .section-title p,
.renew-main .map-filter-box p{font-size:15px;}
.renew-main .culture-card p{font-size:14px;}
.renew-main .infra-list a p{font-size:14px;}
}
@media (max-width:900px){
.renew-main .hover-box p{font-size:14px;}
.renew-main .chip-list button,
.renew-main .select-area select,
.renew-main .select-area label,
.renew-main .filter-area strong{font-size:14px;}
.renew-main .map-search-btn{font-size:15px;}
.renew-main .map-filter-box > span{font-size:13px;}
.renew-main .culture-card p{font-size:14px;}
}
@media (max-width:768px){
.renew-main .hover-box p{font-size:13px;}
.renew-main .section-title p,
.renew-main .map-filter-box p{font-size:14px;}
.renew-main .culture-card p{font-size:13px;}
.renew-main .infra-list a p{font-size:14px;}
.renew-main .chip-list button,
.renew-main .select-area select,
.renew-main .select-area label,
.renew-main .filter-area strong{font-size:14px;}
.renew-main .map-search-btn{font-size:15px;}
}
@media (max-width:480px){
.renew-main .hover-box p{font-size:13px;}
.renew-main .culture-card p{font-size:13px;}
.renew-main .chip-list button,
.renew-main .select-area select,
.renew-main .select-area label{font-size:13px;}
.renew-main .map-search-btn{font-size:14px;}
}


/* 메인화면 팝업 — 헤더 로고 아래, 로고 시작점보다 살짝 우측 */
.mainPopup{
    position:fixed;
    z-index:9990;
    top:90px;
    left:max(48px, calc((100vw - min(var(--header-width), calc(100vw - 56px))) / 2 + 20px));
    width:fit-content;
    min-width:min(480px, 90vw);
    max-width:90vw;
    height:auto;
    box-shadow:5px 5px 10px rgba(0,0,0,.5);
}
.mainPopup .mainPopupCon{
    position:relative;
    padding-bottom:0;
    width:100% !important;
    min-width:inherit;
    overflow:hidden;
    background:#fff;
    border:1px solid #444;
    box-sizing:border-box;
}
.mainPopup .mainPopupCon img{
    display:block;
    position:absolute;
    top:50%;
    transform:translatey(-50%);
    width:100%;
}
.mainPopup .mainPopupCon .img{
    position:absolute;
    top:0;
    left:auto;
    right:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:hidden;
}
.mainPopup .mainPopupCon .img a{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    text-decoration:none;
}
.mainPopup .mainPopupCon .img img,
.mainPopup .mainPopupCon > img{
    display:block;
    position:absolute;
    top:50%;
    transform:translatey(-50%);
    width:100%;
    height:auto;
    max-width:90vw;
}
.mainPopup .mainPopupBar{
    width:100%;
    height:35px;
    background:#444;
    color:#fff;
    font-size:14px;
    padding:0 15px;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.mainPopup .mainPopupBar label{
    display:flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
}
.mainPopup .mainPopupBar button{
    color:inherit;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:14px;
}
.mainPopup .mainPopupBar button label{cursor:pointer;}
.mainPopup .mainPopupBar button input,
.mainPopup .mainPopupBar label input{
    margin-right:5px;
    vertical-align:initial;
}
.mainPopup .slidepopBtn{
    position:absolute;
    bottom:43px;
    right:5px;
    background:rgba(255,255,255,.7);
    border-radius:3px;
    padding:3px;
}
.mainPopup .slidepopBtn li{
    float:left;
    margin:0 5px;
    font-size:16px;
    color:#444;
    cursor:pointer;
}
.mainPopup .slick-slide > div{position:relative;}
.mainPopup .slick-slide .imgBox{position:relative;padding-bottom:63.6%;}

@media (max-width:768px){
    .mainPopup{
        top:72px;
        left:5%;
        min-width:min(320px, 90vw);
    }
    .mainPopup .mainPopupBar,
    .mainPopup .mainPopupBar button {font-size: 13px;}
    .mainPopup .mainPopupBar i {margin-top: 2px;}
}

@media (max-width:425px){
    .mainPopup{top:64px;min-width:min(280px, 90vw);}
    .mainPopup .mainPopupBar{font-size:12px;height:30px;}
    .mainPopup .mainPopupBar button{line-height:30px;font-size:12px;}
}

/*TODO: 만족도조사 팝업창 - 삭제예정(270822)*/
.subPopup{
    position:fixed;
    z-index:9991;
    top:55px;
    left:max(48px, calc((100vw - min(var(--header-width), calc(100vw - 56px))) / 2 + 235px));
    width:fit-content;
    min-width:min(480px, 90vw);
    max-width:90vw;
    height:auto;
    box-shadow:5px 5px 10px rgba(0,0,0,.5);
}
.subPopup .subPopupCon{
    position:relative;
    height:800px;
    min-width:inherit;
    overflow:hidden;
    padding-bottom:0;
    background:#fff;
    border:1px solid #444;
    box-sizing:border-box;
}
.subPopup .subPopupCon .img{
    position:relative;
    top:0;
    left:auto;
    right:auto;
    width:fit-content;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:hidden;
}
.subPopup .subPopupCon .img a{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    text-decoration:none;
}
.subPopup .subPopupCon .img img,
.subPopup .subPopupCon > img{
    display:block;
    height:800px;
    width:auto;
    max-width:90vw;
    transform:none;
}

.subPopup.no-link .subPopupCon,
.subPopup.no-link .subPopupCon .img img,
.subPopup.no-link .subPopupCon > img {
    height: 700px;
}

.subPopup .subPopupBar{
    width:100%;
    height:35px;
    background:#444;
    color:#fff;
    font-size:14px;
    padding:0 15px;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.subPopup .subPopupBar label{
    display:flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
}
.subPopup .subPopupBar button{
    color:inherit;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:14px;
}
.subPopup .subPopupBar button label{cursor:pointer;}
.subPopup .subPopupBar button input,
.subPopup .subPopupBar label input{
    margin-right:5px;
    vertical-align:initial;
}

@media (max-width:1024px){
    .subPopup{
       left: 20%;
    }

    .subPopup.no-link{
        min-width:0;
    }
    
    .subPopup .subPopupCon,
    .subPopup .subPopupCon .img img,
    .subPopup .subPopupCon > img{
        height:650px;
    }
    
    .subPopup.no-link .subPopupCon,
    .subPopup.no-link .subPopupCon .img img,
    .subPopup.no-link .subPopupCon > img {
        height: 600px;
    }
}

@media (max-width:768px){
    .subPopup{
        top:72px;
        left:5%;
        min-width:min(320px, 90vw);
    }
    .subPopup .subPopupCon,
    .subPopup .subPopupCon .img img,
    .subPopup .subPopupCon > img,
    .subPopup.no-link .subPopupCon,
    .subPopup.no-link .subPopupCon .img img,
    .subPopup.no-link .subPopupCon > img {height:550px}
    .subPopup .subPopupBar,
    .subPopup .subPopupBar button {font-size: 13px;}
}

@media (max-width:425px){
    .subPopup{
        top:64px;
        left:2vw;
        width:96vw;
        min-width:96vw;
        max-width:96vw;
    }
    .subPopup .subPopupCon,
    .subPopup.no-link .subPopupCon{
        width:100%;
        height:auto;
    }
    .subPopup .subPopupCon .img,
    .subPopup .subPopupCon .img a{width:100%;height:auto;}
    .subPopup .subPopupCon .img img,
    .subPopup .subPopupCon > img,
    .subPopup.no-link .subPopupCon .img img,
    .subPopup.no-link .subPopupCon > img{
        width:100%;
        height:auto;
        max-width:none;
    }
    .subPopup .subPopupBar{font-size:12px;height:30px;}
    .subPopup .subPopupBar button{line-height:30px;font-size:12px;}
}



/* ?? img? ??? ???? ?? opacity ?? */
.renew-main .infra-hover-bg{
    filter:none !important;
}

/* =========================================================
   ??�??�??? / ??? ?? ?? ?? ???? ??
   - JSP ?? ?? ?? CSS Grid ??
   - JS ???? ?? ??
   ========================================================= */

/* ================= ?? � ?? � ??? ================= */

/* ?? img ? ?? ??: ???? ?? ?? */
.renew-main .infra-list a::before{
    content:none;
    display:none;
}

.renew-main .infra-hover-bg{
    position:absolute;
    left:-42px;
    bottom:-46px;
    z-index:1;
    display:block;
    width:190px;
    height:160px;
    max-width:none;
    opacity:0;
    filter:none;
    transform:none;
    transition:opacity .25s ease;
    pointer-events:none;
}

.renew-main .infra-list a:hover .infra-hover-bg,
.renew-main .infra-list a:focus-visible .infra-hover-bg{
    opacity:1;
    transform:none;
}


/* ================= 지도로 보는 경남 ================= */

.renew-main #renewDataMap{
    position:relative;
    overflow:hidden;
    background:#fff;
    --map-filter-control-width:100%;
    --map-char-slot:clamp(112px,13.5vw,144px);
    --map-char-gap:4px;
    --map-char-left:clamp(4px,1vw,12px);
    /* 필터 박스 padding-left와 캐릭터 left 좌표계 보정 → 버튼이 토끼에 붙도록 */
    --map-char-btn-pad:max(0px,calc(var(--map-char-left) + var(--map-char-slot) + var(--map-char-gap) - clamp(18px,2.8vw,40px)));
}

.renew-main #renewDataMap .map-filter-controls,
.renew-main #renewDataMap .filter-area,
.renew-main #renewDataMap .chip-list,
.renew-main #renewDataMap .map-stat-cards,
.renew-main #renewDataMap .map-search-btn,
.renew-main #renewDataMap .map-action-btns{
    width:var(--map-filter-control-width);
    max-width:100%;
    box-sizing:border-box;
}

.renew-main #renewDataMap .map-stat-cards{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
}

.renew-main #renewDataMap .map-filter-title-row{
    position:relative;
    display:block;
    width:100%;
    margin:4px 0 8px;
}

.renew-main #renewDataMap .map-stat-card{
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.94);
    box-shadow:0 4px 12px rgba(230,83,103,.06);
}

.renew-main #renewDataMap .map-stat-card__title{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 13px;
    font-size:15px;
    font-weight:700;
    line-height:1.2;
    color:#151b45;
    letter-spacing:-.03em;
}

.renew-main #renewDataMap .map-stat-card__head{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 13px;
}

.renew-main #renewDataMap .map-stat-card__head .map-stat-card__title{
    flex:1;
    min-width:0;
    margin:0;
}

.renew-main #renewDataMap .map-stat-viz-toggle{
    position:relative;
    display:flex;
    align-items:center;
    flex:0 0 auto;
    margin:0;
    cursor:pointer;
}

.renew-main #renewDataMap .map-stat-viz-toggle input{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:pointer;
}

.renew-main #renewDataMap .map-stat-viz-check{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border:2px solid #b8c0cc;
    border-radius:6px;
    background:#fff;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.renew-main #renewDataMap .map-stat-viz-check i{
    font-size:15px;
    line-height:1;
}

.renew-main #renewDataMap .map-stat-viz-check__on{
    display:none;
    color:#e83261;
}

.renew-main #renewDataMap .map-stat-viz-check__off{
    display:block;
    color:#8b94a5;
}

.renew-main #renewDataMap .map-stat-viz-toggle input:checked + .map-stat-viz-check{
    border-color:#e83261;
    background:rgba(232,50,97,.1);
    box-shadow:0 0 0 1px rgba(232,50,97,.18);
}

.renew-main #renewDataMap .map-stat-viz-toggle input:checked + .map-stat-viz-check .map-stat-viz-check__off{
    display:none;
}

.renew-main #renewDataMap .map-stat-viz-toggle input:checked + .map-stat-viz-check .map-stat-viz-check__on{
    display:block;
}

.renew-main #renewDataMap .map-stat-viz-toggle input:focus-visible + .map-stat-viz-check{
    outline:2px solid rgba(232,50,97,.35);
    outline-offset:2px;
}

.renew-main #renewDataMap .map-stat-viz-block.is-off .map-stat-card__body{
    opacity:.55;
}

.renew-main #renewDataMap .map-stat-viz-block.is-off .map-stat-card__body select{
    cursor:not-allowed;
}

.renew-main #renewDataMap .map-stat-card .select-area{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    width:100%;
    margin-top:0;
}

/* .renew-main #renewDataMap .map-stat-card .select-area + .select-area{
    margin-top:8px;
} */

.renew-main #renewDataMap .map-stat-card .select-area label{
    width:auto;
    font-size:12px;
    font-weight:500;
    color:#666;
}

.renew-main #renewDataMap .map-stat-card .select-area select{
    width:100%;
    height:40px;
    min-height:40px;
    flex:none;
    padding:0 30px 0 14px;
    font-size:13px;
}

/* ---------- PC / 노트북: 배경 + 필터 | 일정 간격 | 지도 ---------- */
@media (min-width:769px){
    .renew-main #renewDataMap{
        min-height:auto;
        padding:clamp(40px,5vw,56px) 0 clamp(88px,10vw,120px);
        display:flex;
        align-items:center;
        overflow:visible;
        --map-inner-w:min(var(--content-width),calc(100% - 80px));
        --map-filter-w:clamp(400px,28vw,440px);
        --map-bg-tail:clamp(56px,6vw,96px);
    }

    .renew-main #renewDataMap .data-map-inner{
        position:relative;
        z-index:2;
        display:grid;
        grid-template-columns:var(--map-filter-w) minmax(0,1fr);
        align-items:center;
        gap:clamp(60px,5vw,84px);
        width:var(--map-inner-w);
        max-width:none;
        margin:0 auto;
    }

    .renew-main #renewDataMap > .data-map-bg{
        display:block;
        position:absolute;
        left:0;
        top:clamp(40px,5vw,56px);
        bottom:clamp(88px,10vw,120px);
        height:auto;
        width:calc((100% - var(--map-inner-w)) / 2 + var(--map-filter-w) + var(--map-bg-tail));
        min-width:0;
        max-width:none;
        --map-side:unset;
        transform:none;
        border-radius:0 clamp(20px,2vw,28px) clamp(20px,2vw,28px) 0;
        background:#FEF1EC;
        z-index:0;
        pointer-events:none;
    }

    .renew-main #renewDataMap > .data-map-bg-img{
        display:none;
    }

    .renew-main #renewDataMap .map-filter-box{
        position:relative;
        z-index:1;
        width:100%;
        min-width:0;
        min-height:0;
        margin:0;
        margin-top:10px;
        padding:48px 18px 84px 40px;
        background:transparent;
    }

    .renew-main #renewDataMap .map-filter-box:before{
        left:-36px;
        top:52px;
    }

    .renew-main #renewDataMap .map-filter-box > span{
        margin-top:0;
    }

    .renew-main #renewDataMap .map-filter-title-row{
        position:static;
    }

    .renew-main #renewDataMap .map-filter-title-row h2{
        margin:0;
        line-height:1.16;
    }

    .renew-main #renewDataMap .map-filter-title-row .pin-img{
        position:absolute;
        right:clamp(10px,1.4vw,18px);
        top:clamp(36px,4.5vw,48px);
        width:clamp(36px,4.5vw,54px);
        z-index:2;
    }

    .renew-main #renewDataMap .map-filter-title-row .character-img{
        position:absolute;
        left:var(--map-char-left);
        bottom:84px;
        top:auto;
        width:var(--map-char-slot);
        max-width:var(--map-char-slot);
        max-height:144px;
        height:auto;
        object-fit:contain;
        object-position:center bottom;
        transform:none;
        z-index:6;
        pointer-events:none;
    }

    .renew-main #renewDataMap .map-filter-box p{
        margin:0;
        line-height:1.5;
        font-size:14px;
    }

    .renew-main #renewDataMap .filter-area strong{
        margin:18px 0 8px;
    }

    .renew-main #renewDataMap .filter-area + .map-stat-cards{
        margin-top:12px;
    }

    .renew-main #renewDataMap .map-stat-cards + .map-search-btn,
    .renew-main #renewDataMap .map-stat-cards + .map-action-btns{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        z-index:4;
        margin-top:12px;
        transform:none;
    }

    .renew-main #renewDataMap .character-img{
        position:absolute;
        left:var(--map-char-left);
        bottom:84px;
        top:auto;
        width:var(--map-char-slot);
        max-width:var(--map-char-slot);
        max-height:144px;
        height:auto;
        object-fit:contain;
        object-position:center bottom;
        transform:none;
        z-index:6;
        pointer-events:none;
    }

    .renew-main #renewDataMap .pin-img{
        position:absolute;
        right:clamp(10px,1.4vw,18px);
        top:clamp(36px,4.5vw,48px);
        width:clamp(36px,4.5vw,54px);
    }

    .renew-main #renewDataMap .map-visual-box{
        position:relative;
        z-index:1;
        display:grid;
        grid-template-columns:clamp(128px,11vw,176px) minmax(0,1fr);
        align-items:center;
        align-self:center;
        column-gap:clamp(10px,1.4vw,18px);
        row-gap:0;
        width:100%;
        min-width:0;
        min-height:0;
        padding:0 clamp(52px,5.5vw,88px) 0 clamp(20px,2.5vw,36px);
        overflow:visible;
        box-sizing:border-box;
    }

    .renew-main #renewDataMap .circle-deco{
        display:block;
        position:absolute;
        right:clamp(0px,0.5vw,8px);
        top:clamp(36px,4.5vw,52px);
        width:clamp(42px,4.5vw,58px);
        height:clamp(42px,4.5vw,58px);
        grid-column:auto;
        grid-row:auto;
        margin:0;
        z-index:12;
    }

    .renew-main #renewDataMap .circle-text{
        display:block;
        position:absolute;
        right:clamp(-6px,-0.4vw,2px);
        top:clamp(24px,3.2vw,40px);
        width:clamp(64px,6.5vw,104px);
        height:clamp(64px,6.5vw,104px);
        grid-column:auto;
        grid-row:auto;
        margin:0;
        z-index:13;
    }

    .renew-main #renewDataMap .data-svg-map{
        position:relative;
        grid-column:2;
        grid-row:1;
        width:100%;
        max-width:100%;
        min-width:0;
        margin:0;
        z-index:2;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        position:static;
        grid-column:1;
        grid-row:1;
        align-self:end;
        justify-self:stretch;
        width:100%;
        max-width:100%;
        margin:0 0 clamp(14px,2.2vw,26px);
        z-index:7;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        padding:clamp(9px,1vw,14px) clamp(10px,1.1vw,16px);
        border-radius:clamp(10px,1.2vw,14px);
        background:rgba(255,255,255,.96);
        box-shadow:0 12px 26px rgba(43,65,90,.12);
    }

    .renew-main #renewDataMap .map-legend-title{
        font-size:clamp(11px,1vw,13px);
        line-height:1.35;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:clamp(10px,.95vw,12px);
        gap:clamp(5px,.6vw,8px);
    }

    .renew-main #renewDataMap .legend-color{
        width:clamp(12px,1.1vw,16px);
        height:clamp(12px,1.1vw,16px);
    }

    .renew-main #renewDataMap .map-legend{
        position:static;
        display:block;
        width:auto;
        max-width:none;
        margin:0;
        padding:0;
        background:transparent;
        box-shadow:none;
    }
}

/* 1201~1500: 필터·지도 함께 축소 */
@media (min-width:1201px) and (max-width:1500px){
    .renew-main #renewDataMap .data-svg-map{
        width:100%;
        max-width:100%;
    }

    .renew-main #renewDataMap .map-visual-box{
        grid-template-columns:clamp(120px,10vw,160px) minmax(0,1fr);
        column-gap:clamp(8px,1.2vw,14px);
        padding:0 clamp(48px,5vw,80px) 0 clamp(18px,2.2vw,32px);
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        margin-bottom:clamp(12px,2vw,20px);
    }

    .renew-main #renewDataMap .map-filter-title-row .character-img{
        left:var(--map-char-left);
        bottom:84px;
        width:var(--map-char-slot);
        max-width:var(--map-char-slot);
        max-height:144px;
        transform:none;
        z-index:6;
        pointer-events:none;
    }

    .renew-main #renewDataMap .character-img{
        left:var(--map-char-left);
        bottom:84px;
        width:var(--map-char-slot);
        max-width:var(--map-char-slot);
        max-height:144px;
        transform:none;
        z-index:6;
        pointer-events:none;
    }

    .renew-main #renewDataMap .map-filter-box:before{
        left:-28px;
        font-size:58px;
    }
}

/* 1041~1200: 필터 컨트롤·카드 반응형 축소 */
@media (min-width:1041px) and (max-width:1200px){
    .renew-main #renewDataMap .map-filter-title-row h2,
    .renew-main #renewDataMap .map-filter-box h2{
        font-size:clamp(26px,2.15vw,32px);
    }

    .renew-main #renewDataMap .map-stat-card{
        padding:11px 12px;
    }

    .renew-main #renewDataMap .map-stat-card__title,
    .renew-main #renewDataMap .map-stat-card__head .map-stat-card__title{
        font-size:14px;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        margin-bottom:clamp(10px,1.8vw,18px);
    }
}

/* 769~1199: 필터·지도 비율 축소 */
@media (min-width:769px) and (max-width:1199px){
    .renew-main #renewDataMap{
        --map-inner-w:calc(100% - clamp(40px,5vw,56px));
        --map-filter-w:clamp(280px,34vw,380px);
        --map-bg-tail:clamp(48px,5vw,80px);
    }

    .renew-main #renewDataMap .data-map-inner{
        grid-template-columns:var(--map-filter-w) minmax(0,1fr);
        gap:clamp(28px,3.5vw,48px);
        width:var(--map-inner-w);
    }

    .renew-main #renewDataMap .map-filter-box{
        padding:44px 14px 72px 32px;
        margin-top:8px;
    }

    .renew-main #renewDataMap .map-filter-box:before{
        left:-18px;
        top:40px;
        font-size:50px;
    }

    .renew-main #renewDataMap .map-filter-title-row .pin-img{
        right:clamp(8px,1.2vw,14px);
        top:clamp(32px,4vw,44px);
        width:clamp(32px,4vw,46px);
    }

    .renew-main #renewDataMap .map-filter-title-row .character-img{
        left:var(--map-char-left);
        bottom:84px;
        width:var(--map-char-slot);
        max-width:var(--map-char-slot);
        max-height:144px;
        transform:none;
        z-index:6;
        pointer-events:none;
    }

    .renew-main #renewDataMap .map-visual-box{
        padding-right:clamp(16px,2vw,28px);
    }

    .renew-main #renewDataMap .circle-deco,
    .renew-main #renewDataMap .circle-text{
        display:none;
    }
}

/* 769~1040: 레거시 .data-map 규칙보다 우선 — 컨트롤 너비·검색 버튼 정렬 */
@media (min-width:769px) and (max-width:1040px){
    .renew-main #renewDataMap.data-map{
        display:flex;
        align-items:center;
    }

    .renew-main #renewDataMap .map-filter-box{
        width:100%;
        min-height:0;
        padding:44px 14px 80px 32px;
        text-align:left;
    }

    .renew-main #renewDataMap .filter-area,
    .renew-main #renewDataMap .chip-list,
    .renew-main #renewDataMap .map-stat-cards,
    .renew-main #renewDataMap .map-search-btn,
    .renew-main #renewDataMap .map-action-btns{
        width:100%;
        max-width:100%;
        margin-left:0;
        margin-right:0;
        min-width:0;
        box-sizing:border-box;
    }

    .renew-main #renewDataMap .chip-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .renew-main #renewDataMap .map-search-btn,
    .renew-main #renewDataMap .map-action-btns{
        position:relative;
        left:auto;
        bottom:auto;
        transform:none;
    }

    .renew-main #renewDataMap .map-action-btns .map-search-btn,
    .renew-main #renewDataMap .map-action-btns .map-detail-btn{
        width:100%;
        max-width:100%;
        min-width:0;
    }
}


/* ---------- 768 이하: 완전한 한 줄 네모 배경 + 지도 아래 배치 ---------- */
@media (max-width:768px){
    .renew-main #renewDataMap{
        display:block;
        min-height:auto;
        padding:0 0 54px;
        overflow:hidden;
    }

    .renew-main #renewDataMap > .data-map-bg{
        display:none;
    }

    .renew-main #renewDataMap .data-map-inner{
        display:grid;
        grid-template-columns:1fr;
        gap:56px;
        width:100%;
        max-width:none;
        margin:0;
    }

    .renew-main #renewDataMap .map-filter-box{
        position:relative;
        width:100%;
        max-width:none;
        min-height:0;
        margin:0;
        padding:36px max(32px,calc((100% - 600px) / 2)) 76px;
        border-radius:0;
        background:#FEF1EC;
        text-align:center;
    }

    .renew-main #renewDataMap .map-filter-box:before{
        content:"DATAMAP";
        left:50%;
        top:18px;
        writing-mode:horizontal-tb;
        transform:translateX(-50%);
        color:rgba(243,93,108,.07);
        font-size:58px;
        line-height:1;
        letter-spacing:.06em;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .map-filter-box > span,
    .renew-main #renewDataMap .map-filter-title-row,
    .renew-main #renewDataMap .map-filter-box p{
        position:relative;
        z-index:3;
        text-align:center;
    }

    .renew-main #renewDataMap .map-filter-box > span{
        margin-bottom:4px;
    }

    .renew-main #renewDataMap .map-filter-title-row{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:clamp(6px,2vw,12px);
        width:min(500px,calc(100% - 40px));
        margin:5px auto 8px;
    }

    .renew-main #renewDataMap .map-filter-title-row h2{
        flex:0 1 auto;
        margin:0;
        line-height:1.18;
        text-align:center;
        word-break:keep-all;
    }

    .renew-main #renewDataMap .map-filter-title-row .character-img{
        position:relative;
        left:auto;
        top:auto;
        bottom:auto;
        width:clamp(44px,12vw,58px);
        flex-shrink:0;
        transform:none;
        z-index:auto;
        pointer-events:auto;
    }

    .renew-main #renewDataMap .map-filter-title-row .pin-img{
        position:relative;
        right:auto;
        top:auto;
        display:block;
        width:clamp(38px,10vw,46px);
        flex-shrink:0;
    }

    .renew-main #renewDataMap .map-filter-box p{
        width:min(500px,calc(100% - 40px));
        margin:0 auto;
        line-height:1.55;
        word-break:keep-all;
    }

    .renew-main #renewDataMap .map-filter-box p br{
        display:block;
    }

    .renew-main #renewDataMap .filter-area,
    .renew-main #renewDataMap .map-stat-cards {
        position:relative;
        z-index:3;
        width:min(500px,calc(100% - 40px));
        max-width:none;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
    }
    
    .renew-main #renewDataMap .map-stat-card .select-area {
        position:relative;
        z-index:3;
        width:min(500px,calc(100%));
        max-width:none;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
    }

    .renew-main #renewDataMap .filter-area strong{
        margin-top:36px;
    }

    .renew-main #renewDataMap .chip-list{
        width:100%;
        max-width:none;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .renew-main #renewDataMap .filter-area + .map-stat-cards{
        margin-top:14px;
    }

    .renew-main #renewDataMap .map-stat-cards + .map-search-btn,
    .renew-main #renewDataMap .map-stat-cards + .map-action-btns{
        position:relative;
        left:auto;
        bottom:auto;
        z-index:4;
        width:min(500px,calc(100% - 40px));
        max-width:none;
        height:auto;
        margin:12px auto 0;
        padding-left:0;
        transform:none;
    }
    .renew-main #renewDataMap .map-stat-cards + .map-search-btn{
        height:52px;
    }
    .renew-main #renewDataMap .map-action-btns .map-search-btn, 
    .renew-main #renewDataMap .map-action-btns .map-detail-btn{
        height:52px;
    }

    .renew-main #renewDataMap .map-visual-box{
        position:relative;
        display:block;
        width:calc(100% - 32px);
        max-width:760px;
        min-height:0;
        margin:0 auto;
        padding:0;
        overflow:visible;
    }

    .renew-main #renewDataMap .data-svg-map{
        width:100%;
        max-width:720px;
        min-width:0;
        margin:0 auto;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        position:absolute;
        left:10px;
        bottom:18px;
        right:auto;
        z-index:8;
        margin:0;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        width:auto;
        max-width:150px;
        padding:11px 12px;
    }

    .renew-main #renewDataMap .map-legend{
        position:static;
        display:block;
        width:auto;
        max-width:none;
        margin:0;
        padding:0;
    }

    .renew-main #renewDataMap .circle-deco,
    .renew-main #renewDataMap .circle-text{
        display:none;
    }
}

@media (max-width:560px){
    .renew-main #renewDataMap .map-filter-box{
        padding:28px 20px 72px;
    }

    .renew-main #renewDataMap .map-filter-box:before{
        top:14px;
        font-size:44px;
    }

    .renew-main #renewDataMap .map-filter-title-row h2,
    .renew-main #renewDataMap .map-filter-box h2{
        width:auto;
        max-width:none;
        font-size:28px;
    }

    .renew-main #renewDataMap .map-filter-box p{
        width:min(500px,calc(100% - 40px));
        font-size:13px;
    }

    .renew-main #renewDataMap .pin-img{
        display:block;
    }

    .renew-main #renewDataMap .filter-area strong{
        margin-top:30px;
    }

    .renew-main #renewDataMap .map-stat-card .select-area{
        flex-direction:column;
        align-items:stretch;
        gap:6px;
    }

    .renew-main #renewDataMap .map-stat-card .select-area label{
        width:auto;
    }

    .renew-main #renewDataMap .map-stat-cards + .map-search-btn,
    .renew-main #renewDataMap .map-stat-cards + .map-action-btns{
        width:calc(100% - 40px);
        height:auto;
        margin-top:12px;
        padding-left:0;
        font-size:14px;
    }
    .renew-main #renewDataMap .map-stat-cards + .map-search-btn{
        height:46px;
    }
    .renew-main #renewDataMap .map-action-btns .map-search-btn, 
    .renew-main #renewDataMap .map-action-btns .map-detail-btn{
        height:46px;
        font-size:14px;
    }

    .renew-main #renewDataMap .character-img{
        position:relative;
        left:auto;
        top:auto;
        bottom:auto;
        width:clamp(44px,12vw,52px);
    }

    .renew-main #renewDataMap .map-visual-box{
        width:calc(100% - 20px);
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        left:4px;
        right:auto;
        bottom:8px;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        max-width:132px;
        padding:9px 10px;
    }

    .renew-main #renewDataMap .map-legend li{
        font-size:10px;
        gap:7px;
    }

    .renew-main #renewDataMap .legend-color{
        width:13px;
        height:13px;
    }
}

/* =========================================================
   2026-07-14 ????? 3?? / ?? ?? ?? ??
   ========================================================= */

/* ================= ????? ================= */

/* ???? ??? ?? ?? ??? */
/* .renew-main #renewMainService .service-card-list > li:nth-child(3){
    display:none !important;
} */

/* PC: ?? 3?? ??? ?? ?? ??? ???? ??? */
@media (min-width:769px){
    .renew-main #renewMainService .service-card-list{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:clamp(22px,2.3vw,38px);
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(1),
    .renew-main #renewMainService .service-card-list > li:nth-child(3){
        transform:translateY(-9px);
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(0),
    .renew-main #renewMainService .service-card-list > li:nth-child(2){
        transform:translateY(12px);
    }

    .renew-main #renewMainService .service-card-list > li > a{
        width:100%;
        max-height:220px;
        aspect-ratio:1.42 / 1;
    }
}

/* 1200 ????? ??? ?? 3? ??? ?? ?? ???? */
@media (min-width:769px) and (max-width:1199px){
    .renew-main #renewMainService .service-card-list{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:clamp(14px,1.8vw,22px);
    }

    .renew-main #renewMainService .service-card-list > li > a{
        aspect-ratio:1.3 / 1;
    }
}

/* ???: ? 2? + ?? 1?, ?? ??? ? ? ? ?? ???? ??? ? ?? */
@media (max-width:768px){
    .renew-main #renewMainService .service-card-list{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
        width:min(560px,100%);
    }

    .renew-main #renewMainService .service-card-list > li,
    .renew-main #renewMainService .service-card-list > li:nth-child(1),
    .renew-main #renewMainService .service-card-list > li:nth-child(2),
    .renew-main #renewMainService .service-card-list > li:nth-child(4){
        transform:none;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(4){
        grid-column:1 / -1;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(1) > a,
    .renew-main #renewMainService .service-card-list > li:nth-child(2) > a{
        aspect-ratio:1.12 / 1;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(4) > a{
        width:100%;
        max-height:190px;
        aspect-ratio:2.35 / 1;
    }
}

/* ?????? ?? 2 + 1 ??? ???? ?? ??? ? ?? */
@media (max-width:480px){
    .renew-main #renewMainService .service-card-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(1) > a,
    .renew-main #renewMainService .service-card-list > li:nth-child(2) > a{
        aspect-ratio:1 / 1;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(4){
        grid-column:1 / -1;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(4) > a{
        max-height:150px;
        aspect-ratio:2.45 / 1;
    }
}


/* ================= ?? ?? ================= */

/* ?? ??? ?? ??? ?? ??? ?? ?? ?? ?? */
.renew-main #renewDataMap .map-legend-wrap{
    background:rgba(255,255,255,.97);
    border-radius:14px;
    box-shadow:0 12px 26px rgba(43,65,90,.13);
}

.renew-main #renewDataMap .map-legend-title{
    margin:0 0 10px;
    padding:0;
}

/* 769~1199: 범례 지도 아래 중앙 + 모바일형 줄바꿈 */
@media (min-width:769px) and (max-width:1199px){
    .renew-main #renewDataMap .map-visual-box{
        display:flex;
        flex-direction:column;
        align-items:center;
        align-self:center;
        gap:clamp(20px,2.5vw,28px);
        min-height:0;
        padding:0 clamp(16px,2vw,28px) 0 clamp(20px,2.5vw,36px);
        overflow:visible;
    }

    .renew-main #renewDataMap .circle-deco,
    .renew-main #renewDataMap .circle-text{
        display:none;
    }

    .renew-main #renewDataMap .data-svg-map{
        order:1;
        grid-column:auto;
        grid-row:auto;
        width:100%;
        max-width:100%;
        margin:0;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        order:2;
        position:relative;
        grid-column:auto;
        grid-row:auto;
        align-self:center;
        left:auto;
        right:auto;
        bottom:auto;
        top:auto;
        width:100%;
        max-width:100%;
        margin:clamp(8px,1vw,14px) auto 0;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        display:block;
        padding:clamp(14px,1.6vw,18px) clamp(16px,2vw,22px);
        box-sizing:border-box;
        overflow:visible;
    }

    .renew-main #renewDataMap .map-legend-title{
        display:block;
        width:100%;
        margin:0 0 clamp(10px,1.2vw,12px);
        font-size:clamp(11px,1vw,12px);
        line-height:1.35;
        white-space:normal;
        word-break:keep-all;
    }

    .renew-main #renewDataMap .map-legend{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        gap:clamp(8px,1vw,10px) clamp(12px,1.4vw,18px);
        width:100%;
        max-width:100%;
        padding:0;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        display:flex;
        flex:0 0 auto;
        align-items:center;
        margin:0;
        padding:0;
        gap:clamp(5px,.6vw,8px);
        font-size:clamp(10px,.95vw,12px);
        line-height:1.35;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .legend-color{
        width:clamp(11px,1vw,14px);
        height:clamp(11px,1vw,14px);
        flex:0 0 clamp(11px,1vw,14px);
        border-radius:3px;
    }
}

/* 769~920: 좁은 태블릿 — 3열 그리드 + 왼쪽 여백 */
@media (min-width:769px) and (max-width:920px){
    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        align-self:flex-start;
        margin-left:clamp(8px,1.2vw,14px);
        margin-right:auto;
        width:calc(100% - clamp(8px,1.2vw,14px));
        max-width:calc(100% - clamp(8px,1.2vw,14px));
    }

    .renew-main #renewDataMap .map-legend{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        justify-content:stretch;
        gap:clamp(8px,1vw,10px) clamp(6px,.8vw,8px);
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        min-width:0;
        white-space:normal;
        word-break:keep-all;
        font-size:clamp(10px,1.05vw,11px);
    }
}

/* 769~940: 좌측 범례열 규칙 비활성(1199 이하는 지도 아래 배치) */
@media (min-width:769px) and (max-width:940px){
    .renew-main #renewDataMap .map-visual-box{
        gap:clamp(10px,1.2vw,14px);
    }
}

/* ??? 426~768: ???? ?? ?? ??? ?? ??? ??? ??? ?? */
@media (min-width:426px) and (max-width:768px){
    .renew-main #renewDataMap .map-visual-box{
        position:relative;
        display:block;
        padding-left:0;
        padding-right:0;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        position:absolute;
        left:14px;
        bottom:18px;
        right:auto;
        width:154px;
        max-width:154px;
        margin:0;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        padding:12px 13px;
    }

    .renew-main #renewDataMap .map-legend{
        display:block;
        width:auto;
        max-width:none;
        padding:0;
    }

    .renew-main #renewDataMap .map-legend-title{
        font-size:12px;
        white-space:normal;
    }

    .renew-main #renewDataMap .map-legend li{
        font-size:11px;
        gap:8px;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .map-legend li + li{
        margin-top:8px;
    }

    .renew-main #renewDataMap .legend-color{
        width:14px;
        height:14px;
    }
}

/* 425 ??: ??? ?? ??? ??? ?? ?? ?? */
@media (max-width:425px){
    .renew-main #renewDataMap .map-visual-box{
        display:grid;
        grid-template-columns:1fr;
        gap:18px;
        width:calc(100% - 20px);
        padding:0 0 8px;
    }

    .renew-main #renewDataMap .data-svg-map{
        grid-column:1;
        grid-row:1;
        width:100%;
        max-width:none;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        position:static;
        grid-column:1;
        grid-row:2;
        width:100%;
        max-width:none;
        margin:0;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        padding:13px 14px;
    }

    .renew-main #renewDataMap .map-legend-title{
        margin-bottom:10px;
        font-size:12px;
        text-align:left;
        white-space:normal;
    }

    /* ? 3? / ?? 2? */
    .renew-main #renewDataMap .map-legend{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:9px 8px;
        width:100%;
        max-width:none;
        padding:0;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        display:flex;
        align-items:center;
        gap:6px;
        min-width:0;
        margin:0;
        font-size:10px;
        line-height:1.2;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .legend-color{
        width:13px;
        height:13px;
        flex:none;
        border-radius:3px;
    }
    
    .renew-main #renewDataMap .map-stat-card .select-area + .select-area {
        margin-top: 8px;
    }
    
    .renew-main #renewDataMap .map-stat-cat-row {
        display: block;
    }
}

/* 360 ????? 1? ????? ??? ?? ?? ?? */
@media (max-width:360px){
    .renew-main #renewDataMap .map-legend{
        grid-template-columns:1fr;
        gap:7px;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:11px;
    }
}

/* =========================================================
   FINAL REWORK
   ????? 3?? ??? ?? / ??? ?? ?? ??
   560 ?? ? ?? / 425 ?? ?? ?? ?? ??
   ========================================================= */

/* ================= ????? ================= */

/* ???? ??? ?? ?? */
/* .renew-main #renewMainService .service-card-list > li:nth-child(3){
    display:none !important;
} */

/* PC: ?? 3?? ?? ?? ?? ??? ?? */
@media (min-width:769px){
    .renew-main #renewMainService .service-inner{
        display:flex;
        width:var(--content-width);
        max-width:calc(100% - 80px);
    }

    .renew-main #renewMainService .section-title.left{
        flex:0 0 clamp(210px,15vw,260px);
    }

    .renew-main #renewMainService .service-card-list{
        flex:1 1 0;
        width:0;
        max-width:none;
        margin:0;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:clamp(22px,2.2vw,38px);
    }

    .renew-main #renewMainService .service-card-list > li{
        min-width:0;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(1),
    .renew-main #renewMainService .service-card-list > li:nth-child(3){
        transform: translateY(-12px);
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(0),
    .renew-main #renewMainService .service-card-list > li:nth-child(2){
        transform:translateY(12px);
    }

    .renew-main #renewMainService .service-card-list > li > a{
        width:100%;
        height:clamp(184px,12vw,224px);
        max-height:none;
        aspect-ratio:auto;
    }
}

/* 769~1199??? 3?? ??? ? ?? ??? ?? ?? */
@media (min-width: 769px) and (max-width: 1199px){
    .renew-main #renewMainService .service-inner{
        width:calc(100% - 64px);
    }

    .renew-main #renewMainService .section-title.left{
        flex:0 0 clamp(130px,15vw,180px);
    }
    .renew-main #renewMainService .section-title.left span{font-size:clamp(11px,1.2vw,13px)}
    .renew-main #renewMainService .section-title.left h2{font-size:clamp(24px,3vw,34px)}
    .renew-main #renewMainService .section-title.left p{font-size:clamp(11px,1.15vw,13px)}
    .renew-main #renewMainService > .ai-credit,
    .renew-main .main-service > .ai-credit{
        width:calc(100% - 64px);max-width:none;
    }

    .renew-main #renewMainService .service-card-list{
        flex:1 1 0;
        width:0;
        max-width:none;
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap:clamp(12px,1.6vw,20px);
    }

    .renew-main #renewMainService .service-card-list > li > a{
        height:auto;
        max-height:none;
        aspect-ratio:1.35/1;
    }
    .renew-main #renewMainService .hover-box{
        padding:clamp(10px,1.4vw,16px) clamp(8px,1.2vw,14px);
    }
    .renew-main #renewMainService .hover-box .hover-icon{
        width:clamp(28px,3.2vw,40px);height:auto;margin-bottom:6px;
    }
    .renew-main #renewMainService .hover-box strong{
        font-size:clamp(13px,1.5vw,17px);margin-bottom:4px;
    }
    .renew-main #renewMainService .hover-box p{
        font-size:clamp(10px,1.15vw,13px);line-height:1.35;
    }
}

/* ?? ???~: 1? ?? ?? + ??? ?? ?? ??/??? ?? */
@media (max-width:768px){
    .renew-main #renewMainService .service-inner{
        display:block;
        width:min(420px,calc(100% - 40px));
    }

    .renew-main #renewMainService .service-card-list{
        display:grid;
        width:100%;
        max-width:none;
        margin:0 auto;
        grid-template-columns:1fr !important;
        gap:22px;
    }

    .renew-main #renewMainService .service-card-list > li,
    .renew-main #renewMainService .service-card-list > li:nth-child(1),
    .renew-main #renewMainService .service-card-list > li:nth-child(2),
    .renew-main #renewMainService .service-card-list > li:nth-child(4){
        transform:none !important;
        grid-column:auto !important;
        width:100% !important;
    }

    .renew-main #renewMainService .service-card-list > li > a,
    .renew-main #renewMainService .service-card-list > li:nth-child(1) > a,
    .renew-main #renewMainService .service-card-list > li:nth-child(2) > a,
    .renew-main #renewMainService .service-card-list > li:nth-child(4) > a{
        width:100% !important;
        height:auto !important;
        max-height:none !important;
        aspect-ratio:auto !important;
    }
}

@media (max-width:480px){
    .renew-main #renewMainService .service-card-list{
        gap:18px;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(1) > a,
    .renew-main #renewMainService .service-card-list > li:nth-child(2) > a,
    .renew-main #renewMainService .service-card-list > li:nth-child(4) > a{
        height:auto !important;
        max-height:none !important;
    }
}


/* ================= 560 이하 지도 필터 ================= */

@media (max-width:560px){
    .renew-main #renewDataMap .map-stat-card .select-area select{
        height:40px;
        min-height:40px;
    }
}


/* ================= ?? ?? ================= */

/* ??? ??? ??? ??? ???? */

.renew-main #renewDataMap .map-legend-wrap:not(.is-visible) {
    display: none;
}

.renew-main #renewDataMap .map-legend-wrap{
    overflow:hidden;
    background:rgba(255,255,255,.98);
    border-radius:14px;
    box-shadow:0 12px 26px rgba(43,65,90,.14);
}

.renew-main #renewDataMap .map-legend-title{
    display:block;
    width:100%;
    margin:0 0 10px;
    padding:0;
    background:transparent;
}

/* 426~768: 범례 지도 왼쪽 */
@media (min-width:426px) and (max-width:768px){
    .renew-main #renewDataMap .map-legend-wrap{
        position:absolute;
        left:14px;
        bottom:18px;
        right:auto;
        width:158px;
        max-width:158px;
        margin:0;
        padding:12px 13px;
    }

    .renew-main #renewDataMap .map-legend{
        position:static;
        display:block;
        width:100%;
        max-width:none;
        padding:0;
        background:transparent;
        box-shadow:none;
    }

    .renew-main #renewDataMap .map-legend-title{
        font-size:12px;
        line-height:1.35;
        white-space:normal;
    }
}

/* 425 ??: ?? ?? ??? ??? ??? ?? */
@media (max-width:425px){
    .renew-main #renewDataMap .map-visual-box{
        display:flex;
        flex-direction:column;
        width:calc(100% - 20px);
        max-width:none;
        gap:16px;
        padding:0 0 10px;
        overflow:visible;
    }

    .renew-main #renewDataMap .data-svg-map{
        position:relative;
        order:1;
        width:100%;
        max-width:none;
        margin:0;
    }

    /*
       JSP ?? style? absolute/relative ???? ??? ???? ??
       ?? ?? ???? important ??
    */
    .renew-main #renewDataMap .map-legend-wrap{
        position:relative !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        order:2;
        display:block;
        width:100%;
        max-width:none;
        margin:0 !important;
        padding:13px 14px;
        transform:none;
    }

    .renew-main #renewDataMap .map-legend-hint{
        position:relative !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        order:2;
        width:100%;
        max-width:none;
        margin:0 !important;
        text-align:center;
    }

    .renew-main #renewDataMap .map-legend-title{
        margin:0 0 11px;
        font-size:12px;
        line-height:1.35;
        text-align:left;
        white-space:normal;
    }

    .renew-main #renewDataMap .map-legend{
        position:static;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:100%;
        max-width:none;
        margin:0;
        padding:0;
        gap:9px 8px;
        background:transparent;
        box-shadow:none;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        display:flex;
        align-items:center;
        min-width:0;
        margin:0;
        gap:6px;
        font-size:10px;
        line-height:1.2;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .legend-color{
        width:13px;
        height:13px;
        flex:none;
        border-radius:3px;
    }
}

@media (max-width:360px){
    .renew-main #renewDataMap .map-legend{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:10px;
    }
}

/* =========================================================
   ?? ?? ??
   - 701px ??: ?? ?? ??
   - 700px ??: ?? ?? ? ? ?? ??
   ========================================================= */

/* ??: ?? ???? ??? ??? ??? ?? */
.renew-main #renewDataMap .map-legend-wrap{
    overflow:visible;
}

.renew-main #renewDataMap .map-legend-title{
    display:block;
    width:auto;
    margin:0 0 10px;
    font-size:13px;
    line-height:1.35;
    white-space:nowrap;
}

.renew-main #renewDataMap .map-legend{
    display:block;
    width:auto;
    max-width:none;
    margin:0;
    padding:0;
}

.renew-main #renewDataMap .map-legend li,
.renew-main #renewDataMap .map-legend li + li{
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    min-width:max-content;
    margin:0;
    font-size:12px;
    line-height:1.2;
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
}

.renew-main #renewDataMap .map-legend li + li{
    margin-top:8px;
}

/* 701px ??? ?? ?? ?? ?? */
@media (min-width:701px){
    .renew-main #renewDataMap .map-legend-wrap{
        width:auto;
        min-width:148px;
        max-width:none;
        padding:13px 14px;
    }

    .renew-main #renewDataMap .map-legend{
        display:block;
    }
}

/* 700px ???? ?? ?? ? ? ?? ?? */
@media (max-width:700px){
    .renew-main #renewDataMap .map-visual-box{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:16px;
        width:calc(100% - 20px);
        max-width:none;
        margin:0 auto;
        padding:0 0 10px;
        overflow:visible;
    }

    .renew-main #renewDataMap .data-svg-map{
        order:1;
        width:100%;
        max-width:none;
        margin:0;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        position:relative !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        order:2;
        display:flex;
        align-items:center;
        gap:14px;
        width:100%;
        min-width:0;
        max-width:none;
        margin:0 !important;
        padding:12px 14px;
        transform:none;
        overflow-x:auto;
        overflow-y:hidden;
        border-radius:12px;
        background:rgba(255,255,255,.98);
        box-shadow:0 10px 22px rgba(43,65,90,.12);
        scrollbar-width:none;
    }

    .renew-main #renewDataMap .map-legend-wrap::-webkit-scrollbar{
        display:none;
    }

    .renew-main #renewDataMap .map-legend-hint{
        position:relative !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        order:2;
        width:100%;
        max-width:none;
        margin:0 !important;
    }

    .renew-main #renewDataMap .map-legend-title{
        flex:none;
        margin:0;
        font-size:12px;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .map-legend{
        display:flex;
        flex:1;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        width:auto;
        min-width:max-content;
        max-width:none;
        margin:0;
        padding:0;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        flex:none;
        width:auto;
        min-width:max-content;
        margin:0;
        gap:6px;
        font-size:11px;
        line-height:1.2;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .legend-color{
        width:13px;
        height:13px;
        flex:none;
        border-radius:3px;
    }
}

/* ?? ?? ????? ? ? ??, ?? ??? ?? */
@media (max-width:425px){
    .renew-main #renewDataMap .map-legend-wrap{
        gap:10px;
        padding:11px 12px;
    }

    .renew-main #renewDataMap .map-legend-title{
        font-size:11px;
    }

    .renew-main #renewDataMap .map-legend{
        gap:10px;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:10px;
    }

    .renew-main #renewDataMap .legend-color{
        width:12px;
        height:12px;
    }
}

/* =========================================================
   650px ?? ?? ?? + 768px ?? ?? ?? ?? ??
   ? ??? ?? ?? ???? ??
   ========================================================= */

/* 768 ???? ???? ?? ?? ??? ?? ?? ?? */
@media (max-width:768px){
    .renew-main #renewMainService,
    .renew-main #renewDataMap,
    .renew-main #renewCulture,
    .renew-main #renewInfra,
    .renew-main .record-section,
    .renew-main .related-site-section,
    .renew-main .internal-related{
        margin-top:15px;
    }

    /* ? ??? ??? ??? ?? ????? ?? ?? ?? */
    .renew-main #renewMainService{
        margin-top:0;
    }
}

/* 651px ??? ?? ??? ?? ?? */
@media (min-width:651px){
    .renew-main #renewDataMap .map-legend-wrap{
        display:block;
    }

    .renew-main #renewDataMap .map-legend{
        display:block;
    }
}

/* 650px ???? ?? ?? ? ? ?? ?? */
@media (max-width:650px){
    .renew-main #renewDataMap .map-visual-box{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        width:calc(100% - 20px);
        max-width:none;
        margin:0 auto;
        padding:0 0 10px;
        gap:14px;
        overflow:visible;
    }

    .renew-main #renewDataMap .data-svg-map{
        position:relative;
        order:1;
        width:100%;
        max-width:none;
        margin:0;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        position:relative !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        top:auto !important;
        order:2;
        display:flex !important;
        flex-direction:row;
        align-items:center;
        flex-wrap:nowrap;
        gap:12px;
        width:100% !important;
        min-width:0;
        max-width:none !important;
        margin:0 !important;
        padding:11px 13px;
        transform:none !important;
        overflow-x:auto;
        overflow-y:hidden;
        border-radius:12px;
        background:rgba(255,255,255,.98);
        box-shadow:0 10px 22px rgba(43,65,90,.12);
        scrollbar-width:none;
    }

    .renew-main #renewDataMap .map-legend-wrap::-webkit-scrollbar{
        display:none;
    }

    .renew-main #renewDataMap .map-legend-hint{
        position:relative !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        top:auto !important;
        order:2;
        width:100%;
        max-width:none;
        margin:0 !important;
    }

    .renew-main #renewDataMap .map-legend-title{
        flex:0 0 auto;
        width:auto;
        margin:0;
        padding:0;
        font-size:11px;
        line-height:1.25;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .map-legend{
        position:static !important;
        display:flex !important;
        flex:0 0 auto;
        flex-direction:row;
        align-items:center;
        flex-wrap:nowrap;
        justify-content:flex-start;
        gap:10px;
        width:auto !important;
        min-width:max-content;
        max-width:none !important;
        margin:0;
        padding:0;
        background:transparent;
        box-shadow:none;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        display:flex;
        flex:0 0 auto;
        align-items:center;
        width:auto;
        min-width:max-content;
        margin:0;
        padding:0;
        gap:5px;
        font-size:10px;
        line-height:1.2;
        white-space:nowrap;
        overflow:visible;
    }

    .renew-main #renewDataMap .legend-color{
        width:12px;
        height:12px;
        flex:0 0 12px;
        border-radius:3px;
    }
}

/* 425px ??? ?? 2~3? ??? ? ???? ?? ??? */
@media (max-width:425px){
    .renew-main #renewDataMap .map-legend-wrap{
        display:flex !important;
        flex-wrap:nowrap;
        gap:9px;
        padding:10px 11px;
    }

    .renew-main #renewDataMap .map-legend-title{
        font-size:10px;
    }

    .renew-main #renewDataMap .map-legend{
        display:flex !important;
        grid-template-columns:none;
        flex-wrap:nowrap;
        gap:9px;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:9px;
    }

    .renew-main #renewDataMap .legend-color{
        width:11px;
        height:11px;
        flex-basis:11px;
    }
}

/* =========================================================
   ?? ???
   - 768 ?? ?? ?? ? 30px
   - 650 ?? ? ? ?? ?? ?? + ?? ?? ??
   ========================================================= */

@media (max-width:768px){
    .renew-main #renewDataMap,
    .renew-main #renewCulture,
    .renew-main #renewInfra,
    .renew-main .record-section,
    .renew-main .related-site-section,
    .renew-main .internal-related{
        margin-top:30px;
    }
}

@media (max-width:650px){
    .renew-main #renewDataMap .map-legend-wrap{
        justify-content:center;
        width:calc(100% - 24px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding:11px 18px;
    }

    .renew-main #renewDataMap .map-legend-title{
        flex:0 0 auto;
        padding:0 4px 0 0;
        text-align:center;
    }

    .renew-main #renewDataMap .map-legend{
        flex:0 1 auto;
        justify-content:center;
        min-width:0;
        gap:10px;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        min-width:auto;
    }
}

@media (max-width:425px){
    .renew-main #renewDataMap .map-legend-wrap{
        width:calc(100% - 18px) !important;
        padding:10px 14px;
        gap:8px;
    }

    .renew-main #renewDataMap .map-legend{
        justify-content:center;
        gap:8px;
    }
}

/* =========================================================
   2026-07-14 ?? ??
   - 700px ?? ?? ? ? ??? ??
   - 768px ?? ???? ?? ?? ?? / ?? ??
   ========================================================= */

/* ================= ?? ================= */

@media (max-width:700px){
    .renew-main #renewDataMap .map-visual-box{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:14px;
        width:calc(100% - 20px);
        max-width:none;
        margin:0 auto;
        padding:0 0 10px;
        overflow:visible;
    }

    .renew-main #renewDataMap .data-svg-map{
        position:relative;
        order:1;
        width:100%;
        max-width:none;
        margin:0;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        order:2;
        display:flex !important;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        flex-wrap:nowrap;
        gap:12px;
        width:calc(100% - 24px) !important;
        min-width:0;
        max-width:none !important;
        margin:0 auto !important;
        padding:11px 18px;
        transform:none !important;
        overflow-x:auto;
        overflow-y:hidden;
        border-radius:12px;
        background:rgba(255,255,255,.98);
        box-shadow:0 10px 22px rgba(43,65,90,.12);
        scrollbar-width:none;
    }

    .renew-main #renewDataMap .map-legend-wrap::-webkit-scrollbar{
        display:none;
    }

    .renew-main #renewDataMap .map-legend-title{
        flex:0 0 auto;
        width:auto;
        margin:0;
        padding-right:2px;
        font-size:11px;
        line-height:1.25;
        text-align:center;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .map-legend{
        position:static !important;
        display:flex !important;
        flex:0 0 auto;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        flex-wrap:nowrap;
        gap:10px;
        width:auto !important;
        min-width:max-content;
        max-width:none !important;
        margin:0;
        padding:0;
        background:transparent;
        box-shadow:none;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        display:flex;
        flex:0 0 auto;
        align-items:center;
        width:auto;
        min-width:max-content;
        margin:0;
        padding:0;
        gap:5px;
        font-size:10px;
        line-height:1.2;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .legend-color{
        width:12px;
        height:12px;
        flex:0 0 12px;
        border-radius:3px;
    }
}

@media (max-width:425px){
    .renew-main #renewDataMap .map-legend-wrap{
        width:calc(100% - 16px) !important;
        gap:8px;
        padding:10px 12px;
    }

    .renew-main #renewDataMap .map-legend{
        display:flex !important;
        grid-template-columns:none;
        gap:8px;
    }

    .renew-main #renewDataMap .map-legend-title{
        font-size:10px;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:9px;
    }

    .renew-main #renewDataMap .legend-color{
        width:11px;
        height:11px;
        flex-basis:11px;
    }
}


/* ================= ?? � ?? � ?? � ?? ================= */

@media (max-width:768px){
    .renew-main #renewCulture .culture-card{
        height:190px;
        max-height:190px;
    }

    .renew-main #renewCulture .culture-card .txt{
        left:18px;
        right:18px;
        bottom:16px;
    }

    .renew-main #renewCulture .culture-card strong{
        margin-bottom:0;
        font-size:17px;
        line-height:1.25;
        word-break:keep-all;
    }

    /* culture desc? ????? ?? */
    .renew-main #renewCulture .culture-card p{
        display:block;
    }

    .renew-main #renewCulture .culture-card::after{
        height:52%;
    }
}

@media (max-width:640px){
    .renew-main #renewCulture .culture-card{
        height:175px;
        max-height:175px;
    }

    .renew-main #renewCulture .culture-card .txt{
        left:15px;
        right:15px;
        bottom:14px;
    }

    .renew-main #renewCulture .culture-card strong{
        font-size:16px;
    }
}

@media (max-width:425px){
    .renew-main #renewCulture .culture-card{
        height:160px;
        max-height:160px;
    }

    .renew-main #renewCulture .culture-slider-wrap{
        padding-left:32px;
        padding-right:32px;
    }
}

/* =========================================================
   ??? ?? / ?? ?? ??
   ========================================================= */


/* ================= ?????: ?? ?? ?? ?? ================= */

@media (max-width:768px){

    .renew-main #renewMainService .service-card-list a{
        position:relative;
        display:flex !important;
        flex-direction:column;
        height:auto !important;
        max-height:none !important;
        aspect-ratio:auto !important;
        overflow:visible;
        background:transparent !important;
        box-shadow:none !important;
        border-radius:0;
    }

    .renew-main #renewMainService .service-card-list a .thumb{
        width:100%;
        height:auto !important;
        aspect-ratio:16/9.5;
        object-fit:cover;
        flex:none;
        border-radius:14px !important;
        transform:none !important;
        box-shadow:0 10px 22px rgba(31,55,90,.14);
    }

    .renew-main #renewMainService .service-card-list a:hover .thumb{transform:none !important}
    .renew-main #renewMainService .service-card-list a:hover{transform:none;box-shadow:none !important}

    .renew-main #renewMainService .hover-box{
        position:relative !important;
        left:auto;right:auto;top:auto;bottom:auto;inset:auto !important;
        display:flex !important;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        flex:none;
        width:100%;
        min-height:0;
        height:auto !important;
        margin-top:10px !important;
        padding:0 2px 2px !important;
        color:#1a2744;
        background:transparent !important;
        opacity:1 !important;
        pointer-events:none;
        text-align:left;
    }

    .renew-main #renewMainService .hover-box .hover-icon,
    .renew-main #renewMainService .hover-box .hover-line,
    .renew-main #renewMainService .hover-box .arrow{
        display:none !important;
    }

    .renew-main #renewMainService .hover-box strong{
        display:block !important;
        margin:0 0 6px !important;
        color:#e83f6b !important;
        font-family:"KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
        font-size:clamp(14px,3.4vw,17px) !important;
        font-weight:700 !important;
        line-height:1.3 !important;
        letter-spacing:-.035em;
        text-align:left !important;
        text-shadow:none;
        word-break:keep-all;
    }

    .renew-main #renewMainService .hover-box p,
    .renew-main #renewMainService .hover-box p.hover-desc{
        display:-webkit-box !important;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        width:100% !important;
        margin:0 !important;
        overflow:hidden !important;
        color:#6b7280 !important;
        font-size:clamp(11px,2.6vw,13px) !important;
        line-height:1.45 !important;
        opacity:1 !important;
        word-break:keep-all;
        white-space:normal !important;
        text-align:left !important;
    }

    .renew-main #renewMainService .hover-box .hover-marquee{
        display:block !important;
        overflow:hidden !important;
        mask-image:none !important;
        -webkit-mask-image:none !important;
    }
    .renew-main #renewMainService .hover-box .hover-marquee-track{
        display:block !important;
        width:auto !important;
        white-space:normal !important;
        animation:none !important;
        transform:none !important;
    }
    .renew-main #renewMainService .hover-box .hover-marquee-track > span[aria-hidden="true"]{
        display:none !important;
    }

    .renew-main #renewMainService .service-card-list a:hover .hover-box{
        opacity:1 !important;
    }
}

@media (max-width:480px){

    .renew-main #renewMainService .hover-box{
        margin-top:8px !important;
        padding:0 !important;
        background:transparent !important;
    }

    .renew-main #renewMainService .hover-box strong{
        font-size:clamp(13px,3.6vw,15px) !important;
        font-weight:700 !important;
        color:#e83f6b !important;
    }
    .renew-main #renewMainService .hover-box p{
        font-size:clamp(10px,2.8vw,12px) !important;
        color:#6b7280 !important;
    }
    .renew-main #renewMainService .service-card-list a .thumb{
        aspect-ratio:16/10;
        border-radius:12px !important;
    }
}


/* ================= ?? ?? ================= */

/* 520px ??: ?? ?, ?? ?? ?? */
@media (max-width:520px){

    .renew-main #renewDataMap .map-legend-wrap{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        display:block !important;
        width:calc(100% - 16px) !important;
        max-width:none !important;
        margin:0 auto !important;
        padding:12px 14px 13px;
        transform:none !important;
        overflow:visible;
        border-radius:12px;
        background:rgba(255,255,255,.98);
        box-shadow:0 10px 22px rgba(43,65,90,.12);
    }

    .renew-main #renewDataMap .map-legend-title{
        display:block;
        width:100%;
        margin:0 0 10px;
        padding:0;
        font-size:12px;
        line-height:1.3;
        text-align:left;
        white-space:normal;
    }

    .renew-main #renewDataMap .map-legend{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr));
        align-items:center;
        justify-content:center;
        gap:8px 10px;
        width:100% !important;
        min-width:0;
        max-width:none !important;
        margin:0;
        padding:0;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        min-width:0;
        margin:0;
        padding:0;
        gap:5px;
        font-size:10px;
        line-height:1.2;
        white-space:nowrap;
    }

    .renew-main #renewDataMap .legend-color{
        width:12px;
        height:12px;
        flex:0 0 12px;
        border-radius:3px;
    }
}

/* 420px ??: ? ?? */
@media (max-width:420px){

    .renew-main #renewDataMap .map-legend{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px 12px;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:10px;
    }
}

/* 340px ??: ? ?? */
@media (max-width:340px){

    .renew-main #renewDataMap .map-legend{
        grid-template-columns:1fr;
        gap:7px;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:11px;
    }
}


/* ================= ?? � ?? � ?? � ?? ================= */

/*
   ?? ?? height? ??? ????,
   ?? ?? ???? ??? ??? ??? ?? ???? ??
*/
@media (max-width:768px){

    .renew-main #renewCulture .culture-slide .slick-slide .culture-card{
        position:relative;
        display:block;
        width:100%;
        height:auto !important;
        min-height:0;
        max-height:none !important;
        aspect-ratio:1.5 / 1 !important;
        overflow:hidden;
        border-radius:14px;
    }

    .renew-main #renewCulture .culture-card img{
        position:absolute;
        inset:0;
        display:block;
        width:100%;
        height:100% !important;
        max-height:none;
        object-fit:cover;
    }

    .renew-main #renewCulture .culture-card::after{
        height:48%;
    }

    .renew-main #renewCulture .culture-card .txt{
        left:16px;
        right:16px;
        bottom:14px;
    }

    .renew-main #renewCulture .culture-card strong{
        margin:0;
        font-size:17px;
        line-height:1.2;
        word-break:keep-all;
    }

    .renew-main #renewCulture .culture-card p{
        display:block !important;
    }
}

@media (max-width:640px){

    .renew-main #renewCulture .culture-slide .slick-slide .culture-card{
        aspect-ratio:1.6 / 1 !important;
    }

    .renew-main #renewCulture .culture-card strong{
        font-size:16px;
    }
}

@media (max-width:425px){

    .renew-main #renewCulture .culture-slide .slick-slide .culture-card{
        aspect-ratio:1.72 / 1 !important;
    }

    .renew-main #renewCulture .culture-card .txt{
        left:13px;
        right:13px;
        bottom:11px;
    }

    .renew-main #renewCulture .culture-card strong{
        font-size:15px;
    }

    .renew-main #renewCulture .culture-slider-wrap{
        padding-left:26px;
        padding-right:26px;
    }
}

/* =========================================================
   ??? ?? ?? ?? ??
   - ????? ?? ? ?? / ?? ??
   - ???? ??? ?? ?? ??
   - ???? ??? ?? ?? ??
   ========================================================= */


/* ================= ????? ================= */

@media (max-width:768px){

    .renew-main #renewMainService .hover-box{
        min-height:38px;
        padding:6px 10px;
        background:rgba(16,21,38,.52);
    }

    .renew-main #renewMainService .hover-box strong{
        font-family:"KoPub Dotum","KoPub??","Noto Sans KR",sans-serif;
        font-size:14px;
        font-weight:500;
        line-height:1.2;
        letter-spacing:-.03em;
        text-shadow:0 1px 2px rgba(0,0,0,.2);
    }

    /* ???? ??? ?? ? ?? */
    .renew-main #renewMainService .service-card-list > li:nth-child(4) > a{
        height:148px;
        max-height:148px;
        aspect-ratio:auto;
    }
}

@media (max-width:480px){

    .renew-main #renewMainService .hover-box{
        min-height:32px;
        padding:5px 8px;
        background:rgba(16,21,38,.48);
    }

    .renew-main #renewMainService .hover-box strong{
        font-size:12px;
        font-weight:500;
    }

    .renew-main #renewMainService .service-card-list > li:nth-child(4) > a{
        height:132px;
        max-height:132px;
    }
}


/* ================= ?? � ?? � ?? � ?? ================= */

/*
   ?? height:clamp(...290px) ??? ??? ?? ??
   aspect-ratio ?? ?? ??? ?? ??
*/
@media (max-width:768px){

    .renew-main #renewCulture .culture-slide .slick-slide,
    .renew-main #renewCulture .culture-slide .slick-slide > div{
        height:auto;
    }

    .renew-main #renewCulture .culture-slide .slick-slide .culture-card,
    .renew-main #renewCulture .culture-card{
        position:relative;
        width:100%;
        height:clamp(170px,28vw,210px) !important;
        min-height:0 !important;
        max-height:210px !important;
        aspect-ratio:auto !important;
        overflow:hidden;
    }

    .renew-main #renewCulture .culture-card img{
        position:absolute;
        inset:0;
        width:100%;
        height:100% !important;
        object-fit:cover;
    }

    .renew-main #renewCulture .culture-card p{
        display:block !important;
    }

    .renew-main #renewCulture .culture-card .txt{
        left:16px;
        right:16px;
        bottom:13px;
    }

    .renew-main #renewCulture .culture-card strong{
        margin:0;
        font-size:16px;
        line-height:1.2;
    }
}

@media (max-width:640px){

    .renew-main #renewCulture .culture-slide .slick-slide .culture-card,
    .renew-main #renewCulture .culture-card{
        height:clamp(150px,31vw,180px) !important;
        max-height:180px !important;
    }

    .renew-main #renewCulture .culture-card strong{
        font-size:15px;
    }
}

@media (max-width:425px){

    .renew-main #renewCulture .culture-slide .slick-slide .culture-card,
    .renew-main #renewCulture .culture-card{
        height:145px !important;
        max-height:145px !important;
    }

    .renew-main #renewCulture .culture-card .txt{
        left:13px;
        right:13px;
        bottom:11px;
    }

    .renew-main #renewCulture .culture-card strong{
        font-size:14px;
    }
}

/* =========================================================
   ??? ??? ?? / ???? ?? ?? ??
   ========================================================= */

/* ================= ?? ?? ??? ================= */

@media (max-width:768px){

    .renew-main .section-title span,
    .renew-main .map-filter-box > span{
        font-size:13px;
        line-height:1.2;
    }

    .renew-main .section-title h2,
    .renew-main .map-filter-box h2{
        margin-top:5px;
        margin-bottom:11px;
        font-size:34px;
        line-height:1.12;
        letter-spacing:-.055em;
    }

    .renew-main .section-title p,
    .renew-main .map-filter-box p{
        font-size:15px;
        line-height:1.6;
    }

    .renew-main .section-title.center p{
        margin-bottom:30px;
    }
}

@media (max-width:520px){

    .renew-main .section-title span,
    .renew-main .map-filter-box > span{
        font-size:12px;
    }

    .renew-main .section-title h2,
    .renew-main .map-filter-box h2{
        font-size:30px;
        line-height:1.14;
    }

    .renew-main .section-title p,
    .renew-main .map-filter-box p{
        font-size:14px;
        line-height:1.55;
    }

    .renew-main .section-title.center p{
        margin-bottom:24px;
    }
}

@media (max-width:425px){

    .renew-main .section-title h2,
    .renew-main .map-filter-box h2{
        font-size:27px;
        line-height:1.16;
        letter-spacing:-.05em;
    }

    .renew-main .section-title p,
    .renew-main .map-filter-box p{
        font-size:13px;
        line-height:1.55;
    }
}


/* ================= ????? ??? ================= */

@media (max-width:768px){

    .renew-main #renewMainService .section-title{
        margin-bottom:26px;
    }
}

@media (max-width:425px){

    .renew-main #renewMainService .section-title h2{
        font-size:29px;
    }

    .renew-main #renewMainService .section-title p{
        max-width:320px;
        margin-left:auto;
        margin-right:auto;
    }
}


/* ================= ?? � ?? � ?? � ?? ================= */

/* ?? ?? ?? */
@media (max-width:1199px) and (min-width:769px){
    #renewCulture a.culture-card{
        height:clamp(210px,24vw,270px) !important;
        min-height:0 !important;
        max-height:none !important;
    }
    #renewCulture a.culture-card .txt{
        left:clamp(12px,1.6vw,22px);
        right:clamp(12px,1.6vw,22px);
        bottom:clamp(12px,1.5vw,20px);
    }
    #renewCulture a.culture-card strong{
        font-size:clamp(14px,1.55vw,18px);
        line-height:1.25;
        word-break:keep-all;
    }
    #renewCulture a.culture-card .txt p{
        display:block !important;
        height:1.35em !important;
        margin:4px 0 0 !important;
        overflow:hidden !important;
        white-space:nowrap !important;
        font-size:clamp(11px,1.15vw,13px) !important;
        line-height:1.35 !important;
        opacity:.88;
    }
}

@media (max-width:768px){

    #renewCulture a.culture-card{
        height:clamp(200px,48vw,240px) !important;
        min-height:0 !important;
        max-height:none !important;
    }

    #renewCulture a.culture-card .txt{
        left:14px;
        right:14px;
        bottom:12px;
    }
    #renewCulture a.culture-card strong{
        font-size:clamp(13px,3.4vw,16px);
        line-height:1.25;
        word-break:keep-all;
    }

    #renewCulture a.culture-card .txt p{
        display:block !important;
        height:1.35em !important;
        margin:4px 0 0 !important;
        padding:0 !important;
        overflow:hidden !important;
        white-space:nowrap !important;
        font-size:clamp(10px,2.6vw,12px) !important;
        line-height:1.35 !important;
        opacity:.86;
    }
}

@media (max-width:640px){

    #renewCulture a.culture-card{
        height:clamp(190px,52vw,220px) !important;
        min-height:0 !important;
        max-height:none !important;
    }
}

@media (max-width:480px){

    #renewCulture a.culture-card{
        height:clamp(180px,56vw,210px) !important;
        min-height:0 !important;
        max-height:none !important;
    }
}

/* 425 ?? */
@media (max-width:425px){

    #renewCulture .section-title h2{
        font-size:27px;
    }

    #renewCulture .section-title p{
        width:min(330px,calc(100% - 36px));
        margin-left:auto;
        margin-right:auto;
        line-height:1.55;
        word-break:keep-all;
    }

    #renewCulture a.culture-card{
        height:clamp(175px,58vw,200px) !important;
        min-height:0 !important;
        max-height:none !important;
    }

    #renewCulture a.culture-card .txt{
        left:13px;
        right:13px;
        bottom:10px;
    }

    #renewCulture a.culture-card .txt strong{
        margin-bottom:5px;
        font-size:14px;
        line-height:1.2;
    }

    #renewCulture a.culture-card .txt p{
        display:block !important;
        height:1.35em !important;
        max-height:1.35em !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
        font-size:12px;
        line-height:1.35;
        white-space:nowrap !important;
    }

    #renewCulture a.culture-card::after{
        height:62%;
    }
}


/* ================= ?? � ?? � ??? ================= */

@media (max-width:768px){

    .renew-main #renewInfra .section-title h2{
        font-size:33px;
    }
}

@media (max-width:425px){

    .renew-main #renewInfra .section-title h2{
        font-size:27px;
    }

    .renew-main #renewInfra .section-title p{
        width:min(320px,calc(100% - 36px));
        margin-left:auto;
        margin-right:auto;
        word-break:keep-all;
    }
}


/* ================= ??? ?? ?? ================= */

@media (max-width:425px){

    .renew-main #renewDataMap .map-filter-box h2{
        font-size:27px;
    }

    .renew-main #renewDataMap .map-filter-box p{
        max-width:300px;
        margin-left:auto;
        margin-right:auto;
    }
}
/* Main service hover marquee � start from first character */
.renew-main .main-service .hover-box p.hover-desc.is-marquee{
    width:100%;
    max-width:100%;
    margin:0;
    overflow:hidden;
    text-align:center;
    align-self:stretch;
}
.renew-main .main-service .hover-box .hover-marquee{
    display:block;
    width:100%;
    overflow:hidden;
    text-align:center;
    mask-image:none;
    -webkit-mask-image:none;
}
.renew-main .main-service .hover-box .hover-marquee-track.is-overflow{
    display:flex;
    align-items:center;
    gap:2.4em;
    width:max-content;
    max-width:none;
    margin:0;
    white-space:nowrap;
    will-change:transform;
    transform:translateX(0);
    text-align:left;
}
.renew-main .main-service .hover-box .hover-marquee:has(.is-overflow){
    text-align:left;
    mask-image:linear-gradient(90deg,#000 0%,#000 86%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 86%,transparent 100%);
}
.renew-main .main-service .hover-box p.hover-desc.is-marquee:has(.is-overflow){
    text-align:left;
}
.renew-main .main-service .hover-box .hover-marquee-track.is-static,
.renew-main .main-service .hover-box .hover-marquee-track:not(.is-overflow){
    display:block;
    width:100%;
    max-width:100%;
    margin:0 auto;
    white-space:normal;
    text-align:center;
    transform:none !important;
    animation:none !important;
    gap:0;
}
.renew-main .main-service .hover-box .hover-marquee-track.is-static > span[aria-hidden="true"],
.renew-main .main-service .hover-box .hover-marquee-track:not(.is-overflow) > span[aria-hidden="true"]{
    display:none !important;
}
.renew-main .main-service .hover-box .hover-marquee-track.is-static > span:first-child,
.renew-main .main-service .hover-box .hover-marquee-track:not(.is-overflow) > span:first-child{
    display:block;
    width:100%;
    text-align:center;
    white-space:normal;
    word-break:keep-all;
}
.renew-main .main-service .hover-box .hover-marquee-track > span{
    flex:none;
}
.renew-main .main-service .service-card-list a:hover .hover-box .hover-marquee-track.is-overflow{
    animation:pubHoverDescMarquee 16s linear infinite;
}
@keyframes pubHoverDescMarquee{
    0%,1.25%{transform:translateX(0)}
    100%{transform:translateX(calc(-50% - 1.2em))}
}
@media (prefers-reduced-motion:reduce){
    .renew-main .main-service .service-card-list a:hover .hover-box .hover-marquee-track.is-overflow,
    .renew-main .main-service .service-card-list a:hover .hover-box .hover-marquee-track{
        animation:none;
    }
    .renew-main .main-service .hover-box p.hover-desc.is-marquee{
        white-space:normal;
        word-break:keep-all;
    }
    .renew-main .main-service .hover-box .hover-marquee{
        mask-image:none;-webkit-mask-image:none;
    }
    .renew-main .main-service .hover-box .hover-marquee-track{
        display:block;width:auto;white-space:normal;
    }
    .renew-main .main-service .hover-box .hover-marquee-track > span[aria-hidden="true"]{
        display:none;
    }
}
/* ========== FINAL: responsive typography (pub infra / mid) ========== */
.renew-main #renewInfra .infra-list a{
    word-break:keep-all;
    overflow-wrap:break-word;
    padding:clamp(18px,1.8vw,28px) clamp(64px,6vw,100px) clamp(14px,1.4vw,22px) clamp(14px,1.5vw,24px);
    height:150px;
    min-height:150px;
    max-height:150px;
    overflow:hidden;
    box-sizing:border-box;
}
.renew-main #renewInfra .infra-list a strong{
    margin-bottom:clamp(5px,.6vw,8px);
    font-size:clamp(14px,1.2vw,18px);
    line-height:1.3;
    word-break:keep-all;
}
.renew-main #renewInfra .infra-list a p{
    word-break:keep-all;
    overflow-wrap:anywhere;
    font-size:clamp(10px,.9vw,13px);
    line-height:1.4;
    width:72%;
    max-width:72%;
}
.renew-main #renewInfra .infra-icon-circle{
    width:clamp(28px,2.4vw,34px);
    height:clamp(28px,2.4vw,34px);
    right:clamp(12px,1.8vw,28px);
    bottom:clamp(12px,1.5vw,24px);
}
.renew-main #renewInfra .infra-icon{
    width:clamp(18px,1.8vw,26px) !important;
    height:auto !important;
}

@media (max-width:1024px) and (min-width:641px){
    .renew-main #renewInfra .infra-list a{
        padding:14px 70px 12px 14px !important;
        height:140px !important;
        min-height:140px !important;
        max-height:140px !important;
    }
    .renew-main #renewInfra .infra-list a strong{
        font-size:clamp(13px,1.7vw,16px) !important;
        margin-bottom:5px;
    }
    .renew-main #renewInfra .infra-list a p{
        font-size:clamp(10px,1.3vw,12px) !important;
        line-height:1.35;
    }
    .renew-main #renewInfra .infra-list a p br{display:inline !important}
    .renew-main #renewInfra .infra-icon-circle{
        right:12px !important;bottom:12px !important;
        width:30px !important;height:30px !important;
    }
}

@media (max-width:640px){
    .renew-main #renewInfra .infra-list a{
        padding:12px 64px 12px 12px !important;
        height:130px !important;
        min-height:130px !important;
        max-height:130px !important;
    }
    .renew-main #renewInfra .infra-list a strong{
        font-size:clamp(13px,3.5vw,15px) !important;
    }
    .renew-main #renewInfra .infra-list a p{
        font-size:clamp(10px,2.6vw,12px) !important;
        line-height:1.35;
        word-break:keep-all;
    }
}

/* ========== FINAL override: pub main-service card row (design match) ========== */
@media (max-width:768px){
    .renew-main #renewMainService .service-inner{
        display:block !important;
        width:calc(100% - 28px) !important;
        max-width:640px !important;
        margin:0 auto !important;
    }
    .renew-main #renewMainService .section-title.left{
        width:100% !important;
        max-width:none !important;
        margin:0 0 22px !important;
        text-align:center !important;
    }
    .renew-main #renewMainService .section-title.left span,
    .renew-main #renewMainService .section-title.left h2,
    .renew-main #renewMainService .section-title.left p{
        text-align:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    .renew-main #renewMainService .section-title.left p br{
        display:none !important;
    }
    .renew-main #renewMainService .service-card-list{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
        max-width:none !important;
        margin:0 auto !important;
        gap:14px !important;
    }
    .renew-main #renewMainService .service-card-list > li,
    .renew-main #renewMainService .service-card-list > li:nth-child(n){
        transform:none !important;
        grid-column:auto !important;
        width:100% !important;
    }
    .renew-main #renewMainService .service-card-list > li > a{
        display:flex !important;
        flex-direction:row !important;
        align-items:stretch !important;
        gap:0 !important;
        width:100% !important;
        min-height:132px !important;
        height:auto !important;
        max-height:none !important;
        aspect-ratio:auto !important;
        overflow:hidden !important;
        padding:10px !important;
        background:#fff !important;
        border:1px solid rgba(31,55,90,.06) !important;
        border-radius:18px !important;
        box-shadow:0 10px 28px rgba(31,55,90,.10) !important;
    }
    .renew-main #renewMainService .service-card-list > li > a:hover{
        transform:none !important;
        box-shadow:0 12px 30px rgba(31,55,90,.14) !important;
    }
    .renew-main #renewMainService .service-card-list a .thumb{
        flex:0 0 38% !important;
        width:38% !important;
        max-width:220px !important;
        height:auto !important;
        min-height:112px !important;
        align-self:stretch !important;
        aspect-ratio:1.15 / 1 !important;
        object-fit:cover !important;
        border-radius:12px !important;
        box-shadow:none !important;
        transform:none !important;
    }
    .renew-main #renewMainService .service-card-list a:hover .thumb{
        transform:none !important;
    }
    .renew-main #renewMainService .hover-box{
        position:relative !important;
        inset:auto !important;
        left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:center !important;
        flex:1 1 auto !important;
        opacity:1 !important;
        margin:0 !important;
        padding:8px 14px !important;
        min-height:0 !important;
        height:auto !important;
        min-width:0 !important;
        background:transparent !important;
        color:#1a2744 !important;
        text-align:left !important;
        pointer-events:none !important;
        box-shadow:none !important;
    }
    .renew-main #renewMainService .hover-box .hover-line,
    .renew-main #renewMainService .hover-box .hover-icon,
    .renew-main #renewMainService .hover-box .arrow{
        display:none !important;
    }
    .renew-main #renewMainService .hover-box .arrow::before{
        content:none !important;
    }
    .renew-main #renewMainService .hover-box strong{
        display:block !important;
        margin:0 0 6px !important;
        color:#e83f6b !important;
        font-size:clamp(15px,4vw,18px) !important;
        font-weight:800 !important;
        line-height:1.25 !important;
        letter-spacing:-.03em !important;
        text-align:left !important;
        text-shadow:none !important;
        word-break:keep-all !important;
    }
    .renew-main #renewMainService .hover-box p,
    .renew-main #renewMainService .hover-box p.hover-desc,
    .renew-main #renewMainService .hover-box p.hover-desc.is-marquee{
        display:block !important;
        -webkit-line-clamp:unset !important;
        overflow:hidden !important;
        color:#6b7280 !important;
        font-size:clamp(11px,2.8vw,13px) !important;
        line-height:1.4 !important;
        white-space:normal !important;
        text-align:left !important;
        opacity:1 !important;
        height:auto !important;
        margin:0 !important;
        max-width:100% !important;
    }
    .renew-main #renewMainService .hover-box .hover-marquee,
    .renew-main #renewMainService .hover-box .hover-marquee-track,
    .renew-main #renewMainService .hover-box .hover-marquee-track.is-static,
    .renew-main #renewMainService .hover-box .hover-marquee-track:not(.is-overflow),
    .renew-main #renewMainService .hover-box .hover-marquee-track.is-overflow{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        white-space:normal !important;
        animation:none !important;
        transform:none !important;
        text-align:left !important;
        mask-image:none !important;
        -webkit-mask-image:none !important;
    }
    .renew-main #renewMainService .hover-box .hover-marquee-track > span,
    .renew-main #renewMainService .hover-box .hover-marquee-track.is-static > span:first-child,
    .renew-main #renewMainService .hover-box .hover-marquee-track:not(.is-overflow) > span:first-child{
        display:block !important;
        width:100% !important;
        text-align:left !important;
        white-space:normal !important;
        word-break:keep-all !important;
    }
    .renew-main #renewMainService .hover-box .hover-marquee-track > span[aria-hidden="true"]{
        display:none !important;
    }
}

@media (max-width:420px){
    .renew-main #renewMainService .service-inner{
        width:calc(100% - 20px) !important;
    }
    .renew-main #renewMainService .service-card-list > li > a{
        min-height:118px !important;
        padding:8px !important;
        border-radius:16px !important;
    }
    .renew-main #renewMainService .service-card-list a .thumb{
        flex-basis:36% !important;
        width:36% !important;
        max-width:150px !important;
        min-height:100px !important;
        border-radius:10px !important;
    }
    .renew-main #renewMainService .hover-box{
        padding:6px 10px !important;
    }
    .renew-main #renewMainService .hover-box strong{
        font-size:clamp(14px,3.8vw,16px) !important;
    }
}

/* ========== FINAL: infra icon-left (PC~mobile) ========== */
.renew-main #renewInfra .infra-list{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    grid-auto-rows:auto !important;
    gap:clamp(14px,1.6vw,20px) !important;
    width:100% !important;
    justify-items:stretch !important;
    justify-content:center !important;
    align-items:stretch !important;
}
.renew-main #renewInfra .infra-list > li,
.renew-main #renewInfra .infra-list > li:nth-child(n),
.renew-main #renewInfra .infra-list > li:nth-child(4),
.renew-main #renewInfra .infra-list > li:nth-child(5),
.renew-main #renewInfra .infra-list > li:last-child{
    grid-column:span 2 !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    justify-self:stretch !important;
    overflow:visible !important;
}
/* PC: 위 3 / 아래 2 가운데 정렬 */
@media (min-width:1025px){
    .renew-main #renewInfra .infra-list > li:nth-child(4){
        grid-column:2 / span 2 !important;
    }
    .renew-main #renewInfra .infra-list > li:nth-child(5){
        grid-column:4 / span 2 !important;
    }
}
.renew-main #renewInfra .infra-list a{
    position:relative !important;
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:6px !important;
    align-items:center !important;
    align-content:center !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    min-height:108px !important;
    max-height:none !important;
    padding:18px 20px !important;
    overflow:hidden !important;
    text-align:left !important;
    transform:none !important;
    box-shadow:0 8px 20px rgba(28,73,82,.10) !important;
}
.renew-main #renewInfra .infra-list a::before{
    display:none !important;
    content:none !important;
}
/* PC: ?? ?? + ?? ?? ?? + ???? ???? */
@media (min-width:1025px){
    .renew-main #renewInfra .infra-list a{
        grid-template-columns:64px minmax(0,1fr) !important;
        column-gap:18px !important;
        row-gap:8px !important;
        min-height:158px !important;
        padding:28px 28px !important;
    }
    .renew-main #renewInfra .infra-icon-circle{
        width:58px !important;
        height:58px !important;
    }
    .renew-main #renewInfra .infra-icon{
        width:32px !important;
    }
    .renew-main #renewInfra .infra-list a strong{
        font-size:clamp(16px,1.25vw,20px) !important;
    }
    .renew-main #renewInfra .infra-list a p{
        font-size:clamp(13px,1vw,15px) !important;
    }
    .renew-main #renewInfra .infra-list a .infra-hover-bg{
        display:block !important;
        position:absolute !important;
        left:auto !important;
        right:-36px !important;
        bottom:-42px !important;
        top:auto !important;
        z-index:1 !important;
        width:190px !important;
        height:160px !important;
        max-width:none !important;
        pointer-events:none !important;
    }
    .renew-main #renewInfra .infra-list a:hover{
        background:#0e8f99 !important;
        transform:translateY(-6px) !important;
        box-shadow:0 18px 34px rgba(14,143,153,.22) !important;
    }
    .renew-main #renewInfra .infra-list a:hover strong,
    .renew-main #renewInfra .infra-list a:hover p{
        color:#fff !important;
    }
    .renew-main #renewInfra .infra-list a:hover .infra-icon-circle{
        background:rgba(255,255,255,.22) !important;
    }
    .renew-main #renewInfra .infra-list a:hover .infra-icon-default{opacity:0 !important}
    .renew-main #renewInfra .infra-list a:hover .infra-icon-hover{opacity:1 !important}
}
/* ???~???: ?? ???/?? ?? (?? ??) */
@media (max-width:1024px){
    .renew-main #renewInfra .infra-list a .infra-hover-bg{
        display:none !important;
    }
    .renew-main #renewInfra .infra-list a:hover{
        transform:translateY(-3px) !important;
        background:#fff !important;
        box-shadow:0 12px 26px rgba(28,73,82,.14) !important;
    }
    .renew-main #renewInfra .infra-list a:hover strong{color:#07385c !important}
    .renew-main #renewInfra .infra-list a:hover p{color:#6b7280 !important}
    .renew-main #renewInfra .infra-list a:hover .infra-icon-circle{background:#b9e7ee !important}
    .renew-main #renewInfra .infra-list a:hover .infra-icon-default{opacity:1 !important}
    .renew-main #renewInfra .infra-list a:hover .infra-icon-hover{opacity:0 !important}
}
.renew-main #renewInfra .infra-icon-circle{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:52px !important;
    height:52px !important;
    margin:0 !important;
    align-self:center !important;
    background:#d7eef2 !important;
    z-index:3 !important;
}
.renew-main #renewInfra .infra-icon{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:28px !important;
    height:auto !important;
    max-width:none !important;
}
.renew-main #renewInfra .infra-list a strong{
    grid-column:2 !important;
    grid-row:1 !important;
    position:relative !important;
    z-index:3 !important;
    margin:0 !important;
    font-size:clamp(15px,1.2vw,18px) !important;
    line-height:1.3 !important;
    color:#07385c !important;
    word-break:keep-all !important;
    text-align:left !important;
}
.renew-main #renewInfra .infra-list a p{
    grid-column:2 !important;
    grid-row:2 !important;
    position:relative !important;
    z-index:3 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    width:100% !important;
    max-width:100% !important;
    max-height:calc(1.45em * 2) !important;
    margin:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:normal !important;
    font-size:clamp(12px,.95vw,14px) !important;
    line-height:1.45 !important;
    color:#6b7280 !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
    text-align:left !important;
}
.renew-main #renewInfra .infra-list a p .infra-slash-line{
    display:block !important;
    width:100% !important;
    line-height:1.45 !important;
}
.renew-main #renewInfra .infra-list a p br{
    display:none !important;
}

@media (max-width:1024px){
    .renew-main #renewInfra .infra-list{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .renew-main #renewInfra .infra-list > li,
    .renew-main #renewInfra .infra-list > li:nth-child(n),
    .renew-main #renewInfra .infra-list > li:nth-child(4),
    .renew-main #renewInfra .infra-list > li:nth-child(5),
    .renew-main #renewInfra .infra-list > li:last-child{
        grid-column:auto !important;
    }
    .renew-main #renewInfra .infra-list a{
        min-height:100px !important;
        padding:16px 18px !important;
    }
}

@media (max-width:768px){
    .renew-main #renewInfra .infra-list{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        width:min(860px,calc(100% - 28px)) !important;
        margin-left:auto !important;
        margin-right:auto !important;
        gap:12px !important;
    }
    .renew-main #renewInfra .infra-list > li,
    .renew-main #renewInfra .infra-list > li:nth-child(n),
    .renew-main #renewInfra .infra-list > li:nth-child(4),
    .renew-main #renewInfra .infra-list > li:nth-child(5),
    .renew-main #renewInfra .infra-list > li:last-child{
        grid-column:auto !important;
    }
    .renew-main #renewInfra .infra-list a{
        min-height:96px !important;
        padding:14px 16px !important;
        column-gap:12px !important;
        grid-template-columns:50px minmax(0,1fr) !important;
    }
    .renew-main #renewInfra .infra-icon-circle{
        width:48px !important;
        height:48px !important;
    }
    .renew-main #renewInfra .infra-icon{
        width:26px !important;
    }
    .renew-main #renewInfra .infra-list a strong{
        font-size:clamp(14px,2.4vw,16px) !important;
    }
    .renew-main #renewInfra .infra-list a p{
        -webkit-line-clamp:2 !important;
        max-height:calc(1.4em * 2) !important;
        font-size:clamp(11px,2vw,13px) !important;
        line-height:1.4 !important;
        white-space:normal !important;
    }
    .renew-main #renewInfra .infra-list a p .infra-slash-line{
        display:block !important;
        line-height:1.4 !important;
    }
}

@media (max-width:425px){
    .renew-main #renewInfra .infra-list{
        grid-template-columns:1fr !important;
        width:calc(100% - 24px) !important;
        gap:10px !important;
    }
    .renew-main #renewInfra .infra-list a{
        min-height:72px !important;
        height:auto !important;
        padding:14px 14px !important;
        column-gap:14px !important;
        border-radius:12px !important;
        align-items:flex-start !important;
    }
    .renew-main #renewInfra .infra-icon-circle{
        width:50px !important;
        height:50px !important;
        margin-top:2px !important;
    }
    .renew-main #renewInfra .infra-icon{
        width:28px !important;
    }
    .renew-main #renewInfra .infra-list a strong{
        font-size:15px !important;
    }
    .renew-main #renewInfra .infra-list a p{
        -webkit-line-clamp:3 !important;
        max-height:calc(1.4em * 3) !important;
        font-size:12px !important;
        white-space:normal !important;
    }
}

/* culture: force single-line overflow marquee (match internal) */
.renew-main #renewCulture a.culture-card .txt strong,
.renew-main #renewCulture a.culture-card .txt p,
.renew-main #renewCulture .culture-slide .slick-slide a.culture-card .txt p,
.renew-main #renewCulture .culture-card p{
    display:block !important;
    margin:4px 0 0 !important;
    padding:0 !important;
    height:1.35em !important;
    max-width:100% !important;
    overflow:hidden !important;
    opacity:.86 !important;
    font-size:clamp(12px,1.1vw,15px) !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
    word-break:normal !important;
}
.renew-main #renewCulture a.culture-card .txt strong{
    margin:0 0 4px !important;
    height:1.3em !important;
    line-height:1.3 !important;
    opacity:1 !important;
    font-size:clamp(14px,1.4vw,20px) !important;
}
.renew-main #renewCulture .c-marquee{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
}
.renew-main #renewCulture .culture-card .txt p .c-marquee-track.is-overflow,
.renew-main #renewCulture .c-marquee-track.is-overflow{
    display:inline-flex !important;
    align-items:center !important;
    gap:2.2em !important;
    width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;
    will-change:transform;
    animation:cultureDescMarquee 12s linear infinite !important;
}
.renew-main #renewCulture .c-marquee-track.is-static{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    animation:none !important;
    transform:none !important;
    text-align:left !important;
}
.renew-main #renewCulture .c-marquee-track.is-static > span,
.renew-main #renewCulture .c-marquee-track.is-static > span:first-child{
    display:block !important;
    width:100% !important;
    text-align:left !important;
}
.renew-main #renewCulture .c-marquee-track.is-static > span[aria-hidden="true"]{
    display:none !important;
}
.renew-main #renewCulture .c-marquee-track.is-overflow > span[aria-hidden="true"]{
    display:inline !important;
    flex:none !important;
}
.renew-main #renewCulture .c-marquee-track.is-overflow > span{
    flex:none !important;
}

/* culture short = static hide dup */
.culture-card .c-marquee-track.is-static > span[aria-hidden="true"]{
    display:none !important;
}
.culture-card .c-marquee-track.is-static{
    display:block !important;
    width:100% !important;
    animation:none !important;
    transform:none !important;
    text-align:left !important;
}



/* =========================================================
   FINAL 2026-07-15 — 지도 범례 왼쪽 배치 (PC~태블릿)
   - 필터 박스/지도 침범 없이 지도 영역 왼쪽에 고정
   - 폭 축소 시 박스·글자 크기만 함께 축소, 양옆 여백 유지
   - 아주 작아지면(기존 700px 이하) 지도 아래 배치 유지
   ========================================================= */
@media (min-width:1200px){
    .renew-main #renewDataMap .map-visual-box{
        position:relative !important;
        display:grid !important;
        grid-template-columns:clamp(128px,11vw,176px) minmax(0,1fr) !important;
        align-items:center !important;
        column-gap:clamp(10px,1.4vw,18px) !important;
        padding-left:clamp(20px,2.5vw,36px) !important;
        box-sizing:border-box !important;
    }
    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        position:static !important;
        grid-column:1 !important;
        grid-row:1 !important;
        align-self:end !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        top:auto !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 0 clamp(14px,2.2vw,26px) !important;
        z-index:8 !important;
    }
    .renew-main #renewDataMap .data-svg-map{
        grid-column:2 !important;
        grid-row:1 !important;
        width:100% !important;
        margin:0 !important;
    }
    .renew-main #renewDataMap .map-legend-wrap{
        width:auto !important;
        min-width:0 !important;
        padding:clamp(9px,1vw,14px) clamp(10px,1.1vw,16px) !important;
        box-sizing:border-box !important;
    }
    .renew-main #renewDataMap .map-legend-title{
        font-size:clamp(11px,1vw,13px) !important;
        line-height:1.35 !important;
        white-space:normal !important;
        word-break:keep-all !important;
    }
    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        font-size:clamp(10px,.95vw,12px) !important;
        gap:clamp(5px,.6vw,8px) !important;
    }
    .renew-main #renewDataMap .legend-color{
        width:clamp(12px,1.1vw,16px) !important;
        height:clamp(12px,1.1vw,16px) !important;
        flex:none !important;
    }
}
@media (min-width:769px) and (max-width:1199px){
    .renew-main #renewDataMap .map-visual-box{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        grid-template-columns:none !important;
        gap:clamp(20px,2.5vw,28px) !important;
        padding:0 clamp(16px,2vw,28px) 0 clamp(20px,2.5vw,36px) !important;
    }

    .renew-main #renewDataMap .circle-deco,
    .renew-main #renewDataMap .circle-text{
        display:none !important;
    }

    .renew-main #renewDataMap .data-svg-map{
        order:1 !important;
        grid-column:auto !important;
        grid-row:auto !important;
        width:100% !important;
        max-width:100% !important;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        order:2 !important;
        position:relative !important;
        grid-column:auto !important;
        grid-row:auto !important;
        align-self:center !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        top:auto !important;
        width:100% !important;
        max-width:100% !important;
        margin:clamp(8px,1vw,14px) auto 0 !important;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        display:block !important;
        padding:clamp(14px,1.6vw,18px) clamp(16px,2vw,22px) !important;
        box-sizing:border-box !important;
        overflow:visible !important;
    }

    .renew-main #renewDataMap .map-legend-title{
        display:block !important;
        width:100% !important;
        margin:0 0 clamp(10px,1.2vw,12px) !important;
        font-size:clamp(11px,1vw,12px) !important;
        white-space:normal !important;
        word-break:keep-all !important;
        line-height:1.35 !important;
    }

    .renew-main #renewDataMap .map-legend{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        align-items:center !important;
        justify-content:center !important;
        gap:clamp(8px,1vw,10px) clamp(12px,1.4vw,18px) !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow:visible !important;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        display:flex !important;
        flex:0 0 auto !important;
        margin:0 !important;
        font-size:clamp(10px,.95vw,12px) !important;
        white-space:nowrap !important;
        overflow:visible !important;
    }
}

@media (min-width:769px) and (max-width:920px){
    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        align-self:flex-start !important;
        margin-left:clamp(8px,1.2vw,14px) !important;
        margin-right:auto !important;
        width:calc(100% - clamp(8px,1.2vw,14px)) !important;
        max-width:calc(100% - clamp(8px,1.2vw,14px)) !important;
    }

    .renew-main #renewDataMap .map-legend{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:clamp(8px,1vw,10px) clamp(6px,.8vw,8px) !important;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        min-width:0 !important;
        white-space:normal !important;
        word-break:keep-all !important;
        font-size:clamp(10px,1.05vw,11px) !important;
    }
}

/* =========================================================
   FINAL 2026-07-23 — 필터 컨트롤 너비 통일 (769px+, 대민)
   ========================================================= */
@media (min-width:769px){
    .renew-main #renewDataMap .filter-area,
    .renew-main #renewDataMap .chip-list,
    .renew-main #renewDataMap .map-stat-cards,
    .renew-main #renewDataMap .map-search-btn,
    .renew-main #renewDataMap .map-action-btns{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        box-sizing:border-box !important;
    }
    .renew-main #renewDataMap .map-action-btns .map-search-btn,
    .renew-main #renewDataMap .map-action-btns .map-detail-btn{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        flex:none !important;
        box-sizing:border-box !important;
    }

    .renew-main #renewDataMap .map-action-btns{
        display:flex !important;
        flex-direction:column !important;
        gap:clamp(8px,1vw,10px) !important;
        min-width:0 !important;
        padding-left:var(--map-char-btn-pad) !important;
        box-sizing:border-box !important;
    }

    .renew-main #renewDataMap .map-action-btns .map-search-btn, 
    .renew-main #renewDataMap .map-action-btns .map-detail-btn{
        height:clamp(46px,4.2vw,52px) !important;
        font-size:clamp(14px,1.35vw,16px) !important;
    }

    .renew-main #renewDataMap .map-filter-title-row{
        position:static !important;
    }

    .renew-main #renewDataMap .map-filter-title-row .character-img{
        position:absolute !important;
        left:var(--map-char-left) !important;
        bottom:84px !important;
        top:auto !important;
        width:var(--map-char-slot) !important;
        max-width:var(--map-char-slot) !important;
        max-height:144px !important;
        height:auto !important;
        object-fit:contain !important;
        object-position:center bottom !important;
        transform:none !important;
        z-index:6 !important;
        pointer-events:none !important;
    }

    .renew-main #renewDataMap .map-filter-title-row .pin-img{
        position:absolute !important;
        right:clamp(10px,1.4vw,18px) !important;
        top:clamp(36px,4.5vw,48px) !important;
        width:clamp(36px,4.5vw,54px) !important;
    }
}

/* =========================================================
   FINAL 2026-07-23 responsive6 — 배경/중앙정렬/데코/스케일 (대민)
   ========================================================= */
@media (min-width:769px){
    .renew-main #renewDataMap{
        align-items:center !important;
        --map-inner-w:min(var(--content-width),calc(100% - 80px)) !important;
        --map-filter-w:clamp(400px,28vw,440px) !important;
        --map-bg-tail:clamp(56px,6vw,96px) !important;
    }

    .renew-main #renewDataMap > .data-map-bg{
        display:block !important;
        left:0 !important;
        top:clamp(40px,5vw,56px) !important;
        bottom:clamp(88px,10vw,120px) !important;
        height:auto !important;
        width:calc((100% - var(--map-inner-w)) / 2 + var(--map-filter-w) + var(--map-bg-tail)) !important;
        border-radius:0 clamp(20px,2vw,28px) clamp(20px,2vw,28px) 0 !important;
        background:#FEF1EC !important;
    }

    .renew-main #renewDataMap > .data-map-bg-img{
        display:none !important;
    }

    .renew-main #renewDataMap .map-filter-box::after{
        content:none !important;
        display:none !important;
    }

    .renew-main #renewDataMap .data-map-inner{
        align-items:center !important;
        grid-template-columns:var(--map-filter-w) minmax(0,1fr) !important;
        width:var(--map-inner-w) !important;
    }

    .renew-main #renewDataMap .map-visual-box{
        align-self:center !important;
        align-items:center !important;
        padding-left:clamp(20px,2.5vw,36px) !important;
    }
}

@media (min-width:1200px){
    .renew-main #renewDataMap .circle-deco,
    .renew-main #renewDataMap .circle-text{
        display:block !important;
        position:absolute !important;
        grid-column:auto !important;
        grid-row:auto !important;
        margin:0 !important;
        right:clamp(0px,0.5vw,8px) !important;
        left:auto !important;
    }

    .renew-main #renewDataMap .circle-deco{
        top:clamp(36px,4.5vw,52px) !important;
        width:clamp(42px,4.5vw,58px) !important;
        height:clamp(42px,4.5vw,58px) !important;
        z-index:12 !important;
    }

    .renew-main #renewDataMap .circle-text{
        top:clamp(24px,3.2vw,40px) !important;
        width:clamp(64px,6.5vw,104px) !important;
        height:clamp(64px,6.5vw,104px) !important;
        z-index:13 !important;
    }
}

@media (min-width:769px) and (max-width:1199px){
    .renew-main #renewDataMap{
        --map-inner-w:calc(100% - clamp(40px,5vw,56px)) !important;
        --map-filter-w:clamp(280px,34vw,380px) !important;
        --map-bg-tail:clamp(48px,5vw,80px) !important;
    }

    .renew-main #renewDataMap .data-map-inner{
        gap:clamp(28px,3.5vw,48px) !important;
    }

    .renew-main #renewDataMap .map-visual-box{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        grid-template-columns:none !important;
        gap:clamp(20px,2.5vw,28px) !important;
        padding:0 clamp(16px,2vw,28px) 0 clamp(20px,2.5vw,36px) !important;
    }

    .renew-main #renewDataMap .circle-deco,
    .renew-main #renewDataMap .circle-text{
        display:none !important;
    }

    .renew-main #renewDataMap .data-svg-map{
        order:1 !important;
        grid-column:auto !important;
        width:100% !important;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        order:2 !important;
        align-self:center !important;
        width:100% !important;
        max-width:100% !important;
        margin:clamp(8px,1vw,14px) auto 0 !important;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        position:relative !important;
        display:block !important;
        padding:clamp(14px,1.6vw,18px) clamp(16px,2vw,22px) !important;
        box-sizing:border-box !important;
        overflow:visible !important;
    }

    .renew-main #renewDataMap .map-legend-title{
        display:block !important;
        width:100% !important;
        margin:0 0 clamp(10px,1.2vw,12px) !important;
        white-space:normal !important;
        word-break:keep-all !important;
        line-height:1.35 !important;
    }

    .renew-main #renewDataMap .map-legend{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        align-items:center !important;
        justify-content:center !important;
        gap:clamp(8px,1vw,10px) clamp(12px,1.4vw,18px) !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow:visible !important;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        display:flex !important;
        flex:0 0 auto !important;
        margin:0 !important;
        white-space:nowrap !important;
        overflow:visible !important;
    }

    .renew-main #renewDataMap .map-filter-title-row .character-img{
        width:var(--map-char-slot) !important;
        max-width:var(--map-char-slot) !important;
        max-height:144px !important;
    }

    .renew-main #renewDataMap .map-filter-title-row .pin-img{
        width:clamp(32px,4vw,46px) !important;
    }
}

@media (min-width:769px) and (max-width:920px){
    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        align-self:flex-start !important;
        margin-left:clamp(8px,1.2vw,14px) !important;
        margin-right:auto !important;
        width:calc(100% - clamp(8px,1.2vw,14px)) !important;
        max-width:calc(100% - clamp(8px,1.2vw,14px)) !important;
    }

    .renew-main #renewDataMap .map-legend{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        justify-content:stretch !important;
        gap:clamp(8px,1vw,10px) clamp(6px,.8vw,8px) !important;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        min-width:0 !important;
        white-space:normal !important;
        word-break:keep-all !important;
        font-size:clamp(10px,1.05vw,11px) !important;
    }
}

/* 426~768: 범례 지도 아래 중앙 (겹침 제거) */
@media (min-width:426px) and (max-width:768px){
    .renew-main #renewDataMap .map-visual-box{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        max-width:none !important;
        padding:0 16px 10px !important;
        gap:14px !important;
    }

    .renew-main #renewDataMap .data-svg-map{
        order:1 !important;
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
    }

    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        position:relative !important;
        order:2 !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        top:auto !important;
        align-self:center !important;
        width:100% !important;
        max-width:min(520px,100%) !important;
        margin:0 auto !important;
    }

    .renew-main #renewDataMap .map-legend-wrap{
        display:block !important;
        padding:13px 14px !important;
        overflow:visible !important;
    }

    .renew-main #renewDataMap .map-legend-title{
        margin:0 0 11px !important;
        white-space:normal !important;
        word-break:keep-all !important;
    }

    .renew-main #renewDataMap .map-legend{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:9px 8px !important;
        width:100% !important;
    }

    .renew-main #renewDataMap .map-legend li,
    .renew-main #renewDataMap .map-legend li + li{
        min-width:0 !important;
        white-space:normal !important;
        word-break:keep-all !important;
    }
}

/* 921~1199: 범례 타이틀·항목 중앙 정렬 + 적당한 좌우 여백 */
@media (min-width:921px) and (max-width:1199px){
    .renew-main #renewDataMap .map-legend-wrap,
    .renew-main #renewDataMap .map-legend-hint{
        width:fit-content !important;
        max-width:calc(100% - clamp(32px,4vw,56px)) !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding:clamp(14px,1.6vw,18px) clamp(22px,2.8vw,36px) !important;
    }

    .renew-main #renewDataMap .map-legend-title{
        text-align:center !important;
    }

    .renew-main #renewDataMap .map-legend{
        justify-content:center !important;
    }
}

/* =========================================================
   FINAL 2026-07-15d — 관련사이트 푸터정렬 / peek스크롤 / 카드명900 / 드롭다운
   ========================================================= */

/* ---- 카드명: 900px 이하 숨김 (모바일 스타일 구간) ---- */
.renew-main .service-card-list a .card-name,
.renew-main .internal-service-item > a .card-name,
#internalRenewContainer .internal-service-item > a .card-name{
    position:absolute;
    left:clamp(12px,1.3vw,18px);
    bottom:clamp(12px,1.3vw,18px);
    z-index:2;
    display:block;
    margin:0;
    color:rgba(255,255,255,.92);
    font-family:"KoPub Dotum","KoPub돋움","Noto Sans KR",sans-serif;
    font-size:clamp(14px,1.1vw,17px);
    font-weight:500;
    line-height:1.3;
    letter-spacing:-.03em;
    word-break:keep-all;
    text-shadow:0 1px 6px rgba(0,0,0,.35);
    pointer-events:none;
    transition:opacity .28s ease;
}
.renew-main .service-card-list a:hover .card-name,
.renew-main .internal-service-item > a:hover .card-name,
#internalRenewContainer .internal-service-item > a:hover .card-name{
    opacity:0;
}
@media (max-width:900px){
    .renew-main .service-card-list a .card-name,
    .renew-main .internal-service-item > a .card-name,
    #internalRenewContainer .internal-service-item > a .card-name{
        display:none !important;
    }
}

/* ---- 관련사이트: 푸터 .footer_container 와 동일 폭으로 좌시작점 맞춤 ---- */
.renew-main .internal-related,
#internalRenewContainer .internal-related{
    position:relative;
    background:#fff;
    border-top:1px solid #e2e4ee;
}
.renew-main .internal-related::before,
#internalRenewContainer .internal-related::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:50%;
    background:#f3f4f8;
    pointer-events:none;
}
.renew-main .related-inner,
#internalRenewContainer .related-inner{
    position:relative;
    z-index:1;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    align-items:center !important;
    width:var(--content-width) !important;
    max-width:calc(100% - 80px) !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:clamp(12px,1.4vw,18px) 0 !important;
    gap:clamp(12px,1.5vw,24px) !important;
    box-sizing:border-box !important;
}
.renew-main .related-left,
.renew-main .related-right,
#internalRenewContainer .related-left,
#internalRenewContainer .related-right{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    min-width:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-sizing:border-box !important;
}
.renew-main .related-right,
#internalRenewContainer .related-right{
    padding-left:clamp(12px,1.5vw,24px) !important;
}
.renew-main .internal-related strong,
.renew-main .internal-related h2,
#internalRenewContainer .internal-related strong,
#internalRenewContainer .internal-related h2{
    flex:none !important;
    color:#333 !important;
    font-size:clamp(13px,1.05vw,15px) !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    margin:0 !important;
}

.renew-main .related-banner-slide,
.renew-main .related-service-slide,
#internalRenewContainer .related-banner-slide,
#internalRenewContainer .related-service-slide{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    gap:8px;
}
.renew-main .related-banner-slide a,
#internalRenewContainer .related-banner-slide a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
}
.renew-main .related-banner-slide img,
#internalRenewContainer .related-banner-slide img{
    display:block;
    width:auto;
    max-width:112px;
    max-height:26px;
    object-fit:contain;
}
.renew-main .related-service-slide a,
#internalRenewContainer .related-service-slide a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    flex:none !important;
    min-height:32px !important;
    padding:5px 12px !important;
    border:1px solid #d5dae8 !important;
    border-radius:4px !important;
    background:#fff !important;
    color:#30385f !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
}
.renew-main .related-service-slide a:hover,
.renew-main .related-service-slide a:focus-visible,
#internalRenewContainer .related-service-slide a:hover,
#internalRenewContainer .related-service-slide a:focus-visible{
    border-color:#8d98bd !important;
    background:#f8f9fd !important;
    color:#151b45 !important;
    outline:none;
}
.renew-main .related-service-slide a .xi-external-link,
#internalRenewContainer .related-service-slide a .xi-external-link{
    font-size:12px;
    opacity:.75;
}

#internalRenewContainer .renew-chatbot-hidden,
#internalRenewContainer .chatBtnBox{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* 반응형(~1280부터 겹침 방지로 상하 스택) + 자주찾기는 수동 peek 스크롤
   배너 자동회전은 550 미만에서만 (JS) */
@media (max-width:1280px){
    .renew-main .internal-related::before,
    #internalRenewContainer .internal-related::before{display:none}
    .renew-main .related-inner,
    #internalRenewContainer .related-inner{
        grid-template-columns:1fr !important;
        width:calc(100% - 48px) !important;
        max-width:none !important;
        gap:0 !important;
        padding:0 !important;
    }
    .renew-main .related-left,
    .renew-main .related-right,
    #internalRenewContainer .related-left,
    #internalRenewContainer .related-right{
        width:100% !important;
        padding:12px 0 !important;
        gap:8px !important;
    }
    .renew-main .related-left,
    #internalRenewContainer .related-left{
        background:#f3f4f8 !important;
        box-shadow:0 0 0 100vmax #f3f4f8;
        clip-path:inset(0 -100vmax);
    }
    .renew-main .related-right,
    #internalRenewContainer .related-right{
        border-left:0 !important;
        border-top:1px solid #e5e7ef !important;
        padding-left:0 !important;
        background:#fff !important;
    }
    .renew-main .related-banner-slide,
    #internalRenewContainer .related-banner-slide{
        gap:6px;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .renew-main .related-banner-slide::-webkit-scrollbar,
    #internalRenewContainer .related-banner-slide::-webkit-scrollbar{display:none}
    .renew-main .related-banner-slide.slick-initialized,
    #internalRenewContainer .related-banner-slide.slick-initialized{
        display:block;
        overflow:visible;
    }
    .renew-main .related-banner-slide .slick-list,
    #internalRenewContainer .related-banner-slide .slick-list{
        margin:0 -3px;
    }
    .renew-main .related-banner-slide .slick-slide,
    #internalRenewContainer .related-banner-slide .slick-slide{
        padding:0 3px !important;
    }
    .renew-main .related-banner-slide img,
    #internalRenewContainer .related-banner-slide img{
        max-height:24px;
        max-width:100px;
    }
    .renew-main .related-service-slide,
    #internalRenewContainer .related-service-slide{
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:6px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
        mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 28px),transparent 100%);
        -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 28px),transparent 100%);
    }
    .renew-main .related-service-slide::-webkit-scrollbar,
    #internalRenewContainer .related-service-slide::-webkit-scrollbar{display:none}
    .renew-main .related-service-slide.slick-initialized,
    #internalRenewContainer .related-service-slide.slick-initialized{
        display:flex !important;
    }
    .renew-main .related-service-slide a,
    #internalRenewContainer .related-service-slide a{
        scroll-snap-align:start;
        min-height:30px !important;
        padding:4px 10px !important;
        font-size:12px !important;
    }
}

@media (max-width:640px){
    .renew-main .related-inner,
    #internalRenewContainer .related-inner{
        width:calc(100% - 32px) !important;
    }
    .renew-main .related-left,
    .renew-main .related-right,
    #internalRenewContainer .related-left,
    #internalRenewContainer .related-right{
        padding:12px 0 !important;
        gap:6px !important;
    }
}

/* ---- 헤더 드롭다운: 호버 끊김 방지 (대민+내부) ---- */
.renew-notice-menu::after,
.internal-dropdown-menu::after,
.internal-notice-menu::after{
    content:"";
    position:absolute;
    left:0;right:0;
    top:100%;
    height:16px;
    z-index:29;
}
.renew-notice-dropdown,
.internal-notice-dropdown{
    top:calc(100% + 2px) !important;
}
.renew-notice-dropdown::after,
.internal-notice-dropdown::after{
    content:"";
    position:absolute;
    left:-30%;
    right:-30%;
    top:-14px;
    height:18px;
    background:transparent;
}

/* =========================================================
   FINAL 2026-07-23b — 지도 2열 비율 축소 + 데코 지도 우측 바깥
   ========================================================= */
@media (min-width:769px) and (max-width:1040px){
    .renew-main #renewDataMap.data-map,
    .renew-main #internalDataMap.data-map{
        display:flex !important;
        align-items:center !important;
    }

    .renew-main #renewDataMap .map-filter-box,
    .renew-main #internalDataMap .map-filter-box{
        padding:clamp(28px,3.5vw,44px) clamp(10px,1.4vw,14px) clamp(56px,7vw,80px) clamp(18px,2.8vw,32px) !important;
    }

    .renew-main #renewDataMap .map-filter-title-row h2,
    .renew-main #renewDataMap .map-filter-box h2,
    .renew-main #internalDataMap .map-filter-title-row h2,
    .renew-main #internalDataMap .map-filter-box h2{
        font-size:clamp(22px,2.6vw,28px) !important;
    }

    .renew-main #renewDataMap .map-stat-card,
    .renew-main #internalDataMap .map-stat-card{
        padding:10px 11px !important;
    }
}

/* =========================================================
   FINAL 2026-07-27 — 검색/상세보기 버튼 반응형 (대민)
   ========================================================= */
@media (min-width:769px) and (max-width:1199px){
    .renew-main #renewDataMap{
        --map-char-slot:clamp(88px,11vw,120px) !important;
        --map-char-left:clamp(2px,.8vw,8px) !important;
        --map-char-gap:4px !important;
        --map-char-btn-pad:max(0px,calc(var(--map-char-left) + var(--map-char-slot) + var(--map-char-gap) - clamp(16px,2.5vw,32px))) !important;
    }

    .renew-main #renewDataMap .map-filter-title-row .character-img,
    .renew-main #renewDataMap .character-img{
        width:var(--map-char-slot) !important;
        max-width:var(--map-char-slot) !important;
        max-height:var(--map-char-slot) !important;
    }

    .renew-main #renewDataMap .map-action-btns{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        padding-left:var(--map-char-btn-pad) !important;
    }

    .renew-main #renewDataMap .map-action-btns .map-search-btn{
        height:clamp(44px,5.2vw,52px) !important;
        font-size:clamp(13px,1.5vw,15px) !important;
    }

    .renew-main #renewDataMap .map-action-btns .map-detail-btn{
        height:clamp(40px,4.8vw,46px) !important;
        font-size:clamp(12px,1.4vw,14px) !important;
    }
}

@media (min-width:769px) and (max-width:920px){
    .renew-main #renewDataMap{
        --map-char-slot:clamp(76px,9.5vw,100px) !important;
        --map-char-btn-pad:max(0px,calc(var(--map-char-left) + var(--map-char-slot) + var(--map-char-gap) - clamp(14px,2.2vw,28px))) !important;
    }

    .renew-main #renewDataMap .map-action-btns .map-search-btn,
    .renew-main #renewDataMap .map-action-btns .map-detail-btn{
        white-space:nowrap !important;
    }
}

@media (max-width:768px){
    .renew-main #renewDataMap .map-action-btns{
        width:min(500px,calc(100% - 40px)) !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:0 !important;
        gap:clamp(8px,2vw,10px) !important;
    }

    .renew-main #renewDataMap .map-action-btns .map-search-btn,
    .renew-main #renewDataMap .map-action-btns .map-detail-btn{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        position:static !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        transform:none !important;
    }
}

@media (max-width:560px){
    .renew-main #renewDataMap .map-action-btns{
        width:calc(100% - 40px) !important;
    }
}

/* =========================================================
   indexPub_renew.jsp #renewDataMap — section 내 style 블록 이전 (A-1)
   ========================================================= */
.data-map .map-visual-box {
    position: relative;
}
.data-map .chip-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    width: 350px;
}
.data-map .chip-list button {
    width: 100%;
}
.data-map .map-legend-hint {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 20px rgba(43,65,90,.1);
    font-size: 12px;
    line-height: 1.4;
    color: #666;
    max-width: 160px;
}
.data-map .map-legend-hint.is-visible {
    display: block;
}
.data-map .map-legend-title {
    margin: 0 0 10px;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #333;
    white-space: nowrap;
}

.data-map .place-map path.gn-area.map-region.lv1,
.data-map .place-map path.gn-area.map-region.lv1:hover,
.data-map .place-map path.gn-area.map-region.lv1:focus,
.data-map .place-map path.gn-area.map-region.lv1.is-active { fill: rgba(120,212,216,.9) !important; }
.data-map .place-map path.gn-area.map-region.lv2,
.data-map .place-map path.gn-area.map-region.lv2:hover,
.data-map .place-map path.gn-area.map-region.lv2:focus,
.data-map .place-map path.gn-area.map-region.lv2.is-active { fill: rgba(183,223,138,.9) !important; }
.data-map .place-map path.gn-area.map-region.lv3,
.data-map .place-map path.gn-area.map-region.lv3:hover,
.data-map .place-map path.gn-area.map-region.lv3:focus,
.data-map .place-map path.gn-area.map-region.lv3.is-active { fill: rgba(255,216,111,.9) !important; }
.data-map .place-map path.gn-area.map-region.lv4,
.data-map .place-map path.gn-area.map-region.lv4:hover,
.data-map .place-map path.gn-area.map-region.lv4:focus,
.data-map .place-map path.gn-area.map-region.lv4.is-active { fill: rgba(255,167,95,.9) !important; }
.data-map .place-map path.gn-area.map-region.lv5,
.data-map .place-map path.gn-area.map-region.lv5:hover,
.data-map .place-map path.gn-area.map-region.lv5:focus,
.data-map .place-map path.gn-area.map-region.lv5.is-active { fill: rgba(255,112,104,.9) !important; }
.data-map .place-map path.gn-area.map-region.gn-no-data,
.data-map .place-map path.gn-area.map-region.gn-no-data:hover,
.data-map .place-map path.gn-area.map-region.gn-no-data:focus,
.data-map .place-map path.gn-area.map-region.gn-no-data.is-active { fill: #b8bcc4 !important; }
.data-map .place-map path.gn-area.map-region {
    transform-box: fill-box;
    transform-origin: center center;
    transition: transform 0.22s ease, filter 0.22s ease;
}
.data-map .place-map path.gn-area.map-region.is-active {
    filter: drop-shadow(0 10px 18px rgba(43, 65, 90, 0.28)) brightness(1.03);
}
.data-map .place-map path.gn-area.map-region:hover,
.data-map .place-map path.gn-area.map-region.is-active {
    stroke: #fff !important;
}
.data-map .place-map .gn-map-labels,
.data-map .place-map .gn-map-label,
.data-map .place-map .map-label {
    pointer-events: none;
}
/* 대분류|중분류 가로 2열 (메인 카드 톤에 맞춤) */
#renewDataMap .map-stat-cat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 8px;
}
#renewDataMap .map-stat-cat-row .select-area {
    margin-top: 0;
    min-width: 0;
}
#renewDataMap .map-stat-card .select-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
#renewDataMap .map-stat-card .select-area label {
    width: auto;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #666;
}
#renewDataMap .map-stat-card .select-area select {
    width: 100%;
    height: 36px;
    min-height: 36px;
    flex: none;
    padding: 0 28px 0 10px;
    font-size: 13px;
    box-sizing: border-box;
}
/* 색상/숫자 블록 토글 시각 (is-off 기준, xeicon display 덮어쓰기) */
#renewDataMap .map-stat-viz-block.is-off {
    opacity: .78;
}
#renewDataMap .map-stat-viz-block.is-off .map-stat-card__body {
    opacity: .55;
}
#renewDataMap .map-stat-viz-block.is-off .map-stat-card__title {
    color: #8b94a5;
}
#renewDataMap .map-stat-viz-block:not(.is-off) {
    opacity: 1;
}
/* 색상 블록 눈 — 기존 핑크 계열 */
#renewDataMap .map-stat-card--color.map-stat-viz-block:not(.is-off) .map-stat-viz-check,
#renewDataMap .map-stat-card--color .map-stat-viz-toggle input:checked + .map-stat-viz-check {
    border-color: #e83261;
    background: rgba(232,50,97,.1);
    box-shadow: 0 0 0 1px rgba(232,50,97,.18);
}
#renewDataMap .map-stat-card--color.map-stat-viz-block.is-off .map-stat-viz-check {
    border-color: #b8c0cc;
    background: #fff;
    box-shadow: none;
}
#renewDataMap .map-stat-card--color.map-stat-viz-block:not(.is-off) .map-stat-viz-check__on,
#renewDataMap .map-stat-card--color .map-stat-viz-toggle input:checked + .map-stat-viz-check .map-stat-viz-check__on {
    color: #e83261;
}
#renewDataMap .map-stat-card--color.map-stat-viz-block.is-off .map-stat-viz-check__off {
    color: #8b94a5;
}
/* 숫자 블록 눈 — 노랑 계열 (main_renew_design 핑크 checked 덮어쓰기) */
#renewDataMap .map-stat-card--number.map-stat-viz-block:not(.is-off) .map-stat-viz-check,
#renewDataMap .map-stat-card--number .map-stat-viz-toggle input:checked + .map-stat-viz-check {
    border-color: #e8bb32 !important;
    background: #fdf8e9 !important;
    box-shadow: 0 0 0 1px rgba(232,187,50,.22) !important;
}
#renewDataMap .map-stat-card--number.map-stat-viz-block.is-off .map-stat-viz-check {
    border-color: #d9c98a !important;
    background: #fff !important;
    box-shadow: none !important;
}
#renewDataMap .map-stat-card--number.map-stat-viz-block:not(.is-off) .map-stat-viz-check__on,
#renewDataMap .map-stat-card--number .map-stat-viz-toggle input:checked + .map-stat-viz-check .map-stat-viz-check__on {
    color: #e8bb32 !important;
}
#renewDataMap .map-stat-card--number.map-stat-viz-block.is-off .map-stat-viz-check__off {
    color: #c4a84a !important;
}
#renewDataMap .map-stat-viz-block.is-off .map-stat-viz-check__on,
#renewDataMap .map-stat-viz-block:not(.is-off) .map-stat-viz-check__off {
    display: none !important;
}
#renewDataMap .map-stat-viz-block.is-off .map-stat-viz-check__off,
#renewDataMap .map-stat-viz-block:not(.is-off) .map-stat-viz-check__on {
    display: inline-block !important;
}
#renewDataMap .map-stat-viz-block.is-off .map-stat-card__body select {
    cursor: not-allowed;
}
/* 숫자 라벨: 시군명(.map-label)과 동일 스타일, 크기만 ~83% */
#renewDataMap .gn-map-number-labels .gn-map-number-label {
    fill: #07113b !important;
    stroke: #fff;
    stroke-width: 3px;
    paint-order: stroke fill;
    font-family: "KoPub Dotum","KoPub돋움","Noto Sans KR",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.06em;
    pointer-events: none;
    user-select: none;
}
.data-map .map-visual-box .circle-deco,
.data-map .map-visual-box .circle-text {
    pointer-events: none;
}
.data-map .map-hover-pin {
    position: absolute;
    z-index: 8;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 6px 16px rgba(43,65,90,.12);
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 8px));
    display: none;
}
.data-map .map-hover-pin.on {
    display: block;
}
.data-map .map-hover-card {
    position: absolute;
    z-index: 9;
    min-width: 168px;
    max-width: min(240px, calc(100% - 20px));
    padding: 12px 14px 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(43,65,90,.16);
    pointer-events: none;
    transform: translate(-50%, -100%);
    display: none;
}
.data-map .map-hover-card.on {
    display: block;
}
.data-map .map-hover-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 4px 4px 8px rgba(43,65,90,.08);
}
.data-map .map-hover-card.is-below::after {
    bottom: auto;
    top: -8px;
    box-shadow: -2px -2px 6px rgba(43,65,90,.06);
}
.data-map .map-hover-pin.is-below {
    transform: translate(-50%, 8px);
}
.data-map .map-hover-card__region {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: #222;
}
.data-map .map-hover-card__hint {
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.25;
    color: #999;
}
.data-map .map-hover-card__row {
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: #333;
    word-break: keep-all;
}
.data-map .map-hover-card__row:last-child {
    margin-bottom: 0;
}
.data-map .map-hover-card__row .map-hover-card__val {
    color: #f0526c;
    font-weight: 700;
}
.data-map .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    margin-bottom: 1px;
    border-radius: 50%;
}
.data-map .dot.red {
    background: #E83261;
}
.data-map .dot.yellow {
    background: #e8bb32;
}

@media (max-width:980px) {
    .data-map .chip-list {
        width: 100%;
        max-width: 350px;
    }
}