@CHARSET "UTF-8";

html {
	height: 100%;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}
._header {
	flex-shrink: 0;
}
._content {
	flex: 1 0 auto;
	width: 100%;
}
/* 푸터를 화면 최하단으로 밀어냄 */
#footer, .footer, ._footer {
	margin-top: auto;
	flex-shrink: 0;
}


html, body {
	margin: 0;
	padding: 0;
}


input[type=button],
input[type=submit] {
	-webkit-appearance: button;
}

select {
	-webkit-appearance: menulist-button;
}

.hide {
	display: none;
}

/* select 방지 */
.not_select {
	-webkit-user-select: none;
}

/* 드래그 방지 */
.not_drag {
	-webkit-user-drag: none;
}

/* 커서 - 포인터 */
.cursor_pointer {
	cursor: pointer;
}

.container,
.container > ._header,
.container > ._content,
.container > ._footer {
	box-sizing: border-box;
}

img {
	border: 0;
}

/** 빌드 환경 **/

.env .parent_mode {
	display: none;
}

.join02_line {
	display: inline-block;
	width: 1300px;
	height: 2px;
	background: #000000;
	background: -moz-linear-gradient(left, #000000 0, #000000 300px, #b6b6b6 300px, #b6b6b6 1300px);
	background: -webkit-linear-gradient(left, #000000 0, #000000 300px, #b6b6b6 300px, #b6b6b6 1300px);
	background: linear-gradient(to right, #000000 0, #000000 300px, #b6b6b6 300px, #b6b6b6 1300px);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#b6b6b6', GradientType=1);
}
.join02_line2 {
	display: inline-block;
	width: 100%;
	height: 2px;
	background: #000000;
	background: -moz-linear-gradient(left, #000000 0, #000000 300px, #b6b6b6 300px, #b6b6b6 1300px);
	background: -webkit-linear-gradient(left, #000000 0, #000000 300px, #b6b6b6 300px, #b6b6b6 1300px);
	background: linear-gradient(to right, #000000 0, #000000 300px, #b6b6b6 300px, #b6b6b6 1300px);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#b6b6b6', GradientType=1);
}

.join02_popup_line {
	display: inline-block;
	width: 500px;
	height: 2px;
	background: #000000;
	background: -moz-linear-gradient(left, #000000 0, #000000 145px, #b6b6b6 145px, #b6b6b6 1300px);
	background: -webkit-linear-gradient(left, #000000 0, #000000 145px, #b6b6b6 145px, #b6b6b6 1300px);
	background: linear-gradient(to right, #000000 0, #000000 145px, #b6b6b6 145px, #b6b6b6 1300px);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#b6b6b6', GradientType=1);
}

.clear {
	clear: both;
}

.next-bt {
	width: 123px;
	height: 36px;
	border: none;
	background: black;
	color: #76b9ec;
	font-family: NanumGothic;
	font-size: 16px;
	cursor: pointer;
	border-radius: 10px;
}

.next-bt:hover {
	background: #464646;
	color: white;
}

.prev-bt {
	width: 123px;
	height: 36px;
	border: none;
	background: #7a7a7a;
	color: white;
	font-family: NanumGothic;
	font-size: 16px;
	cursor: pointer;
	border-radius: 10px;
}

.prev-bt2 {
	padding: 0 25px;
	height: 36px;
	border: none;
	background: #7a7a7a;
	color: white;
	font-family: NanumGothic;
	font-size: 16px;
	cursor: pointer;
	font-weight: 500;
}

.prev-bt:hover, .prev-bt2:hover {
	background: #a5a5a5;
	color: white;
}

.edit-bt {
	width: 310px;
	border: 1px solid #a5a5a5;
	height: 36px;
	background: white;
	cursor: pointer;
	font-size: 16px;
	font-family: NanumGothic;
}

.edit-bt:hover {
	color: #39a5ff;
	border: 3px solid #39a5ff;
}

.select_contents {
	width: 308px;
	border: 1px solid #a5a5a5;
	display: inline-block;
	text-align: center;
	height: 35px;
	line-height: 35px;
	font-weight: 700;
	text-decoration: none;
	color: black;
	bottom: 5px;
	position: relative;
}

.select_contents:hover {
	width: 304px;
	border: 3px solid #39a5ff;
	height: 31px;
	line-height: 31px;
	color: #39a5ff;
}

.white_line {
	border-top: 1px solid white;
}

.contents_top_bg {
	width: 100%;
	height: 262px;
	background-color: #8b8b8a;
}
.contents_top_total {
	width: 1300px;
	margin: 0 auto;
}

.contents_top_total2 {
	width: 100%;
	margin: 0 auto;
}

.background_top_image {
	/* width: 1300px; */
	width: 100%;
	height: 262px;
	margin: 0 auto;
}

.background_top_image2 {
	width: 100%;
	height: 262px;
	margin: 0 auto;
}

.navigation_txt {
	float: right;
	font-size: 16px;
	color: white;
	margin-top: 20px;
	padding: 0 2% 0 0;
}

.navigation_txt > a {
	text-decoration: none;
	color: white;
}

.navigation_txt > a:hover {
	text-decoration: underline;
}

.step1_title01 {
	float: left;
	font-size: 35px;
	font-weight: 600;
	color: #000000;
	padding: 0 0 0 1%;
}

.bottom_height {
	height: 100px;
}
@media (max-width: 1500px) {
	.contents_top_total {
		width: 100%;
		margin: 0 auto;
	}
	
}

/* 캘린더 공통 UI 스타일 (charge 디자인 통일) */
.pay-input-wrapper {
	position: relative;
	width: 100%;
}

.pay-input,
.pay-select,
.stat-select,
.teacher-select,
.pay-input-wrapper input[type="text"] {
	width: 100% !important;
	height: 46px !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 10px !important;
	padding: 0 38px 0 16px !important;
	font-size: 14px !important;
	color: #333333 !important;
	background-color: #ffffff !important;
	outline: none !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
}

.pay-input:focus,
.pay-input-wrapper input[type="text"]:focus {
	border-color: #7C65E8 !important;
	box-shadow: 0 0 0 3px rgba(124, 101, 232, 0.12) !important;
}

.pay-input-icon {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #7C65E8 !important;
	font-size: 18px !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

.pay-date-range-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.date-sep {
	color: #64748B;
	font-weight: 500;
}

/* Datepicker 팝업 퍼플 헤더 테마 (charge 통일) */
.ui-datepicker-trigger {
	display: none !important;
}

.ui-datepicker-header,
.ui-widget-header {
	background: #7C65E8 !important;
	border: none !important;
	color: #ffffff !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-state-active,
.ui-widget-content .ui-state-active {
	background: #7C65E8 !important;
	color: #ffffff !important;
	border: 1px solid #7C65E8 !important;
}