/* ===================================================
&#128313; RESET & 전체 배경
=================================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html, body{
    background:#2a0a1b;
    margin:0;
    padding:0;
}


body{
    font-family:'Nanum Gothic',sans-serif;


    min-height:100vh;
}
li{
    list-style:none;
}
a{
    text-decoration:none;
    color:inherit;
}
img{
    width:100%;
    height:auto;
    display:block;
}
#wrap{
    max-width:1280px;
    margin:0 auto;
}
/* ===================================================
&#128308; 헤더
=================================================== */
#header{
    position:relative;
    z-index:1000;
    width:100%;
    background:#2a0a1b;
    color:#fff;
}
.top_logo{
    text-align:center;
    font-size:36px;
    font-weight:800;
    padding:25px 0;
}
.top_logo a{
    color:#fff;
    text-decoration:none;
}
/* ===============================
&#128313; GNB
=============================== */
.gnb_wrap{
    border-top:1px solid #444;
    border-bottom:1px solid #444;
    position:relative;
}
.gnb{
    display:flex;
    justify-content:space-between;
    max-width:1280px;
    margin:0 auto;
    padding:0;
}
.gnb > li{
    position:relative;
    flex:1;
    list-style:none;
}
.gnb > li:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:20px;
    background:rgba(255,255,255,0.2);
}
.gnb > li > a{
    display:block;
    padding:15px 0;
    text-align:center;
    color:#fff;
    font-weight:600;
    text-decoration:none;
}
.gnb > li > a:hover{
    color:#ffcc00;
}
/* &#128293; 드롭다운 */
.gnb_wrap::after{
    content:"";
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    height:0;
    background:#2a0a1b;
    transition:0.3s;
    z-index:1;
}
.gnb_wrap:hover::after{
    height:200px;
}
.sub{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    z-index:2;
    display:none;
    padding:10px 0;
}
.gnb_wrap:hover .sub{
    display:block;
}
.sub li{
    list-style:none;
}
.sub li:nth-child(odd){background:rgba(255,255,255,0.03);}
.sub li:nth-child(even){background:rgba(255,255,255,0.07);}
.sub li a{
    display:block;
    padding:10px 0;
    text-align:center;
    color:#ddd;
    font-size:14px;
    text-decoration:none;
}
.sub li:hover{background:rgba(255,204,0,0.15);}
.sub li a:hover{color:#ffcc00;}
/* ===================================================
&#128308; 메인 비주얼 (최종 정리)
=================================================== */
.main_visual{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    overflow:hidden;
}
.visual_img img{
    width:100%;
    display:block;
}
.visual_bg{display:none;}
/* &#128293; 텍스트 영역 */
.visual_inner{
    position:absolute;
    top:0;
    left:0;
    width:90%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:150px;
    padding-left:80px;
    z-index:2;
}
.visual_title{
    font-size:42px;
    font-weight:800;
    line-height:1.3;
    margin-bottom:20px;
    color:#fff;
}
.visual_sub{
    font-size:18px;
    color:#333;
    margin-bottom:50px;
}
/* &#128293; 포인트 박스 (오른쪽 하단) */
.visual_point{
    position:absolute;
    right:10px;
    bottom:50px;
    display:flex;
    gap:15px;
    z-index:2;
}
.point_box{
    width:120px;
    height:120px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,0.5);
    border:1px solid rgba(255,255,255,0.5);
    font-size:19px;
    text-align:center;
    color: #333;
}
.point_box strong{
    display:block;
    font-size:25px;
    color:#b91f1e;
    margin-bottom:5px;
}
/* &#128293; 스티커 */
.badge_sticker{
    position:absolute;
    top:30px;
    left:50px;
    width:120px;
    height:120px;
    background:linear-gradient(145deg, #ffe27a, #ffb800);
    color:#ff0000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    font-weight:800;
    font-size:25px;
    border:2px solid rgba(255,255,255,0.7);
    box-shadow:0 8px 20px rgba(0,0,0,0.25), inset 0 2px 5px rgba(255,255,255,0.4);
    z-index:999;
    transform:rotate(-12deg);
    animation:premiumPulse 2.2s infinite ease-in-out;
}
.badge_sticker::before{
    content:"";
    position:absolute;
    top:5%;
    left:5%;
    width:80%;
    height:40%;
    background:rgba(255,255,255,0.2);
    border-radius:80%;
    filter:blur(6px);
}
.badge_sticker::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    border:2px dashed rgba(255,255,255,0.3);
}
@keyframes premiumPulse{
    0%{transform:rotate(-12deg) scale(1);}
    50%{transform:rotate(-12deg) scale(1.06);}
    100%{transform:rotate(-12deg) scale(1);}
}
.badge_sticker .line1,
.badge_sticker .line2{
    font-size:30px;
    font-weight:900;
    color:#ff0000;
    text-shadow:0 2px 0 #fff, 0 4px 8px rgba(0,0,0,0.4);
}
/* ===================================================
&#128308; 공지
=================================================== */
.notice_wrap{
    max-width:1280px;
    margin:40px auto;
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    padding:25px 20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.notice_inner{text-align:center;}
.notice_title{
    font-size:26px;
    font-weight:800;
    color:#fff;
}
.notice_title::after{
    content:"";
    display:block;
    width:70px;
    height:3px;
    background:#ffcc00;
    margin:10px auto;
}
.notice_text{
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,0.85);
    margin-top:10px;
}
.notice_text .highlight{
    color:#ffcc00;
    font-weight:700;
}
/* ===================================================
&#128308; 중앙 컨텐츠 (스타일8)
=================================================== */
.center_wrap{
    max-width:1280px;
    margin:50px auto;
}
.center_inner{
    display:flex;
    flex-direction:column;
    gap:30px;
}
/* ===============================
&#128313; 3열 구조
=============================== */
.center_row{
    display:flex;
    gap:20px;
    align-items:stretch;
}
/* 카드 */
.center_card{
    flex:1;
    display:flex;
    flex-direction:column;
}
/* &#128293; 상단 제외한 영역 통일 */
.center_card > *:not(.card_top){
    flex:1;
}
/* &#128293; 공지/보도 내용 영역 */
.card_body{
    background:#fff;
    color:#333;
    padding:10px;
    flex:1;
    overflow:hidden;
}
/* ===============================
&#128313; 상단 타이틀 바
=============================== */
.card_top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 15px;
    background:#2a0a1b;
    border-bottom:1px solid rgba(255,255,255,0.2);
}
/* &#128293; 타이틀 (왼쪽) */
.card_top .card_title{
    color:#ffcc00;
    font-weight:700;
    font-size:16px;
    text-decoration:none;
}
.card_top .card_title:hover{
    color:#fff;
}
/* &#128293; more (오른쪽) */
.card_top a:not(.card_title){
    color:#fff;
    font-size:12px;
    text-decoration:none;
}
.card_top a:not(.card_title):hover{
    color:#fff;
}
/* ===============================
&#128313; 이미지 영역
=============================== */
.card_img img{
    width:100%;
    height:auto;
    display:block;
}
/* ===============================
&#128313; 고객센터 (특수 카드)
=============================== */
.center_call{
    border:1px solid #ffcc00;
}
.call_box{
    text-align:center;
    padding:30px 10px;
}
.call_box p{
    font-size:14px;
    margin-bottom:10px;
}
.call_box strong{
    display:block;
    font-size:35px;
    color:#ff0033;
    margin-bottom:10px;
}
.call_box span{
    font-size:15px;
    color:rgba(255,255,255,0.7);
}
/* ===================================================
&#128308; 유닛 롤링
=================================================== */
.unit_wrap{
    max-width:1280px;
    margin:50px auto;
}
/* ===============================
&#128313; 상단
=============================== */
.unit_top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 15px;
    border:1px solid rgba(255,255,255,0.2);
    background:#2a0a1b;
}
/* &#128293; 타이틀 (유닛보기) */
.unit_top .unit_title{
    color:#ffcc00;
    font-weight:700;
    font-size:18px;
    text-decoration:none;
}
.unit_top .unit_title:hover{
    color:#fff;
}
/* &#128293; more (오른쪽) */
.unit_top a:not(.unit_title){
    color:#fff;
    text-decoration:none;
    font-size:14px;
}
.unit_top a:not(.unit_title):hover{
    color:#fff;
}
/* ===============================
&#128313; 슬라이드
=============================== */
.unit_slide{
    overflow:hidden;
    margin-top:15px;
}
/* ===============================
&#128313; 트랙
=============================== */
.unit_track{
    display:flex;
    gap:15px;
    animation:unitRoll 25s linear infinite;
}
/* ===============================
&#128313; 아이템
=============================== */
.unit_item{
    flex:0 0 calc(20% - 12px);
}
.unit_item img{
    width:100%;
    display:block;
}
/* ===============================
&#128313; 애니메이션
=============================== */
@keyframes unitRoll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
}
/* ===================================================
&#128308; 풋터 (스타일8)
=================================================== */
#footer{
    background:#2a0a1b;
    padding:40px 20px;
    border-top:1px solid rgba(255,255,255,0.2);
}
.mo_footer_cta{
    display:none;
}
.footer_inner{
    max-width:1280px;
    margin:0 auto;
    text-align:center;
}
/* 업체명 */
.footer_title{
    font-size:28px;
    font-weight:800;
    color:#fff;
    margin-bottom:15px;
}
/* 전화 + 주소 */
.footer_info{
    font-size:16px;
    margin-bottom:10px;
}
.footer_info strong{
    color:#ffcc00;
    font-size:20px;
    margin-right:10px;
}
.footer_info span{
    color:rgba(255,255,255,0.8);
}
/* 카피 */
.footer_copy{
    font-size:12px;
    color:rgba(255,255,255,0.6);
    margin-top:10px;
}
/* ===================================================
&#128241; 모바일 헤더 + 사이드 메뉴
=================================================== */
/* 기본 숨김 (PC에서는 안보이게) */
#mo_header,
.mo_side,
.mo_overlay{
    display:none;
}
/* ===================================================
&#128241; 모바일 헤더
=================================================== */
#mo_header{
    justify-content:space-between;
    align-items:center;
    padding:12px 10px;
    background:#2a0a1b;
    color:#fff;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}
.mo_logo{
    font-size:16px;
    font-weight:700;
}
.mo_logo a{
    display:block;
    color:#fff;
    text-decoration:none;
}
.mo_menu_btn{
    font-size:22px;
    background:none;
    border:none;
    color:#fff;
}
.mo_call{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
}
.mo_call .call_icon{
    width:22px;
    height:22px;
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M6.6 10.8c1.5 3 3.6 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.7.6 4.1.6.7 0 1.3.6 1.3 1.3v3.5c0 .7-.6 1.3-1.3 1.3C10.1 22 2 13.9 2 3.3 2 2.6 2.6 2 3.3 2h3.5c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.6 4.1.1.4 0 .9-.3 1.2l-2.8 2.2z"/></svg>') no-repeat center/contain;
}
/* ===================================================
&#128241; 오버레이
=================================================== */
.mo_overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0);
    z-index:999;
}
/* ===================================================
&#128241; 사이드 메뉴
=================================================== */
.mo_side{
    position:fixed;
    top:0;
    left:-280px;
    width:280px;
    height:100%;
    background:#1c1f2a;
    transition:0.3s;
    z-index:1001;
}
/* 상단 */
.side_top{
    padding:15px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    color:#fff;
}
.side_back{
    cursor:pointer;
}
/* 메뉴 */
.side_menu{
    list-style:none;
    padding:0;
    margin:0;
}
.menu_main{
    padding:15px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.1);
    cursor:pointer;
}
.menu_main:hover{
    background:#2a2f3d;
}
/* 서브 */
.menu_sub{
    display:none;
    background:#2a2f3d;
}
.menu_sub li a{
    display:block;
    padding:12px 20px;
    color:#ddd;
    text-decoration:none;
    font-size:14px;
}
.menu_sub li a:hover{
    background:#3a4155;
    color:#ffcc00;
}
/* ===================================================
&#128241; 모바일 전환 (최종 안정화)
=================================================== */
@media (max-width:768px){
    /* 모바일 헤더 */
    #mo_header{
        display:flex;
        box-sizing:border-box;
    }
    .mo_side{
        display:block;
    }
    /* &#128293; 핵심 */
    .mo_overlay{
        display:none;
    }
    .mo_overlay.active{
        display:block;
    }
    #header{
        display:none;
    }
    body{
        padding-top:60px;
    }
    /* ===============================
    &#128313; 메인 비주얼
    =============================== */
    .main_visual{
        max-width:100%;
    }
    /* &#128293; 핵심: 높이 확보 */
    .visual_inner{
        width:100%;
        height:100%;
        padding-top:60px;
        padding-left:15px;
        padding-right:15px;
    }

.visual_title{
    display: none;
    font-size:20px;
    margin-bottom:8px;
}
.visual_sub{
    display: none;
    font-size:13px;
    margin-bottom:12px;
}
    /* ===============================
    &#128313; 포인트 박스 (모바일 수정)
    =============================== */
    .visual_point{
        position:absolute;
        right:10px;
        bottom:20px;
        display:flex;
        gap:6px;
    }
    .point_box{
        width:60px;
        height:60px;
        font-size:10px;
    }
    .point_box strong{
        font-size:12px;
    }
    /* ===============================
    &#128313; 스티커
    =============================== */
    .badge_sticker{
        width:50px;
        height:50px;
        top:10px;
        left:10px;
        font-size:11px;
        z-index:3;
    }
    .badge_sticker .line1,
    .badge_sticker .line2{
        font-size:12px;
    }
    .notice_wrap{
        margin:20px 15px;
        padding:15px 12px;
        border-radius:10px;
    }
    .notice_title{
        font-size:18px;
    }
    .notice_title::after{
        width:50px;
        height:2px;
        margin:8px auto;
    }
    .notice_text{
        font-size:13px;
        line-height:1.6;
    }
    /* ===================================================
    &#128241; 중앙 컨텐츠 모바일 (최종)
    =================================================== */
    .center_wrap{
        margin:30px 15px;
    }
    /* &#128293; 전체 grid */
    .center_inner{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
    }
    /* &#128293; row 제거 */
    .center_row{
        display:contents;
    }
    /* &#128293; 공지 / 보도 숨김 */
    .center_row:first-child .center_card:nth-child(1),
    .center_row:first-child .center_card:nth-child(3){
        display:none;
    }
    /* &#128293; 상담예약 단독 (핵심) */
    .center_row:first-child .center_card:nth-child(2){
        grid-column:1 / -1;
    }
    /* &#128293; 카드 */
    .center_card{
        width:100%;
        overflow:hidden;
    }
    /* 이미지 안정화 */
    .card_img img{
        width:100%;
        height:auto;
        display:block;
    }
    /* 카드 스타일 */
    .card_top{
        padding:8px 10px;
    }
    .card_top .card_title{
        font-size:14px;
    }
    /* 고객센터 */
    .call_box{
        padding:0px 10px;
    }
    .call_box strong{
        font-size:24px;
    }
    .call_box p {
        font-size:10px;
    }
    .call_box span {
        font-size:10px;
    }
    /* ===================================================
    &#128241; 유닛보기 모바일 (롤링 유지)
    =================================================== */
    .unit_wrap{
        margin:30px 15px;
    }
    /* 상단 */
    .unit_top{
        padding:8px 10px;
    }
    .unit_top .unit_title{
        font-size:16px;
    }
    /* 슬라이드 */
    .unit_slide{
        overflow:hidden;
    }
    /* 트랙 */
    .unit_track{
        gap:10px;
        animation:unitRoll 8s linear infinite;
        animation-timing-function:linear;
    }
    /* 아이템 */
    .unit_item{
        flex:0 0 70%;
    }
    /* 이미지 */
    .unit_item img{
        width:100%;
        height:auto;
        display:block;
    }
    /* ===================================================
    &#128241; 모바일 풋터 최종
    =================================================== */
    #footer{
        padding:30px 15px;
    }
    /* CTA 영역 */
    .mo_footer_cta{
        display:flex;
        justify-content:center;
        gap:50px;
        margin-bottom:20px;
        padding-bottom:15px;
        border-bottom:1px solid rgba(255,255,255,0.2);
    }
    .cta_btn{
        display:flex;
        align-items:center;
        gap:8px;
        color:#fff;
        text-decoration:none;
        font-size:14px;
    }
    /* &#128293; 아이콘 공통 (핵심) */
    .cta_btn .icon{
        display:inline-block;
        width:20px;
        height:20px;
        font-size:0;
        line-height:0;
    }
    /* &#128293; 메일 아이콘 */
    .cta_btn .icon.mail{
        background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M2 4h20v16H2z"/><path fill="%232a0a1b" d="M2 4l10 8 10-8"/></svg>') no-repeat center/contain;
    }
    /* &#128293; 전화 아이콘 */
    .cta_btn .icon.phone{
        background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M6.6 10.8c1.5 3 3.6 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.7.6 4.1.6.7 0 1.3.6 1.3 1.3v3.5c0 .7-.6 1.3-1.3 1.3C10.1 22 2 13.9 2 3.3 2 2.6 2.6 2 3.3 2h3.5c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.6 4.1.1.4 0 .9-.3 1.2l-2.8 2.2z"/></svg>') no-repeat center/contain;
    }
    /* 업체명 */
    .footer_title{
        font-size:20px;
        margin-bottom:10px;
    }
    /* 전화 */
    .footer_info{
        font-size:14px;
    }
    .footer_info strong{
        font-size:18px;
        display:block;
        margin-bottom:5px;
    }
    /* 주소 */
    .footer_info span{
        display:block;
        font-size:13px;
    }
    /* 카피 */
    .footer_copy{
        font-size:11px;
        margin-top:8px;
    }
}