@charset "utf-8";

/* =========================== SUB (��� ���־� ����) */
#shSub {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    margin: 0 auto;
    background: url(../img/sub/company1_bg.jpg) center no-repeat;
    background-size: cover;
}
#shSub .txt_area {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--k-font);
}
#shSub .txt_area p {
    margin-bottom: 20px;
    font-size: 46px;
    font-weight: 700;
}
#shSub .txt_area div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}
#shSub .txt_area div a { padding-top: 3px }
#shSub .txt_area div svg { fill: #fff }
#shSub .txt_area div i {
    margin: 0 20px;
    font-size: 14px;
}
#shSub .sub_tit { display: none }

/* =========================== SNB (���� �޴�) */
#shSnb {
    display: flex;
    justify-content: center;
    margin: 0 auto 50px;
    background: #3ec890;
}
#shSnb li+li {
    border-left: 1px solid rgba(255, 255, 255, .15);
}
#shSnb li a {
    display: block;
    min-width: 160px;
    height: 62px;
    padding: 0 20px;
    font-size: 17px;
    font-weight: 500;
    line-height: 62px;
    text-align: center;
    color: #fff;
    font-family: var(--k-font);
}
#shSnb li.on a {
    font-weight: 600;
    color: #3ec890;
    background: #fff;
}

/* =========================== PAGE COMMON & VARS */
:root {
    --primary: #3ec890;
    --primary-20: rgba(62, 200, 144, .2);
    --second: #102e48;
    --mainsize: 1460px;
    --enfont: 'Wix Madefor Display';
    --k-font: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.pagecommon {
    font-size: 18px;
    color: #777;
    line-height: 1.65;
    font-family: var(--k-font);
}
.pagecommon .br { white-space: pre-line; }
#history1003 { overflow: hidden; }

/* =========================== HISTORY CONTENT */
#history1003 .cont {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    position: relative;
    max-width: var(--mainsize);
    margin: 0 auto;
}

/* --- SINCE (���� ���� ����) --- */
#history1003 .cont .since {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 180px;
    font-size: 20px;
    font-weight: 500;
    color: #111;
    max-width: 400px;
}
#history1003 .cont .since span {
    padding-left: 2px;
    font-weight: 800;
    font-family: var(--enfont);
}
#history1003 .cont .since p {
    margin: 5px 0 30px;
    font-size: 67px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
    font-family: var(--enfont);
}
#history1003 .cont .since p b { color: var(--primary); }

/* SINCE 스크롤 고정 클래스 */
#history1003 .cont .since.fix {
    position: fixed !important;
    top: 100px !important;
    left: 50% !important;
    transform: translateX(-730px) !important;
    width: 400px !important;
}
#history1003 .cont .since.absol_bt {
    position: absolute !important;
    top: auto !important;
    bottom: 280px !important;
    left: 0 !important;
    transform: none !important;
}

/* --- HISTORY LIST (���� ���� ����Ʈ) --- */
#history1003 .history {
    position: relative;
    width: 66%;
    padding: 260px 0;
}
#history1003 .history:before {
    display: block;
    content: "";
    position: absolute;
    left: 143px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #e1e1e1;
}
#history1003 .history dl {
    display: flex;
    align-items: flex-start;
    opacity: .3;
}
#history1003 .history dl+dl { margin-top: 200px; }

#history1003 .history dl dt {
    position: relative;
    flex-shrink: 0;
    width: 155px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.5px;
    color: #111;
    transition: all .3s;
    font-family: var(--enfont);
}

/* ���� ����Ʈ (image_487ba1.png ��Ÿ��) */
#history1003 .history dl dt span {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    transition: all .3s;
    border: 1px solid #e1e1e1; /* �⺻ �׵θ� */
}
#history1003 .history dl dt span:after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #111;
    transition: all .3s;
}

#history1003 .history dl dd {
    padding: 0 30px 0 12%;
    transform: translateX(10px);
    transition: all .6s;
    flex-grow: 1;
}

/* �� �߰�: ���� �� ���� �׸� ��Ÿ�� (���� �� ���� ��) */
#history1003 .history dl dd .hist_item {
    position: relative;
    padding-left: 22px; /* ���� ���� �� ���� */
    margin-bottom: 20px; /* �׸� �� ���� */
}
#history1003 .history dl dd .hist_item:last-child { margin-bottom: 0; }

#history1003 .history dl dd .hist_item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px; /* �ؽ�Ʈ ���̿� ���� */
    width: 5px;
    height: 5px;
    background: #ccc;
    border-radius: 50%;
    transition: all .3s;
}

#history1003 .history dl dd .hist_item p {
    font-size: 20px; /* ���� �׸��� �� ��Ʈ ũ�� ��¦ ���� */
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    word-break: keep-all;
    margin-bottom: 0;
}

/* --- Ȱ��ȭ ���� (AOS) --- */
#history1003 .history dl.aos-animate { opacity: 1; }
#history1003 .history dl.aos-animate dt { color: var(--primary); }

#history1003 .history dl.aos-animate dt span {
    background: rgba(62, 200, 144, 0.2);
    border: none;
}
#history1003 .history dl.aos-animate dt span:after {
    background: var(--primary);
    width: 10px;
    height: 10px;
}
#history1003 .history dl.aos-animate dd { transform: translateX(0); }
#history1003 .history dl.aos-animate dd .hist_item:before {
    background: var(--primary); /* Ȱ��ȭ �� ���� ���� �ʷϻ����� */
}

/* =========================== BOTTOM AREA */
#history1003 .btm_area {
    position: relative;
    display: flex;
    align-items: center;
    height: 400px;
    padding: 0 100px;
    background: url(../img/sub/history1003_btm_bg.jpg) center no-repeat;
    background-size: cover;
    background-position: center;
	border-radius: 10px;   /* ���ϴ� ��ŭ ���� */
    overflow: hidden;
}

/* ��� �������� ������ ���̾� */
#history1003 .btm_area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35); /* �� ���ڷ� ���� */
    z-index: 0;
}

#history1003 .btm_area .txt {
    width: 100%;
    max-width: var(--mainsize);
    margin: 0 auto;
    font-size: 18px;
    color: rgba(255, 255, 255, .6);
}
#history1003 .btm_area .txt p {
    margin-bottom: 50px;
    font-size: 35px;
    font-weight: 100;
    color: #fff;
    line-height: 1.25;
}
#history1003 .btm_area .txt p b { font-weight: 700; }
#history1003 .btm_area .txt a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 232px;
    height: 60px;
    border-radius: 35px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .25);
    transition: background .3s;
}
#history1003 .btm_area .txt a:hover { background: var(--primary); }

/* To Top Button */
#history1003 .btm_area .to_top {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
}
#history1003 .btm_area .to_top svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    stroke-width: 2;
}
#history1003 .btm_area .to_top:hover {
    background: var(--primary);
    transform: translateY(-5px);
}

/* =========================== RESPONSIVE (������) */
@media (max-width:1460px) {
    #shSub { height: 350px }
    #history1003 .cont .since.fix { left: 50px !important; transform: none !important; }
    #history1003 .cont .since { left: 50px }
}

@media (max-width:1024px) {
    #shSnb { display: none }
    #history1003 .cont .since { left: 30px; padding-top: 100px; }
    #history1003 .cont .since p { font-size: 56px }
    #history1003 .history { width: 62%; }
    #history1003 .history dl dd .hist_item p { font-size: 22px; }
}

@media (max-width:768px) {
    #shSub { height: 150px; background-size: cover; background-position: center; }
    #shSub .txt_area p { font-size: 18px; color: #fff; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
    #shSub .txt_area div { display: none }

    #history1003 .cont { display: block }
    #history1003 .cont .since { position: relative !important; left: auto !important; padding: 60px 20px; }
    /* 모바일: 스크롤 시 since 숨김 (맨 상단에서만 표시) */
    #history1003 .cont .since.fix,
    #history1003 .cont .since.absol_bt {
        display: none !important;
    }
    #history1003 .history { width: 100%; padding: 20px; }
    #history1003 .history:before { left: 118px }
    #history1003 .history dl dt { width: 110px; font-size: 28px }
    #history1003 .history dl dd { padding: 0 10px 0 5%; }
    #history1003 .history dl dd .hist_item p { font-size: 14px; }
    #history1003 .history dl+dl { margin-top: 50px; }

    /* 하단 영역 모바일 */
    #history1003 .btm_area {
        height: auto;
        min-height: 280px;
        padding: 40px 20px;
        margin: 20px 15px;
        border-radius: 10px;
    }
    #history1003 .btm_area .txt {
        text-align: center;
    }
    #history1003 .btm_area .txt p {
        font-size: 20px;
        margin-bottom: 25px;
        line-height: 1.4;
    }
    #history1003 .btm_area .txt a {
        width: 200px;
        height: 50px;
        font-size: 14px;
        margin: 0 auto;
    }
    #history1003 .btm_area .to_top {
        position: absolute;
        right: 15px;
        bottom: 15px;
        width: 40px;
        height: 40px;
    }
}