/* ====================================================================
   추가 custom Style 삭제 x 
   [업데이트 날짜]
   = 원본(초기작성) 2025.01.31

   ▶.tc-change : 텍스트 컬러 체인지 클래스명
                : 1) html class에 이름만 있고 css값  따로 없음 / js에서 제어
                : 2) 텍스트 컬러 체인지가 필요할 땐 클래스에 "tc-change" 추가
                : 3) **기존 컬러값이 있기 때문에 강제적용 해줘야함**

   *.tc-change-basics : 기본 페이업 포인트 컬러값

   ▶.cl-change : 텍스트 외의 컬러 체인지 클래스명
                : **기존 컬러값이 있기 때문에 강제적용 해줘야함**
==================================================================== */

#navbarNav>.navbar-nav>.nav-item{min-width: 100px;}
/* 로그인은 접힌 메뉴 밖에 두고 모바일에서는 상단의 별도 행으로 표시한다. */
.homepage-navigation .homepage-login-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-shrink: 0;
}

.homepage-navigation .homepage-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .homepage-navigation .homepage-login-actions {
    margin-left: 8px;
  }

  .homepage-navigation .homepage-login-button {
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .homepage-navigation > .container-fluid {
    flex-wrap: wrap;
  }

  .homepage-navigation .homepage-login-actions {
    order: 6;
    flex: 0 0 100%;
    width: 100%;
    margin: 8px 0 0;
    padding-bottom: 10px;
  }

  .homepage-navigation .homepage-login-button {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.4;
  }
}

.word-break-keep{word-break: keep-all !important;}

/* === input spin button 숨김처리 === */
/* Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0;}

/* Firefox */
input[type=number]{-moz-appearance: textfield;}

.border-baseSize{border-radius: 0.375rem !important;}

/* === color === */
.tc-change-basics{color: #2946f3 !important;}
.tc-change-01{color: #ffffff !important;}

.text-cl01{color: #213158 !important;}
.text-cl02{color: #565656 !important;}
.text-cl03{color: #198754 !important;}
.text-cl04{color: #335ac7 !important;}
.text-cl05{color: #ff0000 !important;}

.text-shadow01{text-shadow: 0 2px 4px rgba(0, 0, 0, 0.267);}

.bg-input-gray{background-color: #F5F5F7;}

/* === bg gradient color === */
.bg-gradient-blue-color{
   background: #1CB5E0;
   background: linear-gradient(306deg, #1CB5E0 0%, #0c3da9 85%);
}

/* === 추가 Padding and margin === */
.py-15px{padding-top: 0!important; padding-bottom: 15px !important;}
.px-22px{padding-left: 22px !important; padding-right: 22px !important;}
.py-13{padding: 0 13% 0 13% !important;}
.md-py-0{padding: 0 !important;}

/* === 글자 부분이 늘어나더라도 아이콘 위치 유지 === */
.feature-box-content{display: flex; flex-direction: column; height: 100%;}
.feature-box-icon {margin-top: auto;}

/* === 회사소개 page 지도맵 === */
.mapbox{width: 100%; height: 560px;}

/* === 수수료 및 정산 :: 정산 달력 table === */
.calendar-table{width: 100%; border-collapse: collapse; table-layout: fixed;}
.calendar-table th, .calendar-table td{
   border: none; padding: 10px; height: 100px;
   vertical-align: top; position: relative;
}
.calendar-table th{height: 55px !important;}
.calendar-table thead tr, .calendar-table tbody tr{border-bottom: 1px solid #e5e5e5;}

.calendar-date{
   position: absolute; top: 6px; right: 8px;
   font-size: 18px; color: #7a7a7a;
}
.calendar-date02{
   height: 100%; color: #a9b3c9;
   display: flex; justify-content: center; align-items: center;
   font-size: 28px; font-weight: 500;
}

.calendar-badge{
   display: flex; justify-content: center; align-items: center;
   height: 100%; font-size: 20px; font-weight: 600; line-height: 1.8rem;
}
.calendar-dplus{
   height: 100%; color: #2946f3;
   display: flex; justify-content: center; align-items: center;
   font-size: 22px; font-weight: 600;
}
.boxline{background-color: #dadfeb; border-radius: 0.5rem;}
/*.boxline>ul>li{word-break: keep-all !important;}*/

/* === 공지사항 === */
.notice-table{font-size: 22px; font-weight: 400;}
.notice-table>thead>tr>th, .notice-table>tbody>tr>td{padding: 10px 15px;}
.notice-table>thead>tr>th{padding: 20px 0;}
.notice-num{min-width: 70px; max-width: 80px;}
.notice-date{white-space: nowrap;}
.notice-title {
   /* 제목 셀 내부 span에 ellipsis 적용 */
   width: 100%; display: block; padding: 10px 20px;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice-title-cell{width: 100%; max-width: 200px;}

/* === 공지사항 pagination === */
/* 이전(왼쪽) 화살표 */
.pagination .paginate_button.previous a::before{
   content: "\e828";
   font-family: 'feather' !important;
   font-style: normal;
   font-weight: normal;
   speak: none;
   display: inline-block;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* 다음(오른쪽) 화살표 */
.pagination .paginate_button.next a::before{
   content: "\e829";
   font-family: 'feather' !important;
   font-style: normal;
   font-weight: normal;
   speak: none;
   display: inline-block;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
.paginate_button.previous a, .paginate_button.next a{margin: 0 20px !important;}
.pagination-style-01 .page-item .page-link:hover{border-radius: 50% !important;}

.pagination .paginate_button,
.pagination .paginate_button a{
   background-color: transparent !important;
   border: none !important;
   box-shadow: none !important;
}

.pagination .page-item a.page-link{
   color: #707070;          /* 비활성 페이지 숫자 색상 */
   background-color: transparent;
   border-radius: 0;        /* 기본은 동그라미 아님 */
   transition: background-color 0.3s, color 0.3s;
}

.pagination .page-item.active a.page-link{
   color: #ffffff !important;
   background-color: #141414 !important;
   border-radius: 50% !important;
   min-width: 45px; min-height: 45px;
   display: flex; align-items: center; justify-content: center;
   font-weight: 600;
   box-shadow: 0 0 10px rgba(23, 23, 23, 0.15);
}

/* === 공지사항 상세페이지 === */
.notice-wrapper-title{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notice-content{font-size: 20px;}
.file-name{
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   min-width: 0; max-width: 100%;
}

/* ===== 추가 반응형 css style ===== */
@media screen and (min-width: 992px) and (max-width: 1140px){
   .fs-xl-h4{font-size: 2.7rem; line-height: 3.5rem;}
}
@media screen and (max-width: 991px){
   .md-fs-18{font-size: 18px !important;}
   .md-fs-20{font-size: 20px !important;}

   /* === 수수료 및 정산 :: 정산 달력 table === */
   .fs-xl-h4{font-size: 3.438rem; text-align: center; line-height: 4.375rem;}
   .calendar-table th{font-size: 20px !important;}
   .calendar-date{top: 3px; right: 6px; font-size: 17px;}
   .calendar-date02{font-size: 22px !important;}

   .calendar-badge{font-size: 18px;}
   .calendar-dplus{font-size: 20px;}
   .boxline>ul>li{font-size: 20px;}
}

@media screen and (max-width: 992px){
   /* === 회사소개 :: 미션(핵심가치) === */
   .mission-item{padding: 35px 2% 35px 3% !important;}
}

@media screen and (min-width: 768px){
   /* === 공간 유지 + 반응형 숨김 === */
   .invisible-md{visibility: hidden !important;}
}

@media screen and (max-width: 768px){
   /* === header === */
   .m-navbar{margin-left: auto !important;}

   /* === main === */
   .md-flex0{
      -webkit-box-flex: none !important;
      -ms-flex: none !important;
      flex: none !important;
   }

   /* === 수수료 및 정산 :: 정산 달력 table === */
   .fs-xl-h4{font-size: 3.438rem; text-align: center; line-height: 4.375rem;}
   .calendar-table th, .calendar-table td{height: 80px;}
   .calendar-table th{height: 37px !important; padding: 0; font-size: 18px !important; font-weight: 500;}
   .calendar-date{top: 0px; right: 3px; font-size: 14px;}
   .calendar-date02{font-size: 18px !important;}

   .calendar-badge{font-size: 16px; line-height: 1.7rem;}
   .calendar-dplus{font-size: 18px;}
   .boxline>ul>li{font-size: 17px;}
   .boxline>ul>li>small{font-size: 14px;}
   .boxline>ul>li>.icon-large{font-size: 28px;}

   /* === 공지사항 === */
   .notice-table{font-size: 20px;}
   .notice-table>thead>tr>th, .notice-table>tbody>tr>td{padding: 10px;}
   .notice-table>thead>tr>th{padding: 15px 0;}
   .notice-title{padding: 10px;}
}

@media screen and (max-width: 767px){
   /* === 공간 유지 + 반응형 숨김 === */
   .invisible-sm{visibility: hidden !important;}

   /* === 수기결제 - 가입신청btn === */
   .m-p01{padding: 50px 0 100px 0 !important;}

   /* === 회사소개 :: 미션(핵심가치) === */
   .mission-item{padding: 22px 4% !important;}
}

@media screen and (max-width: 576px){
   /* === 서브 공동 배너 === */
   .sm-h2-3rem{font-size: 3rem !important;}
   .sm-lh-4rem{line-height: 4rem !important;}

   /* === GNB === */
   .sm-w-100px{width: 100px !important;}

   /* === Font weight === */
   .sm-fw-400{font-weight: 500 !important;}

   /* === 수기결제 - 중간배너 === */
   .sm-fs-lh02{font-size: 2.5rem; line-height: 3.2rem;}

   /* === 수기결제 - 가입신청btn === */
   .m-p01{padding: 40px 0 80px 0 !important;}

   /* === 공지사항 === */
   .notice-table{font-size: 18px;}
   .notice-table>thead>tr>th, .notice-table>tbody>tr>td{padding: 10px;}
   .notice-table>thead>tr>th{padding: 15px 0;}
   .notice-title{padding: 5px;}

   /* === 공지사항 상세페이지 === */
   .notice-header{font-size: 22px !important;}
   .notice-date{font-size: 18px;}
   .notice-content{font-size: 18px;}

   /* === 회사소개 :: 미션(핵심가치) === */
   .mission-big-title{text-align: center !important;}
}

@media screen and (max-width: 575px){
   /* === 수수료 및 정산 :: 가입프로세스 === */
   .icon_item{width: 15% !important;}
   .process-circular{width: 50px !important; height: 50px !important;}
}

@media screen and (max-width: 480px){
   /* === 수수료 및 정산 :: 정산 달력 table === */
   .calendar-table>tbody>tr>td.bg-black, .calendar-table>tbody>tr>td.bg-base-color{padding: 0 !important;}
   .calendar-table th, .calendar-table td{height: 80px;}
   .calendar-table th{height: 32px !important; padding: 0; font-size: 16px !important; font-weight: 500;}
   .calendar-date{top: 0px; right: 3px; font-size: 14px;}
   .calendar-date02{font-size: 17px !important;}

   .calendar-badge{font-size: 14px; line-height: 1.5rem;}
   .calendar-dplus{font-size: 16px;}
   .boxline{padding: 6% !important;}
   .boxline>ul>li{font-size: 16px; line-height: 1.9rem;}
   .boxline>ul>li>small{font-size: 14px;}
   .boxline>ul>li>.icon-large{font-size: 25px;}
}

@media screen and (max-width: 380px){
   /* === 수기결제 - 타이틀 === */
   .sm-fs-lh01{font-size: 2.5rem; line-height: 3.2rem;}

   /* === 수기결제 - 가입신청btn === */
   .m-p01{padding: 40px 0 60px 0 !important;}

   /* === 수수료 및 정산 :: 가입프로세스 === */
   .threeIcon{width: 52px !important;}
   .xs-fs-22{font-size: 20px !important;}
   .xs-fs-16{font-size: 16px !important;}
   .xs-fs-14{font-size: 14px !important;}
   .xs-lh-10{line-height: 10px !important;}

   /* === 공지사항 === */
   .notice-table{font-size: 16px;}
   .notice-table>thead>tr>th, .notice-table>tbody>tr>td{padding: 10px;}
   .notice-table>thead>tr>th{padding: 5x 0;}
   .notice-num{min-width: 50px; max-width: 80px;}
   .notice-title{padding: 0px;}
   .notice-title-cell{width: 100%; max-width: 200px;}
}