@charset "UTF-8"; 
@import url("reset.css"); 


.float_wrap { position: fixed; display: flex; justify-content: center; align-items: center; width: 80px; height: fit-content; bottom: 16px; right: 20px; text-align: center; cursor: pointer; z-index: 999; } 
.float_wrap>ul{display: flex; flex-direction: column; align-items: center; gap: 16px;}
.float_wrap>ul>li{display: flex; justify-content: center; align-items: center; width: 80px; height: 80px;}
.float_wrap>ul>li>a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: var(--color-sub-brand); border-radius: 500px;}
.float_wrap>ul>li>a img{width: 32px;}
.float_wrap>ul>li.top{width: 56px; height: 56px;}
.float_wrap>ul>li.top>a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #3f3f3f; color: #fff; border-radius: 500px;}
.float_wrap>ul>li.top>a img{width: 20px;}
.float_wrap.hide {opacity: 0; pointer-events: none; transition: opacity 0.3s;}


/* 공통 */
#container_title{display: none;}

/* fonts */
.popins {font-family: "Poppins", sans-serif;}
.anton {font-family: "Anton", sans-serif;}

/* scrollbar */
html{scrollbar-width:thin; scrollbar-color:#FF4E2F #111;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#111;}
::-webkit-scrollbar-thumb{background:#FF4E2F; border-radius:999px; border:2px solid #111;}
::-webkit-scrollbar-corner{background:#111;}

/* mouse corsor */
body{cursor:none;}
a, button{cursor:none;}
.custom_cursor{position:fixed; left:0; top:0; width:16px; height:16px; border-radius:50%; background-color:#FF4E2F; pointer-events:none; z-index:99999; transform:translate(-50%, -50%); transition:width .25s ease, height .25s ease, background-color .25s ease, opacity .25s ease;}
.custom_cursor.on{width:42px; height:42px; background-color:rgba(227,233,109,0.8);}

/* header */
#header {position:fixed; width:100%; max-width:1834px; height:72px; top:32px; left:50%; z-index:9999; display:flex; align-items:center; justify-content:space-between; background-color:rgba(255,255,255,0.1); transform:translateX(-50%); padding:12px 12px 12px 56px; box-sizing:border-box; border-radius:500px; border:none; backdrop-filter: blur(10px);}
#header::before {content:""; position:absolute; inset:0; padding:2px; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.7) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:-1;}
#header nav{display: flex;}
#header nav ul{display: flex;}
#header nav li{width: 160px;}
#header nav li a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 18px; font-weight: 600; color: #fff; text-transform: uppercase;}
#header nav li a:hover{color: #FF4E2F;}
#header .hd_btn{width: 168px; height: 100%; background-color: #FF4E2F; border-radius: 500px;}
#header .hd_btn a{display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 100%; font-size: 18px; font-weight: 700; color: #fff;}
#header .hd_btn img{width: 24px;}



/* footer */
#footer{position: relative; width: 100%; background-color: #000;}
#footer>.inner{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin: 0 auto;}
#footer .inner .top{width: 100%; padding: 72px 0; box-sizing: border-box; border-top: 1px solid #2c2c2c; border-bottom: 1px solid #2c2c2c; text-align: center;}
#footer .inner .top .logo{}
#footer .inner .top .contact_info{display: flex; flex-direction: column; gap: 8px; margin-top: 12px; text-align: center;}
#footer .inner .top .contact_info span{font-size: 14px; font-weight: 400; color: #777;}
#footer .inner .top .contact_info a{font-size: 14px; font-weight: 400; color: #777;}
#footer .inner .top .contact_info a img{width: 36px; background-color: #FAE100; border-radius: 10px; box-sizing: border-box;}
#footer .inner .top .copy{display: flex; flex-direction: column; gap: 8px; margin-top: 42px;}
#footer .inner .top .copy a{font-size: 13px; color: #777; text-decoration: underline;}
#footer .inner .top .copy span{font-size: 13px; color: #777;}
#footer .inner .marquee_wrap{display: flex; justify-content: center; align-items: center; width: 100%; height: 166px; background-color: #000;}
#footer .inner .marquee_wrap .inner{position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
#footer .inner .marquee_wrap .inner .marquee{width: 100%; animation: marqueeX 20s infinite linear;}
#footer .inner .marquee_wrap .inner .marquee.right{position: absolute; width: 100%; right: calc(-100% - 56px);}



.homezip_floating {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    background: #000;
    padding: 18px 0;
    box-sizing: border-box;
    border-top: 1px solid #212121;
}

.homezip_floating * {
    font-family: 'Pretendard', sans-serif;
    box-sizing: border-box;
}

.homezip_floating_inner {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.homezip_status_title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-right: 14px;
}

.homezip_number {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homezip_number span {
    color: #111;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.homezip_unit {
    font-size: 22px;
    font-weight: 800;
    margin-left: 6px;
}

.homezip_total {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-left: 6px;
}

.homezip_cta {
    position: relative;
}

.homezip_btn {
    width: 180px;
    height: 50px;
    border-radius: 8px;
    background: #FF4E2F;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transition: 0.25s ease;
}

.homezip_btn:hover {
    background: #FF4E2F;
    transform: translateY(-2px);
}

.homezip_btn span {
    font-size: 18px;
}

.homezip_bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 18px);
    transform: translateX(-50%);
    white-space: nowrap;
    background: #fff;
    color: #111;
    padding: 12px 18px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.04em;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}

.homezip_bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #fff;
}

body {
    padding-bottom: 90px;
}


.homezip_bubble strong {
    color: #ff5a1f;
    font-weight: 900;
}

@media (max-width: 1024px) {
    .homezip_floating_inner {
        padding: 0 24px;
    }

    .homezip_status_title {
        font-size: 20px;
    }

    .homezip_number {
        width: 42px;
        height: 42px;
    }

    .homezip_number span {
        font-size: 24px;
    }

    .homezip_unit {
        font-size: 19px;
    }

    .homezip_total {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .homezip_floating {
        padding: 13px 0;
    }

    .homezip_floating_inner {
        padding: 0 18px;
        flex-direction: column;
        gap: 12px;
    }

    .homezip_status {
        justify-content: center;
        flex-wrap: wrap;
    }

    .homezip_status_title {
        width: 100%;
        text-align: center;
        margin-right: 0;
        font-size: 17px;
    }

    .homezip_number {
        width: 38px;
        height: 38px;
    }

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

    .homezip_unit {
        font-size: 17px;
    }

    .homezip_total {
        font-size: 15px;
    }

    .homezip_btn {
        width: 220px;
        height: 48px;
    }

    .homezip_bubble {
        display: none;
    }

    body {
        padding-bottom: 145px;
    }
}


@keyframes marqueeX {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}


 
 

/* ================================
   Responsive patch - common.css
   ================================ */
@media (hover:none), (pointer:coarse){
    body, a, button{cursor:auto;}
    .custom_cursor{display:none;}
}

@media screen and (max-width:1880px){
    #header{width:calc(100% - 48px); max-width:none;}
}

@media screen and (max-width:1280px){
    #header{height:68px; top:24px; padding:10px 10px 10px 32px;}
    #header nav li{width:120px;}
    #header nav li a{font-size:16px;}
    #header .hd_btn{width:150px;}
    #header .hd_btn a{font-size:16px; gap:8px;}
    #header .hd_btn img{width:22px;}
}

@media screen and (max-width:1024px){
    #header{width:calc(100% - 32px); height:62px; top:18px; padding:9px 10px 9px 24px;}
    #header nav li{width:92px;}
    #header nav li a{font-size:14px;}
    #header .hd_btn{width:136px;}
    #header .hd_btn a{font-size:14px;}
    .float_wrap{right:14px; bottom:14px; width:60px;}
    .float_wrap>ul{gap:10px;}
    .float_wrap>ul>li{width:60px; height:60px;}
    .float_wrap>ul>li>a img{width:26px;}
    .float_wrap>ul>li.top{width:46px; height:46px;}
    .float_wrap>ul>li.top>a img{width:16px;}
    .float_wrap>ul>li.top>a span{font-size:11px;}
}

@media screen and (max-width:768px){
    #header{height:56px; top:14px; width:calc(100% - 28px); padding:8px 8px 8px 18px;}
    #header .logo img{max-width:132px;}
    #header nav{display:none;}
    #header .hd_btn{width:auto; min-width:112px; height:40px;}
    #header .hd_btn a{padding:0 14px; font-size:13px; white-space:nowrap;}
    #header .hd_btn img{width:18px;}
    #footer .inner .top{padding:48px 20px;}
    #footer .inner .top .logo img{max-width:150px;}
    #footer .inner .top .contact_info span{font-size:13px; line-height:1.55; word-break:break-all;}
    #footer .inner .top .copy{margin-top:30px;}
    #footer .inner .marquee_wrap{height:96px;}
}

@media screen and (max-width:475px){
    #header{height:52px; top:12px; width:calc(100% - 24px); padding:7px 7px 7px 14px;}
    #header .logo img{max-width:112px;}
    #header .hd_btn{min-width:96px; height:38px;}
    #header .hd_btn a{padding:0 11px; font-size:12px; gap:5px;}
    #header .hd_btn img{width:16px;}
    .float_wrap{right:10px; bottom:10px; width:52px;}
    .float_wrap>ul>li{width:52px; height:52px;}
    .float_wrap>ul>li>a img{width:23px;}
    .float_wrap>ul>li.top{width:42px; height:42px;}
    #footer .inner .top{padding:40px 16px;}
    #footer .inner .top .contact_info{gap:6px;}
    #footer .inner .top .contact_info span{font-size:12px;}
    #footer .inner .top .copy a,
    #footer .inner .top .copy span{font-size:12px;}
    #footer .inner .marquee_wrap{height:56px;}
    #footer .inner .marquee_wrap .inner .marquee.right{right: calc(-100% - 12px);}
}

/* ================================
   Mobile navigation patch v2
   ================================ */
.mobile_menu_btn{display:none; position:relative; z-index:10001; flex-shrink:0; width:42px; height:42px; border:0; border-radius:500px; background:#FF4E2F; padding:0; cursor:pointer;}
.mobile_menu_btn span{position:absolute; left:50%; width:18px; height:2px; border-radius:999px; background:#fff; transform:translateX(-50%); transition:top .3s ease, transform .3s ease;}
.mobile_menu_btn span:nth-child(1){top:16px;}
.mobile_menu_btn span:nth-child(2){top:24px;}
.mobile_menu_btn.on span:nth-child(1){top:21px; transform:translateX(-50%) rotate(45deg);}
.mobile_menu_btn.on span:nth-child(2){top:21px; transform:translateX(-50%) rotate(-45deg);}
.mobile_nav{display:none;}

@media screen and (max-width:768px){
    body.mobile_nav_open{overflow:hidden;}
    #header{z-index:10001;}
    #header .menu,
    #header .hd_btn{display:none;}
    #header .mobile_menu_btn{display:block;}
    .mobile_nav{position:fixed; left:0; top:0; z-index:10000; display:block; width:100%; height:100dvh; padding:96px 20px 24px; box-sizing:border-box; background:rgba(0,0,0,.92); backdrop-filter:blur(12px); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-16px); transition:opacity .35s ease, visibility .35s ease, transform .35s ease;}
    body.mobile_nav_open .mobile_nav{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
    .mobile_nav .mobile_nav_inner{display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%;}
    .mobile_nav nav ul{display:flex; flex-direction:column; gap:0;}
    .mobile_nav nav li{border-bottom:1px solid rgba(255,255,255,.12);}
    .mobile_nav nav li:first-child{border-top:1px solid rgba(255,255,255,.12);}
    .mobile_nav nav li a{display:flex; align-items:center; justify-content:space-between; width:100%; padding:22px 4px; font-family:'Poppins', sans-serif; font-size:34px; font-weight:700; line-height:1; color:#fff; text-transform:uppercase; box-sizing:border-box;}
    .mobile_nav nav li a::after{content:""; width:22px; height:22px; background:url(../img/asset/btn_arrow02.png) no-repeat center / contain; transform:rotate(-45deg); opacity:.9;}
    .mobile_nav .mobile_nav_btn{display:flex; justify-content:center; align-items:center; width:100%; height:56px; margin-top:32px; border-radius:500px; background:#FF4E2F; font-size:16px; font-weight:700; color:#fff;}
}

@media screen and (max-width:475px){
    .mobile_menu_btn{width:38px; height:38px;}
    .mobile_menu_btn span{width:16px;}
    .mobile_menu_btn span:nth-child(1){top:14px;}
    .mobile_menu_btn span:nth-child(2){top:22px;}
    .mobile_menu_btn.on span:nth-child(1),
    .mobile_menu_btn.on span:nth-child(2){top:19px;}
    .mobile_nav{padding:86px 16px 20px;}
    .mobile_nav nav li a{padding:20px 2px; font-size:30px;}
    .mobile_nav nav li a::after{width:19px; height:19px;}
    .mobile_nav .mobile_nav_btn{height:52px; font-size:15px;}
}