@charset "UTF-8";@import url("/resources/css/fnc_css/font/font.css");.wrap { width: 100%; padding-bottom: 65px;margin: 0 auto; } 
/* 메인 */
.main-top { width: 100%; padding: 0 20px 20px; border-radius: 0 0 30px 30px; background: url("/resources/images/fnc_images/main/main_top_bg.png") no-repeat center, #0074e6; }
.main-top .header-logo {height:24px;} 
/* 기존 코드*/ 
.main-top-info > select { height: 30px; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/select_white.svg") no-repeat, rgba(255, 255, 255, 0.25); background-position: right 10px top 50%; padding-left: 15px; padding-right: 35px; flex-shrink: 0; font-size: 14px; font-weight: 500; line-height: 18px; border-radius: 15px; margin-top: 10px; color: #fff; margin-bottom: 8px; }

/* 수정: - 모바일에서 드롭다운 글자색이 흰색 -> 검은색*/
/* .main-top-info > select { height: 30px; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/select_white.svg") no-repeat, rgba(255, 255, 255, 0.25); background-position: right 10px top 50%; padding-left: 15px; padding-right: 35px; flex-shrink: 0; font-size: 14px; font-weight: 500; line-height: 18px; border-radius: 15px; margin-top: 10px; color: #000; margin-bottom: 8px; } */ 
.main-top-info > p { width: fit-content; height: 24px; padding: 0 12px; background-color: rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; line-height: 18px; border-radius: 15px; margin-top: 15px; color: #fff; margin-bottom: 8px; } 
.main-top-info > h4 { font-size: 16px; line-height: 24px; font-weight: 500; color: #fff; } 
.main-top-info > h3 { color: #fff; font-size: 18px; line-height: 26px; font-weight: 500; margin-bottom: 15px; } 
.main-top-info > h3:has(span) { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; } 
.main-top-info > h3 > span { height: 26px; padding: 0 20px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background-color: #fff; color: #000; font-size: 12px; line-height: 18px; font-weight: 600; gap: 2px; } 
.main-top-info > h3 > span > span { color: #0074e6; } 
.main-top-info > div { width: 100%; background-color: #fff; display: flex; align-items: center; justify-content: space-between; height: 40px; border-radius: 20px; box-shadow: 0px 3px 6px #0034744a; padding-left: 15px; padding-right: 25px; } 
.main-top-info > div > p { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 22px; font-weight: 600; } 
.main-top-info > div > h3 { font-size: 16px; line-height: 24px; font-weight: 600; } 
.main-top-info > div > h3 > span { font-size: 18px; } 
.main-bot { padding: 20px; } 
.main-bot-header { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } 
.main-bot-header > a { display: flex; align-items: center; justify-content: center; width: 50%; height: 50px; border-radius: 10px; background-color: #fff; border: 1px solid #ebebeb; color: #0074e6; font-size: 16px; line-height: 24px; font-weight: 600; } 
.main-bot-header > a.active { background-color: #1a4e81; border: none; color: #fff; } 
.main-bot-content > div { display: none; } 
.main-bot-content > div.active { display: block; } 
.main-bot-content-box {display:block; width: 100%; box-shadow: 0px 0px 10px #64789159; border-radius: 10px; padding: 15px; margin-bottom: 15px; } 
.main-bot-content-box-top { display: flex; justify-content: space-between; } 
.main-bot-content-box-top > div { height: 24px; padding: 0 12px; font-size: 12px; line-height: 18px; font-weight: 500; border-radius: 12px; display: flex; align-items: center; justify-content: center; } 
.main-bot-content-box-top > div.type1 { background-color: rgba(251, 140, 0, 0.1); color: rgba(251, 140, 0, 1); } 
.main-bot-content-box-top > div.type2 { background-color: rgba(76, 175, 80, 0.1); color: rgba(76, 175, 80, 1); } 
.main-bot-content-box-bot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; } 
.main-bot-content-box-bot > p { font-size: 16px; line-height: 24px; font-weight: 600; } 
.main-bot-content-box-bot > div > p { text-align: right; font-size: 16px; line-height: 24px; font-weight: bold; } 
.main-bot-content-box-bot > div > p > span { color: #1976d2; font-weight: bold; font-size: 12px; line-height: 20px; } 
.main-bot-content-bar { width: 130px; height: 12px; border-radius: 10px; background-color: #dcdcdc; overflow: hidden; } 
.main-bot-content-bar > span { display: block; height: 100%; background-color: #0074e6; border-radius: 10px; } 

/* 관리자 메인 */
.manage-main-title { font-size: 18px; line-height: 26px; font-weight: bold; margin-bottom: 10px; } 
.manage-main-month { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } 
.manage-main-month > div { border-radius: 50%; aspect-ratio: 1/1; width: 40px; border: 1px solid #ebebeb; display: flex; align-items: center; justify-content: center; }
.manage-main-month > a { border-radius: 50%; aspect-ratio: 1/1; width: 40px; border: 1px solid #ebebeb; display: flex; align-items: center; justify-content: center; }
.manage-main-month > p { font-size: 16px; line-height: 24px; font-weight: 600; } 

.manage-main-info { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; } 
.manage-main-info > div { background-color: #f6f6f6; width: 100%; height: 75px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border-radius: 10px; } 
.manage-main-info > div > p { font-size: 14px; line-height: 20px; font-weight: 600; } 
.manage-main-info > div > h3 { font-size: 18px; line-height: 26px; font-weight: 600; color: #1976d2; } 
.manage-main-info > div > h3 > span { font-size: 12px; line-height: 20px; font-weight: 600; color: #000; margin-left: 5px; } 

.manage-main-box { width: 100%; border: 1px solid #ebebeb; border-radius: 10px; margin-bottom: 20px; overflow: hidden; } 
.manage-main-box-top { width: 100%; height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } 
.manage-main-box.active .manage-main-box-top { border-bottom: 1px solid #ebebeb; } 
.manage-main-box-top > p { font-size: 14px; line-height: 20px; font-weight: 500; } 
.manage-main-box-top > span { width: 20px; height: 100%; display: flex; align-items: center; justify-content: center; background: url("/resources/images/fnc_images/common/bottom_arrow_blue.svg") no-repeat center; transition: all 0.2s; } 
.manage-main-box.active .manage-main-box-top > span { transform: rotate(180deg); filter: contrast(0); } 
/* 원본: .manage-main-box-bot { max-height: 0; transition: all 0.2s; padding: 0 10px; } */
/* 수정: max-height만 애니메이션, padding은 즉시 변경하여 scrollHeight 계산 정확도 향상 */
.manage-main-box-bot { max-height: 0; transition: max-height 0.4s ease-in-out; padding: 0 10px; overflow: hidden; } 
/* 원본: .manage-main-box.active .manage-main-box-bot { max-height: 120px; padding: 10px; } */
/* 수정: max-height는 JavaScript에서 동적 설정, padding은 즉시 변경 */
.manage-main-box.active .manage-main-box-bot { padding: 10px; } 
.manage-main-box-bot-info { width: 100%; height: 35px; border-radius: 20px; background-color: #f6f6f6; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } 
.manage-main-box-bot-info > div { width: 33.3%; display: flex; align-items: center; justify-content: center; gap: 10px; border-right: 1px solid #ccc; } 
.manage-main-box-bot-info > div:last-child { border: none; } 
.manage-main-box-bot-info > div > h4 { font-size: 14px; line-height: 20px; font-weight: bold; } 
.manage-main-box-bot-info > div > p { font-size: 14px; line-height: 20px; font-weight: 500; } 
.manage-main-box-bot-info > div > p > span { color: #0074e6; } 
.manage-main-box-bot-team { font-size: 16px; line-height: 24px; font-weight: bold; } 
.manage-main-box-bot-done { width: 100%; display: flex; align-items: center; justify-content: space-between; } 
.manage-main-box-bot-done > h4 { font-size: 14px; line-height: 20px; font-weight: 500; } 
.manage-main-box-bot-done > h4 > span { color: #0074e6; padding-left: 10px; } 
.manage-main-box-bot-done > div { height: 26px; padding: 0 20px; border-radius: 20px; background-color: #f6f6f6; display: flex; align-items: center; justify-content: center; gap: 10px; } 
.manage-main-box-bot-done > div > p { font-size: 14px; line-height: 20px; font-weight: 500; } 
.manage-main-box-bot-done > div > p > span { color: #0074e6; } 
.manage-main-find { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; background-color: #e2f1ff; border-radius: 25px; gap: 10px; } 
.manage-main-find > p { color: #0080fe; font-size: 16px; line-height: 24px; font-weight: 500; } 
.manage-main-popup-date { display: flex; align-items: center; gap: 5px; margin-bottom: 20px; } 
.manage-main-popup-date > input { margin-bottom: 0 !important; } 
.popup-info select { width: 100%; height: 44px; border: 1px solid #e9e9e9; border-radius: 10px; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/select_blue.svg") no-repeat, #fff; background-position: right 10px top 50%; padding-left: 15px; padding-right: 35px; flex-shrink: 0; margin-bottom: 40px; } 
/* 로그인 */
.sub:has(.login) { min-height: calc(100vh - 65px); position: relative; background: url("/resources/images/fnc_images/common/login_bg.png") no-repeat bottom/contain; } 
.login-top { padding-top: 60px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; margin-bottom: 30px; } 
.login-main { margin-bottom: 50px; width: 100%; } 
.login-main > label { width: 100%; margin-bottom: 20px; } 
.login-main > label > p { font-size: 14px; line-height: 22px; font-weight: bold; } 
.login-main > label > input { width: 100%; height: 40px; border-bottom: 1px solid #c8c8c8; padding: 0 10px; font-size: 14px; line-height: 20px; } 
.login-btn { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; line-height: 24px; font-weight: 600; color: #fff; margin-bottom: 20px; margin-top: 30px; background-color: #0074e6; } 
.login-etc { display: flex; align-items: center; justify-content: space-evenly; margin-bottom: 50px; } 
.login-etc > a { color: #a5a5a5; font-size: 14px; line-height: 20px; } 
.login-etc > span { display: block; width: 1px; height: 10px; background-color: #d6d6d6; } 
.login-sns { padding-bottom: 100px; } 
.login-sns-info { text-align: center; color: #9a9a9a; font-size: 14px; line-height: 20px; font-weight: 500; margin-bottom: 15px; } 
.login-sns { display: flex; align-items: center; justify-content: center; gap: 30px; } 
.login-sns > a { display: flex; align-items: center; justify-content: center; width: 55px; aspect-ratio: 1/1; border-radius: 50%; box-shadow: 3px 3px 10px #00000029; } 
.login-sns-naver { background-color: #00bb00; } 
.login-sns-kakao { background-color: #ffe513; } 
.login-sns-google { background-color: #fff; } 
.login-copy { position: absolute; font-size: 10px; color: #9f9f9f; bottom: 50px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; } 
/* 서브공통 */
.sub { padding: 70px 20px 20px; } 
.sub-top { width: 100%; height: 50px; border-bottom: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: center; padding: 0 20px; position: fixed; top: 0; left: 0; background-color: #fff; z-index:99;} 
.sub-top > h1 { font-size: 16px; line-height: 24px; font-weight: bold; } 
.back-btn { position: absolute; height: 100%; width: 40px; left: 10px; display: flex; align-items: center; justify-content: center; } 
input[type="checkbox"] { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; flex-shrink: 0; border-radius: 50%; width: 20px; height: 20px; background: url("/resources/images/fnc_images/common/check.svg") no-repeat center; } 
input[type="checkbox"]:checked { background: url("/resources/images/fnc_images/common/check_color.svg") no-repeat center; } 
.btn { width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; line-height: 24px; font-weight: 600; color: #fff; margin-bottom: 10px; } 
.btn-black { background-color: #565656; } 
.btn-blue { background-color: #0074e6; } 
.btn-red { background-color: #bc0000; } 
.btn-green { background-color: #28a745; } 
.btn-white { background-color: #fff; color: #000; border: 1px solid #ebebeb; } 
.sub-top .header-lang { position: absolute; right: 10px; border: 1px solid #e9e9e9; border-radius: 16px; } 
.sub-top .header-lang > select { padding-left: 30px; padding-right: 25px; } 
.sub-top .header-lang > img { left: 10px; } 
/* 비디오 주의사항 */
.video-warning-top { width: 100%; } 
.video-warning-top > div { width: 110px; height: 110px; background-color: #f4f4f4; border-radius: 50%; margin: 0 auto 20px; } 
.video-warning-top > p { display: flex; align-items: center; gap: 5px; font-size: 14px; line-height: 20px; font-weight: 500; margin-bottom: 5px; } 

.video-warning-mid { margin: 20px 0; display: flex; flex-direction: column; gap: 10px; padding: 20px 0; position: relative; } 
.video-warning-mid-bg { position: absolute; width: 100vw; height: 100%; background-color: #fff5e9; border-top: 1px solid #ffe1bb; border-bottom: 1px solid #ffe1bb; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } 
.video-warning-mid > h3 { margin-bottom: 10px; font-size: 18px; font-weight: bold; line-height: 26px; display: flex; align-items: center; gap: 15px; color: #fb8c00; } 
.video-warning-mid > p { display: flex; align-items: start; gap: 5px; font-size: 16px; line-height: 24px; font-weight: 500; gap: 10px; } 
.video-warning-mid > p > img { padding-top: 4px; } 

.video-warning-chk { width: 100%; margin-bottom: 40px; } 
.video-warning-chk > label { background-color: #f6f6f6; height: 40px; border-radius: 10px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } 
.video-warning-chk > label > p { font-size: 14px; line-height: 22px; font-weight: 500; } 
/* 비디오 */
.video-detail-video { width: 100%; border-radius: 15px; height: 400px; background-color: #ddd; margin-bottom: 20px; } 
.video-detail-con { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } 
.video-detail-con > div { width: 33%; height: 70px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; box-shadow: 0px 3px 10px #00000029; border-radius: 10px; background-color: #565656; } 
.video-detail-con > div > p { font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; } 
.video-detail-bar { width: 100%; height: 20px; border-radius: 10px; background-color: #dcdcdc; margin-bottom: 10px; } 
.video-detail-bar > div { height: 100%; background-color: #0074e6; border-radius: 10px; } 
.video-detail-text { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 16px; line-height: 24px; } 
.video-detail-text > p { font-weight: 600; } 
.video-detail-text > h3 { font-weight: bold; } 
.video-detail-text > h3 > span { color: #1976d2; font-weight: bold; font-size: 12px; line-height: 20px; } 
/* 수료증 목록 */
/* .sub:has(.cert-list) { min-height: calc(100vh - 65px); position: relative; background: url("/resources/images/fnc_images/common/login_bg.png") no-repeat bottom/contain; } */
.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } 
.cert-grid-item { border: 1px solid #ebebeb; border-radius: 10px; padding: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } 
.cert-grid-item > h3 { margin-top: 10px; font-size: 16px; line-height: 24px; font-weight: 600; } 
.cert-grid-item > p { margin-bottom: 10px; color: #a4a4a4; font-size: 12px; line-height: 16px; } 
.cert-grid-item > a { width: 100%; max-width: 100px; height: 34px; background-color: #0074e6; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; } 
/* 수료증 상세 */
.cert-detail-preview { width: 100%; border: 1px solid #ebebeb; border-radius: 20px; margin-bottom: 40px; } 
/* 마이페이지 */
.mypage { height: 100%; display: flex; justify-content: space-between; flex-direction: column;} 
.mypage-top { padding-top: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } 
.mypage-top > div { width: 100px;aspect-ratio:1/1; border-radius: 50%; background-color: #f4f4f4; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow:hidden;}
.mypage-top > div > img{width:100%;height:100%; object-fit:cover;} 
.mypage-top > h3 { font-size: 22px; line-height: 30px; font-weight: 600; } 
.mypage-top > p { font-size: 14px; line-height: 20px; color: #a4a4a4; } 
.mypage-top > span { width: 100%; max-width: 240px; height: 1px; display: block; background-color: #e9e9e9; margin: 20px 0; } 
.mypage-top > h4 { font-size: 16px; line-height: 24px; font-weight: 500; margin-bottom: 20px; }
.mypage-btns{margin-top:60px;} 
/* 회원가입 */
.join-top { width: 100%; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 25px; padding-top: 5px; } 
.join-img { width: 100px; aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #f4f4f4; overflow: hidden; } 
.join-img > img { width: 100%; height: 100%; object-fit: cover; } 
.join-top > label { width: 100%; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; border-radius: 20px; border: 1px solid #e9e9e9; font-size: 14px; line-height: 20px; font-weight: 500; } 
.join-top > label > input { display: none; } 
.join-bot { width: 100%; } 
.join-bot > label { width: 100%; margin-bottom: 20px; } 
.join-bot > label p { margin-bottom: 5px; font-size: 16px; line-height: 24px; font-weight: bold; } 
.join-bot > label input { width: 100%; border: none; border-bottom: 1px solid #c8c8c8; height: 35px; font-size: 16px; line-height: 24px; font-weight: 400; } 
.join-bot > label h3 { width: 100%; border: none; border-bottom: 1px solid #c8c8c8; height: 35px; font-size: 16px; line-height: 24px; font-weight: 400; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.join-id { display: flex; border-bottom: 1px solid #c8c8c8; height: 35px; align-items: center; justify-content: space-between; gap: 10px; } 
.join-id > button { padding: 0 20px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background-color: #0074e6; color: #fff; font-size: 14px; line-height: 20px; } 
.join-btns > input { width: 100%; height: 55px; background-color: #0074e6; color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; line-height: 24px; margin-top: 40px; } 

/* 관리자 팀원관리 */
.sub:has(.manage-team) { padding: 70px 0 20px; } 
.manage-team-search { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 0 20px; } 
.manage-team-search > select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
 border: 1px solid #e9e9e9; border-radius: 10px; height: 40px; outline: none; background: url("/resources/images/fnc_images/common/select_blue.svg") no-repeat, #fff; background-position: right 10px top 50%; padding-left: 10px; padding-right: 30px; flex-shrink: 0; } 
.manage-team-search > div { width: 100%; height: 40px; position: relative; border-radius: 10px; background-color: #f6f6f6; } 
.manage-team-search > div > input { width: 100%; height: 100%; padding: 0 10px; } 
.manage-team-search > div > button { position: absolute; right: 0; top: 0; width: 30px; height: 100%; display: flex; align-items: center; justify-content: start; } 
.manage-team-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 20px; } 
.manage-team-title > h3 { font-size: 18px; line-height: 26px; font-weight: bold; } 
.manage-team-title > div { height: 35px; padding: 0 15px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #ebebeb; border-radius: 20px; } 
.manage-team-title > div > p { font-size: 13px; line-height: 19px; font-weight: 600; color: #0074e6; } 

.manage-team-title:has(span) { justify-content: start; gap: 15px; } 
.manage-team-title > span { height: 26px; padding: 0 15px; background-color: #f6f6f6; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 18px; font-weight: 600; gap: 3px; } 
.manage-team-title > span > span { color: #0074e6; } 
.manage-team-list { width: 100%; margin-bottom: 40px; } 
.manage-team-list table { width: 100%; } 
.manage-team-list table tr { padding: 0 20px; } 
.manage-team-list table th { background-color: #f6f6f6; height: 40px; font-size: 14px; line-height: 20px; font-weight: bold; padding: 5px; } 
.manage-team-list table td { height: 50px; border-bottom: 1px solid #e9e9e9; text-align: center; font-size: 14px; line-height: 20px; font-weight: 500; padding: 5px; } 
.manage-team-list table td a{ width: 60px; height: 100%; background-color: #565656; display: flex; align-items: center; justify-content: center; border-radius: 5px; color: #fff; margin: 0 auto; }
  
.manage-team-list table .name { text-align: left; } 
.manage-team-list table tr th:first-child,
.manage-team-list table tr td:first-child { padding-left: 20px; } 
.manage-team-list table tr th:last-child,
.manage-team-list table tr td:last-child { padding-right: 20px; } 
.manage-team .manage-main-find { width: calc(100% - 40px); margin: 0 auto; } 

.manage-team-toggle-bot > div{display:none;}
.manage-team-toggle-bot > div.active{display:block;}
.manage-team-toggle-top { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding:0 20px;} 
.manage-team-toggle-top > a { display: flex; align-items: center; justify-content: center; width: 50%; height: 44px; border-radius: 10px; background-color: #fff; border: 1px solid #ebebeb; color: #0074e6; font-size: 14px; line-height: 20px; font-weight: 600; } 
.manage-team-toggle-top > a.active { background-color: #1a4e81; border: none; color: #fff; } 

.popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 999; display: none; align-items: center; justify-content: center; } 
.popup.active { display: flex; } 
.popup-wrap { width: calc(100% - 40px); background-color: #fff; box-shadow: 0px 3px 6px #00000029; border-radius: 15px; position: relative; } 
.popup-wrap > h1 { width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; height: 55px; border-bottom: 1px solid #e9e9e9; font-size: 16px; line-height: 24px; font-weight: bold; } 
.popup-info { padding: 10px 20px 20px; } 
.popup-info > p { font-size: 14px; line-height: 20px; font-weight: bold; margin-bottom: 10px; } 
.popup-info input { width: 100%; height: 40px; border-radius: 10px; background-color: #f6f6f6; padding: 0 15px; margin-bottom: 20px; font-size: 14px; line-height: 20px; } 
.popup-info textarea { width: 100%; height: 100px; border-radius: 10px; background-color: #f6f6f6; padding: 10px 15px; margin-bottom: 40px; resize: none; font-size: 14px; line-height: 20px; } 
.popup-x { position: absolute; top: 15px; right: 20px; } 
/* 배정 */
.assign-top { padding: 0 20px 20px; } 
.assign-top > h3 { font-size: 18px; line-height: 26px; font-weight: bold; margin-bottom: 5px; } 
.assign-top > p { font-size: 14px; line-height: 20px; color: #a4a4a4; } 
.team-assign .done { background-color: #f6f6f6; } 
.team-assign .done .name { color: #0074e6; } 
.team-assign td > a.team-assign-btn { background-color: #fff; border: 1px solid #e9e9e9; color: #0074e6; } 

.lecture-assign { padding: 0 20px; margin-bottom: 10px; } 
.lecture-box { width: 100%; border: 1px solid #ebebeb; border-radius: 10px; } 
.lecture-box label { width: 100%; display: flex; align-items: center; justify-content: space-between; height: 40px; width: 100%; padding: 0 20px; } 
.lecture-box label p { font-size: 14px; line-height: 20px; font-weight: 500; } 
.lecture-box-top { border-bottom: 1px solid #ebebeb; }
.lecture-box label.lecture-box-top{height:50px;}
.lecture-box label.lecture-box-top p{font-size:16px;line-height:24px;font-weight:bold;}

.assign-chk { padding: 0 20px; margin-bottom: 20px; } 
.assign-chk > p { padding: 0 20px; width: fit-content; background-color: #edf7ed; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 14px; line-height: 20px; font-weight: bold; margin-bottom: 10px; } 
.assign-chk > p > span { color: #4caf50; } 
.assign-chk > div { background-color: #edf7ed; border-radius: 10px; padding: 15px; } 
.assign-chk > div > p { color: #4caf50; display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 18px; font-weight: bold; margin-bottom: 10px; } 
.assign-chk > div > h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 24px; font-weight: 500; margin-bottom: 5px; } 
.assign-chk > div > h4 { margin-bottom: 5px; padding-left: 25px; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; } 
.assign-btns { margin-top: 40px; padding: 0 20px; } 
/* 유저상세 */
.user-top { display: flex; align-items: center; gap: 20px; } 
.user-top-img { width: 100px; flex-shrink: 0; border-radius: 50%; aspect-ratio: 1/1; background-color: #f4f4f4; display: flex; align-items: center; justify-content: center; } 
.user-top-img > img { width: 100%; height: 100%; object-fit: cover; } 
.user-top-info { width: 100%; margin-bottom: 20px; } 
.user-top-info > h3 { font-size: 18px; line-height: 26px; font-weight: 600; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e9e9e9; margin-bottom: 7px; padding-bottom: 7px; } 
.user-top-info > h3 > span { color: #a4a4a4; font-size: 14px; line-height: 20px; font-weight: 400; } 
.user-top-info > p { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 3px; } 
.user-top-info > p > span { font-weight: 400; } 
.user-flex { width: 100%; display: flex; margin-bottom: 20px; } 
.user-flex > div { height: 60px; width: 33.4%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border-right: 1px solid #e9e9e9; } 
.user-flex > div:last-child { border: none; } 
.user-flex > div > p { font-size: 14px; line-height: 20px; font-weight: 600; } 
.user-flex > div > h3 { font-size: 14px; line-height: 20px; font-weight: 600; color: #0074e6; display: flex; align-items: end; gap: 5px; } 
.user-flex > div > h3 > span { font-size: 12px; color: #000; line-height: 16px; font-weight: 500; } 
.user-progress > h4 { font-size: 18px; line-height: 26px; font-weight: bold; margin-bottom: 10px; } 
.user-progress .main-bot-content-box { box-shadow: none; border: 1px solid #ebebeb; } 
.user-progress .main-bot-content-box-top { justify-content: start; gap: 10px; } 
.user-progress .main-bot-content-box-top > h3 { font-size: 16px; line-height: 24px; font-weight: 600; padding-top: 1px; } 
.user-progress .main-bot-content-box-bot { justify-content: end; } 
/* 팀 상세 */
.team-detail-top { flex-direction: column; align-items: center; padding: 0 20px; margin-bottom:40px;} 
.team-detail-top .user-top-info > h3 { justify-content: center; width: fit-content; margin: 0 auto 7px; padding: 0 30px 7px; } 
.team-detail-top .user-top-info { text-align: center; margin-bottom: 0; } 
.team-detail-code { width: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #ffe1bb; border-radius: 10px; background-color: #fff5e9; height: 65px; font-size: 20px; line-height: 28px; font-weight: 600; } 
.team-detail-btns { width: 100%; } 
.team-detail .manage-team-list td > a { width: 70px; margin: 0 auto; } 
.team-detail .manage-team-list td > a.type2 { background-color: #e53935; }

/* pc버전 */
@media screen and (min-width: 1024px){
	body{max-width:1480px;margin:0 auto;}
	.wrap{padding:0;}
	.header{height:65px;}
	/* .header-logo{width:90px;} */
	.header-logo img{width:100%;}
	.main-top{padding:0 30px 30px;}
	.main-top-info > p{height: 30px;    padding: 0 20px; font-size:16px;line-height:24px;}
	.main-top-info > h3:has(span){flex-direction:column;gap:10px;align-items:start;}
	.main-bot{padding:30px;}
	.main-bot-header{margin-bottom:30px;gap:30px;}
	.main-bot-content > div.active {display:grid;grid-template-columns:1fr 1fr; gap:30px;}
	.main-bot-content > div > form{display:none;}
	/* 수정: PC 모드에서 이수증 발급 form이 숨겨지지 않도록 예외 처리*/
	.main-bot-content > div > form.issue-certificate-form{display:block;grid-column: span 2;}
	.main-bot-content > div > a {width:100%;margin:0;padding:20px;}
	.main-bot-content > div a.btn{grid-column: span 2;}
	/* 추가: PC 모드에서 "강의가 없습니다" 메시지가 전체 너비를 차지하도록 설정 */
	.main-bot-content > div .no-course-message{grid-column: span 2;}
	.main-bot-content-box-top > div{height:30px;font-size:16px;line-height:24px;}
	.main-bot-content-box-bot{margin-top:20px;}
	.main-bot-content-box-bot > p{font-size:18px;line-height:26px;}
	.main-bot-content-box-bot > div > p{font-size:18px;line-height:26px;}
	.main-bot-content-box-bot > div > p > span{font-size:16px;line-height:24px;}
	.main-top-info > select:focus{color:#000;}
	.main-top-info > h3 > span{height:32px;font-size:16px;line-height:24px;}
	.main-top-info > div{width:fit-content; gap:50px;}
	
	/* 원본: .manage-main-list{display:grid;grid-template-columns:1fr 1fr;gap:30px;} */
	/* 수정: PC 모드에서 각 박스가 자신의 높이만 차지하도록 align-items 추가 */
	.manage-main-list{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
	.manage-main-box{margin-bottom:0;}
	
	.back-btn{display:none;}
	.sub{padding:30px;}
	.sub:has(.manage-team){padding:30px;}
	.sub-top{position:static; justify-content:start; height:65px;padding:0 30px;}
	.sub-top > h1{font-size:20px;line-height:28px;}
	.manage-team-toggle-top > a{height:50px;font-size:16px;line-height:24px;}
	.manage-team-list table th{font-size:16px;line-height:24px; padding: 10px 5px;height:60px;}
	.manage-team-list table td{font-size:16px;line-height:24px; padding: 10px 5px;height:60px;}
	.manage-team-toggle-top{padding:0;margin-bottom:30px;}
	.manage-team-title{ margin-bottom:30px;padding:0;}
	.manage-team-title > div{height:40px;}
	.manage-team-title > div > p{font-size:16px;line-height:24px; }
	.manage-team-search{padding:0;margin-bottom:30px;}
	.manage-team-search > div{height:50px;}
	.manage-team-search > div > button{width:60px;align-items:center;justify-content:center;}
	.manage-team-title > span{height:34px;font-size:16px;line-height:24px;}
	.team-detail-top{max-width:600px;margin:0 auto 50px;}
	
	.popup-wrap{max-width:1024px;}
	.popup-wrap > h1{font-size:18px;line-height:26px;height:60px;}
	.popup-x{top:20px;}
	.popup-info > p{font-size:16px;line-height:24px;}
	.popup-info input{height:50px;font-size:16px;line-height:24px;}
	.popup-info textarea{font-size:16px;line-height:24px;height:150px;}
	
	.assign-top{padding:0 0 30px;}
	.assign-top > p{font-size:16px;line-height:24px;}
	.assign-btns{padding:0; display:flex;gap:30px;align-items:center;flex-direction:row-reverse;}
	.assign-chk{padding:0; margin-bottom:30px;}
	.assign-chk > div > p{font-size:16px;line-height:24px;}
	.assign-chk > div > h3{font-size:18px;line-height:26px;}
	
	input[type="checkbox"]{width:30px;height:30px;background-size:cover;}
	input[type="checkbox"]:checked{background-size:cover;}
	
	.lecture-assign{padding:0;margin-bottom:30px;}
	.lecture-box label.lecture-box-top{height:60px;}
	.lecture-box label{height:50px;}
	.lecture-box label.lecture-box-top p{font-size:18px;line-height:28px;}
	.lecture-box label p{font-size:16px;line-height:24px;}
	
	.sub:has(.login){max-width:800px;margin:0 auto;}
	.sub:has(.join){max-width:800px;margin:0 auto;padding:0 30px;}
	.sub:has(#print_view){max-width:800px;margin:0 auto;}
	
	.video-warning-top > p{font-size:16px;line-height:24px;}
	.video-warning-chk > label {height:50px;margin-bottom:20px;}
	.video-warning-chk > label > p{font-size:16px;line-height:24px;}
	.video-warning-btns{padding:0; display:flex;gap:30px;align-items:center;flex-direction:row-reverse;}
	
	.mypage-btns{max-width:600px;margin:60px auto 0;width:100%;}
	
	.manage-main-info > div > p{font-size:16px;line-height:24px;}
	.manage-main-info > div > h3 > span{font-size:16px;line-height:24px;}
	.manage-main-box-top{height:55px;}
	.manage-main-box-top > p{font-size:16px;line-height:24px;}
	/* 원본: .manage-main-box.active .manage-main-box-bot{padding:20px;} */
	/* 수정: PC 모드에서도 max-height는 JavaScript에서 동적 설정, padding만 지정 */
	.manage-main-box.active .manage-main-box-bot{padding:20px;}
	.manage-main-box-bot-team{font-size:18px;line-height:26px;}
	.manage-main-box-bot-done > h4{font-size:16px;line-height:24px;}
	.manage-main-box-bot-done > div{height:32px;}
	.manage-main-box-bot-done > div > p{font-size:16px; line-height:24px;}
	
	.mypage-top > p{font-size:16px; line-height:24px;}
	.mypage-top > h4{font-size:18px; line-height:26px;}
	.join-top{padding-top:30px;}
	.join-bot{margin-top:30px;}
	.cert-detail-btns{position:static !important; margin-top:20px; width:100% !important;}
	.cert-detail-btns > a{height:50px !important;}
	
	.manage-team-search > select{height:50px;}
	.add_member_btn{padding:0 !important;}
}

/* 강의배정 (lecture_assignment.jsp) */
.lecture-assign .manage-main-box.active .manage-main-box-bot{max-height:5000px;}
.lecture-box-top{display:flex !important;align-items:center;justify-content:space-between;}
.lecture-box-top .toggle-arrow{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:url("/resources/images/fnc_images/common/bottom_arrow_blue.svg") no-repeat center;transition:all 0.2s;cursor:pointer;margin-right:10px;}
.manage-main-box.active .toggle-arrow{transform:rotate(180deg);}
.lecture-box-top p{flex:1;font-size:16px;line-height:24px;font-weight:bold;}
.lecture-box-top .parent-checkbox{flex-shrink:0;cursor:pointer;}
.category-header{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;}
.category-header:hover{background-color:#f9f9f9;}
.category-header .toggle-arrow-sub{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:url("/resources/images/fnc_images/common/bottom_arrow_blue.svg") no-repeat center;background-size:12px 12px;transition:all 0.2s;cursor:pointer;margin-right:10px;}
.category-item.active .toggle-arrow-sub{transform:rotate(180deg);}
.category-header p{flex:1;font-size:14px;line-height:20px;font-weight:600;}
.category-header .sub-checkbox{flex-shrink:0;cursor:pointer;}
.category-item{border-bottom:1px solid #f0f0f0;}
.category-item:last-child{border-bottom:none;}
.category-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease-out;margin-left:20px;}
.category-item.active .category-content{max-height:3000px;transition:max-height 0.5s ease-in;}
.course-item{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-top:1px solid #f0f0f0;}
.course-item:first-child{border-top:none;}
.course-item p{flex:1;font-size:14px;line-height:20px;font-weight:500;}