/* BASIC css start */
#footer :is(*){font-family: 'Jost','Noto Sans KR', sans-serif;}
#footer{background-color: #fff; margin-top: 50px; }
#footer .foot_inner{width: 1300px; margin: 0 auto;display: flex; justify-content: space-between;}
#footer .foot_top{background-color: #f8f8f8;}
#footer .foot_top .foot_inner{padding: 20px 0; align-items: center;}
#footer .foot_top .foot_inner .notice{}
#footer .foot_top .foot_inner .notice p{display: flex; gap: 20px;}
#footer .foot_top .foot_inner .notice p a{color: #999999; font-size: 15px; font-weight: 400;}
#footer .foot_top .foot_inner .notice p span{font-size: 14px; color: #000; font-weight: 700;display: flex; align-items: center; gap: 15px;}
#footer .foot_top .foot_inner .notice p span img{}
#footer .foot_top .foot_inner select{background-color: transparent; border: none; border-bottom: 1px solid #000; font-size: 14px; font-weight: 600;padding-right: 40px; }
#footer .foot_top .foot_inner select option{background-color: none; }
#footer .foot_middle{}
#footer .foot_middle .foot_inner{padding: 60px 0;}
#footer .foot_middle .foot_inner>div{}
#footer .foot_middle .foot_inner .f_m_left{display: flex; gap: 100px;}
#footer .foot_middle .foot_inner .f_m_left h4{font-size: 14px; color: #000; font-weight: 700; margin-bottom: 18px;}
#footer .foot_middle .foot_inner .f_m_left :is(li,a){font-family: 'Noto Sans KR', sans-serif;color: #ababab; font-size: 13px; font-weight: 400;margin-bottom: 3px;}
#footer .foot_middle .foot_inner .f_m_left>div{}
#footer .foot_middle .foot_inner .f_m_left .f1{}
#footer .foot_middle .foot_inner .f_m_left .f1 h5{font-size: 20px; color: #000; font-weight: 700;margin-bottom: 20px;}
#footer .foot_middle .foot_inner .f_m_left .f2{}
#footer .foot_middle .foot_inner .f_m_left .f3{}
#footer .foot_middle .foot_inner .f_m_left .f3 li{ display: inline-block; margin: 5px 3px 0 0}
#footer .foot_middle .foot_inner .f_m_right{}
#footer .foot_middle .foot_inner .f_m_right ul{}
#footer .foot_middle .foot_inner .f_m_right ul li{margin-bottom: 4px;}
#footer .foot_middle .foot_inner .f_m_right ul li a{border: 1px solid #cccccc; font-size: 11px; font-weight: 600;display: block; width: 100px; text-align: center; padding: 5px 0;}
#footer .foot_bottom{}
#footer .foot_bottom .foot_inner{border-top: 1px solid #eee;padding: 30px 0 90px;}
#footer .foot_bottom .foot_inner ul{display: flex; align-items: center; gap: 30px;}
#footer .foot_bottom .foot_inner ul.f_menu{}
#footer .foot_bottom .foot_inner ul.f_menu li{}
#footer .foot_bottom .foot_inner ul.f_menu li:nth-child(4)>a{color: #222;font-weight: 500;}
#footer .foot_bottom .foot_inner ul.f_menu li a{color: #999999; font-size: 14px;font-weight: 400;}
#footer .foot_bottom .foot_inner ul.f_icon{}
#footer .foot_bottom .foot_inner ul.f_icon li{}
#footer .foot_bottom .foot_inner ul.f_icon li a{display: flex; align-items: center; justify-content: center;}
#footer .foot_bottom .foot_inner ul.f_icon li a img{}


/* ===== COMPANY INFO 토글 스타일 ===== */

#footer .f3 h4 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}
#footer .f3 h4:hover {
    color: #555;
}

/* ▶ 닫힌 상태 → 펼쳐지면 90도 회전하여 ▼ */
#footer .f3 h4::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid #000;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-left: 10px;
    transition: transform 0.3s ease;
}
#footer .f3.active h4::after {
    transform: rotate(90deg);
}

/* ul 기본 숨김 */
#footer .f3 ul {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}

/* 토글 활성화 시 펼침 */
#footer .f3.active ul {
    max-height: 500px;
    opacity: 1;
    margin-top: 18px;
}
/* BASIC css end */