/* 공통 */ div.pg-wrap div.pg-box{background: #fff; padding: 2rem; border: 1px solid var(--color-gray400); border-radius: 1rem; box-shadow: 0 10px 20px rgba(0,0,0,.05);} div.pg-wrap div.pg-inbox{background: #f8fafc; border: 1px solid var(--color-gray300); border-radius: 0.5rem; padding: 1.25rem;} div.pg-wrap div.pg-box p.sm-tit{font-size: 1.25rem; font-family: "Pretendard-SemiBold" , sans-serif; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-gray400);} div.pg-wrap div.pg-box p.sm-tit span.esse{font-size: 1rem; margin-left: 0.5rem;} /* (공통) 정보 요약 내용 */ div.pg-wrap div.pg-inbox.info-summary div.info-wrap{display: grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap: 2%;} div.pg-wrap div.pg-inbox.info-summary div.info-wrap div.item{border-bottom: 1px solid var(--color-gray400); padding: 1rem 0;} div.pg-wrap div.pg-inbox.info-summary div.info-wrap div.item p.tit{font-size: 1rem; color: var(--color-gray700); margin-bottom: 0.8rem; font-family: "Pretendard-Medium", sans-serif;} div.pg-wrap div.pg-inbox.info-summary div.info-wrap div.item div.con{font-size: 1.125rem; font-family: "Pretendard-Bold", sans-serif;} /* 공통 입력폼 */ div.pg-wrap div.pg-inbox div.top-con{display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;} div.pg-wrap div.pg-inbox div.top-con a.add-btn{font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; color: var(--color-main01); font-family: "Pretendard-Bold", sans-serif; position: relative; padding-bottom: 0.25rem;} div.pg-wrap div.pg-inbox div.top-con a.add-btn svg{width: 0.8rem; height: 0.8rem;} div.pg-wrap div.pg-inbox div.top-con a.add-btn::after{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--color-main01); transform: scaleX(0); transform-origin: left; transition: 0.3s; -webkit-transition: 0.3s;} div.pg-wrap div.pg-inbox div.top-con a.delete-btn{font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; color: var(--color-gray600); font-family: "Pretendard-Bold", sans-serif; position: relative;} div.pg-wrap div.pg-inbox div.top-con a.delete-btn svg{width: 0.8rem; height: 0.8rem; transform: rotate(45deg);} div.pg-wrap div.pg-inbox div.top-con p.tit{font-size: 1.125rem; font-family: "Pretendard-Bold", sans-serif; position: relative; padding-left: 1.6rem;} div.pg-wrap div.pg-inbox div.top-con p.tit::before{content: ''; position: absolute; width: 1.25rem; height: 1.25rem; left: 0; top: 50%; transform: translateY(-50%);} div.pg-wrap div.pg-inbox div.top-con span.add-con-tit{display: inline-block; font-size: 0.9rem; padding: 0.5rem 1rem; font-family: "Pretendard-Bold", sans-serif; background: #fff; color: var(--color-main02); border: 2px solid var(--color-main02); border-radius: 50px;} @media(hover:hover){ div.pg-wrap div.pg-inbox div.top-con a.add-btn:hover::after{transform: scaleX(1);} div.pg-wrap div.pg-inbox div.top-con a.delete-btn:hover{color: var(--color-red);} } /* 입학원서 작성 > 지원 과정 선택 */ div.pg-wrap div.pg-application.course-type div.pg-box a.course{width: 100%; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1.25rem; transition: .3s; -webkit-transition: .3s;} div.pg-wrap div.pg-application.course-type div.pg-box a.course:last-of-type{margin-bottom: 0;} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item01{border: 1px solid rgba(128, 196, 190, 0.6); background: rgba(0,164,151,.05);} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item02{border: 1px solid var(--color-gray400); background: var(--color-gray100); pointer-events: none;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top{display: flex; justify-content: space-between;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.tit-con{} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.tit-con span.status-lab{font-family: "Pretendard-SemiBold" , sans-serif; padding: 0.25rem 0.5rem; color: #fff; font-size: 0.9rem; border-radius: 4px;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.tit-con div.admission-labels{display: flex; align-items: center; gap: 0.5rem;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.tit-con span.recruitment-lab{font-family: "Pretendard-SemiBold", sans-serif; padding: 0.25rem 0.625rem; color: #5135ad; background: #eeebff; border-radius: 50px; font-size: 0.9rem;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.tit-con span.recruitment-lab.additional{color: #b54708; background: #fff1e8;} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item01 div.top div.tit-con span.status-lab{background: var(--color-main01);} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item02 div.top div.tit-con span.status-lab{background: var(--color-gray600);} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.tit-con p.c-name{font-size: 1.3rem; font-family: "Pretendard-Bold" , sans-serif; margin: 0.8rem 0 1.25rem 0;} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item02 div.top div.tit-con p.c-name{color: var(--color-gray700);} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.check-box{width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-gray400) url('../img/icon_check.svg') center / 45% no-repeat; transition: .3s; -webkit-transition: .3s;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.mid{} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.mid ul{} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.mid ul > li{margin-bottom: 0.625rem; font-family: "Pretendard-Medium", sans-serif; color: #777; font-size: 1.1rem; padding-left: 1.5rem; position: relative;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.mid ul > li::before{content: ''; position: absolute; width: 1rem; height: 1rem; left: 0; top: 2px; opacity: .5;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.mid ul > li.period::before{background: url('../img/icon_calendar.svg') center / 100% no-repeat;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.mid ul > li.major::before{background: var(--color-main01); border-radius: 50%; transform: scale(.45);} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.mid ul > li.document::before{background: url('../img/icon_folder.svg') center / 100% no-repeat;} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item02 div.mid ul > li{color: var(--color-gray600);} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item01 p.next-page{margin-top: 2rem; text-align: right; border-top: 1px solid var(--color-gray300); padding-top: 1.25rem; padding-right: 1.8rem; font-family: "Pretendard-SemiBold", sans-serif; position: relative;} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item01 p.next-page::after{content: ''; position: absolute; width: 1.25rem; height: 1.25rem; right: 0; bottom: 0; background-color: (--color-main04); background: #000; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M484.416 240.917L335.083 91.584C331.059 87.6979 325.67 85.5477 320.077 85.5963C314.483 85.6449 309.133 87.8885 305.177 91.8439C301.222 95.7992 298.978 101.15 298.93 106.743C298.881 112.337 301.031 117.726 304.917 121.749L417.835 234.667H42.6667C37.0088 234.667 31.5825 236.914 27.5818 240.915C23.581 244.916 21.3334 250.342 21.3334 256C21.3334 261.658 23.581 267.084 27.5818 271.085C31.5825 275.086 37.0088 277.333 42.6667 277.333H417.835L304.917 390.251C302.88 392.219 301.255 394.573 300.137 397.175C299.018 399.778 298.43 402.577 298.405 405.41C298.381 408.243 298.921 411.052 299.993 413.674C301.066 416.295 302.65 418.677 304.653 420.68C306.656 422.683 309.038 424.268 311.66 425.34C314.281 426.413 317.091 426.953 319.923 426.928C322.756 426.903 325.555 426.315 328.158 425.197C330.761 424.079 333.115 422.454 335.083 420.416L484.416 271.083C488.415 267.082 490.662 261.657 490.662 256C490.662 250.343 488.415 244.918 484.416 240.917Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M484.416 240.917L335.083 91.584C331.059 87.6979 325.67 85.5477 320.077 85.5963C314.483 85.6449 309.133 87.8885 305.177 91.8439C301.222 95.7992 298.978 101.15 298.93 106.743C298.881 112.337 301.031 117.726 304.917 121.749L417.835 234.667H42.6667C37.0088 234.667 31.5825 236.914 27.5818 240.915C23.581 244.916 21.3334 250.342 21.3334 256C21.3334 261.658 23.581 267.084 27.5818 271.085C31.5825 275.086 37.0088 277.333 42.6667 277.333H417.835L304.917 390.251C302.88 392.219 301.255 394.573 300.137 397.175C299.018 399.778 298.43 402.577 298.405 405.41C298.381 408.243 298.921 411.052 299.993 413.674C301.066 416.295 302.65 418.677 304.653 420.68C306.656 422.683 309.038 424.268 311.66 425.34C314.281 426.413 317.091 426.953 319.923 426.928C322.756 426.903 325.555 426.315 328.158 425.197C330.761 424.079 333.115 422.454 335.083 420.416L484.416 271.083C488.415 267.082 490.662 261.657 490.662 256C490.662 250.343 488.415 244.918 484.416 240.917Z'/%3E%3C/svg%3E") no-repeat center / contain;} @media(hover:hover){ div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item01:hover{border-color: rgba(128, 196, 190, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item01:hover div.top div.check-box{background: var(--color-main01) url('../img/icon_check.svg') center / 45% no-repeat;} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item01:hover p.next-page{color: var(--color-main01);} div.pg-wrap div.pg-application.course-type div.pg-box a.course.c-item01:hover p.next-page::after{background-color: var(--color-main01);} } /* 입학원서 작성 전 유의사항 모달창 */ div.modal-wrap.application-notice-modal div.modal{max-width: 640px;} div.modal-wrap.application-notice-modal ul.num-list > li{position: relative; margin-bottom: 0.8rem; padding-left: 1rem; word-break: keep-all;} div.modal-wrap.application-notice-modal ul.num-list > li:last-child{margin-bottom: 0;} div.modal-wrap.application-notice-modal ul.num-list > li::before{position: absolute; content: ''; font-family: "Pretendard-Bold", sans-serif; left: 0; top: 0px; color: var(--color-main02);} div.modal-wrap.application-notice-modal ul.num-list > li:nth-child(1)::before{content: '1';} div.modal-wrap.application-notice-modal ul.num-list > li:nth-child(2)::before{content: '2';} div.modal-wrap.application-notice-modal ul.num-list > li:nth-child(3)::before{content: '3';} div.modal-wrap.application-notice-modal ul.num-list > li:nth-child(4)::before{content: '4';} div.modal-wrap.application-notice-modal ul.num-list > li:nth-child(5)::before{content: '5';} div.modal-wrap.application-notice-modal ul.num-list > li:nth-child(6)::before{content: '6';} div.modal-wrap.application-notice-modal div.modal div.inner div.term div.term-chk{margin-top: 1.5rem; background: rgba(0, 164, 151, .05); border: 1px solid var(--color-main04); border-radius: 4px; font-family: "Pretendard-SemiBold", sans-serif;} div.modal-wrap.application-notice-modal div.modal div.inner div.term div.term-chk span{display: inline-block; background: var(--color-red); color: #fff; padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem; font-size: 0.9rem;} div.modal-wrap.application-notice-modal div.modal div.inner p.noti-txt{color: #777; text-align: center; margin-top: 1.5rem;} div.modal-wrap.application-notice-modal div.modal div.inner div.btn-wrap a.disabled{padding: 1rem; font-size: 1.125rem;} /* 버튼 */ div.pg-wrap div.btn-wrap{margin-top: 2rem; display: flex; justify-content: space-between; border-top: 1px solid var(--color-gray300); padding-top: 1.5rem;} div.pg-wrap div.btn-wrap.right{justify-content: end;} /* 입학원서 작성 > 단계표시 */ div.pg-wrap div.pg-application div.progress-step{width: 80%; display: flex; margin: 0 auto; margin-bottom: 2rem; margin-top: 3rem;} div.pg-wrap div.pg-application div.progress-step div.step{width: calc(100% / 5); text-align: center; position: relative; z-index: 1;} div.pg-wrap div.pg-application div.progress-step div.step::after{content: ''; position: absolute; width: 50%; height: 4px; right: 0; top: 25%; background: var(--color-gray400); z-index: -1;} div.pg-wrap div.pg-application div.progress-step div.step::before{content: ''; position: absolute; width: 50%; height: 4px; left: 0; top: 25%; background: var(--color-gray400); z-index: -1;} div.pg-wrap div.pg-application div.progress-step div.step:first-child::before{display: none;} div.pg-wrap div.pg-application div.progress-step div.step:last-child::after{display: none;} div.pg-wrap div.pg-application div.progress-step div.step div.step-num{width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-gray300); border: 2px solid #fff; color: var(--color-gray700); display: flex; justify-content: center; align-items: center; margin: 0 auto; font-family: "Pretendard-Bold" , sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);} div.pg-wrap div.pg-application div.progress-step div.step p{margin-top: 1rem; font-family: "Pretendard-Medium", sans-serif;} div.pg-wrap div.pg-application div.progress-step div.step.on::after{background: var(--color-main02);} div.pg-wrap div.pg-application div.progress-step div.step.on::before{background: var(--color-main02);} div.pg-wrap div.pg-application div.progress-step div.step.on div.step-num{background: var(--color-main02); color: #fff; } div.pg-wrap div.pg-application div.progress-step div.step.on p{color: var(--color-main02); font-family: "Pretendard-Bold", sans-serif;} /* 입학원서 작성 > step1 지원사항 */ div.pg-wrap div.pg-application.step1 div.btn-wrap a.c-btn{text-align: right;} /* 입학원서 작성 > step2 인적사항 */ div.pg-wrap div.pg-application.step2 div.form div.form-item.photo div.con{display: flex; align-items: center; gap: 1rem;} div.pg-wrap div.pg-application.step2 div.form div.form-item.photo div.con div.photo-info ul.d-list > li{font-family: "Pretendard-Bold", sans-serif; position: relative; padding-left: 0.5rem; margin-bottom: 0.5rem;} div.pg-wrap div.pg-application.step2 div.form div.form-item.photo div.con div.photo-info ul.d-list > li::before{position: absolute; content: ''; width: 4px; height: 4px; background: #333; border-radius: 50%; left: 0; top: 7px;} div.pg-wrap div.pg-application.step2 div.form div.form-item.photo div.con div.photo-info ul.sub-list > li{color: #777; font-family: "Pretendard-Regular", sans-serif; margin-top: 0.25rem; } div.pg-wrap div.pg-application.step2 div.form div.form-item.photo div.con div.photo-info ul.sub-list > li::before{content: '-';} div.pg-wrap div.pg-application.step2 div.form div.form-item.nation div.con input[type="text"]{width: auto;} div.pg-wrap div.pg-application.step2 div.form div.form-item.nation div.con input[readonly]{color: #aaa;} div.pg-wrap div.pg-application.step2 div.pg-inbox.current-employment p.tit::before{background: url('../img/icon_company.svg') center / 100% no-repeat; } /* 입학원서 작성 > step3 학력 및 경력 사항 */ div.pg-wrap div.pg-application.step3 div.ec-cont{margin: 2.5rem 0;} div.pg-wrap div.pg-application.step3 div.pg-inbox{margin: 1.25rem 0; display: none;} div.pg-wrap div.pg-application.step3 div.pg-inbox:first-of-type{display: block;} div.pg-wrap div.pg-application.step3 div.pg-inbox div.top-con p.tit{color: var(--color-main02);} div.pg-wrap div.pg-application.step3 div.pg-inbox.univ p.tit::before{background: url('../img/icon_graduation.svg') center / 100% no-repeat;} div.pg-wrap div.pg-application.step3 div.pg-inbox.exp p.tit::before{background: url('../img/icon_career.svg') center / 100% no-repeat;} /* 입학원서 작성 > step5 최종확인 */ div.pg-wrap div.pg-application.step5 div.pg-inbox.info-summary{margin-bottom: 1rem;} div.pg-wrap div.pg-application.step5 div.pg-inbox.info-summary p.tit::before{background: url('../img/icon_document.svg') center / 100% no-repeat;} div.pg-wrap div.pg-application.step5 div.pg-inbox p.esse{font-size: 0.9rem;} div.pg-wrap div.pg-application.step5 div.term-wrap div.pg-inbox.term-top-noti{font-size:1.125rem; line-height:1.5; margin-top:3rem; margin-bottom:1rem; text-align:center; word-break:keep-all; font-family: "Pretendard-Medium", sans-serif;} div.pg-wrap div.pg-application.step5 div.term-wrap div.pg-inbox.term-top-noti p.lg-tit{font-size:1.4rem; margin-bottom:0.5rem; font-family: "Pretendard-SemiBold", sans-serif;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term{margin-bottom:1.5rem;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-box{border: none; background:#fff; overflow: hidden; height:0; border-radius:0; border:0; border-top:1px solid #333;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-box.open{height: auto !important; padding: 1rem 0.5rem; overflow-y: auto; max-height: 18rem; border-bottom:1px solid #333;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-box div.set:first-child p.tit02{margin-top: 0;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-input{position:relative; cursor:pointer;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-input label{font-size: 1.1rem;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-input a.term-box-arrow{width: 1.25rem; height: 1.25rem; display: block; background: url(../img/ico_arrow_down.svg) center / 80% auto no-repeat; position: absolute; top: 50%; right: 0; transform: translateY(-50%);} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-input a.term-box-arrow.open{transform: translateY(-50%) rotate(180deg);} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-input p.term-tit{font-size: 1.1rem; font-family:'Pretendard-Bold',sans-serif; padding:1rem; padding-left:0;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-chk label.c-input{font-family:'Pretendard-Bold',sans-serif; padding:0.5rem 1.8rem;} div.pg-wrap div.pg-application.step5 div.term-wrap div.term div.term-chk{justify-content:start;} /* 제출 서류 업로드 */ div.pg-wrap div.pg-document-upload div.noti-box{margin-bottom: 2rem;} div.pg-wrap div.pg-document-upload div.attach-wrap div.pg-inbox{margin: 1.25rem 0; display: flex; justify-content: space-between; align-items: center;} div.pg-wrap div.pg-document-upload div.attach-wrap div.pg-inbox div.c-file{margin-bottom: 0; width: 40%;} div.pg-wrap div.pg-document-upload div.attach-wrap div.pg-inbox div.c-file div.ci-show div.file-name{display:block; box-sizing:border-box; min-width:0; padding-right: 5.5rem;} div.pg-wrap div.pg-document-upload div.attach-wrap div.pg-inbox p.Pretd_B span.esse{display: block; margin: 0.5rem 0; font-size: 0.85rem;} div.pg-wrap div.pg-document-upload div.attach-wrap div.pg-inbox p.Pretd_B a.download{min-width: unset; padding-left: 2rem; padding-right: 1rem;} div.pg-wrap div.pg-document-upload div.attach-wrap div.pg-inbox p.Pretd_B a.download::after{left: 0.8rem;} /* 지원내역 상세조회 */ div.pg-wrap div.pg-application-history div.apply-form-tit span.num{color: #d92323; font-family: "Pretendard-Bold", sans-serif; font-size: 1.2rem;} div.pg-wrap div.pg-application-history div.apply-form-tit p.sm-tit{display: flex; justify-content: space-between; margin-top: 0.5rem; font-family: "Pretendard-Bold", sans-serif; font-size: 1.5rem;} div.pg-wrap div.pg-application-history div.apply-form-tit p.sm-tit span.status-lab{position: relative; background: rgba(0, 164, 151, .1); font-size: 1rem; color: var(--color-main01); border: 1px solid var(--color-main01); border-radius: 50px; padding: 0.5rem 1.25rem; padding-left: 2.5rem;} div.pg-wrap div.pg-application-history div.apply-form-tit p.sm-tit span.status-lab::before{content: ''; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; background: var(--color-main01) url('../img/icon_check.svg') center / 50% no-repeat; border-radius: 50%;} div.pg-wrap div.pg-application-history.status-canceled div.apply-form-tit p.sm-tit span.status-lab{background:#fff1f1; color:#d92323; border-color:#d92323;} div.pg-wrap div.pg-application-history.status-canceled div.apply-form-tit p.sm-tit span.status-lab::before{background:#d92323;} div.pg-wrap div.pg-application-history div.cancel-application a{display: block; margin: 0 auto; margin-top: 2rem; font-family: "Pretendard-SemiBold", sans-serif; position: relative;} @media (hover:hover){ div.pg-wrap div.pg-application-history div.cancel-application a:hover{font-family: "Pretendard-Bold", sans-serif;} } /* 등록금 고지서 조회 */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.tit-con{display: flex; justify-content: space-between; align-items: center; background: linear-gradient(-45deg,rgba(0, 164, 151, 1) 0%, rgba(82, 44, 129, 1) 100%); color: #fff; padding: 2rem; border-radius: 1rem 1rem 0 0; animation: gradiBg 10s infinite linear; background-size:400% 400%;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.tit-con div.right{text-align: right;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.tit-con p.tit{font-size: 1.4rem; font-family: "Pretendard-SemiBold", sans-serif;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.tit-con span.sm-txt{font-size: 1rem; margin-bottom: 0.5rem; display: inline-block;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box{border-top-left-radius: 0; border-top-right-radius: 0;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.info-summary div.info-wrap{grid-template-columns: repeat(4, minmax(0, 1fr));} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-statement{margin-top: 2rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-statement table tr.total{background: rgba(167, 139, 250, 0.1);} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-statement table tr.total td{font-size: 1.2rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-statement table tr.total td.total-fee{color: #7c3aed;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.top-con p.tit::before{background: url('../img/icon_bank.svg') center / 80% no-repeat;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.account-info-wrap{display: grid; gap: 2%; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1rem 0 1.25rem 0;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.account-info-wrap div.a-con{background: #fff; padding: 1.25rem; border: 1px solid var(--color-gray300); border-radius: 0.5rem; } div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.account-info-wrap div.a-con span.tit{display: inline-block; color: var(--color-gray700); font-family: "Pretendard-Medium", sans-serif; margin-bottom: 0.5rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.account-info-wrap div.a-con p{font-size: 1.125rem; font-family: "Pretendard-Bold", sans-serif;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box{padding: 1.5rem; border: 1px solid #fed7aa; border-radius: 0.5rem; display: flex; justify-content: space-between; align-items: center;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box div.left-con{display: flex; align-items: center; gap: 1rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box div.left-con div.icon-cir{width: 2.5rem; height: 2.5rem; border-radius: 50%; position: relative;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box div.left-con div.icon-cir::after{position: absolute; content: ''; width: 1.25rem; height: 1.25rem; left: 50%; top: 50%; transform: translate(-50%, -50%);} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box div.left-con > div p:first-child{font-size: 1.1rem; font-family: "Pretendard-Bold", sans-serif;margin-bottom: 0.25rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box div.left-con > div p:last-child{font-family: "Pretendard-Medium", sans-serif;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box div.status-lab{font-family: "Pretendard-Bold", sans-serif; padding: 0.5rem 1rem; border: 2px solid rgb(255 203 198); color: #b91c1c; background: rgba(255,203,198,.5);; border-radius: 50px;} /* 미납상태 .pending */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.pending{background: #fff4f3; border-color: #ffcbc6;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.pending div.left-con div.icon-cir{background: rgba(255,203,198,.5);} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.pending div.left-con div.icon-cir::after{background-color: #b91c1c; -webkit-mask:url('../img/icon_pending.svg')center / 100% no-repeat; mask:url('../img/icon_pending.svg')center / 100% no-repeat;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.pending div.left-con > div p:first-child{color: #b91c1c;} /* 납부완료 상태 .paid */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.paid{background: rgba(0,164,151,.1); border-color: rgba(0,164,151,.4);} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.paid div.left-con div.icon-cir{background: rgba(0,164,151,.2);} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.paid div.left-con div.icon-cir::after{background-color: var(--color-main04); -webkit-mask:url('../img/icon_check_circle.svg')center / 100% no-repeat; mask:url('../img/icon_check_circle.svg')center / 100% no-repeat;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.paid div.left-con > div p:first-child{color: var(--color-main04);} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box.paid div.status-lab{color: var(--color-main04); background: rgba(0,164,151,.1); border-color: rgba(0,164,151,.4);} /* 등록금 납부 유의사항 보기 */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list{margin-top: 2rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list p.tit{color: var(--color-gray700); position: relative; margin-bottom: 1rem; padding-left: 1.5rem; font-family: "Pretendard-Bold", sans-serif; cursor: pointer; } div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list p.tit::before{content: ''; position: absolute; width: 1rem; height: 1rem; left: 0; top: 50%; transform: translateY(-50%); background-color: var(--color-gray700); -webkit-mask: url('../img/icon_info.svg') center / 100% no-repeat; mask:url('../img/icon_info.svg') center / 100% no-repeat;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list p.tit::after{content: ''; position: absolute; width: 1rem; height: 1rem; right: 0; top: 50%; transform: translateY(-50%); background-color: var(--color-gray700); -webkit-mask: url('../img/ico_arrow_down.svg') center / 100% no-repeat; mask: url('../img/ico_arrow_down.svg') center / 100% no-repeat; transition: 0.3s;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list ul{display: none;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list ul > li{font-size: 0.9rem; margin: 0.5rem 0; position: relative; padding-left: 0.8rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list ul > li::before{position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--color-gray700); left: 0; top: 50%; transform: translateY(-50%);} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list.open ul{display: block;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.bot-noti-list.open p.tit::after{transform: translateY(-50%) rotate(180deg);} /* animation */ @keyframes gradiBg{ 0%{background-position:0 50%;} 50%{background-position:100% 50%;} 100%{background-position:0 50%;} } /******** 반응형 ********/ @media screen and (max-width: 1600px){ } @media screen and (max-width: 1440px){ } @media screen and (max-width: 1280px){ } @media screen and (max-width: 1200px){ } @media screen and (max-width: 1024px){ /* 입학원서 작성 > step2 인적사항 */ div.pg-wrap div.pg-application.step2 div.form div.form-item.nation div.con > div.row{flex-wrap: wrap;} div.pg-wrap div.pg-application.step2 div.form div.form-item.nation div.con input[type="text"]{width: 100%;} } @media screen and (max-width: 800px){ /* 제출 서류 업로드 */ div.pg-wrap div.pg-document-upload div.attach-wrap div.pg-inbox{flex-direction: column; align-items: start; gap: 1rem;} div.pg-wrap div.pg-document-upload div.attach-wrap div.pg-inbox div.c-file{width: 100%;} /* 등록금 고지서 조회 */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.tit-con p.tit{font-size: 1.25rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.info-summary div.info-wrap{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2%;} } @media screen and (max-width: 680px){ /* (공통) 정보 요약 내용 */ div.pg-wrap div.pg-inbox.info-summary div.info-wrap{grid-template-columns:repeat(1, minmax(0, 1fr)); gap: 0;} /* 등록금 고지서 조회 */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.account-info-wrap div.a-con{padding: 1rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.account-info-wrap div.a-con span.tit{font-size: 0.9rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.account-info-wrap div.a-con p{font-size: 1rem;} } @media screen and (max-width: 640px){ /* 공통 */ div.pg-wrap div.pg-box{padding: 1.5rem;} /* 입학원서 > 지원 과정 선택 */ div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.tit-con p.c-name{font-size: 1.25rem;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.check-box{width: 1.6rem; height: 1.6rem;} div.pg-wrap div.pg-application.course-type div.pg-box a.course div.mid ul > li{font-size: 1rem;} /* 입학원서 작성 > step2 인적사항 */ div.pg-wrap div.pg-application.step2 div.form div.form-item.photo div.con{flex-wrap: wrap;} div.pg-wrap div.pg-application.step2 div.form div.form-item.photo div.con div.photo-info{width: 100%;} /* 등록금 고지서 조회 */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.tit-con div.right{display: none;} } @media screen and (max-width: 480px){ /* 공통 */ div.pg-wrap div.pg-box p.sm-tit span.esse{margin-left:0; margin-top: 0.5rem; display: block;} div.pg-wrap div.pg-inbox div.top-con{flex-direction:column; align-items: start; gap: 1rem;} div.pg-wrap div.pg-box{padding: 1.25rem;} /* 입학원서 작성 > 단계표시 */ div.pg-wrap div.pg-application div.progress-step{width: 100%;} /* 입학원서 > 지원 과정 선택 */ div.pg-wrap div.pg-application.course-type div.pg-box a.course div.top div.check-box{display: none;} /* 등록금 고지서 조회 */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-statement table tr.total td{font-size: 1.1rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box{padding: 1rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box div.status-lab{font-size: 0.9rem; padding: 0.25rem 0.8rem;} } @media screen and (max-width: 400px){ /* 입학원서 작성 > step5 최종확인 */ /* 지원내역 상세조회 */ div.pg-wrap div.pg-application-history div.apply-form-tit p.sm-tit{flex-direction: column;} div.pg-wrap div.pg-application-history div.apply-form-tit p.sm-tit span.status-lab{width: fit-content; margin-top: 1rem;} /* 등록금 고지서 조회 */ div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.pg-inbox.account div.account-info-wrap{grid-template-columns:repeat(1, minmax(0, 1fr)); gap: 0.5rem;} div.pg-wrap div.pg-tuition-invoice div.tuition-wrap div.pg-box div.payment-status-box div.left-con div.icon-cir{display: none;} } @media screen and (max-width: 320px){ } /* 입학원서 step5 전형료 결제 */ div.pg-wrap div.pg-application.step5 div.pg-inbox.payment-summary{margin-top:2.5rem; margin-bottom:1rem; padding:1.75rem; border-color:#dbe3ec; background:#fff;} div.pg-wrap div.pg-application.step5 div.pg-inbox.payment-summary p.tit::before{background: url('../img/icon_document.svg') center / 100% no-repeat;} div.pg-wrap div.pg-application.step5 div.payment-overview{display:grid; grid-template-columns:0.8fr 1.2fr; gap:1rem; margin-top:1.25rem;} div.pg-wrap div.pg-application.step5 div.payment-overview > div{min-height:7rem; padding:1.25rem; border:1px solid #dfe7ef; background:#f8fafc; display:flex; flex-direction:column; justify-content:center;} div.pg-wrap div.pg-application.step5 div.payment-overview p.tit{font-family:'Pretendard-Bold',sans-serif; color:#222; margin-bottom:0.5rem;} div.pg-wrap div.pg-application.step5 div.payment-overview div.price{display:flex; align-items:flex-end; gap:0.25rem; color:var(--color-main02);} div.pg-wrap div.pg-application.step5 div.payment-overview div.price strong{font-family:'Pretendard-Bold',sans-serif; font-size:2.1rem; line-height:1;} div.pg-wrap div.pg-application.step5 div.payment-overview div.price span{font-family:'Pretendard-Bold',sans-serif; font-size:1.05rem;} div.pg-wrap div.pg-application.step5 div.payment-overview div.payment-guide p:last-child{line-height:1.5; color:#555; word-break:keep-all;} div.pg-wrap div.pg-application.step5 div.payment-widget-area{margin-top:1rem;} div.pg-wrap div.pg-application.step5 div.payment-widget-area:empty{display:none;} div.pg-wrap div.pg-application.step5 div.payment-widget-area #payment-method:not(:empty){padding-top:1rem; border-top:1px solid #e5eaf0;} div.pg-wrap div.pg-application.step5 div.payment-widget-area #agreement:not(:empty){margin-top:0.75rem;} /* 입학원서 step4 학업계획서 byte 안내 */ div.pg-wrap div.pg-application.step4 p.byte-guide{display:flex; justify-content:flex-end; gap:0.875rem; margin-top:0.5rem; color:#667085; font-size:0.875rem;} div.pg-wrap div.pg-application.step4 p.byte-guide strong{color:var(--color-main02); font-family:'Pretendard-Bold',sans-serif;} div.pg-wrap div.pg-application.step4 p.byte-guide em{font-style:normal; color:#333; font-family:'Pretendard-Bold',sans-serif;} div.pg-wrap div.pg-application.step4 p.byte-guide.is-over strong{color:#e5484d;} div.pg-wrap div.pg-application.step4 div.application-plan-guide{margin-bottom:1.5rem; line-height:1.65;} div.pg-wrap div.pg-application.step4 div.application-plan-guide p.guide-title{margin-bottom:0.5rem; color:#222; font-family:'Pretendard-Bold',sans-serif;} div.pg-wrap div.pg-application.step4 div.application-plan-guide p + p{margin-top:0.4rem;} div.pg-wrap div.pg-application.step4 div.application-plan-attach-guide{margin-bottom:0.75rem; padding:0.875rem 1rem 0.875rem 2.75rem; font-size:0.875rem; line-height:1.5;} div.pg-wrap div.pg-application.step4 div.application-plan-attach-guide::before{left:1rem; top:0.875rem;} div.pg-wrap div.pg-application.step4 input[name="optionalAttachmentUrl"]{width:100%;} /* 자기소개 및 학업계획서 문항은 2개씩 배치해 긴 안내문과 입력칸의 폭을 확보한다. */ div.pg-wrap div.pg-application.step4 div.form.application-plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } div.pg-wrap div.pg-application.step4 div.form.application-plan-form div.form-item { min-width: 0; } div.pg-wrap div.pg-application.step4 div.form.application-plan-form textarea { min-height: 11rem; } /* 지원내역 상세조회 대시보드 */ div.pg-wrap div.pg-application-history div.dashboard-tabs ul.tab-list{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.75rem; margin-bottom:1.25rem;} div.pg-wrap div.pg-application-history div.dashboard-tabs ul.tab-list li{min-height:3.5rem; padding:0 1rem; border:1px solid #dbe3ec; background:#fff; display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer;} div.pg-wrap div.pg-application-history div.dashboard-tabs ul.tab-list li.on{border-color:var(--color-main02); background:#f4f8ff; color:var(--color-main02); font-family:'Pretendard-Bold',sans-serif;} div.pg-wrap div.pg-application-history div.document-status-panel{display:flex; align-items:center; gap:1rem; padding:1.5rem; border:1px solid #dbe3ec; background:#f8fafc;} div.pg-wrap div.pg-application-history div.document-status-panel div.status-icon{width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Pretendard-Bold',sans-serif; font-size:1.25rem; background:#f59e0b;} div.pg-wrap div.pg-application-history div.document-status-panel.is-complete div.status-icon{background:var(--color-main02);} div.pg-wrap div.pg-application-history div.document-status-panel p.panel-title{font-family:'Pretendard-Bold',sans-serif; font-size:1.15rem; color:#222;} div.pg-wrap div.pg-application-history div.document-status-panel p.panel-desc{margin-top:0.4rem; color:#555; line-height:1.5;} div.pg-wrap div.pg-application-history div.review-status-header, div.pg-wrap div.pg-application-history div.congrats-box, div.pg-wrap div.pg-application-history div.welcome-box{padding:1.75rem; border:1px solid #dbe3ec; background:#f8fafc; text-align:center;} div.pg-wrap div.pg-application-history div.rejected-box{padding:2rem 1.75rem; border:1px solid #f1d5d5; background:#fff8f8; text-align:center;} div.pg-wrap div.pg-application-history div.rejected-badge{display:inline-flex; align-items:center; min-height:2rem; padding:0 0.9rem; border-radius:999px; background:#ffe8e8; color:#d33; font-family:'Pretendard-Bold',sans-serif; margin-bottom:0.75rem;} div.pg-wrap div.pg-application-history p.rejected-title{font-family:'Pretendard-Bold',sans-serif; font-size:1.35rem; color:#222; margin-bottom:0.6rem;} div.pg-wrap div.pg-application-history p.rejected-desc{line-height:1.65; color:#555;} div.pg-wrap div.pg-application-history div.status-badge-pulse, div.pg-wrap div.pg-application-history div.welcome-badge{display:inline-flex; align-items:center; min-height:2rem; padding:0 0.9rem; border-radius:999px; background:#eef4ff; color:var(--color-main02); font-family:'Pretendard-Bold',sans-serif; margin-bottom:0.75rem;} div.pg-wrap div.pg-application-history h4.review-title, div.pg-wrap div.pg-application-history p.welcome-tit{font-size:1.35rem; margin-bottom:0.5rem;} div.pg-wrap div.pg-application-history p.review-desc, div.pg-wrap div.pg-application-history p.welcome-desc{line-height:1.6; color:#555;} div.pg-wrap div.application-cancel-notice{padding:2rem 1.75rem; border:1px solid #f1c8c8; background:#fff8f8; text-align:center;} div.pg-wrap div.application-cancel-notice div.cancel-badge{display:inline-flex; align-items:center; min-height:2rem; padding:0 0.9rem; border-radius:999px; background:#ffe8e8; color:#d92323; font-family:'Pretendard-Bold',sans-serif; margin-bottom:0.75rem;} div.pg-wrap div.application-cancel-notice p.cancel-title{font-family:'Pretendard-Bold',sans-serif; font-size:1.35rem; color:#222; margin-bottom:0.6rem;} div.pg-wrap div.application-cancel-notice p.cancel-desc{line-height:1.65; color:#555; word-break:keep-all;} div.pg-wrap p.receipt-copy-guide, div.pg-wrap div.receipt-copy-guide{position:relative; margin-top:0.75rem; padding:0.9rem 1rem 0.9rem 2.8rem; border:1px solid #c9dbff; background:#f4f8ff; color:var(--color-main02); font-family:'Pretendard-Bold',sans-serif; line-height:1.5; word-break:keep-all;} div.pg-wrap p.receipt-copy-guide::before, div.pg-wrap div.receipt-copy-guide::before{content:'i'; position:absolute; left:1rem; top:0.9rem; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--color-main02); color:#fff; font-family:'Montserrat_B',sans-serif; font-size:0.8rem; line-height:1.15rem; text-align:center;} div.pg-wrap div.pg-application.step5 div.receipt-copy-guide{margin-top:1.5rem;} div.pg-wrap div.pg-application-history div.timeline-roadmap-container{overflow-x:auto; padding-bottom:0.35rem;} div.pg-wrap div.pg-application-history div.timeline-roadmap{display:grid; grid-template-columns:repeat(7, minmax(8.75rem, 1fr)); gap:0.75rem; min-width:68rem;} div.pg-wrap div.pg-application-history div.timeline-roadmap.result-roadmap{grid-template-columns:repeat(3, minmax(0, 1fr)); min-width:0;} div.pg-wrap div.pg-application-history div.dashboard-tabs ul.tab-list.result-tab{grid-template-columns:1fr;} div.pg-wrap div.pg-application-history div.dashboard-tabs ul.tab-list.result-tab li.static-tab{pointer-events:none; cursor:default;} /* 관리자 입학원서관리 고지서와 동일한 카드형 고지서 화면을 사용합니다. */ div.pg-tuition-invoice .congrats-box, div.pg-tuition-invoice .bot-noti-list{display:none;} div.pg-tuition-invoice .tuition-wrap{max-width:680px; margin:0 auto; background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-shadow:0 4px 6px -1px rgba(0,0,0,.05);} div.pg-tuition-invoice .tit-con{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 24px; margin:0; background:linear-gradient(135deg,#5d25c5 0%,#461c9e 100%); color:#fff;} div.pg-tuition-invoice .tit-con .left, div.pg-tuition-invoice .tit-con .right{display:flex; flex-direction:column; gap:2px;} div.pg-tuition-invoice .tit-con .right{text-align:right;} div.pg-tuition-invoice .tit-con .sm-txt{margin:0; color:rgba(255,255,255,.9); font-size:11px; letter-spacing:.5px;} div.pg-tuition-invoice .tit-con .tit{margin:0; color:#fff; font-size:20px; font-family:'Pretendard-Bold',sans-serif;} div.pg-tuition-invoice .tit-con .right .tit{font-size:14px; color:#ffe353;} div.pg-tuition-invoice .pg-box{padding:24px; border:0; box-shadow:none;} div.pg-tuition-invoice .pg-inbox.info-summary{padding:0 0 20px; margin:0 0 24px; border:0; border-radius:0; background:transparent;} div.pg-tuition-invoice .info-summary .info-wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;} div.pg-tuition-invoice .info-summary .item{padding:0 0 8px; border-bottom:1px solid #e5e7eb;} div.pg-tuition-invoice .info-summary .item .tit{margin:0 0 6px; color:#9ca3af; font-size:11px;} div.pg-tuition-invoice .info-summary .item .con{color:#111827; font-family:'Pretendard-Bold',sans-serif; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} div.pg-tuition-invoice .payment-statement h5{display:flex; align-items:center; gap:6px; margin:0 0 12px; font-size:14px;} div.pg-tuition-invoice .payment-statement h5::before{content:''; width:4px; height:14px; border-radius:2px; background:#5d25c5;} div.pg-tuition-invoice .payment-statement .table01{border-top:2px solid #5d25c5; font-size:13px;} div.pg-tuition-invoice .payment-statement .table01 th{padding:10px 14px; background:#f9fafb; color:#374151;} div.pg-tuition-invoice .payment-statement .table01 td{padding:11px 14px; color:#4b5563;} div.pg-tuition-invoice .payment-statement .table01 tr.total td{background:#f5f1ff; color:#5d25c5; border-bottom:0;} div.pg-tuition-invoice .pg-inbox.account{padding:0; margin-top:24px; border:0; background:transparent;} div.pg-tuition-invoice .account .top-con .tit{display:flex; align-items:center; gap:5px; margin:0 0 12px; font-size:14px;} div.pg-tuition-invoice .account .top-con .tit::before{content:'▣'; color:#5d25c5; font-size:13px;} div.pg-tuition-invoice .account-info-wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;} div.pg-tuition-invoice .account-info-wrap .a-con{padding:12px 16px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb;} div.pg-tuition-invoice .account-info-wrap .a-con.account-number{border-color:#c5a8f9; background:#faf8ff;} div.pg-tuition-invoice .account-info-wrap .tit{color:#9ca3af; font-size:11px;} div.pg-tuition-invoice .account-info-wrap p{margin:4px 0 0; color:#111827; font-family:'Pretendard-Bold',sans-serif; font-size:14px;} div.pg-tuition-invoice .account-info-wrap .account-number p{color:#5d25c5;} div.pg-tuition-invoice .noti-box.yellow{margin-top:14px; padding:12px 16px 12px 45px; border:1px solid #fbefcd; border-radius:8px; background:#fffdf0; color:#9a6a38; font-size:11px; line-height:1.6;} div.pg-tuition-invoice .payment-status-box{display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding:16px 20px; border:1px solid #fecdd3; border-radius:10px; background:#fff1f2;} div.pg-tuition-invoice .payment-status-box .left-con{display:flex; align-items:center; gap:12px;} div.pg-tuition-invoice .payment-status-box .icon-cir{display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:50%; background:#ffe4e6;} div.pg-tuition-invoice .payment-status-box .icon-cir::before{content:'◷'; color:#e11d48; font-size:1.45rem;} div.pg-tuition-invoice .payment-status-box .left-con p{margin:0; color:#4b5563; font-size:12px;} div.pg-tuition-invoice .payment-status-box .left-con p:first-child{color:#be123c; font-family:'Pretendard-Bold',sans-serif; font-size:14px;} div.pg-tuition-invoice .payment-status-box .status-lab{padding:7px 20px; border:1px solid #fecdd3; border-radius:999px; background:#ffe4e6; color:#e11d48; font-family:'Pretendard-Bold',sans-serif;} div.pg-tuition-invoice .btn-center-wrap{margin:28px 0 0;} div.pg-tuition-invoice .btn-center-wrap .print{min-width:160px; background:#1e293b; border-color:#1e293b; color:#fff;} @media (max-width:768px){ div.pg-tuition-invoice .tit-con{align-items:flex-start; flex-direction:column;} div.pg-tuition-invoice .tit-con .right{text-align:left;} div.pg-tuition-invoice .info-summary .info-wrap, div.pg-tuition-invoice .account-info-wrap{grid-template-columns:1fr;} } div.pg-wrap div.pg-application-history div.timeline-step{position:relative; min-height:8.5rem; padding:1.2rem 1rem; border:1px solid #dbe3ec; background:#fff;} div.pg-wrap div.pg-application-history div.timeline-step.step-complete{border-color:#b7d1ff; background:#f6f9ff;} div.pg-wrap div.pg-application-history div.timeline-step.step-active{border-color:var(--color-main02); box-shadow:0 0 0 3px rgba(31,90,170,0.08);} div.pg-wrap div.pg-application-history div.step-icon{width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eef2f7; color:#667085; margin-bottom:0.75rem;} div.pg-wrap div.pg-application-history span.icon-check{color:var(--color-main02); font-family:'Pretendard-Bold',sans-serif;} div.pg-wrap div.pg-application-history span.icon-pulse{width:0.75rem; height:0.75rem; border-radius:50%; background:var(--color-main02); display:block;} div.pg-wrap div.pg-application-history span.icon-dot{width:0.55rem; height:0.55rem; border-radius:50%; background:#98a2b3; display:block;} div.pg-wrap div.pg-application-history span.step-num{display:block; color:#667085; font-size:0.78rem; margin-bottom:0.35rem;} div.pg-wrap div.pg-application-history p.step-name{font-family:'Pretendard-Bold',sans-serif; color:#222;} div.pg-wrap div.pg-application-history p.step-date{margin-top:0.35rem; color:#667085; font-size:0.9rem; line-height:1.35;} div.pg-wrap div.pg-application-history div.welcome-footer-info{padding:0.9rem; background:#fff; border:1px solid #dbe3ec; color:#555;} @media (max-width: 768px){ div.pg-wrap div.pg-application.step5 div.payment-overview{grid-template-columns:1fr;} div.pg-wrap div.pg-application.step5 div.pg-inbox.payment-summary{padding:1.25rem;} div.pg-wrap div.pg-application.step4 div.form.application-plan-form{grid-template-columns:1fr;} div.pg-wrap div.pg-application.step4 p.byte-guide{justify-content:flex-start; flex-wrap:wrap;} div.pg-wrap div.pg-application-history div.dashboard-tabs ul.tab-list, div.pg-wrap div.pg-application-history div.timeline-roadmap{grid-template-columns:1fr; min-width:0;} div.pg-wrap div.pg-application-history div.document-status-panel{align-items:flex-start;} }