@charset "UTF-8";

/* Noto Sans KR */
/*@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}*/
@import "https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700&subset=korean&display=";

/* 모바일+ CSS 375이상 */
@media (min-width: 375px) {
	html { font-size: 17px; }
}
/* 모바일 외 CSS 425초과 */
@media (min-width: 426px) {
	html { font-size: 20px; }
	.wrap { max-width: 1040px; }
	.footer_wrap { max-width: 1000px; }
}
/* 모바일 CSS */
/*@media (max-width: 767px) {
	.wrap { max-width: 560px; }
	.footer_wrap { max-width: 520px; }
}*/

body, html {
	height: 100%;
	margin: 0;
	padding: 0;
	letter-spacing: -0.05rem;
}
body {
	font-family: "Noto Sans KR", sans-serif;
}

.view-template {
	height: 100vh;
	/*font-family: "Noto Sans KR", sans-serif;*/
	color: #333;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wrap {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.container {
	padding: 20px 20px 80px;
}

.footer_wrap {
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	z-index:10;

	padding: 10px 20px 20px;
	text-align: center;
	background-color: #fff;
}
.footer_wrap.footer_intro {
	background-color: #6039b9;
}

.footer_area {
	display: flex;
	gap: 10px;
}

/* 공통 Text CSS */
.text-title {
	font-weight: bold;
	font-size: 1.375rem;
	line-height: 1.36;
}

.text-title.primary .point {
	color: #6039b9;
}

.text-title.secondary {
	color: #fff;
}
.text-title.secondary .point {
	color: #f8b502;
}

/* 정보 CSS */
.noti-info {
	color: #666;
	font-size: 0.813rem;
	line-height: 1.54;
}

.noti-info.sm {
	font-size: 0.688rem;
}
.noti-info.medium {
	font-size: 0.875rem;
}

.noti-info.secondary {
	color: #d2cae8;
}

/* 버튼 CSS */
.k-button {
	display: inline-flex;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	line-height: 1.571em;
	padding: 7px;
	font-size: 0.8rem;
}

.k-button:disabled {
	color: #fff !important;
	background-color: #ccc !important;
	cursor: default;
}

.k-button.primary {
	background-color: #6039b9;
	color: #fff;
}
.k-button.secondary {
	background-color: #fff;
	color: #6039b9;
}
.k-button.secondary.outlined {
	border: 1px solid #6039b9;
}
.k-button.secondary.outlined:disabled {
	border: 1px solid #ccc !important;
}
.k-button.back {
	background-color: #e4dff2;
	color: #6039b9;
	width: 42%;
}

/* progressBar 내부 이미지 색감, fiori theme 의 바 색깔을 파랑→보라톤으로 */
.k-loading-image {
	filter: hue-rotate(60deg) saturate(0.7);
}

/* 체크박스 CSS */
.checkbox-list {
	list-style: none;
	display: flex;
	padding: 0;
	flex-direction: column;
	/*gap: 20px;*/
}

.checkbox-list .checkbox-item:first-child {
	gap: 0;
}
.checkbox-list .checkbox-item {
	display: flex;
	font-size: 0.875rem;
	letter-spacing: -0.05em;
	justify-content: space-between;
}
.checkbox-item.title {
	font-weight: 500;
}

.k-checkbox-label:before {
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 18px;
	height: 18px;
}

.k-checkbox-label:before {
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 18px;
	height: 18px;
}

.k-checkbox:checked + .k-checkbox-label:before {
	border-color: #6039b9;
	color: #fff;
	content: "";
	background: #6039b9 url('/images/simpleagree/ic_check_white.png') no-repeat center;
	background-size:10px auto;
}

.k-checkbox-label:hover:before,
.k-checkbox:checked+.k-checkbox-label:hover:before,
.k-checkbox:checked:hover+.k-checkbox-label:before,
.k-checkbox:hover+.k-checkbox-label:before,
.k-checkbox-label:active:before,
.k-checkbox:active+.k-checkbox-label:before,
.k-checkbox:focus+.k-checkbox-label:before,
.k-checkbox:focus+.k-checkbox-label:hover:before{
	border-color: #6039b9;
}

/* 양식 CSS */
.form-data {
	display: flex;
	flex-direction: column;
}

.list-layout {
	list-style: none;
	display: flex;
	padding: 0;
	flex-direction: column;
	gap: 10px;
}

.inline-content {
	display: flex;
	font-size: 0.88rem;
}

.inline-content .title {
	font-weight: 500;
	width: 40%;
}

/* 경계선 CSS*/
.divider-line {
	width: 100%;
	height: 1px;
	background-color: #666;
	border: none;
}

/* Textbox 공통 CSS*/
.k-textbox {
	background-color: transparent;
	border: none;
}
.k-textbox .label {
	font-size: 0.88rem;
	font-weight: 500;
}
.reqstar { vertical-align: super; color:#c92929; font-size: 8pt; }
.k-textbox > input {
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.88rem;
}
.k-textbox > input::placeholder {
	color: #ccc;
}
.k-textbox > input:disabled {
	background-color: #f1f1f1;
}

/* Numericbox 공통 CSS*/
.k-numeric-wrap {
	border: none;
}

.k-numerictextbox .k-numeric-wrap > input {
	border: 1px solid #ccc;
	border-radius: 6px !important;
	font-size: 0.88rem;
}

.k-numerictextbox .k-numeric-wrap > input:hover,
.k-numerictextbox .k-numeric-wrap > input:active,
.k-numerictextbox .k-numeric-wrap > input:focus {
	border-color: #6039b9;
	border-radius: 6px;
}

/* Dropdown 공통 CSS */
.dropdown-box {
	display: flex;
	flex-direction: column;
	padding: 4px 0;
}

.dropdown-box .label {
	display: block;
	font-size: 0.88rem;
	font-weight: 500;
	margin-bottom: 5px;
}

.k-dropdown {
	font-size: 0.88rem;
}

.k-dropdown .k-dropdown-wrap {
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.88rem;
}
.k-dropdown .k-dropdown-wrap:hover,
.k-dropdown .k-dropdown-wrap:active,
.k-dropdown .k-dropdown-wrap:focus,
.k-dropdown .k-dropdown-wrap.k-state-border-down {
	border-color: #6039b9;
	border-radius: 6px;
}
.k-dropdown .k-dropdown-wrap .k-icon:before {
	content: "\e015";
}
.k-dropdown .k-dropdown-wrap .k-icon:after {
	content: "\e013";
}
.k-dropdown .k-dropdown-wrap.k-state-border-down .k-i-arrow-60-down {
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}

.k-popup.k-list-container {
	padding: 0;
	margin-top: 1px;
}

.k-popup.k-list-container .k-list-optionlabel.k-state-selected,
.k-list>.k-item.k-state-focused, .k-treeview .k-in.k-state-focused{
	background-color: #e4dff2;
	line-height: 2.143em;
    color: inherit;
    border: none;
}

/* Datepicker CSS */
.period-box {
	display: flex;
	align-items: center;
	gap: 10px;
}

.k-datepicker {
	width: 100%;
}
.k-datepicker .k-picker-wrap {
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.88rem;
}
.k-picker-wrap .k-input {
	border-radius: 6px;
}

.k-datepicker .k-picker-wrap.k-state-hover {
	border-color: #6039b9;
}

.k-datepicker .k-picker-wrap > .k-select {
	border: none;
}

/* 공통 Width / Height */
.block-h { height: 100% !important; }
.block-w { width: 100% !important; }

/* 공통 padding */
.p-1 { padding: 10px !important; }
.p-2 { padding: 20px !important; }
.p-3 { padding: 30px !important; }

.pt-4 { padding-top: 40px !important; }

/* 공통 margin*/
.mt-1 { margin-top: 10px !important; }
.mt-2 { margin-top: 20px !important; }

.mb-1 { margin-bottom: 10px !important; }
.mb-2 { margin-bottom: 20px !important; }

.mb-17 { margin-bottom:17px !important; }
.mb-20 { margin-bottom:20px !important; }

/* Box CSS */
.gray-box {
	display: flex;
	background-color: #f5f5f5;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 15px 20px;
}

.gray-outline-box {
	border: 1px solid #ccc;
	border-radius: 6px;
}

/* 아이콘 CSS */
.k-icon-24 {
	font-size: 24px;
}

.result-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	font-size: 50px;
}

.result-icon.fail {
	color: #c92929;
	background-color: #f7eaea;
}

.result-icon.success {
	color: #30796a;
	background-color: #e9f4f0;
}

/* 공통 CSS */
.flexbox { display: flex !important; }

.off { display: none !important; }

.text-align-center { text-align: center !important; }

.align-items-base { align-items: baseline !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: end !important; }

.justify-content-center { justify-content: center !important; }

.w40p { width: 40%; }

.fw500 { font-weight: 500;}

/* Layout CSS */
.boxes-wrap {
	display: flex;
	align-items: end;
	gap: 10px;
}

.title-box {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.title-box .title{
	font-size: 0.88rem;
	font-weight: 500;
}

.column-flex {
	display: flex;
	flex-direction: column;
}

/** 화면 (Intro) */
#intro {
	background-color: #6039b9;
}

.intro_img {
	width: 120px;
	height: 14px;
	padding: 20px 0;
}

/** 화면1 (약관동의) */
.check_label {
	display: flex;
	margin-right: 10px;
}

.next-btn {
	width: 100%;
	padding: 10px;
}

/* 화면2 (본인인증) */
.certification-option {
	display: flex;
	gap: 1rem;
}
.certification-option-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding:2rem;
	width: 100%;
	cursor: pointer;
}
.certification-option-item img {
	width: 2.4rem;
	height: 2.4rem;
}
.certification-option-item:hover {
	border-color: #6039b9;
	background-color: #f1eff7;
}
.certification-option-item:hover img {
	filter: invert(22%) sepia(79%) saturate(1812%) hue-rotate(243deg) brightness(94%) contrast(96%);
}
.certification-option-item .title {
	font-size: 1rem;
	font-weight: 500;
}
.certification-option-item .content {
	font-size: 0.8rem;
	color: #666;
}

/* 화면3 (결제수단선택) */
.order-item-list {
	font-weight: 500;
	font-size: 0.88rem;
	display: flex;
	flex-direction: column;
}

.order-item-list .order-item {
	padding: 10px 0;
	border-bottom: 1px solid #e2e2e2;
}

.order-item-list .order-item:first-child {
	padding-top: 0;
}

.order-item-list .order-item .header,
.order-item-list .order-item .content{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.order-item-list .order-item .content {
	margin-top: 10px;
}

.icon-button {
	cursor: pointer;
	font-size: 1.13rem;
	display: flex;
}

.num-counter {
	border: 1px solid #ccc;
	border-radius: 6px;
	display: flex;
}
.num-counter .decrease,
.num-counter .increase {
	padding: 7px;
	color: #666;
}
.num-counter input {
	border: 1px solid #ccc;
	border-top: none;
	border-bottom: none;
	outline: none;
	text-align: center;
	width: 50px;
	font-size: 0.8rem;
}

.amt-total {
	background-color: #f1eff7;
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
}

/* 서명 */
canvas {
	width: 100%;
	height: 230px;
	border: 1px solid #ccc;
	border-radius: 6px;
}
#canvas_clear {
	position: relative;
	bottom: 40px;
	font-weight: 500;
	float: right;
	margin-right: 10px;
	background-color: transparent;
	border: none;
	text-decoration: underline;
	font-size: 0.88rem;
	cursor: pointer;
}

/* DatePicker Calendar*/
.k-calendar {
	font-size: 0.813rem;
	width: 240px;
}

.k-calendar .k-header {
	background-color: #f5f5f5 !important;
	box-shadow: 0 0 1px 0;
	display: flex;
	justify-content: space-between;
	margin: 0;
	align-items: center;
}

.k-calendar .k-link.k-nav-fast {
	color: #333;
}

.k-widget.k-calendar .k-nav-next,
.k-widget.k-calendar .k-nav-prev {
	position: static;
}

.k-calendar .k-link.k-nav-fast {
	margin: 0;
}

.k-calendar th {
	text-align: center !important;
}

.k-calendar table.k-content td{
	background-color: #fff;
}

.k-calendar td.k-state-selected .k-link{
	color: #fff !important;
}
.k-calendar td.k-state-selected.k-state-focused {
	background-color: #ff6358 !important;
	box-shadow: inset 0 0 0 1px #ff6358 !important;
}

.k-calendar td.k-state-focused {
	box-shadow: inset 0 0 0 2px #e2e2e2 !important;
}

.k-calendar .k-content .k-link {
	line-height: 35px;
	min-height: 35px;
	color: #333;
}

.k-calendar .k-footer .k-nav-today {
	color: #ff6358;
	padding: 0;
}

.k-calendar .k-footer .k-nav-today.k-state-hover,
.k-calendar .k-footer .k-nav-today:hover {
	text-decoration: none;
}
.terms_title {
}
.terms_sub_title {
	font-size: 0.938em;
}

/* #pop_table td {border:1px solid #cfcfcf; padding: 5px;}
.notice_table_title { background-color: #efefef; } */
.agreeLayer { background-color: #ffffff; display:none; border:0; height: 100%; width: 100%; position: fixed;
	padding: 0; margin: 0; left: 0; top: 0; z-index: 100; overflow: hidden; text-align: left; }
.agreeLayerTop {
	height: 60px;
	line-height: 55px;
	background-color: #6039b9;
	font-size: 17px;
	color: #ffffff;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	justify-content: center;
}
.agreeLayerContents {
	height: calc(100% - 140px); height: -moz-calc(100% - 140px); height: -webkit-calc(100% - 140px); /* 110 */
	font-size: 12px;
	color: #303030;
	letter-spacing: -1px;
	line-height: 18px;
	padding: 15px;
	overflow: auto;
}
.agreeLayerBottom {
	background-color: #6039b9;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	color: #ffffff;
	letter-spacing: -1px;
	vertical-align: middle;
	cursor: pointer;
	text-align: center;
}
#full-layer {
	background-color: black;
	height: 100%;
	width: 100%;
	position: fixed;
	padding: 0;
	margin: 0;
	left: 0;
	top: 0;
	z-index: 100;
	overflow: hidden;
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	/* IE 5-7 */
	filter: alpha(opacity=50);
	/* Netscape */
	-moz-opacity: 0.5;
	/* Safari 1.x */
	-khtml-opacity: 0.5;
	/* Good browsers */
	opacity: 0.5;
}
