@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");

* {
	font-family: "Noto Sans KR", sans-serif;
	font-size: 16px;
}

:root {
	--gray-light: #f2f2f2;
	--gray-normal: #dcdcdc;
	--text-title: #121212;
	--text-normal: #444444;
	--text-light: #666666;
	--brand-color-1: #072266;
	--brand-color-2: #b72995;
	--brand-color-3: #bfa262;

	--max-width: 1200px;
}

@media (max-width: 576px) {
	* {
		font-size: 14px;
	}
}
/*************************************************************************
유틸/기타
*************************************************************************/
.h1,
.h1 * {
	font-size: 2rem !important;
	color: var(--text-title);
	font-weight: bold;
	text-align: center;
	margin-bottom: 1rem;
}
.font-md {
	font-size: 20px;
}
.text-brand-1 {
	color: var(--brand-color-1);
}
.text-brand-2 {
	color: var(--brand-color-2);
}
.bg-brand-point {
	display: inline-block;
	background-color: var(--brand-color-1);
	padding: 0.25rem 1rem;
	color: #ffffff;
}
.col-form-label {
	font-weight: bold;
}
.form-check-inline {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
input::placeholder {
	font-size: 0.75rem;
}
h5 {
	font-weight: bold;
}
h5 i {
	font-size: 20px;
	margin-right: 5px;
}
.mt-5rem {
	margin-top: 5rem !important;
}
.btn-blue {
	--bs-btn-color: #fff;
	--bs-btn-bg: #072266;
	--bs-btn-border-color: #072266;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #1b3883;
	--bs-btn-hover-border-color: #1b3883;
	--bs-btn-focus-shadow-rgb: 22, 34, 102;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1b3883;
	--bs-btn-active-border-color: #1b3883;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #072266;
	--bs-btn-disabled-border-color: #072266;
}
.done-layout {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
}
.table-done {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	border-top: 3px solid var(--brand-color-1);
	border-bottom: 3px solid var(--brand-color-1);
}
.table-done tr:not(:last-child) {
	border-bottom: 1px dashed #dcdcdc;
}
.table-done th {
	background: #f7f7f7;
}
.table-done th {
	width: 25%;
	word-break: break-word;
	padding: 1rem;
}
.table-done th.th-20 {
	width: 20%;
}
.table-done th.th-30 {
	width: 30%;
	border-left: 1px dashed #dcdcdc;
}
.table-done td {
	width: 50%;
	word-break: break-word;
	padding: 1rem;
}
.modal-600 {
	max-width: 600px !important;
}
@media (min-width: 768px) {
	.w-sm-25 {
		width: 25% !important;
	}
}
@media (max-width: 576px) {
	.form-check-inline {
		display: block;
	}
	.btn-lg {
		font-size: 1.125rem;
	}
}
/*************************************************************************
레이아웃
*************************************************************************/
body {
	background: var(--gray-light);
	height: 100%;
}
.body-wrap {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

/*section-banner*/
.banner {
	width: 100%;
}
.top-box {
	width: 100%;
	padding: 20px 20px;
	background-color: #13161a;
	background-image: url(./../img/bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.top-box img {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
.link-box {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	width: 100%;
	background: #072266;
}
.link-box-layout {
	display: flex;
	justify-content: end;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding-right: 30px;
}
.link-box a {
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	padding: 0px 10px;
	font-size: 1rem;
}
.link-box span {
	color: #d1aa3d;
	padding: 0px 10px;
	font-size: 1rem;
}
/*breadcrumb*/
.nolink-breadcrumb-box {
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: center;
	gap: 0.4rem;
	margin: 2rem 0;
}
.nolink-breadcrumb-box .nolink-breadcrumb {
	width: 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.nolink-breadcrumb-box .nolink-breadcrumb ~ i {
	margin-top: 1rem;
	color: #999999;
}
.nolink-breadcrumb-box .nolink-breadcrumb .icon-wrap {
	width: 50px;
	height: 50px;
	background: #e9ecf5;
	border-radius: 50%;
	padding: 0.6rem 1rem;
	text-align: center;
	margin-bottom: 0.5rem;
}
.nolink-breadcrumb-box .nolink-breadcrumb span {
	color: #999999;
	font-size: 0.875rem;
	text-align: center;
}
.nolink-breadcrumb-box .nolink-breadcrumb .icon-wrap i {
	margin: 0;
	padding: 0;
	font-size: 20px;
	color: #6a7694;
}
.nolink-breadcrumb-box .nolink-breadcrumb.active .icon-wrap {
	background: var(--brand-color-1);
}
.nolink-breadcrumb-box .nolink-breadcrumb.active span {
	color: var(--brand-color-1);
	font-weight: bold;
}
.nolink-breadcrumb-box .nolink-breadcrumb.active .icon-wrap i {
	color: #ffffff;
}
/*section-form*/
.section-form {
	padding-bottom: 80px;
}
.form-box {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 40px;
}
.form {
	width: 100%;
	background: #ffffff;
	border: 1px solid var(--text-light);
	box-shadow: 0px 0px 10px #00000010;
	padding: 4rem 3rem;
}
.form-login {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
.form-layout-4 {
	display: flex;
	flex-wrap: wrap;
}
.form-layout-4 .form-check {
	width: 49%;
	margin-left: 10px;
	margin-right: 0;
	word-break: break-all;
}
.form-layout-2 {
	display: flex;
	flex-wrap: wrap;
}
.form-layout-2 .form-layout-box {
	width: 48%;
	margin-left: 10px;
	margin-right: 0;
}
.label-certification {
	position: relative;
	width: 100%;
}
.label-certification #input-phone-certification {
	position: relative;
	width: 100%;
}
.label-certification span {
	position: absolute;
	display: inline-block;
	top: 50%;
	right: 20px;
	width: 25px;
	transform: translateY(-50%);
}
input::-ms-reveal,
input::-ms-clear {
	display: none;
}
.form-password-view {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.form-password-view input {
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	z-index: 1;
}
.form-password-view button,
.form-password-view button:active,
.form-password-view button:hover,
.form-password-view button:focus {
	border: 1px solid #ced4da;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0.375rem;
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
footer {
	width: 100%;
	top: 120px;
	padding: 30px 0px;
	border-top: 1px solid var(--text-light);
	background: #313747;
}
.footer-wrap {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	flex-direction: row;
	padding: 0px 10px;
}
.footer-wrap img {
	display: block;
	width: 100%;
	max-width: 200px;
	margin-left: 20px;
}
.footer-wrap p {
	color: #ffffff;
}

@media (max-width: 992px) {
	.form-layout-4 .form-check {
		width: 100%;
	}
	.form-layout-2 .form-layout-box {
		width: 100%;
	}
	.footer-wrap img {
		margin-left: 0;
	}
	.footer-wrap .footer-info {
		margin-top: 20px;
	}
}
@media (max-width: 576px) {
	.nolink-breadcrumb-box {
		gap: 0rem;
	}
	.link-box a {
		padding: 0px 7px;
		font-size: 1rem;
	}
	.link-box-layout a img {
		width: 20px;
		height: 20px;
	}
	.top-box {
		padding: 40px 40px;
	}
	.form-box {
		padding: 10px;
	}
	.form {
		padding: 4rem 1.25rem;
	}
	.footer-wrap {
		flex-direction: column;
		padding: 0px 5px;
	}
	.footer-wrap img {
		max-width: 200px;
	}
	.footer-info {
		margin-top: 12px;
	}
	.footer-info p,
	.footer-info b {
		font-size: 12px;
	}
	.footer-info address {
		font-size: 12px;
	}
}
/*************************************************************************
약관
*************************************************************************/
.terms-all-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem 0.5rem;
	border: 2px solid var(--brand-color-3);
	background: #fffdf7;
	border-radius: 6px;
}
.terms-all-box .form-check-input {
	width: 1.5rem;
	height: 1.5rem;
}
.terms-all-box .form-check-label {
	font-size: 1.25rem;
	font-weight: bold;
	margin-left: 0.75rem;
}
.form-check-input {
	width: 1.25rem;
	height: 1.25rem;
}
.form-check-label {
	font-size: 1.125rem;
	margin-left: 0.25rem;
}
.terms-box {
	border: 1px solid var(--gray-normal);
	padding: 1rem;
	height: 150px;
	overflow-y: scroll;
}
.terms-box.terms-marketing {
	height: 120px;
	overflow-y: auto;
}
.terms-box * {
	font-size: 0.75rem;
}
.terms-box p {
	margin-bottom: 0.5rem;
}
.terms-box h1,
.terms-box h2 {
	font-size: 0.8125rem;
	font-weight: bold;
	margin-top: 1rem;
}
/*************************************************************************
추가 사항
*************************************************************************/