@charset "utf-8";
.loading-content h2, .loading-content p, .loading-content h1{color:#fff}
.line2{display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden; word-break: break-all;}

.viewContent{word-break: break-all;}
.td-style{word-break: break-all; overflow:hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;}
/********************
** header 
********************/
header{overflow-y:scroll; box-shadow:0 0 8px rgba(0,0,0,0.2)}
.headerBox{border-bottom:1px solid #E9E9EC;}
/* 클릭 효과를 위한 CSS */
.menu-link {    transition: background-color 0.3s, color 0.3s; /* 부드러운 전환 효과 */}
.menu-link.active {    background-color: #D9EFFF;    color: #1062E5;    font-weight: 600; /* 활성화 시 폰트 굵게 */}

/********************
** main
********************/
.mainBannerBg{background:url('/img/missionBanner_w.jpg'); background-size:cover;}
.mainReturnBox1{border:1px solid #D9DADE; box-shadow:0 0 8px rgba(0, 0, 0, 0.1) ; width:calc(65% - 10px);}
.mainReturnBox2_1{background: linear-gradient(to bottom right, #EEF8FF, #D9EFFF);}
.mainLink{border:1px solid #D9DADE; box-shadow:0 0 8px rgba(0, 0, 0, 0.1) ;}
.mainLinkList{display:grid;grid-template-columns: repeat(3, 1fr);}
.mainProfitLink{display:grid;grid-template-columns: repeat(3, 1fr);}
.LastBanner{background: linear-gradient(to bottom left, #37383E, #4C4E58);}
.missionModal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;}
.missionModalBox{position: relative; width: 90%; max-width: 600px; background: #fff; border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.2);}

/********************
** calculation
********************/
/* 슬라이더 컨테이너 */
.slider-container {width: 100%;overflow: hidden;position: relative;height: 100px;margin: 0 auto;}
/* 슬라이더 트랙 - 핵심 애니메이션 */
.slider-track {display: flex;width: calc(100px * 60); /* 아이템 개수의 2배 */animation: slide 30s linear infinite;}
/* 아이콘 아이템 */
.icon-item {flex: 0 0 100px;height: 100px;display: flex;align-items: center;justify-content: center;transition: opacity 0.3s ease;margin-right:32px;}
.icon-item img {object-fit: cover;}
/* 슬라이딩 애니메이션 */
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100px * 30)); /* 아이템 개수만큼 이동 */
}
}
.calculationCard{border:1px solid #D9DADE; box-shadow:0 0 8px rgba(0, 0, 0, 0.1) ;}
.radio-group input[type="radio"] {    appearance: none;    width: 18px;    height: 18px;    border: 2px solid #cfd3d8;    border-radius: 50%;    position: relative;    outline: none;    cursor: pointer;  }
.radio-group input[type="radio"]:checked {    border-color: #0a1c40;  }
.radio-group input[type="radio"]:checked::before {    content: '';    width: 8px;    height: 8px;    background-color: #0a1c40;    border-radius: 50%;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%); }



/*** 2025.10.31 추가 css ***/
/********************
** aiwrite
********************/
.modal-backdrop {    display: none;    position: fixed;    top: 0; left: 0;    width: 100vw;    height: 100vh;     background: rgba(0, 0, 0, 0.7);   backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(20px);   z-index: 2;    justify-content: center;    align-items: center;  }  
.modalList{overflow-y: scroll;}
.modal-content{background:rgba(19, 43, 88, 0.8);}
.modalItem{display:grid; grid-template-columns: repeat(6, 1fr); position:relative;}
.card {    border: 1px solid #e0e0e0;    background-color: #f9f9f9;    cursor: pointer;    transition: all 0.3s ease;}
.card:hover {    border-color: #005eff;}
.card span {    color: #333;    transition: color 0.3s ease;}
.card input[type="radio"] {   position: absolute; left:-99999px;  }


/*** 2025.10.31 추가 css ***/
/* 선택된 상태 스타일 */
.card:has(input[type="radio"]:checked) {    background-color: #EEF8FF;    border-color: #2E99FF;}
.modal-btn{border:none;}
.card:has(input[type="radio"]:checked) .check_icon1 { opacity: 1; }
.check_icon1{opacity: 0; transition: opacity 0.3s; top:6px; right:6px; }

.custom_radio_input {display: none;}
.custom_radio_label {border: 2px solid #e0e6ec; background-color: #fff; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
.check_icon { opacity: 0; transition: opacity 0.3s; top:16px; right:16px; }
.custom_radio_input:checked + .custom_radio_label { border-color: #2E99FF; background-color: #EEF8FF;}
.custom_radio_input:checked + .custom_radio_label .check_icon { opacity: 1; }
.modal-close-btn{cursor: pointer; }
.makeTxt{max-height: 300px;}



/********************
** ceoprogram
********************/
.hookingBox{background: linear-gradient(to bottom , #26272B, #144FB9);}
.hookingTit{text-shadow:0 0 4px #2E99FF ;}
/** 프로그램 슬라이드 **/
.ceoprogram_slider_container {    width: 100%;    overflow: hidden;    position: relative;}
.ceoprogram_slider_track {    display: flex;    align-items: center;    will-change: transform;}
.ceoprogram_slide_item {    flex-shrink: 0;    transition: opacity 0.4s ease-in-out;    opacity: 1;}
.ceoprogram_slider_container {    width:100%;    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);}
.ceoprogram_slide_item {    width: 220px;    margin: 0 15px;    border-radius: 10px;    object-fit: cover;    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);}
.ceoprogramLinkBox{display:grid; grid-template-columns: repeat(2, 1fr);}
.ceoprogramLinkBoxTxt{color:#fff;}

/********************
** membership
********************/
.membershipBox{border:1px solid #D9DADE; box-shadow:0 0 8px rgba(0, 0, 0, 0.1) ; }
.membershipTit{border-bottom:1px solid #EEEEF0;}
#role{border:1px solid #D9DADE;}
.radio-option {    flex: 1; /* 각각 50% 차지 */  }  
.radio-option input[type="radio"] {    display: none;  }  
.radio-option span {    border: 1px solid #ccc;    color: #888;    background-color: #fff;    cursor: pointer;    user-select: none;    transition: 0.2s;  } 
.radio-option:first-child span {    border-radius: 4px 0 0 4px;    border-right: none;  }  
.radio-option:last-child span {    border-radius: 0 4px 4px 0;  }  
.radio-option input[type="radio"]:checked + span {    background-color: #f0f8ff;    border: 1px solid #007aff;    color: #007aff;    font-weight: bold;  }

/********************
** businessFix
********************/
.tabs .tab-btn {  transition: background-color 0.2s, color 0.2s;}
.tabs .tab-btn.active {  background-color: #0d6efd; /* 파란색 배경 */  color: white;  border-color: #0d6efd;}
.busniessViewTbl td{border:1px solid #bababa}

/********************
** db
********************/

/* 기본 입력창 스타일 */
.search-input {    border: 1px solid #e0e0e0;    outline: none;}
.search-input::placeholder {    color: #999;}
.search-input:focus {    border-color: #007bff;}
.search-icon {     right: 12px;    top: 50%;    transform: translateY(-50%);    cursor: pointer;}
.date-range-wrapper {    border: 1px solid #e0e0e0;}
.date-range-wrapper:focus-within {    border-color: #007bff;}
.dbDate { background:none;   border: none; outline: none;    padding: 9px 5px; font-size: 14px;    color: #333;    font-family: inherit; }
.dbList{display:grid; grid-template-columns: repeat(2, 1fr);}
.db{border:1px solid #D9DADE; box-shadow:0 0 8px rgba(0, 0, 0, 0.1) ;}
.dbViewBox{border:1px solid #D9DADE; box-shadow:0 0 8px rgba(0, 0, 0, 0.1) ;}
.dbViewBoxTit{border-bottom:1px solid #D9DADE;}
.dbViewBoxTxt{border-bottom:1px solid #F7F8F8;}
.dbViewBoxInput, .delBtn{border:1px solid #D9DADE;}
.dbBtn{display:grid; grid-template-columns: repeat(4, 1fr);}
.fixBtn{border:1px solid #2E99FF;}
.dbInfoSubject{white-space: nowrap; text-overflow: ellipsis; max-width:300px; overflow:hidden}
#lateDbTbl td{border:1px solid #999}

#centerLink > a{box-shadow:0 0 4px #00000038}



/********************
** excel
********************/

.excelBtn a{box-shadow:0 0 16px rgba(0, 0, 0, 0.1);}

/********************
** promotion
********************/
.imgView{bottom: 20px;  right: 0;}
.promotion_tab {    background: linear-gradient(to bottom, #F7F8F8, #eeeeef 100%);    border:1px solid #D9DADE;    border-radius: 8px 8px 0 0;    cursor: pointer;    font-weight: 500;    text-align:center;  }
.promotion_tab.active{background:#177AF9; border:1px solid #177AF9;  color:#fff;}
.promotion_product.selected {    border: 2px solid #177AF9; /* 선택되었을 때의 테두리 색상 */    box-shadow: 0 0 10px rgba(44, 56, 218, 0.5); /* 은은한 그림자 효과 */}
.promotion_tab_content {    display: none;    background: white;    border: 1px solid #ddd;    border-radius: 0 8px 8px 8px;  }
.promotion_tab_content.active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;  }
.pay-modal-close-btn {  display: none;}
button.promotion_product:focus,

.promotion_product {    border: 1px solid #ccc;  }
.promotion_modal {    display: none;    position: fixed;    top: 0; left: 0;    width: 100vw;    height: 100vh;    background: rgba(255, 255, 255, 0.7);   backdrop-filter: blur(8px);    justify-content: center;    align-items: center;  }
.promotion_modal.show {    display: flex;  }
.promotion_modalBox{overflow-y: scroll; background:rgba(19, 43, 88, 0.8);}
.modal_close_btn{border:none; background:none;}

.promotionBox{display:grid; grid-template-columns: repeat(2, 1fr);}
.promotionBoxPay{  border: 1px solid #ccc; }
.promotionRadio {    border: 1px solid #ccc;    color: #555;    cursor: pointer;    transition: all 0.2s ease-in-out;}
.promotionRadio:hover {    border-color: #999;  }

input[type="radio"]:checked + .promotionRadio {background-color: #EEF8FF; /* 선택 시 배경색 */color: #177AF9; /* 선택 시 글자색 */border-color: #177AF9; /* 선택 시 테두리색 */font-weight: 500; /* wfW5 클래스와 유사한 효과 */}
.promotionTxt{border:1px solid #D9DADE}
.Paynumber{border-top: 1px solid #3D83F4;  }
/* 실제 input 태그 숨기기 */
.hidden-file-input {    display: none;  }  

/* 필터 */
.flyer_filters{width:100%; display:flex; flex-wrap:wrap; gap:8px; padding:16px; background-color:#f7f7f7; border-radius:8px;}
.flyer_filter_btn{padding:10px 16px; line-height: 1em;; border:1px solid #D9DADE; background-color:#fff; border-radius:20px; cursor:pointer; font-size:14px; transition:all .2s ease}
.flyer_filter_btn:hover{background-color:#e9e9e9; border-color:#ccc}
.flyer_filter_btn.active{background-color:#0d6efd; color:#fff; border-color:#0d6efd; font-weight:600}
.promotion_modal{display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; overflow:auto; background: rgba(255, 255, 255, 0.7);   backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(20px);  align-items:center; justify-content:center}
.promotion_modal.show{display:flex}

/* 리스트 */
.promotionList{min-height:80dvh}
.ellipsis-1 {    white-space: nowrap;      overflow: hidden;       text-overflow: ellipsis; }


/********************
** managing
********************/
.table-wrapper {overflow-x: auto; -webkit-overflow-scrolling: touch;}
/* 테이블 스타일 */
.status-table {min-width: 800px; /* 모바일에서 최소 너비를 800px로 설정 */border-collapse: collapse;}
.status-table th,
.status-table td { line-height: 100%;padding: 20px 16px;vertical-align: middle;border-right: 1px solid #e9ecef; /* 모든 셀 오른쪽에 세로선 추가 */}
.status-table th:last-child,
.status-table td:last-child {border-right: none; /* 마지막 열의 세로선은 제거 */}
.status-table thead th {background-color: #f7f8fa;font-weight: 500;color: #555;border-bottom: 1px solid #e9ecef;}
.status-table tbody tr {border-bottom: 1px solid #e9ecef;}
.status-table tbody tr:last-child {border-bottom: none;}
.status-table td {color: #495057;}

/* 페이지네이션 스타일 */
.pagination {display: flex;justify-content: center;align-items: center;margin-top: 32px;}
.pagination a {color: #6c757d;padding: 8px 12px;text-decoration: none;transition: background-color .2s;margin: 0 4px;font-size: 14px;}
.pagination a.active {font-weight: bold;color: #333;}
.pagination a:hover:not(.active) {color: #000;}


/********************
** addMember
********************/
.addMemberBox{border:1px solid #D9DADE; box-shadow:0 0 8px rgba(0, 0, 0, 0.1) ;}
#policy{left:-99999px;}
#policy + label:before{content:''; border:1px solid #d5d5d5; width:12px; height:12px; background:#fefefe; transition: ease-in-out 0.3s;}
#policy:checked + label:before{background:#007aff; border:1px solid #007aff}


/********************
** partner
********************/
.addMember{margin-left:0; width:100dvw}
.partnerList{display:grid; grid-template-columns: repeat(2, 1fr); }
.partnerLink{border:1px solid #e9ecef;}


/********************
** statement
********************/
#statement_month_selector button{cursor: pointer;}
#statement_month_selector button.active{color:#fff;}
/* 연/월 선택 버튼 */
.statement_control_btn {    border: none;    background:none;}
.statement_month_btn {    width: 40px;    height: 40px;    background:#fff;    border: 1px solid #D9DADE;    color:#91949F;    border-radius: 4px;    font-weight: 500;    font-size:14px;    transition: background-color 0.2s;    display:flex; align-items: center; justify-content: center;}
.statement_month_btn.active {    background-color: #0d6efd;    color: white;    border-color: #0d6efd;}
.statementList{display:grid; grid-template-columns: repeat(2, 1fr); }
.statementTxt{border-left:1px solid #B8BAC1;}

/********************
** statementView
********************/
.statementForm{overflow-x:auto}
.statementPage{border-top:10px solid #005eff; border-bottom:10px solid #005eff; border-left:1px solid #eee; border-right:1px solid #eee; box-sizing: border-box;}
.statementTit{border-bottom: 2px solid #174591;}
.statementBoard td{border:1px solid #909090}
#startVideoBtn{left:50%; top:50%; transform:translate(-50%, -50%)}
#startVideoBtn.active{left:-9999999px}
#youtubeFrame{background:#eee}
.studyViewList{border:2px solid #eee}
.statementBoardBox{overflow-x:auto;}
.statementTbl td{border:1px solid #909090}

/********************
** statement_Click
********************/
/* 날짜 입력 필드 스타일 */
.date_input_wrapper {    position: relative;}
.date_input {    border: 1px solid #ced4da;}
/* 날짜 입력 필드의 기본 캘린더 아이콘 색상 변경 */
.date_input::-webkit-calendar-picker-indicator {    color: #fff;}
/* 버튼 스타일 */
.btn_primary {    background-color: #0d6efd;    border-color: #0d6efd;    color: white;}
.statement_table {    background-color: #fff;    overflow: hidden;     border: 1px solid #dee2e6;    /* 테이블 셀 사이의 테두리를 한 줄로 합쳐줍니다. */    border-collapse: collapse; }
.statement_table th,
.statement_table td {    padding: 16px 20px;    border-bottom: 1px solid #dee2e6;    /* 이 부분을 추가해 셀 오른쪽에 세로선을 만듭니다. */    border-right: 1px solid #dee2e6;     font-size:16}
/* 각 행의 마지막 셀에서는 오른쪽 테두리를 제거합니다. */
.statement_table th:last-child,
.statement_table td:last-child {    border-right: none;}
.statement_table thead th {    background-color: #f8f9fa;    font-weight: 700;    border-bottom-width: 2px;}
.statement_table tbody tr:last-child td {    border-bottom: none;}

/********************
** statementWrite
********************/
.statementWrite{border:1px solid #D9DADE; box-shadow:0 0 8px rgba(0, 0, 0, 0.1) ;}


/********************
** statementUpdate
********************/

#editableTable {    table-layout: fixed;    width: 100%;    border-collapse: collapse;}
#editableTable tr:hover{background:#F7F8F8;}
.statementTh, .statementTd {    border: 1px solid #D9DADE;    vertical-align: middle;}
.statementTd{background:#fff;}
.statementTh {    background-color: #F7F8F8;}
.statementTd input {    width: 95%;    padding: 6px;    border: 1px solid #D9DADE;    border-radius: 4px;    box-sizing: border-box; }
#addRowBtn:hover {    background-color: #94BCFC;}
#saveBtn:hover {    background-color: #1F3FD6;}
.deleteBtn {    background-color: #F5003E;    border: none;    cursor: pointer;}







/********************
** regular
********************/
.regular_table_wrapper {    overflow-x: scroll; }
.regular_table {    background-color: #fff;    border-collapse: collapse;    min-width: 800px;   }
.regular_table th,.regular_table td {   padding: 12px 16px;    border-bottom: 1px solid #dee2e6;    border-right: 1px solid #dee2e6; }
.regular_table th:last-child,.regular_table td:last-child {    border-right: none;}
.regular_table thead th {    background-color: #f8f9fa;    border-bottom-width: 2px;}


/***************************
** 강의 페이지 추가 css
***************************/
/* 강의 리스트 */
.studyList{display:grid;  grid-template-columns: repeat(3, 1fr); }
.studyList a{border:1px solid #D9DADE;}
.videoThumbnail{  aspect-ratio: 16 / 9;  object-fit: cover;}
.contentsStudyList{display:grid;  grid-template-columns: repeat(4, 1fr); }
.contentsStudyList a{border:1px solid #D9DADE;}
.readyStudy{background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,1));}
.studyGauge {    width: 100%;    height: 4px;     background-color: #EEEEF0;     border-radius: 10px;      overflow: hidden;        position: relative;    margin-top: 8px;}
.studyGauge::before {    content: '';    display: block;    height: 100%;    width: var(--width, 0%);     background-color: #177AF9;     border-radius: 10px;    transition: width 0.5s ease-out; }
.videoThumbnail1{background:url('/img/education-001.jpg')center center no-repeat; background-size:cover}
.videoThumbnail2{background:url('/img/education-002.jpg')center center no-repeat; background-size:cover}
.videoThumbnail3{background:url('/img/education-003.jpg')center center no-repeat; background-size:cover}
/* 강의 뷰 */
.chapter-container {  max-width: 400px;  overflow: hidden; }
.videoPlay{aspect-ratio: 16 / 9;}
.arrow {  width: 10px;  height: 10px;  border-right: 2px solid #333;  border-bottom: 2px solid #333;  transform: rotate(45deg);  transition: transform 0.3s ease;}
.chapter-header.collapsed .arrow {  transform: rotate(-135deg);}
.lecture-list {  max-height: 100%;   overflow: hidden;  transition: max-height 0.3s ease-in-out;}
.lecture-list.collapsed {  max-height: 0;}
.lecture-item {  border-bottom: 1px solid #f0f0f0;  cursor: pointer;  transition: background-color 0.2s;}
.lecture-item.active {  background-color: #eff8ff; }

.videoView { max-width: 1100px; }
.lecture-list { max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease-in-out; }
.lecture-list.collapsed { max-height: 0; }
.arrow { width: 12px; height: 12px; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg); transition: transform 0.3s; }
.chapter-header.collapsed .arrow { transform: rotate(-135deg); }
#customControls button:hover { opacity: 0.8; }

/* 로딩 스피너 */
.spinner-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: rgba(0,0,0,0.5); display: flex; flex-direction: column;align-items: center; justify-content: center; z-index: 5;    }
.spinner {border: 4px solid rgba(255, 255, 255, 0.3);border-top: 4px solid #fff;border-radius: 50%; width: 40px; height: 40px;animation: spin 1s linear infinite;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 진행바 스타일 */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: rgba(255,255,255,0.3); border-radius: 3px; }
input[type=range]::-webkit-slider-thumb { height: 14px; width: 14px; border-radius: 50%; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -4px; box-shadow: 0 0 2px rgba(0,0,0,0.5); }

/* 컨트롤 바 Hover */
#customControls {opacity: 0;transition: opacity 0.3s ease;background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%) !important;}
#videoContainer:hover #customControls { opacity: 1; }

/* 영상 비율 유지 */
#myVideo { width: 100%; height: 100%; object-fit: contain; background-color: #000; }
#videoContainer:fullscreen { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000; }
#videoContainer:-webkit-full-screen { width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; }



/********************
** studyWrite
********************/
#videoLevel{left:-9999px}
#videoLevel + label{transition: ease-in-out 0.3s; border:1px solid #005eff}
#videoLevel:checked + label{background:#177AF9; color:#fefefe}


/********************
** story
********************/
.storyList{display:grid;  grid-template-columns: repeat(4, 1fr); }
.storyList a{overflow:hidden; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);}
.storyTit{border-bottom:1px solid #D9DADE}


/********************
** storyView
********************/
.storyViewTxt{border-bottom:1px solid #D9DADE}
.storyViewFile{border:1px solid #D9DADE}
.storyFileDown{border:1px solid #B7B7C2;}
.storyView b{font-weight:600; font-size:inherit; color:inherit; }

/********************
** boardWrite
********************/
.boardInput {    border: 1px solid #e0e0e0;    outline: none;}
.boardInput::placeholder {    color: #999;}


/********************
** login
********************/
       
.custom_checkbox {display: inline-flex; align-items: center;   cursor: pointer;}
.custom_checkbox input[type="checkbox"] {display: none;}
.custom_checkbox .checkbox_icon {position: relative;display: inline-block;width: 20px;height: 20px;border: 2px solid #adb5bd; border-radius: 50%;    transition: all 0.2s;}
.custom_checkbox input[type="checkbox"]:checked + .checkbox_icon {border-color: #0d6efd;}
.custom_checkbox input[type="checkbox"]:checked + .checkbox_icon::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;background-color: #0d6efd; border-radius: 50%;}



/********************
** pay
********************/
.paysubscribeTbl td{border:1px solid #adb5bd}
.paysubscribeTbl input[type="radio"]{left:-9999999px;}
.paysubscribeTbl input[type="radio"]+label{ transition: ease-in-out 0.3s;}
.paysubscribeTbl input[type="radio"]:checked + label{background:#007aff;}

.paysubscribeTbl input[type="checkbox"]{left:-9999999px;}
.paysubscribeTbl input[type="checkbox"]+label{ transition: ease-in-out 0.3s;}
.paysubscribeTbl input[type="checkbox"]:checked + label{background:#007aff;}


/********************
** paycheck
********************/
.contentPayBox hr{border:1px solid #444; border-width:1px 0 0 0}
.filterItem{cursor: pointer;}
.filterItem.active{font-weight:600; background:#007aff; color:#fefefe;}

/********************
** paycheckView
********************/
.thumbnail{align-items: stretch;}
.paycheckview{background:url('../img/paycheckView.jpg'); background-size:cover;}
.thumbnailTxt{align-self: stretch; background: linear-gradient(to right, #FFFFFF, #EEEEF0);}
.thumbnailTxtBox{display: grid;  grid-template-columns: repeat(3, 1fr); gap:16px;}
.inputselect{border:1px solid #91949F;}
.calculatorTxt{background: linear-gradient(to right, #F7F8F8, #EEEEF0);}
.calculatorBox{display: grid;  grid-template-columns: repeat(2, 1fr);}
.countBox{display: grid;  grid-template-columns: repeat(2, 1fr); gap:24px;}
.reviewBox{display: grid;  grid-template-columns: repeat(3, 1fr); gap:24px;}
.lastBox1{background: linear-gradient(to right, rgba(23, 69, 145, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(23, 69, 145, 0.1) 100%);box-shadow: 2px 2px 4px #00000038, inset 1px 1px 2px rgba(255, 255, 255, 0.25), inset -1px -1px 2px rgba(255, 255, 255, 0.25);}
.lastBtn{ box-shadow: 0 0 16px #177AF9;}


/********************
** footer
********************/
.mobile_footer {    position: fixed;    bottom: 20px;    left: 50%;    transform: translateX(-50%);    width: 90%;    min-width: 320px;    z-index: 1;    background-color: rgba(30, 30, 30, 0.7);    backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(10px);    border-radius: 50px;    padding: 8px;    box-shadow: 0 4px 12px rgba(0,0,0,0.2);}
.mobile_footer a{    aspect-ratio: 1 / 1; /* 가로:세로 비율을 1:1로 설정 */    width:56px;    border-radius: 99px;}
.mobile_footer a.active {    background-color: #0d6efd;}
.modal_overlay {    display: none;    position: fixed; /* 화면 전체를 덮도록 고정 */    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.6); /* 반투명 검은색 배경 */    z-index: 1000; /* 다른 요소들 위에 오도록 설정 */     /* 모달 콘텐츠를 중앙 정렬하기 위함 */    justify-content: center;    align-items: center; }
  
/* 모달이 보여질 때의 스타일 */
.modal_overlay.show {    display: flex; /* flex로 바꾸어 화면에 표시 */  }
/* 닫기 버튼 (X) */
.footmodal_close_btn {    position: absolute;    top: 24px;    right: 24px;    font-size: 32px;    font-weight: bold;   color: #888;    cursor: pointer;    transition: color 0.2s;  }
.footmodal_close_btn:hover {    color: #000;  }
.kakao{background:#FFD900;}
.thread{background:#FFB1EE;}
.footLink{background:#fff;}


/********************
** 영업·세미나·제휴사
********************/
.ceoAll_table_wrap {    overflow-x: auto; }
.ceoAll_table {    background-color: #fff;    border-collapse: collapse;    min-width: 800px;   }
.ceoAll_table th,.ceoAll_table_wrap td {   padding: 12px 16px;    border-bottom: 1px solid #dee2e6;    border-right: 1px solid #dee2e6; }
.ceoAll_table th:last-child, .ceoAll_table td:last-child {    border-right: none;}
.ceoAll_table thead th {    background-color: #f8f9fa;    border-bottom-width: 2px;}
.data-filter-btn.active { background-color: #007bff; color:#fff; font-weight: bold;}
/* 클릭 가능한 행에 마우스를 올렸을 때 스타일 */
.clickable-row { cursor: pointer;}
.clickable-row:hover { background-color: #f5f5f5;}


/********************
** 영업신청
********************/
.dbAddForm{border:1px solid #D9DADE; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);}



/********************
** 핫픽
********************/
.hotpick_table_wrapper {    overflow-x: auto; }
.hotpick_table {    background-color: #fff;    border-collapse: collapse;    min-width: 800px;  overflow-x: auto; }
.hotpick_table th,.hotpick_table td {   padding: 12px 16px;    border-bottom: 1px solid #dee2e6;    border-right: 1px solid #dee2e6; }
.hotpick_table th:last-child,.hotpick_table td:last-child {    border-right: none;}
.hotpick_table thead th {    background-color: #f8f9fa;    border-bottom-width: 2px;}


 .chart-container {    width: 100%;    height: 600px;    overflow-x: auto;    border-radius: 8px;    background-color: #fff;}
.chart-wrapper {    width: 2000px;    height: 100%;     box-sizing: border-box;}









/********************
** 하위조직관리
********************/

.subsystem_org_chart,
.subsystem_org_chart ul,
.subsystem_org_item {    position: relative;}
.subsystem_search_button{background:none;}
.subsystem_search_container{border:1px solid #D9DADE;}

/* 가로선 */
.subsystem_org_chart li::before{    content: '';    position: absolute;    top: 28px;     right: -30px;     width: 30px;    height: 1px;    background-color: #ccc;}
.subsystem_org_item::before {    content: '';    position: absolute;    top: 28px;     left: -30px;     width: 30px;    height: 1px;    background-color: #ccc;}

.subsystem_org_chart li:last-child::after,
.subsystem_org_item:last-child::after {    content: '';    position: absolute;    top: 29px;    bottom: 0;    left: -30px;     width: 1px;    background-color: #f8f9fa; }

.subsystem_org_chart > ul > li:first-child::before {    top: 28px; left:103px;}
.subsystem_org_chart > ul > li:first-child ul::before {    top: 28px;}
/* --- 4. 노드(Node) 박스 스타일 --- */
.subsystem_node {    background-color: #ffffff;    border: 1px solid #ccc;   }
.subsystem_node.subsystem_active {    border-color: #1062E5;    box-shadow: 0 0 0 1px #1062E5; background:#EEF8FF;}




/********************
** 하위조직관리
********************/
.subsystem_org_chart,
.subsystem_org_chart ul,
.subsystem_org_item {    position: relative;}
.subsystem_search_button{background:none;}
.subsystem_search_container{border:1px solid #D9DADE;}
.subsystem_org_group::before, .subsystem_sub_group::before {    content: '';    position: absolute;    top: 0;    bottom: 0;    left: -2px;    width: 1px;    background-color: #ccc;}

.subsystem_org_chart li::before{    content: '';    position: absolute;    top: 28px;     right: -30px;     width: 30px;    height: 1px;    background-color: #ccc;}
.subsystem_org_item::before {    content: '';    position: absolute;    top: 28px;     left: -30px;     width: 30px;    height: 1px;    background-color: #ccc;}
.subsystem_org_chart li:last-child::after,
.subsystem_org_item:last-child::after {    content: '';    position: absolute;    top: 29px;    bottom: 0;    left: -30px;     width: 15px;    background-color: #f8f9fa; }
.subsystem_org_chart > ul > li:first-child::before {    top: 28px; left:103px;}
.subsystem_org_chart > ul > li:first-child ul::before {    top: 28px;}
.subsystem_sub_group::before{top:42px !important}
.subsystem_node {    background-color: #ffffff;    border: 1px solid #ccc;   }
.subsystem_node.subsystem_active {    border-color: #1062E5;    box-shadow: 0 0 0 1px #1062E5; background:#EEF8FF;}
.subsystem_search_input{background:none;}




.member_org_chart,
.member_org_group,
.member_org_item {     position: relative;}
.member_search_button {     background: none;}
.member_search_container {     border: 1px solid #D9DADE;}
.member_node {     background-color: #ffffff;     border: 1px solid #ccc;   }
.member_name_divider {     border-right: 1px solid #B8BAC1;}
.member_node.member_active {     border-color: #1062E5;     box-shadow: 0 0 0 1px #1062E5;     background: #EEF8FF;}
.member_org_group::before {     content: '';     position: absolute;     top: 0;     bottom: 0;     left: 0;     width: 1px;     background-color: #D9DADE; }
.member_org_item::before {     content: '';     position: absolute;     top: 28px;          left: -30px;       width: 30px;     height: 1px;     background-color: #D9DADE;}
.member_node.wpR::after {    content: '';    position: absolute;    top: 27px;      left: 100%;       width: 28px;      height: 1px;    background-color: #D9DADE;}
.member_org_item:last-child::after {     content: '';     position: absolute;     top: 29px;          bottom: 0;     left: -30px;        width: 15px;     background-color: #f8f9fa; }
.member_org_chart > ul > .member_org_item::before {     display: none;}
.member_org_item > .member_org_group::before {    top: 28px; }
.member_org_chart > ul > .member_org_item:last-child::after {     display: none;}
.buttonLi:before{display:none}
/* 하위조직 모달 */
.subsystem_modal {    display: none;    position: fixed;    top: 0; left: 0;    width: 100vw;    height: 100vh;    background: rgba(255, 255, 255, 0.7);   backdrop-filter: blur(8px);    justify-content: center;    align-items: center;  }
.subsystem_modal.show {    display: flex;  }
.subsystem_modalBox{overflow-y: auto; background:rgba(19, 43, 88, 0.8);}



/********************
**  영업자순위
********************/
.ranking_filter_btn {    cursor: pointer;    transition: all 0.2s;}
.ranking_filter_btn.active {    background-color: #007BFF;     color: #FFFFFF;    border-color: #007BFF;}
.ranking_table_wrapper {    width: 100%;    overflow-x: auto;     background-color: #FFFFFF;}
.ranking_table {    width: 100%;  table-layout: fixed;  min-width: 1200px;     border-collapse: collapse; }
.ranking_table th,
.ranking_table td {    border: 1px solid #D9DADE;    white-space: nowrap;}
.ranking_grade_badge.center {    background-color: #EEF8FF;     color:#1062E5;   border:1px solid #BBE3FF;}
.ranking_grade_badge.planner {    background-color: #CEF9F2;     color:#13726F;    border:1px solid #64E4D6;}
.filterable_col.hide {    display: none;}
.ranking_pagination a {    padding: 6px 12px;    font-size: 14px;    font-weight: 500;    color: #919191;    border-radius: 4px;}
.ranking_pagination a:hover {    background-color: #E9ECEF;}
.ranking_pagination a.active {    background-color: #007BFF;    color: #FFFFFF;}
.ranking_pagination a.disabled {    color: #AAAAAA;    pointer-events: none;}







/********************
**  2025.11.21 추가본
********************/


 /* 추가 디비뷰 css */
 .btn-call {    cursor: pointer;    border: none; }
 .custom-modal {    display: none;    position: fixed;    top: 0; left: 0;    width: 100%; height: 100%;    background: rgba(0,0,0,0.5);    z-index: 9999;    justify-content: center;    align-items: center;}
 .custom-modal.show { display: flex; }
 .c-modal-content {    background: #fff;    width: 90%;    max-width: 600px;    border-radius: 8px;    padding: 40px;    position: relative; }
 .c-modal-close { position: absolute; top: 20px; right: 20px; font-size: 40px; cursor: pointer; color: #222; }
 .result-grid { display:grid; grid-template-columns: repeat(2 , 1fr);}
 .result-grid .full {    grid-column: 1 / -1;   }
 .btn-result {    cursor: pointer;}
 .custom-modal-table td{vertical-align: middle; border:1px solid #D9DADE;}
 .custom-modal-tableBox{max-height: 270px; overflow-y: auto; }
 /* 통화 내용 입력창 */
 .note-textarea {    width: 100%; height: 120px; padding: 12px;    border: 1px solid #ddd; border-radius: 8px;    resize: none; font-size: 14px; margin-bottom: 16px; outline: none;}
 /* 하단 실행 버튼 */
 .btn-action {    width: 100%; padding: 14px 0; border-radius: 8px;    font-size: 16px; font-weight: 700; color: #fff;    background-color: #333; border: none; cursor: pointer;}
 
 
 
 
   /* 제휴사용 메인 */
 .level3_table th, .level3_table td { border: 1px solid #D9DADE; }
 .no-data-msg { padding: 40px 20px; text-align: center; color: #999; font-size: 14px; }
 .level3_tableBox { max-height: 340px; overflow-y: auto; }
 .level3_table { width: 100%; border-collapse: separate; border-spacing: 0; }
 .level3_table thead th { position: sticky; top: 0; z-index: 1; }
 
 
 
  /* 관리자용 메인 */
 .level4_table thead th, .level4_table tbody td { border: 1px solid #D9DADE; vertical-align: middle; text-align:center; }
 .no-data-msg { padding: 40px 20px; text-align: center; color: #999; font-size: 14px; }
 .level4_Box{ overflow: auto;}
 .level4_tableBox { max-height: 340px; overflow: auto; }
 .level4_table { width: 100%; min-width:600px; border-collapse: separate; border-spacing: 0; }
 .level4_table thead th { position: sticky; top: 0; z-index: 1; }
 .pay-one { background-color: #D9EFFF;} 
 .pay-cms { background-color: #CEF9F2; }
 .pay-none { background-color: #eee;  }



/********************
**  적립금 현황
********************/
.savedMoneyList{overflow:auto;}
.savedMoney_table {  border-collapse: collapse;  table-layout: fixed; min-width:700px; } 
.savedMoney_th,
.savedMoney_td {  border: 1px solid #e0e0e0;  vertical-align: middle;  box-sizing: border-box;}
.savedMoney_badge_convert {  background-color: #FEE5E9;   color: #EC325E; }
.savedMoney_badge_save {  background-color: #D9EFFF;  color: #177AF9; }

/* 모달 뒷배경 (Overlay) */
.savedMoney_modal_overlay {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.5);   z-index: 9999;   display: flex;   align-items: center;  justify-content: center;}
.savedMoney_modal_box {  max-width: 600px;  overflow: hidden;  animation: savedMoney_fadeIn 0.3s ease;}

/* 닫기 버튼 (X) */
.savedMoney_close_btn {  background: none;  border: none;  cursor: pointer;}

/* 애니메이션 효과 */
@keyframes savedMoney_fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}