@charset "utf-8";
.inner {max-width:1344px;}
.ico-wrap {display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:8px; background:linear-gradient(180deg,#FEF3C7 0%,#FCE7F3 100%);}
.ico-wrap.circle {border-radius:50%;}
.system-section {padding:140px 0; overflow: hidden;}
.system-title {text-align:center;}
.system-title .label {margin-inline:auto; padding:5px 14px; font-size:14px; font-weight:600; color:#0B1F45; background-color:#F0F3F9;}
.system-title h3 {font-family:'YeogiOttaeJalnanGothic'; margin-top:16px; font-size:36px; color:#1A1919;}
.system-title h3 strong {font-family:'YeogiOttaeJalnanGothic'; color:#FD9F4B;}
.system-title p {margin-top:16px; font-size:16px; color:#5C5C58;}
.system-hero-section {overflow:hidden; position:relative; padding: 100px 0; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.system-hero-section .inner {position:relative; max-width:1483px; display:flex; align-items:center; justify-content:space-between; gap:70px;}
.system-hero-text {flex:1;}
.system-hero-text .label {margin-bottom:30px; padding:6.5px 14px; font-size:14px; font-weight:600; color:#0B1F45; background-color:#fff; border-color:#F2F2F2;}
.system-hero-text .label::before {content:''; width:14px; height:14px; border-radius:50%; border:3px solid #C8E1FF; background-color:#2461E9;}
.system-hero-text h2 {word-break: keep-all; font-family:'YeogiOttaeJalnanGothic'; font-size:clamp(32px, 4vw, 50px); color:#1A1919;}
.system-hero-text h2 strong {font-family:'YeogiOttaeJalnanGothic'; color:#F2994A;}
.system-hero-text p {word-break: keep-all; margin-top:20px; font-size:clamp(16px,0.94vw,24px); color:#5C5C58;}
.system-hero-text ul {display:flex; flex-wrap:wrap; gap:30px; margin-top:20px;}
.system-hero-text ul li {display:inline-flex; align-items:center; column-gap:6px; padding:10px 16px; border-radius:999px; font-size:15px; font-weight:500; color:#0D1B2E; background:#fff; box-shadow:20px 20px 30px #B3B3B340;}
.system-hero-text ul li::before {content:''; width:6px; height:6px; border-radius:50%;}
.system-hero-text ul li:nth-child(1)::before {background-color:#16A34A;}
.system-hero-text ul li:nth-child(2)::before {background-color:#B18F4B;}
.system-hero-text ul li:nth-child(3)::before {background-color:#2562E8;}
.system-hero-visual {width: calc(100% - 550px); max-width:800px;}
img.system-hero-visual,.system-hero-visual img {width: 45%; max-width: 546px; border-radius:20px; box-shadow:20px 30px 30px #B3B3B340;}
.system-hero-section .absolute-img {position:absolute;}
.attendance-hero-section {height:calc(100vh - 112px); max-height:811px;}
.attendance-hero-section .inner {max-width:1229px; height:100%;}
.attendance-hero-section .attendance-hero-visual {width:45%; max-width:546px;}
.attendance-hero-section .absolute-img1 {left:-13%; top:10%;}
.attendance-hero-section .absolute-img2 {top:100%; left:20%;}
.attendance-hero-section .absolute-img3 {right:-23%; bottom:7%;}
.evaluation-hero-section {height:fit-content; padding:100px 0;}
.evaluation-hero-section .absolute-img1 {left:13%; top:-6%;}
.evaluation-hero-section .absolute-img2 {left:27%; bottom:-15%;}
.level-hero-section .inner {gap:80px;}
.system-feature-list {display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:60px;}
.system-feature-list li {transition:box-shadow 0.3s,border 0.3s,transform 0.3s; padding:26px; border-radius:16px; background:#fff; border:1px solid #EDEDED;}
.system-feature-list li:hover {transform:translateY(-1px); box-shadow:0 2px 12px 2px #5858580D,inset 0 -2px 0 #7892CD; border:1px solid transparent;}
.system-feature-list .ico-wrapper {position:relative; width:50px; height:50px;}
.system-feature-list .ico-wrap {transition:opacity 0.3s; position:absolute; top:0; left:0;}
.system-feature-list .ico-wrap:not(.gray) {opacity:0;}
.system-feature-list .ico-wrap.gray {background:#E0E0E0;}
.system-feature-list .ico-wrap.gray img {-webkit-filter:brightness(0) invert(1); filter:brightness(0) invert(1);}
.system-feature-list li:hover .ico-wrap:not(.gray) {opacity:1;}
.system-feature-list li:hover .ico-wrap.gray {opacity:0;}
.system-feature-list strong {display:block; margin-top:14px; font-size:16px; font-weight:600; color:#0D1B2E;}
.system-feature-list p {word-break: keep-all; margin-block:14px; font-size:15px; color:#4A5568;}
.system-feature-list .label {padding:4px 10px; font-size:15px; font-weight:600; color:#0D1B2E; background-color:#EEF2F8;}
.system-info-section .inner {max-width:1440px; display:flex; align-items:center; gap:60px;}
.system-info-visual {flex-shrink:0; width:58%; max-width:700px;}
.system-info-visual img {max-width:100%; border-radius:20px; box-shadow:20px 30px 30px #B3B3B340;}
.system-visual-grid {display:flex; align-items:center; gap:20px; max-width:1111px;}
.system-visual-grid img {width:calc(50% - 10px);}
.system-visual-column {display:flex; flex-direction:column; row-gap:30px;}
.system-info-text h3 {font-size:30px; font-weight:800; color:#1A1919;}
.system-info-text p {margin-top:10px; font-size:15px; color:#5C5C58;}
.system-info-text ul {display:flex; flex-direction:column; row-gap:12px; margin-top:30px;}
.system-info-text ul li {position:relative; padding-left:36px; font-size:16px; color:#4A5568;}
.system-info-text ul li::before {content:''; position:absolute; left:0; top:0; width:22px; height:22px; background:url(../img/sub/system/check-ico.svg) no-repeat center/contain;}
.system-info-text .desc {width:fit-content; margin-top:20px; padding:14px 16px; border-radius:10px; border:1px solid #FFCB6333; background-color:#FFFCF5; color:#0D1B2E; word-break:keep-all;}
.evaluation-submit-section .desc,.parent-homework-section .desc,.parent-feedback-section .desc {border-color:#C0D7F2; background-color:#E8F2FE;}
.system-info-section .status-wrap {display:flex; flex-wrap:wrap; gap:20px; margin-top:30px;}
.system-info-section .status-wrap span {display:inline-flex; align-items:center; column-gap:5px; padding:5px 10px; border-radius:999px; font-size:14px; font-weight:600;}
.system-info-section .status-wrap span::before {content:''; width:6px; height:6px; border-radius:50%;}
.status-wrap .on {color:#047857; background-color:#D1FAE5;}
.status-wrap .on::before {background-color:#047857;}
.status-wrap .late,.status-wrap .score {color:#D97706; background-color:#FEF3C7;}
.status-wrap .late::before,.status-wrap .score::before {background-color:#D97706;}
.status-wrap .absent,.status-wrap .ready {color:#EF4444; background-color:#FFF1F2;}
.status-wrap .absent::before,.status-wrap .ready::before {background-color:#EF4444;}
.status-wrap .submit,.status-wrap .progress {color:#2563EB; background-color:#DBEAFE;}
.status-wrap .submit::before,.status-wrap .progress::before {background-color:#2563EB;}
.attendance-check-section,.evaluation-check-section,.evaluation-feedback-section,.level-comment-section,.parent-calendar-section,.parent-progress-section {background:linear-gradient(90deg,#FFFFFF 0%,#F7F4EC 100%);}
.evaluation-submit-section,.level-status-section {background:linear-gradient(180deg,#EDF1F6 0%,#F9F9F9 100%);}
.parent-homework-section,.parent-feedback-section {background:#EEF4FA;}
.attendance-check-section .inner {max-width:1711px;}
.attendance-check-section .attendance-check-visual {width:70%;}
.evaluation-check-section .inner {max-width:1216px;}
.evaluation-check-section .evaluation-check-visual {width:55%; max-width:616px;}
.evaluation-submit-section .inner {max-width:1205px;}
.evaluation-feedback-section .inner {max-width:1300px;}
.parent-homework-section .inner {max-width:1242px;}
.parent-progress-section .inner {max-width:1341px; gap:30px;}
.parent-feedback-section .inner {max-width:1278px; align-items:flex-start; gap:30px;}
.parent-calendar-section .parent-calendar-visual {width:65%;}
.parent-homework-section .parent-homework-visual {max-width:616px;}
.parent-feedback-section .parent-feedback-visual {max-width:760px;}
.attendance-admin-section .inner {max-width:1770px;}
.attendance-admin-visual img {max-width:100%; border-radius:11px; box-shadow:20px 30px 30px #B3B3B340;}
.attendance-admin-section .section-bot {display:flex; align-items:center; column-gap:33px; margin-top:24px;}
.attendance-admin-section .section-bot .attendance-admin-visual {width:80%; max-width:1292px;}
.attendance-admin-section .section-bot .attendance-admin-visual img {width:100%;}
.attendance-admin-section .desc {margin-top:20px; padding:14px 16px; border-radius:10px; border:1px solid #FFCB6333; background-color:#FFFCF5; font-size:15px; color:#0D1B2E; word-break:keep-all;}
.level-step-list {display:flex; justify-content:center; align-items:center; gap:40px; margin-top:100px;}
.level-step-list li:not(.arrow) {position:relative; width:calc((100% - (40px * 4) - (42px * 2)) / 3); max-width:280px; padding:40px; border-radius:26px; background:#fff; border:1px solid #E8ECF2; box-shadow:0 4px 28px #0B1F4512; text-align:center;}
.level-step-list li > span {position:absolute; left:50%; top:0; transform:translate(-50%,-50%); padding:6px 18px; border-radius:999px; background:#0B1F45; box-shadow:0 4px 12px #0B1F4540; font-size:14px; font-weight:700; color:#fff;}
.level-step-list .ico-wrap {position:relative; width:88px; height:88px; margin:0 auto 18px; background:transparent;}
.level-step-list .ico-wrap::after {content:''; opacity:0.25; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% + 12px); height:calc(100% + 12px); border-radius:50%; border:2px dashed;}
.level-step-list .level-step-item1 .ico-wrap {background-color:#EBF2FF;}
.level-step-list .level-step-item1 .ico-wrap::after {border-color:#2563EB;}
.level-step-list .level-step-item2 .ico-wrap {background-color:#ECFDF5;}
.level-step-list .level-step-item2 .ico-wrap::after {border-color:#10B981;}
.level-step-list .level-step-item3 .ico-wrap {background-color:#F5F3FF;}
.level-step-list .level-step-item3 .ico-wrap::after {border-color:#7C3AED;}
.level-step-list em {display:inline-block; padding:4px 12px; border-radius:8px; font-size:15px; font-weight:600;}
.level-step-list .level-step-item1 em {background-color:#EBF2FF; color:#2563EB;}
.level-step-list .level-step-item2 em {background-color:#ECFDF5; color:#059669;}
.level-step-list .level-step-item3 em {background-color:#F5F3FF; color:#7C3AED;}
.level-step-list strong {display:block; margin-top:18px; font-size:20px; font-weight:800; color:#0B1F45;}
.level-step-list p {margin-top:18px; font-size:15px; color:#7A8499;}
.level-step-list .arrow {flex-shrink: 0; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:#0B1F45; box-shadow:0 4px 14px #0B1F4547;}
.level-comment-section img {display:block; width:100%; max-width:700px; margin:30px auto 0;}
.system-connect-list {display:flex; align-items:center; gap:16px; margin-top:70px;}
.system-connect-list li {display:flex; flex-direction:column; align-items:center;}
.system-connect-list li:not(.arrow) {row-gap:10px; flex:1; padding:28px; border-radius:20px; border:1px solid #F3F3F3; background:#fff; box-shadow:0 2px 10px #0D1B2E0F; text-align:center;}
.system-connect-list .ico-wrap {width:56px; height:56px; border-radius:16px;}
.system-connect-list strong {display:block; font-size:16px; font-weight:600; color:#0D1B2E;}
.system-connect-list p {font-size:15px; color:#8896A4; word-break:keep-all;}
.system-connect-list .arrow {row-gap:8px; align-self:center;}
.system-connect-list .arrow img {width:18px;}
.system-connect-list .arrow span {font-size:15px; font-weight:500; color:#8896A4;}
.attendance-connect-section .inner,.evaluation-connect-section .inner,.level-connect-section .inner,.parent-connect-section .inner {max-width:1376px; text-align:center;}
.evaluation-connect-section .system-connect-list p {max-width:142px; margin-inline:auto;}

.system-label-wrapper {display:flex; flex-direction:column; align-items:center; row-gap:20px; margin-top:74px;}
.system-label-wrapper .desc {word-break: keep-all; text-align:center; font-size:16px; line-height:1.5; color:#5C5C58;}
.system-label-wrap {display:flex; align-items:center; column-gap:30px;}
.system-label-wrap .label {padding:10px 16px; font-size:15px; font-weight:500; color:#0D1B2E; column-gap:6px; background-color:#EEF2F8;}
.system-label-wrap .label::before {content:''; width:6px; height:6px; border-radius:50%; background-color:#0D1B2E;}
.attendance-consult-section {position:relative; padding:195px 0; background:url('../img/sub/system/attendance-consult-bg.webp') no-repeat center/cover; text-align:center;}
.attendance-consult-section h3 {word-break: keep-all; font-family:'YeogiOttaeJalnanGothic'; font-size:48px; color:#000;}
.attendance-consult-section h3 strong {font-family:'YeogiOttaeJalnanGothic'; background:linear-gradient(90deg,#FFB900 0%,#F2994A 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent;}
.attendance-consult-section p {margin-top:20px; font-size:18px; color:#424242;}
.attendance-consult-section .square-btn {margin-top:60px; margin-inline:auto;}

@media (max-width: 1600px){
    .attendance-hero-section .absolute-img1 {left: -5%;}
    .attendance-hero-section .absolute-img3 {right: -10%;}
    .attendance-admin-section .inner {max-width: 1120px;}
    .attendance-admin-section .section-bot {flex-direction: column; align-items: flex-start; row-gap: 24px;}
    .level-step-list li:not(.arrow) {flex: 1;}
    
}

@media (max-width:1280px){
    .system-section {padding:100px 0;}
    .system-hero-text ul {gap: 24px;}
    .system-hero-section {height:auto; max-height:none; padding:100px 0;}
    .system-hero-section .inner {gap:40px;}
    .system-hero-section .absolute-img {display:none;}
    .system-feature-list {grid-template-columns:repeat(2,1fr);}
    .system-info-section .inner {max-width:calc(100% - 40px); gap:50px;}
    .system-info-visual,.attendance-check-section .attendance-check-visual,.parent-calendar-section .parent-calendar-visual {width:56%;}
    .attendance-admin-section .inner {max-width:calc(100% - 40px);}
    .attendance-admin-section .section-bot .attendance-admin-visual {width:65%;}
}
@media (max-width:1024px){
    .system-title h3 {font-size:32px;}
    .system-info-section .inner {flex-direction:column; align-items:flex-start;}
    .system-info-visual,.attendance-check-section .attendance-check-visual,.parent-calendar-section .parent-calendar-visual {width:100%; max-width:none;}
    .attendance-admin-section .section-bot {flex-direction:column; align-items:flex-start; row-gap:30px;}
    .attendance-admin-section .section-bot .attendance-admin-visual {width:100%; max-width:none;}
    .system-connect-list,.level-step-list {flex-wrap:wrap;}
    .system-connect-list li:not(.arrow) {flex:1 1 calc(50% - 16px);}
    .system-label-wrap {gap: 24px; flex-wrap: wrap;}
    .system-connect-list .arrow,.level-step-list .arrow {display:none;}
    .evaluation-check-section .evaluation-check-visual {width: 100%; max-width: fit-content;}
    .level-step-list li:not(.arrow) {padding: 40px 24px 30px;}
    .attendance-consult-section {padding:140px 0;}
    .attendance-consult-section h3 {font-size:38px;}
}
@media (max-width:768px){
    .system-section {padding:80px 0;}
    .system-info-section .inner {row-gap: 36px;}
    .system-title .label {font-size:13px;}
    .system-title h3 {font-size:28px;}
    .system-title p {font-size:15px; word-break:keep-all;}
    .system-hero-text ul {gap: 16px;}
    .system-hero-section {padding:80px 0;}
    .system-hero-section .inner {gap:30px; flex-direction:column; align-items:flex-start;}
    img.system-hero-visual,
    .attendance-hero-section .attendance-hero-visual {width:fit-content; max-width:100%;}
    .system-hero-text .label {margin-bottom:20px;}
    .system-hero-text p {font-size:16px; line-height:160%;}
    .system-hero-text ul li {font-size:13px;}
    img.system-hero-visual,.system-hero-visual img,.system-info-visual img,.attendance-admin-visual img {border-radius:14px; box-shadow:10px 16px 24px #B3B3B330;}
    .system-feature-list {grid-template-columns:1fr; gap:16px; margin-top:40px;}
    .system-feature-list li {padding:22px;}
    .system-info-text h3 {font-size:26px;}
    .system-info-text ul li {font-size:15px; line-height:150%;}
    .system-label-wrap {gap: 16px;}
    .system-info-section .status-wrap {gap:10px;}
    .level-hero-section .inner,
    .parent-hero-section .inner {flex-direction: column-reverse;}
    .level-step-list {margin-top:60px; flex-direction: column;}
    .level-step-list li:not(.arrow) {padding: 40px 46px 36px; width:100%; max-width: 390px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-left: calc(108px + 46px + 24px);}
    .level-step-list .level-step-item1 {margin-right: auto;}
    .level-step-list .level-step-item3 {margin-left: auto;}
    .level-step-list strong {font-size: 18px;}
    .level-step-list .ico-wrap {position: absolute; top: 50%; left: 46px; transform: translateY(-50%);}
    .system-connect-list {margin-top:40px;}
    .attendance-consult-section {padding:100px 0;}
    .attendance-consult-section h3 {font-size:32px; line-height:135%;}
    .attendance-consult-section p {font-size:16px; line-height:160%;}
    .attendance-consult-section .square-btn {margin-top:40px;}
}
@media (max-width:600px){
    .system-visual-grid {flex-direction:column; gap:16px; align-items: flex-start;}
    .system-visual-grid img {width: fit-content; max-width: 100%;}
}
@media (max-width:480px){
    .system-section {padding:64px 0;}
    .system-title h3 {font-size:24px;}
    .system-title p {font-size:14px;}
    .ico-wrap {width:46px; height:46px;}
    .system-hero-section {padding:64px 0;}
    .system-hero-text h2 {font-size:28px;}
    .system-hero-text p {font-size:15px;}
    .system-feature-list strong {font-size:15px;}
    .system-feature-list p {font-size:14px; line-height:150%;}
    .system-feature-list .label {font-size:14px;}
    .system-info-text h3 {font-size:23px;}
    .system-info-text p {font-size:14px; line-height:150%;}
    .system-info-text ul {margin-top:24px;}
    .system-label-wrap {flex-direction: column; row-gap: 10px; align-items: flex-start; width: 100%;}
    .system-info-section .status-wrap span {font-size:14px;}
    .level-step-list li:not(.arrow) {padding: 40px 36px 30px; padding-left: calc(108px + 36px + 20px);}
    .level-step-list .ico-wrap {left: 36px}
    .system-connect-list li:not(.arrow) {flex:1 1 100%; padding:24px;}
    .system-connect-list strong {font-size:15px;}
    .system-connect-list p {font-size:14px;}
    .attendance-consult-section {padding:80px 0;}
    .attendance-consult-section h3 {font-size:26px;}
    .attendance-consult-section p {font-size:15px;}
    .system-label-wrapper .desc {font-size: 14px;}
}


@media (max-width:375px){
    .system-title h3 {font-size: 22px;}
    .parent-feedback-section .parent-feedback-visual {display: none;}
    .level-step-list li:not(.arrow) {padding-left: 36px; align-items: center;}
    .level-step-list .ico-wrap {position: relative; transform: unset; top: unset; left: unset;}
    .level-step-list strong,
    .level-step-list p {text-align: center;}
}