/* =========================================================
   EATSMAP RENEWAL V3
   시안의 화면 비율/여백을 우선해서 맞춘 버전
========================================================= */

:root{
    --pink:#ff315f;
    --bg:#090a0c;
    --inner:1540px;
    --side:clamp(34px,5.2vw,100px);
}

*{box-sizing:border-box; word-break: keep-all}
html{scroll-behavior:smooth;}
body{
    margin:0;
 
    background:var(--bg);
    color:#fff;
    font-family:"Pretendard",sans-serif;
    word-break:keep-all;
}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.inner{
    width:min(calc(100% - (var(--side) * 2)),var(--inner));
    margin:0 auto;
}

.inner2{
    width:100%;
    margin:0 auto;
    padding: 0 6rem
}

svg{display: block}

/* =========================================================
   HEADER
========================================================= */

.header{
    position:absolute;
    z-index:100;
    top:0;
    left:0;
    width:100%;
    height:86px;
    background:transparent;
}
.header .inner{
    width:calc(100% - 76px);
    max-width:none;
    height:100%;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
}
.header .logo{
    width:114px;
    height:46px;
    background: url(../img/logo.svg);
    background-position:left center!important;
    background-repeat:no-repeat!important;
    background-size:contain!important;
}
.renew_gnb > ul{
    display:flex;
    align-items:center;
    gap:42px;
    margin:0;
    padding:0;
    list-style:none;
}
.renew_gnb > ul > li{position:relative;}
.renew_gnb > ul > li > a{
    display:block;
    padding:32px 0;
    color:#fff;
    font-size:18px;
    font-weight:600;
}
.depth2{
    position:absolute;
    top:62px;
    left:50%;
    width:108px;
    padding:8px 0;
    transform:translateX(-50%) translateY(-6px);
    background:rgba(18,18,20,.70);
    backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}
.depth2 a{
    display:block;
    padding:8px 15px;
    color:rgba(255,255,255,.78);
    font-size:16px;
    text-align:center;
    transition-duration: .5s
}

.depth2 a:hover{color: #fff}

.has_depth:hover .depth2{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}
.renew_down_app{
    justify-self:end;
    min-width:112px!important;
    height:40px!important;
    padding:0 18px!important;
    margin:0!important;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    border-radius:999px!important;
    background:var(--pink)!important;
    border:0!important;
    color:#fff!important;
    font-size:16px!important;
    font-weight:700;
}


/* =========================================================
   HERO
========================================================= */

.renew_hero{
    position:relative;
    height:100vh;
    min-height:760px;
    overflow:hidden;
}
.renew_hero_video,
.renew_hero_dim{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.renew_hero_video{object-fit:cover;}
.renew_hero_dim{
    background:
        linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,.18)),
        rgba(0,0,0,.22);
}
.renew_hero_center{
    position:absolute;
    z-index:2;
    top:48%;
    left:50%;
    width:calc(100% - 100px);
    transform:translate(-50%,-50%);
    text-align:center;
}
.renew_hero_center h1{
    margin:0;
    font-family:"Outfit","Pretendard",sans-serif;
    font-size:clamp(64px,6.3vw,120px);
    line-height:.95;
    font-weight:900;
    letter-spacing:-.045em;
}
.hero_main_copy{
    margin:30px 0 0;
    font-size:34px;
    line-height:1.4;
    font-weight:700;
}
.hero_sub_copy{
    margin:40px 0 0;
    color:rgba(255,255,255,.65);
    display: flex; gap:16px;
    justify-content: center;
}

.hero_sub_copy span{
	display: inline-flex;
padding: 8px 18px;
align-items: flex-start;
color: #FFF;
font-size: 15px;
font-weight: 600;
border-radius: 99px;
border: 1px solid #FFF;
}

.hero_btns{
    position:absolute;
    z-index:3;
    left:42px;
    bottom:38px;
    display:flex;
    gap:10px;
}
.hero_pink_btn,
.hero_line_btn{
    height:57px;
    min-width:124px;
    padding:0 36px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-radius:999px;
    font-size:18px;
    font-weight:700;
}
.hero_pink_btn{background:var(--pink);}
.hero_line_btn{
    border:1px solid rgba(255,255,255,.42);
    background:rgba(0,0,0,.06);
}
.hero_scroll{
    position:absolute;
    z-index:3;
    right:42px;
    bottom:28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    color:rgba(255,255,255,.56);
}
.hero_scroll span{
    font-family:"Outfit",sans-serif;
    font-size:9px;
    letter-spacing:.16em;
}
.hero_scroll i{
    position:relative;
    width:1px;
    height:46px;
    margin-top:9px;
    overflow:hidden;
    background:rgba(255,255,255,.22);
}
.hero_scroll i:after{
    content:"";
    position:absolute;
    top:-50%;
    left:0;
    width:1px;
    height:50%;
    background:#fff;
    animation:scrollDown 1.6s linear infinite;
}
@keyframes scrollDown{
    to{transform:translateY(300%);}
}


/* =========================================================
   ABOUT
========================================================= */

.renew_about{
    position:relative;
    min-height:2850px;
    padding-top:245px;
    background:
        radial-gradient(circle at 7% 52%,rgba(255,255,255,.075),transparent 31%),
        linear-gradient(90deg,#171819 0%,#0b0c0e 45%,#08090b 100%);
}
.about_title{
    margin:0 auto;
    text-align:center;
}
.round_tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    color:rgba(255,255,255,.65);
    font-family:"Outfit","Pretendard",sans-serif;
    font-size:16px;
    font-weight:600;
    letter-spacing:.08em;
}
.about_title h2{
    margin:24px 0 0;
    font-size:clamp(40px,3.55vw,68px);
    line-height:1.4;
    letter-spacing:-.045em;
}
.about_title p{
    margin:40px 0 0;
    color:rgba(255,255,255,.54);
    font-size:24px;
    line-height:1.5;
}
.about_stage{
    position:relative;
    width:min(calc(100% - 180px),1560px);
    height:2200px;
    margin:180px auto 0;
}
.about_card{
    position:absolute;
    width:min(33vw,625px);
    border: 1px solid rgba(255,255,255,0.33);

}
.about_card figure{
    margin:0;
    width:100%;
    overflow:hidden;
    background:#17181b;
}
.about_card figure img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.about_card_1{top:0;left:0;}
.about_card_1 figure{height:610px;}
.about_card_2{top:650px;right:0;}
.about_card_2 figure{height:590px;}
.about_card_3{top:1260px;left:0;}
.about_card_3 figure{height:610px;}

.about_card_txt{padding:40px;}
.about_card_txt > span{
    color:var(--pink);
    font-family:"Outfit",sans-serif;
    font-size:16px;
    font-weight:700;
}
.about_card_txt h3{
    margin:9px 0 11px;
    font-size:26px;
    line-height:1.4;
}
.about_card_txt p{
    max-width:520px;
    margin:0;
    color:rgba(255,255,255,.48);
    font-size:18px;
    line-height:1.5;
}

.truck_rail{
    position:absolute;
    z-index:5;
    top:0;
    left:50%;
    width:100px;
    height:1980px;
    transform:translateX(-50%);
    pointer-events:none;
}
.sticky_truck{
    position:sticky;
    top:39vh;
    width:74px;
    margin:0 auto;
    filter:drop-shadow(0 15px 16px rgba(0,0,0,.35));
}


/* =========================================================
   QUESTION
========================================================= */

.renew_question{
    min-height:1120px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 8% 50%,rgba(255,255,255,.075),transparent 30%),
        linear-gradient(90deg,#171819 0%,#0b0c0e 45%,#08090b 100%);
}
.renew_question .inner{text-align:center;}
.question_fill{
    margin:0;
    color:rgba(255,255,255,.11);
    font-size:clamp(58px,6.4vw,118px);
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.055em;
    background:linear-gradient(90deg,#fff,#fff) no-repeat;
    background-size:0% 100%;
    -webkit-background-clip:text;
    background-clip:text;
}


/* =========================================================
   NEED PIN
========================================================= */

.renew_need{
    position:relative;
    background:
        radial-gradient(circle at 0 54%,rgba(255,255,255,.075),transparent 28%),
        linear-gradient(90deg,#171819 0%,#0b0c0e 42%,#08090b 100%);
}
.need_pin{
    height:100vh;
    min-height:760px;
    overflow:hidden;
}
.need_layout{
    height:100%;
    display:grid;
    grid-template-columns:40% 60%;
    align-items:center;
    padding: 0 0 0 6rem
}
.need_copy_area{
    position:relative;
    height:100%;
    border-right:1px solid rgba(255,255,255,.18);
}
.need_copy{
    position:absolute;
    top:50%;
    left:0;
    width:calc(100% - 70px);
    transform:translateY(calc(-50% + 28px));
    opacity:0;
    visibility:hidden;
    transition:opacity .4s ease,transform .4s ease,visibility .4s ease;
}
.need_copy.is_active{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%);
}
.need_copy h3{
    margin:28px 0 22px;
    font-size:clamp(38px,3.25vw,62px);
    line-height:1.22;
    letter-spacing:-.05em;
}
.need_copy p{

    margin:0;
    color:rgba(255,255,255,.5);
    font-size:24px;
    line-height:1.5;
}
.need_copy a{
    width:max-content;
    height:57px;
    margin-top:28px;
    padding:0 36px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    color:rgba(255,255,255,.72);
    font-size:18px;
}
.need_image_area{
    position:relative;
    height:calc(100vh - 80px);
    margin-left:28px;
    overflow:hidden;
    width: calc(100% - 80px)
}
.need_image{
    position:absolute;
    inset:0;
    margin:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.025);
    transition:opacity .5s ease,visibility .5s ease,transform .8s ease;
}
.need_image.is_active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}
.need_image img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* =========================================================
   SERVICE
========================================================= */

.renew_service{
    min-height:1200px;
    padding-top:185px;
    background:
        radial-gradient(circle at 0 40%,rgba(255,255,255,.07),transparent 29%),
        #090a0c;
        overflow-x: hidden
}
.service_head,
.benefit_head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
}
.service_head h2,
.benefit_head h2{
    margin:20px 0 0;
    font-size:clamp(34px,3vw,58px);
    line-height:1.25;
    letter-spacing:-.045em;
}
.slick_control{
    display:flex;
    align-items:center;
    gap:16px;
    padding-bottom:6px;
}
.slick_control button{
    width:28px;
    height:28px;
    padding:0;
    border:0;
    background:none;
    color:rgba(255,255,255,.64);
    font-size:17px;
    cursor:pointer;
}
.slick_control span{
    color:rgba(255,255,255,.45);
    font-size:16px;
}
.service_slider_outer{
    margin-top:82px;
    border-top:1px solid rgba(255,255,255,.18);
    border-bottom:1px solid rgba(255,255,255,.18);
}
.service_slider{
    margin-right:-22px;
}
.service_slider .slick-list{overflow:visible;}
.service_slider .slick-slide{padding-right:22px;}
.service_card{
    position:relative;
    padding:40px;
    border-right:1px solid rgba(255,255,255,.18);
}
.service_card figure{
    margin:0;
    height:430px;
    overflow:hidden;
    border-radius:4px;
    background:#f5f5f5;
}
.service_card figure img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.service_card h3{
    margin:25px 0 10px;
    font-size:22px;
    line-height:1.4;
}
.service_card p{
    margin:0;
    color:rgba(255,255,255,.44);
    font-size:13px;
    line-height:1.65;
}


/* =========================================================
   BENEFIT
========================================================= */

.renew_benefit{
    min-height:1110px;
    padding-top:170px;
    background:
        radial-gradient(circle at 0 50%,rgba(255,255,255,.07),transparent 30%),
        #090a0c;
        overflow-x: hidden
}
.benefit_slider_outer{
    margin-top:76px;
    border-top:1px solid rgba(255,255,255,.18);
    border-bottom:1px solid rgba(255,255,255,.18);
}

.benefit_slider .slick-slide{padding: 40px; border-right: 1px solid rgba(255,255,255,.18)}
.benefit_card{
    position:relative;
    display:block;
    height:520px;
    overflow:hidden;

}
.benefit_card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}
.benefit_card > i{
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.02) 65%);
}
.benefit_card strong{
    position:absolute;
    left:30px;
    bottom:28px;
    font-size:22px;
    line-height:1.4;
}
.benefit_card:hover img{transform:scale(1.035);}


/* =========================================================
   CTA
========================================================= */

.renew_cta{
    padding:130px 0 140px;
    background:#090a0c;
}
.cta_box{
    position:relative;
    height:680px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.13);
}
.cta_box > img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.cta_dim{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}
.cta_copy{
    position:absolute;
    z-index:2;
    top:50%;
    left:50%;
    width:90%;
    transform:translate(-50%,-50%);
    text-align:center;
}
.cta_copy h2{
    margin:0;
    font-size:clamp(44px,4.5vw,84px);
    line-height:1.15;
    letter-spacing:-.05em;
}
.cta_copy p{
    margin:24px 0 32px;
    color:rgba(255,255,255,.63);
    font-size:24px;
}
.cta_buttons{
    display:flex;
    justify-content:center;
    gap:10px;
}


/* =========================================================
   FOOTER
========================================================= */

.foot{
    border-top:1px solid rgba(255,255,255,.11);
    background:#070809;
}
.foot .inner{
    min-height:230px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}
.foot_company{color:rgba(255,255,255,.42);}
.foot_line{
    display:flex;
    flex-wrap:wrap;
    gap:6px 22px;
    margin:5px 0;
    font-size:14px;
    line-height:1.5;
    font-weight: 400
}
.foot_line a{color:rgba(255,255,255,.64); }
.foot_line b{color: #fff; margin-right: 10px}
.copyright{
    margin:17px 0 0;
    color:rgba(255,255,255,.22);
    font-size:14px;
    letter-spacing:.05em;
}
.foot_sns{
    display:flex;
    align-items:center;
    gap:11px;
}
.foot_sns a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    color:rgba(255,255,255,.62);
    font-size:16px;
}


/* =========================================================
   1500
========================================================= */
@media(max-width:1500px){
    :root{--side:60px;}
    .about_stage{width:calc(100% - 120px);}
    .about_card{width:36vw;max-width:560px;}
    .about_card_1 figure,
    .about_card_3 figure{height:560px;}
    .about_card_2 figure{height:540px;}
    .service_card figure{height:390px;}
}


/* =========================================================
   1280
========================================================= */
@media(max-width:1280px){
    :root{--side:44px;}
    .renew_gnb > ul{gap:30px;}
    .renew_about{min-height:2550px;}
    .about_stage{
        height:1960px;
        margin-top:150px;
    }
    .about_card_2{top:590px;}
    .about_card_3{top:1140px;}
    .truck_rail{height:1760px;}
    .service_card figure{height:350px;}
}


/* =========================================================
   1024
========================================================= */
@media(max-width:1024px){
    :root{--side:32px;}
    .header .inner{width:calc(100% - 48px);}
    .renew_gnb > ul{gap:22px;}
    .renew_gnb > ul > li > a{font-size:12px;}
    .renew_about{min-height:2300px;}
    .about_stage{
        width:calc(100% - 70px);
        height:1720px;
    }
    .about_card{width:40vw;}
    .about_card_1 figure,
    .about_card_3 figure{height:470px;}
    .about_card_2{top:520px;}
    .about_card_2 figure{height:450px;}
    .about_card_3{top:1000px;}
    .truck_rail{height:1540px;}
    .need_layout{grid-template-columns:36% 64%;}
    .need_copy{width:calc(100% - 45px);}
    .need_image_area{margin-left:22px;}
    .service_card figure{height:330px;}
    .benefit_card{height:450px;}
}


/* =========================================================
   819 / MOBILE
========================================================= */
@media(max-width:819px){
    :root{--side:20px;}
    .header{height:68px;}
    .header .inner{
        width:calc(100% - 30px);
        display:flex;
        justify-content:space-between;
    }
    .renew_gnb{display:none;}
    .header .logo{width:72px;height:30px;}
    .renew_down_app{
        min-width:96px!important;
        height:34px!important;
        font-size:10px!important;
    }

    .renew_hero{min-height:680px;}
    .renew_hero_center{width:calc(100% - 30px);}
    .renew_hero_center h1{
        font-size:clamp(50px,13vw,76px);
        line-height:.95;
    }
    .hero_main_copy{margin-top:20px;font-size:16px;}
    .hero_sub_copy{margin-top:14px;font-size:10px;}
    .hero_btns{left:20px;bottom:24px;}
    .hero_scroll{right:20px;bottom:18px;}
    .hero_pink_btn,.hero_line_btn{
        min-width:108px;
        height:40px;
        padding:0 14px;
        font-size:10px;
    }

    .renew_about{
        min-height:0;
        padding:120px 0 150px;
    }
    .about_title{
        width:calc(100% - 40px);
        text-align:left;
    }
    .about_title h2{font-size:38px;}
    .about_title p{font-size:13px;}
    .about_title p br{display:none;}
    .about_stage{
        width:calc(100% - 40px);
        height:auto;
        margin-top:90px;
        display:flex;
        flex-direction:column;
        gap:90px;
    }
    .about_card{
        position:relative;
        inset:auto!important;
        width:86%;
        max-width:none;
    }
    .about_card_2{margin-left:auto;}
    .about_card_1 figure,
    .about_card_2 figure,
    .about_card_3 figure{height:auto;aspect-ratio:1/1.08;}
    .about_card_txt{padding-left:0;}
    .about_card_3:after{display:none;}
    .truck_rail{
        top:0;
        right:8%;
        left:auto;
        width:64px;
        height:100%;
        transform:none;
    }
    .sticky_truck{top:38vh;width:52px;}

    .renew_question{min-height:780px;}
    .renew_question .inner{text-align:left;}
    .question_fill{font-size:12vw;}

    .need_pin{min-height:690px;}
    .need_layout{
        width:100%;
        max-width:none;
        display:block;
        position:relative;
    }
    .need_image_area{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        margin:0;
    }
    .need_image_area:after{
        content:"";
        position:absolute;
        inset:0;
        z-index:2;
        background:linear-gradient(0deg,rgba(0,0,0,.83),rgba(0,0,0,.1) 68%);
    }
    .need_copy_area{
        position:absolute;
        z-index:4;
        left:20px;
        right:20px;
        bottom:45px;
        height:360px;
        border:0;
    }
    .need_copy{
        top:auto;
        bottom:0;
        width:100%;
        transform:translateY(20px);
    }
    .need_copy.is_active{transform:translateY(0);}
    .need_copy h3{font-size:36px;}
    .need_copy p{font-size:13px;}

    .renew_service{
        min-height:0;
        padding:125px 0 170px;
    }
    .service_head,
    .benefit_head{
        width:calc(100% - 40px);
    }
    .service_head h2,
    .benefit_head h2{font-size:34px;}
    .slick_control{display:none;}
    .service_slider_outer{
        margin-top:55px;
        padding-left:20px;
    }
    .service_slider .slick-slide{padding-right:14px;}
    .service_card{padding-right:12px;}
    .service_card figure{height:auto;aspect-ratio:.8/1;}
    .service_card h3{font-size:18px;}
    .service_card p{font-size:12px;}

    .renew_benefit{
        min-height:0;
        padding:80px 0 150px;
    }
    .benefit_slider_outer{
        margin-top:55px;
        padding-left:20px;
    }
    .benefit_slider .slick-slide{padding-right:14px;}
    .benefit_card{height:360px;}
    .benefit_card strong{font-size:18px;}

    .renew_cta{padding:70px 0 90px;}
    .renew_cta .inner{width:calc(100% - 40px);}
    .cta_box{height:500px;}
    .cta_copy{text-align:left;}
    .cta_copy h2{font-size:46px;}
    .cta_copy p{font-size:13px;}
    .cta_buttons{justify-content:flex-start;}

    .foot .inner{
        width:calc(100% - 40px);
        min-height:0;
        padding:42px 0;
        align-items:flex-start;
        flex-direction:column;
        gap:30px;
    }
    .foot_line{
        flex-direction:column;
        gap:3px;
        font-size:10px;
    }
}


/* =========================================================
   580
========================================================= */
@media(max-width:580px){
    .renew_hero_center h1{font-size:13.4vw;}
    .about_title h2{font-size:32px;}
    .question_fill{font-size:12.5vw;}
    .need_copy h3{font-size:31px;}
    .service_head h2,
    .benefit_head h2{font-size:29px;}
    .benefit_card{height:320px;}
    .cta_box{height:430px;}
    .cta_copy h2{font-size:38px;}
}


/* =========================================================
   TARGETED DESIGN FIX
   중요: 기존 폰트사이즈 / 여백값은 변경하지 않음
   흰 선 포인트 + 트럭 이동 + QUESTION 줄별 채움만 보정
========================================================= */

/* ABOUT - 시안의 흰색 테두리/라인 포인트 */
.about_card{
    border-color: rgba(255,255,255,.34);
}

.about_card figure{
    border-bottom: 1px solid rgba(255,255,255,.18);
}



/* 가운데 트럭이 지나가는 얇은 세로 가이드 */
.about_stage::before{
    content:"";
    position:absolute;
    z-index:1;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    transform:translateX(-50%);
    background:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255,255,255,.12) 8%,
        rgba(255,255,255,.12) 92%,
        transparent 100%
    );
    pointer-events:none;
}

/* 트럭은 CSS sticky 대신 GSAP 이동으로 확실하게 따라오도록 */
.truck_rail{
    overflow:visible;
}

.sticky_truck{
    position:absolute !important;
    top:0 !important;
    left:50%;
    margin:0 !important;
    will-change:transform;
}

/* QUESTION - 한 줄씩 따로 채우기 */
.question_fill{
    background:none !important;
    -webkit-background-clip:initial !important;
    background-clip:initial !important;
}

.question_line{
    display:block;
    width:max-content;
    max-width:100%;
    margin:0 auto;
    color:rgba(255,255,255,.11);
    background:linear-gradient(90deg,#fff 0%,#fff 100%) no-repeat;
    background-size:0% 100%;
    background-position:left center;
    -webkit-background-clip:text;
    background-clip:text;
    will-change:background-size;
}

/* NEED - 시안의 얇은 흰 선 포인트 */
.need_layout::before,
.need_layout::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background:rgba(255,255,255,.11);
    pointer-events:none;
}

.need_layout::before{ top:0%; }
.need_layout::after{ bottom:0%; }

.need_image_area{
    border:1px solid rgba(255,255,255,.24);
}

/* SERVICE - 이미지 및 카드 사이 선을 조금 더 또렷하게 */
.service_card{
    border-right-color:rgba(255,255,255,.26);
}

.service_card figure{
    border:1px solid rgba(255,255,255,.15);
}

/* BENEFIT - 카드 외곽선 */
.benefit_card{
    border:1px solid rgba(255,255,255,.18);
}

/* CTA / FOOTER 선명도 */
.cta_box{
    border-color:rgba(255,255,255,.22);
}

.foot{
    border-top-color:rgba(255,255,255,.18);
}

@media(max-width:819px){
    .about_stage::before,
    .need_layout::before,
    .need_layout::after{
        display:none;
    }

    .question_line{
        width:auto;
        margin:0;
    }

    .need_image_area{
        border:0;
    }
}


/* =========================================================
   RESPONSIVE + FIXED HEADER UPDATE
   2026-09-14
   중요: 위의 PC 폰트/여백/카드 크기 값은 수정하지 않음.
   이 아래에서는 fixed header와 breakpoint override만 처리.
========================================================= */

/* ---------------------------------------------------------
   SCROLL FIXED HEADER
--------------------------------------------------------- */
.header{
    transition:
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        backdrop-filter .28s ease,
        -webkit-backdrop-filter .28s ease;
}

.header.header_fixed{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(8,9,11,.82);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

/* 헤더가 고정되어도 기존 PC 높이/폰트 크기는 그대로 유지 */
.header.header_fixed .depth2{
    background:rgba(12,13,15,.94);
}


/* =========================================================
   1500
========================================================= */
@media(max-width:1500px){

    :root{
        --side:60px;
    }

    .inner2{
        padding:0 4rem;
    }

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

    .renew_gnb > ul{
        gap:34px;
    }

    .about_stage{
        width:calc(100% - 120px);
    }

    .about_card{
        width:36vw;
        max-width:560px;
    }

    .about_card_1 figure,
    .about_card_3 figure{
        height:560px;
    }

    .about_card_2 figure{
        height:540px;
    }

    .need_layout{
        padding-left:4rem;
    }

    .need_image_area{
        width:calc(100% - 60px);
    }

    .service_card figure{
        height:390px;
    }
}


/* =========================================================
   1280
========================================================= */
@media(max-width:1280px){

    :root{
        --side:44px;
    }

    .inner2{
        padding:0 3rem;
    }

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

    .header .logo{
        width:102px;
        height:42px;
    }

    .renew_gnb > ul{
        gap:25px;
    }

    .renew_gnb > ul > li > a{
        font-size:16px;
    }

    .depth2 a{
        font-size:14px;
    }

    .renew_down_app{
        font-size:14px!important;
    }

    .renew_hero_center h1{
        font-size:clamp(58px,6vw,92px);
    }

    .hero_main_copy{
        font-size:28px;
    }

    .hero_sub_copy{
        margin-top:30px;
    }

    .hero_sub_copy span{
        font-size:14px;
    }

    .hero_pink_btn,
    .hero_line_btn{
        height:52px;
        padding:0 28px;
        font-size:16px;
    }

    .renew_about{
        min-height:2550px;
    }

    .about_title p{
        font-size:21px;
    }

    .about_stage{
        height:1960px;
        margin-top:150px;
    }

    .about_card{
        width:36vw;
        max-width:520px;
    }

    .about_card_2{
        top:590px;
    }

    .about_card_3{
        top:1140px;
    }

    .about_card_txt{
        padding:34px;
    }

    .about_card_txt > span{
        font-size:15px;
    }

    .about_card_txt h3{
        font-size:24px;
    }

    .about_card_txt p{
        font-size:17px;
    }

    .truck_rail{
        height:1760px;
    }

    .need_layout{
        grid-template-columns:42% 58%;
        padding-left:3rem;
    }

    .need_copy p{
        font-size:20px;
    }

    .need_copy a{
        height:50px;
        padding:0 28px;
        font-size:16px;
    }

    .need_image_area{
        width:calc(100% - 48px);
    }

    .service_head h2,
    .benefit_head h2{
        font-size:clamp(34px,3.3vw,50px);
    }

    .service_card{
        padding:32px;
    }

    .service_card figure{
        height:350px;
    }

    .benefit_slider .slick-slide{
        padding:32px;
    }

    .benefit_card{
        height:440px;
    }

    .cta_box{
        height:590px;
    }

    .cta_copy h2{
        font-size:clamp(42px,4.7vw,68px);
    }

    .cta_copy p{
        font-size:20px;
    }
}


/* =========================================================
   1024
========================================================= */
@media(max-width:1024px){

    :root{
        --side:32px;
    }

    .inner2{
        padding:0 2rem;
    }

    .header{
        height:78px;
    }

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

    .header .logo{
        width:92px;
        height:38px;
    }

    .renew_gnb > ul{
        gap:18px;
    }

    .renew_gnb > ul > li > a{
        padding:28px 0;
        font-size:14px;
    }

    .depth2{
        top:57px;
    }

    .depth2 a{
        font-size:13px;
    }

    .renew_down_app{
        min-width:104px!important;
        height:38px!important;
        font-size:13px!important;
    }

    .renew_hero{
        min-height:700px;
    }

    .renew_hero_center{
        width:calc(100% - 60px);
    }

    .renew_hero_center h1{
        font-size:clamp(54px,6.5vw,78px);
    }

    .hero_main_copy{
        margin-top:24px;
        font-size:24px;
    }

    .hero_sub_copy{
        margin-top:24px;
        gap:12px;
    }

    .hero_sub_copy span{
        padding:7px 15px;
        font-size:13px;
    }

    .hero_btns{
        left:30px;
        bottom:30px;
    }

    .hero_pink_btn,
    .hero_line_btn{
        height:48px;
        padding:0 22px;
        font-size:15px;
    }

    .hero_scroll{
        right:30px;
    }

    .renew_about{
        min-height:2300px;
        padding-top:200px;
    }

    .about_title h2{
        font-size:clamp(38px,4.2vw,48px);
    }

    .about_title p{
        margin-top:30px;
        font-size:18px;
    }

    .about_stage{
        width:calc(100% - 70px);
        height:1720px;
        margin-top:130px;
    }

    .about_card{
        width:40vw;
    }

    .about_card_1 figure,
    .about_card_3 figure{
        height:470px;
    }

    .about_card_2{
        top:520px;
    }

    .about_card_2 figure{
        height:450px;
    }

    .about_card_3{
        top:1000px;
    }

    .about_card_txt{
        padding:28px;
    }

    .about_card_txt > span{
        font-size:13px;
    }

    .about_card_txt h3{
        font-size:21px;
    }

    .about_card_txt p{
        font-size:15px;
    }

    .truck_rail{
        height:1540px;
    }

    .renew_question{
        min-height:900px;
    }

    .question_fill{
        font-size:clamp(54px,7.2vw,78px);
    }

    .need_layout{
        grid-template-columns:43% 57%;
        padding-left:2rem;
    }

    .need_copy{
        width:calc(100% - 42px);
    }

    .need_copy h3{
        font-size:clamp(34px,4vw,46px);
    }

    .need_copy p{
        font-size:18px;
    }

    .need_copy a{
        height:46px;
        padding:0 22px;
        font-size:14px;
    }

    .need_image_area{
        width:calc(100% - 36px);
        margin-left:20px;
    }

    .renew_service{
        min-height:1000px;
        padding-top:140px;
    }

    .service_head h2,
    .benefit_head h2{
        font-size:38px;
    }

    .service_slider_outer{
        margin-top:60px;
    }

    .service_card{
        padding:26px;
    }

    .service_card figure{
        height:320px;
    }

    .service_card h3{
        margin-top:18px;
        font-size:19px;
    }

    .service_card p{
        font-size:12px;
    }

    .renew_benefit{
        min-height:950px;
        padding-top:130px;
    }

    .benefit_slider_outer{
        margin-top:60px;
    }

    .benefit_slider .slick-slide{
        padding:26px;
    }

    .benefit_card{
        height:390px;
    }

    .benefit_card strong{
        left:24px;
        bottom:22px;
        font-size:19px;
    }

    .renew_cta{
        padding:100px 0;
    }

    .cta_box{
        height:520px;
    }

    .cta_copy h2{
        font-size:54px;
    }

    .cta_copy p{
        font-size:18px;
    }

    .foot .inner{
        min-height:190px;
    }

    .foot_line,
    .copyright{
        font-size:12px;
    }

    .foot_sns a{
        width:36px;
        height:36px;
        font-size:14px;
    }
}


/* =========================================================
   819 - TABLET / MOBILE
========================================================= */
@media(max-width:819px){

    :root{
        --side:20px;
    }

    .inner2{
        padding:0 20px;
    }

    .header{
        height:68px;
    }

    .header .inner{
        width:calc(100% - 32px);
        display:flex;
        justify-content:space-between;
    }

    .header.header_fixed{
        background:rgba(8,9,11,.90);
    }

    .renew_gnb{
        display:none;
    }

    .header .logo{
        width:78px;
        height:32px;
    }

    .renew_down_app{
        min-width:100px!important;
        height:36px!important;
        padding:0 14px!important;
        font-size:12px!important;
    }

    .renew_hero{
        height:100svh;
        min-height:640px;
    }

    .renew_hero_center{
        top:46%;
        width:calc(100% - 36px);
    }

    .renew_hero_center h1{
        font-size:clamp(46px,11.8vw,72px);
        line-height:.96;
    }

    .hero_main_copy{
        margin-top:20px;
        font-size:20px;
    }

    .hero_sub_copy{
        margin-top:20px;
        gap:8px;
    }

    .hero_sub_copy span{
        padding:6px 13px;
        font-size:11px;
    }

    .hero_btns{
        left:20px;
        bottom:24px;
        gap:8px;
    }

    .hero_pink_btn,
    .hero_line_btn{
        min-width:110px;
        height:44px;
        padding:0 15px;
        font-size:12px;
    }

    .hero_scroll{
        right:20px;
        bottom:19px;
    }

    .renew_about{
        min-height:0;
        padding:120px 0 150px;
    }

    .about_title{
        width:calc(100% - 40px);
        text-align:center;
    }

    .round_tag{
        height:30px;
        padding:0 13px;
        font-size:12px;
    }

    .about_title h2{
        margin-top:22px;
        font-size:34px;
        line-height:1.35;
    }

    .about_title p{
        margin-top:26px;
        font-size:15px;
        line-height:1.75;
    }

    .about_title p br{
        display:none;
    }

    .about_stage{
        width:calc(100% - 40px);
        height:auto;
        margin-top:82px;
        display:flex;
        flex-direction:column;
        gap:72px;
    }

    .about_card{
        position:relative;
        inset:auto!important;
        width:86%;
        max-width:none;
    }

    .about_card_2{
        margin-left:auto;
    }

    .about_card_1 figure,
    .about_card_2 figure,
    .about_card_3 figure{
        height:auto;
        aspect-ratio:1 / 1.04;
    }

    .about_card_txt{
        padding:24px;
    }

    .about_card_txt > span{
        font-size:12px;
    }

    .about_card_txt h3{
        margin-top:8px;
        font-size:20px;
    }

    .about_card_txt p{
        font-size:14px;
        line-height:1.65;
    }

    .about_card_3:after{
        display:none;
    }

    .truck_rail{
        top:0;
        right:7%;
        left:auto;
        width:62px;
        height:100%;
        transform:none;
    }

    .sticky_truck{
        width:50px;
    }

    .renew_question{
        min-height:700px;
        padding:90px 0;
    }

    .renew_question .inner{
        text-align:center;
    }

    .question_fill{
        font-size:clamp(46px,10.5vw,72px);
        line-height:1.16;
    }

    .question_line{
        width:max-content;
        margin:0 auto;
    }

    .need_pin{
        min-height:680px;
    }

    .need_layout{
        width:100%;
        max-width:none;
        padding:0;
        display:block;
        position:relative;
    }

    .need_image_area{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        margin:0;
        border:0;
    }

    .need_image_area:after{
        content:"";
        position:absolute;
        inset:0;
        z-index:2;
        background:linear-gradient(
            0deg,
            rgba(0,0,0,.86) 0%,
            rgba(0,0,0,.42) 42%,
            rgba(0,0,0,.08) 78%
        );
    }

    .need_copy_area{
        position:absolute;
        z-index:4;
        left:20px;
        right:20px;
        bottom:48px;
        height:340px;
        border:0;
    }

    .need_copy{
        top:auto;
        bottom:0;
        width:100%;
        transform:translateY(20px);
    }

    .need_copy.is_active{
        transform:translateY(0);
    }

    .need_copy h3{
        margin:20px 0 16px;
        font-size:36px;
    }

    .need_copy p{
        font-size:16px;
    }

    .need_copy a{
        height:44px;
        padding:0 18px;
        font-size:13px;
    }

    .renew_service{
        min-height:0;
        padding:110px 0 130px;
    }

    .service_head,
    .benefit_head{
        width:calc(100% - 40px);
    }

    .service_head h2,
    .benefit_head h2{
        font-size:30px;
        line-height:1.35;
    }

    .slick_control{
        display:none;
    }

    .service_slider_outer{
        margin-top:48px;
    }

    .service_slider .slick-slide{
        padding-right:0;
    }

    .service_card{
        padding:22px;
    }

    .service_card figure{
        height:auto;
        aspect-ratio:.82 / 1;
    }

    .service_card h3{
        margin-top:16px;
        font-size:17px;
    }

    .service_card p{
        font-size:11px;
    }

    .renew_benefit{
        min-height:0;
        padding:80px 0 120px;
    }

    .benefit_slider_outer{
        margin-top:48px;
    }

    .benefit_slider .slick-slide{
        padding:22px;
    }

    .benefit_card{
        height:340px;
    }

    .benefit_card strong{
        left:20px;
        right:20px;
        bottom:20px;
        font-size:18px;
    }

    .renew_cta{
        padding:70px 0 80px;
    }

    .renew_cta .inner2{
        padding:0 20px;
    }

    .cta_box{
        height:430px;
    }

    .cta_copy{
        width:calc(100% - 48px);
        text-align:center;
    }

    .cta_copy h2{
        font-size:38px;
    }

    .cta_copy p{
        margin:18px 0 26px;
        font-size:16px;
        line-height:1.6;
    }

    .cta_buttons{
        justify-content:center;
    }

    .foot .inner{
        width:calc(100% - 40px);
        min-height:0;
        padding:38px 0;
        align-items:flex-start;
        flex-direction:column;
        gap:28px;
    }

    .foot_line{
        gap:5px 16px;
        font-size:11px;
        line-height:1.7;
    }

    .copyright{
        margin-top:14px;
        font-size:10px;
    }

    .foot_sns a{
        width:34px;
        height:34px;
        font-size:13px;
    }
}


/* =========================================================
   580
========================================================= */
@media(max-width:580px){

    .inner2{
        padding:0 16px;
    }

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

    .header .logo{
        width:70px;
        height:29px;
    }

    .renew_down_app{
        min-width:92px!important;
        height:34px!important;
        font-size:11px!important;
    }

    .renew_hero_center h1{
        font-size:12.3vw;
    }

    .hero_main_copy{
        font-size:18px;
    }

    .hero_sub_copy span{
        font-size:10px;
    }

    .hero_pink_btn,
    .hero_line_btn{
        height:42px;
        min-width:104px;
        padding:0 14px;
        font-size:11px;
    }

    .about_title{
        width:calc(100% - 32px);
    }

    .about_title h2{
        font-size:30px;
    }

    .about_title p{
        font-size:14px;
    }

    .about_stage{
        width:calc(100% - 32px);
        gap:58px;
    }

    .about_card{
        width:91%;
    }

    .about_card_txt{
        padding:20px;
    }

    .about_card_txt h3{
        font-size:18px;
    }

    .about_card_txt p{
        font-size:13px;
    }

    .question_fill{
        font-size:11.5vw;
    }

    .need_copy_area{
        left:16px;
        right:16px;
        bottom:36px;
    }

    .need_copy h3{
        font-size:31px;
    }

    .need_copy p{
        font-size:15px;
    }

    .service_head,
    .benefit_head{
        width:calc(100% - 32px);
    }

    .service_head h2,
    .benefit_head h2{
        font-size:27px;
    }

    .service_card{
        padding:18px;
    }

    .benefit_slider .slick-slide{
        padding:18px;
    }

    .benefit_card{
        height:300px;
    }

    .cta_box{
        height:390px;
    }

    .cta_copy{
        width:calc(100% - 32px);
    }

    .cta_copy h2{
        font-size:32px;
    }

    .cta_copy p{
        font-size:14px;
    }

    .foot .inner{
        width:calc(100% - 32px);
        padding:32px 0;
    }

    .foot_line{
        flex-direction:column;
        gap:3px;
        font-size:11px;
    }
}


/* =========================================================
   360
========================================================= */
@media(max-width:360px){

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

    .header .logo{
        width:64px;
        height:27px;
    }

    .renew_down_app{
        min-width:84px!important;
        padding:0 11px!important;
        font-size:10px!important;
    }

    .renew_hero_center{
        width:calc(100% - 24px);
    }

    .renew_hero_center h1{
        font-size:42px;
    }

    .hero_main_copy{
        font-size:16px;
    }

    .hero_sub_copy{
        gap:6px;
    }

    .hero_sub_copy span{
        padding:5px 10px;
    }

    .hero_btns{
        left:12px;
        right:12px;
        bottom:18px;
    }

    .hero_pink_btn,
    .hero_line_btn{
        flex:1;
        min-width:0;
        padding:0 12px;
    }

    .hero_scroll{
        display:none;
    }

    .about_title h2{
        font-size:26px;
    }

    .about_title p{
        font-size:13px;
    }

    .about_card{
        width:94%;
    }

    .question_fill{
        font-size:40px;
    }

    .need_copy h3{
        font-size:28px;
    }

    .need_copy p{
        font-size:14px;
    }

    .service_head h2,
    .benefit_head h2{
        font-size:24px;
    }

    .benefit_card{
        height:280px;
    }

    .cta_box{
        height:360px;
    }

    .cta_copy h2{
        font-size:29px;
    }

    .cta_buttons{
        gap:7px;
    }

    .cta_buttons .hero_pink_btn,
    .cta_buttons .hero_line_btn{
        min-width:0;
        flex:1;
    }
}


/* =========================================================
   MOBILE NAVIGATION + MOBILE TRUCK HIDE
   중요: 기존 PC 폰트/여백 값은 변경하지 않음
========================================================= */

/* PC에서는 기존 헤더 구조 그대로 */
.header_actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:10px;
}

.mobile_menu_btn,
.mobile_nav_panel{
    display:none;
}


/* =========================================================
   819px 이하 : GNB 대신 햄버거 메뉴
========================================================= */
@media(max-width:819px){

    /* ABOUT 중앙 트럭은 모바일에서 제거 */
    .truck_rail{
        display:none !important;
    }

    .header_actions{
        margin-left:auto;
        display:flex;
        align-items:center;
        gap:8px;
    }

    .mobile_menu_btn{
        position:relative;
        z-index:1002;
        width:38px;
        height:38px;
        padding:0;
        flex:0 0 38px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:1px solid rgba(255,255,255,.28);
        border-radius:50%;
        background:rgba(0,0,0,.10);
        color:#fff;
        cursor:pointer;
    }

    .mobile_menu_btn span{
        display:block;
        width:15px;
        height:1px;
        margin:0;
        background:#fff;
        transform-origin:center;
        transition:
            transform .28s ease,
            opacity .22s ease,
            width .28s ease;
    }

    body.mobile_menu_open{
        overflow:hidden;
    }

    body.mobile_menu_open .header{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:1000;
        background:rgba(8,9,11,.96);
        border-bottom:1px solid rgba(255,255,255,.10);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
    }

    body.mobile_menu_open .mobile_menu_btn span:nth-child(1){
        transform:translateY(6px) rotate(45deg);
    }

    body.mobile_menu_open .mobile_menu_btn span:nth-child(2){
        opacity:0;
        width:0;
    }

    body.mobile_menu_open .mobile_menu_btn span:nth-child(3){
        transform:translateY(-6px) rotate(-45deg);
    }

    .mobile_nav_panel{
        position:fixed;
        z-index:999;
        inset:0;
        display:block;
        padding:94px 20px 28px;
        background:
            radial-gradient(circle at 0 100%, rgba(255,255,255,.06), transparent 36%),
            #090a0c;
        opacity:0;
        visibility:hidden;
        transform:translateY(-12px);
        pointer-events:none;
        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .35s cubic-bezier(.22,.61,.36,1);
        overflow-y:auto;
    }

    body.mobile_menu_open .mobile_nav_panel{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .mobile_nav_inner{
        width:100%;
        min-height:calc(100dvh - 122px);
        display:flex;
        flex-direction:column;
        justify-content:space-between;
    }

    .mobile_nav{
        border-top:1px solid rgba(255,255,255,.18);
    }

    .mobile_nav_link,
    .mobile_depth_btn{
        width:100%;
        min-height:72px;
        padding:0 4px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
        border:0;
        border-bottom:1px solid rgba(255,255,255,.18);
        background:none;
        color:#fff;
        text-align:left;
        font-size:22px;
        line-height:1.2;
        font-weight:700;
        letter-spacing:-.035em;
    }

    .mobile_nav_link i{
        color:rgba(255,255,255,.55);
        font-size:15px;
        font-style:normal;
        font-weight:400;
    }

    .mobile_depth_btn i{
        position:relative;
        width:18px;
        height:18px;
        flex:0 0 18px;
    }

    .mobile_depth_btn i::before,
    .mobile_depth_btn i::after{
        content:"";
        position:absolute;
        top:50%;
        left:50%;
        width:14px;
        height:1px;
        background:#fff;
        transform:translate(-50%,-50%);
        transition:transform .25s ease;
    }

    .mobile_depth_btn i::after{
        transform:translate(-50%,-50%) rotate(90deg);
    }

    .mobile_nav_group.open .mobile_depth_btn i::after{
        transform:translate(-50%,-50%) rotate(0);
    }

    .mobile_depth2{
        max-height:0;
        overflow:hidden;
        border-bottom:1px solid rgba(255,255,255,.18);
        background:rgba(255,255,255,.025);
        transition:max-height .35s ease;
    }

    .mobile_nav_group.open .mobile_depth2{
        max-height:210px;
    }

    .mobile_depth2 a{
        min-height:52px;
        padding:0 16px;
        display:flex;
        align-items:center;
        color:rgba(255,255,255,.62);
        font-size:15px;
        font-weight:500;
        border-bottom:1px solid rgba(255,255,255,.07);
    }

    .mobile_depth2 a:last-child{
        border-bottom:0;
    }

    .mobile_nav_download{
        width:100%;
        height:54px;
        margin-top:36px;
        padding:0 20px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
        border-radius:999px;
        background:var(--pink);
        color:#fff;
        font-size:14px;
        font-weight:700;
    }

    .mobile_nav_download i{
        font-style:normal;
    }
}


/* =========================================================
   580px 이하
========================================================= */
@media(max-width:580px){

    .mobile_nav_panel{
        padding:84px 16px 22px;
    }

    .mobile_nav_inner{
        min-height:calc(100dvh - 106px);
    }

    .mobile_nav_link,
    .mobile_depth_btn{
        min-height:66px;
        font-size:20px;
    }

    .mobile_depth2 a{
        min-height:48px;
        font-size:14px;
    }

    .mobile_menu_btn{
        width:36px;
        height:36px;
        flex-basis:36px;
    }
}


/* =========================================================
   360px 이하
========================================================= */
@media(max-width:360px){

    .header_actions{
        gap:6px;
    }

    .mobile_menu_btn{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .mobile_nav_link,
    .mobile_depth_btn{
        min-height:62px;
        font-size:19px;
    }
}


/* =========================================================
   SUB PAGE / BOARD / INQUIRY
   2026-09-14
   기존 메인 PC 폰트/여백값을 건드리지 않고 아래에 추가
========================================================= */

:root{
    --sub-line:rgba(255,255,255,.18);
    --sub-line-strong:rgba(255,255,255,.34);
    --sub-panel:#171719;
    --sub-panel-2:#1c1c1e;
    --sub-muted:rgba(255,255,255,.52);
}

/* ---------------------------------------------------------
   COMMON
--------------------------------------------------------- */
.renew_sub_page,
.renew_board_page,
.renew_inquiry_page{
    min-height:100vh;
    padding:190px 0 150px;
    background:#050506;
    color:#fff;
}

.renew_sub_inner{
    width:min(calc(100% - 12rem), 1600px);
    margin:0 auto;
}

.renew_sub_title{
    margin-bottom:150px;
    text-align:center;
}

.renew_sub_title h1{
    margin:0;
    color:#fff;
    font-size:clamp(44px,3.5vw,64px);
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.05em;
}

.renew_sub_title h1 span{
    display:block;
}

.renew_sub_tabs{
    margin-top:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.renew_sub_tabs a,
.renew_sub_tabs button,
.renew_sub_tabs label{
    min-width:112px;
    height:52px;
    padding:0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.38);
    border-radius:999px;
    background:transparent;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.renew_sub_tabs .active,
.renew_sub_tabs a.active,
.renew_sub_tabs label:has(input:checked){
    border-color:var(--pink);
    background:var(--pink);
    color:#fff;
}

.renew_board_toolbar{
    margin-bottom:54px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
}

.renew_board_count{
    color:rgba(255,255,255,.72);
    font-size:14px;
}

.renew_board_count b{
    color:var(--pink);
    font-weight:700;
}

.renew_board_search{
    display:flex;
    align-items:center;
    gap:10px;
}

.renew_board_search select,
.renew_board_search input{
    height:54px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:4px;
    outline:0;
    background:#1a1a1c;
    color:#fff;
    font-size:14px;
}

.renew_board_search select{
    width:142px;
    padding:0 18px;
}

.renew_board_search .search_input{
    position:relative;
    width:360px;
}

.renew_board_search .search_input input{
    width:100%;
    padding:0 52px 0 20px;
}

.renew_board_search .search_input button{
    position:absolute;
    top:50%;
    right:17px;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    background:transparent;
    color:#fff;
    transform:translateY(-50%);
    cursor:pointer;
}

.renew_board_search .search_input button::before{
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    width:10px;
    height:10px;
    border:2px solid #fff;
    border-radius:50%;
}

.renew_board_search .search_input button::after{
    content:"";
    position:absolute;
    top:16px;
    left:16px;
    width:8px;
    height:2px;
    border-radius:2px;
    background:#fff;
    transform:rotate(45deg);
    transform-origin:left center;
}

.renew_board_search .search_input button span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

.renew_admin_buttons{
    margin-top:32px;
    display:flex;
    justify-content:flex-end;
    gap:8px;
}

.renew_admin_buttons a{
    min-width:82px;
    height:38px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    color:#fff;
    font-size:12px;
}

.renew_admin_buttons a.primary{
    border-color:var(--pink);
    background:var(--pink);
}


/* ---------------------------------------------------------
   GNUBOARD PAGING
--------------------------------------------------------- */
.renew_board_page .pg_wrap{
    margin:88px 0 0;
    display:block;
    text-align:center;
}

.renew_board_page .pg{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.renew_board_page .pg_page,
.renew_board_page .pg_current{
    position:relative;
    min-width:18px;
    height:30px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.76);
    font-size:14px;
    font-weight:700;
    line-height:30px;
}

.renew_board_page .pg_current{
    color:var(--pink);
}

.renew_board_page .pg_current::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-5px;
    width:18px;
    height:2px;
    background:var(--pink);
    transform:translateX(-50%);
}

.renew_board_page .pg_start,
.renew_board_page .pg_end,
.renew_board_page .pg_prev,
.renew_board_page .pg_next{
    width:28px;
    overflow:hidden;
    color:transparent;
}

.renew_board_page .pg_prev::after,
.renew_board_page .pg_next::after{
    content:"";
    width:7px;
    height:7px;
    border-top:1px solid #fff;
    border-right:1px solid #fff;
}

.renew_board_page .pg_prev::after{
    transform:rotate(-135deg);
}

.renew_board_page .pg_next::after{
    transform:rotate(45deg);
}


/* =========================================================
   EVENT BOARD
========================================================= */
.renew_event_grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    column-gap:30px;
    row-gap:86px;
}

.renew_event_item{
    min-width:0;
}

.renew_event_thumb{
    position:relative;
    width:100%;
    aspect-ratio:1.47 / 1;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    background:#1b1b1d;
}

.renew_event_thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.renew_event_item:hover .renew_event_thumb img{
    transform:scale(1.025);
}

.renew_event_no_thumb{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1c1c1e;
}

.renew_event_no_thumb::before{
    content:"";
    width:124px;
    height:54px;
    background:url(../img/logo.svg) center/contain no-repeat;
}

.renew_event_item h3{
    margin:25px 0 0;
    color:#fff;
    font-size:18px;
    line-height:1.5;
    font-weight:700;
    letter-spacing:-.03em;
    text-align:center;
}

.renew_event_item .event_category{
    margin-top:12px;
    display:block;
    color:var(--pink);
    font-size:12px;
    font-weight:700;
    text-align:center;
}


/* =========================================================
   NOTICE BOARD
========================================================= */
.renew_notice_table{
    border-top:1px solid rgba(255,255,255,.65);
}

.renew_notice_head,
.renew_notice_row{
    display:grid;
    grid-template-columns:120px minmax(0,1fr) 130px 180px;
    align-items:center;
}

.renew_notice_head{
    min-height:70px;
    border-bottom:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.025);
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-align:center;
}

.renew_notice_row{
    min-height:72px;
    border-bottom:1px solid rgba(255,255,255,.17);
    color:rgba(255,255,255,.74);
    font-size:14px;
}

.renew_notice_row > *{
    min-width:0;
    padding:0 20px;
}

.renew_notice_row .num,
.renew_notice_row .file,
.renew_notice_row .date{
    text-align:center;
}

.renew_notice_row .subject a{
    display:block;
    overflow:hidden;
    color:#fff;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.renew_notice_row .subject .notice_badge{
    margin-right:10px;
    color:var(--pink);
    font-size:11px;
    font-weight:700;
}

.renew_notice_row .file{
    color:rgba(255,255,255,.66);
}

.renew_notice_row .date{
    color:rgba(255,255,255,.42);
}


/* =========================================================
   FAQ BOARD
========================================================= */
.renew_faq_list{
    border-top:1px solid rgba(255,255,255,.68);
}

.renew_faq_item{
    border-bottom:1px solid rgba(255,255,255,.18);
}

.renew_faq_q{
    width:100%;
    min-height:94px;
    padding:20px 12px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 32px;
    align-items:center;
    gap:22px;
    border:0;
    background:transparent;
    color:#fff;
    text-align:left;
}

.renew_faq_q .q_mark{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    background:#202022;
    color:#fff;
    font-family:"Outfit",sans-serif;
    font-size:16px;
    font-weight:800;
}

.renew_faq_q strong{
    font-size:18px;
    line-height:1.5;
    font-weight:700;
    letter-spacing:-.025em;
}

.renew_faq_q .faq_arrow{
    position:relative;
    width:20px;
    height:20px;
    justify-self:end;
}

.renew_faq_q .faq_arrow::before,
.renew_faq_q .faq_arrow::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:9px;
    height:1px;
    background:#fff;
    transition:transform .25s ease;
}

.renew_faq_q .faq_arrow::before{
    transform:translate(-7px,-50%) rotate(45deg);
}

.renew_faq_q .faq_arrow::after{
    transform:translate(-1px,-50%) rotate(-45deg);
}

.renew_faq_a{
    display:none;
    margin:0 0 30px 72px;
    padding:34px 42px;
    border-radius:7px;
    background:#1b1b1d;
    color:rgba(255,255,255,.72);
    font-size:15px;
    line-height:1.8;
}

.renew_faq_item.is_open .q_mark{
    background:var(--pink);
}

.renew_faq_item.is_open .faq_arrow{
    transform:rotate(180deg);
}

.renew_faq_item.is_open .renew_faq_a{
    display:block;
}


/* =========================================================
   BOARD VIEW
========================================================= */
.renew_view_page{
    min-height:100vh;
    padding:180px 0 150px;
    background:#050506;
}

.renew_view_inner{
    width:min(calc(100% - 12rem), 1400px);
    margin:0 auto;
}

.renew_view_header{
    padding:54px 0 48px;
    border-top:1px solid rgba(255,255,255,.65);
    border-bottom:1px solid rgba(255,255,255,.18);
    text-align:center;
}

.renew_view_category{
    margin-bottom:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:30px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:999px;
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:700;
}

.renew_view_header h1{
    margin:0;
    color:#fff;
    font-size:clamp(36px,3vw,54px);
    line-height:1.35;
    letter-spacing:-.05em;
}

.renew_view_meta{
    margin-top:22px;
    color:rgba(255,255,255,.42);
    font-size:13px;
}

.renew_view_content{
    min-height:360px;
    padding:70px 0 90px;
    border-bottom:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.78);
    font-size:17px;
    line-height:1.9;
}

.renew_view_content img{
    height:auto!important;
    margin:0 auto 34px;
    max-width:100%!important;
}

.renew_view_files{
    border-bottom:1px solid rgba(255,255,255,.18);
}

.renew_view_file{
    min-height:64px;
    padding:0 20px;
    display:flex;
    align-items:center;
    gap:20px;
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.72);
    font-size:13px;
}

.renew_view_file b{
    color:#fff;
    font-weight:700;
}

.renew_view_neighbors{
    border-bottom:1px solid rgba(255,255,255,.18);
}

.renew_view_neighbors a{
    min-height:68px;
    padding:0 20px;
    display:grid;
    grid-template-columns:90px minmax(0,1fr);
    align-items:center;
    border-top:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.62);
    font-size:14px;
}

.renew_view_neighbors a b{
    color:#fff;
}

.renew_view_bottom{
    margin-top:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.renew_view_bottom a{
    min-width:112px;
    height:48px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    color:#fff;
    font-size:14px;
    font-weight:700;
}

.renew_view_bottom a.primary{
    border-color:var(--pink);
    background:var(--pink);
}


/* =========================================================
   INQUIRY
========================================================= */
.renew_inquiry_page{
    padding-bottom:170px;
}

.renew_inquiry_page .renew_sub_title{
    margin-bottom:118px;
}

.inquiry_category_radio{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.renew_inquiry_form{
    width:min(calc(100% - 12rem), 1600px);
    margin:0 auto;
}

.renew_inquiry_form .form_in > ul{
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:40px;
    row-gap:42px;
    list-style:none;
}

.renew_inquiry_form .form_in > ul > li{
    min-width:0;
}

.renew_inquiry_form .form_in > ul > li.w100{
    grid-column:1 / -1;
}

.renew_inquiry_form .form_in > ul > li > p{
    margin:0 0 14px;
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.renew_inquiry_form .form_in > ul > li > p span{
    color:var(--pink);
}

.renew_inquiry_form input[type="text"],
.renew_inquiry_form input[type="email"],
.renew_inquiry_form select,
.renew_inquiry_form textarea{
    width:100%;
    border:1px solid rgba(255,255,255,.12);
    border-radius:4px;
    outline:0;
    background:#121214;
    color:#fff;
    font-family:"Pretendard",sans-serif;
    font-size:15px;
    transition:border-color .25s ease, background-color .25s ease;
}

.renew_inquiry_form input[type="text"],
.renew_inquiry_form input[type="email"],
.renew_inquiry_form select{
    height:60px;
    padding:0 20px;
}

.renew_inquiry_form textarea{
    height:400px;
    padding:22px 20px;
    resize:vertical;
    line-height:1.7;
}

.renew_inquiry_form input::placeholder,
.renew_inquiry_form textarea::placeholder{
    color:rgba(255,255,255,.30);
}

.renew_inquiry_form input:focus,
.renew_inquiry_form select:focus,
.renew_inquiry_form textarea:focus{
    border-color:rgba(255,255,255,.42);
    background:#171719;
}

.renew_inquiry_form select{
    appearance:none;
    -webkit-appearance:none;
    background-image:
        linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),
        linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
    background-position:
        calc(100% - 20px) 27px,
        calc(100% - 15px) 27px;
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
}

.renew_inquiry_form .flex_input{
    display:grid;
    grid-template-columns:180px 18px 1fr 18px 1fr;
    align-items:center;
    gap:12px;
}

.renew_inquiry_form .flex_input > span{
    color:rgba(255,255,255,.48);
    text-align:center;
}

.renew_inquiry_form .ck_agree{
    margin-top:48px;
    display:flex;
    align-items:center;
    gap:12px;
}

.renew_inquiry_form .ck_agree input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}

.renew_inquiry_form .ck_agree label{
    position:relative;
    width:20px;
    height:20px;
    flex:0 0 20px;
    border:1px solid rgba(255,255,255,.58);
    border-radius:3px;
    background:#fff;
    cursor:pointer;
}

.renew_inquiry_form .ck_agree input:checked + label{
    border-color:var(--pink);
    background:var(--pink);
}

.renew_inquiry_form .ck_agree input:checked + label::after{
    content:"";
    position:absolute;
    left:6px;
    top:3px;
    width:5px;
    height:9px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(45deg);
}

.renew_inquiry_form .ck_agree p{
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:14px;
}

.renew_inquiry_form .ck_agree a{
    color:#fff;
    font-weight:700;
}

.renew_inquiry_form .form_in_btn{
    margin-top:84px;
    text-align:center;
}

.renew_inquiry_form .form_in_btn .more_btn{
    min-width:132px;
    height:56px;
    padding:0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:0;
    border-radius:999px;
    background:var(--pink);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.renew_inquiry_form .form_in_btn .more_btn svg{
    display:block;
    width:16px;
    height:16px;
}

/* loading / success */
#loading,
#success_popup{
    position:fixed;
    inset:0;
    z-index:10000;
    align-items:center;
    justify-content:center;
}

#loading{
    display:none;
    flex-direction:column;
    background:rgba(5,5,6,.84);
    backdrop-filter:blur(8px);
}

#loading .spinner{
    width:48px;
    height:48px;
    border:3px solid rgba(255,255,255,.18);
    border-top-color:var(--pink);
    border-radius:50%;
    animation:renewSpin .8s linear infinite;
}

#loading p{
    margin:16px 0 0;
    color:#fff;
    font-size:14px;
}

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

#success_popup{
    display:none;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}

#success_popup .popup_content{
    width:min(calc(100% - 40px),430px);
    padding:44px 34px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:10px;
    background:#171719;
    color:#fff;
    text-align:center;
}

#success_popup h2{
    margin:0 0 12px;
    color:#fff;
    font-size:26px;
}

#success_popup p{
    margin:0;
    color:rgba(255,255,255,.62);
    font-size:14px;
}

#close_popup{
    min-width:94px;
    height:42px;
    margin-top:26px;
    padding:0 20px;
    border:0;
    border-radius:999px;
    background:var(--pink);
    color:#fff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}


/* =========================================================
   SUB RESPONSIVE
========================================================= */
@media(max-width:1280px){
    .renew_sub_inner,
    .renew_inquiry_form{
        width:calc(100% - 6rem);
    }

    .renew_view_inner{
        width:calc(100% - 6rem);
    }

    .renew_event_grid{
        column-gap:22px;
    }
}

@media(max-width:1024px){
    .renew_sub_page,
    .renew_board_page,
    .renew_inquiry_page{
        padding-top:150px;
    }

    .renew_sub_inner,
    .renew_inquiry_form,
    .renew_view_inner{
        width:calc(100% - 4rem);
    }

    .renew_sub_title{
        margin-bottom:110px;
    }

    .renew_event_grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .renew_notice_head,
    .renew_notice_row{
        grid-template-columns:80px minmax(0,1fr) 90px 130px;
    }

    .renew_inquiry_form .flex_input{
        grid-template-columns:130px 14px 1fr 14px 1fr;
        gap:8px;
    }
}

@media(max-width:819px){
    .renew_sub_page,
    .renew_board_page,
    .renew_inquiry_page{
        padding:120px 0 100px;
    }

    .renew_sub_inner,
    .renew_inquiry_form,
    .renew_view_inner{
        width:calc(100% - 40px);
    }

    .renew_sub_title{
        margin-bottom:72px;
    }

    .renew_sub_title h1{
        font-size:38px;
    }

    .renew_sub_tabs{
        margin-top:30px;
        gap:8px;
    }

    .renew_sub_tabs a,
    .renew_sub_tabs button,
    .renew_sub_tabs label{
        min-width:0;
        height:44px;
        padding:0 18px;
        font-size:13px;
    }

    .renew_board_toolbar{
        margin-bottom:36px;
        align-items:stretch;
        flex-direction:column;
        gap:18px;
    }

    .renew_board_search{
        width:100%;
    }

    .renew_board_search select{
        width:105px;
        height:48px;
        font-size:12px;
    }

    .renew_board_search .search_input{
        width:auto;
        flex:1;
    }

    .renew_board_search input{
        height:48px;
        font-size:12px;
    }

    .renew_event_grid{
        grid-template-columns:1fr;
        row-gap:50px;
    }

    .renew_event_item h3{
        margin-top:17px;
        font-size:17px;
    }

    .renew_notice_head{
        display:none;
    }

    .renew_notice_table{
        border-top:1px solid rgba(255,255,255,.48);
    }

    .renew_notice_row{
        min-height:82px;
        padding:14px 0;
        display:grid;
        grid-template-columns:42px minmax(0,1fr);
        grid-template-areas:
            "num subject"
            "num meta";
        row-gap:6px;
    }

    .renew_notice_row > *{
        padding:0 8px;
    }

    .renew_notice_row .num{
        grid-area:num;
        align-self:center;
    }

    .renew_notice_row .subject{
        grid-area:subject;
    }

    .renew_notice_row .file,
    .renew_notice_row .date{
        display:inline;
        text-align:left;
    }

    .renew_notice_row .file{
        grid-area:meta;
        justify-self:start;
    }

    .renew_notice_row .date{
        grid-area:meta;
        justify-self:end;
    }

    .renew_faq_q{
        min-height:80px;
        grid-template-columns:38px minmax(0,1fr) 26px;
        gap:14px;
        padding:16px 4px;
    }

    .renew_faq_q .q_mark{
        width:34px;
        height:34px;
        font-size:14px;
    }

    .renew_faq_q strong{
        font-size:16px;
    }

    .renew_faq_a{
        margin:0 0 24px;
        padding:26px 24px;
        font-size:14px;
    }

    .renew_view_page{
        padding:120px 0 100px;
    }

    .renew_view_header{
        padding:38px 0 34px;
    }

    .renew_view_header h1{
        font-size:34px;
    }

    .renew_view_content{
        padding:48px 0 64px;
        font-size:15px;
    }

    .renew_view_neighbors a{
        grid-template-columns:68px minmax(0,1fr);
        font-size:13px;
    }

    .renew_inquiry_page .renew_sub_title{
        margin-bottom:70px;
    }

    .renew_inquiry_form .form_in > ul{
        grid-template-columns:1fr;
        row-gap:28px;
    }

    .renew_inquiry_form .form_in > ul > li.w100{
        grid-column:auto;
    }

    .renew_inquiry_form input[type="text"],
    .renew_inquiry_form input[type="email"],
    .renew_inquiry_form select{
        height:54px;
        font-size:14px;
    }

    .renew_inquiry_form textarea{
        height:300px;
        font-size:14px;
    }

    .renew_inquiry_form .flex_input{
        grid-template-columns:94px 10px 1fr 10px 1fr;
    }

    .renew_inquiry_form .ck_agree{
        margin-top:34px;
        align-items:flex-start;
    }

    .renew_inquiry_form .ck_agree p{
        font-size:12px;
        line-height:1.6;
    }

    .renew_inquiry_form .form_in_btn{
        margin-top:54px;
    }
}

@media(max-width:580px){
    .renew_sub_inner,
    .renew_inquiry_form,
    .renew_view_inner{
        width:calc(100% - 32px);
    }

    .renew_sub_title h1{
        font-size:32px;
    }

    .renew_sub_tabs{
        gap:6px;
    }

    .renew_sub_tabs a,
    .renew_sub_tabs button,
    .renew_sub_tabs label{
        height:42px;
        padding:0 15px;
        font-size:12px;
    }

    .renew_board_search{
        flex-wrap:wrap;
    }

    .renew_board_search select{
        width:100%;
    }

    .renew_board_search .search_input{
        width:100%;
        flex-basis:100%;
    }

    .renew_notice_row{
        grid-template-columns:34px minmax(0,1fr);
    }

    .renew_inquiry_form .flex_input{
        grid-template-columns:82px 8px 1fr 8px 1fr;
        gap:5px;
    }

    .renew_inquiry_form .form_in_btn .more_btn{
        height:52px;
        font-size:14px;
    }
}


/* =========================================================
   BOARD WRITE
   이벤트 / 공지사항 / FAQ 글쓰기·수정
========================================================= */

.renew_write_page{
    min-height:100vh;
    padding:180px 0 150px;
    background:#050506;
    color:#fff;
}

.renew_write_inner{
    width:min(calc(100% - 12rem), 1400px);
    margin:0 auto;
}

.renew_write_title{
    margin-bottom:92px;
    text-align:center;
}

.renew_write_title h1{
    margin:0;
    color:#fff;
    font-size:clamp(44px,3.5vw,64px);
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.05em;
}

.renew_write_title p{
    margin:18px 0 0;
    color:rgba(255,255,255,.46);
    font-size:15px;
    line-height:1.7;
}

.renew_write_form{
    border-top:1px solid rgba(255,255,255,.65);
}

.renew_write_row{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    align-items:start;
    min-height:86px;
    border-bottom:1px solid rgba(255,255,255,.16);
}

.renew_write_label{
    padding:31px 28px 24px 0;
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.renew_write_label .required{
    color:var(--pink);
}

.renew_write_field{
    min-width:0;
    padding:16px 0 16px 28px;
}

.renew_write_field input[type="text"],
.renew_write_field input[type="password"],
.renew_write_field input[type="email"],
.renew_write_field select{
    width:100%;
    height:54px;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:4px;
    outline:0;
    background:#151517;
    color:#fff;
    font-size:14px;
}

.renew_write_field input::placeholder{
    color:rgba(255,255,255,.28);
}

.renew_write_field input:focus,
.renew_write_field select:focus,
.renew_write_field textarea:focus{
    border-color:rgba(255,255,255,.40);
}

.renew_write_field select{
    appearance:none;
    -webkit-appearance:none;
    background-color:#151517;
    background-image:
        linear-gradient(45deg,transparent 50%,rgba(255,255,255,.62) 50%),
        linear-gradient(135deg,rgba(255,255,255,.62) 50%,transparent 50%);
    background-position:
        calc(100% - 20px) 24px,
        calc(100% - 15px) 24px;
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
}

.renew_write_field textarea{
    width:100%;
    min-height:360px;
    padding:20px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:4px;
    outline:0;
    resize:vertical;
    background:#151517;
    color:#fff;
    font-family:"Pretendard",sans-serif;
    font-size:15px;
    line-height:1.8;
}

/* 그누보드 에디터가 들어와도 검정 디자인에 맞게 외곽 정리 */
.renew_write_field .cke,
.renew_write_field .se2_input_area,
.renew_write_field iframe{
    max-width:100%;
}

.renew_write_options{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.renew_write_check{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.72);
    font-size:13px;
    cursor:pointer;
}

.renew_write_check input{
    width:16px;
    height:16px;
    accent-color:var(--pink);
}

.renew_file_box{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.renew_file_box input[type="file"]{
    max-width:100%;
    color:rgba(255,255,255,.66);
    font-size:13px;
}

.renew_file_box input[type="file"]::file-selector-button{
    height:40px;
    margin-right:12px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    background:transparent;
    color:#fff;
    font-size:12px;
    cursor:pointer;
}

.renew_file_info{
    margin-top:8px;
    color:rgba(255,255,255,.36);
    font-size:12px;
    line-height:1.6;
}

.renew_existing_file{
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(255,255,255,.58);
    font-size:12px;
}

.renew_write_captcha{
    padding-top:8px;
}

.renew_write_buttons{
    margin-top:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.renew_write_buttons a,
.renew_write_buttons button{
    min-width:126px;
    height:52px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}

.renew_write_buttons .cancel{
    border:1px solid rgba(255,255,255,.30);
    background:transparent;
    color:#fff;
}

.renew_write_buttons .submit{
    border:1px solid var(--pink);
    background:var(--pink);
    color:#fff;
}

.renew_write_buttons svg{
    display:block;
    width:16px;
    height:16px;
}

.renew_write_help{
    margin-top:8px;
    color:rgba(255,255,255,.36);
    font-size:12px;
}

/* 글자수 */
.renew_write_field #char_count_desc,
.renew_write_field #char_count_wrap{
    color:rgba(255,255,255,.42);
    font-size:12px;
}

@media(max-width:1024px){
    .renew_write_inner{
        width:calc(100% - 4rem);
    }

    .renew_write_row{
        grid-template-columns:145px minmax(0,1fr);
    }
}

@media(max-width:819px){
    .renew_write_page{
        padding:120px 0 100px;
    }

    .renew_write_inner{
        width:calc(100% - 40px);
    }

    .renew_write_title{
        margin-bottom:60px;
    }

    .renew_write_title h1{
        font-size:36px;
    }

    .renew_write_title p{
        font-size:13px;
    }

    .renew_write_row{
        min-height:0;
        padding:22px 0;
        display:block;
    }

    .renew_write_label{
        padding:0 0 12px;
        font-size:14px;
    }

    .renew_write_field{
        padding:0;
    }

    .renew_write_field input[type="text"],
    .renew_write_field input[type="password"],
    .renew_write_field input[type="email"],
    .renew_write_field select{
        height:52px;
    }

    .renew_write_field textarea{
        min-height:280px;
        font-size:14px;
    }

    .renew_write_buttons{
        margin-top:48px;
    }
}

@media(max-width:580px){
    .renew_write_inner{
        width:calc(100% - 32px);
    }

    .renew_write_title h1{
        font-size:31px;
    }

    .renew_write_buttons a,
    .renew_write_buttons button{
        min-width:0;
        flex:1;
        height:50px;
    }
}


/* =========================================================
   SERVICE INTRODUCTION PAGE
   디자인 시안 기준 / 기존 메인 폰트·여백값은 변경하지 않음
========================================================= */

.service_intro_page{
    overflow:hidden;
    background:#08090b;
    color:#fff;
}

.service_intro_inner{
    width:min(calc(100% - 12rem), 1540px);
    margin:0 auto;
}


/* =========================================================
   01. FIRST SCROLL / IMAGE ZOOM
========================================================= */

.service_intro_visual_section{
    position:relative;
    height:230vh;
    background:#050506;
}

.service_intro_visual_sticky{
    position:sticky;
    top:0;
    height:100vh;
    min-height:760px;
    overflow:hidden;
}

.service_intro_visual_heading{
    position:absolute;
    z-index:3;
    top:12vh;
    left:50%;
    width:min(calc(100% - 80px), 1100px);
    transform:translateX(-50%);
    text-align:center;
}

.service_intro_visual_heading .round_tag{
    margin-bottom:22px;
}

.service_intro_visual_heading h1{
    margin:0;
    font-size:clamp(46px,4.25vw,76px);
    line-height:1.24;
    font-weight:800;
    letter-spacing:-.05em;
}

.service_intro_visual_heading p{
    margin:28px 0 0;
    color:rgba(255,255,255,.68);
    font-size:18px;
    line-height:1.7;
}

.service_intro_visual_heading p em{
    color:var(--pink);
    font-style:normal;
    font-weight:700;
}

.service_intro_visual_frame{
    position:absolute;
    z-index:2;
    bottom:39vh;
    left:50%;
    width:min(920px, calc(100vw - 12rem));
    height:min(51vh, 560px);
    transform:translateX(-50%);
    overflow:hidden;
    background:#151517;
    will-change:width,height,top;
}

.service_intro_visual_frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    will-change:transform;
}


/* =========================================================
   02. MAIN TEXT FILL
   .renew_question / .question_fill / .question_line 은
   메인페이지 코드를 그대로 재사용
========================================================= */

.service_intro_question{
    min-height:100vh;
    background:
        radial-gradient(circle at 6% 46%,rgba(255,255,255,.08),transparent 30%),
        linear-gradient(90deg,#171819 0%,#0b0c0e 45%,#08090b 100%);
}

.service_intro_question .question_fill{
    font-size:clamp(62px,6vw,108px);
}


/* =========================================================
   03. WHY / PROBLEM
========================================================= */

.service_intro_flow{
    background:
        radial-gradient(circle at 5% 42%,rgba(255,255,255,.08),transparent 30%),
        linear-gradient(90deg,#171819 0%,#0b0c0e 45%,#08090b 100%);
}

.service_problem_section{
    padding:170px 0 210px;
}

.service_problem_head{
    text-align:center;
}

.service_problem_head h2{
    margin:22px 0 0;
    font-size:clamp(38px,3.4vw,62px);
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.05em;
}

.service_problem_grid{
    margin-top:105px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid rgba(255,255,255,.22);
    border-bottom:1px solid rgba(255,255,255,.22);
}

.service_problem_card{
    position:relative;
    min-height:340px;
    padding:56px 46px 44px;
    border-right:1px solid rgba(255,255,255,.22);
}

.service_problem_card:last-child{
    border-right:0;
}

.service_problem_icon{
    width:94px;
    height:94px;
    margin:0 auto 45px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.service_problem_icon img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.service_problem_card .role{
    display:block;
    margin-bottom:12px;
    color:var(--pink);

    font-size:16px;
    font-weight:700;
    letter-spacing:.06em;
}

.service_problem_card h3{
    margin:0;
    color:#fff;
    font-size:24px;
    line-height:1.5;
    font-weight:700;
    letter-spacing:-.035em;
}


/* =========================================================
   04. CONNECTION DIAGRAM
========================================================= */

.service_connection_section{
    padding:150px 0 230px;
    text-align:center;
}

.service_connection_title h2{
    margin:22px 0 0;
    font-size:clamp(38px,3.3vw,60px);
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.05em;
}

.service_connection_title h2 em{
    color:var(--pink);
    font-style:normal;
}

.service_connection_diagram{
    position:relative;
    width:680px;
    height:680px;
    margin:100px auto 0;
}

.service_connection_center{
    position:absolute;
    z-index:5;
    top:50%;
    left:50%;
    width:230px;
    height:130px;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
}

.service_connection_center img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.service_connection_orbit{
    position:absolute;
    z-index:1;
    top:50%;
    left:50%;
    width:510px;
    height:510px;
    transform:translate(-50%,-50%);
    border:2px dashed rgba(255,255,255,.38);
    border-radius:50%;
    animation:serviceOrbitSpin 18s linear infinite;
}

.service_connection_orbit::before,
.service_connection_orbit::after{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:13px solid rgba(255,255,255,.72);
}

.service_connection_orbit::before{
    top:44px;
    right:80px;
    transform:rotate(36deg);
}

.service_connection_orbit::after{
    left:42px;
    bottom:92px;
    transform:rotate(215deg);
}

@keyframes serviceOrbitSpin{
    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

.service_connection_node{
    position:absolute;
    z-index:4;
    width:142px;
    height:142px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#292a2e;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 50px rgba(0,0,0,.18);
    animation:serviceNodePulse 6s linear infinite;
}

.service_connection_node span{
    display:block;
    color:rgba(255,255,255,.62);

    font-size:14px;
    font-weight:600;
    letter-spacing:.08em;
}

.service_connection_node strong{
    margin-top:7px;
    color:#fff;
    font-size:18px;
    font-weight:700;
}

.service_connection_node.node_consumer{
    top:4px;
    left:50%;
    transform:translateX(-50%);
    animation-delay:0s;
}

.service_connection_node.node_trucker{
    left:40px;
    bottom:72px;
    animation-delay:2s;
}

.service_connection_node.node_organizer{
    right:40px;
    bottom:72px;
    animation-delay:4s;
}

@keyframes serviceNodePulse{
    0%,27%,100%{
        background:#292a2e;
        border-color:rgba(255,255,255,.12);
    }
    33%,58%{
        background:var(--pink);
        border-color:var(--pink);
    }
}


/* =========================================================
   05. CORE SERVICE SLIDER
========================================================= */

.service_core_section{
    padding:80px 0 170px;
}

.service_core_head{
    margin-bottom:54px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
}

.service_core_head h2{
    margin:0;
    font-size:32px;
    font-weight:700;
    letter-spacing:-.04em;
}

.core_service_slider{
    border-top:1px solid rgba(255,255,255,.28);
}

.core_service_slider .slick-list{
    overflow:hidden;
}

.core_service_slide{
    border-bottom:1px solid rgba(255,255,255,.28);
}

.core_service_slide_inner{
    min-height:620px;
    display:grid;
    grid-template-columns:61% 39%;
}

.core_service_visual{
    position:relative;
    min-height:620px;
    overflow:hidden;
    border-right:1px solid rgba(255,255,255,.22);
    background:#151517;
    padding: 40px
}

.core_service_visual img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.core_service_copy{
    position:relative;
    min-height:620px;
    padding:88px 65px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.core_service_step{
    color:var(--pink);

    font-size:16px;
    font-weight:800;
    letter-spacing:.06em;
}

.core_service_copy h3{
    margin:24px 0 25px;
    color:#fff;
    font-size:40px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.05em;
}

.core_service_copy p{font-size: 18px;}

.core_service_tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.core_service_tags span{
    min-height:36px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(255,255,255,.38);
    border-radius:999px;
    color:rgba(255,255,255,.74);
    font-size:16px;
    font-weight:600;
}

.core_service_copy .core_slide_deco{
    position:absolute;
    right:58px;
    bottom:58px;
    display:flex;
    gap:10px;
}

.core_service_copy .core_slide_deco i{
    width:38px;
    height:38px;
    display:block;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
}

.core_service_num{
    color:rgba(255,255,255,.48);
    font-size:16px;
}


/* =========================================================
   06. HOW TO USE / EVENT
   기존 renew_benefit + latest(theme/pic_block) 사용
========================================================= */

.service_how_section.renew_benefit{
    min-height:0;
    padding-top:160px;
    padding-bottom:160px;
}

.service_how_section .benefit_head h2{
    white-space:pre-line;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1280px){

    .service_intro_inner{
        width:calc(100% - 6rem);
    }

    .service_intro_visual_frame{
        width:calc(100vw - 8rem);
    }

    .service_problem_card{
        padding:48px 34px 40px;
    }

    .service_connection_diagram{
        transform:scale(.9);
        transform-origin:center top;
        margin-bottom:-65px;
    }

    .core_service_slide_inner{
        grid-template-columns:58% 42%;
    }

    .core_service_visual,
    .core_service_copy,
    .core_service_slide_inner{
        min-height:560px;
    }

    .core_service_copy{
        padding:70px 46px;
    }

    .core_service_copy h3{
        font-size:30px;
    }
}

@media(max-width:1024px){

    .service_intro_inner{
        width:calc(100% - 4rem);
    }

    .service_intro_visual_heading h1{
        font-size:50px;
    }

    .service_intro_visual_heading p{
        font-size:16px;
    }

    .service_problem_card{
        min-height:300px;
        padding:42px 26px 34px;
    }

    .service_problem_icon{
        width:80px;
        height:80px;
        margin-bottom:36px;
    }

    .service_problem_card h3{
        font-size:19px;
    }

    .service_connection_diagram{
        transform:scale(.8);
        margin-bottom:-135px;
    }

    .core_service_visual,
    .core_service_copy,
    .core_service_slide_inner{
        min-height:500px;
    }

    .core_service_copy{
        padding:55px 35px;
    }

    .core_service_copy h3{
        font-size:27px;
    }
}

@media(max-width:819px){

    .service_intro_inner{
        width:calc(100% - 40px);
    }

    .service_intro_visual_section{
        height:185vh;
    }

    .service_intro_visual_sticky{
        min-height:660px;
    }

    .service_intro_visual_heading{
        top:14vh;
        width:calc(100% - 40px);
    }

    .service_intro_visual_heading h1{
        font-size:36px;
        line-height:1.3;
    }

    .service_intro_visual_heading p{
        margin-top:22px;
        font-size:14px;
        line-height:1.7;
    }

    .service_intro_visual_frame{
        top:43vh;
        width:calc(100vw - 40px);
        height:38vh;
    }

    .service_intro_question{
        min-height:720px;
    }

    .service_intro_question .question_fill{
        font-size:11.5vw;
    }

    .service_problem_section{
        padding:110px 0 130px;
    }

    .service_problem_head h2{
        font-size:32px;
    }

    .service_problem_grid{
        margin-top:65px;
        display:block;
        border-top:1px solid rgba(255,255,255,.22);
    }

    .service_problem_card{
        min-height:0;
        padding:34px 4px;
        display:grid;
        grid-template-columns:90px minmax(0,1fr);
        grid-template-areas:
            "icon role"
            "icon title";
        column-gap:25px;
        align-items:center;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.22);
    }

    .service_problem_icon{
        grid-area:icon;
        width:72px;
        height:72px;
        margin:0;
    }

    .service_problem_card .role{
        grid-area:role;
        align-self:end;
        margin:0 0 5px;
        font-size:12px;
    }

    .service_problem_card h3{
        grid-area:title;
        align-self:start;
        font-size:17px;
    }

    .service_connection_section{
        padding:100px 0 150px;
    }

    .service_connection_title h2{
        font-size:31px;
    }

    .service_connection_diagram{
        width:560px;
        height:560px;
        left:50%;
        margin:70px 0 -70px;
        transform:translateX(-50%) scale(.72);
        transform-origin:center top;
    }

    .service_core_section{
        padding:60px 0 120px;
    }

    .service_core_head{
        margin-bottom:38px;
    }

    .service_core_head h2{
        font-size:28px;
    }

    .core_service_slide_inner{
        display:block;
    }

    .core_service_visual,
    .core_service_copy,
    .core_service_slide_inner{
        min-height:0;
    }

    .core_service_visual{
        height:62vw;
        min-height:320px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.22);
    }

    .core_service_copy{
        min-height:300px;
        padding:42px 24px 60px;
    }

    .core_service_step{
        font-size:14px;
    }

    .core_service_copy h3{
        margin:18px 0 20px;
        font-size:25px;
    }

    .core_service_copy .core_slide_deco{
        right:24px;
        bottom:22px;
    }

    .service_how_section.renew_benefit{
        padding-top:100px;
        padding-bottom:120px;
    }
}

@media(max-width:580px){

    .service_intro_inner{
        width:calc(100% - 32px);
    }

    .service_intro_visual_heading{
        width:calc(100% - 32px);
    }

    .service_intro_visual_heading h1{
        font-size:31px;
    }

    .service_intro_visual_heading p{
        font-size:13px;
    }

    .service_intro_visual_frame{
        width:calc(100vw - 32px);
    }

    .service_problem_head h2,
    .service_connection_title h2{
        font-size:28px;
    }

    .service_problem_card{
        grid-template-columns:70px minmax(0,1fr);
        column-gap:20px;
    }

    .service_problem_icon{
        width:60px;
        height:60px;
    }

    .service_problem_card h3{
        font-size:16px;
    }

    .service_connection_diagram{
        transform:translateX(-50%) scale(.62);
        margin-bottom:-120px;
    }

    .service_core_head h2{
        font-size:25px;
    }

    .core_service_visual{
        height:68vw;
        min-height:260px;
    }

    .core_service_copy{
        min-height:270px;
        padding:34px 20px 54px;
    }

    .core_service_copy h3{
        font-size:22px;
    }

    .core_service_tags span{
        min-height:28px;
        padding:0 10px;
        font-size:10px;
    }
}


/* =========================================================
   SERVICE INTRO V2 OVERRIDE
========================================================= */

.service_intro_page{
    overflow:hidden;
    background:#08090b;
    color:#fff;
    padding:150px 0;
}


/* FIRST VISUAL : 긴 230vh 제거 */
.service_intro_visual_section{
    position:relative;
    height:auto;
    min-height:calc(100vh - 86px);
    background:#050506;
}

.service_intro_visual_sticky{
    position:relative;
    top:auto;
    height:calc(100vh - 86px);
    min-height:680px;
    overflow:hidden;
}

.service_intro_visual_heading{
    top:7vh;
}

.service_intro_visual_frame{
    top:34vh;
    width:min(920px, calc(100vw - 12rem));
    height:min(49vh, 560px);
}

.service_intro_question{
    margin-top:0;
}


/* WHY : 각각 독립 박스 */
.service_problem_grid{
    margin-top:105px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    border:0;
}

.service_problem_card{
    min-height:360px;
    padding:52px 40px 40px;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.01);
}

.service_problem_card:last-child{
    border-right:1px solid rgba(255,255,255,.25);
}

.service_problem_icon{
 
    margin: 0 0 56px auto;
}

.service_problem_text{
    margin-top:auto;
}

.service_problem_card .role{
    margin-bottom:10px;
}

.service_problem_card h3{
    margin:0 0 13px;
    font-size:22px;
    line-height:1.45;
    font-weight:700;
}

.service_problem_card p{
    margin:0;
    color:rgba(255,255,255,.48);
    font-size:18px;
    line-height:1.5;
}


/* CORE SERVICE : inner 없이 전체 폭 */
.service_core_section{
    width:100%;
    padding:80px 0 170px;
}

.service_core_head{
    margin-bottom:54px;
    padding:0 6rem;
}

.service_core_head h2{
    margin:0;
}

.core_service_slider_wrap{
    position:relative;
    width:100%;
    border-top:1px solid rgba(255,255,255,.28);
    border-bottom:1px solid rgba(255,255,255,.28);
}

.core_service_slider{
    width:100%;
    border-top:0;
}

.core_service_slide{
    border-bottom:0;
}

.core_service_slide_inner{
    min-height:calc(100vh - 190px);
    display:grid;
    grid-template-columns:62% 38%;
}

.core_service_visual{
    min-height:calc(100vh - 190px);
    border-right:1px solid rgba(255,255,255,.24);
}

.core_service_copy{
    min-height:calc(100vh - 190px);
    padding:0 6rem;
    justify-content:center;
}

.core_service_progress{
    margin-bottom:30px;
    display:flex;
    align-items:center;
    gap:18px;
    color:rgba(255,255,255,.68);

    font-size:16px;
}

.core_service_progress_bar{
    display:flex;
    align-items:center;
    gap:10px;
}

.core_service_progress_bar i{
    width:24px;
    height:2px;
    display:block;
    background:rgba(255,255,255,.17);
}

.core_service_progress_bar i.active{
    background:#fff;
}

.core_service_step{
    font-size:17px;
}

.core_service_copy h3{
    margin:22px 0 26px;
    font-size:34px;
}

.core_service_nav{
    position:absolute;
    z-index:8;
    left:calc(62% + 6rem);
    bottom:6rem;
    display:flex;
    align-items:center;
    gap:12px;
}

.core_service_nav button{
    width:44px;
    height:44px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
}

.core_service_nav button.slick-disabled{
    opacity:.35;
}


/* RESPONSIVE */
@media(max-width:1500px){
    .service_core_head{padding:0 4rem;}
    .core_service_copy{padding:0 4rem;}
    .core_service_nav{
        left:calc(62% + 4rem);
        bottom:4rem;
    }
}

@media(max-width:1280px){
    .service_intro_visual_frame{
        width:calc(100vw - 8rem);
    }

    .service_problem_grid{gap:20px;}
    .service_problem_card{padding:46px 30px 35px;}

    .service_core_head{padding:0 3rem;}
    .core_service_copy{padding:0 3rem;}
    .core_service_nav{
        left:calc(62% + 3rem);
        bottom:3rem;
    }
}

@media(max-width:1024px){
    .service_intro_visual_frame{
        width:calc(100vw - 5rem);
    }

    .service_problem_grid{gap:16px;}
    .service_problem_card{
        min-height:320px;
        padding:40px 24px 30px;
    }

    .service_problem_icon{margin-bottom:42px;}
    .service_problem_card h3{font-size:19px;}
    .service_problem_card p{font-size:13px;}

    .service_core_head{padding:0 2rem;}

    .core_service_slide_inner{
        grid-template-columns:58% 42%;
    }

    .core_service_copy{padding:0 2.5rem;}

    .core_service_nav{
        left:calc(58% + 2.5rem);
        bottom:2.5rem;
    }
}

@media(max-width:819px){
    .service_intro_page{
        padding:100px 0;
    }

    .service_intro_visual_section{
        min-height:calc(100svh - 68px);
    }

    .service_intro_visual_sticky{
        height:calc(100svh - 68px);
        min-height:600px;
    }

    .service_intro_visual_heading{top:5vh;}

    .service_intro_visual_frame{
        top:39vh;
        width:calc(100vw - 40px);
        height:40vh;
    }

    .service_problem_grid{
        margin-top:65px;
        grid-template-columns:1fr;
        gap:16px;
    }

    .service_problem_card{
        min-height:0;
        padding:28px 24px;
        display:grid;
        grid-template-columns:80px minmax(0,1fr);
        column-gap:22px;
        align-items:center;
    }

    .service_problem_icon{
        width:68px;
        height:68px;
        margin:0;
    }

    .service_problem_text{margin:0;}
    .service_problem_card h3{
        margin-bottom:8px;
        font-size:18px;
    }
    .service_problem_card p{font-size:13px;}

    .service_core_section{
        padding:60px 0 120px;
    }

    .service_core_head{
        padding:0 20px;
        margin-bottom:36px;
    }

    .core_service_slide_inner{
        display:block;
        min-height:0;
    }

    .core_service_visual{
        height:62vw;
        min-height:320px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.24);
    }

    .core_service_copy{
        min-height:330px;
        padding:44px 24px 90px;
        justify-content:flex-start;
    }

    .core_service_copy h3{font-size:26px;}

    .core_service_nav{
        left:24px;
        bottom:24px;
    }
}

@media(max-width:580px){
    .service_intro_page{
        padding:88px 0;
    }

    .service_intro_visual_frame{
        width:calc(100vw - 32px);
    }

    .service_problem_card{
        grid-template-columns:64px minmax(0,1fr);
        column-gap:17px;
        padding:24px 18px;
    }

    .service_problem_icon{
        width:56px;
        height:56px;
    }

    .service_problem_card h3{font-size:17px;}
    .service_problem_card p{font-size:12px;}

    .service_core_head{padding:0 16px;}

    .core_service_visual{min-height:270px;}

    .core_service_copy{
        min-height:300px;
        padding:34px 20px 82px;
    }

    .core_service_copy h3{font-size:23px;}

    .core_service_nav{
        left:20px;
        bottom:20px;
    }
}



/* =========================================================
   GUIDE PAGES FINAL
   consumer / trucker / organizer
   기준 디자인: 2026-09-14 재전달 시안
========================================================= */

.guide_page{
    --guide-line:rgba(255,255,255,.18);
    --guide-line-strong:rgba(255,255,255,.28);
    --guide-muted:rgba(255,255,255,.48);
    --guide-bg:#090a0c;
    --guide-panel:#171719;
    overflow:hidden;
    background:var(--guide-bg);
    color:#fff;
}

/* =========================================================
   01. TOP
   서비스소개와 동일한 HTML class 재사용.
   가이드 페이지에서는 pin 없이 자연스럽게 연결.
========================================================= */

.guide_page.service_intro_page{
    padding:0;
}

.guide_page .service_intro_visual_section{
    position:relative;
    height:auto !important;
    min-height:0 !important;
    padding:clamp(110px,8vw,155px) 0 0;
    background:#050506;
}

.guide_page .service_intro_visual_sticky{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible;
}

.guide_page .service_intro_visual_heading{
    position:relative;
    top:auto;
    left:auto;
    width:min(calc(100% - 60px),860px);
    margin:0 auto;
    transform:none;
    text-align:center;
}

.guide_page .service_intro_visual_heading .round_tag{
    margin-bottom:22px;
}

.guide_page .service_intro_visual_heading h1{
    margin:0;
    color:#fff;
    font-size:clamp(46px,3.55vw,68px);
    line-height:1.27;
    font-weight:800;
    letter-spacing:-.055em;
}

.guide_page .service_intro_visual_heading p{
 
    margin:24px auto 0;
    color:#fff;
    font-size:24px;
    line-height:1.75;
}

.guide_top_buttons{
    margin-top:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.guide_top_buttons .hero_pink_btn,
.guide_top_buttons .hero_line_btn{
    min-width:128px;
}

.guide_page .service_intro_visual_frame{
    position:relative;
    z-index:2;
    top:auto;
    bottom:auto;
    left:50%;
    width:100vw;
    height:clamp(470px,42vw,760px);
    margin-top:56px;
    transform:translateX(-50%);
    transform-origin:center;
    overflow:hidden;
    background:#171719;
    will-change:transform;
    backface-visibility:hidden;
}

.guide_page .service_intro_visual_frame img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transform:translateZ(0);
    backface-visibility:hidden;
}

/* 이미지 파일을 아직 안 넣어도 깨진 아이콘/alt 노출 방지 */
.guide_page img.guide_img_missing{
    opacity:0;
}


/* =========================================================
   COMMON
========================================================= */

.guide_gradient{
    background:
        radial-gradient(circle at 3% 38%,rgba(255,255,255,.07),transparent 31%),
        linear-gradient(90deg,#18191a 0%,#0d0e10 45%,#090a0c 100%);
}

.guide_inner{
    width:min(calc(100% - 12rem),1540px);
    margin:0 auto;
}

.guide_center_title{
    text-align:center;
}

.guide_center_title .round_tag{
    margin-bottom:20px;
}

.guide_center_title h2{
    margin:0;
    color:#fff;
    font-size:clamp(36px,3.05vw,56px);
    line-height:1.38;
    font-weight:800;
    letter-spacing:-.05em;
}

.guide_center_title p{

    margin:22px auto 0;
    color:var(--guide-muted);
    font-size:24px;
    line-height:1.5;
}

.guide_img_box{
    position:relative;
    overflow:hidden;
    background:#171719;
}

.guide_img_box img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


/* =========================================================
   CONSUMER PROBLEM / WHERE WHAT WHEN
========================================================= */

.consumer_problem{
    padding:135px 0 120px;
}

.consumer_ww{
 
    margin:78px auto 0;
    border-top:1px solid var(--guide-line-strong);
}

.consumer_ww_row{
    min-height:164px;
    display:flex;

    align-items:center;
    border-bottom:1px solid var(--guide-line-strong);
    padding: 44px 0;
    gap:40px
}

.consumer_ww_row:nth-child(even){
   
}

.consumer_ww_copy{
    min-width:0;

    display:flex;
    align-items:center;
    gap:25px;
}

.consumer_ww_row:nth-child(even) .consumer_ww_copy{
    order:2;
    justify-content:flex-start;
}

.consumer_ww_word{
    flex:1;
    color:#ff2a57;

    font-size:60px;
    line-height:1;
    font-weight:500;
    font-style:italic;
    letter-spacing:-.055em;
}

.consumer_ww_desc{
    color:#fff;
    font-size:30px;
    line-height:1.3;
    font-weight:700;
    word-break:keep-all;
    flex:auto;
    width: 100%
}

.consumer_ww_image{
    height:181px;

        flex: auto;
}

.consumer_ww_row:nth-child(even) .consumer_ww_image{
    order:1;
}


/* =========================================================
   QUESTION FILL
   메인 question_fill / question_line 재사용
========================================================= */

.guide_question.renew_question{
    min-height:720px;
    padding:100px 0;
}

.guide_question .inner{
    width:min(calc(100% - 60px),1540px);
    text-align:center !important;
}

.guide_question .question_fill{
    font-size:clamp(54px,5.45vw,100px);
    line-height:1.18;
}

.guide_question .question_line{
    display:block;
    width:max-content;
    max-width:100%;
    margin:0 auto;
}


/* =========================================================
   APP STEP ROWS
========================================================= */

.guide_steps_section{
    padding:50px 0 125px;
}

.guide_steps{
  
    margin:0 auto;

}

.guide_step{
    min-height:385px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    align-items:center;
    gap:70px;
    border:1px solid var(--guide-line-strong);
    padding: 0 120px
}

.guide_step + .guide_step{margin-top: 60px}

.guide_step_copy{
  
}

.guide_step_no{
    display:block;
    margin-bottom:15px;
    color:rgba(255,255,255,.34);

    font-size:11px;
    letter-spacing:.08em;
}

.guide_step_copy h3{
    margin:0;
    color:#fff;
    font-size:40px;
    line-height:1.4;
    font-weight:700;

}

.guide_step_copy p{
    width:min(100%,470px);
    margin:18px 0 0;
    color:rgba(255,255,255,.43);
    font-size:18px;
    line-height:1.5;
}

.guide_step_screen{

    padding-top:80px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    
}

.guide_step_screen img{
    max-width:370px;
    max-height:560px;
    object-fit:contain;
}


/* =========================================================
   CONSUMER PHONE SHOWCASE
========================================================= */

.consumer_showcase{
    padding:150px 0 150px;
}

.guide_section_head{

    margin:0 auto 60px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
}

.guide_section_head.center{justify-content:center;}

.guide_section_head h2{
    margin:0;
    color:#fff;
    font-size:54px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:-.04em;
}

.guide_phone_slider{
   
}

.guide_phone_slider .slick-list{
    overflow:visible;
}

.guide_phone_slider .slick-slide{
    padding:0 14px;
}

.guide_phone_item{
    height:600px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.guide_phone_item img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}


/* =========================================================
   4 STEP GRID
========================================================= */

.guide_process{
    padding:150px 0;
}

.guide_process_grid{
 
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--guide-line-strong);
    border-left:1px solid var(--guide-line-strong);
}

.guide_process_card{
    min-width:0;
    min-height:410px;
    padding:40px;
    border-right:1px solid var(--guide-line-strong);
    border-bottom:1px solid var(--guide-line-strong);
}

.guide_process_card figure{

    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.guide_process_card p{display: flex; gap:10px;  line-height:1.4; font-size:30px;}

.guide_process_card img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    margin-bottom: 20px;
}

.guide_process_card small{
    display:block;

    color:rgba(255,255,255,.36);
font-size:30px;
font-weight: 700
    
}

.guide_process_card strong{
    display:block;

    color:#fff;
 
}


/* =========================================================
   CONSUMER COMMUNITY
========================================================= */

.consumer_community{
    padding:110px 0 150px;
}

.consumer_community_grid{
    display:grid;
    grid-template-columns:38% 62%;
    min-height:430px;
}

.consumer_community_intro{
    padding:34px 62px 34px 0;
  
}

.consumer_community_intro h2{
    margin:20px 0 25px;
    color:#fff;
    font-size:54px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:-.05em;
}

.consumer_community_cards{
    padding-left:52px;
}

.consumer_community_card{
    min-height:230px;
    padding:50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid var(--guide-line);

}

.consumer_community_card + .consumer_community_card{margin-top: 40px;}

.consumer_community_card:last-child{
    border-bottom:1px solid var(--guide-line);
}

.consumer_community_card strong{
    color:#fff;
    font-size:40px;
}

.consumer_community_card p{
    margin:20px 0 0;
    color:rgba(255,255,255,.40);
    font-size:24px;
}


/* =========================================================
   TRUCKER / ORGANIZER ICON GRID
========================================================= */

.guide_problem_icons{
    padding:135px 0 145px;
}

.guide_icon_grid{
    width:min(100%,1420px);
    margin:70px auto 0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--guide-line-strong);
    border-left:1px solid var(--guide-line-strong);
}

.guide_icon_card{
    min-height:235px;
    padding:34px 34px 28px;
    border-right:1px solid var(--guide-line-strong);
    border-bottom:1px solid var(--guide-line-strong);
}

.guide_icon_card figure{
    height:92px;
    margin:0 0 32px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.guide_icon_card img{
    max-width:88px;
    max-height:88px;
    object-fit:contain;
}

.guide_icon_card strong{
    display:block;
    color:#fff;
    font-size:16px;
    line-height:1.45;
}

.guide_icon_card p{
    margin:7px 0 0;
    color:rgba(255,255,255,.40);
    font-size:11px;
    line-height:1.55;
}


/* =========================================================
   ORGANIZER AFTER RECRUITING
========================================================= */

.organizer_after{
    padding:95px 0 130px;
}


/* =========================================================
   ORGANIZER LOCATIONS
   시안처럼 한 줄씩 큰 이미지 + 우측 텍스트
========================================================= */

.organizer_locations{
    padding:75px 0 130px;
}

.organizer_location_list{
    width:100%;
    border-top:1px solid var(--guide-line-strong);
}

.organizer_location{
    min-height:430px;
    display:grid;
    grid-template-columns:62% 38%;
    border-bottom:1px solid var(--guide-line-strong);
}

.organizer_location_image{
    min-height:430px;
    border-right:1px solid var(--guide-line-strong);
}

.organizer_location_copy{
    padding:65px 58px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.organizer_location_copy small{
    color:rgba(255,255,255,.34);
    font-family:"Outfit",sans-serif;
    font-size:11px;
}

.organizer_location_copy h3{
    margin:18px 0 0;
    color:#fff;
    font-size:29px;
    line-height:1.4;
}


/* =========================================================
   EVENT REUSE
========================================================= */

.guide_event_section.renew_benefit{
    min-height:0;
    padding-top:95px;
    padding-bottom:120px;
}


/* =========================================================
   RESPONSIVE 1400
========================================================= */
@media(max-width:1400px){

    .guide_inner,
    .guide_section_head{
        width:calc(100% - 7rem);
    }

    .consumer_ww_row{
        grid-template-columns:300px minmax(0,1fr);
    }

    .consumer_ww_row:nth-child(even){
        grid-template-columns:minmax(0,1fr) 300px;
    }

    .consumer_ww_copy{
        padding:0 30px;
    }

    .consumer_ww_word{
        font-size:48px;
    }

    .guide_step{
        grid-template-columns:minmax(0,1fr) 285px;
        gap:55px;
    }

    .guide_step_copy{
        padding-left:55px;
    }
}


/* =========================================================
   RESPONSIVE 1024
========================================================= */
@media(max-width:1024px){

    .guide_page .service_intro_visual_section{
        padding-top:105px;
    }

    .guide_page .service_intro_visual_heading h1{
        font-size:44px;
    }

    .guide_page .service_intro_visual_frame{
        height:clamp(420px,52vw,600px);
        margin-top:48px;
    }

    .guide_inner,
    .guide_section_head{
        width:calc(100% - 4rem);
    }

    .consumer_problem,
    .guide_problem_icons{
        padding:105px 0 115px;
    }

    .consumer_ww{
        margin-top:58px;
    }

    .consumer_ww_row,
    .consumer_ww_row:nth-child(even){
        min-height:138px;
        grid-template-columns:220px minmax(0,1fr);
    }

    .consumer_ww_row:nth-child(even) .consumer_ww_copy{
        order:1;
    }

    .consumer_ww_row:nth-child(even) .consumer_ww_image{
        order:2;
    }

    .consumer_ww_word{
        font-size:37px;
    }

    .consumer_ww_desc{
        font-size:14px;
    }

    .consumer_ww_image{
        height:92px;
        margin:22px 24px;
    }

    .guide_question.renew_question{
        min-height:620px;
        padding:80px 0;
    }

    .guide_step{
        min-height:340px;
        grid-template-columns:minmax(0,1fr) 240px;
        gap:36px;
    }

    .guide_step_copy{
        padding-left:32px;
    }

    .guide_step_copy h3{
        font-size:26px;
    }

    .guide_step_screen{
        height:305px;
    }

    .guide_step_screen img{
        max-width:210px;
        max-height:290px;
    }

    .guide_process_grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .guide_icon_card{
        min-height:210px;
    }

    .consumer_community_grid{
        grid-template-columns:42% 58%;
    }

    .consumer_community_intro{
        padding-right:35px;
    }

    .consumer_community_cards{
        padding-left:35px;
    }

    .organizer_location{
        grid-template-columns:58% 42%;
    }
}


/* =========================================================
   RESPONSIVE 819
========================================================= */
@media(max-width:819px){

    .guide_page .service_intro_visual_section{
        padding-top:85px;
    }

    .guide_page .service_intro_visual_heading{
        width:calc(100% - 40px);
    }

    .guide_page .service_intro_visual_heading h1{
        font-size:34px;
    }

    .guide_page .service_intro_visual_heading p{
        margin-top:17px;
        font-size:12px;
    }

    .guide_top_buttons{
        margin-top:18px;
    }

    .guide_top_buttons .hero_pink_btn,
    .guide_top_buttons .hero_line_btn{
        min-width:105px;
        height:42px;
        padding:0 14px;
        font-size:11px;
    }

    .guide_page .service_intro_visual_frame{
        height:58vw;
        min-height:320px;
        max-height:520px;
        margin-top:38px;
    }

    .guide_inner,
    .guide_section_head{
        width:calc(100% - 40px);
    }

    .consumer_problem,
    .guide_problem_icons{
        padding:82px 0 90px;
    }

    .guide_center_title h2{
        font-size:30px;
    }

    .guide_center_title p{
        font-size:12px;
    }

    .consumer_ww{
        margin-top:45px;
    }

    .consumer_ww_row,
    .consumer_ww_row:nth-child(even){
        min-height:110px;
        grid-template-columns:135px minmax(0,1fr);
    }

    .consumer_ww_copy{
        padding:0 10px;
        display:block;
    }

    .consumer_ww_word{
        display:block;
        margin-bottom:6px;
        font-size:29px;
    }

    .consumer_ww_desc{
        font-size:11px;
    }

    .consumer_ww_image{
        height:76px;
        margin:17px 8px;
    }

    .guide_question.renew_question{
        min-height:500px;
        padding:60px 0;
    }

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

    .guide_question .question_fill{
        font-size:10.2vw;
    }

    .guide_steps_section{
        padding:35px 0 80px;
    }

    .guide_step{
        min-height:285px;
        grid-template-columns:minmax(0,1fr) 145px;
        gap:18px;
    }

    .guide_step_copy{
        padding-left:12px;
    }

    .guide_step_copy h3{
        font-size:21px;
    }

    .guide_step_copy p{
        margin-top:11px;
        font-size:10px;
    }

    .guide_step_screen{
        height:264px;
    }

    .guide_step_screen img{
        max-width:135px;
        max-height:250px;
    }

    .consumer_showcase,
    .guide_process{
        padding:50px 0 80px;
    }

    .guide_section_head{
        margin-bottom:32px;
    }

    .guide_section_head h2{
        font-size:25px;
    }

    .guide_phone_slider{
        margin-left:8px;
    }

    .guide_phone_slider .slick-slide{
        padding:0 8px;
    }

    .guide_phone_item{
        height:340px;
    }

    .guide_process_card{
        min-height:315px;
        padding:17px 13px;
    }

    .guide_process_card figure{
        height:230px;
    }

    .consumer_community{
        padding:70px 0 90px;
    }

    .consumer_community_grid{
        display:block;
        min-height:0;
    }

    .consumer_community_intro{
        padding:0 0 35px;
        border-right:0;
        border-bottom:1px solid var(--guide-line-strong);
    }

    .consumer_community_intro h2{
        font-size:30px;
    }

    .consumer_community_cards{
        padding:30px 0 0;
    }

    .guide_icon_grid{
        margin-top:45px;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .guide_icon_card{
        min-height:175px;
        padding:22px 18px;
    }

    .guide_icon_card figure{
        height:65px;
        margin-bottom:20px;
    }

    .guide_icon_card img{
        max-width:62px;
        max-height:62px;
    }

    .organizer_locations{
        padding:55px 0 85px;
    }

    .organizer_location{
        display:block;
        min-height:0;
    }

    .organizer_location_image{
        height:60vw;
        min-height:280px;
        border-right:0;
        border-bottom:1px solid var(--guide-line-strong);
    }

    .organizer_location_copy{
        min-height:155px;
        padding:30px 24px;
    }
}


/* =========================================================
   RESPONSIVE 580
========================================================= */
@media(max-width:580px){

    .guide_page .service_intro_visual_section{
        padding-top:72px;
    }

    .guide_page .service_intro_visual_heading{
        width:calc(100% - 32px);
    }

    .guide_page .service_intro_visual_heading h1{
        font-size:29px;
    }

    .guide_page .service_intro_visual_heading p{
        font-size:11px;
    }

    .guide_page .service_intro_visual_frame{
        height:64vw;
        min-height:270px;
        margin-top:30px;
    }

    .guide_inner,
    .guide_section_head{
        width:calc(100% - 32px);
    }

    .guide_center_title h2{
        font-size:26px;
    }

    .consumer_ww_row,
    .consumer_ww_row:nth-child(even){
        grid-template-columns:108px minmax(0,1fr);
        min-height:98px;
    }

    .consumer_ww_word{
        font-size:23px;
    }

    .consumer_ww_desc{
        font-size:10px;
    }

    .consumer_ww_image{
        height:66px;
    }

    .guide_question.renew_question{
        min-height:440px;
    }

    .guide_question .inner{
        width:calc(100% - 32px);
    }

    .guide_question .question_fill{
        font-size:10.8vw;
    }

    .guide_step{
        min-height:245px;
        grid-template-columns:minmax(0,1fr) 112px;
        gap:8px;
    }

    .guide_step_copy{
        padding-left:4px;
    }

    .guide_step_copy h3{
        font-size:18px;
    }

    .guide_step_screen{
        height:228px;
    }

    .guide_step_screen img{
        max-width:105px;
        max-height:216px;
    }

    .guide_section_head h2{
        font-size:22px;
    }

    .guide_phone_item{
        height:300px;
    }

    .guide_process_card{
        min-height:270px;
        padding:14px 10px;
    }

    .guide_process_card figure{
        height:190px;
    }

    .guide_process_card strong{
        font-size:12px;
    }

    .guide_icon_card{
        min-height:150px;
        padding:17px 13px;
    }

    .guide_icon_card figure{
        height:50px;
        margin-bottom:15px;
    }

    .guide_icon_card img{
        max-width:50px;
        max-height:50px;
    }

    .guide_icon_card strong{
        font-size:12px;
    }

    .guide_icon_card p{
        font-size:9px;
    }
}


/* =========================================================
   RESPONSIVE 360
========================================================= */
@media(max-width:360px){

    .guide_inner,
    .guide_section_head{
        width:calc(100% - 24px);
    }

    .guide_page .service_intro_visual_heading{
        width:calc(100% - 24px);
    }

    .guide_page .service_intro_visual_heading h1{
        font-size:26px;
    }

    .guide_question .inner{
        width:calc(100% - 24px);
    }

    .guide_question .question_fill{
        font-size:37px;
    }
}



/* =========================================================
   2026-09-14 ORGANIZER FINAL + GUIDE RESPONSIVE
   - consumer / trucker PC 스타일은 기존값 유지
   - organizer problem / after는 service_problem_section 재사용
   - responsive는 1024 이하에서만 보정
========================================================= */


/* =========================================================
   ORGANIZER PC
========================================================= */

.guide_organizer .organizer_problem_section,
.guide_organizer .organizer_after_section{
    padding:150px 0 170px;
}

.guide_organizer .service_problem_head .round_tag{
    margin-bottom:22px;
}

.guide_organizer .service_problem_head h2{
    margin-top:0;
}

.guide_organizer .organizer_problem_rows{
    margin-top:90px;
}

.guide_organizer .organizer_problem_rows .service_problem_grid{
    margin-top:0;
}

.guide_organizer .organizer_problem_rows .service_problem_grid + .service_problem_grid{
    margin-top:28px;
}

.guide_organizer .service_problem_card{
    min-width:0;
}

.guide_organizer .service_problem_icon img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.guide_organizer .organizer_flow_question{
    margin:0;
}

.guide_organizer .organizer_after_section{
    padding-top:125px;
}

.guide_organizer .organizer_after_section .service_problem_card{
    min-height:300px;
}


/* =========================================================
   GUIDE RESPONSIVE FINAL
   PC(1025px 이상)는 사용자가 맞춘 consumer / trucker 값 유지
========================================================= */

@media(max-width:1024px){

    /* top */
    .guide_page .service_intro_visual_section{
        padding-top:105px;
    }

    .guide_page .service_intro_visual_heading{
        width:calc(100% - 4rem);
    }

    .guide_page .service_intro_visual_heading h1{
        font-size:44px;
    }

    .guide_page .service_intro_visual_heading p{
        font-size:16px;
        line-height:1.6;
    }

    .guide_page .service_intro_visual_frame{
        height:clamp(400px,52vw,600px);
        margin-top:46px;
    }


    /* consumer WHERE / WHAT / WHEN */
    .consumer_ww_row,
    .consumer_ww_row:nth-child(even){
        min-height:138px;
        padding:22px 0;
        display:grid;
        grid-template-columns:220px minmax(0,1fr);
        gap:0;
    }

    .consumer_ww_row:nth-child(even) .consumer_ww_copy{
        order:1;
    }

    .consumer_ww_row:nth-child(even) .consumer_ww_image{
        order:2;
    }

    .consumer_ww_copy{
        padding:0 22px;
        gap:12px;
    }

    .consumer_ww_word{
        flex:none;
        font-size:38px;
    }

    .consumer_ww_desc{
        width:auto;
        flex:none;
        font-size:15px;
    }

    .consumer_ww_image{
        height:96px;
        margin:0 22px 0 0;
    }


    /* fill slogan */
    .guide_question.renew_question{
        min-height:620px;
        padding:80px 0;
    }

    .guide_question .inner{
        width:calc(100% - 4rem);
    }

    .guide_question .question_fill{
        font-size:clamp(52px,7vw,72px);
    }


    /* consumer / trucker / organizer app step */
    .guide_step{
        min-height:340px;
        padding:0 36px;
        grid-template-columns:minmax(0,1fr) 240px;
        gap:36px;
    }

    .guide_step + .guide_step{
        margin-top:32px;
    }

    .guide_step_copy h3{
        font-size:28px;
    }

    .guide_step_copy p{
        font-size:14px;
    }

    .guide_step_screen{
        padding-top:42px;
    }

    .guide_step_screen img{
        max-width:215px;
        max-height:310px;
    }


    /* consumer phone showcase */
    .guide_phone_item{
        height:430px;
    }


    /* process */
    .guide_process_grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .guide_process_card{
        min-height:340px;
        padding:24px;
    }

    .guide_process_card p{
        font-size:20px;
    }

    .guide_process_card small{
        font-size:20px;
    }


    /* organizer problem / after */
    .guide_organizer .organizer_problem_section,
    .guide_organizer .organizer_after_section{
        padding:115px 0 130px;
    }

    .guide_organizer .organizer_problem_rows{
        margin-top:65px;
    }

    .guide_organizer .service_problem_card{
        min-height:300px;
        padding:38px 28px 30px;
    }

    .guide_organizer .service_problem_icon{
        width:78px;
        height:78px;
        margin-bottom:38px;
    }

    .guide_organizer .service_problem_card h3{
        font-size:20px;
    }

    .guide_organizer .service_problem_card p{
        font-size:14px;
    }
}


@media(max-width:819px){

    .guide_inner{
        width:calc(100% - 40px);
    }

    /* top */
    .guide_page .service_intro_visual_section{
        padding-top:84px;
    }

    .guide_page .service_intro_visual_heading{
        width:calc(100% - 40px);
    }

    .guide_page .service_intro_visual_heading h1{
        font-size:34px;
        line-height:1.28;
    }

    .guide_page .service_intro_visual_heading p{
        margin-top:16px;
        font-size:13px;
    }

    .guide_top_buttons{
        margin-top:18px;
    }

    .guide_top_buttons .hero_pink_btn,
    .guide_top_buttons .hero_line_btn{
        min-width:106px;
        height:42px;
        padding:0 14px;
        font-size:11px;
    }

    .guide_page .service_intro_visual_frame{
        height:58vw;
        min-height:310px;
        max-height:500px;
        margin-top:36px;
    }


    /* consumer problem */
    .consumer_problem{
        padding:85px 0 90px;
    }

    .guide_center_title h2,
    .guide_organizer .service_problem_head h2{
        font-size:30px;
    }

    .guide_center_title p{
        font-size:13px;
    }

    .consumer_ww{
        margin-top:46px;
    }

    .consumer_ww_row,
    .consumer_ww_row:nth-child(even){
        min-height:108px;
        padding:16px 0;
        grid-template-columns:138px minmax(0,1fr);
    }

    .consumer_ww_copy{
        padding:0 10px;
        display:block;
    }

    .consumer_ww_word{
        display:block;
        margin-bottom:6px;
        font-size:30px;
    }

    .consumer_ww_desc{
        display:block;
        font-size:11px;
    }

    .consumer_ww_image{
        height:76px;
        margin-right:8px;
    }


    /* question fill */
    .guide_question.renew_question{
        min-height:500px;
        padding:60px 0;
    }

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

    .guide_question .question_fill{
        font-size:10.2vw;
        line-height:1.18;
    }


    /* steps */
    .guide_steps_section{
        padding:40px 0 85px;
    }

    .guide_step{
        min-height:285px;
        padding:0 20px;
        grid-template-columns:minmax(0,1fr) 145px;
        gap:18px;
    }

    .guide_step + .guide_step{
        margin-top:20px;
    }

    .guide_step_copy h3{
        font-size:22px;
    }

    .guide_step_copy p{
        margin-top:11px;
        font-size:11px;
    }

    .guide_step_screen{
        padding-top:30px;
    }

    .guide_step_screen img{
        max-width:135px;
        max-height:250px;
    }


    /* consumer showcase/process */
    .consumer_showcase,
    .guide_process{
        padding:60px 0 85px;
    }

    .guide_section_head{
        margin-bottom:34px;
    }

    .guide_section_head h2{
        font-size:26px;
    }

    .guide_phone_item{
        height:350px;
    }

    .guide_process_card{
        min-height:300px;
        padding:18px 14px;
    }

    .guide_process_card p{
        gap:7px;
        font-size:16px;
    }

    .guide_process_card small{
        font-size:16px;
    }


    /* organizer problem / after:
       service_problem_section의 박스 구조를 2열로 유지 */
    .guide_organizer .organizer_problem_section,
    .guide_organizer .organizer_after_section{
        padding:90px 0 105px;
    }

    .guide_organizer .organizer_problem_rows{
        margin-top:48px;
    }

    .guide_organizer .organizer_problem_rows .service_problem_grid{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .guide_organizer .organizer_problem_rows .service_problem_grid + .service_problem_grid{
        margin-top:12px;
    }

    .guide_organizer .service_problem_card{
        min-height:220px;
        padding:26px 20px 22px;
        border:1px solid rgba(255,255,255,.22);
    }

    .guide_organizer .service_problem_icon{
        width:60px;
        height:60px;
        margin:0 auto 28px;
    }

    .guide_organizer .service_problem_card h3{
        font-size:17px;
    }

    .guide_organizer .service_problem_card p{
        font-size:12px;
    }


    /* locations */
    .organizer_locations{
        padding:60px 0 90px;
    }

    .organizer_location{
        display:block;
        min-height:0;
    }

    .organizer_location_image{
        height:58vw;
        min-height:270px;
        border-right:0;
        border-bottom:1px solid var(--guide-line-strong);
    }

    .organizer_location_copy{
        min-height:150px;
        padding:28px 22px;
    }
    
    .guide_organizer .organizer_after_section .service_problem_card{min-height: auto}
}


@media(max-width:580px){

    .guide_inner{
        width:calc(100% - 32px);
    }

    /* top */
    .guide_page .service_intro_visual_section{
        padding-top:72px;
    }

    .guide_page .service_intro_visual_heading{
        width:calc(100% - 32px);
    }

    .guide_page .service_intro_visual_heading h1{
        font-size:29px;
    }

    .guide_page .service_intro_visual_heading p{
        font-size:11px;
    }

    .guide_page .service_intro_visual_frame{
        height:64vw;
        min-height:260px;
        margin-top:28px;
    }


    /* consumer where */
    .consumer_ww_row,
    .consumer_ww_row:nth-child(even){
        grid-template-columns:108px minmax(0,1fr);
        min-height:96px;
        padding:13px 0;
    }

    .consumer_ww_word{
        font-size:24px;
    }

    .consumer_ww_desc{
        font-size:10px;
    }

    .consumer_ww_image{
        height:66px;
    }


    /* question fill */
    .guide_question.renew_question{
        min-height:440px;
        padding:48px 0;
    }

    .guide_question .inner{
        width:calc(100% - 32px);
    }

    .guide_question .question_fill{
        font-size:10.8vw;
    }


    /* steps */
    .guide_step{
        min-height:245px;
        padding:0 12px;
        grid-template-columns:minmax(0,1fr) 112px;
        gap:8px;
    }

    .guide_step_copy h3{
        font-size:18px;
    }

    .guide_step_copy p{
        font-size:10px;
    }

    .guide_step_screen{
        padding-top:22px;
    }

    .guide_step_screen img{
        max-width:105px;
        max-height:215px;
    }


    /* consumer showcase/process */
    .guide_section_head h2{
        font-size:23px;
    }

    .guide_phone_item{
        height:300px;
    }

    .guide_process_card{
        min-height:255px;
        padding:13px 10px;
    }

    .guide_process_card p,
    .guide_process_card small{
        font-size:13px;
    }


    /* organizer */
    .guide_organizer .service_problem_head h2{
        font-size:27px;
    }

    .guide_organizer .organizer_problem_rows{
        margin-top:40px;
    }

    .guide_organizer .service_problem_card{
        min-height:190px;
        padding:22px 15px 18px;
    }

    .guide_organizer .service_problem_icon{
        width:52px;
        height:52px;
        margin-bottom:22px;
    }

    .guide_organizer .service_problem_card h3{
        font-size:15px;
    }

    .guide_organizer .service_problem_card p{
        font-size:10px;
    }

    .organizer_location_copy h3{
        font-size:24px;
    }
}


@media(max-width:360px){

    .guide_inner{
        width:calc(100% - 24px);
    }

    .guide_page .service_intro_visual_heading{
        width:calc(100% - 24px);
    }

    .guide_page .service_intro_visual_heading h1{
        font-size:26px;
    }

    .guide_question .inner{
        width:calc(100% - 24px);
    }

    .guide_question .question_fill{
        font-size:37px;
    }

    .guide_step{
        grid-template-columns:minmax(0,1fr) 96px;
        padding:0 8px;
    }

    .guide_step_screen img{
        max-width:92px;
    }

    .guide_organizer .organizer_problem_rows .service_problem_grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   RESPONSIVE STABILIZATION FINAL
   2026-09-14
   - 1025px 이상 PC 원본 디자인 값은 유지
   - 중복 미디어쿼리의 최종 우선순위를 이 블록으로 통일
   - 1024 / 819 / 620 / 580 / 360 구간의 넘침과 여백 보정
========================================================= */

@media(max-width:1400px) and (min-width:1025px){
    .consumer_ww_row{
        display:grid;
    }

    .consumer_ww_copy{
        min-width:0;
    }

    .consumer_ww_desc{
        min-width:0;
    }
}


@media(max-width:1024px){
    html,
    body{
        overflow-x:hidden;
    }

    .inner,
    .renew_sub_inner,
    .renew_inquiry_form,
    .renew_view_inner,
    .renew_write_inner,
    .service_intro_inner,
    .guide_inner,
    .guide_section_head{
        max-width:100%;
    }

    .renew_sub_page,
    .renew_board_page,
    .renew_inquiry_page,
    .renew_view_page,
    .renew_write_page{
        padding-top:clamp(138px,14vw,150px);
        padding-bottom:120px;
    }

    .renew_sub_title{
        margin-bottom:90px;
    }

    .renew_sub_title h1,
    .renew_write_title h1{
        font-size:clamp(38px,5vw,48px);
    }

    .renew_board_search .search_input{
        min-width:0;
    }

    .renew_board_search .search_input input{
        min-width:0;
    }

    .renew_notice_row > *,
    .renew_view_neighbors a > *{
        min-width:0;
    }

    .renew_inquiry_form .flex_input{
        grid-template-columns:minmax(105px,130px) 12px minmax(0,1fr) 12px minmax(0,1fr);
    }

    .service_intro_visual_heading{
        width:calc(100% - 4rem);
    }

    .service_problem_grid{
        align-items:stretch;
    }

    .service_problem_card,
    .core_service_copy,
    .core_service_visual{
        min-width:0;
    }

    .core_service_copy p{
        font-size:16px;
        line-height:1.65;
    }

    .guide_page .service_intro_visual_heading p,
    .guide_center_title p{
        font-size:16px;
    }

    .consumer_ww_copy{
        min-width:0;
    }

    .consumer_ww_desc{
        min-width:0;
        line-height:1.45;
    }

    .guide_step_copy{
        min-width:0;
        padding-left:0;
    }

    .guide_step_screen{
        min-width:0;
        height:auto;
        align-self:stretch;
    }

    .guide_process_card figure{
        min-height:180px;
    }

    .consumer_community_intro h2{
        font-size:clamp(34px,4.8vw,46px);
    }

    .consumer_community_card{
        min-height:200px;
        padding:36px;
    }

    .consumer_community_card strong{
        font-size:30px;
    }

    .consumer_community_card p{
        font-size:18px;
    }

    .organizer_location_copy{
        padding:44px 36px;
    }
}


@media(max-width:819px){
    body{
        min-width:320px;
    }

    .renew_sub_page,
    .renew_board_page,
    .renew_inquiry_page,
    .renew_view_page,
    .renew_write_page{
        padding-top:110px;
        padding-bottom:90px;
    }

    .renew_sub_title{
        margin-bottom:64px;
    }

    .renew_sub_title h1,
    .renew_write_title h1{
        font-size:clamp(32px,6vw,38px);
    }

    .renew_sub_tabs{
        width:100%;
    }

    .renew_sub_tabs a,
    .renew_sub_tabs button,
    .renew_sub_tabs label{
        flex:0 1 auto;
    }

    .renew_event_thumb{
        aspect-ratio:1.55 / 1;
    }

    .renew_notice_row .subject a{
        max-width:100%;
    }

    .renew_view_header h1{
        overflow-wrap:anywhere;
        font-size:clamp(28px,5.5vw,34px);
    }

    .renew_view_content{
        min-height:260px;
        overflow-wrap:anywhere;
    }

    .renew_view_content iframe,
    .renew_view_content video,
    .renew_view_content table{
        max-width:100%!important;
    }

    .renew_view_content iframe,
    .renew_view_content video{
        width:100%!important;
    }

    .renew_view_file{
        padding:12px 14px;
        flex-wrap:wrap;
        gap:6px 14px;
    }

    .renew_inquiry_form .flex_input{
        grid-template-columns:88px 8px minmax(0,1fr) 8px minmax(0,1fr);
    }

    .renew_write_field .cke,
    .renew_write_field .se2_input_area,
    .renew_write_field iframe{
        width:100%!important;
    }

    .service_intro_visual_heading,
    .guide_page .service_intro_visual_heading{
        max-width:100%;
    }

    .service_intro_visual_heading h1,
    .guide_page .service_intro_visual_heading h1,
    .service_problem_head h2,
    .service_connection_title h2,
    .guide_center_title h2,
    .guide_section_head h2{
        overflow-wrap:anywhere;
    }

    .core_service_visual{
        min-height:0;
        padding:20px;
    }

    .core_service_copy p{
        font-size:14px;
    }

    .core_service_tags span{
        font-size:12px;
    }

    .guide_page .service_intro_visual_frame{
        width:100vw;
    }

    .consumer_ww_row,
    .consumer_ww_row:nth-child(even){
        display:grid;
    }

    .consumer_ww_copy{
        min-width:0;
    }

    .consumer_ww_image{
        width:auto;
        min-width:0;
    }

    .guide_question .question_line{
        width:auto;
    }

    .guide_step{
        overflow:hidden;
    }

    .guide_step_copy{
        padding-left:0;
    }

    .guide_process_card figure{
        height:auto;
        min-height:190px;
    }

    .guide_process_card img{
        max-height:210px;
    }

    .consumer_community_intro h2{
        font-size:30px;
    }

    .consumer_community_card{
        min-height:170px;
        padding:28px 24px;
    }

    .consumer_community_card + .consumer_community_card{
        margin-top:20px;
    }

    .consumer_community_card strong{
        font-size:24px;
    }

    .consumer_community_card p{
        margin-top:12px;
        font-size:15px;
        line-height:1.6;
    }

    .organizer_location_copy h3{
        font-size:26px;
    }
}


@media(max-width:620px){
    :root{
        --side:16px;
    }

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

    .renew_down_app{
        min-width:90px!important;
        padding:0 12px!important;
    }

    .hero_btns{
        right:16px;
        left:16px;
    }

    .hero_pink_btn,
    .hero_line_btn{
        flex:1 1 0;
        min-width:0;
        justify-content:center;
    }

    .hero_scroll{
        display:none;
    }

    .about_stage,
    .renew_sub_inner,
    .renew_inquiry_form,
    .renew_view_inner,
    .renew_write_inner,
    .service_intro_inner,
    .guide_inner,
    .guide_section_head{
        width:calc(100% - 32px);
    }

    .service_head,
    .benefit_head{
        width:calc(100% - 32px);
    }

    .cta_buttons{
        width:100%;
    }

    .cta_buttons .hero_pink_btn,
    .cta_buttons .hero_line_btn{
        padding:0 12px;
    }

    .renew_sub_tabs a,
    .renew_sub_tabs button,
    .renew_sub_tabs label{
        padding:0 14px;
    }

    .renew_board_search{
        flex-wrap:wrap;
    }

    .renew_board_search select,
    .renew_board_search .search_input{
        width:100%;
        flex-basis:100%;
    }

    .renew_inquiry_form .flex_input{
        grid-template-columns:1fr 8px 1fr 8px 1fr;
    }

    .renew_inquiry_form .flex_input select{
        grid-column:1 / -1;
    }

    .renew_file_box{
        align-items:flex-start;
        flex-direction:column;
    }

    .service_intro_visual_heading,
    .guide_page .service_intro_visual_heading{
        width:calc(100% - 32px);
    }

    .service_connection_diagram{
        width:520px;
        height:520px;
    }

    .guide_top_buttons{
        padding:0 16px;
    }

    .guide_top_buttons .hero_pink_btn,
    .guide_top_buttons .hero_line_btn{
        min-width:0;
    }

    .consumer_ww_row,
    .consumer_ww_row:nth-child(even){
        grid-template-columns:minmax(96px,30%) minmax(0,1fr);
    }

    .guide_process_grid{
        grid-template-columns:1fr;
    }

    .guide_process_card{
        min-height:0;
        padding:24px 18px;
    }

    .guide_process_card figure{
        min-height:0;
        height:220px;
    }

    .guide_process_card img{
        max-height:200px;
    }

    .guide_icon_grid{
        grid-template-columns:1fr;
    }

    .guide_icon_card{
        min-height:0;
        padding:24px 18px;
    }

    .guide_icon_card figure{
        height:56px;
        margin-bottom:18px;
        justify-content:flex-start;
    }

    .guide_icon_card strong{
        font-size:14px;
    }

    .guide_icon_card p{
        font-size:11px;
    }

    .organizer_location_image{
        height:62vw;
        min-height:240px;
    }
}


@media(max-width:580px){
    .renew_hero{
        min-height:600px;
    }

    .renew_hero_center{
        top:44%;
    }

    .renew_hero_center h1{
        font-size:clamp(42px,12.3vw,64px);
    }

    .hero_sub_copy{
        flex-wrap:wrap;
    }

    .renew_about{
        padding:96px 0 110px;
    }

    .about_stage{
        margin-top:60px;
    }

    .renew_question{
        min-height:560px;
        padding:70px 0;
    }

    .need_pin{
        min-height:620px;
    }

    .renew_service,
    .renew_benefit{
        padding-bottom:100px;
    }

    .renew_sub_page,
    .renew_board_page,
    .renew_inquiry_page,
    .renew_view_page,
    .renew_write_page{
        padding-top:100px;
        padding-bottom:80px;
    }

    .renew_sub_title,
    .renew_write_title{
        margin-bottom:52px;
    }

    .renew_sub_title h1,
    .renew_write_title h1{
        font-size:30px;
    }

    .renew_sub_tabs{
        margin-top:24px;
    }

    .renew_sub_tabs a,
    .renew_sub_tabs button,
    .renew_sub_tabs label{
        height:40px;
        font-size:12px;
    }

    .renew_event_grid{
        row-gap:42px;
    }

    .renew_view_header{
        padding:30px 0;
    }

    .renew_view_header h1{
        font-size:28px;
    }

    .renew_view_neighbors a{
        min-height:62px;
        padding:0 10px;
        grid-template-columns:56px minmax(0,1fr);
    }

    .renew_view_bottom,
    .renew_write_buttons{
        width:100%;
    }

    .renew_view_bottom a,
    .renew_write_buttons a,
    .renew_write_buttons button{
        min-width:0;
        flex:1 1 0;
    }

    .renew_inquiry_form .form_in > ul{
        row-gap:24px;
    }

    .renew_inquiry_form textarea{
        height:250px;
    }

    .renew_inquiry_form .ck_agree{
        gap:9px;
    }

    .renew_write_field textarea{
        min-height:240px;
    }

    .service_intro_visual_heading h1{
        font-size:29px;
    }

    .service_intro_visual_heading p{
        font-size:12px;
    }

    .service_problem_section{
        padding:90px 0 105px;
    }

    .service_connection_section{
        padding:85px 0 110px;
    }

    .core_service_visual{
        height:64vw;
        padding:16px;
    }

    .core_service_copy{
        padding-right:18px;
        padding-left:18px;
    }

    .guide_page .service_intro_visual_heading p,
    .guide_center_title p{
        font-size:12px;
    }

    .guide_step{
        grid-template-columns:minmax(0,1fr) minmax(96px,32%);
    }

    .guide_process_card p,
    .guide_process_card small{
        font-size:15px;
    }

    .consumer_community_card{
        min-height:150px;
        padding:24px 20px;
    }

    .consumer_community_card strong{
        font-size:21px;
    }

    .consumer_community_card p{
        font-size:13px;
    }
}


@media(max-width:360px){
    .inner,
    .about_title,
    .about_stage,
    .service_head,
    .benefit_head,
    .renew_cta .inner,
    .renew_sub_inner,
    .renew_inquiry_form,
    .renew_view_inner,
    .renew_write_inner,
    .service_intro_inner,
    .guide_inner,
    .guide_section_head{
        width:calc(100% - 24px);
    }

    .hero_btns{
        left:12px;
        right:12px;
    }

    .hero_main_copy{
        font-size:15px;
    }

    .hero_sub_copy span{
        padding:5px 9px;
        font-size:9px;
    }

    .about_card_txt{
        padding:18px;
    }

    .need_copy_area{
        left:12px;
        right:12px;
    }

    .renew_sub_title h1,
    .renew_write_title h1{
        font-size:27px;
    }

    .renew_sub_tabs a,
    .renew_sub_tabs button,
    .renew_sub_tabs label{
        padding:0 11px;
        font-size:11px;
    }

    .renew_notice_row{
        grid-template-columns:30px minmax(0,1fr);
    }

    .renew_inquiry_form .flex_input{
        grid-template-columns:1fr 6px 1fr 6px 1fr;
        gap:3px;
    }

    .renew_inquiry_form input[type="text"],
    .renew_inquiry_form input[type="email"],
    .renew_inquiry_form select{
        padding-right:12px;
        padding-left:12px;
    }

    .service_connection_diagram{
        transform:translateX(-50%) scale(.55);
    }

    .guide_page .service_intro_visual_heading{
        width:calc(100% - 24px);
    }

    .guide_step{
        padding:0 8px;
        grid-template-columns:minmax(0,1fr) 92px;
    }

    .guide_step_copy h3{
        font-size:17px;
    }

    .guide_step_screen img{
        max-width:88px;
    }

    .organizer_location_copy{
        padding:24px 18px;
    }

    .organizer_location_copy h3{
        font-size:22px;
    }
}


@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
    }
}