@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Poppins:wght@400;500;600;700&display=swap');

.dm-serif-text-regular {
	font-family: "DM Serif Text", serif !important;
	font-weight: 400;
	font-style: normal;
}

.dm-serif-text-regular-italic {
	font-family: "DM Serif Text", serif !important;
	font-weight: 400;
	font-style: italic;
}

.poppins-regular {
	font-family: "Poppins", sans-serif !important;
	font-weight: 400;
	font-style: normal;
}

.poppins-medium {
	font-family: "Poppins", sans-serif !important;
	font-weight: 500;
	font-style: normal;
}

.poppins-semibold {
	font-family: "Poppins", sans-serif !important;
	font-weight: 600;
	font-style: normal;
}

.poppins-bold {
	font-family: "Poppins", sans-serif !important;
	font-weight: 700;
	font-style: normal;
}


/* 초기화 */
* {font-family:'Poppins', 'Pretendard', 'Malgun Gothic','돋움', arial, sans-serif;letter-spacing:-0.3px;padding:0;margin:0;box-sizing:border-box;}
html, body {width:100%;padding:0;margin:0;min-height:100%;}
body {font-family:'Poppins', 'Pretendard', '돋움', '굴림', arial, sans-serif;font-weight:400;font-size:18px;line-height:1.2;color:#1c1c1c;}
h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, tbody, tfoot, thead, th, td, article, figure {margin:0;padding:0}
input, textarea, select, td, th, button {font-family:'Poppins', 'Pretendard','Malgun Gothic','돋움', arial, sans-serif; color:#444; vertical-align:middle;}
h1, h2, h3, h4, h5, h6 {font-weight:normal; font-size:100%;}
table {width:100%; border-spacing:0; border-collapse:collapse; table-layout:fixed;}
legend, caption, .skip {position:absolute; left:-5000px; top:0; overflow:hidden; line-height:0.1%; font-size:0.1%; width:0.1%; height:0.1%;}
caption {position:relative;}
img, fieldset {border:0 none;}
label, button {cursor:pointer;margin:0;}
em, address {font-style:normal;}
a {color:#212121}
a:link, a:visited {text-decoration:none;}
a:hover, a:active, a:focus {text-decoration:none;}
img {max-width:100%}
ul, ol, li {list-style: none;}



/* text */
.txt-blue {color: var(--blue) !important;}
.txt-red {color: var(--red) !important;}
.txt-gray {color: #aaa !important;}
.txt-black-1 {color: #111 !important;}
.txt-black-3 {color: #333 !important;}
.txt-green {color: var(--green) !important;}
.txt-yellow {color: var(--yellow) !important;}
.txt-purple {color: #522edf !important;}

.txt-left {text-align: left !important;}
.txt-center {text-align: center !important;}
.txt-right {text-align: right !important;}

.txt-keep-all {word-break: keep-all;}

.txt-1 {font-weight: 100;}
.txt-2 {font-weight: 200;}
.txt-3 {font-weight: 300;}
.txt-4 {font-weight: 400;}
.txt-5 {font-weight: 500;}
.txt-6 {font-weight: 600;}
.txt-7 {font-weight: 700;}
.txt-8 {font-weight: 800;}
.txt-9 {font-weight: 900;}

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

.underline {text-decoration: underline; text-underline-offset : 2px;}
.ellipsis {display: inline-block; max-width: calc(100% - 30px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}



.bg-blue {background-color: #F6FAFF !important;}

.no-border {border: none !important;}

.radius-tl-10 {border-top-left-radius: 10px !important;}
.radius-tr-10 {border-top-right-radius: 10px !important;}
.radius-bl-10 {border-bottom-left-radius: 10px !important;}
.radius-br-10 {border-bottom-right-radius: 10px !important;}



.overflow-hidden {overflow: hidden !important;}



/* position*/
.absolute {position: absolute !important;}
.bottom-0 {bottom: 0 !important;}
.right-0 {right: 0 !important;}



/* flex */
.flex {display: flex !important;}
.flex-between {display: flex; justify-content: space-between;}
.flex-start {display: flex; justify-content: start;}
.flex-center {display: flex; justify-content: center;}
.flex-end {display: flex; justify-content: end;}
.direction-column {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}



/* gap */
.gap-3 {gap: 3px !important;}
.gap-5 {gap: 5px !important;}
.gap-8 {gap: 8px !important;}
.gap-10 {gap: 10px !important;}
.gap-15 {gap: 15px !important;}
.gap-20 {gap: 20px !important;}
.gap-30 {gap: 30px !important;}
.gap-40 {gap: 40px !important;}
.gap-50 {gap: 50px !important;}

.row-gap-3 {row-gap: 3px !important;}
.row-gap-5 {row-gap: 5px !important;}
.row-gap-8 {row-gap: 8px !important;}
.row-gap-10 {row-gap: 10px !important;}
.row-gap-15 {row-gap: 15px !important;}
.row-gap-20 {row-gap: 20px !important;}
.row-gap-30 {row-gap: 30px !important;}
.row-gap-40 {row-gap: 40px !important;}
.row-gap-50 {row-gap: 50px !important;}



/* padding */
.pt-5 {padding-top: 5px !important;}
.pt-10 {padding-top: 10px !important;}
.pt-15 {padding-top: 15px !important;}
.pt-20 {padding-top: 20px !important;}
.pb-5 {padding-bottom: 5px !important;}
.pb-10 {padding-bottom: 10px !important;}
.pb-15 {padding-bottom: 15px !important;}
.pb-20 {padding-bottom: 20px !important;}
.pr-5 {padding-right: 5px !important;}
.pr-10 {padding-right: 10px !important;}
.pr-15 {padding-right: 15px !important;}
.pr-20 {padding-right: 20px !important;}
.pl-5 {padding-left: 5px !important;}
.pl-10 {padding-left: 10px !important;}
.pl-15 {padding-left: 15px !important;}
.pl-20 {padding-left: 20px !important;}



/* margin */
.mt-5 {margin-top: 5px !important;}
.mt-10 {margin-top: 10px !important;}
.mt-15 {margin-top: 15px !important;}
.mt-20 {margin-top: 20px !important;}
.mb-5 {margin-bottom: 5px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-15 {margin-bottom: 15px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mr-5 {margin-right: 5px !important;}
.mr-10 {margin-right: 10px !important;}
.mr-15 {margin-right: 15px !important;}
.mr-20 {margin-right: 20px !important;}
.ml-0 {margin-left: 0 !important;}
.ml-5 {margin-left: 5px !important;}
.ml-10 {margin-left: 10px !important;}
.ml-15 {margin-left: 15px !important;}
.ml-20 {margin-left: 20px !important;}

.mtb-auto {margin-top: auto; margin-bottom: auto;}



/* width */
.w-10 {width: 10% !important;}
.w-20 {width: 20% !important;}
.w-30 {width: 30% !important;}
.w-40 {width: 40% !important;}
.w-50 {width: 50% !important;}
.w-60 {width: 60% !important;}
.w-70 {width: 70% !important;}
.w-80 {width: 80% !important;}
.w-90 {width: 90% !important;}
.w-100 {width: 100% !important;}
.w-120px {width: 120px !important;}
.w-142px {width: 142px !important;}
.w-340px {width: 340px !important;}
.w-700px {width: 700px !important;}



/* height */
.h-10 {height: 10% !important;}
.h-20 {height: 20% !important;}
.h-30 {height: 30% !important;}
.h-40 {height: 40% !important;}
.h-50 {height: 50% !important;}
.h-60 {height: 60% !important;}
.h-70 {height: 70% !important;}
.h-80 {height: 80% !important;}
.h-90 {height: 90% !important;}
.h-100 {height: 100% !important;}