/* 로그인페이지 */
.login { width: 100%; min-height: 100vh; background-image: url(/images/login-bg.jpg); background-repeat: no-repeat; background-position: left; background-size: cover; display: flex; flex-flow: column; justify-content: center; padding: 160px 0; }
.login-wrap { height: 100%; width: 100%; max-width: 1680px; margin: 0 auto; justify-content: flex-end; align-items: center; gap: 9.375vw; padding: 0 32px; }
.login-wrap .logo-box { padding-left: 9.375vw; display: flex; flex-flow: column; }
.login-wrap .logo-box .img-box { width: 300px; }
.login-form-wrap { width: 100%; max-width: 656px; border-radius: 16px; overflow: hidden; }
.login-form { background: #fff; padding: 56px 48px 48px; }
.login-form h2 { text-align: center; font-size: 2.5vw; color: #0097ff; margin-bottom: 2vw; }
.login-list { gap: 16px; margin-bottom: 16px; }
.login-list .login-input { width: 100%; height: 56px; background: #fff; border-radius: 4px; padding: 0 24px; font-size: 16px; border: 1px solid #e4e4e4; }
.login-list .login-input::placeholder { color: #9e9e9e; }
.login-form .login-btn { width: 100%; height: 56px; border-radius: 4px; background: #0097ff; text-align: center; line-height: 56px; font-size: 20px; font-weight: bold; color: #fff; transition: .3s; margin-bottom: 20px; }
.login-form .login-btn:hover { background: #078ae2; }
.login-form .login-btm { justify-content: center; gap: 36px; }
.login-form .login-btm a { font-size: 16px; color: #c1c1c1; position: relative; }
.login-form .login-btm a:first-child::after { content: "|"; display: block; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); } 
.login-form .login-another-box { padding-top: 32px; border-top: 1px solid #e4e4e4; margin-top: 48px; position: relative; }
.login-form .login-another-box .txt { position: absolute; padding: 0 16px; background: #fff; top: 0; left: 50%; transform: translate(-50%, -50%); font-size: 18px; }
.login-form .login-btn.kakao { background: url(../images/kakao-login.png) no-repeat; background-size: cover; color: transparent; margin-bottom: 0; }
.join-btn { background-image: linear-gradient(to right, #0097ff, #47b972); padding: 24px 56px; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.join-btn::after { content: ""; display: block; position: absolute; width: 0; left: 0; bottom: 0; top: 0; height: 100%; background: #0097ff; transition: .3s; z-index: -1; }
.join-btn:hover::after { width: 100%; }
.join-btn .txt-box { gap: 8px; }
.join-btn .txt-box .title { font-size: 1.25vw; color: #fff; }
.join-btn .txt-box .txt { font-size: 0.83vw; color: #fff; padding-left: 12px; position: relative; }
.join-btn .txt-box .txt::after { content: ""; display: block; width: 4px; height: 16px; background: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.join-btn i { font-size: 36px; color: #FFF; }

/* 회원가입 Signup Form */
.signup { padding: 160px 0 120px; background: #f5f5f5; }
.signup .main-title-wrap { text-align: center; width: 100%; max-width: 720px; margin: 0 auto 80px; }
.signup .main-title-wrap .title { font-size: 48px; margin-bottom: 24px; }
.signup .main-title-wrap .txt { font-size: 17px; font-weight: 300; margin-bottom: 48px; }
.signup .main-title-wrap .signup-state { justify-content: center; gap: 120px; }
.signup .main-title-wrap .signup-state-item { position: relative; z-index: 0; }
.signup .main-title-wrap .signup-state-item:not(:first-child)::after { content: ''; display: block; width: 122px; height: 2px; background: #adadad; position: absolute; top: 50%; right: 0; transform: translate(-25%, -50%); z-index: -1; }
.signup .main-title-wrap .signup-state-item .number { display: block; width: 32px; height: 32px; border: 2px solid #adadad; text-align: center; line-height: 28px; font-size: 14px; font-weight: 500; color: #adadad; border-radius: 50%; background: #f5f5f5; }
.signup .main-title-wrap .signup-state-item .txt { position: absolute; font-size: 14px; color: #adadad; font-weight: 500; white-space: nowrap; left: 50%; transform: translateX(-50%) translateY(100%); bottom: -16px; margin: 0; }
.signup .main-title-wrap .signup-state-item.active::after { background: #0097ff; }
.signup .main-title-wrap .signup-state-item.active .number { border: 2px solid #0097ff; color: #0097ff; }
.signup .main-title-wrap .signup-state-item.active .txt { color: #0097ff; font-weight: 500; }
.signup .main-title-wrap .signup-state-item.prev::after { background: #0097ff; }
.signup .main-title-wrap .signup-state-item.prev .number { border: 2px solid #0097ff; background: #0097ff; color: #fff; }
.signup .main-title-wrap .signup-state-item.prev .txt { color: #0097ff; font-weight: 500; }

.signup-wrap { width: 100%; max-width: 650px; margin: 0 auto; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); border-radius: 16px; overflow: hidden;}
.signup-form { width: 100%; background: #fff; padding: 56px; }
.signup-form .title-wrap { margin-bottom: 42px; text-align: center; position: relative; }
.signup-form .title-wrap .title { font-size: 32px; color: #0097ff; }
.signup-form .title-wrap .number { display: block; width: 48px; height: 48px; border-radius: 50%; background: #0097ff; text-align: center; line-height: 48px; color: #fff; font-size: 20px; font-weight: bold; margin: 0 auto 24px; }
.signup-form .title-wrap .sub-title { font-size: 18px; margin-top: 24px; }
.signup-form .title-wrap .notice { font-size: 16px; color: #ff0000; font-weight: bold; text-align: right; position: absolute; bottom: 16px; right: 0; }
.signup-wrap .btn-wrap { justify-content: center; margin-top: 48px; }
.signup-wrap .submit-btn { width: 100%; height: 76px; line-height: 76px; text-align: center; font-size: 20px; font-weight: bold; color: #fff; background: #0097ff; padding: 0; }
.signup-wrap .next-btn { padding: 0 64px; height: 56px; border-radius: 28px; border: 2px solid #0097ff; background: #fff; text-align: center; line-height: 52px; font-size: 16px; font-weight: bold; color: #0097ff; }

.form-list { gap: 16px; }
.form-list-item { position: relative; gap: 16px; }
.form-list-item.col-group .form-input { width: calc( 100% - 170px ); }
.form-list-item .form-title { gap: 8px; align-items: baseline; }
.form-list-item .form-title .title { font-size: 20px; font-weight: bold; line-height: 1; }
.form-list-item .form-input { width: 100%; height: 50px; border: 2px solid #d8d8d8; border-radius: 4px; padding: 0 16px; font-size: 16px; color: #333; }
.form-list-item .form-input.error { border: 1px solid #e11c1c; }
.form-list-item .form-input.success { border: 1px solid #0097ff; }
.form-list-item .form-input.readonly { background: #f5f5f5; border: 2px solid #f5f5f5; }
.form-list-item .form-input::placeholder { color: #cbcbcb; }

.form-list-item .notice { font-size: 12px; font-weight: 300; display: block; margin-top: 12px; }
.form-list-item .notice.wrong { color: #e11c1c; }
.form-list-item .message { font-size: 12px; font-weight: 300; }
.form-list-item .message.error { color: #e11c1c; }
.form-list-item .message.success { color: #0097ff; }
.form-list-item .form-btn { width: 154px; height: 50px; border-radius: 4px; text-align: center; line-height: 50px; font-size: 16px; font-weight: bold; color: #fff; background: #8a8a8a; }
.form-list-item .form-btn.submit { background: #0097ff; }
.form-list-item .form-btn.done { background: #006db5; }
.form-list-item .subtxt { color: #8a8a8a; font-weight: normal; padding: 0; font-size: 14px; display: block;}
.form-list-item .subtxt.link { text-decoration: underline; }

.form-list-item .sticker-wrap { position: relative; width: calc( 100% - 170px ); }
.form-list-item .sticker-wrap .form-input { width: 100%; padding-right: 60px; }
.form-list-item .sticker { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); text-align: right; }
.form-list-item .time span { color: #a4a4a4; }

/* input-date placeholder */
.form-placeholder-wrap { position: relative; }
.form-list-item .form-placeholder { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); width: calc( 100% - 80px ); line-height: 46px; background: #fff; color: #cbcbcb; }
.form-list-item .form-input[type='date']:focus ~ .form-placeholder,
.form-list-item .form-input[type='date']:valid ~ .form-placeholder { display: none; }

/* 자녀 추가 등록 버튼 */
.form-list-wrap> li:not(:last-child) { padding-bottom: 32px; border-bottom: 1px dashed #bfbfbf; margin-bottom: 32px; }
.signup-form .add-btn { width: 100%; height: 58px; border-radius: 4px; background: #7b7b7b; text-align: center; line-height: 58px; font-size: 18px; font-weight: bold; color: #fff; margin-top: 32px; }
.signup-form .add-btn i { color: #fff; }

/* 약관동의 */
.agree-wrap .title-wrap { padding-top: 32px; border-top: 1px solid #333; padding-bottom: 24px; border-bottom: 0; margin-top: 32px; margin-bottom: 0; text-align: unset; justify-content: space-between; align-items: center; }
.agree-wrap .title-wrap .title { font-size: 20px; font-weight: bold; color: #333; }
.agree-list { gap: 16px; }
.check-all-item .checked-item .txt { font-weight: bold; color: #a2a2a2; font-size: 16px;}
.agree-item .checked-item { display: flex; gap: 8px; align-items: center; }
.agree-item .checked-item .check-icon { width: 20px; height: 20px; border: 2px solid #bfbfbf; border-radius: 2px; display: block; }
.agree-item .checked-item .check-icon i { color: #fff; font-weight: bold; }
.agree-item .checked-item .txt { color: #a4a4a4; font-size: 16px; }
.agree-item .checked-item .link { font-size: 16px; color: #0097ff; text-decoration: underline; }

.agree-item input[type="checkbox"]:checked + .checked-item .check-icon { border: 2px solid #0097ff; background: #0097ff; }
.agree-item input[type="checkbox"]:checked + .checked-item .check-icon i { color: #fff; }
.agree-item input[type="checkbox"]:checked ~ .checked-item .txt { color: #0097ff; }

/* signup 원페이지 */
.onepage { padding: 160px 0 120px; min-height: calc( 100vh - 259px ); display: flex; flex-flow: column; justify-content: center; }
.onepage-wrap { text-align: center; }
.onepage-wrap .title { margin-bottom: 40px; }
.onepage-wrap .title .icon { width: 86px; height: 86px; border-radius: 50%; border: 4px solid #0097ff; text-align: center; line-height: 78px; margin: 0 auto 40px; }
.onepage-wrap .title .icon i { font-size: 48px; color: #0097ff; line-height: 76px; }
.onepage-wrap .title h2 { font-size: 48px; font-weight: normal; }
.onepage-wrap .title h2 .blue { font-weight: 600; font-size: 48px; width: fit-content; }
.onepage-wrap .txt { margin-bottom: 40px; display: flex; flex-flow: column; gap: 16px; }
.onepage-wrap .txt p { font-size: 18px; color: #878787; }
.onepage-wrap .txt a { font-size: 18px; color: #0097ff; text-decoration: underline; }
.onepage-wrap .onepage-btn { width: 300px; height: 64px; text-align: center; line-height: 64px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 32px; background: #0097ff; font-size: 18px; color: #fff; font-weight: bold; margin: 0 auto; transition: .2s; }
.onepage-wrap .onepage-btn:hover { background: #0a8ce2; }

/* 회원가입 완료 */
.signup.onepage { background: #fff; }
.signup.onepage .onepage-wrap .title { font-size: 48px; font-weight: 500; }
.signup.onepage .onepage-wrap .title .blue { font-weight: bold; }

/* index */
.index .container { justify-content: center; width: 100%; height: 100vh; align-items: center; }
.index .title-wrap { text-align: center; align-items: center; }
.index .title-wrap .sub-title { font-size: 32px; color: #fff; opacity: 0.6; margin-bottom: 16px; }
.index .title-wrap .title { font-size: 88px; font-weight: 900; color: #fff; margin-bottom: 56px; }
.index .title-wrap .title b { color: #0097ff; }
.index .title-wrap .more-btn { width: 200px; height: 48px; border-radius: 24px; border: 2px solid #fff; text-align: center; line-height: 44px; font-size: 17px; color: #fff; position: relative; z-index: 0; overflow: hidden; }
.index .title-wrap .more-btn::after { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #0097ff; transition: .3s; z-index: -1; }
.index .title-wrap .more-btn:hover { border: 2px solid #0097ff; }
.index .title-wrap .more-btn:hover::after { width: 100%; }
.index-video { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

/* subpage */
.subpage { margin-top: 88px; }

/* 모달 */
.modal-container { display: block; height: 100vh; width: 100%; background: rgba(0,0,0,0.2); position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999; display: none;}
.modal-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 560px; background: #fff; padding: 56px 40px; text-align: center; border-radius: 24px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);  }
.modal-wrap .title-wrap { padding-bottom: 32px; border-bottom: 1px solid #ccc; margin-bottom: 32px; }
.modal-wrap .title-wrap i { font-size: 40px; color: #0091f0; display: inline-block; margin-bottom: 16px; }
.modal-wrap .title-wrap .title { font-size: 40px; color: #0097ff; }
.modal-wrap .title-wrap.warning i, .modal-wrap .title-wrap.warning .title { color: #ff0000; }
.modal-wrap .txt { font-size: 18px; color: #888; margin-bottom: 56px; word-break: keep-all; }
.modal-wrap .btn-wrap { display: flex; justify-content: center; gap: 16px; }
.modal-wrap .btn-wrap .btn { width: 168px; height: 56px; background: #0097ff; text-align: center; line-height: 56px; border-radius: 4px; font-size: 17px; font-weight: bold; color: #fff; }
.modal-wrap .btn-wrap .cancel-btn { background: #8a8a8a; }

/* about-us */
.about { padding-top: 80px; padding-bottom: 120px; }
.about-us .main-banner { position: relative; }
.about-us .main-banner-img { border-radius: 40px; border-bottom-left-radius: 240px; max-height: 768px; overflow: hidden; }
.about-us .main-banner-img::after { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: linear-gradient(113deg, rgba(71, 185, 114, 0.6) 1%, rgba(0, 167, 157, 0.2) 43%, rgba(0, 117, 209, 0.6) 98%); z-index: 1; border-radius: 40px; border-bottom-left-radius: 240px; }

.about-us .main-banner-img .swiper-slide { width: 100%; padding-top: 50%; }
.about-us .main-banner-img .swiper-slide img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; object-fit: cover; object-position: center; }

.about-us .main-banner-txt { position: absolute; top: 0; right: 0; left: 0; bottom: 0; overflow: hidden;}
.about-us .main-banner-txt .swiper-slide { position: relative; }
.about-us .main-banner-txt .txt-box { position: absolute; right: 80px; bottom: 80px; text-align: right; z-index: 99; }
.about-us .main-banner-txt .txt-box .title { white-space: pre-line; font-size: 72px; font-weight: 900; line-height: 1.33; color: #fff; margin-bottom: 40px; }
.about-us .main-banner-txt .txt-box .txt { font-size: 24px; color: #fafafa; font-weight: 300; }
.about-us .main-banner-txt .swiper-controller { position: absolute; right: 80px; top: 80px; align-items: center; gap: 16px; }
.about-us .main-banner-txt .swiper-button-prev, .about-us .main-banner-txt .swiper-button-next { position: static; width: 36px; height: 36px; background: none; margin-top: 0; }
.about-us .main-banner-txt .swiper-button-prev::after, .about-us .main-banner-txt .swiper-button-next::after { display: none; }
.about-us .main-banner-txt .swiper-button-prev i, .about-us .main-banner-txt .swiper-button-next i { font-size: 36px; color: #fff; }
.about-us .main-banner-txt .swiper-pagination { position: static; font-size: 32px; color: #fff; }
.about-us .main-banner-txt .swiper-pagination span { color: #fff; }

.about-us .section-1 { padding: 120px 0; }
.about-us .section-1 .container { gap: 80px; align-items: flex-end; }
.about-us .section-1 .left { width: 50%; }
.about-us .section-1 .right { width: calc( 50% - 80px );  }
.about-us .section-1 .right .title-wrap { gap: 24px; margin-bottom: 52px; max-width: 600px; }
.about-us .section-1 .right .title-wrap .logo { width: 80px; }
.about-us .section-1 .right .title-wrap .title { font-size: 48px; font-weight: 800; line-height: 1.33; word-break: keep-all; }
.about-us .section-1 .right .txt-wrap { gap: 24px; margin-bottom: 32px; }
.about-us .section-1 .right .txt { font-size: 21px; font-weight: 300; }
.about-us .section-1 .right .date { font-size: 21px; font-weight: bold; }

.about-us .section-2 { margin-bottom: 120px; }

.about-us .section-3 { margin-bottom: 120px; }
.about-us .section-3 .main-title-wrap { text-align: center; padding-top: 72px; padding-bottom: 230px; border-radius: 40px; border-bottom-left-radius: 160px; background-image: linear-gradient(100deg, #0093f8 16%, #29bdc2 56%, #50d890 94%); }
.about-us .section-3 .main-title-wrap .title { align-items: center; gap: 32px; justify-content: center; font-size: 72px; font-weight: 900; color: #fff; margin-bottom: 24px; }
.about-us .section-3 .main-title-wrap .title .plus { width: 48px; }
.about-us .section-3 .main-title-wrap .txt { font-size: 24px; font-weight: 300; color: #fff; opacity: 0.6; }
.about-us .section-3 .cert-img-list { margin: 0 auto; max-width: 1400px; width: 100%; justify-content: space-between; margin-top: -182px; }
.about-us .section-3 .cert-img-item { width: calc( ( 100% - 40px * 3 ) / 4 ); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);}
.about-us .section-3 .cert-wrap { padding-top: 80px; gap: 80px; }
.about-us .section-3 .cert-wrap .title-wrap .plus { width: 64px; margin-bottom: 24px; }
.about-us .section-3 .cert-wrap .title-wrap .title { font-size: 48px; font-weight: bold; }
.about-us .section-3 .cert-list { width: calc( 100% - 230px - 80px ); flex-flow: wrap; gap: 24px; }
.about-us .section-3 .cert-item { width: calc( ( 100% - 24px * 2 ) / 3 ); padding: 26px 24px; text-align: center; font-size: 24px; color: #fff; background: #0097ff; border-radius: 44px; word-break: keep-all; line-height: 1.5; display: flex; flex-flow: column; justify-content: center; }

.about-us .section-4 .container { gap: 80px; }
.about-us .section-4 .left { background-image: linear-gradient(147deg, #0093f8 0%, #50d890 100%); border-radius: 40px; border-bottom-left-radius: 160px; position: relative; overflow: hidden; max-width: 700px; width: 42%; }
.about-us .section-4 .left .title-wrap {  padding: 80px; position: relative; z-index: 1; }
.about-us .section-4 .left .title-wrap .plus { width: 64px; margin-bottom: 56px; }
.about-us .section-4 .left .title-wrap .title { font-size: 72px; font-weight: 900; color: #fff; margin-bottom: 24px; }
.about-us .section-4 .left .title-wrap .txt { font-size: 24px; font-weight: 300; color: #fff; opacity: 0.6; }
.about-us .section-4 .left> img { width: 100%; display: block; }

.about-us .section-4 .right { width: calc( 58% - 80px ); gap: 24px; }
.about-us .section-4 .right .partner-list { height: 100%; width: 400px; overflow: hidden; position: relative; padding: 0 10px; }
.about-us .section-4 .right .partner-list .img-box { width: calc( 100% - 20px ); left: 50%; transform: translateX(-50%); height: 120px; position: absolute; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); border-radius: 24px;}
.about-us .section-4 .right .partner-list .img-box img { height: 100%; object-fit: contain; object-position: center; }

.about-content {  }
.about-content .section-1 { padding-bottom: 108px; }
.about-content .section-1 .container { gap: 80px; align-items: flex-end; }
.about-content .section-1 .left { width: 560px; }
.about-content .section-1 .left .plus { width: 64px; margin-bottom: 16px; }
.about-content .section-1 .left .title { font-size: 88px; font-weight: 900; word-break: keep-all; margin-bottom: 40px; }
.about-content .section-1 .left .txt { font-size: 20px; font-weight: 300; color: #707070; word-break: keep-all; }
.about-content .section-1 .right { width: calc( 100% - 560px - 80px ); }

.about-content .content .container { gap: 80px; align-items: flex-end; }
.about-content .content .right .title-wrap { margin-bottom: 32px; }
.about-content .content .right .title-wrap img { max-width: 350px; }
.about-content .content .right .title-wrap .title { font-size: 80px; font-weight: 900; width: fit-content; position: relative; z-index: 1; }
.about-content .content .right .title-wrap .num { position: absolute; font-size: 130px; color: #fff; top: -85px; right: -102px; z-index: -1; }
.about-content .content .right .txt-wrap { margin-bottom: 48px; }
.about-content .content .right .txt-wrap .txt { font-size: 18px; font-weight: 300; line-height: 1.56; margin-bottom: 24px; }
.about-content .content .right .txt-wrap .notice { font-size: 17px; color: #9e9e9e; }
.about-content .content .right .info-list { max-width: 600px; flex-flow: wrap; gap: 16px; }
.about-content .content .right .info-list li { width: 184px; height: 184px; background: #fff; border-radius: 24px; justify-content: center; gap: 16px; align-items: center; }
.about-content .content .right .info-list li img { width: 40px; height: 40px; object-fit: contain; object-position: center; }
.about-content .content .right .info-list li .txt { font-size: 20px; color: #707070; }
.about-content .content .right .info-list li .title { font-size: 24px; font-weight: bold; }

.about-content .section-2 { padding: 120px 0; background: url(../images/Contents-bg-01.svg) no-repeat; background-size: cover; }
.about-content .section-2 .left { width: 40%; gap: 40px; }
.about-content .section-2 .left .img-box { width: 100%; padding-top: 50%; position: relative; border-radius: 40px; overflow: hidden; }
.about-content .section-2 .left .img-box img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; object-position: center; object-fit: cover; }
.about-content .section-2 .right { width: calc( 60% - 80px ); }
.about-content .section-2 .right .info-list li .title { color: #47b972; }

.about-content .section-3 { padding: 120px 0; background: url(../images/Contents-bg-02.svg) no-repeat; background-size: cover; }
.about-content .section-3 .container { gap: 80px; flex-flow: row-reverse; }
.about-content .section-3 .left { width: calc( 55% - 80px ); }
.about-content .section-3 .right { width: 45%; }
.about-content .section-3 .right .title-wrap .num { right: -132px; }

.about-content .section-4 { padding-top: 120px; }
.about-content .section-4 .title-wrap { text-align: center; margin-bottom: 80px; }
.about-content .section-4 .title-wrap .balloon { padding: 20px 60px; border-radius: 32px;background: #0097ff; color: #fff; font-size: 20px; font-weight: bold; position: relative; display: block; width: fit-content; margin: 0 auto;  margin-bottom: 24px;}
.about-content .section-4 .title-wrap .balloon::after { content: ''; width: 0; height: 0; display: block; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #0097ff; position: absolute; left: 50%; transform: translateX(-50%); bottom: -20px; }
.about-content .section-4 .title-wrap .title { font-size: 72px; font-weight: 900; }
.about-content .section-4 .comingup-list { gap: 48px; }
.about-content .section-4 .comingup-list li { width: 100%; }
.about-content .section-4 .comingup-list li .img-box { width: 100%; padding-top: 65%; position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 40px; }
.about-content .section-4 .comingup-list li .img-box img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; object-position: center; object-fit: cover; }
.about-content .section-4 .comingup-list li .date { font-size: 17px; font-weight: bold; color: #fff; padding: 0 24px; background: #0097ff; border-radius: 24px; width: fit-content; height: 48px; line-height: 48px; margin-bottom: 40px; }
.about-content .section-4 .comingup-list li .title { font-size: 32px; font-weight: 900; margin-bottom: 24px; }
.about-content .section-4 .comingup-list li .txt { font-size: 18px; word-break: keep-all; }

/* contact */
.contact { padding-top: 80px; padding-bottom: 120px; }
.contact .container { background: url(../images/Contact.png) no-repeat; background-size: contain; background-position: bottom right; }
.contact-wrap { width: 100%; max-width: 560px; padding-bottom: 100px; }
.contact-wrap .title-wrap { margin-bottom: 32px; }
.contact-wrap .title-wrap .plus { width: 64px; margin-bottom: 16px; }
.contact-wrap .title-wrap .title { font-size: 88px; font-weight: 900; margin-bottom: 24px; }
.contact-wrap .title-wrap .txt { font-size: 20px; font-weight: 300; color: #707070; line-height: 1.6;  }
.contact-wrap .info-list { gap: 32px; padding-bottom: 40px; border-bottom: 1px solid #484848; margin-bottom: 40px; }
.contact-wrap .info-list li { align-items: center; gap: 16px; }
.contact-wrap .info-list .icon { display: block; width: 40px; height: 40px; border-radius: 50%; background: #0097ff; text-align: center; }
.contact-wrap .info-list .icon i { font-size: 20px; color: #fff; line-height: 40px; }
.contact-wrap .info-list .txt { font-size: 18px; font-weight: 500; }

.contact-form { gap: 24px; }
.contact-form .contact-list { gap: 24px; }
.contact-form .contact-item { gap: 12px; }
.contact-form .contact-item.name { width: 200px; }
.contact-form .contact-item.email { width: calc( 100% - 200px - 24px ); }
.contact-form .contact-item .title { padding-left: 16px; font-size: 18px; font-weight: bold; color: #0097ff; }
.contact-form .contact-item .form-input { width: 100%; height: 52px; border-radius: 26px; padding: 0 16px; background: #f5f5f5; font-size: 16px; }
.contact-form .contact-item .form-textarea { width: 100%; height: 240px; border-radius: 26px; padding: 16px; background: #f5f5f5; font-size: 16px; outline: 0; border: 0; }
.contact-form .contact-item .form-input::placeholder, .contact-form .contact-item .form-textarea::placeholder { font-weight: 300; }
.contact-form .contact-agree .checked-item { align-items: center; gap: 8px; }
.contact-form .contact-agree .check-icon { display: block; width: 20px; height: 20px; border-radius: 2px; border: 1px solid #bfbfbf; background: #fff; text-align: center; transition: .2s; }
.contact-form .contact-agree .check-icon i { line-height: 18px; color: #fff; }
.contact-form .contact-agree .checked-item .txt { font-size: 16px; color: #a4a4a4; transition: .2s; }
.contact-form .contact-agree input[type='checkbox']:checked ~ .checked-item .check-icon { border: 1px solid #0097ff; background: #0097ff; }
.contact-form .contact-agree input[type='checkbox']:checked ~ .checked-item .txt { color: #0097ff; }

.contact-wrap .submit-btn { margin-top: 40px; width: 246px; height: 56px; border-radius: 28px; text-align: center; line-height: 56px; color: #fff; font-size: 18px; font-weight: bold; background: #0097ff; }

/* report - 자녀선택 */
.report-index { background: url(../images/report-bg.png) no-repeat; background-size: 56.25%; background-position: left bottom; }
.report-index-wrap { padding-top: 80px; padding-bottom: 160px; justify-content: space-between; }
.report-index-wrap .title-wrap { margin-bottom: 32px; }
.report-index-wrap .title-wrap .plus { width: 64px; margin-bottom: 16px; }
.report-index-wrap .title-wrap .title { font-size: 88px; font-weight: 900; margin-bottom: 24px; }
.report-index-wrap .title-wrap .txt { font-size: 20px; font-weight: 300; color: #707070; line-height: 1.6; margin-bottom: 32px; }
.report-index-wrap .title-wrap .btn { width: 162px; height: 52px; border-radius: 26px; text-align: center; border: 2px solid #9e9e9e; line-height: 48px; font-size: 16px; font-weight: bold; color: #9e9e9e; background: #fff; position: relative; overflow: hidden; z-index: 0; transition: .2s;}
.report-index-wrap .title-wrap .btn::after { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0; height: 100%; background: #0097ff; transition: .2s; }
.report-index-wrap .title-wrap .btn:hover { border: 2px solid #0097ff; color: #fff; }
.report-index-wrap .title-wrap .btn:hover::after { width: 100%; z-index: -1; }

.children-list { gap: 48px; width: 100%; max-width: 900px; justify-content: flex-start; flex-flow: wrap; }
.children-list .children-item { width: calc( ( 100% - 48px ) / 2 ); background: #fff; border-radius: 24px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); border: 2px solid #50d890; overflow: hidden; position: relative; z-index: 0; }
.children-list .children-item::after { content: ''; display: block; width: 100%; height: 0; bottom: 0; left: 0; right: 0; background: #50d890; position: absolute; z-index: -1; transition: .3s; }
.children-list .children-box { padding-top: 64px; padding-bottom: 32px; text-align: center; justify-content: center; align-items: center; }
.children-list .children-box .img-box { width: 200px; height: 200px; position: relative; z-index: 0; margin-bottom: 24px; }
.children-list .children-box .img-box::after { content: ''; display: block; position: absolute; width: calc( 100% - 24px ); height: calc( 100% - 24px ); border-radius: 50%; background: #50d890; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1; transition: .3s; }
.children-list .children-box .img-box img { transform: translateY(-24px); }
.children-list .children-box .name { font-size: 40px; margin-bottom: 16px; transition: .3s;}
.children-list .children-box .age-wrap { gap: 16px; margin-bottom: 32px; }
.children-list .children-box .age-wrap .birth { font-size: 18px; font-weight: 300; transition: .3s; }
.children-list .children-box .age-wrap .age { font-size: 18px; font-weight: 300; transition: .3s; }
.children-list .children-box .age-wrap .age .color { font-weight: bold; }
.children-list .children-box .result { font-size: 18px; transition: .3s; }
.children-list .children-item .btn { width: 100%; height: 72px; line-height: 72px; text-align: center; background: #50d890; color: #fff; font-size: 18px; font-weight: bold; transition: .3s; }
.children-list .children-item .color { color: #50d890; transition: .3s; }

.children-list .children-item:nth-child(4n), .children-list .children-item:nth-child(4n+1) { border: 2px solid #0097ff; }
.children-list .children-item:nth-child(4n)::after, .children-list .children-item:nth-child(4n+1)::after { background: #0097ff; }
.children-list .children-item:nth-child(4n) .children-box .img-box::after, .children-list .children-item:nth-child(4n+1) .children-box .img-box::after { background: #0097ff; }
.children-list .children-item:nth-child(4n) .btn, .children-list .children-item:nth-child(4n+1) .btn { background: #0097ff; }
.children-list .children-item:nth-child(4n) .color, .children-list .children-item:nth-child(4n+1) .color { color: #0097ff; }

/* 호버효과 */
.children-list .children-item:hover .btn { background: #fff; color: #50d890; }
.children-list .children-item:hover::after { height: 100%; }
.children-list .children-item:hover .children-box .img-box::after { background: #fff; }
.children-list .children-item:nth-child(4n):hover .btn, .children-list .children-item:nth-child(4n+1):hover .btn { background: #fff; color: #0097ff; }
.children-list .children-item:hover .children-box .name { color: #fff; }
.children-list .children-item:hover .children-box .age-wrap { color: #fff; }
.children-list .children-item:hover .children-box .age-wrap .birth { color: #fff;  }
.children-list .children-item:hover .children-box .age-wrap .age { color: #fff;  }
.children-list .children-item:hover .children-box .result { color: #fff;  }
.children-list .children-item:hover .color { color: #fff; }

/* 리포트 */
.report-wrap { padding-top: 80px; padding-bottom: 120px; }
.report-wrap .title-wrap { justify-content: space-between; align-items: baseline; padding-bottom: 24px; border-bottom: 1px solid #e4e4e4; margin-bottom: 48px; }
.report-wrap .title-wrap .title { align-items: center; gap: 16px; }
.report-wrap .title-wrap .title .plus { width: 65px; }
.report-wrap .title-wrap .title .txt { font-size: 56px; font-weight: 900; }
.report-sub-nav { gap: 4px; align-items: center; }
.report-sub-nav-item, .report-sub-nav i { font-size: 17px; color: #9e9e9e; font-weight: 500; }
.report-wrap .preparing { display: block; max-width: 560px; margin: 0 auto; }

/* 리포트 상단 nav */
.report-nav { width: 100%; border-radius: 40px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); background-image: linear-gradient(102deg, #0097ff 11%, #00c9bd 52%, #50d890 99%); justify-content: space-between; padding: 40px; margin-bottom: 48px; }
.report-nav .my-child { width: 440px; align-items: center; gap: 32px; }
.report-nav .my-child .img-box { width: 176px; height: 176px; border-radius: 50%; background: #fff; padding: 16px; }
.report-nav .my-child .txt-box { gap: 16px; }
.report-nav .my-child .txt-box .name { font-size: 40px; font-weight: bold; color: #fff; }
.report-nav .my-child .txt-box .age-wrap { gap: 16px; }
.report-nav .my-child .txt-box .age-wrap .birth { font-size: 18px; font-weight: 300; color: #fff; position: relative; }
.report-nav .my-child .txt-box .age-wrap .birth::after { content: ""; display: block; position: absolute; width: 1px; height: 16px; right: -8px; background: #fff; top: 50%; transform: translateY(-50%); }
.report-nav .my-child .txt-box .age-wrap .age { font-size: 18px; font-weight: 300; color: #fff; }
.report-nav .my-child .txt-box .age-wrap .age strong { font-weight: bold; color: #fff; }
.report-nav .report-gnb { gap: 24px; width: calc( 100% - 440px ); }
.report-nav .report-gnb li { width: calc( ( 100% - 24px * 3 ) / 4 ); }
.report-nav .report-gnb-item { padding-top: 24px; padding-bottom: 32px; width: 100%; border-radius: 24px; background-color: rgba(255, 255, 255, 0.4); display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 12px; transition: .2s; }
.report-nav .report-gnb-item .img-box { width: 120px; position: relative; z-index: 0; } 
.report-nav .report-gnb-item .img-box::after { content: ''; display: block; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: #0097ff; top: 0; left: 0; z-index: -1; opacity: 0; transition: .2s; }
.report-nav .report-gnb-item .title { font-size: 18px; font-weight: bold; }

/* 리포트 상단 nav - active/hover 효과 */
.report-nav .report-gnb-item.active { background-color: #fff; }
.report-nav .report-gnb-item.active .img-box::after { opacity: 1; }
.report-nav .report-gnb-item:hover { background-color:rgba(255, 255, 255, 0.7); }

/* 리포트 리스트 */
.report-list { gap: 48px; flex-flow: wrap; }
.report-item { width: calc( ( 100% - 48px * 2 ) / 3 ); border-radius: 24px; overflow: hidden; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.13); position: relative; }
.report-item .img-box { width: 100%; padding-top: 56.25%; position: relative; }
.report-item .img-box img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; object-position: center; object-fit: cover; }
.report-item .txt-box { padding: 40px; }
.report-item .txt-box .title { font-size: 32px; line-height: 1.25; padding-bottom: 24px; border-bottom: 1px solid #9e9e9e; white-space: pre-line; word-break: keep-all; margin-bottom: 24px; }
.report-item .txt-box .date-wrap { gap: 24px; margin-bottom: 24px; }
.report-item .txt-box .date-wrap .date, .report-item .txt-box .date-wrap .round { font-size: 17px; color: #9e9e9e; font-weight: bold; position: relative; }
.report-item .txt-box .date-wrap .date::after { content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: #9e9e9e; right: -12px;}
.report-item .txt-box .txt { font-size: 18px; font-weight: 300; line-height: 1.5; white-space: pre-line; word-break: keep-all; }
.report-item .txt-box .price { font-size: 40px; font-weight: bold; color: #0097ff; margin-top: 24px; }
.report-item .more-btn { position: absolute; bottom: 0; right: 0; width: 64px; height: 64px; border-top-left-radius: 24px; background: #e4e4e4; text-align: center; line-height: 64px; font-size: 16px; font-weight: bold; color: #fff; transition: .2s; }
.report-item .more-btn i { font-size: 32px; color: #fff; line-height: 64px; }
.report-item:hover .more-btn { background: #0097ff; }

/* 리포트 리스트 - 확인불가 */
.report-item.disabled::after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.4); }
.report-item.disabled .more-btn { width: 106px; background: #df3030; z-index: 1; }

/* 리포트 상세페이지 (교육 리포트) */
.report_edu { background: #e9f6ff; margin-top: 0; padding-top: 168px; padding-bottom: 120px; }
.report_edu .main-title-wrap { gap: 80px; align-items: flex-end; margin-bottom: 56px; }
.report_edu .main-title-wrap .left { width: 45%; }
.report_edu .main-title-wrap .right { width: calc( 55% - 80px ); }
.report_edu .main-title-wrap .title-img { max-width: 350px; }
.report_edu .main-title-wrap .main-title { font-size: 72px; font-weight: 900; margin-bottom: 24px; }
.report_edu .main-title-wrap .report-sub-nav { margin-bottom: 48px; }
.report_edu .main-title-wrap .title-box { align-items: center; gap: 16px; padding: 0 24px; height: 56px; border-radius: 8px; background: #fff; margin-bottom: 80px; }
.report_edu .main-title-wrap .title-box .title { font-size: 20px; font-weight: bold; }
.report_edu .main-title-wrap .title-box .date { font-size: 17px; font-weight: 300; color: #9e9e9e; }

.report_edu .tab-link-wrap { justify-content: center; margin: 0 auto; margin-bottom: 56px; max-width: 768px; height: 80px; background: #fff; border-radius: 40px; box-shadow: inset 0 5px 10px 0 rgba(0, 0, 0, 0.16); }
.report_edu .tab-link { width: calc( 100% / 3 ); height: 100%; border-radius: 40px; text-align: center; line-height: 80px; font-size: 24px; font-weight: bold; color: #a2a2a2;}
.report_edu .tab-link.active { background: #0097ff; box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.16); color: #fff; } 

.result-main { padding: 48px; border-radius: 40px; background: #0097ff; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); gap: 40px; margin-bottom: 48px; }
.result-main .left { width: 37.5%; } 
.result-main .my-child { align-items: center; gap: 32px; padding-bottom: 32px; border-bottom: 2px solid #fff; }
.result-main .my-child .img-box { width: 176px; height: 176px; border-radius: 50%; background: #fff; padding: 16px; }
.result-main .my-child .txt-box { gap: 16px; }
.result-main .my-child .txt-box .name { font-size: 40px; font-weight: bold; color: #fff; }
.result-main .my-child .txt-box .age-wrap { gap: 4px 16px; flex-flow: wrap; }
.result-main .my-child .txt-box .age-wrap p { font-size: 20px; font-weight: 300; color: #fff; position: relative; }
.result-main .my-child .txt-box .age-wrap p:not(:last-child)::after { content: ""; display: block; position: absolute; width: 1px; height: 16px; right: -8px; background: #fff; top: 50%; transform: translateY(-50%); }
.result-main .my-child .txt-box .age-wrap .age strong { font-weight: bold; color: #ffe319; }
.result-main .report-type-list { padding: 32px 0; gap: 24px; }
.result-main .report-type-item { gap: 16px; padding-left: 8px; position: relative; }
.result-main .report-type-item::after { content: ''; display: block; position: absolute; width: 2px; height: 20px; background: #fff; left: 0; top: 4px; }
.result-main .report-type-item .title { font-size: 18px; font-weight: bold; color: #fff; }
.result-main .report-type-item .txt { font-size: 18px; color: #fff; }
.result-main .right { width: calc( 62.5% - 40px ); background: #fff; border-radius: 40px; padding: 48px; display: flex; flex-flow: column; justify-content: center; }

.chart-wrap { min-height: 320px; }

.report-detail-title { background: #0097ff; border-radius: 24px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); padding: 56px 48px; gap: 24px; align-items: flex-end; margin-bottom: 48px; }
.report-detail-title .plus { width: 64px; }
.report-detail-title .title { font-size: 72px; font-weight: 900; color: #fff; }
.report-detail-title .txt { font-size: 20px; font-weight: 300; color: #fff; }

.report-detail-list { gap: 48px; flex-flow: wrap; margin-bottom: 80px; }
.report-detail-item { width: calc( ( 100% - 48px ) / 2 ); background: #fff; border-radius: 40px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); padding: 48px; }

.result-item .percent { font-weight: bold; }
.result-item .percent.up { color: #0097ff; }
.result-item .percent.down { color: #df3030; }
.result-item .title-wrap { text-align: center; margin-bottom: 40px; }
.result-item .title-wrap .title { font-size: 40px; font-weight: 900; margin-bottom: 24px;}
.result-item .title-wrap .txt-box { height: 48px; border-radius: 24px; display: flex; align-items: center; align-items: center; background: #f5f5f5; padding: 0 24px; width: fit-content; margin: 0 auto; margin-bottom: 16px; font-size: 20px; }
.result-item .title-wrap .txt-box .name { font-weight: bold; }
.result-item .title-wrap .txt-box .percent { display: inline-block; padding: 0 8px; }
.result-item .total-wrap { margin-top: 40px; text-align: center; background: #f5f5f5; border-radius: 24px; padding: 40px; }
.result-item .total-wrap .title { font-size: 24px; padding-bottom: 32px; border-bottom: 1px solid #707070; margin-bottom: 24px; font-weight: 500; }
.result-item .total-wrap .title .name { font-weight: bold; }
.result-item .total-wrap .title .type { font-weight: bold; color: #0097ff; }
.result-item .total-wrap .percent-list { flex-flow: wrap; gap: 16px 32px; margin-bottom: 32px; }
.result-item .total-wrap .percent-item { width: calc( ( 100% - 32px ) / 2 ); justify-content: space-between; align-items: center; }
.result-item .total-wrap .percent-item .sub-title { font-size: 18px; font-weight: 300; }
.result-item .total-wrap .percent-item .percent { font-size: 18px; }
.result-item .total-wrap .total-percent { padding: 16px 0; background: #fff; border-radius: 28px; font-size: 20px; font-weight: bold; }

/* 리포트 상세페이지 - 하단 리포트 nav - 세로형 */
.report-detail-nav:not(:nth-child(2n-1)) { width: calc( ( 100% - 48px ) / 2 ); }
.report-detail-nav { width: 100%; justify-content: space-between; gap: 32px; }
.report-detail-nav .nav-item { width: 100%; border-radius: 40px; padding: 48px; }
.report-detail-nav .nav-item.solution { background-color: #0097ff; background-image: url(../images/item_solution.png); background-size: contain; background-repeat: no-repeat; }
.report-detail-nav .nav-item.activity { background-color: #006db8; background-image: url(../images/item_activity.png); background-size: contain; background-repeat: no-repeat; }
.report-detail-nav .nav-item.report01 { background-color: #ff58a6; background-image: url(../images/item_report01.png); background-size: contain; background-repeat: no-repeat; }
.report-detail-nav .nav-item.report02 { background-color: #ffe319; background-image: url(../images/item_report02.png); background-size: contain; background-repeat: no-repeat; }
.report-detail-nav .nav-item.report04 { background-color: #ff8c19; background-image: url(../images/item_report04.png); background-size: contain;  background-repeat: no-repeat; }
.report-detail-nav .nav-item .sub-title { font-size: 24px; font-weight: 300; color: #ffe319; margin-bottom: 8px; }
.report-detail-nav .nav-item .title { font-size: 48px; font-weight: bold; color: #fff; margin-bottom: 24px; }
.report-detail-nav .nav-item .txt { font-size: 20px; font-weight: 300; color: #fff; }
.report-detail-nav .nav-item-wrap { gap: 32px; }
.report-detail-nav .nav-item-wrap.row-group .nav-item { background-position: right center; }
.report-detail-nav .nav-item-wrap.col-group .nav-item { background-position: bottom center; text-align: center; padding-top: 48px; padding-left: 0; padding-right: 0; padding-bottom: 30%; }
.report-detail-nav .nav-item-wrap.col-group .nav-item .sub-title { font-size: 20px; color: #fff; margin-bottom: 16px; }
.report-detail-nav .nav-item-wrap.col-group .nav-item.report04 .sub-title { color: #ffe319; }
.report-detail-nav .nav-item-wrap.col-group .nav-item .title { font-size: 40px; }
.report-detail-nav .nav-item-wrap.col-group .nav-item.report02 .title { color: #333; }
.report-detail-nav .nav-item-wrap.col-group .nav-item .txt { font-size: 17px; }
.report-detail-nav .nav-item-wrap.col-group .nav-item.report02 .txt { color: #333; }

/* 리포트 상세페이지 - 하단 리포트 nav - 가로형 */
.report-detail-nav:not(:nth-child(2n)) { flex-flow: row wrap; }
.report-detail-nav:not(:nth-child(2n)) .nav-item-wrap { width: calc(( 100% - 32px ) / 2); }

.solution-list .report-detail-nav { width: 100%; flex-flow: row wrap; }
.solution-list .report-detail-nav .nav-item-wrap { width: calc(( 100% - 32px ) / 2); }

/* 리포트 상세페이지 - 하단 페이지 이동 버튼 */
.footer-btn-wrap { justify-content: space-between; height: 80px; position: relative; }
.footer-btn-wrap .btn { width: 260px; height: 80px; border-radius: 40px; text-align: center; line-height: 80px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); font-size: 24px; font-weight: bold; color: #fff; position: absolute; }
.footer-btn-wrap .btn i { font-size: 32px; color: #fff; position: absolute; top: 50%; transform: translateY(-50%); }
.footer-btn-wrap .prev-btn { background: #9e9e9e; left: 0; top: 0; padding-left: 32px; }
.footer-btn-wrap .prev-btn i { left: 32px; }
.footer-btn-wrap .next-btn { background: #0097ff; right: 0; top: 0; padding-right: 32px; }
.footer-btn-wrap .next-btn i { right: 32px; }

/* 리포트 상세페이지 (교육 리포트) - 솔루션 */
.solution-list { align-items: flex-start; }
.solution-item .solution-title { font-size: 40px; font-weight: 900; margin-bottom: 24px; }

.scroll-wrap { max-height: 500px; overflow: hidden; position: relative; }
.scroll-wrap::after { content: ''; display: block; position: absolute; width: 100%; height: 25%; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 45%); left: 0; bottom: 0; right: 0; }
.scroll-wrap .more-btn { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 18px; z-index: 1; font-weight: bold; color: #0097ff; }
.scroll-wrap .more-btn i { color: #0097ff; }
.scroll-wrap .solution-detail-list { padding-bottom: 56px; }

.scroll-wrap.open { overflow: auto; max-height: unset; }
.scroll-wrap.open::after { display: none; }
.scroll-wrap.open .more-btn i { transform: rotate(180deg); }

.solution-detail-list { gap: 24px; }
.solution-detail-item { padding: 40px; border-radius: 24px; gap: 40px; align-items: flex-start; }
.solution-detail-item .icon { width: 64px; height: 64px; }
.solution-detail-item .txt-box { width: calc( 100% - 64px - 40px ); }
.solution-detail-item .txt-box .title { font-size: 24px; font-weight: bold; margin-bottom: 24px; word-break: keep-all; }
.solution-detail-item .txt-box .txt { font-size: 17px; color: #707070; word-break: keep-all; }
.solution-detail-item .quiz-txt { padding: 16px; border-radius: 4px; margin-bottom: 24px; font-size: 18px; color: #fff;}
.solution-detail-item .quiz-txt .quiz-a { color: #fff;}
.solution-detail-item .quiz-img-list { gap: 16px; margin-bottom: 24px; }
.solution-detail-item .quiz-img-item { width: calc( ( 100% - 16px * 2 ) / 3 ); background: #f3f3f3; border-radius: 16px; padding: 16px; text-align: center; }
.solution-detail-item .quiz-img-item .img-box { width: 72px; height: 72px; margin: 0 auto 16px; }
.solution-detail-item .quiz-img-item .img-box img { height: 100%; object-fit: cover; object-position: center; }
.solution-detail-item .quiz-img-item .txt { font-size: 14px; }
.solution-detail-item .quiz-img-item.active { background: #ffe319; }
.solution-detail-item .quiz-img-item.active .txt { font-weight: bold; }
.solution-detail-item .quiz-result { gap: 8px; margin-bottom: 24px; }
.solution-detail-item .quiz-result-item { font-size: 18px; font-weight: bold; }
.solution-detail-item .quiz-result-item.correct { color: #0097ff; }
.solution-detail-item .quiz-result-item.wrong { color: #df3030; }
.solution-detail-item .quiz-tips { position: relative; padding: 16px; padding-top: 40px; border-radius: 16px; background: #f5f5f5; gap: 8px; }
.solution-detail-item .quiz-tips-txt { padding-left: 12px; font-size: 14px; position: relative; }
.solution-detail-item .quiz-tips-txt::after { content: ''; display: block; position: absolute; width: 4px; height: 4px; background: #484848; border-radius: 50%; left: 0; top: 8px; }
.solution-detail-item .quiz-tips .tag { display: block; width: 52px; height: 26px; line-height: 26px; text-align: center; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; color: #fff; font-size: 12px; position: absolute; left: 16px; top: 0; background: #0097ff; }
.solution-detail-item .quiz-tips .quiz-tips-txt .str { color: #0097ff; font-weight: bold; }

.solution-detail-item.correct { border: 2px solid #0097ff; }
.solution-detail-item.correct .icon { background: url(../images/icon_solution_correct.svg) no-repeat; background-size: contain; background-position: center}
.solution-detail-item.correct .txt-box .title { color: #0097ff; }
.solution-detail-item.correct .quiz-txt { background: #0097ff; }
.solution-detail-item.wrong { border: 2px solid #df3030; }
.solution-detail-item.wrong .icon { background: url(../images/icon_solution_wrong.svg) no-repeat; background-size: contain; background-position: center}
.solution-detail-item.wrong .txt-box .title { color: #df3030; }
.solution-detail-item.wrong .quiz-txt { background: #df3030; }

.solution-total-item { width: 100%; justify-content: space-between; padding: 40px; border-radius: 40px; background: #0077ff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); align-items: flex-start; }
.solution-total-item .title { gap: 16px; align-items: center; font-size: 40px; font-weight: 900; color: #fff; }
.solution-total-item .title img { width: 46px; }
.solution-total-item .total-txt { align-items: center; gap: 16px; font-size: 24px; font-weight: bold; color: #fff; }
.solution-total-item .total-score { width: 220px; justify-content: center; align-items: center; padding: 20px 0; background: #fff; border-radius: 24px; font-size: 24px; gap: 8px;}
.solution-total-item .total-score .score { font-size: 64px; font-weight: bold; color: #0077ff; }

/* 리포트 상세페이지 (교육 리포트) - 추천활동 */
.activity-item .activity-title { margin-bottom: 24px; }
.activity-item .activity-title .title { font-size: 40px; font-weight: 900; }
.activity-item .activity-title .sub-title { font-size: 20px; font-weight: 300; color: #0097ff; margin-bottom: 16px; }
.activity-detail-list { gap: 24px; }
.activity-detail-item { padding: 40px; border-radius: 24px; background: #f5f5f5; }
.activity-detail-item .title { font-size: 24px; font-weight: bold; color: #0097ff; margin-bottom: 24px; line-height: 1.5; word-break: keep-all;}
.activity-detail-item .title i { color: #0097ff; }
.activity-detail-item .txt { font-size: 17px; color: #707070; word-break: keep-all;}

/* 리포트 상세페이지 (심리 리포트) */
.report_psy { background: #f7ffe5; padding-top: 80px; padding-bottom: 120px; }
.report_psy .main-title-wrap { justify-content: space-between; padding-bottom: 24px; border-bottom: 2px solid #e4e4e4; margin-bottom: 40px; align-items: flex-end; } 
.report_psy .main-title { align-items: center; font-size: 56px; gap: 16px; font-weight: 900; }
.report_psy .main-title .plus { width: 64px; }

.report_psy .result-main { background: #47b972; justify-content: space-between; }
.report_psy .result-main .my-child { padding-bottom: 0; border-bottom: 0; }
.report_psy .result-main .report-type-list { flex-flow: wrap; width: 60%; gap: 24px 0; }
.report_psy .result-main .report-type-item { width: 50%; }

.report_psy .main-chart { background: #fff; border-radius: 40px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); padding: 48px; margin-bottom: 40px; }
.report_psy .main-chart .chart-wrap { min-height: 640px; }
.report_psy .main-chart .chart-bg-list { justify-content: center; margin-top: 40px; gap: 32px; }
.report_psy .main-chart .chart-bg-item { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.report_psy .main-chart .chart-bg-item .color { display: inline-block; width: 42px; height: 20px; border: 1px solid #e9e9e9; }
.report_psy .main-chart .chart-bg-item .color.red { background: rgba(223, 48, 48, 0.08); }
.report_psy .main-chart .chart-bg-item .color.yellow { background: rgba(225, 227, 25, 0.08); }
.report_psy .main-chart .chart-bg-item .color.blue { background: rgba(0, 151, 225, 0.08); }
.report_psy .main-chart .notice-txt { text-align: center; margin-top: 32px; }
.report_psy .main-chart .notice-txt .txt { font-size: 16px; font-weight: 300; color: #707070; margin-top: 16px; word-break: keep-all; }
.report_psy .main-chart .notice-txt i { font-size: 24px; color: #707070; }

.report_psy .report-detail-list { align-items: flex-start; }

.report_psy .result-item .title-wrap .sub-title { font-size: 17px; font-weight: 500; color: #707070; margin-bottom: 8px; }
.report_psy .result-item .title-wrap .title { color: #47b972; }
.report_psy .result-item .title-wrap .txt { font-size: 16px; font-weight: 300; word-break: keep-all; }

.report_psy .result-item .total-wrap { background: none; padding: 0; border-radius: 0; gap: 16px; margin-bottom: 24px; }
.report_psy .result-item .score-wrap { background: #47b972; border-radius: 24px; padding: 32px; justify-content: center; gap: 24px; width: 60%; }
.report_psy .result-item .score-wrap .title { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; font-size: 24px; color: #fff; }
.report_psy .result-item .score-wrap .title .name { font-size: 28px; color: #fff; }
.report_psy .result-item .score-wrap .txt { font-size: 14px; color: #fff; word-break: keep-all; }
.report_psy .result-item .score-box { width: 100%; max-width: 200px; padding: 0 24px; height: 80px; border-radius: 8px; background: #fff; text-align: right; font-size: 24px; font-weight: bold; display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0 auto; }
.report_psy .result-item .score-box .score { font-size: 48px; }
.report_psy .result-item .score-box .score.red { color: #df3030; }
.report_psy .result-item .score-box .score.blue { color: #0097ff; }
.report_psy .result-item .detail-result-wrap { padding: 32px 24px; border-radius: 24px; justify-content: center; gap: 16px; font-size: 20px; color: #fff; width: calc( 40% - 16px ); }
.report_psy .result-item .detail-result-wrap i { font-size: 32px; color: #fff; }
.report_psy .result-item .detail-result-wrap .txt { font-size: 20px; color: #fff; word-break: keep-all; }
.report_psy .result-item .detail-result-wrap .name { font-weight: bold; color: #fff; }
.report_psy .result-item .detail-result-wrap .result-box { background: #fff; padding: 16px; border-radius: 8px; font-size: 20px; font-weight: bold; word-break: keep-all; }
.report_psy .result-item .detail-result-wrap.red { background: #df3030; }
.report_psy .result-item .detail-result-wrap.red .result-box { color: #df3030; }
.report_psy .result-item .detail-result-wrap.yellow { background: #ffe319; color: #333; }
.report_psy .result-item .detail-result-wrap.yellow * { color: #333; }
.report_psy .result-item .detail-result-wrap.blue { background: #0097ff; }
.report_psy .result-item .detail-result-wrap.blue .result-box { color: #0097ff; }

.report_psy .scroll-wrap { max-height: 330px; }
.report_psy .scroll-wrap.open { max-height: unset; }
.report_psy .scroll-wrap.open .more-btn { bottom: 16px; }
.report_psy .result-item .solution-detail-list { background: #f5f5f5; border-radius: 24px; padding: 40px; padding-bottom: 56px; }
.report_psy .result-item .solution-detail-list .title { text-align: center; font-size: 24px; font-weight: bold; padding-bottom: 32px; border-bottom: 1px solid #707070; margin-bottom: 32px; }

/* 리포트 상세페이지 (비교분석 리포트) */
.report_analysis .result-item .title-wrap { margin-bottom: 0; }

/* 마이페이지 */
.mypage { background: #f5f5f5; min-height: 100vh; }
.mypage-wrap { height: 100%; margin-left: 400px; width: calc( 100% - 400px ); padding-right: 40px; padding-top: 128px; padding-bottom: 40px; }

/* 마이페이지 - 좌측 nav */
.mypage-nav { position: absolute; left: 0; top: 0; height: 100vh; width: 360px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); background-image: linear-gradient(161deg, #0097ff 7%, #50d890 96%); z-index: 99; padding: 40px; padding-top: 64px; justify-content: space-between; }
.mypage-gnb-wrap { gap: 24px; align-items: center; }
.mypage-gnb-wrap .logo { width: 88px; }
.mypage-gnb-wrap .title { font-size: 40px; font-weight: bold; color: #fff; margin-bottom: 20px; }
.mypage-gnb { width: 100%; gap: 16px; }
.mypage-gnb-item { width: 100%; height: 64px; border-radius: 32px; text-align: center; line-height: 60px; border: 2px solid #fff; font-size: 18px; font-weight: bold; color: #fff; transition: .2s; }
.mypage-gnb-item:hover { background: rgba(255, 255, 255, 0.4); }
.mypage-gnb-item.active { background: #fff; color: #0097ff; }
.mypage-nav .copy-wrap { gap: 8px; }
.mypage-nav .copy-wrap .title { font-size: 24px; font-weight: bold; color: #e9e9e9; }
.mypage-nav .copy-wrap .txt { font-size: 12px; font-weight: 300; color: #e9e9e9; opacity: 0.6; }
.mypage-nav .copy-wrap .copy { font-size: 10px; color: #e9e9e9; }

/* 마이페이지 - 정보수정 */
.mypage-profile { max-width: 768px; width: 100%; padding: 56px; border-radius: 24px; background: #fff; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); }
.mypage-profile> .title { text-align: center; font-size: 40px; margin-bottom: 40px; }
.mypage-profile .form-list-item { align-items: center; justify-content: flex-end; }
.mypage-profile .form-list-item .form-title { width: 104px; }
.mypage-profile .form-list-item.col-group .form-input { width: calc( 100% - 104px - 16px ); }
.mypage-profile .form-list-item .form-group { width: calc( 100% - 104px - 16px ); gap: 16px; }
.mypage-profile .form-list-item .form-group .kakao-icon { width: 50px; height: 50px; filter: grayscale(1); opacity: 0.4; }
.mypage-profile .form-list-item .form-btn { width: 144px; }
.mypage-profile .form-list-item .form-group .form-input { width: calc( 100% - 144px - 16px ); }
.mypage-profile .form-list-item.id .form-group .form-input { width: calc( 100% - 50px - 16px ); }
.mypage-profile .form-list-item .sticker-wrap { width: calc( 100% - 144px - 16px ); }
.mypage-profile .form-list-item .sticker-wrap .form-input { width: 100%; }
.mypage-profile .form-list-item.form-title { justify-content: flex-start; margin-left: 120px; }
.mypage-profile .btn-wrap { gap: 16px; margin-top: 40px; justify-content: center; }
.mypage-profile .btn-wrap .btn { height: 80px; text-align: center; line-height: 80px; color: #fff; font-size: 20px; font-weight: bold; border-radius: 8px; }
.mypage-profile .btn-wrap .next-btn { width: 156px; background: #707070; }
.mypage-profile .btn-wrap .submit-btn { width: calc( 100% - 156px - 16px ); background: #0097ff; }
.mypage-profile .btn-wrap .one-btn { width: 100%; background: #0097ff; }

/* 마이페이지 - 정보수정 - input-date placeholde */
.mypage-profile .form-list-item .form-placeholder-wrap { width: calc( 100% - 104px - 16px ); }
.mypage-profile .form-list-item .form-placeholder-wrap .form-input { width: 100%; }

/* 마이페이지 - 정보수정 - 카카오 로그인 */
.mypage-profile.kakao .form-list-item .form-group .kakao-icon { filter: grayscale(0); opacity: 1; }

/* 마이페이지 - 자녀관리 */
.mypage-wrap .children-list .children-box .age-wrap { margin-bottom: 0; }
.mypage-wrap .children-item .del-btn { width: 48px; height: 48px; border-radius: 50%; background: #f5f5f5; position: absolute; top: 16px; right: 16px; transition: .2s; }
.mypage-wrap .children-item .del-btn:hover { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); }
.mypage-wrap .children-item .del-btn i { color: #9e9e9e; font-size: 24px; }

.children-list .children-add-item { width: calc( ( 100% - 48px ) / 2 ); background: #0097ff; border-radius: 24px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); justify-content: center; align-items: center; gap: 40px; }
.children-list .children-add-item .add-btn { width: 176px; height: 176px; border-radius: 50%; background: #fff; text-align: center; }
.children-list .children-add-item .add-btn i { font-size: 80px; color: #0097ff; line-height: 176px; }
.children-list .children-add-item .txt { font-size: 32px; font-weight: bold; color: #fff; }

/* 마이페이지 - 결제내역 */
.mypage-payment { width: 100%; background: #fff; border-radius: 24px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); padding: 48px; }
.mypage-payment .title-wrap { justify-content: space-between; align-items: flex-end; padding-bottom: 24px; border-bottom: 1px solid #707070; margin-bottom: 24px; }
.mypage-payment .title-wrap .title { font-size: 40px; font-weight: bold; }
.mypage-payment .search-wrap { gap: 16px; align-items: center; }
.mypage-payment .search-wrap .search-input { width: 158px; height: 50px; border: 1px solid #adadad; border-radius: 4px; padding: 0 16px; font-size: 16px; }
.mypage-payment .search-wrap .search-txt { color: #adadad;  }
.mypage-payment .search-wrap .search-btn { width: 80px; height: 50px; background: #7b7b7b; font-size: 16px; color: #fff; font-weight: bold; border-radius: 4px; }

.table-wrap { overflow-x: scroll; }
.table-wrap::-webkit-scrollbar { display: none; }
.payment-table { border-collapse: separate; border-spacing: 0 16px; table-layout: fixed; border-spacing: 0 16px; width: 100%; min-width: 1024px;}
.payment-table th { background: #333; color: #fff; padding: 16px; padding-right: 0; text-align: left; font-size: 20px; }
.payment-table th:first-child { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.payment-table th:last-child { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.payment-table td { padding: 16px; padding-right: 0; background: #f5f5f5; font-size: 20px; }
.payment-table td:first-child { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.payment-table td:last-child { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.payment-table td .price { font-weight: bold; }

@media screen and (max-width: 1680px) {
    .about-us .main-banner-img::after { width: calc( 100% - 48px ); }
}

@media screen and (max-width: 1440px) {
    .about-us .section-4 .left .title-wrap { padding: 80px 40px; }

    .report-sub-nav-item, .report-sub-nav i { font-size: 14px; }

    .solution-detail-item .quiz-img-item .img-box { width: 100%; height: unset; position: relative; padding-top: 100%; }
    .solution-detail-item .quiz-img-item .img-box img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; object-fit: cover; }
    .solution-total-item .title { font-size: 32px; }
    .solution-total-item .total-txt { font-size: 20px; }
    .solution-total-item .total-score { width: 180px; }

    .report_psy .result-main .report-type-list { width: 40%; }
    .report_psy .result-main .report-type-item { width: 100%; }

    .solution-detail-item { flex-flow: column; align-items: center; }
    .solution-detail-item .txt-box { width: 100%; }
    .solution-detail-item .txt-box .title { text-align: center; }
}

@media screen and (max-width: 1024px) {

    /* 로그인페이지 */
    .login { min-height: unset; background-image: none; padding: 0; margin-top: 56px; justify-content: flex-start; }
    .login-wrap { justify-content: center; padding: 40px 24px; }
    .login-form-wrap { max-width: 480px; border-radius: 0; }
    .login-form {padding: 0; padding-bottom: 16px; }
    .login-form h2 { font-size: 24px; margin-bottom: 32px; }
    .login-list { gap: 16px; margin-bottom: 16px; }
    .login-list .login-input { height: 40px; padding: 0 16px; font-size: 14px; border: 0; background: #f5f5f5; }
    .login-form .login-btn { height: 40px; line-height: 40px; font-size: 14px; margin-bottom: 16px; }
    .login-form .login-btm { gap: 24px; }
    .login-form .login-btm a { font-size: 12px; }
    .login-form .login-btm a:first-child::after { right: -12px; } 
    .login-form .login-another-box { padding-top: 24px; margin-top: 32px; }
    .login-form .login-another-box .txt { font-size: 14px; }
    .login-form .login-btn.kakao { background-image: url(../images/kakao-login.png); background-size: contain; background-position: center; background-color: #fee500; }
    .join-btn { padding: 16px; }
    .join-btn .txt-box { gap: 8px; }
    .join-btn .txt-box .title { font-size: 14px; }
    .join-btn .txt-box .txt { font-size: 12px; padding-left: 8px; }
    .join-btn .txt-box .txt::after { width: 2px; height: 12px; }
    .join-btn i { font-size: 20px;; }

    /* 회원가입 Signup Form */
    .signup { margin-top: 56px; padding: 40px 24px; background: #fff; }
    .signup .main-title-wrap { max-width: 480px; padding-bottom: 64px; border-bottom: 1px solid #c1c1c1; margin: 0 auto 32px; }
    .signup .main-title-wrap .title { font-size: 24px; margin-bottom: 16px; }
    .signup .main-title-wrap .txt { font-size: 14px; margin-bottom: 24px; }
    .signup .main-title-wrap .signup-state { gap: 80px; }
    .signup .main-title-wrap .signup-state-item:not(:first-child)::after { width: 84px; height: 1px; transform: translate(-25%, -50%); z-index: -1; }
    .signup .main-title-wrap .signup-state-item .number { width: 24px; height: 24px; line-height: 20px; font-size: 12px; }
    .signup .main-title-wrap .signup-state-item .txt { font-size: 12px; bottom: -8px; }

    .signup-wrap { max-width: 480px; box-shadow: none; border-radius: 0;}
    .signup-form { padding: 0; padding-bottom: 32px; }
    .signup-form .title-wrap { margin-bottom: 32px; }
    .signup-form .title-wrap .title { font-size: 24px; }
    .signup-form .title-wrap .number { display: block; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin: 0 auto 16px; }
    .signup-form .title-wrap .sub-title { font-size: 14px; margin-top: 24px; }
    .signup-form .title-wrap .notice { font-size: 16px; color: #ff0000; font-weight: bold; text-align: right; position: absolute; bottom: 16px; right: 0; }
    .signup-wrap .btn-wrap { justify-content: center; margin-top: 48px; }
    .signup-wrap .submit-btn { height: 40px; line-height: 40px; font-size: 14px; border-radius: 4px; }
    .signup-wrap .next-btn { padding: 0 64px; height: 56px; border-radius: 28px; border: 2px solid #0097ff; background: #fff; text-align: center; line-height: 52px; font-size: 16px; font-weight: bold; color: #0097ff; }

    .form-list { gap: 8px; }
    .form-list-item { gap: 8px; }
    .form-list-item.col-group .form-input { width: calc( 100% - 96px - 8px ); }
    .form-list-item .form-title .title { font-size: 16px; }
    .form-list-item .form-input { height: 40px; border: 1px solid #d8d8d8; font-size: 14px; }

    .form-list-item .notice { font-size: 12px; font-weight: 300; display: block; margin-top: 12px; }
    .form-list-item .form-btn { width: 96px; height: 40px; font-size: 14px; line-height: 40px; }
    .form-list-item .subtxt { font-size: 12px; }

    .form-list-item .sticker-wrap { width: calc( 100% - 96px - 8px ); }
    .form-list-item .sticker-wrap .form-input { width: 100%; padding-right: 48px; }
    .form-list-item .sticker { font-size: 14px; }

    /* input-date placeholder */
    .form-list-item .form-placeholder {line-height: 38px; font-size: 14px; }

    /* 자녀 추가 등록 버튼 */
    .form-list-wrap> li:not(:last-child) { padding-bottom: 16px; margin-bottom: 16px; }
    .signup-form .add-btn { height: 48px; line-height: 48px; font-size: 16px; margin-top: 16px; }

    /* 약관동의 */
    .agree-wrap .title-wrap { padding-top: 16px; padding-bottom: 16px; border-bottom: 0; margin-top: 16px; margin-bottom: 0; }
    .agree-wrap .title-wrap .title { font-size: 16px; }
    .agree-list { gap: 8px; }
    .check-all-item .checked-item .txt { font-size: 14px;}
    .agree-item .checked-item .check-icon { width: 16px; height: 16px; }
    .agree-item .checked-item .check-icon i { font-size: 12px; line-height: 12px; }
    .agree-item .checked-item .txt { font-size: 14px; }
    .agree-item .checked-item .link { font-size: 14px; }

    /* signup 원페이지 */
    .onepage { margin-top: 56px; padding: 40px 0px; }
    .onepage-wrap { max-width: 480px; margin: 0 auto; }
    .onepage-wrap .title { margin-bottom: 24px; }
    .onepage-wrap .title .icon { width: 42px; height: 42px; line-height: 38px; border: 2px solid #0097ff; margin: 0 auto 24px; }
    .onepage-wrap .title .icon i { font-size: 24px; line-height: 38px; }
    .onepage-wrap .title h2 { font-size: 24px; line-height: 1.5; }
    .onepage-wrap .title h2 .blue { font-size: 24px; }
    .onepage-wrap .txt { gap: 8px; font-size: 14px;}
    .onepage-wrap .txt p { font-size: 14px; }
    .onepage-wrap .txt a { font-size: 14px; }
    .onepage-wrap .onepage-btn { width: 180px; height: 40px; line-height: 40px; box-shadow: none; border-radius: 20px; font-size: 14px; }

    /* 회원가입 완료 */
    .signup.onepage { background: #fff; }
    .signup.onepage .main-title-wrap { border-bottom: 0; }
    .signup.onepage .onepage-wrap .title { font-size: 24px; }

    /* index */
    .index .title-wrap .sub-title { font-size: 17px; }
    .index .title-wrap .title { font-size: 40px; margin-bottom: 40px; }
    .index .title-wrap .more-btn { width: 146px; height: 40px; border-radius: 20px; line-height: 36px; font-size: 14px; }

    /* subpage */
    .subpage { margin-top: 56px; }

    /* 모달 */
    .modal-wrap { width: calc( 100% - 48px ); padding: 24px 16px; border-radius: 16px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);  }
    .modal-wrap .title-wrap { padding-bottom: 24px; margin-bottom: 24px; }
    .modal-wrap .title-wrap i { font-size: 32px; margin-bottom: 8px; }
    .modal-wrap .title-wrap .title { font-size: 32px; }
    .modal-wrap .txt { font-size: 14px; margin-bottom: 40px; }
    .modal-wrap .btn-wrap { gap: 8px; }
    .modal-wrap .btn-wrap .btn { width: 104px; height: 48px; line-height: 48px; font-size: 14px; }

    /* about-us */
    .about { padding-top: 0; padding-bottom: 40px; }
    .about-us .main-banner { padding: 0; }
    .about-us .main-banner-img { border-radius: 0; border-bottom-left-radius: 0; }
    .about-us .main-banner-img::after {width: 100%; border-radius: 0; border-bottom-left-radius: 0; }

    .about-us .main-banner-txt .txt-box { right: 24px; bottom: 32px; }
    .about-us .main-banner-txt .txt-box .title { font-size: 24px; margin-bottom: 16px; }
    .about-us .main-banner-txt .txt-box .txt { font-size: 12px; }
    .about-us .main-banner-txt .swiper-controller { position: absolute; right: 24px; top: 24px; gap: 8px; }
    .about-us .main-banner-txt .swiper-button-prev, .about-us .main-banner-txt .swiper-button-next { width: 16px; height: 16px; }
    .about-us .main-banner-txt .swiper-button-prev i, .about-us .main-banner-txt .swiper-button-next i { font-size: 16px; }
    .about-us .main-banner-txt .swiper-pagination { font-size: 16px; }

    .about-us .section-1 { padding: 40px 0 56px; }
    .about-us .section-1 .container { max-width: 768px; flex-flow: column; gap: 24px; align-items: flex-start; }
    .about-us .section-1 .left { width: 100%; }
    .about-us .section-1 .right { width: 100%;  }
    .about-us .section-1 .right .title-wrap { gap: 16px; margin-bottom: 24px; max-width: unset; }
    .about-us .section-1 .right .title-wrap .logo { width: 48px; }
    .about-us .section-1 .right .title-wrap .title { font-size: 24px; }
    .about-us .section-1 .right .txt-wrap { gap: 16px; margin-bottom: 24px; }
    .about-us .section-1 .right .txt { font-size: 14px; }
    .about-us .section-1 .right .date { font-size: 14px; }

    .about-us .section-2 { margin-bottom: 48px; }
    .about-us .section-2 .container { max-width: 768px; }

    .about-us .section-3 { margin-bottom: 80px; overflow: hidden; }
    .about-us .section-3 .container { padding-right: 0; }
    .about-us .section-3 .main-title-wrap { padding-top: 24px; padding-bottom: 170px; border-radius: 0; border-top-left-radius: 16px; border-bottom-left-radius: 40px; padding-right: 24px; }
    .about-us .section-3 .main-title-wrap .title { flex-flow: column; gap: 0; font-size: 40px; margin-bottom: 16px; }
    .about-us .section-3 .main-title-wrap .title .plus { width: 40px; }
    .about-us .section-3 .main-title-wrap .title .plus:last-child { display: none; }
    .about-us .section-3 .main-title-wrap .txt { font-size: 16px; }

    .about-us .section-3 .cert-wrap { gap: 40px; flex-flow: column; align-items: center; padding-right: 24px; }
    .about-us .section-3 .cert-wrap .title-wrap { text-align: center; }
    .about-us .section-3 .cert-wrap .title-wrap .plus { width: 48px; }
    .about-us .section-3 .cert-wrap .title-wrap .title { font-size: 40px; }
    .about-us .section-3 .cert-list { width: 100%; flex-flow: wrap; gap: 16px; justify-content: center; }
    .about-us .section-3 .cert-item { width: 100%; max-width: 320px; padding: 16px 0; text-align: center; font-size: 18px;border-radius: 30px; }
    .about-us .section-3 .cert-slide { position: relative; margin-top:0; margin-top: -130px; padding-bottom: 32px; padding-right: 24px;}
    .about-us .section-3 .cert-img-list { margin-top: 0; }
    .about-us .section-3 .cert-pagination { top: unset; bottom: 0; width: calc( 100% - 84px ); left: 50%; right: unset; transform: translateX(calc( -50% - 12px )); }
    .about-us .section-3 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #0097ff; }
    
    .about-us .section-4 .container { flex-flow: column; gap: 0; padding: 0; }
    .about-us .section-4 .left { background-image: linear-gradient(110deg, #0093f8 16%, #29bdc2 55%, #50d890 91%); border-radius: 0; border-bottom-left-radius: 0; max-width: unset; width: 100%; }
    .about-us .section-4 .left .title-wrap { padding: 24px 0 64px; text-align: center; }
    .about-us .section-4 .left .title-wrap .plus { width: 40px; margin-bottom: 0; }
    .about-us .section-4 .left .title-wrap .title { font-size: 40px; margin-bottom: 16px; }
    .about-us .section-4 .left .title-wrap .txt { font-size: 16px; }
    .about-us .section-4 .left> img { display: none; }

    .about-us .section-4 .right { width: 100%; gap: 16px; justify-content: center; }
    .about-us .section-4 .right .partner-list { height: 360px; width: calc( 50% - 8px ); max-width: 240px; overflow: hidden; position: relative; padding: 0 10px; margin-top: -30px; }
    .about-us .section-4 .right .partner-list .img-box { height: 60px; border-radius: 12px; background-color: #fff;}
    
    .about-content .section-1 { padding-bottom: 48px; }
    .about-content .section-1 .container { max-width: 768px; flex-flow: column-reverse; gap: 16px; align-items: flex-start; }
    .about-content .section-1 .left { width: 100%; }
    .about-content .section-1 .left .plus { width: 48px; }
    .about-content .section-1 .left .title { font-size: 32px; margin-bottom: 24px; line-height: 1.25; }
    .about-content .section-1 .left .txt { font-size: 14px; }
    .about-content .section-1 .right { width: 100%; }

    .about-content .content .container { max-width: 768px; flex-flow: column; gap: 60px; align-items: flex-start; }
    .about-content .content .right .title-wrap { margin-bottom: 24px; }
    .about-content .content .right .title-wrap img { max-width: 180px; display: block; margin-bottom: 24px; }
    .about-content .content .right .title-wrap .title { font-size: 32px; }
    .about-content .content .right .title-wrap .num { font-size: 56px; top: -32px; right: -40px; }
    .about-content .content .right .txt-wrap .txt { font-size: 14px; margin-bottom: 16px; }
    .about-content .content .right .txt-wrap .notice { font-size: 17px; color: #9e9e9e; }
    .about-content .content .right .info-list { gap: 8px; margin: 0 auto; }
    .about-content .content .right .info-list li { width: calc( ( 100% - 16px ) / 3 ); max-width: 184px; height: auto; padding: 16px 0; border-radius: 16px; gap: 8px; }
    .about-content .content .right .info-list li img { width: 32px; height: 32px; }
    .about-content .content .right .info-list li .txt { font-size: 14px; }
    .about-content .content .right .info-list li .title { font-size: 16px; }

    .about-content .section-2 { padding: 48px 0; }
    .about-content .section-2 .left { width: 100%; gap: 16px; }
    .about-content .section-2 .left .img-box { border-radius: 24px; }
    .about-content .section-2 .right { width: 100%; }

    .about-content .section-3 { padding: 48px 0; }
    .about-content .section-3 .container { flex-flow: column; gap: 60px; }
    .about-content .section-3 .left { width: 100%; }
    .about-content .section-3 .right { width: 100%; }
    .about-content .section-3 .right .title-wrap .num { right: -40px; }

    .about-content .section-4 { padding-top: 48px; }
    .about-content .section-4 .container { max-width: 768px; }
    .about-content .section-4 .title-wrap { margin-bottom: 48px; }
    .about-content .section-4 .title-wrap .balloon { padding: 12px 24px; border-radius: 24px; font-size: 17px; margin-bottom: 16px;}
    .about-content .section-4 .title-wrap .balloon::after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #0097ff; bottom: -10px; }
    .about-content .section-4 .title-wrap .title { font-size: 24px; }
    .about-content .section-4 .comingup-list { gap: 24px; flex-flow: wrap; }
    .about-content .section-4 .comingup-list li .img-box { border-radius: 16px; margin-bottom: 24px; }
    .about-content .section-4 .comingup-list li .date { margin-bottom: 24px; }
    .about-content .section-4 .comingup-list li .title { font-size: 20px; margin-bottom: 16px; }
    .about-content .section-4 .comingup-list li .txt { font-size: 14px; }

    /* contact */
    .contact { padding-top: 40px; padding-bottom: 40px; }
    .contact .container { background: none; }
    .contact-wrap { margin: 0 auto; padding-bottom: 0; }
    .contact-wrap .title-wrap { margin-bottom: 24px; }
    .contact-wrap .title-wrap .plus { width: 48px; margin-bottom: 16px; }
    .contact-wrap .title-wrap .title { font-size: 32px; margin-bottom: 16px; }
    .contact-wrap .title-wrap .txt { font-size: 14px; }
    .contact-wrap .info-list { gap: 16px; padding-bottom: 24px; margin-bottom: 24px; }
    .contact-wrap .info-list li { gap: 8px; }
    .contact-wrap .info-list .icon { width: 32px; height: 32px; }
    .contact-wrap .info-list .icon i { font-size: 18px; line-height: 32px; }
    .contact-wrap .info-list .txt { font-size: 14px; }

    .contact-form { gap: 16px; }
    .contact-form .contact-list { gap: 16px; flex-flow: wrap; }
    .contact-form .contact-item { gap: 8px; }
    .contact-form .contact-item.name { width: 100%; }
    .contact-form .contact-item.email { width: 100%; }
    .contact-form .contact-item .title { font-size: 16px; }
    .contact-form .contact-item .form-input { height: 48px; border-radius: 24px; font-size: 14px; }
    .contact-form .contact-item .form-textarea { height: 160px; border-radius: 24px; font-size: 14px; }
    .contact-form .contact-agree .check-icon { width: 16px; height: 16px; }
    .contact-form .contact-agree .check-icon i { line-height: 14px; }
    .contact-form .contact-agree .checked-item .txt { font-size: 14px; }

    .contact-wrap .submit-btn { margin: 0 auto; display: block; margin-top: 32px; width: 180px; height: 48px; border-radius: 24px; line-height: 48px; font-size: 16px; }

    /* report - 자녀선택 */
    .report-index { background: none; }
    .report-index-wrap { flex-flow: column; padding-top: 40px; padding-bottom: 40px; }
    .report-index-wrap .title-wrap { margin-bottom: 40px; text-align: center; }
    .report-index-wrap .title-wrap .plus { width: 48px; margin-bottom: 16px; }
    .report-index-wrap .title-wrap .title { font-size: 32px; margin-bottom: 16px; }
    .report-index-wrap .title-wrap .txt { font-size: 14px; margin-bottom: 26px; }
    .report-index-wrap .title-wrap .btn { height: 48px; border-radius: 24px; line-height: 44px; font-size: 14px; margin: 0 auto; }

    .children-list { gap: 32px; max-width: unset; justify-content: center; }
    .children-list .children-item { width: calc( ( 100% - 32px ) /2 ); }
    .children-list .children-box { padding-top: 32px; padding-bottom: 24px; }
    .children-list .children-box .img-box { width: 160px; height: 160px; margin-bottom: 16px; }
    .children-list .children-box .img-box::after { width: calc( 100% - 12px ); height: calc( 100% - 12px ); }
    .children-list .children-box .img-box img { transform: translateY(-12px); }
    .children-list .children-box .name { font-size: 32px; margin-bottom: 8px; }
    .children-list .children-box .age-wrap { margin-bottom: 24px; }
    .children-list .children-box .age-wrap .birth { font-size: 16px; }
    .children-list .children-box .age-wrap .age { font-size: 16px; }
    .children-list .children-box .result { font-size: 16px; }

    .children-list .children-item:nth-child(4n), .children-list .children-item:nth-child(4n+1) { border: 2px solid #50d890; }
    .children-list .children-item:nth-child(4n)::after, .children-list .children-item:nth-child(4n+1)::after { background: #50d890; }
    .children-list .children-item:nth-child(4n) .children-box .img-box::after, .children-list .children-item:nth-child(4n+1) .children-box .img-box::after { background: #50d890; }
    .children-list .children-item:nth-child(4n) .btn, .children-list .children-item:nth-child(4n+1) .btn { background: #50d890; }
    .children-list .children-item:nth-child(4n) .color, .children-list .children-item:nth-child(4n+1) .color { color: #50d890; }

    .children-list .children-item:nth-child(2n-1) .color { color: #0097ff; }
    .children-list .children-item:nth-child(2n-1) { border: 2px solid #0097ff; }
    .children-list .children-item:nth-child(2n-1)::after { background: #0097ff; }
    .children-list .children-item:nth-child(2n-1) .children-box .img-box::after { background: #0097ff; }
    .children-list .children-item:nth-child(2n-1):hover .children-box .img-box::after { background: #fff; }
    .children-list .children-item:nth-child(2n-1) .btn { background: #0097ff; }
    .children-list .children-item:nth-child(2n-1) .color { color: #0097ff; }

    /* 호버효과 */
    .children-list .children-item:hover .children-box .img-box::after { background: #fff; }
    .children-list .children-item:hover .color { color: #fff; }
    .children-list .children-item:nth-child(4n):hover .btn, .children-list .children-item:nth-child(4n+1):hover .btn {color: #50d890; }
    .children-list .children-item:nth-child(2n-1):hover .btn { background: #fff; color: #0097ff; }

    /* 리포트 */
    .report-wrap { padding-top: 40px; padding-bottom: 40px; }
    .report-wrap .title-wrap { flex-flow: column; gap: 16px; padding-bottom: 16px; margin-bottom: 24px; }
    .report-wrap .title-wrap .title { gap: 8px; }
    .report-wrap .title-wrap .title .plus { width: 32px; }
    .report-wrap .title-wrap .title .txt { font-size: 32px; }
    .report-sub-nav { flex-flow: wrap; }
    .report-sub-nav-item, .report-sub-nav i { font-size: 14px; }

    /* 리포트 상단 nav */
    .report-nav { flex-flow: column; gap: 24px; align-items: center; border-radius: 24px; padding: 32px 24px; margin-bottom: 32px; }
    .report-nav .my-child { flex-flow: column; width: auto; gap: 24px; }
    .report-nav .my-child .img-box { width: 134px; height: 134px; }
    .report-nav .my-child .txt-box { text-align: center; gap: 8px; }
    .report-nav .my-child .txt-box .name { font-size: 32px; }
    .report-nav .my-child .txt-box .age-wrap .birth { font-size: 16px; }
    .report-nav .my-child .txt-box .age-wrap .birth::after { height: 14px; }
    .report-nav .my-child .txt-box .age-wrap .age { font-size: 16px; }
    .report-nav .my-child .txt-box .age-wrap .age strong { font-weight: bold; color: #fff; }
    .report-nav .report-gnb { gap: 8px; width: 100%; flex-flow: wrap; justify-content: center; }
    .report-nav .report-gnb li { width: calc( ( 100% - 24px ) / 4 ); }
    .report-nav .report-gnb-item { padding: 0; border-radius: 8px; height: 64px; }
    .report-nav .report-gnb-item .img-box { display: none; }
    .report-nav .report-gnb-item .title { font-size: 14px; }

    /* 리포트 리스트 */
    .report-list { gap: 32px; flex-flow: wrap; justify-content: center; }
    .report-item { width: calc( (100% - 32px) / 2); border-radius:16px; }
    .report-item .txt-box { padding: 32px; }
    .report-item .txt-box .title { font-size: 24px; padding-bottom: 16px; margin-bottom: 16px; }
    .report-item .txt-box .date-wrap { gap: 16px; margin-bottom: 16px; }
    .report-item .txt-box .date-wrap .date, .report-item .txt-box .date-wrap .round { font-size: 14px; }
    .report-item .txt-box .date-wrap .date::after { height: 12px; right: -8px; }
    .report-item .txt-box .txt { font-size: 14px; }
    .report-item .txt-box .price { font-size: 24px; margin-top: 16px; }
    .report-item .more-btn { width: 52px; height: 52px; border-top-left-radius: 16px; line-height: 52px; font-size: 14px; }
    .report-item .more-btn i { font-size: 26px; line-height: 52px; }

    /* 리포트 리스트 - 확인불가 */
    .report-item.disabled .more-btn { width: 88px; }

    /* 리포트 상세페이지 (교육 리포트) */
    .report_edu { padding-top: 40px; padding-bottom: 40px; }
    .report_edu .container { max-width: 768px; margin: 0 auto; }
    .report_edu .main-title-wrap { flex-flow: column; gap: 32px; align-items: center; margin-bottom: 40px; }
    .report_edu .main-title-wrap .left { width: 100%; }
    .report_edu .main-title-wrap .right { width: 100%; text-align: center; }
    .report_edu .main-title-wrap .title-img { max-width: 180px; }
    .report_edu .main-title-wrap .main-title { font-size: 32px; margin-bottom: 24px; }
    .report_edu .main-title-wrap .report-sub-nav { margin-bottom: 16px; justify-content: center; }
    .report_edu .main-title-wrap .title-box { justify-content: center; margin-bottom: 0; }
    .report_edu .main-title-wrap .title-box .title { font-size: 16px; }
    .report_edu .main-title-wrap .title-box .date { font-size: 14px; }

    .report_edu .tab-link-wrap { margin-bottom: 40px; max-width: 480px; height: 48px; border-radius: 24px; }
    .report_edu .tab-link { border-radius: 24px; line-height: 48px; font-size: 14px; }


    .result-main { flex-flow: column; padding: 0; border-radius: 0; background: none; box-shadow: none; gap: 24px; margin-bottom: 24px; margin-top: 90px; }
    .result-main .left { padding: 24px; border-radius: 24px; background: #0097ff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); width: 100%; } 
    .result-main .my-child { flex-flow: column; text-align: center; gap: 24px; padding-bottom: 24px; margin-top: -90px; }
    .result-main .my-child .img-box { width: 134px; height: 134px; border: 2px solid #0097ff; }
    .result-main .my-child .txt-box { gap: 8px; }
    .result-main .my-child .txt-box .name { font-size: 24px; }
    .result-main .my-child .txt-box .age-wrap p { font-size: 16px; }
    .result-main .my-child .txt-box .age-wrap p:not(:last-child)::after { height: 14px; right: -8px; background: #fff; top: 50%; transform: translateY(-50%); }
    .result-main .report-type-list { padding: 24px 0 0; gap: 16px; }
    .result-main .report-type-item { flex-flow: wrap; gap: 4px 16px; }
    .result-main .report-type-item::after { height: 16px; }
    .result-main .report-type-item .title { font-size: 16px; }
    .result-main .report-type-item .txt { font-size: 16px; }
    .result-main .right { width: 100%; border-radius: 24px; padding: 16px; }

    .chart-wrap { min-height: 240px; }

    .report-detail-title { padding: 24px; gap: 8px; flex-flow: column; align-items: center; margin-bottom: 40px; }
    .report-detail-title .plus { width: 32px; }
    .report-detail-title .title { font-size: 40px; }
    .report-detail-title .txt { font-size: 14px; }

    .report-detail-list { gap: 24px; margin-bottom: 40px; }
    .report-detail-item { width: 100%; border-radius: 24px; padding: 24px; }

    .result-item .title-wrap { margin-bottom: 24px; }
    .result-item .title-wrap .title { font-size: 20px; }
    .result-item .title-wrap .txt-box { height: auto; border-radius: 16px; padding: 8px 16px; font-size: 14px; flex-flow: wrap; justify-content: center; gap: 4px; }
    .result-item .title-wrap .txt-box .percent { padding: 0; }
    .result-item .title-wrap .txt { font-size: 12px; word-break: keep-all; }
    .result-item .total-wrap { margin-top: 16px; padding: 24px 16px; }
    .result-item .total-wrap .title { font-size: 16px; padding-bottom: 8px; margin-bottom: 8px; }
    .result-item .total-wrap .percent-list { gap: 8px 16px; margin-bottom: 16px; }
    .result-item .total-wrap .percent-item { width: calc( ( 100% - 16px ) / 2 ); justify-content: flex-start; gap: 16px; }
    .result-item .total-wrap .percent-item .sub-title { font-size: 14px; }
    .result-item .total-wrap .percent-item .percent { font-size: 14px; }
    .result-item .total-wrap .total-percent { padding: 8px 0; border-radius: 14px; font-size: 14px; }

    /* 리포트 상세페이지 - 하단 리포트 nav - 세로형 */
    .report-detail-nav:not(:nth-child(2n-1)) { width: 100%; }
    .report-detail-nav { flex-flow: wrap; gap: 16px; }
    .report-detail-nav .nav-item { border-radius: 24px; padding: 24px; }
    .report-detail-nav .nav-item .sub-title { font-size: 14px; margin-bottom: 4px; }
    .report-detail-nav .nav-item .title { font-size: 24px; margin-bottom: 12px; }
    .report-detail-nav .nav-item .txt { font-size: 12px; }
    .report-detail-nav .nav-item-wrap { flex-flow: wrap; gap: 16px; width: 100%; }
    .report-detail-nav .nav-item-wrap.col-group .nav-item { background-position: right center; text-align: left; padding: 24px; }
    .report-detail-nav .nav-item-wrap.col-group .nav-item .sub-title { font-size: 14px; margin-bottom: 4px; }
    .report-detail-nav .nav-item-wrap.col-group .nav-item .title { font-size: 24px; margin-bottom: 12px; }
    .report-detail-nav .nav-item-wrap.col-group .nav-item .txt { font-size: 12px; }

    /* 리포트 상세페이지 - 하단 리포트 nav - 가로형 */
    .report-detail-nav:not(:nth-child(2n)) .nav-item-wrap { width: 100%; }
    .solution-list .report-detail-nav .nav-item-wrap { width: 100%; }

    /* 리포트 상세페이지 - 하단 페이지 이동 버튼 */
    .footer-btn-wrap { justify-content: center; gap: 16px; height: 48px; }
    .footer-btn-wrap .btn { width: 160px; height:48px; border-radius: 24px; line-height: 48px; font-size: 16px; position: relative; }
    .footer-btn-wrap .btn i { font-size: 24px; }
    .footer-btn-wrap .prev-btn { padding-left: 16px; }
    .footer-btn-wrap .prev-btn i { left: 16px; }
    .footer-btn-wrap .next-btn { padding-right: 16px; }
    .footer-btn-wrap .next-btn i { right: 16px; }

    /* 리포트 상세페이지 (교육 리포트) - 솔루션 */
    .solution-item .solution-title { font-size: 20px; margin-bottom: 16px; }

    .scroll-wrap { max-height: 380px; }
    .scroll-wrap .more-btn { font-size: 14px; }
    .scroll-wrap .solution-detail-list { padding-bottom: 32px; }

    .solution-detail-list { gap: 16px; }
    .solution-detail-item { padding: 24px; border-radius: 16px; gap: 16px; }
    .solution-detail-item .icon { width: 32px; height: 32px; }
    .solution-detail-item .txt-box { text-align: center; }
    .solution-detail-item .txt-box .title { font-size: 16px; margin-bottom: 16px; }
    .solution-detail-item .txt-box .txt { font-size: 11px; line-height: 1.2; }
    .solution-detail-item .quiz-txt { padding: 8px; margin-bottom: 16px; font-size: 14px; }
    .solution-detail-item .quiz-img-list { gap: 8px; margin-bottom: 24px; }
    .solution-detail-item .quiz-img-item { width: calc( ( 100% - 8px * 2 ) / 3 ); border-radius: 8px; padding: 12px; }
    .solution-detail-item .quiz-img-item .img-box { width: 100%; height: auto; margin: 0 auto 8px; }
    .solution-detail-item .quiz-result-item { font-size: 16px; }
    .solution-detail-item .quiz-tips { padding-top: 32px; text-align: left; }
    .solution-detail-item .quiz-tips-txt { padding-left: 8px; font-size: 12px; }
    .solution-detail-item .quiz-tips-txt::after { top: 6px; }

    .solution-total-item { padding: 32px; border-radius: 24px; flex-flow: column; align-items: center; gap: 24px; }
    .solution-total-item .title { flex-flow: column; gap: 8px; font-size: 20px; }
    .solution-total-item .title img { width: 36px; }
    .solution-total-item .total-txt { flex-flow: column; text-align: center; word-break: keep-all; line-height: 1.2; font-size: 20px; }
    .solution-total-item .total-score { width: 200px; padding: 8px 0; border-radius: 16px; font-size: 20px;}
    .solution-total-item .total-score .score { font-size: 48px; }

    /* 리포트 상세페이지 (교육 리포트) - 추천활동 */
    .activity-item .activity-title { margin-bottom: 16px; text-align: center; }
    .activity-item .activity-title .title { font-size: 24px; }
    .activity-item .activity-title .sub-title { font-size: 16px; margin-bottom: 8px; }
    .activity-detail-list { gap: 16px; }
    .activity-detail-item { padding: 32px; text-align: center; }
    .activity-detail-item .title { font-size: 16px; margin-bottom: 16px; }
    .activity-detail-item .txt { font-size: 14px; }

    /* 리포트 상세페이지 (심리 리포트) */
    .report_psy { padding-top: 40px; padding-bottom: 40px; }
    .report_psy .main-title-wrap { align-items: flex-start; flex-flow: column; gap: 16px; padding-bottom: 16px; } 
    .report_psy .main-title { font-size: 32px; gap: 8px; }
    .report_psy .main-title .plus { width: 32px; }

    .report_psy .result-main { gap: 0; padding: 24px; border-radius: 24px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); }
    .report_psy .result-main .my-child { padding-bottom: 24px; border-bottom: 2px solid #fff; }
    .report_psy .result-main .my-child .img-box { border: 2px solid #47b972; }
    .report_psy .result-main .report-type-list { width: 100%; gap: 16px; }
    .report_psy .result-main .report-type-item { width: 100%; }

    .report_psy .main-chart { border-radius: 24px; padding: 16px; margin-bottom: 24px; }
    .report_psy .main-chart .chart-wrap { min-height: 400px; }
    .report_psy .main-chart .chart-bg-list { margin-top: 16px; gap: 16px; }
    .report_psy .main-chart .chart-bg-item { font-size: 14px; flex-flow: column; }
    .report_psy .main-chart .chart-bg-item .color { width: 36px; height: 14px; }
    .report_psy .main-chart .notice-txt { margin-top: 24px; }
    .report_psy .main-chart .notice-txt .txt { font-size: 14px; margin-top: 8px; }

    .report_psy .report-detail-list { align-items: flex-start; }

    .report_psy .result-item .title-wrap .sub-title { font-size: 15px; }
    .report_psy .result-item .title-wrap .txt { font-size: 14px; }

    .report_psy .result-item .total-wrap { flex-flow: column; }
    .report_psy .result-item .score-wrap { border-radius: 16px; padding: 24px; gap: 16px; width: 100%; }
    .report_psy .result-item .score-wrap .title { font-size: 18px; }
    .report_psy .result-item .score-wrap .title .name { font-size: 20px; }
    .report_psy .result-item .score-wrap .txt { font-size: 12px; }
    .report_psy .result-item .score-box { max-width: 180px; height: 64px; font-size: 16px; }
    .report_psy .result-item .score-box .score { font-size: 40px; }
    .report_psy .result-item .detail-result-wrap { padding: 24px; border-radius: 16px; gap: 8px; width: 100%; font-size: 16px; line-height: 1.5; }
    .report_psy .result-item .detail-result-wrap i { font-size: 24px; }
    .report_psy .result-item .detail-result-wrap .txt { font-size: 16px; }
    .report_psy .result-item .detail-result-wrap .result-box { padding: 16px; font-size: 18px; }

    .report_psy .scroll-wrap { max-height: 320px; }
    .report_psy .result-item .solution-detail-list { border-radius: 16px; padding: 24px; padding-bottom: 48px; }
    .report_psy .result-item .solution-detail-list .title { font-size: 18px; padding-bottom: 16px; margin-bottom: 16px; }

    /* 리포트 상세페이지 (비교분석 리포트) */
    .report_analysis .result-item .title-wrap { margin-bottom: 0; }

    /* 마이페이지 */
    .mypage { padding: 80px 24px 0; }
    .mypage-wrap { margin-left: 0; width: 100%; padding: 40px 0; max-width: 768px; margin: 0 auto; }

    /* 마이페이지 - 좌측 nav */
    .mypage-nav { max-width: 768px; margin: 0 auto; position: static; height: auto; width: 100%; border-radius: 24px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); padding: 32px; }
    .mypage-gnb-wrap { gap: 16px; }
    .mypage-gnb-wrap .logo { width: 60px; }
    .mypage-gnb-wrap .title { font-size: 32px; margin-bottom: 8px; }
    .mypage-gnb { width: 100%; gap: 8px; flex-flow: wrap; justify-content: center; }
    .mypage-gnb-item { width: calc( ( 100% - 8px * 2 ) / 3 ); max-width: 180px; height: 40px; border-radius: 20px; line-height: 36px; font-size: 14px; }
    .mypage-nav .copy-wrap { display: none; }

    /* 마이페이지 - 정보수정 */
    .mypage-profile { padding: 32px 24px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
    .mypage-profile> .title { font-size: 24px; margin-bottom: 32px; }
    .mypage-profile .form-list { gap: 16px; }
    .mypage-profile .form-list-item { flex-flow: column; align-items: flex-start; }
    .mypage-profile .form-list-item .form-title { width: auto; }
    .mypage-profile .form-list-item .form-title .title { font-size: 14px; }
    .mypage-profile .form-list-item.col-group .form-input { width: 100%; }
    .mypage-profile .form-list-item .form-group {width: 100%; gap: 8px; }
    .mypage-profile .form-list-item .form-group .kakao-icon { width: 40px; height: 40px; }
    .mypage-profile .form-list-item .form-btn { width: 96px; }
    .mypage-profile .form-list-item .form-group .form-input { width: calc( 100% - 96px - 8px ); }
    .mypage-profile .form-list-item.id .form-group .form-input { width: calc( 100% - 40px - 8px ); }
    .mypage-profile .form-list-item .sticker-wrap { width: calc( 100% - 96px - 8px ); }
    .mypage-profile .form-list-item .sticker-wrap .form-input { width: 100%; }
    .mypage-profile .form-list-item.form-title { justify-content: flex-start; margin-left: 0; }
    .mypage-profile .btn-wrap { gap: 8px; margin-top: 32px; }
    .mypage-profile .btn-wrap .btn { height: 48px; line-height: 48px; font-size: 14px; }
    .mypage-profile .btn-wrap .next-btn { width: 96px; }
    .mypage-profile .btn-wrap .submit-btn { width: calc( 100% - 96px - 8px ); }

    /* 마이페이지 - 정보수정 - input-date placeholde */
    .mypage-profile .form-list-item .form-placeholder-wrap { width: 100%; }

    /* 마이페이지 - 자녀관리 */
    .children-list .children-add-item { padding: 80px 0; gap: 24px; }
    .children-list .children-add-item .add-btn { width: 134px; height: 134px; }
    .children-list .children-add-item .add-btn i { font-size: 64px; line-height: 134px; }
    .children-list .children-add-item .txt { font-size: 24px; }

    /* 마이페이지 - 결제내역 */
    .mypage-payment { padding: 32px 24px; }
    .mypage-payment .title-wrap { flex-flow: column; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; }
    .mypage-payment .title-wrap .title { font-size: 24px; font-weight: bold; }
    .mypage-payment .search-wrap { width: 100%; gap: 4px; align-items: center; }
    .mypage-payment .search-wrap .search-input { width: calc( (100% - 56px - 16px) / 2); height: 36px; padding: 0 8px; font-size: 14px; }
    .mypage-payment .search-wrap .search-btn { width: 56px; height: 36px; font-size: 14px; }

    .payment-table { border-spacing: 0 8px; min-width: 768px; }
    .payment-table th { padding: 8px 16px; padding-right: 0; font-size: 14px; }
    .payment-table th:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
    .payment-table th:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
    .payment-table td { padding: 8px 16px; padding-right: 0; font-size: 13px; }
    .payment-table td:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
    .payment-table td:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
}

@media screen and (max-width: 768px) {
    .children-list .children-item { width: 100%; max-width: 480px; }
    .report-nav .report-gnb li { width: calc( ( 100% - 8px ) / 2 ); }
    .report-item { width: 100%; }
    .result-item .total-wrap .percent-item { width: 100%; justify-content: center; }

    .children-list .children-add-item { width: 100%; max-width: 480px; }
}

@media screen and (max-width: 480px) {
    .report_edu .main-title-wrap .title-box { flex-flow: column; height: auto; padding: 16px 24px; gap: 4px; }
}