@charset "utf-8";
/* 공통 */
.sub-pd { padding: 160px 0;}
.sub-pd.first { padding-top: 0; padding-bottom: 160px; }
.sub-pd.last { padding-top: 160px; padding-bottom: 0; }

/* 대표 인사말 */
.cloud-txt { width: 308px; height: 72px; margin: 0 auto 40px; background: url(../images/sub/sub1-1-cloud.png) center no-repeat; background-size: contain; color: #fff; font-size: var(--font-size24); font-weight: 800; line-height: 1em; display: flex; align-items: center; justify-content: center;}
.gt-img { display: flex; flex-wrap: wrap; gap: 20px; }
.gt-img .img { width: calc(100%/2 - 10px); border-radius: 32px; overflow: hidden;}
.gt-img .img img { width: 100%; }
.gt-icon { text-align: center; margin-bottom: 16px; }
.gt-star { display: flex; justify-content: center; margin-top: 12px; gap: 12px; align-items: flex-start;}
.gt-star p { font-size: var(--font-size24); font-weight: 800; line-height: 1.66em; color: var(--color-primary);}
.gt-star img { display: block; position: relative; top: 5px; }
.gt-wrap { display: flex; flex-wrap: wrap; gap: 20px; }
.gt-col { width: calc(100%/4 - 15px); padding: 60px 10px 40px; border-radius: 32px; background: #f6f6f6; text-align: center; }
.gt-col .icon { width: 180px; height: 180px; position: relative; border-radius: 100%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; background: #fff; }
.gt-col .icon .num { position: absolute; left: 0; right: 0; margin: auto; top: -18px; width: 36px; height: 36px; border-radius: 36px; display: flex; align-items: center; justify-content: center; line-height: 1em; color: #fff; background: #fab4c3; font-weight: 800; line-height: 1.5em; }
.gt-col .txt { font-size: var(--font-size22); font-weight: 700; color: #2c2c2c; line-height: 1.72em; }
.gt-consult { display: flex; gap: 20px; flex-wrap: wrap;}
.gt-consult>div { width: calc(100%/2 - 10px);}
.gt-consult .img { border-radius: 32px; overflow: hidden;}
.gt-consult .info { display: flex; flex-wrap: wrap; gap: 20px; }
.gt-consult .info .gt-col { width: calc(100%/2 - 10px);}
.gt-consult .info .gt-col .num { background: #b3e9dc; }
.gt-book { display: flex; gap: 20px; flex-wrap: wrap;}
.gt-book.fx { flex-direction: row-reverse;}
.gt-book>div { width: calc(100%/2 - 10px); }
.gt-book .info { padding: 40px; background: #f6f6f6; border-radius: 32px; display: flex; flex-direction: column; justify-content: center;}
.gt-book .info .col { margin-bottom: 30px; display: flex; align-items: center;}
.gt-book .info .col:last-child { margin-bottom: 0; }
.gt-book .info .col .icon { width: 140px; height: 140px; border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative; background: #fff; }
.gt-book .info .col .num { position: absolute; right: -18px; margin: auto; top: 0; bottom: 0; width: 36px; height: 36px; border-radius: 36px; display: flex; align-items: center; justify-content: center; line-height: 1em; color: #fff; background: #fab4c3; font-weight: 800; line-height: 1.5em; }
.gt-book.fx .info .col .num { background: #b3e9dc; }
.gt-book .info .col .txt { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 42px; font-size: var(--font-size22); font-weight: 700; line-height: 1.72em; color: #2c2c2c; }
.gt-book .img { border-radius: 32px; overflow: hidden;}

/* 회사소개 */
.it-fx { display: flex; align-items: center; }
.it-fx .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 20px; }
.hst { padding: 100px 0 0; border-top: 2px solid #dfdfdf;}
.hst-wrap { display: flex; align-items: flex-start; position: relative; height: 100%; }
.hst-wrap::before { content: ""; position: absolute; left: 0; right: 0; margin: auto; top: -100px; width: 2px; height: calc(100% + 100px); background: #dfdfdf;}
.hst-wrap::after { content: ""; position: sticky; right: calc(50% - 16px); top: 190px; width: 32px; height: 32px; background: url(../images/sub/hst-dot.png) center no-repeat; background-size: contain;}
.hst .sticky { position: sticky; top: 160px; width: 50%; }
.hst .sticky a { display: block; line-height: 1.65em; font-size: var(--font-size46); font-weight: 800; color: #dfdfdf; margin-bottom: 16px; }
.hst .sticky a:last-child { margin-bottom: 0; }
.hst .sticky a.active { color: #2c2c2c;}
.hst .sticky a:hover { color: #2c2c2c;}
.hst .info { width: 50%; }
.hst .info .wrap { margin-bottom: 100px; }
.hst .info .wrap:last-child { margin-bottom: 0; }
.hst .info .group { margin-bottom: 60px; padding-left: 80px; }
.hst .info .group:last-child { margin-bottom: 0; }
.hst .info .group .year { font-size: var(--font-size24); font-weight: 800; color: var(--color-primary); line-height: 1.66em; margin-bottom: 12px; }
.hst .info .group .txt p { padding: 20px 0; border-bottom: 1px dashed #dfdfdf; font-size: var(--font-size20); font-weight: 700; line-height: 1.7em; }
.hst .info .group .txt p:first-child { padding-top: 0 !important; }
.hst .info .group .txt p:last-child { border: none; }

/* 찾아오시는 길 */
.map { border-radius: 24px; overflow: hidden; margin-bottom: 60px; position: relative; }
.lct { display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; align-items: flex-end;}
.lct h3 { font-size: var(--font-size34); font-weight: 800; color: #2c2c2c; line-height: 1.41em; margin-bottom: 18px; }
.lct h3 span { display: inline-block; padding-left: 12px; font-size: 16px; font-weight: 700; color: #a8a8a8; }
.lct p { font-size: var(--font-size20); line-height: 1.7em; color: #676767; font-weight: 700; }
.lct .right { display: flex; justify-content: flex-end; gap: 10px 40px; flex-wrap: wrap;}
.lct .right .col { display: flex; align-items: center; gap: 12px; }
.lct .right .col span { display: inline-block; font-size: var(--font-size20); font-weight: 700; line-height: 1.7em; color: #2c2c2c; }

/* 공통 폼양식 */
.ap-bg { background: url(../images/sub/sub3-3-img.jpg) center no-repeat; background-size: cover; padding: 120px 80px; border-radius: 32px; position: relative; }
.ap-bg.bg2 { padding: 93px 80px; }
.ap-bg .main-tit { position: relative; z-index: 1; }
.ap-bg .main-txt {position: relative; z-index: 1; }
.ap-bg .ufo { position: absolute; right: 80px; bottom: -72px; }
.ap-bg .txt { margin-top: 30px; position: relative; z-index: 1; }
.ap-bg .txt p { position: relative; line-height: 1.5em; font-weight: 400; padding-left: 10px; margin-bottom: 12px; }
.ap-bg .txt p:last-child { margin-bottom: 0; }
.ap-bg .txt p::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 1px; background: #505050; }
.ap-inner { padding-bottom: 100px; }
.ap-inner.p0 { padding-bottom: 0; }
.ap-tit { display: flex; gap: 12px; margin-bottom: 24px; align-items: flex-start; }
.ap-tit .num { width: 28px; height: 28px; border-radius: 28px; display: flex; align-items: center; justify-content: center; line-height: 1em; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 800; margin-top: 4px;}
.ap-tit strong { flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size24); font-weight: 800; color: #2c2c2c; line-height: 1.66em; }
.ap-tit strong span { color: #ccc; }
.ap-tit.fx { justify-content: space-between; align-items: center;}
.ap-tit.fx .title { display: flex; gap: 12px; align-items: flex-start;}
.ap-tit .add-btns { display: flex; gap: 25px; }
.ap-tit .add-btns button { display: inline-block; padding-left: 26px; position: relative; font-weight: 700; color: #2c2c2c; line-height: 1.75em; border: none; background: transparent;}
.ap-tit .add-btns button.del { color: #878787;  }
.ap-tit .add-btns button::before { content: ""; position: absolute; left: 0; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; top: 4px; }
.ap-tit .add-btns button.add::before { background-image: url(../images/sub/plus.png); }
.ap-tit .add-btns button.del::before { background-image: url(../images/sub/minus.png); }
.ap-scroll { height: 300px; overflow: auto; padding: 40px; border-radius: 32px; border: 1px solid #eee; line-height: 1.75em; color: #878787; font-weight: 400; margin-bottom: 40px; }
.ap-scroll strong { display: block; margin-bottom: 8px; color: #676767; font-size: var(--font-size18); font-weight: 700; } 
.ap-agree .col { display: flex; justify-content: space-between; margin-bottom: 18px; }
.ap-agree .col:last-child { margin-bottom: 0; }
.ap-agree .col .tit { font-size: var(--font-size18); color: #2c2c2c; font-weight: 700; line-height: 1.55em; }
.ap-agree .col .tit span { color: #a8a8a8; }
.ap-agree .radio-fx { display: flex; gap: 10px 20px; flex-wrap: wrap;}
.ap-agree .item { font-weight: 700; color: #2c2c2c; line-height: 1.75em;}
.ap-form { padding: 50px 0; border-top: 2px solid #2c2c2c; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap; gap: 40px 80px; margin-bottom: 20px; }
.ap-form.complete { gap: 72px 80px;}
.ap-form:last-child { margin-bottom: 0; }
.ap-form dl { width: calc(100%/2 - 40px); display: flex; align-items: center;}
.ap-form dl.w100 { width: 100%; }
.ap-form dl:last-child { margin-bottom: 0; }
.ap-form dl dt { width: 180px; color: #2c2c2c; font-size: var(--font-size18); font-weight: 700; line-height: 1.55em; }
.ap-form dl .required { color: var(--color-primary);}
.ap-form dl dd { flex: 1 1 auto; min-width: 0; width: 1%;}
.ap-form dl .input { width: 100%; height: 60px; border-radius: 8px; border: 1px solid #eee; padding: 20px; line-height: 1.4em; }
.ap-form dl .input[readonly] { background: #f8f8f8; color: #505050; }
.ap-form dl .input::placeholder { color: #a8a8a8; }
.ap-form dl select.input.down { background-image: url(../images/sub/select.png); background-position: right 20px center; color: #a8a8a8; }
.ap-form dl dd .btn-pack.sm { min-width: 130px; padding: 0 20px; }
.ap-form dl dd .fx { display: flex; gap: 6px; }
.ap-form dl dd .fx .input { flex: 1; }
.ap-form dl dd .item-fx { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;}
.ap-form dl dd .item-fx .item.fx { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; width: 1%;}
.ap-form dl dd .item-fx .item.fx .input { flex: 1; }
.ap-form-time { display: flex; gap: 40px; flex-wrap: wrap; width: 100%; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px dashed #eee;}
.ap-form-time>div { width: calc(100%/2 - 20px); display: flex; align-items: center;}
.ap-form-time>div .tit { width: 74px; font-weight: 700; color: #2c2c2c; }
.ap-form-time>div .fx { flex: 1 1 auto; min-width: 0; width: 1%;}
.ap-form-class { display: flex; align-items: center; gap: 10px 40px; flex-wrap: wrap; justify-content: space-between;}
.ap-form-class .flex { display: flex; align-items: center; gap: 16px; }
.ap-form-class .flex strong { color: #2c2c2c; font-weight: 700; }
.ap-form-class .flex span { color: #2c2c2c; font-weight:400; }
.ap-form-class-txt { font-weight: 400; color: #878787; line-height: 1.75em; }
.ap-span { display: block; color: #878787; font-weight: 700; line-height: 1.5em; margin-top: 24px; }
.ap-span-txt { margin-top: 12px; padding-left: 12px; }
.ap-span-txt p { position: relative; padding-left: 10px; font-size: 14px; line-height: 1.42em; margin-bottom: 8px; color: #878787; font-weight: 400; }
.ap-span-txt p::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 1px; background: #878787; }
.ap-span-txt p:last-child { margin-bottom: 0; }
.ap-total-fx { display: flex; align-items: center; gap: 10px 40px; flex-wrap: wrap;}

/* sub 로그인 공통 (교육 및 강사 신청확인) */
.check-txt { font-size: var(--font-size18); font-weight: 400; line-height: 1.77em; text-align: center; }
.sub-login { max-width: 600px; margin: 0 auto; }
.sub-login .login-wrap { padding: 40px 0 50px; border-top: 2px solid #2C2C2C;}
.sub-login .login-wrap dl { width: 100%; margin-bottom: 40px; }
.sub-login .login-wrap dl:last-child { margin-bottom: 0; }
.sub-login .login-wrap dl dt { width: 100%; margin-bottom: 16px; font-size: var(--font-size18); font-weight: 700; color: #2c2c2c; line-height: 1.55em; }
.sub-login .login-wrap dl dt .required { color: var(--color-primary); }
.sub-login .login-wrap dl dd { width: 100%; }
.sub-login .login-wrap dl dd input { height: 60px; padding: 6px 20px; border-radius: 8px; border-color: #eee; width: 100%; }
.sub-login .login-wrap dl dd input::placeholder { color: #a8a8a8; }
.sub-login .submit-btn { width: 100%; cursor: pointer; height: 74px; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1em; border-radius: 37px; background: var(--color-primary); font-size: var(--font-size20); font-weight: 800; border: none; }

/* 교육신청 공통 리스트, 상세페이지 */
.ap-result-bg { padding: 100px 80px; border-radius: 32px; background: url(../images/sub/sub3-5-bg.jpg) center no-repeat; background-size: cover; margin-bottom: 100px; }
.ap-result-bg .txt { margin-top: 30px; }
.ap-result-bg .txt p { position: relative; line-height: 1.5em; font-weight: 400; padding-left: 10px; margin-bottom: 12px; }
.ap-result-bg .txt p:last-child { margin-bottom: 0; }
.ap-result-bg .txt p::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 1px; background: #505050; }
.ap-rs-tit { font-size: var(--font-size24); font-weight: 800; color: #2c2c2c; line-height: 1.66em; margin-bottom: 24px; }
.ap-tbl-wrap { overflow: auto;}
.ap-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #2C2C2C;}
.ap-tbl tr { border-bottom: 1px solid #dfdfdf;}
.ap-tbl tr th { border-right: 1px solid #dfdfdf; line-height: 1.55em; font-size: var(--font-size18); font-weight: 700; color: #2c2c2c; padding: 24px 10px 22px; background: #fafafa; }
.ap-tbl tr th:last-child { border: none; }
.ap-tbl tr td { border-right: 1px solid #dfdfdf; line-height: 1.75em; font-weight: 400; padding: 18px 10px; text-align: center; }
.ap-tbl tr td.fw { font-weight: 700; color: #a8a8a8; }
.ap-tbl tr td.fw.complete { color: var(--color-primary); }
.ap-tbl tr td.fw.complete2 { color: #505050; font-weight: 400; }
.ap-tbl tr td:last-child { border: none; }
.ap-tbl tr td .view { display: inline-block; padding: 12px 16px; font-size: 14px; font-weight: 700; line-height: 1em; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 25px; }
.ap-tbl tr td .view:hover { background: var(--color-primary); color: #fff; }
.page-first-btn { border-radius: 37px; border: 2px solid #eee; display: inline-flex; align-items: center; justify-content: center; margin: 100px auto 0; font-size: var(--font-size20); font-weight: 800; color: #676767; line-height: 1em; padding: 20px 40px;}
.page-first-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary);}
.ap-rs-group { display: flex; gap: 10px 40px; flex-wrap: wrap;}
.ap-rs-group .col { display: flex; gap: 16px; }
.ap-rs-group .col .tit { color: #2c2c2c; font-weight: 700; }
.ap-rs-group .txt2 { color: #2c2c2c; }
.ap-teacher { display: flex; align-items: center; }
.ap-teacher .status { display: inline-block; font-weight: 400; color: #a8a8a8; line-height: 1.5em; }
.ap-teacher .status.complete { color: #2c2c2c; font-weight: 700; }
.ap-teacher .flex { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; }
.ap-teacher .flex span { padding-left: 16px; padding-right: 10px; display: inline-block; }
.ap-teacher .teacher-view { display: flex; align-items: center; justify-content: center; background: var(--color-primary); border-radius: 14px; line-height: 1em; color: #fff; width: 95px; height: 28px; font-family: 'Pretendard'; font-weight: 600; font-size: 14px; }

/* 사진업로드 */
.photo-upload-wrap { display: flex; align-items: center;}
.photo-upload-preview { width: 103px; margin-right: 24px; }
.photo-upload-preview li {position:relative; width: 100%; }
.photo-upload-preview li:before {content:''; display:block; padding-bottom:128%; background: #f4f4f4;  border-radius: 8px; border: 1px solid #eee;}
.photo-upload-preview li .abbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; flex-direction: column; padding-top: 35px; }
.photo-upload-preview li .abbox .icon { display: inline-block; width: 28px; height: 28px; margin: auto; background: url(../images/sub/photo-icon.png) center no-repeat; background-size: contain;}
.photo-upload-preview li .abbox strong { font-size: 15px; font-weight: 700; color: #ccc; line-height: 1.33em; margin-top: 10px; display: block; }
.photo-upload-preview li button {display:flex; align-items:center; justify-content:center; position:absolute; top:-5px; right:-5px; width:20px; height:20px; border:0; border-radius:100%; background:rgba(0,0,0,.7);}
.photo-upload-preview li button svg {width:8px; height:auto;}
.photo-upload-slot.has-files:before { background: #fff; }
.photo-upload-slot.has-files .abbox { display: none; }
.photo-upload-items { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; border-radius: 8px; z-index: 1; background: #fff; }
.photo-upload-slot.has-files .photo-upload-items { display: block; }
.photo-upload-thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; }
.photo-upload-preview li .photo-upload-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 0; }
.photo-upload-thumb button { display: flex; align-items: center; justify-content: center; position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border: 0; border-radius: 100%; background: rgba(0,0,0,.7); }
.photo-upload-thumb button svg { width: 7px; height: auto; }
.photo-upload-info { flex: 1 1 auto; min-width: 0; width: 1%; }
.photo-upload-info .tt { color: #2c2c2c; font-weight: 700; line-height: 1.5em; }
.photo-upload-info .txt { margin: 12px 0;}
.photo-upload-info .txt p { position: relative; padding-left: 10px; line-height: 1.71em; font-size: 14px; color: #676767; font-weight: 400; }
.photo-upload-info .txt p::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 1px; background: #676767; }
.photo-upload-btn {display:inline-block; padding:8px 12px; border:1px solid #dfdfdf; border-radius:20px; font-weight:700; line-height:1.3em; font-size: 12px; background: transparent; transition: .3s;}
.photo-upload-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* 강사 프로필 */
.pf-bg { background: #EFFBFB; border-radius: 32px; display: flex; align-items: center; justify-content: space-between; padding: 60px 80px; }
.pf-bg .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 20px; }
.pf-bg h2 { font-size: var(--font-size36); line-height: 1.38em; color: #2c2c2c; font-weight: 800; }
.pf-bg h2 span { color: var(--color-primary);}
.pf-bg p span { color: var(--color-primary); font-weight: 800; }
.pf-tab-fx { display: flex; justify-content: space-between; align-items: center; margin: 66px 0 106px; }
.pf-tab-fx .logout-btn { width: 113px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 30px; background: #f4f4f4; line-height: 1em; font-size: var(--font-size18); font-weight: 800; color: #676767; }
.pf-tab-fx ul { display: flex; gap: 10px 40px; flex-wrap: wrap;}
.pf-tab-fx ul li { width: auto; position: relative; }
.pf-tab-fx ul li::after { content: ""; position: absolute; right: -18px; top: 0; width: 8px; height: 8px; border-radius: 8px; background: var(--color-primary); opacity: 0; }
.pf-tab-fx ul li a { display: inline-block; font-size: var(--font-size32); font-weight: 800; line-height: 1.43em; color: #dfdfdf; }
.pf-tab-fx ul li.active a,
.pf-tab-fx ul li a:hover { color: #2c2c2c; }
.pf-tab-fx ul li.active::after { opacity: 1; }
.pf-tab-fx .logout-btn:hover { background: var(--color-primary); color: #fff; }

/* 강의 확인하기 */
.class-fx { display: flex; gap: 40px 80px; flex-wrap: wrap; padding: 50px 0; border-top: 2px solid #2c2c2c; border-bottom: 1px solid #eee;}
.class-fx>div { width: calc(100%/2 - 40px);}
.class-fx .col { display: flex; align-items: center; }
.class-fx .col .tt { font-size: var(--font-size18); font-weight: 700; color: #2c2c2c; line-height: 1.55em; width: 120px; }
.class-fx .col .info { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; gap: 6px; align-items: center;}
.class-fx .col .info .input { flex: 1; height: 60px; border-radius: 8px; border: 1px solid #eee; padding: 20px; line-height: 1.4em; }
.class-fx .col-fx { display: flex; gap: 40px 80px; flex-wrap: wrap;}
.class-fx .col-fx .col { width: calc(100%/2 - 40px);}
.class-fx .col-fx .col .txt { flex: 1 1 auto; min-width: 0; width: 1%; }

/* 커뮤니케이션 공통 */
.sub5-tit { font-size: 52px; font-weight: 800; color: #2c2c2c; line-height: 1.57em; text-align: center; }
.sub5-tab { display: flex; justify-content: center; margin: 50px 0 120px;}
.sub5-tab ul {display:inline-flex; padding: 8px; border-radius: 50px; background: #f4f4f4; backdrop-filter: blur(12px); width: auto;}
.sub5-tab ul li { width: auto;}
.sub5-tab ul li a {display:flex; flex-direction:column; justify-content:center; width:125px; height:58px; border-radius: 30px; align-items: center; font-weight: 800; color: #676767; font-size: var(--font-size18); background: transparent;}
.sub5-tab ul li.active a {background:#121212; color: #fff; }