@charset "utf-8";
.deco-tit {position: relative; width: fit-content; max-width: 100%;}
.deco-tit:after {content: '';position: absolute; left: 100%; width: clamp(8px, calc(10 / var(--inner) * 100vw), 10px); height: clamp(8px, calc(10 / var(--inner) * 100vw), 10px); background: var(--primary-color); border-radius: 100%; margin-left: 15px;}

.greeting-txt {position: relative;}
.greeting-txt h3 {width: fit-content; max-width: 85%; padding-top: var(--space-80); padding-right: clamp(20px, calc(200 / var(--inner) * 100vw), 200px); margin-top: calc(var(--space-80) * -1); background: #fff; border-radius: 0 var(--radius-24) 0 0;}
.greeting-sign {gap: 20px;}
.overview-partner-circle {position: relative; margin-top: var(--space-40);}
.overview-partner-circle:before {content: ''; position: absolute; top: calc(var(--space-40) * -1); left: calc(var(--space-40) * -1); right: calc(var(--space-40) * -1); bottom: calc(var(--space-40) * -1); background: url('/images/sub/overview-partner-deco.png') no-repeat center center / contain; animation: rotate 10s linear infinite;}
@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
.overview-partner-marquee {position: absolute; width: 100vw; top: 50%; left: 0; transform: translateY(-50%); font-size: clamp(80px, calc(160 / var(--inner) * 100vw), 160px); line-height: 1em; font-weight: 800;color: #f4f4f4; z-index: -1;}
.overview-partner-marquee-inner {display: flex; width: max-content; animation: overviewMarquee 25s linear infinite;}
.overview-partner-marquee-inner span {white-space: nowrap; flex-shrink: 0;}
@keyframes overviewMarquee {0% {transform: translateX(0);} 100% {transform: translateX(-50%);}}
.overview-cards {display: grid; gap: var(--space-20); grid-template-columns: repeat(3, 1fr);}
.overview-card {padding: var(--space-45) 10px; border: 1px solid #eee; border-radius: var(--radius-24);}
.overview-card-head {color: #ccc;}
.overview-cards-arrow {margin: var(--space-30) calc(var(--space-100) * -1) var(--space-45);}
.sec-ideology {gap: 20px 35px;}
.sec-ideology:nth-child(even) {flex-direction: row-reverse;}
.ideology-img {width: 66.6667%;}

.sec-business-welcome {gap: 25px clamp(35px, calc(120 / var(--inner) * 100vw), 120px);}
.business-welcome-img {width: 50%; text-align: right;}
.business-welcome-txt {padding-right: var(--container-space);}
.business-welcome-txt p {max-width: 480px;}
.business-service-cards {gap: var(--space-20);}
.business-service-card {padding: var(--space-40) var(--space-30); background: #f8f8f8; border-radius: var(--radius-24);}
.business-service-card .icon {width: fit-content; padding: var(--space-20); background: #fff; border-radius: 12px; margin:0 auto var(--space-35); border: 1px solid #eee; box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.06);}
.business-service-card h4 {margin-bottom: var(--space-20);}
.business-competitive-cards {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-65) var(--space-20);}
.business-competitive-card .num {display: flex; align-items: center; justify-content: center; margin-right: var(--space-20); width: clamp(30px, calc(38 / var(--inner) * 100vw), 38px); height: clamp(30px, calc(38 / var(--inner) * 100vw), 38px); background: #e9effb; border-radius: 100%; font-size: var(--font-size-15); line-height: 1em; color: var(--primary-color); line-height: 1em; font-weight: 700;}

.salary-form-head {display: flex; justify-content: flex-end; gap: 20px; margin-bottom: 25px;;}
.salary-form-head .flex-wrap {gap: 6px;}
.salary-form-head .input {height: clamp(38px, calc(60 / var(--inner) * 100vw), 60px); background-color: #f4f4f4; border-color: #f4f4f4; border-radius: 100px;}
.salary-form-head button {padding: 0 var(--space-30); background: var(--primary-color); border:1px solid var(--primary-color); border-radius: 100px; color: #fff; font-size: var(--font-size-16); line-height: 1em; font-weight: 700;}
.salary-form-body h3 {padding: var(--space-45) 0; border-top: 2px solid var(--dark-color);}
.salary-date {gap: 10px;}
.salary-table table:not(:last-child) {border-right: 1px solid #ddd;}
.salary-sign {gap: 15px;}
.salary-sign .fw600 {color: #a8a8a8;}
.btn-print {display: flex; gap: 10px; align-items:center;}
.btn-print:before {content: ''; display: block; width: 16px; height: 16px; background: url('/images/sub/btn-print.png') no-repeat center center / contain;}
@media print {
	body * {visibility: hidden;}
	.salary-form-body, .salary-form-body * {visibility: visible;}
	.salary-form-body .btn-print {visibility: hidden; display: none;}
	.salary-form-body {position: absolute; left: 0; top: 0; width: 100%;}
}

.check-boxes {display: flex; flex-wrap: wrap; gap: var(--space-15) var(--space-30);}
.etc-wrap {gap: var(--space-10) var(--space-15);}
.input-wrap {display: flex; align-items: center; gap: 10px;}
.page-certification .check a {color: #a8a8a8; text-decoration: underline; text-underline-offset: 3px; margin-top: -0.2em; margin-left: 10px;}

.page-attendance {display: flex; gap: var(--space-60); flex-wrap: wrap; padding-top: var(--space-50); border-top: 2px solid var(--dark-color);}
.page-attendance .attendance-left {width: 33.3335%; height: fit-content; padding-right: var(--space-30); border-right: 1px solid #eee;}
.page-attendance .attendance-right {flex: 1; width: auto; min-width: 1%;}
.page-attendance .attendance-now {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-15); margin-bottom: var(--space-35);}
.page-attendance .attendance-datetime {color: #878787;}
.page-attendance .attendance-status-badge {display: inline-block; padding: 6px 14px; background: #fff; border: 1px solid var(--primary-color); color: var(--primary-color); font-size: 13px; font-weight: 600; border-radius: 6px; line-height: 1em;}
.page-attendance .attendance-punch-display {display: flex; align-items: center; gap: var(--space-15); margin-bottom: var(--space-30);}
.page-attendance .punch-box {flex: 1; padding: var(--space-15); background: #f4f4f4; border-radius: 12px; text-align: center;}
.page-attendance .punch-label {display: block; font-size: var(--font-size-16); color: #878787; font-weight: 700;}
.page-attendance .punch-value {font-size: var(--font-size-26); font-weight: 600; color: var(--dark-color);}
.page-attendance .punch-arrow {font-size: var(--font-size-20); color: #999;}
.page-attendance .attendance-punch-recorded {margin-bottom: var(--space-35);}
.page-attendance .record-row {display: flex; justify-content: space-between; gap: var(--space-15); margin-bottom: var(--space-10); font-size: var(--font-size-16);}
.page-attendance .record-label {color: #666; min-width: 80px;}
.page-attendance .record-value {font-weight: 600; color: var(--dark-color);}
.page-attendance .attendance-actions {display: flex; gap: var(--space-10); margin-bottom: var(--space-10);}
.page-attendance .btn-punch {padding: var(--space-15) var(--space-30); border-radius: 8px; font-size: var(--font-size-16); font-weight: 600; cursor: pointer; border: 2px solid var(--dark-color); background: #fff; color: var(--dark-color);}
.page-attendance .btn-punch:hover:not(.disabled) {background: var(--dark-color); color: #fff;}
.page-attendance .btn-punch.disabled {color: #aaa; border-color: #ddd; cursor: not-allowed; pointer-events: none;}
.page-attendance .attendance-status-change {position: relative;}
.page-attendance .work-status-trigger {display: flex; align-items: center; justify-content: center; width: 100%; padding:var(--space-30); background: #fff; border: 1px solid var(--primary-color); border-radius: 8px; color: var(--primary-color); font-size: var(--font-size-16); font-weight: 600; cursor: pointer; text-align: left;}
.page-attendance .work-status-chevron {display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 8px; margin-top: -4px;}
.page-attendance .work-status-list {position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 10;}
.page-attendance .work-status-list [role="option"] {padding: 10px 14px; cursor: pointer; color: var(--dark-color); font-size: var(--font-size-16); border-bottom: 1px solid #f0f0f0;}
.page-attendance .work-status-list [role="option"]:last-child {border-bottom: 0;}
.page-attendance .work-status-list [role="option"]:hover {background: #f5f9ff;}
.page-attendance .attendance-status-head {position: relative;}
.page-attendance .month-dropdown {position: relative; margin-bottom: var(--space-20);}
.page-attendance .month-trigger {display: flex; align-items: center; justify-content: space-between; gap: 10px; width: fit-content; background: transparent; border: 0; font-size: var(--font-size-28); font-weight: 700; color: var(--dark-color); cursor: pointer; text-align: left;}
.page-attendance .month-trigger:after {content: ''; display: block; width: 10px; height: 10px; margin-top: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 8px;}
.page-attendance .month-list {position: absolute; top: 100%; left: 0; min-width: 280px; margin: 4px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 10; max-height: 280px; overflow-y: auto;}
.page-attendance .month-list [role="option"] {padding: 12px 14px; cursor: pointer; color: var(--dark-color); font-size: var(--font-size-16); border-bottom: 1px solid #f0f0f0;}
.page-attendance .month-list [role="option"]:last-child {border-bottom: 0;}
.page-attendance .month-list [role="option"]:hover {background: #f5f9ff;}
.page-attendance .attendance-user {color: #878787;}
.page-attendance .attendance-weekly {margin-bottom: var(--space-30); padding: var(--space-30); border-radius: var(--radius-16); border: 1px solid #eee;}
.page-attendance .weekly-total {margin-left: 10px;}
.page-attendance .weekly-remain {color: #878787;}
.page-attendance .weekly-bar-wrap {height: 8px; background: #f2f2f2; border-radius: 4px; overflow: hidden; margin-bottom: var(--space-10);}
.page-attendance .weekly-bar {height: 100%; background: linear-gradient(to right, #98b8f4, #0051eb); border-radius: 4px;}
.page-attendance .weekly-labels {position: relative; display: flex; justify-content: space-between; font-size: var(--font-size-14); font-weight: 500;}
.page-attendance .weekly-label-min {position: absolute;}
.page-attendance .weekly-label-min:before {content: ''; position: absolute; left: 50%; bottom: 100%; margin-bottom: 5px; width: 1px; height: 18px;background: #ccc;}
.page-attendance .attendance-calendar {margin-top: var(--space-20);}
.page-attendance .fc {--fc-border-color: #eee;}
.page-attendance .fc .fc-daygrid-day-top {flex-direction: row; justify-content: flex-start;}
.page-attendance .fc .fc-day-num {display: inline-block; margin-right: 4px;}
.page-attendance .fc-day-today-dot {display: inline-block; width: 6px; height: 6px; margin-left: 10px; background: var(--primary-color); border-radius: 100%; vertical-align: middle;}
.page-attendance .fc .attendance-day-times {padding: 8px 0 0; margin-top: 4px; font-size: var(--font-size-13); font-weight: 400; line-height: 1.5385em; color: #505050;}
.page-attendance .fc thead th {font-size: var(--font-size-14); border: 0; font-weight: 600;}
.page-attendance .fc-day.fc-day-sun, .page-attendance .fc-day.fc-day-sun .fc-col-header-cell-cushion {color: #ea4044;}
.page-attendance .fc-day.fc-day-sat, .page-attendance .fc-day.fc-day-sat .fc-col-header-cell-cushion {color: #508cff;}
.page-attendance .fc .fc-col-header-cell-cushion, .page-attendance .fc .fc-daygrid-day-frame {padding: var(--space-10) var(--space-30); padding-right: 10px; display: block; text-align: left; border-bottom: 1px solid #eee; font-size: var(--font-size-14); font-weight: 600;}

.page-attendance .fc td {border: 0;}
.page-attendance .fc .fc-scrollgrid {border: 0;}
.page-attendance .fc .fc-view {border: 1px solid #eee; border-radius: var(--radius-16); overflow: hidden;}
.page-attendance .fc .fc-daygrid-day-number {display: none;}
.page-attendance .fc .fc-daygrid-day.fc-day-today {background: rgba(80, 140, 255, 0.06);}
.page-attendance .fc .fc-daygrid-day.attendance-day-next-month,
.page-attendance .fc td.attendance-day-next-month {display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important;}
.page-attendance .fc .fc-daygrid-day.attendance-day-next-month .fc-daygrid-day-frame {display: none !important;}