/***** 뚝딱페이 - 이용료 정산, 청구서 *****/
/***** 뚝딱페이 - 헤더 *****/
.header_promotion {
	height: 80px;
	/* padding: 20px 24px; */
	padding: 0 24px;
	box-shadow: 0px 0px 8px rgba(180, 140, 153, 0.16);
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 100;
	display: flex;
}

/*** 로고 ***/
.header_promotion .logo {
	padding-left: 0px;
	background: none;
	height: 32px;
	display: flex;
	width: 208px;
}

header .logo img {
	width: auto;
}

/***** 뚝딱페이 - 레이아웃 *****/
main#wrap_website_lecture {
	padding: 0;
	background: #fff;
}

main#wrap_website_lecture>section {
	border-radius: 0;
}

/** 이미지 타이틀 영역 **/
.website .wrap_img_title {
	height: 400px;
	padding: 24px;
	text-align: center;
	background: url("/img/website/background_img_02.png") center /cover no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.website .wrap_img_title h3 {
	margin-bottom: 16px;
	color: #000;
}

.website_wrap .p2 {
	font-size: 1.6rem;
	/*16px*/
	line-height: 1.8rem;
	/*18px*/
}


/***** 뚝딱페이 - 이용료 정산 *****/
/*** 이용료 결제 전체 영역 ***/
.wrap_lecture_select {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 120px 0;
	position: relative;
}

.wrap_lecture_select ul:not(.area_lecture_info) {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: -20px auto 0;
}

.wrap_lecture_select ul li:not(.area_lecture_info li) {
	margin: 20px 0;
}

/*** 이용료 선택 영역 ***/
.area_lecture_select {
	max-width: 580px;
	max-height: 248px;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 16%);
	margin: 0 auto;
	background: #fff;
}

/** 강의명 **/
.area_lecture_select .area_lecture_title {
	height: 68px;
	background: #63C16F;
	justify-content: center;
	display: flex;
	align-items: center;
}

/** 강사명, 강의타입, 강의료 **/
.area_lecture_info {
	display: flex;
	justify-content: space-between;
	margin: 24px 0;
}

.area_lecture_info li {
	width: 33.33%;
}

.area_lecture_info li .p3 {
	margin-bottom: 8px;
}

/* 강의 타입 */
.area_lecture_info li:nth-child(2) {
	border-left: 1px solid #e2e2e2;
	border-right: 1px solid #e2e2e2;
}

/** 선택하기 버튼 **/
.area_lecture_select button {
	margin: 0 auto 24px;
}

/** 기본형 버튼 - 노란색 **/
.area_lecture_select .btn.btn_yellow {
	background: #FFA334;
	border: 1px solid #FF8813;
	color: #fff;
}

/* 동작 */
.area_lecture_select .btn.btn_yellow:hover {
	box-shadow: 200px 0 0 0 #fff inset, -200px 0 0 0 #fff inset;
	color: #FF8813;
	/*border-color: #63C16F;*/
}

/*** 학생 정보 입력 영역 ***/
#lecture_pay_modal {
	position: fixed;
}

#lecture_pay_modal .area_lecture_select {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: unset;
}

.area_student_info {
	padding: 24px;
}





/***** 뚝딱페이 - 청구서 (청구서 납부, 납부완료, 납부실패) *****/
/*** 전체 공통 ***/
/** 배경 **/
.modal_bill_link {
	background: #F5F5F5;
	padding: 32px 16px 16px;
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
	height: 100%;
}

.modal_mobile_bill {
	background: #F5F5F5;
	padding: 32px 16px 16px;
	border-radius: unset;
}

/** 텍스트,폰트 **/
/* 폰트 깨짐 현상 */
.modal_bill_link>*,
.modal_mobile_bill>* {
	transform: skew(-0.1deg);
}

/* h3 */
.modal_bill_link h3,
.modal_bill_link h3 span,
.modal_mobile_bill h3,
.modal_mobile_bill h3 span {
	font-size: 1.6rem;
	/* 16px */
	line-height: 2.4rem;
	/* 24px */
	font-weight: bold;
	margin-bottom: 16px;
	color: #000;
}

/* 텍스트 - 정보값 */
.wrap_bill {
	height: calc(100% - 48px);
	display: flex;
	flex-direction: column;
}

.wrap_bill_contents>ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.wrap_bill_contents>ul>li:last-child,
.wrap_bill_contents>ul>li span {
	font-weight: bold;
}

/* 원화 표기 */
.bill_price_mark {
	font-size: 1.4rem;
	/* 14px */
	line-height: 2rem;
	/* 20px */
	font-weight: normal !important;
	margin-left: 4px;
	color: #000;
}

/* 텍스트 디자인 요소 */
.highlignt {
	background: linear-gradient(to top, #FFCF30 33.33%, transparent 33.33%);
}

/** 공통 컨텐츠 박스 **/
.wrap_bill_contents {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
	padding: 16px;
	margin-bottom: 16px;
}

/**** 청구서 납부 ****/
/** 청구서 공유 버튼 **/
.wrap_bill .btn.btn_share {
	display: flex;
	padding: 8px 24px 8px 8px;
	position: absolute;
	top: 16px;
	right: 16px;
}

/*** 학원정보 영역 ***/
.area_academy_info {
	position: relative;
}

/** 뚝딱페이 로고 **/
.area_academy_info::before {
	content: '';
	width: 72px;
	height: 72px;
	border-radius: 20px;
	display: block;
	/*background-image: url("/img/ttpay_logo_symbol.png");*/
	background-image: url("/img/buylink_symbol.png");
	background-size: cover;
	position: absolute;
	top: -32px;
	right: 16px;

}

/** 학원 대표번호, 계좌정보 **/
.area_academy_info h3 {
	border-bottom: 1px solid #E2E2E2;
	padding-bottom: 16px;
}

.area_academy_info>ul:not(:last-child) {
	margin-bottom: 8px;
}

/* 계좌정보 복사 아이콘 */
.academy_bank_info img {
	width: 12px;
	height: 12px;
	rotate: 180deg;
	margin-left: 4px;
}

/*** 총 결제 금액 영역 ***/
.area_total_payment ul li,
.area_total_payment ul li span {
	font-size: 1.6rem;
	/* 16px */
	line-height: 2.4rem;
	/* 24px */
	font-weight: bold;
	transform: skew(-0.1deg);
}

/* 금액 표시 */
.area_total_payment .total_payment_amount {
	color: #FF0B5C;
}

/*** 청구내역 영역 ***/
/** 전체 **/
.area_bill_history {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* 동작 */
.area_bill_history.on {
	border: 1px solid #63C16F;
}

/** 체크박스 **/
.area_bill_history input[type="checkbox"] {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	margin: 0 16px 0 0;
}

.area_bill_history input[type="checkbox"]:not(.switch_button):after {
	font-size: 20px;
}

/** 청구년월,청구서명 **/
.area_bill_info {
	display: flex;
	flex-direction: column;
	margin-right: 8px;
}

/* 청구년월 */
.area_bill_info .bill_date {
	color: #AAAAAA;
	font-weight: normal;
	margin-bottom: 8px;
}

/* 청구서명 */
.area_bill_info .bill_title {
	font-size: 1.6rem;
	/* 16px */
	line-height: 2rem;
	font-weight: bold;
	max-width: 200px;
	word-break: keep-all;
}

/** 청구금액 **/
.area_bill_amount {
	font-size: 1.6rem;
	/* 16px */
	font-weight: bold;
	margin-left: auto;
	padding: 8px 0;
}

/*** 푸터 영역 ***/
.wrap_bill_footer {
	padding: 16px;
	text-align: center;
}

/** 로고 **/
.wrap_bill_footer img {
	height: 16px;
	margin-bottom: 16px;
}

/** 텍스트 **/
.wrap_bill_footer p {
	font-size: 1rem;
	line-height: 1.4rem;
	word-break: keep-all;
}

/*** 결제버튼 영역 ***/
.area_btn_payment {
	/* position: absolute;
	bottom: 0;
	left: 0;
	padding: 16px;
	width: 100%; */
}

.area_btn_payment {
	width: 100%;
}



/**** 납부 완료 ****/
/** 납부내역 영역 **/
.area_payment_detail h3 {
	border-bottom: 1px solid #E2E2E2;
	padding-bottom: 16px;
}

/* 체크 아이콘 */
.area_payment_detail h3 span::before {
	content: "\2713";
	display: inline-block;
	color: #63C16F;
	font-size: 2rem;
	font-weight: bolder;
	margin-right: 8px;
	vertical-align: middle;
}

/* 납부내역 리스트 */
.area_payment_detail>ul:not(:last-child) {
	margin-bottom: 8px;
}



/**** 납부 실패 ****/
/** 실패 멘트 **/
.failure_comment {
	text-align: center;
	margin: 40px auto 16px;
	display: block;

}

/***** 반응형 - 모바일 420px *****/
@media only screen and (max-width:280px) {

	.area_academy_info>ul:not(:last-child) {
		flex-direction: column;
	}

	.area_bill_info {
		margin-right: unset;
	}

	.area_bill_info .bill_title {
		max-width: 165px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}