/* ==========================
   공통
========================== */

/* 260623 메인 클래스 수정해야함 */
.contents-title {
    margin-bottom: 20px;

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

.contents-desc {
    font-size: var(--fs-lg);
}

/* Level 1, 2 */
.section-head,
.block-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;

    text-align: center;
}

/* Level 1  */
.section-head {
    gap: 20px;
}

.section-title {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
}

.section-subtitle {
    font-size: var(--fs-lg);
    text-align: center;
}

/* Level 2 */
.block-head {
    gap: 16px;
}

.block-subtitle {
    font-size: var(--fs-lg);
}


p.helper-text {
    font-size: var(--fs-md);
}

/* 260622  */
.sub-main {
    padding: 80px 0;
    background: var(--wh-white);
}

.sub-main-title {
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    color: var(--wf-900);
}

.sub-main-desc {
    font-size: var(--fs-lg);
    text-align: center;
}

.sub-main-btn {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.message-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    padding: 12px 0px;
    border-radius: var(--radius-6);
    background: var(--primary-soft-blue100);
}


/* ==========================
   이지케어 소개
========================== */
.about-intro {
    padding: 100px 0 120px;
    background: linear-gradient(0deg,
        rgba(38, 173, 223, 0.12) 0%,
        rgba(38, 173, 223, 0) 100%);
}

.about-intro .about-title-wrap.section-head:nth-child(3){padding-top:150px;}

.about-history {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    margin-bottom: 100px;
}

.history-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    flex: 1;

    min-height: 240px;
    padding: 40px;

    border-radius: var(--radius-16);

    box-shadow: 0 4px 20px 0 rgba(38, 173, 223, 0.20);

    overflow: hidden;

    background-size: cover;
    background-position: center center;
}

.history-card-first {
    background-image: url("/homepage2/assets/images/about-card-bg01.png");
}

.history-card-grow {
    background-image: url("/homepage2/assets/images/about-card-bg02.png");
}

.history-card-leader {
    background-image: url("/homepage2/assets/images/about-card-bg03.png");
}

.history-card-nationwide {
    background-image: url("/homepage2/assets/images/about-card-bg04.png");
}

.history-content span {
    font-size: var(--fs-lg);
}

.history-plus {
    position: absolute;
    top: 50%;
    width: 42px;
    transform: translate(-50%, -50%);
}


.history-plus-first {
    left: 33%;
}

.history-plus-second {
    left: 67%;
}

.about-chart {
    display: flex;
    gap: 20px;
}

.about-chart-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 285px;
    min-height: 338px;
    padding: 40px;

    border-radius: var(--radius-16);
    box-shadow: 0 4px 20px 0 rgba(38, 173, 223, 0.20);

    background-size: cover;
    background-position: center center;
}

.about-chart-card>p {
    font-size: var(--fs-sm);
    color: var(--wf-600);
}

.about-chart-graph {
    flex: 1;

    padding: 20px 20px 16px 20px;
    border-radius: var(--radius-16);
    background: #fff;
    box-shadow: 0 4px 20px 0 rgba(38, 173, 223, 0.20);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 4px 12px;
    margin-bottom: 12px;

    border-radius: 4px;
    background: var(--bg);
}

.chart-title strong {
    color: var(--primary-blue100);
}

.chart-title,
.chart-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-title span,
.chart-date {
    color: var(--wf-600);
    font-size: var(--fs-xs);
}

.chart-date .line {
    width: 1px;
    height: 12px;
    background: var(--wf-600);
}

.chart-body {
    position: relative;

    display: flex;
    align-items: flex-end;

    height: 264px;
}

.chart-body::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;
    bottom: 28px;

    height: 1px;
    background: var(--border);
}

.chart-body .bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    flex: 1;
    height: 100%;
}

.chart-body .value {
    margin-bottom: 4px;

    font-size: var(--fs-xs);
    color: var(--wf-600);
}

.chart-body .bar {
    width: 28px;
    min-height: 1px;

    border-radius: 2px 2px 0 0;

    background: var(--primary-blue100);
}

.chart-body .label {
    margin-top: 8px;

    font-size: var(--fs-xs);
    font-weight: 600;
}

/* 이지케어 장점 */
.about-strength {
    padding: 100px 0 120px;
    background: var(--bg);
}

.strength-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.strength-card {
    display: flex;
    flex-direction: column;

    min-height: 346px;
    padding: 40px;

    border-radius: 16px;
    background: #fff;
}

.strength-image {
    display: flex;
    align-items: center;

    min-height: 172px;
    padding-left: 20px;
}

.strength-image img {
    display: block;
    width: auto;
    height: 112px;
}

.strength-content {
    flex: 1;
}

.strength-content .strength-title {
    margin-bottom: 12px;

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

.strength-content .strength-desc {
    font-size: var(--fs-md);
}

/* 이지케어 영상 */
.about-video {
    padding: 100px 0 120px;
    background: var(--wf-700);
}

.about-video h1 {
    color: #fff;
}

.video-wrap {
    overflow: hidden;

    max-width: 1200px;
    margin: 0 auto;

    border-radius: var(--radius-16);

    aspect-ratio: 16 / 9;

    background: var(--wf-900);
}

.video-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* 이지케어 연혁 */
.about-chronology {
    padding: 120px 0px 0px;
}

.about-chronology .inner {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 80px;

    align-items: start;
}

.about-chronology .chronology-title {
    position: sticky;
    top: 120px;

    text-align: left;
}

.chronology-list {
    max-width: 680px;
}

/* CTA */
.cta {
    padding: 120px 0;

    background-image: url("/homepage2/assets/images/main-cta-bg.png");
    background-position: center center;
    background-size: cover;
}

.cta-title-wrap {
    margin-bottom: 60px;
    text-align: center;
}

.cta .contents-title {
    color: var(--wf-white);
}

.cta-btn-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
}

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

    min-width: 285px;
    height: auto;
    padding: 20px;

    border: 1px solid var(--wf-white);
    border-radius: var(--radius-100);

    color: var(--wf-white);
    font-size: var(--fs-lg);
    font-weight: 500;

    transition: all .3s ease;
}

.cta-btn:hover {
    background: var(--wf-white);
    color: var(--primary-blue400);
}

/* ==========================
   방문요양 ERP
========================== */

/* 방문요양 섹션 */
.visit-main {
    padding: 80px 0px;
    background: var(--wh-white);
}

.visit-main .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.visit-title-wrap p {
    text-align: left;
}

.visit-main .img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 488px;
    height: 340px;
}

.visit-main .img-wrap > img {
    width: 420px;
    height: auto;
}

/* 말풍선 후기 섹션 */
.visit-pain {
    padding: 100px 0px;
    background: var(--bg);
}

.visit-pain .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pain-title-wrap {
    text-align: left;
}

.visit-pain-chat {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
}

.chat-box {
    position: relative;

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

    padding: 28px;

    border-radius: var(--radius-12);
    background: #fff;

    box-shadow: 0 8px 24px rgba(33, 37, 41, 0.08);
}

.chat-box .quotes-text {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.chat-box::after {
    content: "";

    position: absolute;
    right: 60px;
    bottom: -20px;

    width: 28px;
    height: 20px;

    background: inherit;

    clip-path: polygon(0 0,
        100% 0,
        100% 100%);
}

.chat-box strong {
    display: block;

    color: var(--primary-blue100);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.chat-box .chat-desc {
    font-size: var(--fs-md);
}

.chat-box:nth-child(1) {
    margin-right: 0;
}

.chat-box:nth-child(2) {
    margin-right: 40px;
}

.chat-box:nth-child(3) {
    margin-right: 80px;
}

/* 방문요양 흐름 섹션 */
.visit-flow {
    padding: 100px 0 150px;
}

.visit-flow-list {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.flow-item {
    position: relative;
    z-index: 1;

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

    padding: 28px 20px 32px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-12);
    background: var(--wf-white);
}

.flow-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 52px;
    height: 52px;
    margin-bottom: 16px;

    border-radius: 20px;
    background: var(--bg);
}

.flow-step {
    margin-bottom: 4px;

    color: var(--wf-600);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.flow-name {
    font-size: var(--fs-lg);
    font-weight: 600;
}

/* 뒤에 깔리는 점선 */
.visit-flow-list::before {
    content: '';

    position: absolute;
    left: 0;
    right: 0;
    top: 50%;

    height: 3px;

    transform: translateY(-50%);

    background: linear-gradient(90deg,
        rgba(38, 173, 223, 0.25) 0%,
        rgba(38, 173, 223, 1) 100%);

    background-size: 300px 100%;
    animation: flowLine 5s linear infinite;

    mask:
        repeating-linear-gradient(to right,
        #000 0 4px,
        transparent 4px 8px);

    -webkit-mask:
        repeating-linear-gradient(to right,
        #000 0 4px,
        transparent 4px 8px);
}

@keyframes flowLine {
    from {
        background-position: -300px 0;
    }

    to {
        background-position: calc(100% + 300px) 0;
    }
}

/* 주요기능 섹션 */
.visit-feature {
    padding: 0px 0 150px;
}

.visit-feature .feature-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    margin-bottom: 20px;
    min-height: 400px;

    border-radius: var(--radius-16);
    background: var(--bg);
}

.visit-feature .feature-card:last-child {
    margin-bottom: 0;
}

.visit-feature .feature-card.reverse {
    flex-direction: row-reverse;
}

.visit-feature .feature-content {
    flex: 1;

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

    padding: 40px;
}

.visit-feature .feature-content h2 {
    margin-bottom: 12px;
}

.visit-feature .feature-image {
    width: 50%;
}

.visit-feature .feature-image img {
    display: block;
    width: 100%;
    height: auto;
}

.visit-feature .feature-extra {
    display: flex;
    align-items: center;
    gap: 28px;
}

.visit-feature .feature-extra>div {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}

.visit-feature .feature-extra img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-20);
    background: #fff;
}

.visit-feature .feature-extra span {
    font-size: var(--fs-xs);
    color: var(--wf-700);
}

/* 평가자료 영역 */
.visit-resource {
    padding-bottom: 120px;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.resource-card {
    position: relative;

    overflow: hidden;

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

    min-height: 165px;

    padding: 40px;

    border: 1px solid var(--border);
    border-radius: var(--radius-16);
    background: #fff;
}

.resource-card:last-child {
    background: var(--bg);
    border: 1px solid var(--bg);
}

.resource-card-lg {
    grid-column: 1 / -1;
    min-height: 400px;
}

.resource-content {
    position: relative;
    z-index: 2;
}

.resource-content h2 {
    margin-bottom: 12px;
}

.resource-link {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-top: 32px;

    color: var(--primary-blue100);
    font-size: var(--fs-sm);
}

.resource-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;
    background: var(--primary-blue100);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.resource-card:hover .resource-link::after {
    transform: scaleX(1);
}

.resource-image {
    position: absolute;
    right: 0;
    bottom: 0;
}

.resource-image img {
    display: block;
    width: 800px;
}

.resource-icon {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

/* 이지케어 도입 전후 */
.visit-impact {
    padding: 100px 0;
    background: var(--wf-700);
}

.impact-title-wrap h1 {
    color: rgba(255, 255, 255, 0.92);
}

.impact-title-wrap p {
    color: rgba(255, 255, 255, 0.65);
}

.impact-compare {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    margin-bottom: 80px;
}

.impact-card {
    width: auto;
    overflow: hidden;
    border-radius: 12px;
}

.impact-card.before {
    max-width: 376px;
}

.impact-card.after {
    max-width: 420px;
}

.impact-card.after .impact-list {
    background: #fff;
}

.before .impact-card-head {
    background: linear-gradient(90deg,
        rgba(108, 117, 125, 0) 0%,
        rgba(108, 117, 125, 1) 50%,
        rgba(108, 117, 125, 0) 100%);
}

.after .impact-card-head {
    background: var(--primary-blue100);
}

.impact-card-head {
    padding: 12px 0px;

    text-align: center;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: #fff;
}

.impact-list {
    padding: 0 28px 8px;
    background: var(--bg);
}

.impact-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0px;
    border-bottom: 1px solid var(--border);

    font-size: var(--fs-sm);
    color: var(--wf-700);
}

.impact-list li:last-child {
    border-bottom: 0;
}

.impact-list-after li {
    gap: 16px;
}

.impact-list-after li strong {
    font-weight: 600;
}

.impact-list-after .icon {
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    border-radius: var(--radius-16);
    background: var(--bg);

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

.impact-arrow {
    width: 108px;
    height: auto;
}

.impact-btn-wrap {
    text-align: center;
}

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

    min-width: 280px;
    height: auto;
    padding: 20px 40px;

    border-radius: var(--radius-12);

    background: var(--primary-blue100);

    color: var(--wf-white);
    font-size: var(--fs-lg);
    font-weight: 500;

    transition: transform .2s ease-in-out;
}

.impact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px 0 rgba(33, 37, 41, 0.20);
}


/* 운영안정성 섹션  */
.visit-stability {
    padding: 100px 0 120px;
}

.stability-banner {
    min-height: 280px;
    padding: 40px;
    margin-bottom: 20px;

    border-radius: var(--radius-16);
    background-image: url("/homepage2/assets/images/visit-stability-bg.png");
    background-size: cover;
}

.stability-banner h2 {
    margin-bottom: 12px;
}

.stability-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 20px;
}

.stability-item .num {
    display: block;

    margin-bottom: 8px;

    color: var(--primary-blue100);
    font-size: var(--fs-lg);
    font-weight: 600;
}

/* 이지케어 채널 */
.visit-community {
    padding: 100px 0;
    background: var(--bg);
}

.visit-community .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.community-title-wrap {
    text-align: left;
    margin-bottom: 0px;
}

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

.community-links {
    display: flex;
    gap: 20px;
}

.community-card {
    width: 240px;
    height: 154px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;

    padding: 32px 40px;
    border-radius: var(--radius-12);
    background: #fff;

    transition: .2s ease;
}

.community-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px 0 rgba(33, 37, 41, 0.08);
}

.community-icon img {
    width: 52px;
    display: block;
}

.community-card span {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--wf-900);
}

/* cta  */
.sub-cta {
    padding: 120px 0px;

    background-color: var(--primary-blue100);
    background-image: url("/homepage2/assets/images/sub-cta-bg.png");
    background-position: center center;
    background-size: cover;
}

.sub-cta .cta-title {
    color: var(--wf-white);
}

.sub-cta .cta-btn-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.sub-cta .cta-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 285px;
    height: auto;
    padding: 20px;

    border: 1px solid var(--wf-white);
    border-radius: var(--radius-100);

    color: var(--wf-white);
    font-size: var(--fs-lg);
    font-weight: 500;

    transition: all .3s ease;
}

.sub-cta .cta-btn.active {
    background: var(--wf-white);
    color: var(--primary-blue100);
}

.sub-cta .cta-btn.active:hover {
    background: rgba(255, 255, 255, 0.8);
}

.sub-cta .cta-btn:hover {
    background: var(--wf-white);
    color: var(--primary-blue100);
}

/* ==========================
   주야간 ERP
========================== */

/* 주야간 섹션 */
.daycare-main {
    padding: 80px 0px;
    background: var(--wh-white);
}

.daycare-main .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.daycare-title-wrap p {
    text-align: left;
}

.daycare-main .img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 488px;
    height: 340px;
}

.daycare-main .img-wrap > img {
    width: 460px;
    height: auto;
}

/* 말풍선 후기 섹션 */
.daycare-pain {
    padding: 100px 0px;
    background: var(--bg);
}

.daycare-pain .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pain-title-wrap {
    text-align: left;
}

.daycare-pain-chat {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
}

.chat-box {
    position: relative;

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

    padding: 28px;

    border-radius: var(--radius-12);
    background: #fff;

    box-shadow: 0 8px 24px rgba(33, 37, 41, 0.08);
}

.chat-box .quotes-text {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.chat-box::after {
    content: "";

    position: absolute;
    right: 60px;
    bottom: -20px;

    width: 28px;
    height: 20px;

    background: inherit;

    clip-path: polygon(0 0,
        100% 0,
        100% 100%);
}

.chat-box strong {
    display: block;

    color: var(--primary-blue100);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.chat-box .chat-desc {
    font-size: var(--fs-md);
}

.chat-box:nth-child(1) {
    margin-right: 0;
}

.chat-box:nth-child(2) {
    margin-right: 40px;
}

.chat-box:nth-child(3) {
    margin-right: 80px;
}

/* 주야간 카드 섹션  */
.daycare-card {
    padding: 100px 0px 150px;
    background: var(--bg);
}

.daycare-card .inner>div {
    display: flex;
    gap: 20px;
}

.daycare-card img {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* 주야간 흐름 섹션 */
.daycare-flow {
    padding: 100px 0 150px;
}

.daycare-flow-list {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.flow-item {
    position: relative;
    z-index: 1;

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

    padding: 28px 20px 32px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-12);
    background: var(--wf-white);
}

.flow-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 52px;
    height: 52px;
    margin-bottom: 16px;

    border-radius: 20px;
    background: var(--bg);
}

.flow-step {
    margin-bottom: 4px;

    color: var(--wf-600);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.flow-name {
    font-size: var(--fs-lg);
    font-weight: 600;
}

/* 뒤에 깔리는 점선 */
.daycare-flow-list::before {
    content: '';

    position: absolute;
    left: 0;
    right: 0;
    top: 50%;

    height: 3px;

    transform: translateY(-50%);

    background: linear-gradient(90deg,
        rgba(38, 173, 223, 0.25) 0%,
        rgba(38, 173, 223, 1) 100%);

    background-size: 300px 100%;
    animation: flowLine 5s linear infinite;

    mask:
        repeating-linear-gradient(to right,
        #000 0 4px,
        transparent 4px 8px);

    -webkit-mask:
        repeating-linear-gradient(to right,
        #000 0 4px,
        transparent 4px 8px);
}

@keyframes flowLine {
    from {
        background-position: -300px 0;
    }

    to {
        background-position: calc(100% + 300px) 0;
    }
}

/* 주요기능 섹션 */
.daycare-feature {
    padding: 0px 0 150px;
}

.daycare-feature .feature-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    margin-bottom: 20px;
    min-height: 400px;

    border-radius: var(--radius-16);
    background: var(--bg);
}

.daycare-feature .feature-card:last-child {
    margin-bottom: 0;
}

.daycare-feature .feature-card.reverse {
    flex-direction: row-reverse;
}

.daycare-feature .feature-content {
    flex: 1;

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

    padding: 40px;
}

.daycare-feature .feature-content .ai-soon {
    font-weight: 500;
    color: #7749F8;
}

.daycare-feature .feature-content h2 {
    margin-bottom: 12px;
}

.daycare-feature .feature-image {
    width: 50%;
}

.daycare-feature .feature-image img {
    display: block;
    width: 100%;
    height: auto;
}

.daycare-feature .feature-extra {
    display: flex;
    align-items: center;
    gap: 28px;
}

.daycare-feature .feature-extra>div {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}

.daycare-feature .feature-extra img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-20);
    background: #fff;
}

.daycare-feature .feature-extra span {
    font-size: var(--fs-xs);
    color: var(--wf-700);
}

/* 평가자료 영역 */
.daycare-resource {
    padding-bottom: 120px;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.resource-card {
    position: relative;

    overflow: hidden;

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

    min-height: 165px;

    padding: 40px;

    border: 1px solid var(--border);
    border-radius: var(--radius-16);
    background: #fff;
}

.resource-card:last-child {
    background: var(--bg);
    border: 1px solid var(--bg);
}

.resource-card-lg {
    grid-column: 1 / -1;
    min-height: 400px;
}

.resource-content {
    position: relative;
    z-index: 2;
}

.resource-content h2 {
    margin-bottom: 12px;
}

.resource-link {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-top: 32px;

    color: var(--primary-blue100);
    font-size: var(--fs-sm);
}

.resource-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;
    background: var(--primary-blue100);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.resource-card:hover .resource-link::after {
    transform: scaleX(1);
}

.resource-image {
    position: absolute;
    right: 0;
    bottom: 0;
}

.resource-image img {
    display: block;
    width: 800px;
}

.resource-icon {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

/* 이지케어 도입 전후 */
.daycare-impact {
    padding: 100px 0;
    background: var(--wf-700);
}

.impact-title-wrap h1 {
    color: rgba(255, 255, 255, 0.92);
}

.impact-title-wrap p {
    color: rgba(255, 255, 255, 0.65);
}

.daycare-impact .impact-compare {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    width: 1004px;
    margin: 0px auto 80px;
}

.impact-card {
    width: auto;
    overflow: hidden;
    border-radius: 12px;
}

.impact-card.before {
    max-width: 376px;
}

.impact-card.after {
    max-width: 420px;
}

.impact-card.after .impact-list {
    background: #fff;
}

.before .impact-card-head {
    background: linear-gradient(90deg,
        rgba(108, 117, 125, 0) 0%,
        rgba(108, 117, 125, 1) 50%,
        rgba(108, 117, 125, 0) 100%);
}

.after .impact-card-head {
    background: var(--primary-blue100);
}

.impact-card-head {
    padding: 12px 0px;

    text-align: center;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: #fff;
}

.impact-list {
    padding: 0 28px 8px;
    background: var(--bg);
}

.impact-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0px;
    border-bottom: 1px solid var(--border);

    font-size: var(--fs-sm);
    color: var(--wf-700);
}

.impact-list li:last-child {
    border-bottom: 0;
}

.impact-list-after li {
    gap: 16px;
}

.impact-list-after li strong {
    font-weight: 600;
}

.impact-list-after .icon {
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    border-radius: var(--radius-16);
    background: var(--bg);

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

.impact-arrow {
    width: 108px;
    height: auto;
}

.impact-btn-wrap {
    text-align: center;
}

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

    min-width: 280px;
    height: auto;
    padding: 20px 40px;

    border-radius: var(--radius-12);

    background: var(--primary-blue100);

    color: var(--wf-white);
    font-size: var(--fs-lg);
    font-weight: 500;

    transition: transform .2s ease-in-out;
}

.impact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px 0 rgba(33, 37, 41, 0.20);
}


/* 운영안정성 섹션  */
.daycare-stability {
    padding: 100px 0 120px;
}

.daycare-stability .stability-banner {
    min-height: 280px;
    padding: 40px;
    margin-bottom: 20px;

    border-radius: var(--radius-16);
    background-image: url("/homepage2/assets/images/daycare-stability-bg.png");
    background-size: cover;
}

.stability-banner h2 {
    margin-bottom: 12px;
}

.stability-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 20px;
}

.stability-item .num {
    display: block;

    margin-bottom: 8px;

    color: var(--primary-blue100);
    font-size: var(--fs-lg);
    font-weight: 600;
}

/* 이지케어 채널 */
.daycare-community {
    padding: 100px 0;
    background: var(--bg);
}

.daycare-community .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.community-title-wrap {
    text-align: left;
}

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

.community-links {
    display: flex;
    gap: 20px;
}

.community-card {
    width: 240px;
    height: 154px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;

    padding: 32px 40px;
    border-radius: var(--radius-12);
    background: #fff;

    transition: .2s ease;
}

.community-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px 0 rgba(33, 37, 41, 0.08);
}

.community-icon img {
    width: 52px;
    display: block;
}

.community-card span {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--wf-900);
}


/* ==========================
   재무회계
========================== */

/* 재무회계 섹션 */
.w4c-main {
    padding: 80px 0px;
    background: var(--wh-white);
}

.w4c-main .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.w4c-title-wrap p {
    text-align: left;
}

.w4c-main .img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 488px;
    height: 340px;
}

.w4c-main .img-wrap > img {
    width: 460px;
    height: auto;
}

/* 말풍선 후기 섹션 */
.w4c-pain {
    padding: 100px 0px;
    background: var(--bg);
}

.w4c-pain .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pain-title-wrap {
    text-align: left;
}

.w4c-pain-chat {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
}

.chat-box {
    position: relative;

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

    padding: 28px;

    border-radius: var(--radius-12);
    background: #fff;

    box-shadow: 0 8px 24px rgba(33, 37, 41, 0.08);
}

.chat-box .quotes-text {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.chat-box::after {
    content: "";

    position: absolute;
    right: 60px;
    bottom: -20px;

    width: 28px;
    height: 20px;

    background: inherit;

    clip-path: polygon(0 0,
        100% 0,
        100% 100%);
}

.w4c-pain .chat-box strong {
    display: block;

    color: var(--primary-blue400);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.chat-box .chat-desc {
    font-size: var(--fs-md);
}

.chat-box:nth-child(1) {
    margin-right: 0;
}

.chat-box:nth-child(2) {
    margin-right: 40px;
}

.chat-box:nth-child(3) {
    margin-right: 0;
}

.chat-box:nth-child(4) {
    margin-right: 40px;
}


/* 주요기능 섹션 */
.w4c-feature {
    padding: 100px 0 150px;
}

.w4c-feature .feature-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    margin-bottom: 20px;
    min-height: 400px;

    border-radius: var(--radius-16);
    background: var(--bg);
}

.w4c-feature .feature-card:last-child {
    margin-bottom: 0;
}

.w4c-feature .feature-card.reverse {
    flex-direction: row-reverse;
}

.w4c-feature .feature-content {
    flex: 1;

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

    padding: 40px;
}

.w4c-feature .feature-content h2 {
    margin-bottom: 20px;
}

.w4c-feature .feature-image {
    width: 50%;
}

.w4c-feature .feature-image img {
    display: block;
    width: 100%;
    height: auto;

    transition: opacity .25s;
}

.w4c-feature .feature-tab,
.w4c-feature .helper-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.w4c-feature .feature-tab li {
    position: relative;

    width: fit-content;
    padding-bottom: 4px;

    line-height: 1.3;
    color: var(--wf-800);

    transition: color .25s ease-in-out;

    cursor: pointer;
}

.w4c-feature .feature-tab li.active,
.w4c-feature .feature-tab li:hover {
    font-weight: 700;
    color: var(--primary-blue400);
}

.w4c-feature .feature-tab li::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 1.5px;

    background: var(--primary-blue400);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .25s ease-in-out;
}

.w4c-feature .feature-tab li.active::after {
    transform: scaleX(1);
}

.w4c-feature .no-img-tab {
    display: inline-block;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--wf-800);
}

.w4c-feature .no-img-tab li {
    margin-bottom: 8px;
}

.w4c-feature .no-img-tab li:last-child {
    margin-bottom: 0px;
}

.w4c-feature .helper-text li {
    color: var(--wf-800);
}

.w4c-feature p.noti {
    color: var(--wf-600);
}

/* 이지케어 도입 전후 */
.w4c-impact {
    padding: 0 0 150px;
}

.w4c-impact .impact-title-wrap {
    margin-bottom: 40px;
}

.w4c-impact .impact-title-wrap h1,
.w4c-impact .impact-title-wrap p {
    text-align: left;
    color: var(--wf-900);
}

.w4c-impact .impact-compare {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
    padding-left: 20px;
}

.w4c-impact .impact-compare img {
    width: 1230px;
    max-width: calc(100vw - 30px);
}

/* 회계 파트너 */
.w4c-partner {
    padding: 120px 0;
    background-image: url("/homepage2/assets/images/w4c-partner-bg.png");
    background-position: center center;
    background-size: cover;
}

.partner-title-wrap h1 {
    color: #fff;
}

.partner-logo-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.partner-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-logo img {
    display: block;
    height: 60px;
    width: auto;
    opacity: .7;
    transition: opacity .3s ease;
}

.partner-logo:hover img {
    opacity: 1;
}

/* 이지케어 채널 */
.w4c-community {
    padding: 100px 0;
    background: var(--bg);
}

.w4c-community .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.community-title-wrap {
    text-align: left;
}

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

.community-links {
    display: flex;
    gap: 20px;
}

.community-card {
    width: 240px;
    height: 154px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;

    padding: 32px 40px;
    border-radius: var(--radius-12);
    background: #fff;

    transition: .2s ease;
}

.community-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px 0 rgba(33, 37, 41, 0.08);
}

.community-icon img {
    width: 52px;
    display: block;
}

.community-card span {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--wf-900);
}


/* ==========================
   이용신청
========================== */

/* 이용신청 섹션 */
.application-main {
    padding: 60px 0;
    background: var(--wh-white);
}

.application-main .inner {
    /* display: flex;
    justify-content: space-between; */
}


/* ==========================
   요금안내
========================== */

/* 요금안내 섹션 */
.price-main {
    padding: 80px 0;
    background: var(--wh-white);
}

.price-main .inner {
    /* display: flex;
    justify-content: space-between; */
}




/* ==========================
   부가서비스 안내
========================== */
.service-list {
    padding: 80px 0px 120px;
    background: var(--bg);
}

.service-title-wrap {
    margin-bottom: 60px;
    text-align: center;
}

.service-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;

    height: 260px;
    border-radius: var(--radius-16);
    background: var(--wf-white);

    overflow: hidden;
}

.service-content {
    flex: 1;
    min-width: 0;
    padding: 40px 48px;
}

.service-content h2 {
    line-height: 1;
    margin-bottom: 12px;
}

.service-content .helper-text {
    margin-bottom: 32px;
}

.service-btn-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.service-link {
    display: inline-block;

    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--wf-600);
}

.service-link:hover {
    color: var(--wf-900);
}

.service-image {
    flex-shrink: 0;

    width: 480px;
    padding: 40px 60px;
}

.service-image img {
    display: block;

    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================
   이용기관 후기
========================== */
.service-review {
    padding: 100px 0px;
    background: var(--wf-800);
}

.service-review-title-wrap {
    margin-bottom: 60px;
    text-align: center;
}

.service-review .block-title {
    color: var(--wf-white);
}

.service-review .block-subtitle {
    color: var(--wf-400);
}

.service-review-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    margin-bottom: 48px;
}

.service-review-item {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 28px 24px;
    border-radius: var(--radius-12);
    background: var(--wf-white);
}




.service-review-item::after {
    content: "";

    position: absolute;
    right: 100px;
    bottom: -14px;

    width: 0;
    height: 0;

    border-top: 14px solid var(--wf-white);
    border-right: 14px solid transparent;
}



.service-review-item:nth-of-type(1)::after {
    content: "";

    position: absolute;
	left:auto;
    right: 60px;
    bottom: -14px;
    width: 16px;
    height: 16px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.service-review-item:nth-of-type(3)::after {
     content: "";

    position: absolute;
    right: 60px;
	left:auto;
    bottom: -14px;

    width: 0;
    height: 0;

    border-top: 14px solid var(--wf-white);
    border-right: 14px solid transparent;
}



.service-review-badge {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 16px;

    color: var(--primary-blue100);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.service-review-badge .badge-icon {
    display: inline-block;

    width: 16px;
    height: 16px;

    flex-shrink: 0;
}

.service-review-text {
    flex: 1;
    margin-bottom: 24px;

    color: var(--wf-800);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.6;
}

.service-review-name {
    display: block;

    color: var(--wf-800);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.service-review-date {
    display: block;
    margin-top: 4px;

    color: var(--wf-500);
    font-size: var(--fs-xs);
}

.service-review-more-wrap {
    text-align: center;
}



/* ==========================
   핵심 기능
========================== */
.service-benefit {
    padding: 100px 0px;
    background: var(--wf-white);
}

.benefit-title-wrap {
    margin-bottom: 60px;
    text-align: center;
}

.benefit-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.benefit-item {
    padding: 32px 28px;
    border-radius: var(--radius-12);
    background: var(--bg);
}

.benefit-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 24px;
}

.benefit-item h3 {
    margin-bottom: 8px;
}

.service-benefit p.helper-text {
    font-size: var(--fs-sm);
}

/* ==========================
   반응형
========================== */
@media (max-width: 768px) {

    /* 부가서비스 안내 */
    .service-list {
        padding: 60px 0px 80px;
    }

    .service-title-wrap {
        margin-bottom: 40px;
    }

    .service-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;

        padding: 28px 20px;
    }

    .service-content .helper-text {
        margin-bottom: 20px;
    }

    .service-image {
        width: 100%;
        height: 160px;
    }

    /* 이용기관 후기 */
    .service-review {
        padding: 80px 0px;
    }

    .service-review-title-wrap {
        margin-bottom: 40px;
    }

    .service-review-list {
        grid-template-columns: 1fr;
        gap: 28px;

        margin-bottom: 40px;
    }

    .service-review-text {
        min-height: auto;
    }

    .service-review-more {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* 핵심 기능 */
    .service-benefit {
        padding: 80px 0px;
    }

    .benefit-title-wrap {
        margin-bottom: 40px;
    }

    .benefit-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .benefit-item {
        padding: 24px 20px;
    }

    .benefit-icon {
        margin-bottom: 16px;
    }
}