.page_head.company { background-image: url('../../img/head/bg_head_company_history.jpg'); } 

#history_section_1 { padding: 100px 0 50px 0; } 
#history_section_1 .small_text { margin-bottom: 16px; color: #000; text-align: center; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%; } 
#history_section_1 .section_title { margin-bottom: 24px; color: #000; text-align: center; font-family: Roboto; font-size: 48px; font-style: normal; font-weight: 700; line-height: 120%; } 
#history_section_1 .sub_text { margin-bottom: 124px; color: #000; text-align: center; font-family: Noto Sans CJK KR; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; } 

#history_section_1 .history_map_height { height: 70px; }
#history_section_1 .history_map_wrap { position: relative; display: flex; justify-content: space-between; height: 70px; padding: 0 50px; } 
#history_section_1 .history_map_fixed.fixed { position: fixed; left: 0; top: 80px; width: 100%; padding-top: 20px; background: #FFF; box-shadow: 0 2px 4px #00000029; box-sizing: border-box; z-index: 10; } 
#history_section_1 .line { position: absolute; left: 0; top: 17px; width: 100%; height: 0; border-top: 3px solid #000; transition: width 0.2s ease, transform 0.2s ease; } 
#history_section_1 .line.active_line { width: 0; border-top-color: var(--main-green); z-index: 2; } 
#history_section_1 .item { position: relative; width: 60px; height: 70px; padding: 20px 0 0 0; font-size: 13px; text-align: center; box-sizing: border-box; cursor: pointer; } 
#history_section_1 .item::before { content: ''; position: absolute; left: 50%; top: 11px; display: inline-block; width: 15px; height: 15px; background: #000; border-radius: 50%; transform: translate3d(-50%, 0, 0); transition: background 0.17s ease; z-index: 5; } 
#history_section_1 .item.active::before { background: var(--main-green); }

#history_section_2 { padding: 80px 0; background: linear-gradient(0deg,#b7ff41,#b7ff41),#000006; } 
#history_section_2 .main_text { color: #111; font-family: Roboto; font-size: 55px; font-style: normal; font-weight: 800; line-height: 130%; } 
#history_section_2 .desc_text { margin-top: 23px; color: #000107; font-family: Pretendard; font-size: 17px; font-style: normal; font-weight: 400; line-height: 26px; } 
#history_section_3 .timeline_wrap { position: relative; margin: 50px 0; padding: 20px 0 100px; } 
#history_section_3 .timeline_wrap::before { content: ''; position: absolute; left: 10px; top: 0; display: block; width: 0; height: 100%; border-right: 2px solid #000; } 
#history_section_3 .timeline_box + .timeline_box { margin-top: 100px; } 
#history_section_3 .timeline_box .timeline_year_box { position: relative; padding-left: 40px; } 
#history_section_3 .timeline_box .timeline_year_box::before { content: ''; position: absolute; left: 11px; top: 15px; display: block; width: 15px; height: 15px; border: 3px solid #FFF; border-radius: 50%; background: #000; transform: translate3d(-50%, 0, 0); } 
#history_section_3 .timeline_box .card_box { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; margin-top: 26px; gap: 7px; } 
#history_section_3 .timeline_box .card_line { display: flex; justify-content: flex-start; align-items: flex-start; line-height: 28px; } 
#history_section_3 .timeline_box .card_line + .card_line { margin-top: 0.6em; }
#history_section_3 .timeline_box .main_text { color: #000; font-family: Roboto; font-size: 40px; font-style: normal; font-weight: 700; line-height: 120%; } 
#history_section_3 .timeline_box .sub_text { width: 80px; min-width: 80px; color: #000; font-family: Noto Sans KR; font-size: 20px; line-height: 28px; font-style: normal; font-weight: 700; } 
#history_section_3 .timeline_box .card_desc_list { list-style-type: disc; } 
#history_section_3 .timeline_box .tBold { font-weight: 700; } 

@media screen and (min-width: 1025px){
    #history_section_1 .item:hover::before { background: var(--main-green); } 
}
@media screen and (max-width: 1024px){
    #history_section_1 { padding: 50px 0 30px 0; } 
    #history_section_1 .small_text { margin-bottom: 11px; font-size: 12px; } 
    #history_section_1 .section_title { margin-bottom: 17px; font-size: 34px; } 
    #history_section_1 .sub_text { margin-bottom: 87px; font-size: 13px; } 
    #history_section_1 .history_map_wrap { height: 49px; padding: 0 35px; } 
    #history_section_1 .history_map_fixed.fixed { top: 50px; }
    #history_section_1 .line { top: 12px; height: 0; border-top-width: 2px; } 
    #history_section_1 .item { width: 42px; height: 49px; padding: 14px 0 0 0; font-size: 12px; } 
    #history_section_1 .item::before { top: 8px; width: 11px; height: 11px; } 
    #history_section_2 { padding: 50px 0; } 
    #history_section_2 .main_text { font-size: 39px; } 
    #history_section_2 .desc_text { margin-top: 16px; font-size: 12px; line-height: 18px; } 
    #history_section_3 .timeline_wrap { margin: 35px 0; padding: 14px 0 70px; } 
    #history_section_3 .timeline_wrap::before { left: 7px; border-right-width: 1px; } 
    #history_section_3 .timeline_box + .timeline_box { margin-top: 70px; } 
    #history_section_3 .timeline_box .timeline_year_box { padding-left: 28px; } 
    #history_section_3 .timeline_box .timeline_year_box::before { left: 8px; top: 11px; width: 11px; height: 11px; border-width: 2px; } 
    #history_section_3 .timeline_box .card_box { margin-top: 18px; } 
    #history_section_3 .timeline_box .card_line { line-height: 24px; } 
    #history_section_3 .timeline_box .card_line + .card_line { margin-top: 5px; }
    #history_section_3 .timeline_box .main_text { font-size: 28px; } 
    #history_section_3 .timeline_box .sub_text { width: 56px; min-width: 56px; font-size: 14px; line-height: 24px; } 
 }