/* BASIC css start */
/* =========================================================
   LIVING25 FOOTER
   Brand Blue  : #3966D9
   Footer Gray : #353A43
   ========================================================= */

:root {
    --footer-bg: #353A43;
    --footer-blue: #3966D9;

    --footer-white: #FFFFFF;
    --footer-heading: #F8F9FC;

    --footer-text: rgba(248, 249, 252, 0.68);
    --footer-text-light: rgba(248, 249, 252, 0.78);
    --footer-muted: rgba(248, 249, 252, 0.46);

    --footer-line: rgba(248, 249, 252, 0.14);
    --footer-line-strong: rgba(248, 249, 252, 0.20);
}


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

#footer {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 120px;
    padding: 46px 0 40px;

    background-color: #353A43 !important;
    color: var(--footer-text);
}

#footer * {
    box-sizing: border-box;
}

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

#footer > .only-pc,
#footer > .only-mo,
#footer .footerTop,
#footer .footerBottom {
    background-color: transparent !important;
}


/* =========================================================
   PC / MOBILE VISIBILITY
   ========================================================= */

#footer .only-pc {
    display: block;
}

#footer .only-mo {
    display: none;
}


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

#wrap.small-screen #footer .footerTop {
    max-width: 1240px;
}

#footer .footerTop {
    position: relative;

    display: flex;
    justify-content: space-between;

    gap: 48px;

    width: 100%;
    max-width: 1760px;

    margin: 0 auto;
    padding: 0 32px;
}

#footer .footerTop::after {
    display: block;
    clear: both;
    content: "";
}


/* =========================================================
   BRAND / LOGO
   ========================================================= */

#footer .footerLogo {
    margin: 0;
    padding: 0;

    color: var(--footer-heading);

    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

#footer .footerLogo img {
    display: block;

    width: auto;
    height: 34px;
}

#footer .footerLogo span {
    color: var(--footer-blue);
}

#footer .footerDesc {
    margin-top: 10px;

    color: rgba(248, 249, 252, 0.62);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 3.2px;
}


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

#footer .footerTop .infoBx h3 {
    margin: 0;
    padding-bottom: 12px;

    color: var(--footer-heading);

    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

#footer .footerTop .infoBx .tx {
    color: var(--footer-text);

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


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

#footer .footerTop .shopInfo {
    flex: 1 1 auto;
    min-width: 0;
}

#footer .footerTop .shopInfo .tx {
    margin-top: 18px;
}

#footer .footerTop .shopInfo .tx span {
    display: inline-block;

    padding-right: 18px;

    color: var(--footer-text);

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

#footer .footerTop .shopInfo .tx a {
    margin-left: 6px;

    color: var(--footer-text-light);

    text-decoration: underline;
    text-underline-offset: 3px;

    vertical-align: text-top;
}

#footer .footerTop .shopInfo .tx a.btn_email {
    color: var(--footer-text-light);
}


/* =========================================================
   BUSINESS INFO DETAILS
   ========================================================= */

#footer .businessInfo {
    margin-top: 20px;
}

#footer .businessInfo .toggleContent {
    color: var(--footer-text);

    font-size: 12px;
    line-height: 1.65;

    word-break: keep-all;
}

#footer .businessInfo .toggleContent span {
    display: inline-block;

    padding-right: 16px;

    color: var(--footer-text);

    font-size: 12px;
}

#footer .businessInfo .toggleContent a {
    margin-left: 6px;

    color: var(--footer-text-light);

    text-decoration: underline;
    text-underline-offset: 3px;
}


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

#footer .footerTop .linkInfo {
    display: flex;

    margin-top: 18px;
}

#footer .footerTop .linkInfo ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0;

    margin: 0;
    padding: 0;
}

#footer .footerTop .linkInfo li {
    display: inline-flex;
    align-items: center;

    float: none;

    margin: 0;
    padding: 0;

    list-style: none;
}

#footer .footerTop .linkInfo li a {
    color: var(--footer-text-light);

    font-size: 13px;
    font-weight: 500;

    transition: color 0.2s ease;
}

#footer .footerTop .linkInfo li a:hover {
    color: #FFFFFF;
}

#footer .footerTop .linkInfo li:not(:last-child)::after {
    display: inline-block;

    width: 1px;
    height: 13px;

    margin: 0 14px;

    background: var(--footer-line-strong);

    content: "";
}

#footer .footerTop .linkInfo li a::after {
    display: none;
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

#footer .footerTop .shopInfo .copy,
#footer .footerTop .copy {
    margin-top: 16px;
    padding-top: 0;

    color: var(--footer-muted);

    font-size: 12px;
    line-height: 1.5;
}


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

#footer .footerTop .csInfo {
    flex: 0 0 270px;

    text-align: right;
}

#footer .footerTop .csInfo .tel {
    margin: 0;

    color: var(--footer-heading);

    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

#footer .footerTop .csInfo .tx {
    margin-top: 4px;

    line-height: 1.55;
}

#footer .footerTop .csInfo .tx em {
    color: var(--footer-muted);

    font-style: normal;
}

#footer .footerTop .csInfo .tx em:nth-last-child(1) {
    display: none;
}

#footer .footerTop .csInfo .csHours {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 0 8px;

    margin-top: 4px;

    color: var(--footer-text);
}

#footer .footerTop .csInfo .csHours span {
    display: inline-block;
}


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

#footer .footerTop .bankInfo {
    margin-top: 18px;
}

#footer .footerTop .bankInfo h3 {
    margin: 0;
    padding-bottom: 6px;

    color: var(--footer-heading);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

#footer .footerTop .bankInfo .tx {
    display: flex;
    flex-direction: column;

    gap: 2px;

    margin-top: 0;

    color: var(--footer-text);

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   RETURN / DELIVERY INFORMATION
   ========================================================= */

#footer .footerTop .returnInfo {
    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid var(--footer-line);
}

#footer .footerTop .returnInfo h3 {
    margin: 0;
    padding-bottom: 7px;

    color: var(--footer-heading);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

#footer .footerTop .returnInfo .toggleContent {
    margin-top: 12px;
}

#footer .footerTop .returnInfo p {
    margin: 0;

    color: var(--footer-text);

    font-size: 12px;
    line-height: 1.6;

    word-break: keep-all;
}

#footer .footerTop .returnInfo .carrier {
    margin-top: 7px;

    color: var(--footer-text-light);

    font-weight: 700;
}

#footer .footerTop .returnInfo ul {
    margin: 10px 0 0;
    padding: 0;

    list-style: none;
}

#footer .footerTop .returnInfo li {
    position: relative;

    margin: 4px 0 0;
    padding-left: 11px;

    color: rgba(248, 249, 252, 0.58);

    font-size: 12px;
    line-height: 1.6;

    word-break: keep-all;
}

#footer .footerTop .returnInfo li::before {
    position: absolute;

    top: 0.72em;
    left: 0;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #3966D9;

    content: "";
}


/* =========================================================
   DETAILS / TOGGLE
   ========================================================= */

#footer .footerToggle {
    color: var(--footer-text);
}

#footer .footerToggle summary {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: 9px;

    margin: 0;
    padding: 0;

    color: var(--footer-text-light);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;

    cursor: pointer;

    list-style: none;
    user-select: none;
}

#footer .footerToggle summary::-webkit-details-marker {
    display: none;
}

#footer .footerToggle summary::marker {
    content: "";
}

#footer .footerToggle summary::after {
    display: inline-block;

    width: 9px;
    height: 9px;

    margin-top: -4px;

    border-right: 2px solid rgba(248, 249, 252, 0.58);
    border-bottom: 2px solid rgba(248, 249, 252, 0.58);

    transform: rotate(45deg);

    transition: transform 0.22s ease;

    content: "";
}

#footer .footerToggle[open] summary::after {
    margin-top: 4px;

    transform: rotate(225deg);
}

#footer .footerToggle .toggleContent {
    margin-top: 12px;
}


/* =========================================================
   PC BUSINESS INFO
   ========================================================= */

@media (min-width: 1025px) {

    #footer > .only-pc .businessInfo {
        display: block;
    }

    #footer > .only-pc .businessInfo summary {
        cursor: default;
        pointer-events: none;
    }

    #footer > .only-pc .businessInfo summary::after {
        display: none !important;
    }

    #footer > .only-pc .businessInfo .toggleContent {
        display: block;
    }
}


/* =========================================================
   SNS
   ========================================================= */

#footer .footerTop .sns {
    display: none !important;

    margin-top: 24px;
}

#footer .footerTop .sns ul {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin: 0;
    padding: 0;
}

#footer .footerTop .sns ul li {
    margin: 0;

    list-style: none;
}

#footer .footerTop .sns ul li a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid var(--footer-line-strong);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);
}

#footer .footerTop .sns ul li img {
    display: block;

    max-width: 18px;
    max-height: 18px;
}


/* =========================================================
   FOOTER BOTTOM / ESCROW
   ========================================================= */

#footer .footerBottom {
    position: relative;

    width: 100%;
    max-width: 1760px;

    margin: 28px auto 0;
    padding: 0 32px;
}

#footer .footerBottom .escrow {
    margin: 0;

    opacity: 0.72;
}


/* =========================================================
   FLOATING SCRIPT BUTTON
   ========================================================= */

.sc_script {
    position: fixed;

    right: 16px;
    bottom: 24px;

    z-index: 100;
}

.sc_script a {
    display: block;

    margin: -14px 0;
}


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

@media (max-width: 1024px) {

    #footer {
        width: 100%;

        margin-top: 88px !important;
        padding: 42px 0 34px !important;

        background-color: #353A43 !important;

        text-align: left !important;
    }

    #footer > .only-pc {
        display: none !important;
    }

    #footer > .only-mo {
        display: block !important;

        background: transparent !important;
    }


    /* Mobile accordion wrapper */

    #footer > .only-mo .footerAccordion {
        display: block !important;

        width: 100% !important;
        max-width: 640px !important;

        margin: 0 auto !important;
        padding: 0 24px !important;

        background: transparent !important;
    }


    /* Accordion item */

    #footer .footerAccordionItem {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border-top: 0 !important;
        border-bottom: 1px solid var(--footer-line-strong) !important;

        background: transparent !important;

        color: var(--footer-heading) !important;

        text-align: left !important;
    }


    /* Accordion title */

    #footer .footerAccordionItem summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: var(--footer-heading) !important;

        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;

        text-align: left !important;

        cursor: pointer !important;

        list-style: none !important;
    }

    #footer .footerAccordionItem summary::-webkit-details-marker {
        display: none !important;
    }

    #footer .footerAccordionItem summary::marker {
        content: "" !important;
    }

    #footer .footerAccordionItem summary::after {
        display: block !important;

        flex: 0 0 auto !important;

        width: 8px !important;
        height: 8px !important;

        margin: -4px 2px 0 18px !important;

        border-right: 1.5px solid rgba(248, 249, 252, 0.60) !important;
        border-bottom: 1.5px solid rgba(248, 249, 252, 0.60) !important;

        content: "" !important;

        transform: rotate(45deg) !important;

        transition:
            transform 0.22s ease,
            margin 0.22s ease !important;
    }

    #footer .footerAccordionItem[open] summary::after {
        margin-top: 4px !important;

        transform: rotate(225deg) !important;
    }


    /* Accordion content */

    #footer .footerAccordionContent {
        margin: 0 !important;
        padding: 0 0 22px !important;

        color: var(--footer-text) !important;

        text-align: left !important;
    }

} /* @media (max-width: 1024px) 닫기 */


/* =========================================================
   LIVING25 FOOTER FINAL
   Brand Blue  : #173D91
   Footer Gray : #353A43
   ========================================================= */

:root {
    --footer-bg: #353A43;
    --footer-blue: #173D91;
    --footer-white: #FFFFFF;
    --footer-heading: #F8F9FC;
    --footer-text: rgba(248,249,252,0.68);
    --footer-text-light: rgba(248,249,252,0.78);
    --footer-muted: rgba(248,249,252,0.46);
    --footer-line: rgba(248,249,252,0.14);
}


/* BACKGROUND */
#footer,
#footer > .only-pc,
#footer > .only-mo {
    background: #353A43 !important;
}

#footer .footerTop,
#footer .footerBottom,
#footer .footerAccordion {
    background: transparent !important;
}


/* BRAND POINT */
#footer .footerLogo span {
    color: #173D91 !important;
}

#footer .footerTop .returnInfo li::before,
#footer .footerAccordionContent .returnInfo li::before {
    background: #173D91 !important;
}


/* HEADING */
#footer .footerLogo,
#footer .footerTop .infoBx h3,
#footer .footerTop .bankInfo h3,
#footer .footerTop .returnInfo h3,
#footer .footerTop .csInfo .tel,
#footer .footerAccordionItem summary,
#footer .footerAccordionContent h3,
#footer .footerAccordionContent .tel {
    color: #F8F9FC !important;
}


/* BODY */
#footer .footerTop .infoBx .tx,
#footer .footerTop .shopInfo .tx span,
#footer .footerTop .bankInfo .tx,
#footer .footerTop .returnInfo p,
#footer .footerTop .returnInfo li,
#footer .footerTop .csInfo .csHours,
#footer .footerAccordionContent,
#footer .footerAccordionContent p,
#footer .footerAccordionContent .tx,
#footer .footerAccordionContent span {
    color: rgba(248,249,252,0.68) !important;
}


/* LINKS */
#footer .footerTop .shopInfo .tx a,
#footer .footerTop .linkInfo li a,
#footer .footerAccordionContent a,
#footer .footerLegalLinks a {
    color: rgba(248,249,252,0.78) !important;
}

#footer a:hover {
    color: #FFFFFF !important;
}


/* DESC / COPYRIGHT */
#footer .footerDesc {
    color: rgba(248,249,252,0.62) !important;
}

#footer .copy,
#footer .footerMobileBrand .copy {
    color: rgba(248,249,252,0.46) !important;
}


/* DIVIDER */
#footer .footerTop .linkInfo li:not(:last-child)::after,
#footer .footerTop .returnInfo,
#footer .footerAccordionItem,
#footer .footerAccordionContent .bankInfo,
#footer .footerAccordionContent .returnInfo {
    border-color: rgba(248,249,252,0.14) !important;
}


/* TOGGLE */
#footer .footerToggle summary::after,
#footer .footerAccordionItem summary::after {
    border-right-color: rgba(248,249,252,0.60) !important;
    border-bottom-color: rgba(248,249,252,0.60) !important;
}


/* MOBILE */
@media (max-width: 1024px) {
    #footer,
    #footer > .only-mo,
    #footer .footerTop,
    #footer .footerAccordion {
        background: #353A43 !important;
    }
}

/* =========================================================
   MOBILE FOOTER FINAL REFINEMENT
   ========================================================= */

@media (max-width: 1024px) {

    /* -----------------------------------------------------
       고객센터 운영시간 왼쪽 정렬
       ----------------------------------------------------- */

    #footer .footerAccordionContent .csHours,
    #footer .csInfo .csHours {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        gap: 4px 12px !important;

        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }

    #footer .footerAccordionContent .csHours span,
    #footer .csInfo .csHours span {
        display: inline-block !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    /* -----------------------------------------------------
       회사정보 하단선 → 브랜드 로고 사이 여백
       ----------------------------------------------------- */

    #footer .footerMobileBrand {
        width: 100% !important;

        margin: 30px 0 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    /* 새 로고 */
    #footer .footerMobileBrand .footerLogo {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    #footer .footerMobileBrand .footerLogo img {
        display: block !important;

        width: auto !important;
        height: 31px !important;
        max-width: 190px !important;

        margin: 0 !important;

        object-fit: contain !important;
    }


    /* 슬로건 */
    #footer .footerMobileBrand .footerDesc {
        margin: 0 0 18px !important;

        text-align: left !important;
    }


    /* Copyright */
    #footer .footerMobileBrand .copy {
        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }
}

/* =========================================================
   MOBILE FOOTER CS ALIGN - FINAL
   ========================================================= */

@media (max-width: 1024px) {

    /* 고객센터 전체 왼쪽 정렬 */
    #footer > .only-mo .footerAccordionItem.csInfo,
    #footer > .only-mo .footerAccordionItem.csInfo .footerAccordionContent {
        text-align: left !important;
    }

    /* 전화번호 */
    #footer > .only-mo .footerAccordionItem.csInfo .tel {
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* 운영시간 */
    #footer > .only-mo .footerAccordionItem.csInfo .csHours {
        display: block !important;

        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }

    #footer > .only-mo .footerAccordionItem.csInfo .csHours span {
        display: inline !important;

        margin: 0 12px 0 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }
}

/* =========================================================
   MOBILE FOOTER FINAL ALIGN
   ========================================================= */

@media (max-width: 1024px) {

    /* 고객센터 블록 전체 왼쪽 정렬 */
    #footer > .only-mo .footerAccordionItem.csInfo,
    #footer > .only-mo .footerAccordionItem.csInfo .toggleContent,
    #footer > .only-mo .footerAccordionItem.csInfo .footerAccordionContent {
        text-align: left !important;
    }

    /* 전화번호 */
    #footer > .only-mo .footerAccordionItem.csInfo .tel {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }

    /* 운영시간 */
    #footer > .only-mo .footerAccordionItem.csInfo .csHours {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;

        gap: 4px 12px !important;

        text-align: left !important;
    }

    #footer > .only-mo .footerAccordionItem.csInfo .csHours span {
        display: inline-block !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }
}
/* BASIC css end */