/* about */
#about-page { position: relative; }
#about-page .about-top { position: relative; width: 100%; background: var(--color-deepblue); color: var(--color-white); padding: 150px 30px 100px; text-align: center; display: flex; flex-direction: column; gap: 16px 0; }
#about-page .about-top img { margin: 0 auto 24px; width: 100%; padding: 0 30px; max-width: 1080px; }
#about-page .about-top p.page-desc { opacity: 0.9; }

#about-page .about-bottom { display: flex; flex-direction: column; gap: 80px 0; max-width: 1320px; margin: 60px auto 160px; }
#about-page .about-bottom .about-hitory-box { display: flex; align-items: center; }
#about-page .about-bottom .about-hitory-box .about-hitory-box-left { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; padding: 0 60px; border-right: 1px solid var(--color-deepblue); min-height: 240px; width: 40%; }
#about-page .about-bottom .about-hitory-box .about-hitory-box-left .history-period { margin: 0 0 18px; color: var(--color-blue); }
#about-page .about-bottom .about-hitory-box .about-hitory-box-right { display: flex; align-items: flex-start; flex-direction: column; text-align: left; padding: 0 60px; width: 60%; }
#about-page .about-bottom .about-hitory-box .about-hitory-box-right .history-desc-title { margin: 0 0 10px; }
#about-page .about-bottom .about-hitory-box .about-hitory-box-right .history-desc { opacity: 0.9; }

@media (max-width: 1024px) {
    #about-page .about-top { padding: 130px 30px 80px; }
    #about-page .about-top img { padding: 0; width: 85%; max-width: 400px; }

    #about-page .about-bottom { margin: 40px auto 120px; padding: 0 30px; }
    #about-page .about-bottom .about-hitory-box { flex-direction: column; align-items: flex-start; gap: 24px 0; border-left: 1px solid var(--color-deepblue); padding: 0 0 0 20px; }
    #about-page .about-bottom .about-hitory-box .about-hitory-box-left { border-right: 0; width: 100%; padding: 0; min-height: 0; text-align: left; align-items: flex-start; }
    #about-page .about-bottom .about-hitory-box .about-hitory-box-left .history-period { margin: 0 0 12px; }
    #about-page .about-bottom .about-hitory-box .about-hitory-box-right { padding: 0; width: 100%; }
    #about-page .about-bottom .about-hitory-box .about-hitory-box-right .history-desc-title { margin: 0 0 20px; }
}