/* BASIC css start */
footer { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; margin-top: 120px; padding: 40px 100px; border-top: 1px solid var(--cw-color-20); }
.site-footer-info { display: contents; }
.footer-nav { grid-column: 1 / 2; grid-row: 1; display: flex; align-items: center; gap: 32px; }
.footer-nav a { font-size: .875rem; color: var(--cw-color-80); text-decoration: none; }
.footer-company { grid-column: 1 / 2; grid-row: 3; display: flex; flex-direction: column; gap: 5px; padding-top: 20px; font-size: .813rem; color: var(--cw-color-80); }
.footer-company .name { display: none; }
.footer-company a { color: var(--cw-color-80); }
.footer-company .biz-info p { display: flex; flex-wrap: wrap; }
.footer-company .biz-info span { display: inline-block; padding-right: 8px; }
.footer-company .biz-info .copyright { padding-top: 4px; color: var(--cw-color-60); }
.footer-support { grid-column: 2 / 3; grid-row: 1 / 4; display: flex; gap: 100px; margin-left: 100px; font-size: 0; }
.footer-support .cs-number { padding-bottom: 4px; }
.footer-support strong { display: block; padding-bottom: 10px; font-size: .813rem; font-weight: 600; }
.footer-support p { padding-bottom: 4px; font-size: .813rem; color: var(--cw-color-80); }
.footer-cs .cs-number { font-size: .875rem; color: var(--cw-heading-color); font-weight: 700;}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 991.98px) {
    footer { padding: 40px 24px; margin: 80px 0 60px; }
    .footer-container { padding: 61px 16px; flex-direction: column; align-items: start; margin-bottom: 60px; }
    .footer-nav { grid-column: 1; grid-row: 1; gap: 28px; }
    .footer-company { grid-column: 1; grid-row: 3; padding-top: 24px; gap: 0; }
    .footer-company .biz-info { display: none; transition: all 0.3s ease; font-size: .75rem; }
    .footer-company.name.on+.biz-info { display: block; }
    .footer-company .name { display: flex; width: auto; max-width:360px; padding: 0 20px 10px 0; color: var(--cw-heading-color); font-weight: 600; cursor: pointer; }
    .footer-company .name .ico-arrow { width: 12px; height: 13px; padding-right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cpath d='M2.5 5.47559L6 8.97559L9.5 5.47559' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 3px; }
    .footer-company .name.on .ico-arrow { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'><path d='M2.5 7.52441L6 4.02441L9.5 7.52441' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 3px; }
    .footer-sns { margin-top: 20px; }
    .footer-support { grid-column: 1; grid-row: 2; flex-direction: column; gap: 28px; padding-top: 28px; margin-left: 0; }
    .footer-support .cs-number { display: block; font-weight: 600; }
    .footer-support strong { padding-bottom: 6px; }
    .footer-support p { display: inline-block; font-size: .75rem; }
    .footer-support p:not(:first-child):not(:last-child)::after { content: '/'; margin: 0 4px 0 2px; }
}

/* 모바일 */
@media (max-width: 767.98px) {
    footer { padding: 30px 16px; margin: 60px 0; }
    .footer-container { padding: 61px 16px; flex-direction: column; align-items: start; margin-bottom: 60px; }
    .footer-nav { grid-column: 1; grid-row: 1; gap: 5px 20px; flex-wrap: wrap; }
    .footer-nav a { font-size: .813rem; }
    .footer-company { grid-column: 1; grid-row: 3; padding-top: 24px; gap: 0; }
    .footer-company .biz-info { display: none; transition: all 0.3s ease; font-size: .75rem; }
    .footer-company.name.on+.biz-info { display: block; }
    .footer-company .name { display: flex; width: auto; max-width:360px; padding: 0 20px 10px 0; color: var(--cw-heading-color); font-weight: 600; cursor: pointer; }
    .footer-company .name .ico-arrow { width: 12px; height: 13px; padding-right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cpath d='M2.5 5.47559L6 8.97559L9.5 5.47559' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 3px; }
    .footer-company .name.on .ico-arrow { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'><path d='M2.5 7.52441L6 4.02441L9.5 7.52441' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 3px; }
    .footer-sns { margin-top: 20px; }
    .footer-support { grid-column: 1; grid-row: 2; flex-direction: column; gap: 28px; padding-top: 28px; margin-left: 0; }
    .footer-support .cs-number { display: block; font-size: .813rem; }
    .footer-support strong { padding-bottom: 6px; }
    .footer-support p { display: inline-block; font-size: .75rem; }
    .footer-support p:not(:first-child):not(:last-child)::after { content: '/'; margin: 0 4px 0 2px; }
}
/* BASIC css end */