@charset "UTF-8";
.login-page, .signup-page {
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	width: 1200px;
	margin: auto;
}
.signup-homecard-page {
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin: auto;
}
a {
	color: var(--primary-colors-orange);
	text-decoration: underline;
}
.wrapper.container {
	width: 1200px !important;
	padding: 20px !important;
	margin: auto;
}
.signup-page, .signup-page .style-1 {
	min-height: 904px;
}
.homecard-page {
	min-height: unset;
	background: #F9F9F9;
	width: 100%;
}
.homecard-regist-page {
	min-height: unset;
	background: #FFFFFF;
	width: 100%;
	margin-bottom: 50px;
	margin-top: 30px;
}
.login-page > div, .signup-page > div {
	width: 50%;
	min-height: 650px;
}
.homecard-page > div {
	width: 100% !important;
}
.login-page .style-1, .signup-page .style-1 {
	background: #F8FAFF;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-page .style-1 h1 , .signup-page .style-1 h1 {
	font-size: 35px;
	color: #F79421;
	margin: 0;
}
.login-page .style-1 img, .signup-page .style-1 img {
	width: 350px;
	padding-bottom: 12px;
}
.login-page .login-form , .signup-page .signup-form {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 18px;
	padding: 0;
}
.login-page .login-form h2, .signup-page .signup-form h2 {
	font-size: 32px;
	margin-bottom: 24px;
}
.login-page .login-form form, .signup-page .signup-form form {
	width: 416px;
}
.homecard-regist-page .signup-page .signup-form form {
	width: 100%;;
}
.signup-page.homecard-page .signup-form form {
	width: 100%;
}
.login-page .login-form .ui.form .field>label,
.signup-page .signup-form .ui.form .field>label {
	font-size: 18px;
	margin-bottom: 5px;
}
.login-page .login-form .ui.form input, 
.login-page .login-form .ui.form input[type=text],
.signup-page .signup-form .ui.form input, 
.signup-page .signup-form .ui.form input[type=text] {
	font-family: Prompt;
	font-size: 18px;
	border-radius: 10px;
}
.login-form .ui.form .error-message,
.signup-page .signup-form .ui.form .error-message,
.signup-otp-form form .content .otp .error-message,
.modal-form form .content .otp .error-message,
.homecard-page .error-message,
.hp-homecard-info .error-message {
	display: none;
	padding: 4px 16px;
	font-size: 12px;
	color: #DA3731;
}
.signup-otp-form form .content .otp .error-message,
.modal-form  form .content .otp .error-message {
	padding: 4px 0;
}
.login-form .ui.form .field.error .error-message,
.signup-page .signup-form .ui.form .field.error .error-message,
.signup-otp-form form .content .otp.error .error-message,
.modal-form form .content .otp.error .error-message {
	display: block;
}
.login-page .login-form .forget {
	text-align: right;
	margin-bottom: 16px;
}
.login-page .login-form .forget a {
	font-size: 18px;
	font-weight: 700;
	color: #F79421;
}
.login-page .login-form .button,
.signup-page .signup-form .button,
.onlineregist-modal .ui.button {
	width: 100%;
	border-radius: 10px;
	background: var(--primary-color-deep-blue-800);
	font-family: Prompt;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}
.login-thirdparty {
	width: 416px;
	margin-top: 20px;
	text-align: center;
}
.login-thirdparty h3 {
	position: relative;
	font-size: 18px;
	font-weight: 400;
	color: #99999C;
	text-align: center;
}
.login-thirdparty h3 span{
	display: inline-block;
	background-color: #fff;
	z-index: 1;
	position: relative;
	padding: 0 10px;
}
.login-thirdparty h3:before {
	content: "";
	width: 100%;
	height: 1px;
	background: #F1F1F4;
	position: absolute;
	top: 11px;
	left: 0;
}
.login-thirdparty .social-login ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.login-thirdparty .social-login ul li {
	display: inline-block;
	margin-right: 40px;
}
.login-thirdparty .social-login ul li:last-child {
	margin-right: 0;
}
.login-thirdparty .go-register {
	margin-top: 32px;
}
.login-thirdparty .go-register a {
	font-weight: 600;
	color: #F79421;
	text-decoration: underline;
}
.login-thirdparty .login-thirdparty-notice {
	margin-top: 16px;
	font-size: 14px;
	color: #99999C;
}
.login-thirdparty .login-thirdparty-notice a {
	color: #F79421;
	text-decoration: underline;
}
.ui.negative.message {
	background: #FFF9F9;
	box-shadow: none;
	border: 0.5px solid rgba(218, 55, 49, 0.40);
	padding: 20px 24px;
	margin-bottom: 24px;
	font-family: Prompt;
	font-size: 14px;
	color: #525255;
}
.ui.negative.message .header {
	font-family: Prompt;
	color: #DA3731;
	font-size: 18px;
	margin-bottom: 8px;
}
.ui.negative.message a {
	font-weight: 500;
	color: #DA3731;
	text-decoration: underline;
}

.signup-page .signup-form .ui.menu .item {
	font-size: 18px;
	width: 48%;
	border: 0;
	border-bottom: 2px solid #B4B4B7;
	padding: 0;
	height: 29px;
	justify-content: center;
}
.signup-page .signup-form .ui.tabular.menu .active.item {
	color: var(--primary-color-deep-blue-800);
	border-color: var(--primary-color-deep-blue-800);
} 
.signup-page .signup-form .ui.tabular.menu {
	border: 0;
	margin-bottom: 24px;
	width: 416px;
	column-gap: 16px;
}
.signup-page .signup-form .ui.tab {
	max-width: 416px;
}

.signup-form .ui.checkbox label {
	margin-bottom: 10px;
}
.signup-page .signup-form .ui.checkbox label {
	font-size: 14px;
}
.signup-page .homecard-notice {
	margin: 16px 0 40px;
	text-align: center;
	color:  #525255;
	font-size: 18px;
}

.openeyes {
	position: absolute;
	top: 38px;
	right: 12px;
	cursor: pointer;
}

.warning-caps-lock-icon [data-tooltip]:hover::before, [data-tooltip][data-position="bottom center"]:hover::before {
	background-color: rgb(218, 55, 49);
}
.warning-caps-lock-icon [data-tooltip]:hover::after, [data-tooltip][data-position="bottom center"]:hover::after {
	color: #fff;
	background-color: rgb(218, 55, 49);
	padding: 3px 6px;
	font-size: 12px;
}
.password-field {
	position: relative;
}
.warning-caps-lock-icon {
	position: absolute;
	top: 40px;
	right: 16px;
	display:none;
}

.signup-page .signup-otp-form, .modal-form, .homecard-page .body-content {
	display: flex;
	width: 100%;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	background: #F9F9F9;
	padding: 30px 0;
}
.signup-page .signup-otp-form form, .modal-form form, .homecard-page .body-content form {
	display: flex;
	width: 604px;
	height: auto;
	padding: 48px;
	flex-direction: column;
	align-items: center;
	border-radius: 10px;
	background: var(--neutral-colors-white, #FFF);
}
.homecard-page.signup-page .signup-otp-form form, .modal-form form, .homecard-page .body-content form {
	width: 75%;
	padding: 30px;
}
.signup-page .signup-otp-form form .header, .modal-form form, .homecard-page .body-content .header {
	width: 100%;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: row;
	align-items: center;
	column-gap: 32px;
}
.signup-page .signup-otp-form form .header .back {
	cursor: pointer;
}
.signup-page .signup-otp-form form .header .header-text, .modal-form form .header .header-text {
	color: var(--neutral-colors-gray-800, #525255);
	font-feature-settings: 'clig' off, 'liga' off;
	font-family: Prompt;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}
.signup-page .signup-otp-form form .content,
.signup-page .signup-otp-form form .content .otp,
.signup-page .signup-otp-form form .content .re-sent,
.modal-form form .content,
.modal-form form .content .otp,
.modal-form form .content .re-sent {
	width: 100%;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
}
.signup-page .signup-otp-form form .content .description,
.modal-form form .content .description {
	margin-top: 24px;
	margin-bottom: 40px;
}
.signup-page .signup-otp-form form .content .description span,
.signup-page .signup-otp-form form .content .re-sent span,
.modal-form form .content .description span,
.modal-form form .content .re-sent span {
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.signup-page .signup-otp-form form .content .description span.g,
.modal-form form .content .description span.g {
	color: var(--neutral-colors-gray-700, #99999C);
}
.signup-page .signup-otp-form form .content .description span.b,
.signup-page .signup-otp-form form .content .re-sent span.b,
.modal-form form .content .description span.b,
.modal-form form .content .re-sent span.b {
	color: var(--neutral-colors-gray-800, #525255);
}
.signup-page .signup-otp-form form .content .re-sent span.timer,
.modal-form form .content .re-sent span.timer {
	color: var(--primary-color-deep-blue-600, var(--primary-color-deep-blue-800));
	width: 40px;
}
.signup-page .signup-otp-form form .content .otp,
.modal-form form .content .otp {
	column-gap: 16px;
	margin-bottom: 40px;
	width: 344px;
	justify-content: flex-start;
}
.signup-page .signup-otp-form form .content .otp .digit-otp-input,
.modal-form .content .otp .digit-otp-input {
	width: 44px;
	height: 48px;
	padding: 11px 15px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid var(--neutral-colors-gray-400, #E0E0E3);
	background: var(--neutral-colors-white, #FFF);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.signup-page .signup-otp-form form .content .otp .digit-otp-input.error,
.modal-form .content .otp .digit-otp-input.error {
	color: #9f3a38;
	background: #fff6f6;
	border-color: #e0b4b4;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.signup-page .signup-otp-form form .content .re-sent,
.modal-form .content .re-sent  {
	margin-bottom: 40px;
}
.signup-page .signup-otp-form form .content .re-sent div.sent,
.modal-form .content .re-sent div.sent  {
	color: var(--primary-color-deep-blue-600, var(--primary-color-deep-blue-800));
	text-align: center;
	font-feature-settings: 'clig' off, 'liga' off;
	font-family: Prompt;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-decoration-line: underline;
	display: none;
	cursor: pointer;
}
.signup-page .signup-otp-form form .content button,
.modal-form .content button {
	width: 100%;
	height: 56px;
	padding: 11px 16px 12px 16px;
	border-radius: 10px;
	background: var(--primary-color-deep-blue-800);
	color: var(--white, #FFF);
	text-align: center;
	font-feature-settings: 'clig' off, 'liga' off;
	border: unset;
	font-family: Prompt;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0;
}
.login-modal .ui.form, .onlineregist-modal .ui.form {
	padding: 0;
}
.login-modal h2 {
	width: 100%;
	text-align: center;
}
.modal-form .ui.form .field {
	width: 100%;
}

.homecard-modal img {
	display: flex;
	width: 492px;
	height: 226px;
	padding: 6px 34.859px 6.003px 26.274px;
	align-items: center;
}

.homecard-modal .buttons {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
}
.homecard-info.buttons, .homecard-regist-page .buttons {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
}
.homecard-regist-page .buttons {
	width: 100%;
	flex-direction: row-reverse;
}
.homecard-modal .buttons button, .homecard-info.buttons button, .homecard-regist-page .buttons .button, .homecard-info.buttons button:visited {
	display: flex;
	width: 100%;
	padding: 11px 16px 12px 16px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	text-align: center;
	font-feature-settings: 'clig' off, 'liga' off;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: normal;
	border-radius: 10px;
	color: var(--White, #FFF);
	background: var(--primary-color-deep-blue-800);
	height: 56px;
}
.homecard-page .buttons .button:hover {
	color: var(--White, #FFF);
	background: var(--primary-color-deep-blue-800);
}
.homecard-regist-page .buttons .button {
	width: 250px;
}
.homecard-modal .buttons button:last-child, .homecard-regist-page .buttons .button:last-child {
	color: var(--neutral-colors-gray-800, #525255);
	border: 1.5px solid var(--neutral-colors-gray-700, #99999C);
	background: var(--neutral-colors-white, #FFF);
}
.homecard-info.buttons button.notyet {
	color: var(--neutral-colors-gray-800, #525255);
	border: 1.5px solid var(--neutral-colors-gray-700, #99999C);
	background: var(--neutral-colors-white, #FFF);
}
.homecard-modal .buttons button:last-child:hover, .homecard-regist-page .buttons .button:last-child:hover {
	color: var(--neutral-colors-gray-800, #525255);
	border: 1.5px solid var(--neutral-colors-gray-700, #99999C);
	background: var(--neutral-colors-white, #FFF);
}
.homecard-info.buttons button:hover {
	opacity: 0.8;
}
.homecard-regist-page .header-title {
	width: 100%;
	text-align: center;
	margin: 0 0 40px 0;
}
.homecard-page .form-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 42px;
	width: 100%;
}

.homecard-page .homecard-info-desc div {
	font-size: 14px;
	font-weight: 500;
	color: #4A4A4A;
	display: flex;
	flex-wrap: wrap;
}
.homecard-page .homecard-info-desc div:first-child {
	font-size:16px;
	font-weight:600;
	color:#0066b3;
}
.homecard-page .homecard-info-desc div span:first-child {
	width: 50%;
	font-weight: 600;
}
.ui.message p:last-child, .ui.message>:last-child {
	margin-bottom: .75em !important;
}