@media (max-width: 1240px) {

    /* ==========================
       공통
    ========================== */
    section .inner {
        padding: 0px 20px;
    }
}

@media (max-width: 1180px) {

    /* ==========================
        히어로
    ========================== */
    .history-card,
    .about-chart-card {
        padding: 28px;
    }

    .history-card h2,
    .about-chart-card h2 {
        font-size: 28px;
    }

    .history-card span,
    .about-chart-card span {
        font-size: var(--fs-md);
    }

}

@media (max-width: 960px) {

    /* ==========================
       공통
    ========================== */
    .section-title,
    .contents-title {
        font-size: var(--fs-3xl);
        font-weight: 700;
    }

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

    .block-head h1 {
        font-size: var(--fs-2xl);
    }

    .m-br {
        display: block;
    }

    /* ==========================
       히어로
    ========================== */
    .about-history {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        margin-bottom: 0px;
    }

    .about-history::before {
        content: "";

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

        width: 360px;
        height: 360px;

        background: transparent;
        border-radius: var(--radius-100);
        box-shadow: 0px 0px 40px rgba(38, 173, 223, 0.4);

        transform: translate(-50%, -50%);

        z-index: 0;
    }

    .history-card-nationwide {
        width: 100%;
        min-height: auto;
        gap: 20px;

        background-size: 70%;
        background-repeat: no-repeat;
        background-position: 100% 60%;
        background-color: #fff;
    }

    .about-chart {
        flex-direction: column;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-body .bar {
        width: 24px;
    }

    /* ==========================
       주요서비스
    ========================== */
    .overview-card-content {
        padding: 28px 20px 0px;
        min-height: 360px;
    }

    .overview-card-content p br {
        display: none;
    }

    .about-flow .flow-item {
        padding: 20px 16px 24px;
    }

    .about-flow p {
        font-size: var(--fs-sm);
    }

    /* ==========================
       연혁
    ========================== */
    .about-chronology .inner {
        display: flex;
        justify-content: space-between;
    }

    .chronology-title h1 .pc-br {
        display: none;
    }

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

    /* ==========================
       CTA
    ========================== */
    .cta {
        background-image: url(/homepage2/assets/images/m-main-cta-bg.png);
    }

    .cta-btn-wrap {
        flex-direction: column;
    }
}

@media (max-width: 768px) {

    /* ==========================
       공통
    ========================== */
    .section-head,
    .block-head {
        margin-bottom: 40px;
    }

    .section-title,
    .contents-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: var(--fs-md);
    }

    .block-head h1 {
        font-size: 28px;
    }

    /* ==========================
       히어로
    ========================== */
    .history-card h2,
    .about-chart-card h2 {
        font-size: var(--fs-xl);
    }

    /* ==========================
       주요 서비스
    ========================== */
    .about-overview {
        padding: 100px 0;
    }

    .overview-list {
        flex-direction: column;
    }

    .overview-card-content {
        padding: 20px 24px;
        min-height: 200px;

        background-size: 44%;
        background-position: 100% 100%;
    }

    .overview-card-content p .m-br {
        display: block;
    }

    .about-flow-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .about-flow-list::before {
        content: "";
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 3px;
        height: 100%;

        background: rgba(38, 173, 223, 1);

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

    .about-flow-list .flow-item:nth-child(4),
    .about-flow-list .flow-item:nth-child(5) {
        transform: translateX(0%);
    }

    .about-flow .flow-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
        padding: 20px 24px;
    }

    .about-flow .flow-item .pc-br,
    .about-flow .flow-item .m-br {
        display: none;
    }

    .about-flow .flow-item>div {
        text-align: left;
    }

    .about-flow .flow-icon {
        margin-bottom: 0px;
    }

    .about-strength {
        padding: 0 0 100px;
    }

    .strength-grid {
        display: flex;
        flex-direction: column;
    }

    .strength-card {
        gap: 40px;
    }

    /* ==========================
       연혁
    ========================== */
    .about-chronology {
        padding: 100px 0 0;
    }

    .about-chronology .inner {
        flex-direction: column;
        gap: 60px;
    }

    .about-chronology .chronology-title {
        position: unset;
        margin-bottom: 0;
        top: 0;
    }
}

@media (max-width: 640px) {
    .m-br {
        display: block;
    }

    /* ==========================
       히어로
    ========================== */
    .about-intro {
        padding: 80px 0px;
    }

    .about-history {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .about-history::before {
        content: "";

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

        width: 20px;
        height: 90%;
        border-radius: 0;

        background: linear-gradient(90deg,
            rgba(38, 173, 223, 0.1) 0%,
            rgba(38, 173, 223, 0.4) 40%,
            rgba(38, 173, 223, 1) 40%,
            rgba(38, 173, 223, 1) 60%,
            rgba(38, 173, 223, 0.4) 60%,
            rgba(38, 173, 223, 0.1) 100%);

        transform: translateY(-50%);

        z-index: 0;
    }

    .history-card {
        width: 100%;
        min-height: 200px;

        background-position: 100% 30%;
        background-size: 60%;
        background-repeat: no-repeat;
        background-color: #fff;
    }

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

    .chart-header .chart-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        margin-bottom: 4px;
    }

    .chart-body.pc-chart {
        display: none;
    }

    .chart-body.m-chart {
        position: relative;

        display: block;
        height: auto;

        padding: 8px 0px;
    }

    .chart-body.m-chart::before {
        content: '';

        position: absolute;

        top: 0px;
        bottom: 0px;
        left: 55px;

        width: 1px;
        height: 100%;

        background: var(--border);
    }

    .chart-body .bar-item {
        flex-direction: row-reverse;
        gap: 8px;

        margin-bottom: 6px;
    }

    .chart-body .bar-item:last-child {
        margin-bottom: 0px;
    }

    .chart-body .bar {
        width: 100px;
        min-width: 1px;
        min-height: 20px;
        border-radius: 0px 2px 2px 0px;
    }

    .chart-body .label,
    .chart-body .value {
        margin: 0px;
    }

    .chart-body .label {
        min-width: 48px;
    }

    .chart-body::after {
        display: none;
    }


    /* ==========================
       주요서비스
    ========================== */
    .overview-list {
        gap: 16px;
    }

    .overview-list .overview-card-content {
        min-height: 340px;
    }

    .overview-card-content {
        padding: 20px;
        background-size: 70%;
    }

    .overview-card-content h3 {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .overview-card-content p .m-br {
        display: none;
    }

    .overview-extra {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .strength-card {
        flex-direction: column-reverse;
        gap: 0px;
    }

    .strength-content {
        padding: 24px;
    }

    .strength-image {
        justify-content: flex-end;
        padding: 0px 40px 24px 24px;
    }

}

@media (max-width: 480px) {
    .section-subtitle br {
        display: none;
    }

    .history-card {
        background-size: 80%;
    }

    .overview-card-content {
        padding: 20px;
        background-size: 80%;
    }

    .about-flow-list {
        gap: 12px;
    }

}

@media (max-width: 375px) {
    section .inner {
        padding: 0px 16px;
    }

    /* ==========================
       점유율 그래프
    ========================== */
    .about-chart-graph {
        padding: 16px;
    }
    
    .chart-body .bar-item {
        margin-bottom: 4px;
    }

    .chart-body .bar {
        min-height: 16px;
    }

    /* ==========================
       연혁
    ========================== */
    .chronology-list {
        width: 100%;
    }

}