.page-about { color: #333333; background-color: #FFFFFF; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; line-height: 1.7; }
.page-about * , .page-about *::before, .page-about *::after { box-sizing: border-box; }
.page-about__hero-section { display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; padding: 10px 16px 0; }
.page-about__hero-image-wrapper { width: 100%; }
.page-about__hero-image { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 17 / 5; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.page-about__hero-content { text-align: center; margin: 32px 0; }
.page-about__hero-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.2; letter-spacing: 0.5px; color: #0477db; max-width: 800px; margin: 0 auto 16px; }
.page-about__hero-subtitle { font-size: 1rem; line-height: 1.8; color: #444444; max-width: 850px; margin: 0 auto 24px; }
.page-about__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; max-width: 100%; }
.page-about__btn { display: inline-block; max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; text-align: center; padding: 14px 34px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 1rem; transition: all 0.3s ease; border: 2px solid transparent; }
.page-about__btn--register { background: #EA7C07; color: #ffffff; }
.page-about__btn--register:hover { background: #d06a00; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(234,124,7,0.35); }
.page-about__btn--login { background: #26A9E0; color: #ffffff; }
.page-about__btn--login:hover { background: #1b8bdb; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(38,169,224,0.3); }
.page-about__btn--guide { background: #04B800; color: #ffffff; }
.page-about__btn--guide:hover { background: #039b00; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(4, 184, 0, 0.25); }
.page-about__intro-section, .page-about__logo-grid-section, .page-about__guide-section { max-width: 1200px; margin: 16px auto; padding: 40px 16px; }
.page-about__intro-wrapper { max-width: 900px; margin: 0 auto; text-align: center; }
.page-about__section-title { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.3; color: #0477db; margin: 0 0 16px; }
.page-about__section-desc { font-size: 1rem; line-height: 1.8; color: #444444; max-width: 850px; margin: 0 auto 32px; }
.page-about__intro-text { font-size: 1rem; line-height: 1.8; color: #444444; }
.page-about__logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; justify-items: center; margin: 32px auto; }
.page-about__logo-item { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 280px; background: #f8fcff; padding: 20px; border-radius: 16px; border: 1px solid #e1f0ff; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.page-about__logo-item:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(4,119,219,0.08); }
.page-about__logo-image { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; margin-bottom: 4px; }
.page-about__logo-title { font-size: 1.2rem; font-weight: 700; color: #222; margin: 0; }
.page-about__logo-desc { font-size: 0.88rem; line-height: 1.6; color: #666; text-align: center; }
.page-about__logo-cta { display: inline-block; max-width: 100%; overflow: hidden; white-space: normal; padding: 8px 24px; border-radius: 999px; background: #26A9E0; color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: transform 0.2s ease; }
.page-about__logo-cta:hover { background: #1f8bc8; transform: scale(1.05); }
.page-about__logo-item:nth-child(5) { grid-column: 2; }
.page-about__logo-item:nth-child(6) { grid-column: 3; }
.page-about__guide-wrapper { max-width: 100%; }
.page-about__guide-header { text-align: center; }
.page-about__guide-list { display: flex; flex-direction: column; gap: 40px; margin-top: 32px; }
.page-about__guide-item { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; padding: 24px; background: #f3f9fd; border-radius: 16px; border-left: 6px solid #26A9E0; }
.page-about__guide-figure { width: 100%; }
.page-about__guide-figure img { display: block; width: 100%; max-width: 800px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.page-about__guide-content { max-width: 100%; }
.page-about__guide-title { font-size: 1.4rem; font-weight: 700; color: #0477db; margin: 12px 0 8px; }
.page-about__guide-text { font-size: 0.97rem; color: #333; line-height: 1.8; }
.page-about__faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.page-about__faq-item { background: #fff; border: 1px solid #d7eafc; border-radius: 12px; }
.page-about__faq-question { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font-weight: 600; cursor: pointer; color: #111; font-size: 1rem; border-radius: 12px; }
.page-about__faq-question::-webkit-details-marker{display:none;}
.page-about__faq-toggle { flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8f3fc; color: #0477db; font-weight: 700; }
.page-about__faq-answer { padding: 0 16px 14px; color: #333; line-height: 1.7; }
.page-about__guide-cta { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 1024px) { .page-about__hero-image { aspect-ratio: 16 / 6; } .page-about__logo-grid { gap: 20px 16px; } }
@media (max-width: 768px) { .page-about__hero-section, .page-about__intro-section, .page-about__logo-grid-section, .page-about__guide-section { padding-left: 16px; padding-right: 16px; } .page-about__hero-image { width: 100%; max-width: 100%; height: auto; aspect-ratio: 2 / 1; } .page-about__hero-content { margin: 24px 0; } .page-about__hero-title { font-size: clamp(1.5rem, 5vw, 2rem); } .page-about__hero-subtitle { font-size: 0.95rem; } .page-about__hero-actions { flex-direction: column; align-items: stretch; gap: 12px; } .page-about__btn { display: block; width: 100%; max-width: 100%; white-space: normal; word-wrap: break-word; } .page-about__logo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .page-about__logo-item { max-width: 100%; padding: 16px; } .page-about__logo-item:nth-child(5), .page-about__logo-item:nth-child(6) { grid-column: auto; } .page-about__section-title { font-size: 1.5rem; } .page-about__guide-item { padding: 20px; grid-template-columns: 1fr; } .page-about__guide-figure, .page-about__guide-content { max-width: 100%; } .page-about__guide-title { font-size: 1.2rem; } .page-about img { max-width: 100% !important; height: auto !important; } .page-about { overflow-x: hidden; } }