/* ==========================================================================
   1. Common & Top Visual
   ========================================================================== */
.sub-common-top.sub1 {
    background: url(/static/kor/images/intro/sub1-visual.jpg) no-repeat center/cover;
}

.section-mtop-Mtitle.intro {
    font-size: var(--font-32);
}

/* ==========================================================================
   2. About Us Section (#about-us)
   ========================================================================== */
#about-us {
    padding: var(--mg-200) 0 0;
}

/* 2-1. About Us - Section 1 */
#about-us .au-section1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 13.8rem;
}

#about-us .au-section1 figure {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
}

#about-us .au-section1 figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2-2. About Us - Section 2 (Script Box & Iframe) */
#about-us .au-section2 {
    margin: var(--mg-160) 0 var(--mg-200);
    display: flex;
    height: 42.8rem;
    border-radius: 16px;
    overflow: hidden;
}

#about-us .au-section2 iframe {
    flex: 1;
    height: 100%;
}

#about-us .au-section2 .script-box {
    flex: 1;
    border: 1px solid #CBCCCA;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

#about-us .au-section2 .script-box strong {
    margin: 0 4.8rem;
    padding: 3rem 0;
    display: block;
    font-size: var(--font-40);
    font-weight: 700;
    border-bottom: 1px solid #CBCCCA;
}

#about-us .au-section2 .script-box .scroll-padding {
    padding-right: 0.8rem;
}

#about-us .au-section2 .script-box p {
    padding-top: 2.4rem;
    padding-left: 4.8rem;
    height: 30rem;
    font-size: var(--font-18);
    font-weight: 300;
    color: #2F3133;
    overflow-y: scroll;
}

#about-us .au-section2 .script-box p::-webkit-scrollbar {
    width: 6px;
}

#about-us .au-section2 .script-box p::-webkit-scrollbar-thumb {
    background: #B1B3B3;
    border-radius: 50px;
}

#about-us .au-section2 .script-box p::-webkit-scrollbar-track {
    background: #fff;
}

/* 2-3. About Us - Section 3 (Business Service) */
section.workflow {
    position: relative;
    padding: var(--mg-200) 0;
    border-top: 1px solid #CBCCCA;
    border-bottom: 1px solid #CBCCCA;
}

section.workflow::before {
    content: '';
    width: 1px;
    height: 100%;
    background: #CBCCCA;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -2px;
}

.au-section3 dl.top:nth-child(1) {
    margin-bottom: 0;
}

.au-section3 dl {
    display: flex;
    flex-direction: column;
}

.au-section3 dl dt {
    margin-bottom: 8rem;
}

.au-section3 dl> :where(dt, dd) {
    position: relative;
}

.au-section3 dl> :where(dt, dd) .circle {
    width: clamp(28rem, 30vw, 48rem);
    height: clamp(16rem, 17.5vw, 28rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 50%;
    background: url(/static/kor/images/intro/Polygon-dft.svg) no-repeat center/contain;
    color: #B1B3B3;
    gap: 1.6rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: background 0.3s ease;
}

.au-section3 dl>dt.active .circle,
.au-section3 dl>dd.active .circle {
    background: url(/static/kor/images/intro/Polygon-active.svg) no-repeat center/contain;
    color: #fff;
}

/* active 시 선이 뻗어나오는 애니메이션 */
.au-section3 dl>dt.active .circle::before,
.au-section3 dl>dd.active .circle::before,
.au-section3 dl>dt.active .circle::after,
.au-section3 dl>dd.active .circle::after {
    width: 3.8rem;
}

.au-section3 dl> :where(dt, dd) .circle::before,
.au-section3 dl> :where(dt, dd) .circle::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0.4rem;
    z-index: 1;
    transition: width 0.6s ease 0.3s;
    /* 원형이 활성화된 후 선이 스르륵 뻗어나오도록 딜레이 */
}

.au-section3 dl> :where(dt, dd) .circle::before {
    right: 100%;
    /* 원 왼쪽 경계에서 시작, 왼쪽으로 뻗어나감 */
    background: url(/static/kor/images/intro/grad-line1.png) no-repeat right center / 3.8rem 100%;
}

.au-section3 dl> :where(dt, dd) .circle::after {
    left: 100%;
    /* 원 오른쪽 경계에서 시작, 오른쪽으로 뻗어나감 */
    background: url(/static/kor/images/intro/grad-line2.png) no-repeat left center / 3.8rem 100%;
}

/* 2번째 dt dd (왼쪽만 나옴) */
.au-section3 dl:nth-of-type(1) dd .circle::after {
    display: none;
}

/* 3번째 dt dd (오른쪽만 나옴) */
.au-section3 dl:nth-of-type(2) dt .circle::before {
    display: none;
}

/* scroll active */
.au-section3 dl> :where(dt, dd) .circle span {
    font-size: clamp(1.2rem, 1.1vw, var(--font-20));
    font-weight: 800;
    font-family: var(--paybooc);
}

.au-section3 dl> :where(dt, dd) .circle strong {
    font-size: clamp(1.8rem, 2vw, var(--font-28));
    font-weight: 700;
}

.au-section3 dl> :where(dt, dd)>p {
    margin-bottom: 2.4rem;
    display: none;
    align-items: flex-start;
    gap: 1rem;
    font-size: var(--font-32);
    font-weight: 700;
    color: #B1B3B3;
}

.au-section3 dl> :where(dt, dd)>p strong {
    font-size: var(--font-18);
    font-weight: 800;
    font-family: var(--paybooc);
    color: #B1B3B3;
}

.au-section3 dt .dt-wrap,
.au-section3 dd .dt-wrap {
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    flex: 2;
    min-width: 0;
}

.au-section3 dd {
    margin: 0;
    min-width: 0;
}

/* ==========================================================================
   Middle Row: 02 조미사업 + 03 식자재유통 한 줄 배치
   ========================================================================== */
.middle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 8rem;
}

.middle-item {
    position: relative;
    flex: 0 0 auto;
    width: clamp(28rem, 30vw, 48rem);
}

.middle-item>p {
    margin-bottom: 2.4rem;
    display: none;
    align-items: flex-start;
    gap: 1rem;
    font-size: var(--font-32);
    font-weight: 700;
    color: #B1B3B3;
}

.middle-item>p strong {
    font-size: var(--font-18);
    font-weight: 800;
    font-family: var(--paybooc);
    color: #B1B3B3;
}

.middle-item.active>p {
    background-color: #0065BD;
    color: #fff;
}

.middle-item.active>p strong {
    color: #fff;
}

.middle-item .business-service {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.middle-item.active .business-service {
    opacity: 1;
    transform: translateY(0);
}

/* 중앙 서클 영역 (Polygon-db SVG - 02+03 공유) */
.middle-circle-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.middle-circle-wrap .db-circle-inner {
    width: clamp(28rem, 30vw, 48rem);
    height: clamp(16rem, 17.5vw, 28rem);
    /* SVG 기준 가로 480, 세로 280 */
    background: url(/static/kor/images/intro/Polygon-db-dft.svg) no-repeat center / contain;
    display: flex;
    flex-direction: row;
    transition: background 0.3s ease;
}

.middle-circle-wrap.active .db-circle-inner {
    background: url(/static/kor/images/intro/Polygon-db-active.svg) no-repeat center / contain;
}

.db-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: #B1B3B3;
    transition: color 0.3s ease;
    padding: 0 2rem;
}

/* 왼쪽 half: 텍스트를 중앙선 쪽(오른쪽)으로 정렬 */
.db-half-left {
    align-items: flex-end;
    text-align: right;
}

/* 오른쪽 half: 텍스트를 중앙선 쪽(왼쪽)으로 정렬 */
.db-half-right {
    align-items: flex-start;
    text-align: left;
}

.middle-circle-wrap.active .db-half {
    color: #fff;
}

.db-half span {
    font-size: clamp(1.2rem, 1.1vw, var(--font-20));
    font-weight: 800;
    font-family: var(--paybooc);
}

.db-half strong {
    font-size: clamp(1.4rem, 1.5vw, var(--font-28));
    font-weight: 700;
    line-height: 1.3;
}

/* 수평 연결선 (db-circle 양쪽) */
.middle-circle-wrap::before,
.middle-circle-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0.4rem;
    z-index: 1;
    transition: width 0.6s ease 0.3s;
    /* 원형이 활성화된 후 선이 스르륵 뻗어나오도록 딜레이 */
}

.middle-circle-wrap::before {
    right: 100%;
    /* 원 왼쪽 경계에서 시작, 왼쪽으로 뻗어나감 */
    background: url(/static/kor/images/intro/grad-line1.png) no-repeat right center / 3.8rem 100%;
}

.middle-circle-wrap::after {
    left: 100%;
    /* 원 오른쪽 경계에서 시작, 오른쪽으로 뻗어나감 */
    background: url(/static/kor/images/intro/grad-line2.png) no-repeat left center / 3.8rem 100%;
}

/* active 시 선이 뻗어나오는 애니메이션 */
.middle-circle-wrap.active::before,
.middle-circle-wrap.active::after {
    width: 3.8rem;
}

/* row-top / row-bottom 구분 */
.au-section3 .row-top {
    margin-bottom: 8rem;
}

.au-section3 .row-bottom {
    margin-top: 0;
}

/* Business Service Cards */
.business-service {
    position: relative;
    width: clamp(28rem, 30vw, 48rem);
    box-sizing: border-box;
    opacity: 0;
    /* 처음엔 투명하게 숨김 */
    transform: translateY(40px);
    /* 아래로 살짝 내려둔 상태 */
    background: #fff;
    z-index: 10;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.au-section3 dl> :where(dt, dd).active .business-service {
    opacity: 1;
    transform: translateY(0);
}

.au-section3 dl> :where(dt, dd).active>p {
    background-color: #0065BD;
    color: #fff;
}

.au-section3 dl> :where(dt, dd).active>p strong {
    color: #fff;
}

/* 카드가 2개(좌/우)일 때, 두 번째 카드는 아주 살짝 늦게 올라오게 시차(Stagger) 부여 */
.au-section3 dl> :where(dt, dd).active .business-service:nth-child(2) {
    transition-delay: 0.15s;
}

.business-service.margin-leftAuto {
    margin-left: auto;
}

.au-section3 dl.bottom .business-service {
    padding-top: 64px;
    background: url(/static/kor/images/intro/business-service-line2.png) top center no-repeat;
}

/* Business Service Card Elements */
.business-service a {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 43.8rem;
    padding: 2.4rem 2.4rem 3.2rem;
    box-sizing: border-box;
    color: #2F3133;
    border: 1px solid #CBCCCA;
    border-radius: 16px;
    text-align: center;
    transition: all .3s;
    overflow: hidden;
    /* ✨ 자식 요소가 부모 영역 밖으로 팽창하는 것 완벽 방지 */
}

.bottom .business-service a {
    min-height: 38.4rem;
}

.business-service a figure {
    width: 100%;
    height: 24.3rem;
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
}

.business-service a figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-service figcaption {
    position: relative;
    width: 100%;
}

.business-service h3 {
    margin: 2.4rem 0 1.2rem;
    font-size: var(--font-28);
    font-weight: 700;
    color: #17181A;
}

.bottom .business-service h3 {
    margin: 0 0 1.2rem;
}

.business-service p {
    width: 100%;
    margin: 0;
    line-height: 1.6;
    font-size: var(--font-16);
    font-weight: 300;
    white-space: normal;
    word-break: keep-all;
}

.business-service p.pc_only {
    height: 7.2rem;
}

.middle-item .business-service p.pc_only {
    height: 9.6rem;
}

.row-bottom .business-service p.pc_only {
    height: 9.6rem;
}

.business-service p strong {
    font-weight: 300;
}

.bottom .business-service p {
    margin-bottom: 2.4rem;
}

.business-service span {
    position: absolute;
    padding-right: 2.26rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    font-weight: bold;
    font-size: var(--font-16);
    transition: opacity 0.3s;
    background: url(/static/kor/images/icon/look-icon-black.png) center right 0 no-repeat;
}

/* Business Service Hover Effects */
.business-service a:hover p {
    font-size: 0;
}

.business-service a:hover p .first-line {
    display: block;
    /* ✨ block으로 변경하여 100% 너비 인식을 명확히 함 */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-16);
    font-weight: 300;
}

.business-service a:hover p br {
    display: none;
}

.business-service a:hover span {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   4. History Section
   ========================================================================== */
.history-section {
    border-top: 1px solid #CBCCCA;
    border-bottom: 1px solid #CBCCCA;
    background: #fff;
}

.history-section .common-wrap {
    display: flex;
    align-items: flex-start;
    gap: 15rem;
}

/* History Navigation */
.history-section .scrollX {
    padding: var(--mg-200) 0 19.8rem;
    position: sticky;
    top: 15rem;
    width: 22rem;
    flex-shrink: 0;
}

.navigater li:not(:last-child) {
    margin-bottom: 1.6rem;
}

.navigater li a {
    display: block;
    line-height: 6.4rem;
    font-size: var(--font-24);
    font-weight: 500;
    font-family: var(--paybooc);
    background: #F5F5F5;
    border-radius: 50px;
    text-align: center;
    transition: all 0.3s;
    color: #B1B3B3;
}

.navigater li.active a {
    background-color: #0065BD;
    color: #fff;
    font-weight: 800;
}

/* History Content Area */
.history-content-wrapper {
    padding: var(--mg-200) var(--mg-150);
    padding-right: unset;
    position: relative;
    flex: 1;
}

.history-panel {
    display: none;
    max-width: 100rem;
}

.history-panel.active {
    display: block;
}

.history-label {
    margin-bottom: .4rem;
    display: block;
    font-size: var(--font-20);
    font-weight: 700;
    color: #0065BD;
}

.history-title {
    margin-bottom: 8rem;
    line-height: 1.4;
    font-size: var(--font-56);
    font-weight: 800;
    font-family: var(--paybooc);
}

/* History Data List (Year & Event) */
.text-box dl {
    margin-bottom: 8rem;
    padding-top: 1.6rem;
    display: flex;
    align-items: flex-start;
    gap: 15.6rem;
    border-top: 1px solid #E5E5E3;
}

.text-box dl:last-child {
    margin-bottom: 0;
}

.text-box dt {
    flex-shrink: 0;
    font-size: var(--font-40);
    font-weight: 800;
    font-family: var(--paybooc);
    color: #0065BD;
    user-select: none;
}

.text-box dd {
    flex: 1;
}

.text-box dd .line-text {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.text-box dd .line-text:has(.sameM) {
    align-items: baseline;
}

.text-box dd .line-text:not(:last-child) {
    margin-bottom: 1.6rem;
}

.text-box dd .line-text span {
    font-size: var(--font-20);
    font-weight: 500;
    color: #17181A;
    display: inline-block;
    width: 2.6rem;
    flex-shrink: 0;
}

.text-box dd .line-text p {
    font-size: var(--font-20);
    font-weight: 300;
    color: #2F3133;
    word-break: keep-all;
}

/* Timeline Track (Visual Line) */
.timeline-track {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    background-color: #CBCCCA;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: -1px;
    width: 3px;
    height: 0;
    background-color: #0065BD;
}

.timeline-progress::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 4px solid #0065BD;
    border-radius: 50%;
    z-index: 9;
}

@media screen and (max-width: 1023px) {
    .au-section3 dl> :where(dt, dd) {
        margin-bottom: 4rem;
    }

    .middle-item.active .business-service {
        padding: unset;
        margin: 0 var(--space-40);
    }

    /* 식자재 ~ 고객 식탁 */
    section.workflow .common-wrap {
        padding: unset;
    }

    .au-section3 dl> :where(dt, dd)>p {
        padding: 0 var(--space-40);
        display: flex;
    }

    .au-section3 dl> :where(dt, dd) .circle,
    section.workflow::before,
    .au-section3 dl> :where(dt, dd)::after,
    .middle-circle-wrap {
        display: none;
    }

    .au-section3 dl> :where(dt, dd)>p {
        margin: 0 var(--space-40) 1.6rem;
        height: 4.8rem;
        justify-content: center;
        align-items: center;
        background: #F5F5F5;
        border-radius: 500px;
        font-size: 2rem;
    }

    .au-section3 dl> :where(dt, dd)>p strong {
        transform: translateY(-3.5px);
    }

    /* middle-row 모바일: 세로 스택 */
    .middle-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8rem;
        margin-bottom: 8rem;
    }

    .middle-item {
        width: 100%;
    }

    .middle-item>p {
        padding: 0 var(--space-40);
        display: flex;
        margin: 0 var(--space-40) 1.6rem;
        height: 4.8rem;
        justify-content: center;
        align-items: center;
        background: #F5F5F5;
        border-radius: 500px;
    }

    .middle-item.active>p {
        background-color: #0065BD;
    }

    .middle-item .business-service {
        opacity: 1;
        transform: none;
        width: calc(50% - 0.8rem);
        margin-left: unset;
    }

    /* About Us Section (#about-us) */
    #about-us .au-section1 {
        flex-direction: column;
    }

    .title-box-sub>span {
        word-break: keep-all;
    }

    #about-us .au-section2 {
        flex-direction: column;
        height: auto;
        border-radius: 8px;
    }

    #about-us .au-section2 iframe {
        flex: unset;
        height: 40rem;
    }

    #about-us .au-section2 .script-box {
        border-top-right-radius: unset;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .business-service {
        padding: unset;
        background: unset;
        width: unset;
        flex: 1;
    }

    .au-section3 dl:nth-child(1) dd .business-service,
    .au-section3 dl:nth-child(2) dt .business-service {
        padding: 0 var(--space-40);
    }

    .au-section3 dl:nth-child(1) dd .business-service a,
    .au-section3 dl:nth-child(2) dt .business-service a {
        width: 44.2rem;
    }

    .au-section3 {
        padding: unset;
    }

    .au-section3 .scrollX {
        padding: 0 var(--space-40) 2.4rem;
        overflow-x: auto;
    }

    .au-section3 .scrollX::-webkit-scrollbar {
        height: 4px;
    }

    .au-section3 .scrollX::-webkit-scrollbar-track {
        background-color: #e5e5e5;
        border-left: 4rem solid #fff;
        border-right: 4rem solid #fff;
        background-clip: content-box;
    }

    .au-section3 .scrollX::-webkit-scrollbar-thumb {
        background-color: #2F3133;
        border-radius: 10px;
        border-left: 4rem solid transparent;
        border-right: 4rem solid transparent;
        background-clip: content-box;
    }

    .au-section3 dt .dt-wrap {
        gap: .8rem;
    }

    .business-service a:hover {
        background-color: unset;
        color: unset;
        border-color: #CBCCCA;
    }

    .business-service a:hover h3 {
        color: unset;
    }

    .business-service a:hover p .first-line {
        display: inline;
        font-weight: 300;
        color: unset;
    }

    .business-service a:hover p {
        color: unset;
        font-size: var(--font-16);
    }

    .business-service a:hover p br {
        display: block;
    }

    .business-service span {
        position: static;
        opacity: 1;
        visibility: unset;
        transform: unset;
        background: url(/static/kor/images/icon/look-icon-black.png) center right 0 no-repeat;
    }

    .bottom .business-service a figcaption {
        order: 2;
    }

    .business-service p {
        margin-bottom: 2.4rem;
        height: auto;
    }

    .bottom .business-service h3 {
        margin: 2.4rem 0 1.2rem;
    }

    /* history-section START */
    .history-section {
        padding-top: var(--mg-200);
    }

    .history-section .common-wrap {
        flex-direction: column;
        gap: unset;
    }

    .history-section .scrollX {
        padding: 0 0 4rem;
        top: 13rem;
        width: 100%;
        z-index: 9;
        transition: top 0.3s ease;
    }

    .navigater {
        display: flex;
        justify-content: space-between;
    }

    .navigater li a {
        font-size: 1.8rem;
        padding: 0 1.6rem;
        line-height: 5rem;
    }

    .navigater li:not(:last-child) {
        margin-bottom: unset;
    }

    .history-content-wrapper {
        padding: unset;
        flex: unset;
        width: 100%;
        padding-left: 3.4rem;
        padding-bottom: 10rem;
    }

    .history-title {
        margin-bottom: 4rem;
    }

    .text-box dl {
        margin-bottom: 4rem;
        flex-direction: column;
        border-top: unset;
        gap: 1.4rem;
    }

    .text-box dt {
        width: 100%;
        border-bottom: 1px solid #E5E5E3;
        padding-bottom: 1.2rem;
    }

}

@media screen and (max-width: 767px) {
    .sub-common-top.sub1 {
        background: url(/static/kor/images/intro/intro-visual-mob.jpg) no-repeat center/cover;
    }

    /* 기업소개 */
    #about-us {
        padding: 6.8rem 0 0;
    }

    #about-us .au-section1 {
        gap: 4rem;
    }

    #about-us .au-section1 figure {
        flex: unset;
        width: 100%;
        height: auto;
    }

    #about-us .au-section2 {
        margin: 8rem 0;
    }

    #about-us .au-section2 iframe {
        height: 18.4rem;
    }

    #about-us .au-section2 .script-box strong {
        margin: 0 1.6rem;
        padding: 2rem 0;
    }

    #about-us .au-section2 .script-box .scroll-padding {
        padding-right: 0.4rem;
    }

    #about-us .au-section2 .script-box p {
        padding-top: 2rem;
        padding-left: 1.6rem;
        height: 23.2rem;
    }

    /* 식자재 수급 ~ 고객식탁 */
    .au-section3 dd {
        width: 100%;
    }

    .au-section3 .top dd .business-service a {
        margin: unset;
    }

    .au-section3 dd .business-service a,
    .au-section3 dl:nth-child(1) dd .business-service a,
    .au-section3 dl:nth-child(2) dt .business-service a {
        width: 100%;
    }

    .bottom .business-service a {
        min-height: 29.1rem;
    }

    .bottom .business-service p {
        margin-bottom: unset;
    }

    .au-section3 dt .dt-wrap,
    .au-section3 dd .dt-wrap {
        width: 61.6rem;
        gap: .8rem;
    }

    .bottom .business-service h3,
    .business-service h3 {
        margin: 1.6rem 0 .8rem;
    }

    .business-service a {
        min-height: auto;
        padding: 1.6rem 1.6rem 2rem 1.6rem;
    }

    .business-service a figure {
        height: 13.4rem;
    }

    .business-service span {
        background-size: 6px;
        padding-right: 1.6rem;
    }

    .au-section3 .scrollX::-webkit-scrollbar-track {
        border-left: 1.6rem solid #fff;
        border-right: 1.6rem solid #fff;
    }

    .au-section3 .scrollX::-webkit-scrollbar-thumb {
        border-left: 1.6rem solid transparent;
        border-right: 1.6rem solid transparent;
    }

    .business-service p {
        height: auto;
        margin-bottom: 1.6rem;
    }

    .middle-item .business-service {
        width: 30.4rem;
        margin: 0 var(--space-40);
    }

    /* 주요 연혁 */
    .text-box dd .line-text:not(:last-child) {
        margin-bottom: .8rem;
        align-items: flex-start;
    }

    .text-box dd .line-text {
        gap: 1rem;
    }

    .navigater {
        justify-content: center;
        gap: .8rem;
    }

    .navigater li a {
        font-size: 1.2rem;
        line-height: 3.2rem;
    }

    .text-box dl {
        padding-top: unset;
    }
}

@media screen and (max-width: 580px) {
    .sticky-wrap .diagram-img img.diagram-mob {
        height: auto;
        object-fit: cover;
    }

    .history-section .scrollX {
        display: none;
        padding: 0 3rem 4rem 1.6rem;
    }

    .navigater {
        justify-content: flex-start !important;
    }

    .navigater li {
        width: auto !important;
    }

    .history-section .scrollX::-webkit-scrollbar {
        width: 0;
    }

    .history-section .scrollX::-webkit-scrollbar-thumb {
        background: unset;
        /* 스크롤바 색상 */
    }

    .history-section .scrollX::-webkit-scrollbar-track {
        background: unset;
        /*스크롤바 뒷 배경 색상*/
    }
}