@charset "UTF-8";

/*////공통 레이아웃////*/
body {display: flex;flex-direction:column;gap:2rem;}
main {position:relative;display:flex;flex-direction:column;align-items:center;width:100%;}
.layout {position:relative;z-index:1;width:100%;max-width:1060px;margin:0 auto;}
.layout.mwd8 {max-width:800px}

/* 콘텐츠 박스 컴포넌트 */
.contents {position:relative;width:100%;display:flex;}
.contents.white {justify-content:center;gap: 4rem;padding: 3.8rem 4.8rem;border-radius:1rem;box-shadow:0px 10px 40px 0px rgba(135, 149, 162, 0.27);background:#fff;}
.contents.white:before {content:'';z-index: 1;position: absolute;right: -14rem;bottom: -5px;display: block;width: 347px;height: 218px;background: url('../images/common/main_obj.png') no-repeat;pointer-events: none;background-size: contain;}
.contents.top:before {width:300px;height:188px;bottom:initial;top:-9rem;right:-5rem;}
.contents.col-2 {}
.contents .inner {display: flex;flex-direction:column;gap: 2rem;flex:1 0 0;}
.contents .inner strong {font-size:1.5rem;font-weight:800;color:var(--gray_100);}
.contents .inner ul {display: flex;flex-direction: column;gap: .8rem;}
.contents .inner ul li {position: relative;display: flex;align-items: center;}
.contents .inner ul li .btn:not(.btn-text) {width:100%;}
.contents.col-2 .inner.num1 ul li:nth-of-type(3) {justify-content:flex-end;margin:1.8rem 0 .6rem;}
.contents.col-2 .inner.num1 ul li:nth-of-type(3) label {font-size:0.875rem;color:var(--gray_100);font-weight: 600;}
.contents.col-2 .inner.num1 ul li:last-of-type {justify-content: space-between;margin-top:.5rem;}
.contents.col-2 .inner.num1 .btn.signup {font-weight:700;color:var(--blue_90);}
.contents.col-2 .inner.num1 .btn.signup:hover {color:var(--blue_110);}
.contents.col-2 .inner.num2 {max-width:340px;}
.contents.col-2 .inner.num2 ul li:last-of-type {justify-content: center;margin-top: 2.7rem;}
.contents .line {display:block;width:1px;height:21rem;background:var(--bg_line3);}
.contents .login_label {width:6rem;font-size:1.1rem;font-weight: 700;color: var(--gray_100);}
.contents .login_label + input {flex:1 0 0;}

/*footer*/
footer {display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 0;}
footer .logo {width:150px}
footer .logo img {}
footer small{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:rgba(0,0,0,0.6);font-weight:500}
.sub ~ footer {margin-top:8rem}

/*////공통컴포넌트////*/
.title {display:flex;flex-direction:column;align-items:center;gap:1rem;}
.title * {color:#fff;}
.title h1 {margin:0;font-size: 3.4rem;}
.title h1 em {font-family:var(--f_eli);font-weight: 900;}
.title em {color:var(--yelliw_10);}
.title p {font-size: 1.2rem;line-height:1.5;}
.title p em {font-weight:800;}

.title.type2 {align-items: flex-start;gap: 1.5rem;}
.title.type2 p {font-size: 1rem;}

.btn_group {display:flex;gap:.8rem;}
.pw_ico {position:absolute;right:4%;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--gray_80);}

.scroll {overflow-y:auto;}

/*////메인공통 - 로그인, 회원가입 첫페이지////*/
.main {padding:7rem 2% 0}
.main:after {content:'';position:absolute;top:0;left: 0;display:block;width:100%;height:100vh;background:var(--cyan_60) url('../images/common/main_bg.png') no-repeat bottom;background-size:contain;}
.main .contents {margin-top: 4rem;}

.main.type2:after {background-image:none;}

.main.type3 {padding:4rem 2% 0;} /*gnb 사용할때*/

/* 로그인페이지 */
.login .title {gap:.2rem;}

/* 인증서 오류 안내 팝업*/
.guide-pop .con-head p {display: block;padding:2rem;border-radius:1rem;text-align: left;color: var(--gray_90);background: var(--gray_20);font-size: .95rem;line-height: 2;margin: 2rem 0;}
.guide-pop .con-head p > small {display: block;color: var(--gray_70);margin-top: .2rem;}
.guide-pop .prc_wrap ul {display: flex;flex-direction: column;gap: 20px;}
.guide-pop .prc_wrap ul li {display: flex;flex-direction: column;gap: 16px;}
.guide-pop .prc_wrap ul li:nth-child(1), .guide-pop .prc_wrap ul li:nth-child(2) {margin-bottom: 20px;}
.guide-pop .prc_wrap ul li .title {flex-direction: row;gap: .5rem;margin: 0;}
.guide-pop .prc_wrap ul li .title .circle_num {display: inline-flex;justify-content:center;align-items:center;width:1.8rem;height:1.8rem;border-radius:1.8rem;font-size:.85rem;font-weight:800;color:#fff;background-color:var(--gray_80);}
.guide-pop .prc_wrap ul li .title .subtitle {font-size:1rem;font-weight: 400;color:var(--gray_100);}
.guide-pop .prc_wrap ul li .title .subtitle > a {color:var(--blue_100);}
.guide-pop .prc_wrap ul li .title .subtitle > a:hover,
.guide-pop .prc_wrap ul li .title .subtitle > a:active,
.guide-pop .prc_wrap ul li .title .subtitle > a:focus {color:var(--blue_100);}
.guide-pop .prc_wrap ul li .title .subtitle  .strong {color:var(--gray_100);font-weight:800;}
.guide-pop .prc_wrap ul li .imgbox {text-align: center;}
.guide-pop .prc_wrap ul li .imgbox > small {color: var(--gray_80);}
.guide-pop .prc_wrap ul li .imgbox > img {width: 100%;}															 
.guide-pop .btn_group {justify-content: center;margin-top:5rem}


/* 회원가입 첫페이지 */
.accounts .contents {justify-content:center;gap:4rem;}
.card-box {display: flex;flex-direction: column;align-items: flex-start;gap: 1rem;padding: 5rem 4rem;width: 24rem;height: 30rem;border-radius: 1.25rem;background: #fff;box-shadow: 0px 4px 20px 0px rgba(135, 149, 162, 0.30);transition: var(--ani_time);background-repeat: no-repeat;background-size: 44%;background-position: 12rem 19rem;background-blend-mode: luminosity;}
.card-box strong {font-size: 2rem;font-weight: 900;line-height: 1.3;}
.card-box strong em {display: block;font-weight: 900;}
.card-box span {font-size: 1.2rem;}
.card-box .btn {padding:17px 22px 17px 34px;transition: var(--ani_time);}
.card-box .btn > i {opacity:0;display:block;width:16px;height:16px;background:url('../images/common/ico_arr_w.svg') no-repeat 50%;background-size:contain;transition:var(--ani_time);}
.card-box.num1 {background-image:url('../images/common/join_obj1.png');}
.card-box.num2 {background-image:url('../images/common/join_obj2.png');}
.card-box:hover {outline:4px solid var(--cyan_40);background-blend-mode: initial;}
.card-box:hover strong {color:var(--gray_130);}
.card-box:hover strong em {color:var(--blue_90);}
.card-box:hover span {color:var(--gray_100);}
.card-box .btn:hover {padding:17px 32px 17px 36px;background-color:var(--blue_90);border-color:var(--blue_90);}
.card-box .btn:hover > i {opacity:1;transform:translateX(4px);}

/*////서브공통 - 이용약관, 정보입력////*/
.sub {}
.sub .layout {max-width:initial;}
.sub .contents {flex-direction:column;max-width:800px;margin-top:6rem;}
.sub .contents .btn_group .btn {flex:1 0 0}

.sub .subvisual {padding: 5.625rem 6rem 7.875rem;background:var(--cyan_60);}
.sub .subvisual .title {align-items: flex-start;gap: 11rem;max-width: 800px;margin: 0 auto;}
.sub .subvisual .title .step {display:flex;padding: 0.5rem 1rem;justify-content: center;align-items: center;gap: 0.625rem;border-radius: 0.25rem;border: 1px solid var(--blue_40);line-height: 1.2;font-size: 0.875rem;font-style: normal;font-weight: 400;font-family: var(--f_eli);}
.sub .subvisual .title .inner {display: flex;flex-direction: column;gap: 2rem;}
.sub .subvisual .title p {font-size:1.1rem;}

/* 이용약관 */
.agreement {}
.agreement .contents {gap:6rem;}
.agreement-box {display:flex;flex-direction:column;gap: 1.5rem;}
.agreement-box .document {overflow-y:scroll;height:30rem;padding:2rem;border:8px solid var(--gray_20);border-radius:16px;font-size:.9rem;white-space:pre-wrap;}
.agreement-box .document strong {font-weight: 800;}

.agree_btn {width:100%;}
.agree_btn input[type="checkbox"] + label {display:flex;justify-content:center;align-items:center;gap:.5rem;width:100%;margin:0;padding:1.063rem 1rem;border-radius:3rem;border:1px solid var(--gray_30);font-size:1rem;color:var(--gray_60);background:var(--gray_30);}
.agree_btn input[type="checkbox"] + label:before {position:static;transform:initial;width:16px;height:16px;border-radius:50%;background:var(--gray_50) url('../images/common/ico_check_w.svg') no-repeat 50%;}
.agree_btn input[type="checkbox"]:checked + label {border-color:var(--blue_90);color:var(--blue_90);font-weight:800;background:#fff;}
.agree_btn input[type="checkbox"]:checked + label:before {background-color:var(--blue_90);}

/* 정보입력 -인증서, 일반 공통으로 사용 */
.join {}
.join .pw_ico {right:3%;}
.join .btn_group {margin-top:5rem;}

.form_section {display:flex;flex-direction:column;gap:3rem;padding:5rem 0;border-bottom:1px solid var(--gray_70);}
.form_section:first-of-type {padding-top:0;}
.form_section h2 {display:flex;align-items:center;gap:.5rem;font-weight:800;}
.form_section h2 > em {display:inline-flex;justify-content:center;align-items:center;width:30px;height:30px;border-radius:4px;font-size:1rem;font-weight:800;color:#fff;background:var(--gray_100);}
.form_gourp {display:flex;flex-direction:column;gap:2rem;}
.form_gourp > li {display:flex;flex-direction:column;align-items:flex-start;gap:0.875rem;}
.form_gourp input {flex:1 0 0;}
.form_gourp b {font-weight:800;color:var(--gray_100);}
.form_tit {}
.form_tit .tit {font-size:1.125rem;font-weight:800;color:var(--gray_100);}
.form_tit small {font-weight: 400;color: var(--gray_80);margin-left: .5rem;}
.form_item {display:flex;width:100%;gap:.5rem 1rem;}
.form_item_inner {position:relative;display:flex;align-items:center;gap:.5rem;flex:1 0 0;width:100%;}
.form_item_inner > div {display:flex;align-items:center;gap:.5rem;flex:1 0 0;}
.form_item_inner > div select {flex:1 0 0;}
.form_item .tit_sub {font-weight: 800;color:var(--gray_80);}
.form_item p {word-break:keep-all;}

.msg {font-size:0.875rem;font-style:normal;font-weight:700;}
.msg.pass {color:var(--blue_80);background:var(--blue_20);}
.msg.error {color:var(--coral_100);background:var(--coral_20);}

input[type="radio"] + label.boxinput {display:flex;justify-content:space-between;align-items:center;width:calc(100% / 4);max-width:188px;padding:1.063rem 1.75rem;border-radius:0.5rem;border:1px solid var(--gray_50);line-height:1;font-size: 1rem;color:var(--gray_70);user-select:none;}
input[type="radio"] + label.boxinput:before {display:none;}
input[type="radio"] + label.boxinput:after {content: '';width:16px;height:16px;border-radius:50%;background:var(--gray_50) url('../images/common/ico_check_w.svg') no-repeat 50%;}
input[type="radio"]:checked + label.boxinput {border-color:var(--blue_90);color:var(--blue_90);font-weight:800;background:#fff;}
input[type="radio"]:checked + label.boxinput:after {background-color:var(--blue_90);}
input[disabled] + label.boxinput {background:var(--gray_20);}

/* 이메일 */
.form_item.mail_wrap {gap:.5rem;}
.form_item.mail_wrap .form_item_inner input[type="text"]:nth-of-type(2) {flex:initial;width:14rem;}
.form_item.mail_wrap select {min-width:12rem;}
.form_item.mail_wrap b {font-size:1.25rem;}
/* 계좌번호 */
.form_item.bank_wrap select {width:20rem;}
/* 소속지원청 */
.form_item.sch_dist select {flex:1 0 0;}
/* 소속학교 */
.search-wrap {margin:1rem 0;}
.search-wrap .search-hd {display:flex;align-items:center;justify-content:space-between;width:100%;}
.search-wrap .search-hd .btn {width:20rem;}
.search-wrap .school-list {width:100%;padding:2.5rem;gap:0.5rem;border-radius: 0.5rem;border: 1px dashed var(--gray_50);}
.search-wrap .school-list li {display:flex;flex-direction: row;align-items: center;}
.search-wrap .school-list li input {padding:0.625rem 1rem;border-radius:0.25rem;font-size:1rem;line-height: 1;}
.search-wrap .school-list li .btn {padding: 0.375rem;font-size: 0;}
.search-wrap .school-list li .btn:before {content:'';display:block;width: 1.625rem;height: 1.625rem;background:url('../images/common/ico_close_red.svg') no-repeat 50%;}
/* 강사-개인정보수집동의 */
.form_item.agree_wrap {flex-direction: column;}
.form_item.agree_wrap .document {padding:2rem;border-radius: 0.5rem;border: 1px solid var(--gray_40);background: var(--gray_10);}
.form_item.agree_wrap .document > ul {padding-left: 2rem;}
.form_item.agree_wrap .document > ul li {list-style:disc;margin:.4rem 0;}
.form_item.agree_wrap p {display: flex;gap: .2rem;word-break: keep-all;}
.form_item.agree_wrap p .fa-info-circle {margin-top:.2rem;}
.form_item.agree_wrap .form_item_inner {justify-content: end;margin-top: 1rem;gap: 1rem;}
/* sms수신동의 */
.form_section.num2 .form_gourp li:has(input#m_sms) {padding-top: 2rem;border-top: 1px dashed var(--gray_50);}

/* 학교검색 팝업 */
.modal-search-school {}
.modal-search-school .btn_wrap a {width:100%;}
.modal-search-school .con-wrap {flex-direction: column;gap: 2rem;}
.modal-search-school .search-bar {display: flex;justify-content: space-between;gap: 1rem;}
.modal-search-school .search-bar > input {flex:1 0 0;}
.modal-search-school .btn_group .btn {flex: 1 0 0;padding: 14px 22px;}
.search-result {display:flex;flex-direction:column;gap:10px;border-bottom: 1px solid var(--gray_100);padding-bottom: .8rem;}
.search-result .result-num {padding-bottom:6px;border-bottom:1px solid var(--gray_100);font-size:1.1rem;font-weight:600;}
.search-result .result-num > em{color:var(--blue_90);font-weight:800;}
.search-result .result-wrap {width:100%;max-height:40vh;overflow-y:auto;}
.search-result .result-wrap ul {display:flex;flex-direction:column;padding:1vh 0 2vh;padding-right:.5rem;}
.search-result .result-wrap ul .item {display:flex;flex-wrap:wrap;}
.search-result .result-wrap ul li:nth-of-type(1) {padding-bottom:14px;}
.search-result .result-wrap ul li + li {padding:14px 0;border-top:1px solid var(--gray_40)}
.search-result .result-wrap ul .item > strong {width:calc(100% - 4rem);font-size:1.1rem;font-weight:600;color:var(--gray_100);line-height:2;}
.search-result .result-wrap ul .item > .btn {width:4rem;}
.search-result .result-wrap ul .item > p {width:100%;color:var(--gray_80);font-size: .9375rem;font-weight: 400;}

/* 회원가입 완료 */
body:has(.main.complete) {background:var(--blue_10);}
.main.complete {height:100%;}
.main.complete:after {height:55%;background-color:#fff;}
.complete .contents {justify-content:space-between;align-items: center;gap:1rem;}
.complete .contents:after {content: '';display: block;width: 430px;height: 430px;background: url(../images/common/complete_obj.png) no-repeat 50%;background-size: contain;}
.complete-info {display:flex;flex-direction:column;align-items:flex-start;gap:9rem}
.complete-info .title {align-items:flex-start;gap:1.8rem;}
.complete-info .title h1 {display:flex;flex-direction:column;gap:.5rem;color:#000;}
.complete-info .title h1 > em {color:var(--blue_90);}
.complete-info .title p {color:var(--gray_80);}
.complete-info .btn {width:15rem;}

/* 아이디,비밀번호 - 찾기 */
.find {}
.find .contents {padding:3.4rem 4.8rem;}
.find .contents .line {height: 17rem;}
.find .contents .inner ul li:nth-of-type(3) {margin-top:.5rem;}
.find .btn_group {justify-content: center;margin-top:3rem;}
.find .btn_group .btn {width:26rem;}
/* 아이디,비밀번호 - 결과 */
.findResult {height:100%;padding: 10rem 2% 2rem;}
.findResult:after {height:54vh;}
.findResult .btn_group .btn {width:initial;flex:1 0 0;}
.findResult .contents {flex-direction:column;gap:1rem;}
.findResult .contents p {font-size: 1.25rem;}
.findResult .contents p b {font-weight:800;}
.findResult .result-box {display:flex;justify-content: center;align-items:center;padding:3rem;border-radius:0.5rem;font-size:1.375rem;border:1px solid var(--gray_50);background: var(--gray_10);}
.findResult .result-box strong {color:var(--gray_100)}
.findResult .result-box p {color:var(--gray_60)}

/* 인증서갱신 */
.regist {}
.regist:after {height:54vh;}
.regist .contents .inner ul li:last-child {margin-top:1rem}

/* 회원정보수정 */
.modify {}
.modify:after {height:50vh;}
.modify .addr-wrap input#addr2 {width:14rem;flex:initial;}


/* 로그인 후 인트로페이지(바로가기 모음 페이지) */
.gnb {display: flex;justify-content: flex-end;}
.gnb_list {display: flex;align-items: center;gap: 0.875rem;}
.gnb_list li {display: flex;align-items: center;gap: 0.875rem;}
.gnb_list li:after {content: "";display: block;width: 1px;height: 12px;background:rgba(255, 255, 255, .4);}
.gnb_list li:last-child:after {display:none}
.gnbBtn {display:flex;align-items:center;gap:0.3rem;color:#fff;transition: var(--ani_time);}
.gnbBtn.logout {}
.gnbBtn.logout:after {content: "";display: block;width:1.1rem;height:1.1rem;background:url('/images/common/ico_logout.svg') no-repeat 50%;background-size: contain;}
.gnbBtn:hover {font-weight:800;}

.intro {gap:6rem;margin-bottom:1rem;}
.intro .title.type2 p {font-size:1.2rem;}

.goto-wrap {display: flex;justify-content:center;flex-wrap: wrap;gap: 1.25rem 1.0625rem;width:100%;}
.goto-wrap li {width: calc(100% / 3 - .71rem);min-width: 342px;}

.goto {display:flex;flex-direction: column;justify-content: space-between;gap:1.375rem;width:100%;min-height: 160px;border-radius: 1.25rem;border: 1px solid var(--gray_40);background:#fff;box-shadow: 0px 4px 20px 0px rgba(135, 149, 162, 0.30);overflow: hidden;transition: var(--ani_time);}
.goto > div {width:100%;}
.logoBox {padding: 2.25rem 2.625rem 0rem 2.625rem;}
.logoBox > img {filter: grayscale(100%) contrast(120%);mix-blend-mode: multiply;}
.logoBox > .logotxt {font-family:var(--f_eli);font-weight:900;font-size:24px;color:var(--gray_130);}
.logoBox > .logotxt.sm{font-size:15px;}
.txtBox {display:flex;align-items: center;justify-content: flex-end;padding: 1rem 2.1875rem;font-size:0.875rem;background:var(--gray_50);}
.txtBox > em {line-height: 1;color:#fff;transition: var(--ani_time);}
.txtBox > i {opacity:0;display:block;width:16px;height:16px;background:url('../images/common/ico_arr_w.svg') no-repeat 50%;background-size:contain;transition:var(--ani_time);}

.goto:hover {border-color: var(--cyan_40);outline: 4px solid var(--cyan_40);}
.goto:hover .txtBox {background:var(--blue_90);}
.goto:hover .txtBox > em {font-weight: 800;}
.goto:hover .txtBox > i {opacity:1;transform:translateX(4px);}

.goto[disabled] {cursor:auto;pointer-events: none;background: var(--gray_10);box-shadow:none}
.goto[disabled] .logoBox > img {filter:grayscale(1);opacity:.3;}
.goto[disabled] .txtBox {background:var(--gray_40);}
.goto[disabled] .txtBox > em {display:none}
.goto[disabled] .txtBox:after {content:'이용권한이 없습니다.';color: var(--gray_60);line-height: 1;}