/* =========================================================
   SEO EVENT PAGE
   seo_event.css
   ========================================================= */

*{
    box-sizing:border-box;
}

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

body{
    margin:0;
    padding:0;
    background:#f5f7fa;
    color:#20252b;
    font-family:
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif;
    font-size:16px;
    line-height:1.7;
    word-break:keep-all;
}

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

img{
    max-width:100%;
    height:auto;
    display:block;
}

.container{
    width:1180px;
    max-width:calc(100% - 40px);
    margin:0 auto;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar{
    background:#111827;
    color:#fff;
    font-size:14px;
}

.topbar_inner{
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0;
}

.topbar_right{
    opacity:.85;
}


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

.header{
    background:#fff;
    border-bottom:1px solid #e7e9ed;
}

.header .container{
    min-height:76px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    font-size:24px;
    font-weight:900;
    color:#111827;
    letter-spacing:-1px;
}

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

.header_call span{
    color:#68717d;
    font-size:14px;
    font-weight:600;
}

.header_phone{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;
    padding:0 20px;

    border-radius:8px;

    background:#ef4444;
    color:#fff;

    font-size:15px;
    font-weight:800;

    transition:.2s;
}

.header_phone:hover{
    background:#dc2626;
}


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

.hero{
    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1f2937 55%,
            #374151 100%
        );

    color:#fff;
}

.hero_inner{
    min-height:560px;

    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,500px);

    gap:70px;

    align-items:center;

    padding-top:70px;
    padding-bottom:70px;
}

.hero_content{
    min-width:0;
}

.hero_badge{
    display:inline-flex;
    align-items:center;

    padding:7px 14px;
    margin-bottom:22px;

    border:1px solid rgba(255,255,255,.25);
    border-radius:30px;

    background:rgba(255,255,255,.08);

    color:#fca5a5;

    font-size:13px;
    font-weight:800;
    letter-spacing:.3px;
}

.hero_content h1{
    margin:0;

    color:#fff;

    font-size:52px;
    line-height:1.22;
    font-weight:900;
    letter-spacing:-2.8px;
}

.hero_subtitle{
    margin-top:22px;

    color:#f3f4f6;

    font-size:21px;
    line-height:1.5;
    font-weight:700;
    letter-spacing:-.8px;
}

.hero_desc{
    margin-top:20px;

    max-width:650px;

    color:#d1d5db;

    font-size:16px;
    line-height:1.85;
}

.hero_buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:32px;
}

.btn{
    min-height:52px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 24px;

    border-radius:8px;

    font-size:15px;
    font-weight:800;

    transition:.2s;
}

.btn_call{
    background:#ef4444;
    color:#fff;
}

.btn_call:hover{
    background:#dc2626;
    transform:translateY(-2px);
}

.btn_more{
    background:#fff;
    color:#111827;
}

.btn_more:hover{
    background:#f3f4f6;
    transform:translateY(-2px);
}


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

.hero_image{
    width:100%;
    min-height:390px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #374151,
            #111827
        );

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        0 25px 60px rgba(0,0,0,.25);
}

.hero_image img{
    width:100%;
    height:390px;

    object-fit:cover;
}


/* =========================================================
   KEYWORDS
========================================================= */

.keyword_section{
    background:#fff;
    border-bottom:1px solid #e5e7eb;
}

.keyword_inner{
    min-height:76px;

    display:flex;
    align-items:center;

    flex-wrap:wrap;
    gap:8px;

    padding-top:15px;
    padding-bottom:15px;
}

.keyword{
    display:inline-flex;
    align-items:center;

    min-height:34px;

    padding:0 13px;

    border:1px solid #dce1e7;
    border-radius:30px;

    background:#f8fafc;

    color:#4b5563;

    font-size:13px;
    font-weight:700;
}

.keyword:first-child{
    border-color:#fecaca;
    background:#fff1f2;
    color:#dc2626;
}


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

.content{
    padding:80px 0;
}

.section{
    margin-bottom:80px;
}

.section:last-child{
    margin-bottom:0;
}

.section_label{
    margin-bottom:12px;

    color:#ef4444;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.5px;
}

.section h2,
.content > h2{
    margin:0;

    color:#111827;

    font-size:34px;
    line-height:1.35;

    font-weight:900;
    letter-spacing:-1.5px;
}

.intro_text{
    margin-top:20px;

    color:#5b6470;

    font-size:17px;
    line-height:1.9;
}


/* =========================================================
   NOTICE
========================================================= */

.notice{
    margin-top:28px;
    padding:22px 25px;

    border-left:4px solid #ef4444;

    background:#fff;

    border-radius:8px;

    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.notice strong{
    display:block;

    margin-bottom:7px;

    color:#111827;

    font-size:17px;
}

.notice div{
    color:#606975;
    font-size:15px;
    line-height:1.8;
}


/* =========================================================
   QUICK CHECK
========================================================= */

.quick{
    margin-top:45px;
    padding:45px;

    border-radius:16px;

    background:#fff;

    box-shadow:
        0 10px 35px rgba(17,24,39,.07);
}

.quick_desc{
    margin-top:12px;

    color:#68717d;

    font-size:15px;
}

.problem_list{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:16px;

    margin-top:30px;
}

.problem{
    padding:25px;

    border:1px solid #e5e7eb;
    border-radius:12px;

    background:#fafbfc;

    transition:.2s;
}

.problem:hover{
    background:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.07);
}

.problem_num{
    margin-bottom:10px;

    color:#ef4444;

    font-size:11px;
    font-weight:900;

    letter-spacing:1px;
}

.problem h3{
    margin:0;

    color:#1f2937;

    font-size:18px;
    line-height:1.45;
    font-weight:800;
}

.problem p{
    margin:12px 0 0;

    color:#68717d;

    font-size:14px;
    line-height:1.8;
}


/* =========================================================
   LOCAL SEO
========================================================= */

.seo_area_head{
    margin-bottom:35px;
}

.seo_area_head h2{
    margin:0;

    color:#111827;

    font-size:34px;
    line-height:1.4;
    font-weight:900;
    letter-spacing:-1.5px;
}

.seo_area_head p{
    margin:16px 0 0;

    color:#697381;

    font-size:16px;
    line-height:1.85;
}

.seo_content{
    margin-top:18px;
    padding:30px;

    border:1px solid #e5e7eb;
    border-radius:12px;

    background:#fff;
}

.seo_content h2{
    margin:0 0 13px;

    color:#1f2937;

    font-size:22px;
    line-height:1.45;
    font-weight:900;
}

.seo_content p{
    margin:0;

    color:#66707d;

    font-size:15px;
    line-height:1.9;
}

.seo_content p + p{
    margin-top:15px;
}


/* =========================================================
   INFORMATION
========================================================= */

.information_box{
    padding:40px;

    border-radius:14px;

    background:#fff;

    border:1px solid #e5e7eb;
}

.information_box .intro_text{
    margin-bottom:0;
}


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

.service_guide{
    padding:45px;

    border-radius:16px;

    background:#111827;
    color:#fff;
}

.service_guide .section_label{
    color:#fca5a5;
}

.service_guide h2{
    color:#fff;
}

.service_guide .intro_text{
    color:#d1d5db;
}


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

.cta{
    margin-top:80px;

    padding:55px 40px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #b91c1c
        );

    color:#fff;

    text-align:center;

    box-shadow:
        0 20px 45px rgba(185,28,28,.25);
}

.cta h2{
    margin:0;

    color:#fff;

    font-size:34px;
    line-height:1.4;
    font-weight:900;
    letter-spacing:-1.5px;
}

.cta p{
    margin:15px 0 0;

    color:rgba(255,255,255,.9);

    font-size:16px;
    line-height:1.8;
}

.cta_btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:55px;

    margin-top:25px;
    padding:0 30px;

    border-radius:8px;

    background:#fff;
    color:#b91c1c;

    font-size:16px;
    font-weight:900;

    transition:.2s;
}

.cta_btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);
}


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

.footer{
    margin-top:80px;

    padding:45px 0;

    background:#111827;

    color:#9ca3af;

    font-size:13px;
    line-height:1.8;
}

.footer strong{
    display:block;

    margin-bottom:10px;

    color:#fff;

    font-size:18px;
}

.footer div{
    margin-top:5px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

    .container{
        max-width:calc(100% - 30px);
    }

    .hero_inner{
        grid-template-columns:1fr;

        gap:35px;

        padding-top:50px;
        padding-bottom:50px;
    }

    .hero_content h1{
        font-size:40px;
        letter-spacing:-2px;
    }

    .hero_image{
        min-height:300px;
    }

    .hero_image img{
        height:300px;
    }

    .problem_list{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:640px){

    body{
        font-size:15px;
    }

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

    .topbar_inner{
        min-height:38px;

        font-size:12px;
    }

    .header .container{
        min-height:65px;
    }

    .logo{
        font-size:20px;
    }

    .header_call{
        gap:7px;
    }

    .header_call span{
        display:none;
    }

    .header_phone{
        min-height:38px;

        padding:0 12px;

        font-size:12px;
    }

    .hero_inner{
        padding-top:42px;
        padding-bottom:42px;
    }

    .hero_badge{
        margin-bottom:17px;

        font-size:11px;
    }

    .hero_content h1{
        font-size:32px;
        line-height:1.3;
        letter-spacing:-1.8px;
    }

    .hero_subtitle{
        font-size:17px;
    }

    .hero_desc{
        font-size:14px;
    }

    .hero_buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .hero_image{
        min-height:240px;

        border-radius:12px;
    }

    .hero_image img{
        height:240px;
    }

    .keyword_inner{
        gap:6px;
    }

    .keyword{
        font-size:11px;
        min-height:30px;
        padding:0 10px;
    }

    .content{
        padding:55px 0;
    }

    .section{
        margin-bottom:55px;
    }

    .section h2,
    .content > h2,
    .seo_area_head h2{
        font-size:27px;
    }

    .intro_text{
        font-size:15px;
    }

    .quick{
        padding:25px 18px;
        border-radius:12px;
    }

    .problem{
        padding:20px;
    }

    .seo_content{
        padding:22px 18px;
    }

    .seo_content h2{
        font-size:19px;
    }

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

    .information_box{
        padding:25px 20px;
    }

    .service_guide{
        padding:30px 22px;
    }

    .cta{
        margin-top:55px;

        padding:40px 20px;

        border-radius:14px;
    }

    .cta h2{
        font-size:27px;
    }

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

    .cta_btn{
        width:100%;
        padding:0 15px;
    }

    .footer{
        margin-top:55px;
        padding:35px 0;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

    .hero_content h1{
        font-size:28px;
    }

    .hero_subtitle{
        font-size:16px;
    }

    .section h2,
    .content > h2,
    .seo_area_head h2{
        font-size:24px;
    }

}