/* ===============================
   Page Header (브레드크럼브 & 상단 타이틀)
   =============================== */
.page-header {
    padding-top: 6rem;
}
.page-header .wrapper {
    padding: 4rem 2rem 0 2rem;
}
.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.breadcrumb .icon-home {
    width: 1.4rem;
    height: 1.4rem;
    stroke: #333333;
    stroke-width: 2;
    margin-bottom: -0.2rem;
}
.breadcrumb-parent-menu,
.breadcrumb-main-menu {
    position: relative;
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding-left: 2rem;
    font-weight: 600;
}
.breadcrumb-parent-menu:before,
.breadcrumb-main-menu:before {
    content: '';
    display: block;
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    background-color: #333333;
    border-radius: 50%;
    top: 50%;
    left: 0.8rem;
    transform: translateY(-50%);
}
.breadcrumb-main-menu {
    background: linear-gradient(45deg, #4871e5, #00baba);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-title {
    font-size: 2.4rem;
    line-height: 3.4rem;
    font-weight: 700;
    margin-bottom: 3.2rem;
}
.page-thumbnail {
    height: 24rem;
    width: 100%;
    background-image: url(../../../assets/images/company/bg_topBanner.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* ===============================
   Overview (개요)
   =============================== */
.section-overview .wrapper {
    padding: 6rem 4rem 0 4rem;
}
.section-title {
    width: fit-content;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, #4871e5, #00baba);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*margin: 0 auto 1rem;*/
    margin-bottom: 1.2rem;
}
.section-heading {
    font-size: 2.2rem;
    line-height: 2.8rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 2rem;
}
.section-text {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2.3rem;
    color: #333333;
    word-break: keep-all;
    text-align: left;
}
.section-text br {
    display: none;
}

/* ===============================
   History (연혁)
   =============================== */
.section-history .wrapper {
    padding: 6rem 4rem 0 4rem;
}
.history-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}
/* 타임라인 바 */
.timeline-bar {
    position: relative;
    height: 2.4rem;
    margin-bottom: 0.6rem;
}
.timeline-gradient {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.4rem;
    background: linear-gradient(45deg, #4871e5, #00baba);
    transform: translateY(-50%);
}
.timeline-circle {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.4rem;
    height: 1.4rem;
    transform: translate(-50%, -50%);
    background-color: #7293ef;
    border-radius: 50%;
    z-index: 2;
    transition: transform 0.5s ease;
    box-shadow: 4px 4px 4px rgba(255, 255, 255, 0.9);
}
/* 슬라이더 내부 */
.history-slider {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}
.history-slide {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
}
.history-slide-year {
    width: fit-content;
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}
.primary-year {
    color: #4871e5;
}
.secondary-year {
    color: #00baba;
}
.history-slide-items {
    background-color: rgba(238, 238, 238, 0.4);
    padding: 1.6rem 2rem;
}
.history-event {
    display: flex;
    flex-direction: row; /* 기본값: 가로 정렬 */
    align-items: flex-start; /* 내부 요소들을 위로 정렬 */
    gap: 2rem;
    color: #333333;
    margin-bottom: 0.8rem;
}
.history-event-month {
    font-size: 1.7rem;
    font-weight: 700;
}
.history-event-text {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.2rem;
}
/* 슬라이더 버튼 */
.history-slider-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}
.history-slider-controls button {
    border: none;
    pointer-events: auto;
    cursor: pointer;
    width : 4rem;
    height: 4rem;
    position: relative;
    background-color: transparent;
}
.history-btn-left,
.history-btn-right {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    stroke: #333333;
    width: 4rem;
    height: 4rem;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
}

/* ===============================
   award (수상내역)
   =============================== */
.section-awards .wrapper {
    padding: 6rem 4rem 0 4rem;
}
/* award, certification 공통 */
/* 공통 슬라이더 트랙 스타일 */
.awards-slider-container,
.certification-slider-container {
    position: relative;
    overflow: hidden;
}
.awards-slider-track,
.certification-slider-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.5s ease;
}
/* 각 슬라이드 기본값 (모바일: 1개씩) */
.awards-slide,
.certification-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    /*border: 1px solid #eeeeee;*/
    height: 30rem;
}
/* 이미지 */
.awards-image,
.certification-image {
    display: block;
    width: auto;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
    margin: 0 auto;
}
/* 태블릿 이상: 2개씩 */
@media (min-width: 768px) {
    .awards-slide,
    .certification-slide {
        flex: 0 0 calc(50% - 1rem);
    }
}
/* 데스크탑 이상: 4개씩 */
@media (min-width: 1024px) {
    .awards-slide,
    .certification-slide {
        flex: 0 0 calc(25% - 1.5rem);
    }
}
/* 슬라이더 버튼 */
.awards-slider-controls,
.certification-slider-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}
.awards-slider-controls button,
.certification-slider-controls button {
    border: none;
    pointer-events: auto;
    cursor: pointer;
    width : 4rem;
    height: 4rem;
    position: relative;
    background-color: transparent;
}
.awards-btn-left,
.awards-btn-right,
.certification-btn-left,
.certification-btn-right {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    stroke: #333333;
    width: 4rem;
    height: 4rem;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
}

/* ===============================
   certification (인증내역)
   =============================== */
.section-certification .wrapper {
    padding: 6rem 4rem 8rem 4rem;
}

/* ===============================
   ceo's greeting
   =============================== */
.section-ceo-message .wrapper {
    padding: 6rem 4rem 8rem 4rem;
}
.ceo-photo {
    margin-bottom: 3.2rem;
}
.ceo-photo img {
    height: fit-content;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ceo-message {
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 500;
}
.ceo-message .text-bold {
    font-weight: 700;
}
.ceo-message .line-break {
    height: 1.4rem;
}
.ceo-signature {
    display: flex;
    justify-content: right;
    align-items: center;
}
.ceo-name-bold {
    font-weight: 700;
    margin-left: 1rem;
}
.sign {
    width: 10rem;
    margin-left: 2rem;
}
.sign img {
    width: 100%;
}

/* ===============================
   Responsive
   =============================== */
@media (min-width: 480px) {

}
@media (min-width: 768px) {
    .page-header .wrapper {
        padding: 5rem 4rem 0 4rem;
    }
    .breadcrumb {
        margin-bottom: 1.2rem;
    }
    .breadcrumb .icon-home {
        width: 1.6rem;
        height: 1.6rem;
    }
    .breadcrumb-parent-menu,
    .breadcrumb-main-menu {
        font-size: 1.6rem;
        line-height: 1.6rem;
        padding-left: 2.4rem;
    }
    .page-title {
        font-size: 2.8rem;
        line-height: 3.8rem;
        margin-bottom: 3.8rem;
    }
    .page-thumbnail {
        height: 28rem;
    }

    .section-overview .wrapper {
        padding: 6.8rem 4rem 0 4rem;
    }
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 1.4rem;
    }
    .section-heading {
        font-size: 2.4rem;
        line-height: 3rem;
        margin-bottom: 2.4rem;
    }

    .section-history .wrapper {
        padding: 7.2rem 4rem 0 4rem;
    }
    .history-slide-year {
        font-size: 3rem;
        margin-bottom: 1.2rem;
    }
    .history-slide {
        flex: 0 0 50%;
        min-width: 50%;
    }

    .section-awards .wrapper {
        padding: 7.2rem 4rem 0 4rem;
    }
    .awards-slide,
    .certification-slide {
        flex: 0 0 calc(50% - 1rem);
    }

    .section-certification .wrapper {
        padding: 7.2rem 4rem 9.2rem 4rem;
    }

    .section-ceo-message .wrapper {
        padding: 6.8rem 4rem 9.2rem 4rem;
    }
    .ceo-photo {
        margin-bottom: 5.2rem;
    }
    .ceo-message {
        padding: 0 2rem;
        font-size: 1.8rem;
        line-height: 2.6rem;
    }
    .ceo-message .line-break {
        height: 1.6rem;
    }
}

@media (min-width: 1024px) {
    .page-header {
        padding-top: 8rem;
    }
    .page-header .wrapper {
        padding: 6rem 4rem 0 4rem;
    }
    .breadcrumb {
        margin-bottom: 1.6rem;
    }
    .page-title {
        font-size: 3.6rem;
        line-height: 4.6rem;
        margin-bottom: 6rem;
    }
    .page-thumbnail {
        height: 36rem;
    }

    .section-overview .wrapper {
        padding: 11rem 4rem 0 4rem;
        display: flex;
    }
    .section-title {
        width: 22rem;
        font-size: 1.9rem;
        margin-bottom: unset;
    }
    .section-content {
        width: calc(100% - 22rem);
    }
    .section-heading {
        font-size: 3.2rem;
        line-height: 4.6rem;
        margin-bottom: 4rem;
    }
    .section-text {
        font-size: 1.9rem;
        line-height: 2.8rem;
    }

    .section-history .wrapper {
        padding: 11rem 4rem 0 4rem;
        display: flex;
    }
    .history-slide-year {
        font-size: 3.2rem;
        margin-bottom: 1.6rem;
    }
    .history-slide-items {
        padding: 2.4rem 2.8rem;
    }
    .history-event {
        margin-bottom: 1.2rem;
    }
    .history-event-month {
        font-size: 1.9rem;
    }
    .history-event-text {
        font-size: 1.7rem;
        line-height: 2.4rem;
    }

    .section-awards .wrapper {
        padding: 11rem 4rem 0 4rem;
        display: flex;
    }
    .awards-slide,
    .certification-slide {
        flex: 0 0 100%;
        box-sizing: border-box;
        /*border: 1px solid #eeeeee;*/
        height: 30rem;
    }
    .awards-slide,
    .certification-slide {
        flex: 0 0 calc(25% - 1.5rem);
    }
    /* 이미지 */
    .awards-image,
    .certification-image {
        width: 100%;
        height: auto;
    }
    .awards-slider-controls,
    .certification-slider-controls {
        top: 40%;
    }

    .section-certification .wrapper {
        padding: 11rem 4rem 13rem 4rem;
        display: flex;
    }

    .section-ceo-message .wrapper {
        display: flex;
        gap: 6rem;
        height: fit-content;
        padding: 11rem 4rem 13rem 4rem;
    }
    .ceo-photo {
        width: 72rem;
    }
    .ceo-message {
        position: relative;
        font-size: 2rem;
        line-height: 3rem;
        padding: 5rem 0 0 0;
    }
    .ceo-message .line-break {
        height: 2rem;
    }
    .ceo-signature {
        position: absolute;
        bottom: 0;
        right: 0;
    }

}

@media (min-width: 1280px) {
    .page-header .wrapper {
        max-width: 1320px;
        margin: 0 auto;
    }
    .page-title {
        font-size: 3.8rem;
        line-height: 4.8rem;
        margin-bottom: 7rem;
    }

    .section-overview .wrapper {
        padding: 12rem 4rem 0 4rem;
        max-width: 1320px;
        margin: 0 auto;
    }
    .section-heading {
        font-size: 3.4rem;
    }
    .section-text {
        font-size: 2rem;
        line-height: 3rem;
    }
    .section-text br {
        display: block;
    }

    .section-history .wrapper {
        padding: 12rem 4rem 0 4rem;
        max-width: 1320px;
        margin: 0 auto;
    }

    .section-awards .wrapper {
        padding: 12rem 4rem 0 4rem;
        max-width: 1320px;
        margin: 0 auto;
    }
    .awards-image,
    .certification-image {
        width: auto;
        height: 100%;
    }
    .awards-slider-controls,
    .certification-slider-controls {
        top: 50%;
    }
    .section-awards .section-heading,
    .section-certification .section-heading {
        margin-bottom: 6rem;
    }

    .section-certification .wrapper {
        padding: 12rem 4rem 14rem 4rem;
        max-width: 1320px;
        margin: 0 auto;
    }

    .section-ceo-message .wrapper {
        gap: 8rem;
        padding: 12rem 4rem 14rem 4rem;
        max-width: 1320px;
        margin: 0 auto;
    }
}