* { 
	font-family: 'Pretendard';
}

html, body {
    height: 100%;
    scroll-behavior: smooth;
	color: #333d4b;
}

ul {
	margin: 0;
	padding: 0; 
	list-style:none;
}

li,dt,dd,ol {
	margin: 0;
	padding:0;
}

ol {
	list-style-position:inside;
}

a {
    color: #000;
    text-decoration: none;
}

h1 {
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.5px;
	font-weight: 700;
}

h2 {
	font-size: 28px;
	line-height: 38px;
	letter-spacing: -0.5px;
	font-weight: 700;
}

h3 {
	font-size: 24px;
	line-height: 34px;
	letter-spacing: -0.5px;
	font-weight: 700;
}

.light {
	font-weight: 100;
}

.normal {
	font-weight: 400;
}

.bold {
	font-weight: 700;
}

.extra_bold {
	font-weight: 900;
}

.tossface {
  font-family: Tossface;
}


.btn-md {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-font-size: 1.1rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}



.font-size-10 {
	font-size: 10px;
}

.font-size-12 {
	font-size: 12px;
}

.font-size-14 {
	font-size: 14px;
}

.font-size-16 {
	font-size: 16px;
}

.font-size-17 {
	font-size: 17px;
}

.font-size-18 {
	font-size: 18px;
	line-height: 24px;
}

.font-size-20 {
	font-size: 20px;
}

.font-size-22 {
	font-size: 22px;
}

.font-size-24 {
	font-size: 24px;
	line-height: 34px;
}

.font-size-28 {
	font-size: 28px;
	line-height: 38px;
}

.font-size-34 {
	font-size: 34px;
	line-height: 44px;
}

.font-size-40 {
	font-size: 40px;
	line-height: 50px;
}

.font-size-44 {
	font-size: 44px;
	line-height: 54px;
}

.font-size-50 {
	font-size: 50px;
	line-height: 60px;
}

.bg-f0f1f5 {
	background: #f0f1f5;
}

.bg-f2f4f6 {
	background: #f2f4f6;
}

.bg-eaecf0 {
	background: #eaecf0;
}

.container-800 {
	width: 100%;
	max-width: 800px;
}

.p-20 {
	padding: 20px;
}

.p-24 {
	padding: 24px;
}

.pt-200 {
	padding-top: 200px;
}

.pt-20 {
	padding-top: 20px;
}

.pt-60 {
	padding-top: 60px;
}

.px-30 {
	padding-left: 30px;
	padding-right: 30px;	
}		

.py-20 {
	padding-top: 20px;
	padding-bottom: 20px;	
}	

.py-24 {
	padding-top: 24px;
	padding-bottom: 24px;	
}	

.py-60 {
	padding-top: 60px;
	padding-bottom: 60px;	
}	

.py-100 {
	padding-top: 100px;
	padding-bottom: 100px;	
}	

.py-150 {
	padding-top: 150px;
	padding-bottom: 150px;	
}

.my-20 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.mt-10 {
	margin-top: 10px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

.mt-200 {
	margin-top: 200px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.fs-14 {
	font-size: 14px !important;
}

.fs-15 {
	font-size: 15px !important;
}

.fs-16 {
	font-size: 16px !important;
}

.fs-17 {
	font-size: 17px !important;
}

.fs-18 {
	font-size: 18px !important;
}

.fs-20 {
	font-size: 20px !important;
}

.fs-24 {
	font-size: 24px !important;
}

.fs-28 {
	font-size: 28px !important;
}

.mobile_only_text_block {
    display: block;
}

.pc_only_text_block {
    display: inline;
}

.image-wrapper-1_1 {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
}

.image-wrapper-1_1 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-wrapper-16_9 {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.26%;
	overflow: hidden;
}

.image-wrapper-16_9 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-wrapper-1_075 {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 67%;
	overflow: hidden;
}

.image-wrapper-1_075 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scrollable {
    flex: 1;
    overflow-y: auto;
}

.scrollable::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.scrollable::-webkit-scrollbar-thumb {
	background: #f7f7f7;
	border-radius: 12px;
}

.scrollable::-webkit-scrollbar-track {
	background: #fff;
}


/* MOBILE */
@media (max-width: 768px) {
	.container-800 {
		width: 100% !important;
	}
	
	.pt-md-60 {
		padding-top: 60px !important;
	}
	
	.px-md-20 {
		padding-left: 20px !important;
		padding-right: 20px !important;	
	}	

	.py-md-10 {
		padding-top: 10px !important;
		padding-bottom: 10px !important;	
	}	

	.py-md-20 {
		padding-top: 20px !important;
		padding-bottom: 20px !important;	
	}	

	.py-md-60 {
		padding-top: 60px !important;
		padding-bottom: 60px !important;	
	}	

	.py-md-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;	
	}	

	.mt-md-60 {
		margin-top: 60px !important;
	}
	
	.fs-md-16 {
		font-size: 16px !important;
	}
	
	.fs-md-18 {
		font-size: 18px !important;
	}	

	.fs-md-20 {
		font-size: 20px !important;
	}	

	.w-md-100p {
		width: 100% !important;
	}
	
	.w-md-800 {
		width: 800px !important;
	}
	
	.w-md-1200 {
		width: 1200px !important;
	}

	.h-md-130 {
		height:130px !important;
	}	

	.h-md-150 {
		height:150px !important;
	}	
	
	.h-md-210 {
		height:210px !important;
	}	
}

/* PC */
@media (min-width: 992px) {
	.w-lg-100p {
		width: 100%;
	}
	
	.w-lg-800 {
		width: 800px !important;
	}	

	.h-lg-250 {
		height:250px !important;
	}
	
	.h-lg-300 {
		height:300px !important;
	}	
	
	.h-lg-525 {
		height:525px !important;
	}
	
	.h-lg-550 {
		height:550px !important;
	}	
	
	.mobile_only_text_block {
		display: inline;
	}

	.pc_only_text_block {
		display: block;
	}
}