@charset 'utf-8';

@font-face {
	font-family: 'Tenada';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ol,
ul {
	list-style: none;
}

.hidden {
	opacity: 0;
	pointer-events: none;
}

p {
	margin: 0;
}

.mb-brk {
	display:none;
}
@media (max-width:768px) {
	.mb-brk {
	display:block;
}
}
header {
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: rgba(52, 58, 64, 0.06) 0px 2px 3px;
	height: 100px;
	overflow: hidden;
	position: fixed;
	width: 100%;
	z-index: 1;
	transition: height 0.3s ease-in-out;
	align-content: center;
	text-align: center;
}

header>h1 {
	font-family: 'Tenada';
	color: #fff;
	/* text-shadow: 5px 5px 5px #ddd; */
	margin-top: 10px;
}

body {
	background-color: #fff;
}


.middle-shrink {
	height: 100px !important;
}

.complete-shrink {
	height: 90px !important;
}

.floating-lecture {
	right: 20px;
	bottom: 20px;
	background-color: rgba(0, 78, 251, 0.7);
	position: fixed;
	display: inline-flex;
	padding: 15px 30px;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	box-shadow: 5px 5px 10px #0007;
	transition: opacity 0.3s ease;
}

.main-content .page-content {
	padding: 0 !important;
	max-width: 1220px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6rem;
}


#id_image_container img {
	width: 100%;
	border-radius: 20px;
}

label {
	position: relative;
	padding-left: 1rem;
}

label:not(.no-before)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 0.3rem;
	height: 2rem;
	background-color: var(--bs-primary);
}

.btn-success {
	background-color: #c6ffc1 !important;
}

footer {
	padding: 2rem 2rem;
	color: var(--bs-gray-500);
	background-color: var(--bs-gray-900);
	-webkit-box-shadow: 0 0 4px rgba(15, 34, 58, .12);
	box-shadow: 0 0 4px rgba(15, 34, 58, .12);
}


#privacy_btn {
	cursor: pointer;
	background-color: var(--bs-gray-300);
	width: 20rem;
	height: 5rem;
	align-content: center;
	border-radius: 0.5rem;
	justify-content: center;
	box-shadow: 1px 1px 2px #ddd;
	display: flex;
	padding: 0;
	align-items: center;
}

@media all and (min-width:768px) {
	header {
		text-align: left;
	}

	header>h1 {
		margin-left: 5rem;
		font-size: 2rem !important;
	}

	.main-content .page-content {
		margin-top: 10rem;
	}

	#card {
		margin: 0 5rem;
	}

	#inputs {
		display: flex;
		flex-wrap: wrap;
		gap: 50px;
	}

	#inputs>div {
		width: calc(50% - 25px);
	}
}