.education-page { width: 1440px; margin: 0 auto; background: #ffffff; color: #17243a; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Arial, sans-serif; }
.education-shell { width: 1180px; margin: 0 auto; }
.education-hero { position: relative; overflow: hidden; background: #07135d; }
.education-hero:after { position: absolute; top: -80px; right: 6%; width: 400px; height: 400px; border: 42px solid rgba(0,165,170,.25); border-radius: 50%; content: ""; }
.education-hero .education-shell { position: relative; z-index: 1; box-sizing: border-box; min-height: 292px; padding: 64px 0 57px; color: #ffffff; }
.education-hero p, .education-label { margin: 0 0 12px; color: #008d94; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
.education-hero p { color: #83d3d1; }.education-hero h1 { max-width: 790px; margin: 0 0 17px; color: #ffffff; font-size: 43px; line-height: 54px; }.education-hero div { max-width: 760px; color: #e7f2f6; font-size: 18px; line-height: 31px; word-break: keep-all; }
.education-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; padding: 58px 0 76px; }.education-nav { align-self: start; border-top: 4px solid #008d94; background: #07135d; }.education-nav > p { margin: 25px 24px 5px; color: #83d3d1; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1px; }.education-nav h2 { margin: 0 24px 20px; color: #ffffff; font-size: 25px; line-height: 34px; }.education-nav a { display: block; box-sizing: border-box; min-height: 51px; padding: 13px 24px; border-top: 1px solid #33417e; color: #ffffff; font-size: 15px; font-weight: bold; line-height: 23px; text-decoration: none; word-break: keep-all; }.education-nav a:hover, .education-nav a:focus, .education-nav .is-current { background: #008d94; }
.education-content { min-width: 0; }.education-content h2 { margin: 0 0 16px; color: #07135d; font-size: 30px; line-height: 40px; word-break: keep-all; }.education-content p { margin: 0; color: #415064; font-size: 16px; line-height: 29px; word-break: keep-all; }.education-lead { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 42px; align-items: center; margin-bottom: 54px; padding-bottom: 45px; border-bottom: 1px solid #d6e0e7; }.education-lead figure { margin: 0; border: 1px solid #c7dadd; background: #f7f9fb; }.education-lead img { display: block; width: 100%; height: 230px; object-fit: cover; }.education-lead figcaption { padding: 10px 13px; color: #53687a; font-size: 12px; line-height: 18px; }.education-section { margin: 0 0 46px; }.education-section-tint { box-sizing: border-box; padding: 31px 34px; border-left: 5px solid #008d94; background: #f3faf9; }.education-section .education-label { color: #ff8500; }
.education-contact { display: flex; gap: 30px; align-items: center; justify-content: space-between; padding: 34px 36px; background: #07135d; }.education-contact p { margin: 0 0 10px; color: #83d3d1; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1px; }.education-contact h2 { margin: 0 0 10px; color: #ffffff; font-size: 27px; line-height: 37px; }.education-contact span { color: #e7f2f6; font-size: 15px; line-height: 24px; word-break: keep-all; }.education-contact a { flex: 0 0 auto; padding: 15px 22px; background: #ff8500; color: #ffffff; font-size: 16px; font-weight: bold; line-height: 22px; text-decoration: none; }.education-contact a:hover, .education-contact a:focus { background: #e57400; }
.education-install-journey { position: relative; overflow: hidden; min-height: 500px; margin: -14px 0 54px; background: #07135d; }.education-install-journey-photo { position: absolute; inset: 0; }.education-install-journey-photo:after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,19,93,.96) 0%, rgba(7,19,93,.78) 47%, rgba(7,19,93,.24) 100%); content: ""; }.education-install-journey-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }.education-install-journey-overlay { position: relative; z-index: 1; box-sizing: border-box; max-width: 650px; padding: 38px 42px 35px; }.education-install-journey .education-label { color: #83d3d1; }.education-install-journey h2 { margin-bottom: 12px; color: #ffffff; font-size: 29px; line-height: 39px; }.education-install-journey-overlay > p:last-of-type { color: #e7f2f6; font-size: 15px; line-height: 25px; }.education-install-steps { display: grid; gap: 7px; margin: 28px 0 0; padding: 0; list-style: none; }.education-install-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; min-height: 50px; padding: 10px 13px; border-left: 3px solid rgba(131,211,209,.45); background: rgba(3,11,50,.62); color: #ffffff; opacity: .42; transform: translateX(-8px); animation: educationInstallStep 15s infinite; }.education-install-steps li:nth-child(2) { animation-delay: 3s; }.education-install-steps li:nth-child(3) { animation-delay: 6s; }.education-install-steps li:nth-child(4) { animation-delay: 9s; }.education-install-steps li:nth-child(5) { animation-delay: 12s; }.education-install-steps b { grid-row: span 2; color: #ff9c33; font-family: Arial, sans-serif; font-size: 15px; line-height: 21px; }.education-install-steps strong { font-size: 15px; line-height: 21px; word-break: keep-all; }.education-install-steps span { color: #d8e7ed; font-size: 13px; line-height: 19px; word-break: keep-all; }.education-install-steps li:last-child { border-left-color: #ff8500; }.education-install-steps li:last-child b { color: #ffb44f; }@keyframes educationInstallStep { 0%, 13%, 100% { opacity: .42; transform: translateX(-8px); } 18%, 31% { border-left-color: #ff8500; background: rgba(0,141,148,.72); box-shadow: 0 0 0 1px rgba(131,211,209,.4); opacity: 1; transform: translateX(0); } 36% { opacity: .7; transform: translateX(0); } }
.education-landing-content { padding: 59px 0 76px; }.education-landing-heading { max-width: 760px; margin-bottom: 31px; }.education-landing-heading p { margin: 0 0 10px; color: #008d94; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1px; }.education-landing-heading h2 { margin: 0 0 14px; color: #07135d; font-size: 32px; line-height: 42px; word-break: keep-all; }.education-landing-heading span { color: #53687a; font-size: 16px; line-height: 27px; word-break: keep-all; }.education-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 58px; border-top: 4px solid #008d94; }.education-card-grid a { position: relative; box-sizing: border-box; min-height: 168px; padding: 28px 34px; border-right: 1px solid #d6e0e7; border-bottom: 1px solid #d6e0e7; border-left: 1px solid #d6e0e7; background: #ffffff; color: #07135d; text-decoration: none; }.education-card-grid a:nth-child(even) { border-left: 0; }.education-card-grid a:hover, .education-card-grid a:focus { background: #f3faf9; }.education-card-grid b { display: block; margin-bottom: 13px; color: #ff8500; font-family: Arial, sans-serif; font-size: 13px; letter-spacing: 1px; }.education-card-grid strong { display: block; margin-bottom: 9px; font-size: 21px; line-height: 29px; word-break: keep-all; }.education-card-grid span { display: block; max-width: 360px; color: #53687a; font-size: 15px; line-height: 24px; word-break: keep-all; }
@media screen and (max-width: 899px) { .education-page { width: 100% !important; }.education-shell { box-sizing: border-box; width: auto; margin: 0; }.education-hero .education-shell { min-height: 0; padding: 56px 20px 50px; }.education-hero:after { top: -45px; right: -160px; }.education-hero h1 { font-size: 32px; line-height: 42px; }.education-hero div { font-size: 16px; line-height: 28px; }.education-layout { display: block; padding: 36px 20px 48px; }.education-nav { margin-bottom: 38px; }.education-nav h2 { font-size: 23px; }.education-lead { grid-template-columns: 1fr; gap: 27px; margin-bottom: 41px; padding-bottom: 34px; }.education-lead img { height: auto; max-height: 300px; }.education-content h2 { font-size: 26px; line-height: 35px; }.education-content p { font-size: 16px; line-height: 28px; }.education-section { margin-bottom: 40px; }.education-section-tint { padding: 26px 22px; }.education-contact { display: block; padding: 28px 24px; }.education-contact a { display: inline-block; margin-top: 20px; } }
@media screen and (max-width: 899px) { .education-landing-content { padding: 38px 20px 48px; }.education-landing-heading h2 { font-size: 27px; line-height: 36px; }.education-card-grid { grid-template-columns: 1fr; margin-bottom: 42px; }.education-card-grid a, .education-card-grid a:nth-child(even) { min-height: 0; padding: 23px 22px; border-right: 1px solid #d6e0e7; border-left: 1px solid #d6e0e7; }.education-card-grid strong { font-size: 19px; line-height: 27px; } }
@media screen and (max-width: 899px) { .education-install-journey { min-height: 0; margin: -8px 0 41px; }.education-install-journey-photo { position: relative; height: 224px; }.education-install-journey-photo:after { background: linear-gradient(0deg, rgba(7,19,93,.9), rgba(7,19,93,.08)); }.education-install-journey-overlay { max-width: none; padding: 27px 22px 28px; }.education-install-journey h2 { font-size: 25px; line-height: 34px; }.education-install-steps { margin-top: 23px; }.education-install-steps li { min-height: 58px; } }
@media (prefers-reduced-motion: reduce) { .education-install-steps li { animation: none; opacity: 1; transform: none; }.education-install-steps li:nth-child(4) { border-left-color: #ff8500; background: rgba(0,141,148,.72); } }

/* Keep the installation story readable while preserving the technician scene at full clarity. */
.education-install-journey { display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 48%); min-height: 510px; background: #07135d; }
.education-install-journey-photo { position: relative; inset: auto; grid-column: 2; grid-row: 1; min-height: 510px; }
.education-install-journey-photo:after { background: linear-gradient(0deg, rgba(7,19,93,.32), rgba(7,19,93,0) 48%); }
.education-install-journey-photo .education-install-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; animation-duration: 12.5s; animation-iteration-count: infinite; }
.education-install-frame-1 { animation-name: educationInstallFrame1; }
.education-install-frame-2 { animation-name: educationInstallFrame2; }
.education-install-frame-3 { animation-name: educationInstallFrame3; }
.education-install-frame-4 { animation-name: educationInstallFrame4; }
.education-install-frame-5 { animation-name: educationInstallFrame5; }
.education-install-journey-overlay { grid-column: 1; grid-row: 1; max-width: none; padding: 38px 34px 34px; }
.education-install-journey h2 { max-width: 460px; }
.education-install-journey-overlay > p:last-of-type { max-width: 480px; }
.education-install-steps { max-width: 500px; gap: 6px; margin-top: 25px; }
.education-install-steps li { min-height: 46px; padding: 9px 11px; background: rgba(2, 10, 46, .8); animation-duration: 12.5s; animation-delay: 0s; }
.education-install-steps li:nth-child(1) { animation-name: educationInstallStep1; animation-delay: 0s; }
.education-install-steps li:nth-child(2) { animation-name: educationInstallStep2; animation-delay: 0s; }
.education-install-steps li:nth-child(3) { animation-name: educationInstallStep3; animation-delay: 0s; }
.education-install-steps li:nth-child(4) { animation-name: educationInstallStep4; animation-delay: 0s; }
.education-install-steps li:nth-child(5) { animation-name: educationInstallStep5; animation-delay: 0s; }
@keyframes educationInstallFrame1 { 0%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes educationInstallFrame2 { 0%, 18% { opacity: 0; } 20%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes educationInstallFrame3 { 0%, 38% { opacity: 0; } 40%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes educationInstallFrame4 { 0%, 58% { opacity: 0; } 60%, 78% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes educationInstallFrame5 { 0%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes educationInstallStep1 { 0%, 18% { border-left-color: #ff8500; background: rgba(0,141,148,.72); box-shadow: 0 0 0 1px rgba(131,211,209,.4); opacity: 1; transform: translateX(0); } 20%, 100% { opacity: .42; transform: translateX(-8px); } }
@keyframes educationInstallStep2 { 0%, 18% { opacity: .42; transform: translateX(-8px); } 20%, 38% { border-left-color: #ff8500; background: rgba(0,141,148,.72); box-shadow: 0 0 0 1px rgba(131,211,209,.4); opacity: 1; transform: translateX(0); } 40%, 100% { opacity: .42; transform: translateX(-8px); } }
@keyframes educationInstallStep3 { 0%, 38% { opacity: .42; transform: translateX(-8px); } 40%, 58% { border-left-color: #ff8500; background: rgba(0,141,148,.72); box-shadow: 0 0 0 1px rgba(131,211,209,.4); opacity: 1; transform: translateX(0); } 60%, 100% { opacity: .42; transform: translateX(-8px); } }
@keyframes educationInstallStep4 { 0%, 58% { opacity: .42; transform: translateX(-8px); } 60%, 78% { border-left-color: #ff8500; background: rgba(0,141,148,.72); box-shadow: 0 0 0 1px rgba(131,211,209,.4); opacity: 1; transform: translateX(0); } 80%, 100% { opacity: .42; transform: translateX(-8px); } }
@keyframes educationInstallStep5 { 0%, 78% { opacity: .42; transform: translateX(-8px); } 80%, 100% { border-left-color: #ff8500; background: rgba(0,141,148,.72); box-shadow: 0 0 0 1px rgba(131,211,209,.4); opacity: 1; transform: translateX(0); } }
@media screen and (max-width: 899px) { .education-install-journey { display: flex; flex-direction: column; }.education-install-journey-photo { order: 1; min-height: 235px; height: 235px; }.education-install-journey-overlay { order: 2; padding: 28px 22px; }.education-install-journey-photo img { object-position: 68% center; } }
@media (prefers-reduced-motion: reduce) { .education-install-journey-photo .education-install-frame { animation: none; opacity: 0; }.education-install-journey-photo .education-install-frame-1 { opacity: 1; }.education-install-steps li { animation: none; } }

.education-page-4 .education-lead img { object-fit: contain; object-position: center; background: #ffffff; }

.education-page-7 .education-lead img { object-fit: contain; object-position: center; background: #ffffff; }

.education-page-8 .education-lead img { object-fit: contain; object-position: center; background: #ffffff; }