/* =============================================================================
   ### Common
   ========================================================================== */
html, body { width: 100%; }
html, body, header, main, form, fieldset, div, ul, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, button, xmp, pre { margin: 0; padding: 0; }
a { text-decoration: none; }
em { font-style: normal; }
ul { list-style-type: none; }
legend,
caption { display: none; }
fieldset { border: 0; }
label { cursor: pointer; }
button { border: 0; cursor: pointer; background-color: transparent; }
html,
body,
dl,
dt,
dd,
a,
th,
td,
xmp,
pre,
select,
button,
textarea,
input,
input[type=file]::file-selector-button,
#container { font-family: "Pretendard Variable", 'Pretendard', Arial, 'Malgun Gothic', sans-serif !important; color: #000; font-size: 14px; letter-spacing: -0.2px; }
input[type=radio],
input[type=checkbox] { margin: 0; padding: 0; width: 20px; height: 20px; border: 1px solid #ccc; }
input[type=text],
input[type=email],
input[type=password] { height: 50px; padding: 0 20px; font-size: 18px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; outline: none; }
select { height: 50px; padding: 0 20px; font-size: 18px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
textarea { width: 100%; padding: 20px; font-size: 18px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; outline: none; }
input[type=file]::file-selector-button { width: 90px; height: 30px; border: 1px solid #ccc; background-color: #f6f6f6; box-sizing: border-box; }
input[type=file] { padding: 0; }
select:disabled,
textarea:disabled,
input[type=text]:disabled,
input[type=password]:disabled { background-color: #f6f6f6 !important; color: #cacaca; opacity: 1; }
textarea:disabled::placeholder,
input[type=text]:disabled::placeholder,
input[type=password]:disabled::placeholder { color: #cacaca; }
textarea::placeholder,
input[type=text]::placeholder,
input[type=password]::placeholder { color: #888; font-size: 16px; line-height: 25.6px; }
iframe { width: 100%; border: 0; }

.custom-select { position: relative; user-select: none; }
.custom-select .default_option { position: relative; display: flex; align-items: center; padding:0 20px; font-size: 18px; box-sizing: border-box; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; }
.custom-select .default_option:after { content: ""; position: absolute; pointer-events: none; top: 50%; right: 20px; transform: translate(0, -50%); width: 12px; height: 12px; background-color: #000000; clip-path: polygon(8% 17%, 0% 25%, 50% 84%, 100% 25%, 92% 17%, 50% 65%); }
.custom-select .select_ul { display: none; position: absolute; top: 55px; left: 0; width: 100%; padding: 5px; background: #fff; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; }
.custom-select .select_ul li { padding: 10px 15px; cursor: pointer; border-radius: 4px; color: #666; font-size: 18px; line-height: 27px; text-align: left; }
.custom-select .select_ul li:hover { color: #000; background: #f8f8f8; }
.custom-select.active .select_ul { display: block; }
.custom-select.active .default_option:after { transform: translate(0, -50%) rotate(-180deg); }
.search-input input { width: 360px; padding-right: 60px !important; }
.search-input button { position: absolute; top: 0; right: 0; display: flex; width: 60px; height:50px; background: url('../images/ico_search.svg') no-repeat center center; }

.btn-all { display: inline-flex; align-items: center; justify-content: center; margin: 0; text-decoration: none; box-sizing: border-box; white-space: nowrap; line-height: 1; text-indent: 0; border-radius: 4px; box-sizing: border-box; }
.btn-sm-solid { height: 34px; padding: 0 10px; font-size: 16px; border: 1px solid #ccc; background: #fff; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 14px; background: #eee; }
.btn-lg-solid { height: 40px; padding: 0 16px; font-size: 14px; border: 1px solid #ccc; background: #fff; }
.btn-xl { height: 60px; padding: 0 20px; font-size: 18px; background: #000; color: #fff; }
.btn-xl-solid { height: 60px; padding: 0 20px; font-size: 18px; border: 1px solid #ccc; background: #fff; }

.hidden { display: none; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-base { display: flex; gap: 5px; align-items: center; }
.flex-right { display: flex; gap: 5px; align-items: center; margin-left: auto; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.justify-normal { justify-content: normal; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.justify-stretch { justify-content: stretch; }

.shrink-0 { flex-shrink: 0; }
.gap-0 { gap: 0; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-40 { gap: 40px; }
.gap-50 { gap: 50px; }
.gap-60 { gap: 60px; }
.gap-70 { gap: 70px; }
.gap-80 { gap: 80px; }
.gap-x-0 { column-gap: 0; }
.gap-x-10 { column-gap: 10px; }
.gap-y-0 { row-gap: 0; }
.gap-y-10 { row-gap: 10px; }
.border-base { border: 1px solid #000; }
.border-base-gray { border: 1px solid #e0e0e0; }
.border-x-0 { border-right: 0; border-left: 0; }
.border-y-0 { border-top: 0; border-bottom: 0; }
.border-t-0 { border-top: 0 !important; }
.border-r-0 { border-right: 0 !important; }
.border-b-0 { border-bottom: 0 !important; }
.border-l-0 { border-left: 0 !important; }
.border-0 { border: 0 !important; }
.rounded-4 { border-radius: 4px; }
.rounded-5 { border-radius: 5px; }
.rounded-10 { border-radius: 10px; }
.rounded-20 { border-radius: 20px; }
.rounded-none { border-radius: 0; }
.rounded-full { border-radius: 9999px; }
.table-auto { table-layout: auto !important; }
.font-200 { font-weight: 200; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900; }
.underline { text-decoration-line: underline !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }

.txt-l { text-align:left; }
.txt-c { text-align:center; justify-content: center; }
.txt-r { text-align:right; justify-content: right; }
.fc-red { color: #f10000 !important; }
.fc-blue { color: #2d3ebd !important; }
.fc-lblue { color: #7e86c1 !important; }
.fc-green { color: #0da010 !important; }
.fc-white { color: #fff !important; }
.fc-black { color: #000 !important; }
.fc-gray-333 { color: #333 !important; }
.fc-gray-666 { color: #666 !important; }
.fc-gray-999 { color: #999 !important; }
.fc-gray-888 { color: #888 !important; }
.fc-gray-ddd { color: #ddd !important; }
.fc-gray-ccc { color: #ccc !important; }
.bg-white { background-color: #fff !important; }
.bg-black { background-color: #000 !important; }
.bg-gray-666 { background-color: #666; }
.bg-gray-999 { background-color: #999; }
.bg-gray-ddd { background-color: #ddd; }
.bg-gray-eee { background-color: #eee; }
.bg-gray-900 { background-color: #131313; }
.bg-gray-800 { background-color: #333; }
.bg-gray-700 { background-color: #666; }
.bg-gray-600 { background-color: #999; }
.bg-gray-500 { background-color: #a9a9a9; }
.bg-gray-400 { background-color: #cacaca; }
.bg-gray-300 { background-color: #e0e0e0; }
.bg-gray-200 { background-color: #e8e8e8; }
.bg-gray-100 { background-color: #f8f8f8; }
.bg-gray-50 { background-color: #fafafa; }
.bg-transparent { background-color: transparent; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.w160 { width: 160px; }
.w170 { width: 170px; }
.w180 { width: 180px; }
.w190 { width: 190px; }
.w200 { width: 200px; }
.w220 { width: 220px; }
.w240 { width: 240px; }
.w260 { width: 260px; }
.w280 { width: 280px; }
.w300 { width: 300px; }
.w350 { width: 350px; }
.w400 { width: 400px; }
.w450 { width: 450px; }
.w500 { width: 500px; }
.w550 { width: 550px; }
.w600 { width: 600px; }
.w650 { width: 650px; }
.w700 { width: 700px; }
.w750 { width: 750px; }
.w780 { width: 780px; }
.w800 { width: 800px; }
.w850 { width: 850px; }
.w900 { width: 900px; }
.h50 { height: 50px; }
.h60 { height: 60px; }
.h100 { height: 100px; }
.h200 { height: 200px; }
.h300 { height: 300px; }
.h500 { height: 500px; }
.h700 { height: 700px; }
.h800 { height: 800px; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.h-auto { height: auto; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }
.mr-0 { margin-right: 0; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-50 { margin-right: 50px; }
.mr-60 { margin-right: 60px; }
.mr-80 { margin-right: 80px; }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.ml-0 { margin-left: 0; }
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-50 { margin-left: 50px; }
.ml-60 { margin-left: 60px; }
.ml-80 { margin-left: 80px; }
.p-0 { padding: 0; }
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }
.p-60 { padding: 60px; }
.p-70 { padding: 70px; }
.p-80 { padding: 80px; }
.pt-0 { padding-top: 0; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-60 { padding-top: 60px; }
.pt-80 { padding-top: 80px; }
.pt-120 { padding-top: 120px; }
.pt-140 { padding-top: 140px; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-60 { padding-bottom: 60px; }
.pb-80 { padding-bottom: 80px; }
.pb-120 { padding-bottom: 120px; }
.pb-140 { padding-bottom: 140px; }
.pl-0 { padding-left: 0; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.px-0 { padding-right: 0; padding-left: 0; }
.px-5 { padding-right: 5px; padding-left: 5px; }
.px-10 { padding-right: 10px; padding-left: 10px; }
.px-15 { padding-right: 15px; padding-left: 15px; }
.px-20 { padding-right: 20px; padding-left: 20px; }
.px-30 { padding-right: 30px; padding-left: 30px; }
.px-40 { padding-right: 40px; padding-left: 40px; }
.px-50 { padding-right: 50px; padding-left: 50px; }
.px-60 { padding-right: 60px; padding-left: 60px; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-30 { padding-top: 30px; padding-bottom: 30px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }
.py-120 { padding-top: 120px; padding-bottom: 120px; }
.py-130 { padding-top: 130px; padding-bottom: 130px; }
.py-140 { padding-top: 140px; padding-bottom: 140px; }
.text-0 { font-size: 0; }
.text-11 { font-size: 11px; }
.text-12 { font-size: 12px; }
.text-14 { font-size: 14px; }
.text-16 { font-size: 16px; }
.text-18 { font-size: 18px; }
.text-20 { font-size: 20px; }
.text-22 { font-size: 22px; }
.text-24 { font-size: 24px; }
.text-28 { font-size: 28px; }
.text-30 { font-size: 30px; }
.text-32 { font-size: 32px; }
.text-36 { font-size: 36px; }
.text-42 { font-size: 42px; }
.text-44 { font-size: 44px; }
.text-48 { font-size: 48px; }
.text-50 { font-size: 50px; }
.text-64 { font-size: 64px; }
.text-90 { font-size: 90px; }
.leading-0	{ line-height: 0; }
.leading-21	{ line-height: 21px; }
.leading-24	{ line-height: 24px; }
.leading-27	{ line-height: 27px; }
.leading-28	{ line-height: 28px; }
.leading-30	{ line-height: 30px; }
.leading-32	{ line-height: 32px; }
.leading-33	{ line-height: 33px; }
.leading-34	{ line-height: 34px; }
.leading-36	{ line-height: 36px; }
.leading-39	{ line-height: 39px; }
.leading-42	{ line-height: 42px; }
.leading-45	{ line-height: 45px; }
.leading-48	{ line-height: 48px; }
.leading-54	{ line-height: 54px; }
.leading-63	{ line-height: 63px; }
.leading-72	{ line-height: 72px; }
.leading-75	{ line-height: 75px; }
.leading-89	{ line-height: 89px; }
.leading-96	{ line-height: 96px; }
.leading-108 { line-height: 108px; }
.leading-135 { line-height: 135px; }
.tracking-tighter { letter-spacing: -0.8px; }
.tracking-tight { letter-spacing: -0.4px; }
.whitespace-nowrap { white-space: nowrap; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-auto { z-index: auto; }
.min-h-30 { min-height: 30px; }
.max-h-30 { max-height: 30px; }
.max-w-min { max-width: min-content; }
.max-w-max { max-width: max-content; }
.max-w-fit { max-width: fit-content; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis { text-overflow: ellipsis; }
.indent-0 { text-indent: 0px; }
.indent-15 { text-indent: -15px; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.resize-none { resize: none; }
.cursor-pointer { cursor: pointer; }

.thumbnail { width:100%; background: no-repeat center; background-size: cover; }
.thumbnail.left { background: no-repeat 0 0; background-size: cover; }

:root {
    --swiper-navigation-size: 0 !important;
    --swiper-theme-color: #000 !important;
}