@import url('/css/font.css');
@import url('/css/color.css');

/* 기본 설정 */
:root { --screen-width: 100%; }
body { margin: 0; padding: 0; font-family: PretendardR; font-size: 16px; color: var(--color-gray-10); background-color: var(--color-background); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }

.container { padding-top: 0px; overflow: hidden; font-family: PretendardR; }
.wrap { margin: 0 16px; }
.division { border-top: 2px solid var(--color-gray-80); margin: 0; padding: 0; }
.division-member { border-top: 1px solid #e0e0e0; margin: 0; padding: 0; }

/* FLEX ALIGN 설정 */
.flex-center { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center; }
.flex-between { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: space-between; }
.flex-around { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: space-around; }
.flex-evenly { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: space-evenly; }
.flex-start { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: start; }
.grow-0 { flex-grow: 0; }
.grow-1 { flex-grow: 1; }
.grow-2 { flex-grow: 2; }
.grow-3 { flex-grow: 3; }
.grow-4 { flex-grow: 4; }
.grow-5 { flex-grow: 5; }
.grow-6 { flex-grow: 6; }
.grow-7 { flex-grow: 7; }
.grow-8 { flex-grow: 8; }
.grow-9 { flex-grow: 9; }

/* 상단 메뉴바 */
.navbar { justify-content: center; position: fixed; top : 0; width: 100%; overflow: hidden; z-index: 30; }
.navbar-main { background: rgba(255,255,255,0.3); box-shadow: 0 0 3px rgba(0,0,0,0.0); }
.navbar-sub { background: rgba(255,255,255,1.0); box-shadow: 0 0 3px rgba(0,0,0,0.2); }
.navbar .title { float: left; color: var(--wpdd-gray-20); text-align: center; padding: 14px 0 0 16px; text-decoration: none; }
.navbar .title img { height: 22px; }
.navbar .menu { float: right; color: var(--wpdd-gray-20); text-align: center; padding: 12px 14px 8px 14px; text-decoration: none; cursor: pointer; }
.navbar .menu img { height: 24px; }
.navbar .back { float: left; color: var(--wpdd-gray-20); text-align: center; padding: 12px 14px 8px 14px; text-decoration: none; cursor: pointer; }
.navbar .back img { height: 24px; }
.navbar .close { float: right; color: var(--wpdd-gray-20); text-align: center; padding: 12px 14px 8px 14px; text-decoration: none; cursor: pointer; }
.navbar .close img { height: 24px; }
.navbar .location { margin: 0 auto; color: var(--wpdd-gray-20); font-family: PretendardB; font-size: 18px; text-align: center; padding: 14px 0 0 16px; text-decoration: none; }
.navbar .search-box { float: auto; position: relative; color: var(--wpdd-gray-20); text-align: left; padding: 8px 16px 16px 16px; text-decoration: none; cursor: pointer; }
.navbar .search-box input { height: 45px; border-color: var(--wpdd-secondary); outline: 1px solid var(--wpdd-secondary); padding: 0 40px; }
.navbar .search-box .search-back { position: absolute; height: 20px; top: 20px; left: 26px; margin: 0; }
.navbar .search-box .search-find { position: absolute; height: 20px; top: 20px; right: 28px; margin: 0; }

/* 하단 메뉴바 */
.menu-bottom { z-index: 40; background-color: #ffffff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); width: 100%; height: 55px; position: fixed; bottom: 0; left: 0; padding: 0; margin: 0; display: flex; justify-content: space-around; list-style: none; }
.menu-bottom li { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.menu-bottom li p { font-family: PretendardR; font-size: 11px; color: #808080; margin: 2px 0 0 0; }
.menu-bottom li svg { margin: 4px 0 0 0; height: 24px; fill: #808080; }
.menu-bottom li ellipse { fill: #b0b0b0; }
.menu-bottom li.active p { color: #0d6efd; }
.menu-bottom li.active svg { fill: #0d6efd; }
.menu-bottom li.active ellipse { fill: #0d6efd; }
.menu-bottom .bottom-logo img { margin-bottom: 20px; height: 60px; border-radius: 40px;}


/* 슬라이드 메뉴 */
.sidenav { height: 100%; width: 100%; position: fixed; z-index: 40; top: 0; right: -100%; background-color: var(--color-white); overflow-x: hidden; transition: 0.4s; }
.sidenav .title { float: left; color: var(--wpdd-gray-20); font-family: PretendardM; font-size: 18px; text-align: center; padding: 14px 0 0 16px; text-decoration: none; }
.sidenav .close { color: var(--wpdd-gray-20); text-align: right; padding: 12px 14px 8px 14px; text-decoration: none; cursor: pointer; }
.sidenav .close img { height: 24px; }
.sidenav .menu { font-family: PretendardR; font-size: 17px; text-align: start; padding-left: 20px; }
.sidenav .menu a { display: block; color: #202020; text-decoration: none; }
.sidenav .menu img { position: relative; padding-right: 10px; top: 3px; width: 18px; height: 18px; }
.sidenav .menu-sub { font-family: PretendardR; font-size: 17px; text-align: start; padding-left: 16px; }
.sidenav .menu-sub a { display: block; color: #202020; text-decoration: none; }
.sidenav .menu-sub span { color: var(--wpdd-secondary); padding: 0 8px 0; }

/* 하단 팝업 시트 */
.bottompopup { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); -webkit-animation-name: bottomFadeIn; -webkit-animation-duration: 0.4s; animation-name: bottomFadeIn; animation-duration: 0.4s; }
.bottompopup .popup-frame { position: fixed; bottom: 0; background-color: #ffffff; width: 100%; max-height: 90%; overflow-y: scroll; border-radius: 15px 15px 0 0; -webkit-animation-name: bottomLineIn; -webkit-animation-duration: 0.4s; animation-name: bottomLineIn; animation-duration: 0.4s; }
.bottompopup .header { position: fixed; justify-content: center; width: 100%; padding: 16px 0; border-radius: 15px 15px 0 0; background-color: #ffffff; }
.bottompopup .header .title { float: left; padding-left: 18px; font-family: PretendardM; font-size: 18px;color: #202020; text-align: center; text-decoration: none; }
.bottompopup .header .close { float: right; padding-right: 18px; color: #202020; text-align: center; text-decoration: none; cursor: pointer; }
.bottompopup .header .close img { width: 20px; }
.bottompopup .contents { padding: 55px 16px 20px 16px; font-family: PretendardR; font-size: 16px; color: var(--wpdd-gray-20); text-align: start; }
@-webkit-keyframes bottomFadeIn { from {opacity: 0} to {opacity: 1} }
@keyframes bottomFadeIn { from {opacity: 0} to {opacity: 1} }
@-webkit-keyframes bottomLineIn { from {bottom: -100px; opacity: 0} to {bottom: 0; opacity: 1} }
@keyframes bottomLineIn { from {bottom: -100px; opacity: 0} to {bottom: 0; opacity: 1} }

/* 하단 이벤트 시트 */
.eventpopup { display: none; position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); -webkit-animation-name: eventFadeIn; -webkit-animation-duration: 0.4s; animation-name: eventFadeIn; animation-duration: 0.4s; }
.eventpopup .event-frame { position: fixed; bottom: 0; background-color: #ffffff; width: 100%; max-height: 90%; overflow-y: scroll; border-radius: 8px 8px 0 0; -webkit-animation-name: eventLineIn; -webkit-animation-duration: 0.4s; animation-name: eventLineIn; animation-duration: 0.4s; }
.eventpopup .contents { font-family: PretendardR; font-size: 16px; color: var(--wpdd-gray-20); text-align: start; padding-bottom: 50px;}
.eventpopup .bottom-noshow { position: fixed; bottom: 0px; justify-content: center; width: 100%; padding: 16px 0; background-color: #ffffff; }
.eventpopup .bottom-noshow .noshow { float: left; padding-left: 18px; font-family: PretendardM; font-size: 18px; color: #202020; text-align: center; text-decoration: none; cursor: pointer; }
.eventpopup .bottom-noshow .close { float: right; padding-right: 18px; font-family: PretendardM; font-size: 18px; color: #202020; text-align: center; text-decoration: none; cursor: pointer; }
.eventpopup .bottom-close { position: fixed; bottom: 0px; justify-content: center; width: 100%; padding: 16px 0; background-color: #ffffff; }
.eventpopup .bottom-close .noshow { float: left; padding-left: 18px; font-family: PretendardM; font-size: 18px; color: #202020; text-align: center; text-decoration: none; cursor: pointer; }
.eventpopup .bottom-close .close { float: right; padding-right: 18px; font-family: PretendardM; font-size: 18px; color: #202020; text-align: center; text-decoration: none; cursor: pointer; }
@-webkit-keyframes eventFadeIn { from {opacity: 0} to {opacity: 1} }
@keyframes eventFadeIn { from {opacity: 0} to {opacity: 1} }
@-webkit-keyframes eventLineIn { from {bottom: -100px; opacity: 0} to {bottom: 0; opacity: 1} }
@keyframes eventLineIn { from {bottom: -100px; opacity: 0} to {bottom: 0; opacity: 1} }

/* 중앙 이벤트 시트 */
.eventcenterpopup {
  /* display: none; position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); -webkit-animation-name: eventcenterFadeIn; -webkit-animation-duration: 0.4s; animation-name: eventcenterFadeIn; animation-duration: 0.4s;  */
  display: flex; /* Flexbox 활성화 */
  align-items: center; /* 수직 중앙 정렬 */
  justify-content: center; /* 수평 중앙 정렬 */
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-animation-name: eventcenterFadeIn;
  -webkit-animation-duration: 0.4s;
  animation-name: eventcenterFadeIn;
  animation-duration: 0.4s;
}
.eventcenterpopup .eventcenter-frame {
  /* display: flex; justify-content: center; background-color: #ffffff; width: 100%; max-height: 90%; overflow-y: scroll; border-radius: 8px 8px 0 0; -webkit-animation-name: eventcenterLineIn; -webkit-animation-duration: 0.4s; animation-name: eventcenterLineIn; animation-duration: 0.4s;  */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  width: 100%;
  /* max-width: 90%; */
  max-height: 100%;
  overflow-y: auto; /* scroll 대신 auto로 변경하여 내용이 넘칠 때만 스크롤바 표시 */
  border-radius: 8px; /* 하단 0 0 대신 모든 모서리 둥글게 (선택 사항) */
  position: relative; /* 애니메이션을 위해 필요할 수 있음 */
  /* 기존 bottom 애니메이션은 중앙 정렬과 맞지 않으므로 제거하거나 transform으로 변경 고려 */
  -webkit-animation-name: eventcenterLineIn; /* 애니메이션 유지 시 */
  -webkit-animation-duration: 0.4s;
  animation-name: eventcenterLineIn; /* 애니메이션 유지 시 */
  animation-duration: 0.4s;
}
.eventcenterpopup .centercontents {
  /* font-family: PretendardR; font-size: 16px; color: var(--wpdd-gray-20); text-align: start;  */
  font-family: PretendardR;
  font-size: 16px;
  color: var(--wpdd-gray-20);
  text-align: start;
  width: 100%; /* 내용을 중앙 정렬하려면 이 div의 너비를 100%로 설정 */
}
@-webkit-keyframes eventcenterFadeIn { from {opacity: 0} to {opacity: 1} }
@keyframes eventcenterFadeIn { from {opacity: 0} to {opacity: 1} }
@-webkit-keyframes eventcenterLineIn { from {bottom: -100px; opacity: 0} to {bottom: 0; opacity: 1} }
@keyframes eventcenterLineIn { from {bottom: -100px; opacity: 0} to {bottom: 0; opacity: 1} }

/* 하단 스페셜 시트 */
.specialpopup { display: none; position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); -webkit-animation-name: specialFadeIn; -webkit-animation-duration: 0.4s; animation-name: specialFadeIn; animation-duration: 0.4s; }
.specialpopup .special-frame { position: fixed; bottom: 10px; background-color: #ffffff; width: 90%; max-height: 90%; border-radius: 8px; left: 50%; transform: translateX(-50%); -webkit-animation-name: specialLineIn; -webkit-animation-duration: 0.4s; animation-name: specialLineIn; animation-duration: 0.4s; overflow: visible; }
.specialpopup .scroll-container { border-radius: 8px; max-height: 90vh; overflow-y: auto; }
.specialpopup .contents { font-family: PretendardR; font-size: 16px; color: var(--wpdd-gray-20); }
.specialpopup .logo-image { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); height: 60px; border-radius: 40px; z-index: 200; }
@-webkit-keyframes specialFadeIn { from {opacity: 0} to {opacity: 1} }
@keyframes specialFadeIn { from {opacity: 0} to {opacity: 1} }
@-webkit-keyframes specialLineIn { from {bottom: -100px; opacity: 0} to {bottom: 0; opacity: 1} }
@keyframes specialLineIn { from {bottom: -100px; opacity: 0} to {bottom: 0; opacity: 1} }

/* 구분선 설정 */
.division-f0 { border-top: 1px solid #f0f0f0; margin: 0; padding: 0; }
.division-e0 { border-top: 1px solid #e0e0e0; margin: 0; padding: 0; }

/* INPUT CHECKBOX & RADIO 설정 */
.control { display: block; position: relative; padding-left: 30px; margin-top: 10px; margin-bottom: 15px; cursor: pointer; font-size: 16px; }
.control input { position: absolute; z-index: -1; opacity: 0; }
.control-indicator { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background: var(--color-gray-d0); }
.control-indicator:after { content: ''; position: absolute; display: none; }
.control-radio .control-indicator { border-radius: 50%; }
.control-radio .control-indicator:after { left: 7px; top: 7px; height: 6px; width: 6px; border-radius: 50%; background: var(--color-white); }
.control-checkbox .control-indicator {   border-radius: 2px; }
.control-checkbox .control-indicator:after { left: 8px; top: 4px; width: 3px; height: 8px; border: solid var(--color-white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.control input:checked ~ .control-indicator { background: var(--color-main); }
.control input:checked ~ .control-indicator:after { display: block; }

/* INPUT TEXT 설정 */
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"] { height: 50px; padding: 0px 10px; box-sizing: border-box; border: 1px solid var(--color-gray-c0); border-radius: 4px; font-family: PretendardR; font-size: 16px; }
input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="time"]::placeholder { color: var(--color-gray-80); }
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus { border-color: var(--color-main); outline: 1px solid var(--color-main); }

/* TEXTAREA 설정 */
textarea {
  width: calc(100% - 24px);
  padding: 10px 10px;
  border: 1px solid var(--color-gray-c0); border-radius: 4px; font-family: PretendardR; font-size: 16px;
}
textarea::placeholder {
  color: var(--color-gray-80);
}
textarea:focus {
  border-color: var(--color-main); outline: 1px solid var(--color-main);
}

/* BUTTON 설정 */
.btn { font-family: PretendardR; font-size: 16px; color: #000000; height: 50px; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: auto; }
.btn-fill-store { background-color: #404040; font-family: PretendardR; font-size: 13px; color: #ffffff; height: 40px; border-radius: 20px; }

/* FONT FAMILY 설정 */
.ff-b { font-family: PretendardB; }
.ff-m { font-family: PretendardM; }
.ff-r { font-family: PretendardR; }
.ff-l { font-family: PretendardL; }

/* FONT SIZE 설정 */
.fs-10px { font-size: 10px; }
.fs-11px { font-size: 11px; }
.fs-12px { font-size: 12px; }
.fs-13px { font-size: 13px; }
.fs-14px { font-size: 14px; }
.fs-15px { font-size: 15px; }
.fs-16px { font-size: 16px; }
.fs-17px { font-size: 17px; }
.fs-18px { font-size: 18px; }
.fs-19px { font-size: 19px; }
.fs-20px { font-size: 20px; }
.fs-21px { font-size: 21px; }
.fs-22px { font-size: 22px; }
.fs-23px { font-size: 23px; }
.fs-24px { font-size: 24px; }
.fs-25px { font-size: 25px; }
.fs-26px { font-size: 26px; }
.fs-27px { font-size: 27px; }
.fs-28px { font-size: 28px; }
.fs-29px { font-size: 29px; }
.fs-30px { font-size: 30px; }
.fs-32px { font-size: 32px; }
.fs-34px { font-size: 34px; }
.fs-36px { font-size: 36px; }
.fs-38px { font-size: 38px; }
.fs-40px { font-size: 40px; }

/* FONT COLOR 설정 */
.fc-main { color: var(--color-blue); }
.fc-white { color: var(--color-white); }
.fc-black { color: var(--color-black); }
.fc-bw-10 { color: var(--color-gray-10); }
.fc-bw-20 { color: var(--color-gray-20); }
.fc-bw-30 { color: var(--color-gray-30); }
.fc-bw-40 { color: var(--color-gray-40); }
.fc-bw-50 { color: var(--color-gray-50); }
.fc-bw-60 { color: var(--color-gray-60); }
.fc-bw-70 { color: var(--color-gray-70); }
.fc-bw-80 { color: var(--color-gray-80); }
.fc-bw-90 { color: var(--color-gray-90); }
.fc-bw-a0 { color: var(--color-gray-a0); }
.fc-bw-b0 { color: var(--color-gray-b0); }
.fc-bw-c0 { color: var(--color-gray-c0); }
.fc-bw-d0 { color: var(--color-gray-d0); }
.fc-bw-e0 { color: var(--color-gray-e0); }
.fc-bw-f0 { color: var(--color-gray-f0); }

/* BACKGROUND COLOR 설정 */
.bgcolor-main { background-color: var(--color-main); }
.bgcolor-white { background-color: var(--color-white); }
.bgcolor-black { background-color: var(--color-black); }
.bgcolor-red { background-color: var(--color-red); }
.bgcolor-bw-10 { background-color: var(--color-gray-10); }
.bgcolor-bw-20 { background-color: var(--color-gray-20); }
.bgcolor-bw-30 { background-color: var(--color-gray-30); }
.bgcolor-bw-40 { background-color: var(--color-gray-40); }
.bgcolor-bw-50 { background-color: var(--color-gray-50); }
.bgcolor-bw-60 { background-color: var(--color-gray-60); }
.bgcolor-bw-70 { background-color: var(--color-gray-70); }
.bgcolor-bw-80 { background-color: var(--color-gray-80); }
.bgcolor-bw-90 { background-color: var(--color-gray-90); }
.bgcolor-bw-a0 { background-color: var(--color-gray-a0); }
.bgcolor-bw-b0 { background-color: var(--color-gray-b0); }
.bgcolor-bw-c0 { background-color: var(--color-gray-c0); }
.bgcolor-bw-d0 { background-color: var(--color-gray-d0); }
.bgcolor-bw-e0 { background-color: var(--color-gray-e0); }
.bgcolor-bw-f0 { background-color: var(--color-gray-f0); }

/* WIDTH 설정 */
.w-10pt { width: 10%; }
.w-12pt { width: 12%; }
.w-14pt { width: 14%; }
.w-15pt { width: 15%; }
.w-20pt { width: 20%; }
.w-22pt { width: 22%; }
.w-25pt { width: 25%; }
.w-30pt { width: 30%; }
.w-40pt { width: 40%; }
.w-45pt { width: 45%; }
.w-48pt { width: 48%; }
.w-50pt { width: 50%; }
.w-60pt { width: 60%; }
.w-65pt { width: 65%; }
.w-70pt { width: 70%; }
.w-80pt { width: 80%; }
.w-90pt { width: 90%; }
.w-100pt { width: 100%; }
.w-50px { width: 50px; }
.w-45px { width: 45px; }
.w-40px { width: 40px; }
.w-68px { width: 68px; }
.w-28px { width: 28px; }

/* TOP 설정 */
.t-0px { top: 0px; }
.t-1px { top: 1px; }
.t-2px { top: 2px; }
.t-3px { top: 3px; }
.t-4px { top: 4px; }
.t-5px { top: 5px; }
.t-6px { top: 6px; }
.t-7px { top: 7px; }
.t-8px { top: 8px; }
.t-9px { top: 9px; }
.t-10px { top: 10px; }

/* MARGIN 설정 */
.mt-0px { margin-top: 0px !important; margin-bottom: 0; }
.mt-2px { margin-top: 2px !important; margin-bottom: 0; }
.mt-4px { margin-top: 4px !important; margin-bottom: 0; }
.mt-5px { margin-top: 5px !important; margin-bottom: 0; }
.mt-6px { margin-top: 6px !important; margin-bottom: 0; }
.mt-8px { margin-top: 8px !important; margin-bottom: 0; }
.mt-10px { margin-top: 10px !important; margin-bottom: 0; }
.mt-12px { margin-top: 12px !important; margin-bottom: 0; }
.mt-15px { margin-top: 15px !important; margin-bottom: 0; }
.mt-20px { margin-top: 20px !important; margin-bottom: 0; }
.mt-25px { margin-top: 25px !important; margin-bottom: 0; }
.mt-30px { margin-top: 30px !important; margin-bottom: 0; }
.mt-40px { margin-top: 40px !important; margin-bottom: 0; }
.mt-50px { margin-top: 50px !important; margin-bottom: 0; }
.mt-60px { margin-top: 60px !important; margin-bottom: 0; }
.mt-70px { margin-top: 70px !important; margin-bottom: 0; }
.mt-80px { margin-top: 80px !important; margin-bottom: 0; }
.mt-100px { margin-top: 100px !important; margin-bottom: 0; }
.mt-120px { margin-top: 120px !important; margin-bottom: 0; }
.mt-140px { margin-top: 140px !important; margin-bottom: 0; }
.mt-160px { margin-top: 160px !important; margin-bottom: 0; }
.mt-180px { margin-top: 180px !important; margin-bottom: 0; }
.mb-6px { margin-bottom: 6px !important; margin-top: 0; }
.mb-10px { margin-bottom: 10px !important; margin-top: 0; }
.mb-15px { margin-bottom: 15px !important; margin-top: 0; }
.mb-20px { margin-bottom: 20px !important; margin-top: 0; }
.mb-25px { margin-bottom: 25px !important; margin-top: 0; }
.mb-30px { margin-bottom: 30px !important; margin-top: 0; }
.mb-40px { margin-bottom: 40px !important; margin-top: 0; }
.mb-50px { margin-bottom: 50px !important; margin-top: 0; }
.mb-60px { margin-bottom: 60px !important; margin-top: 0; }
.mb-70px { margin-bottom: 70px !important; margin-top: 0; }
.mb-80px { margin-bottom: 80px !important; margin-top: 0; }
.mb-90px { margin-bottom: 90px !important; margin-top: 0; }
.mb-100px { margin-bottom: 100px !important; margin-top: 0; }
.mb-120px { margin-bottom: 120px !important; margin-top: 0; }
.mb-140px { margin-bottom: 140px !important; margin-top: 0; }
.mb-160px { margin-bottom: 160px !important; margin-top: 0; }
.mb-180px { margin-bottom: 180px !important; margin-top: 0; }
.ml-0px { margin-left: 0px !important; margin-right: 0; }
.ml-5px { margin-left: 5px !important; margin-right: 0; }
.ml-8px { margin-left: 8px !important; margin-right: 0; }
.ml-12px { margin-left: 12px !important; margin-right: 0; }
.ml-16px { margin-left: 16px !important; margin-right: 0; }
.ml-32px { margin-left: 32px !important; margin-right: 0; }
.mr-5px { margin-right: 5px !important; margin-left: 0; }
.mr-16px { margin-right: 16px !important; margin-left: 0; }
.mr-32px { margin-right: 32px !important; margin-left: 0; }


/* PADDING 설정 */
.pt-4px { padding-top: 4px; }
.pt-6px { padding-top: 6px; }
.pt-8px { padding-top: 8px; }
.pt-10px { padding-top: 10px; }
.pt-20px { padding-top: 20px; }
.pt-30px { padding-top: 30px; }
.pt-40px { padding-top: 40px; }
.pt-50px { padding-top: 50px; }
.pt-60px { padding-top: 60px; }
.pt-70px { padding-top: 70px; }
.pt-80px { padding-top: 80px; }
.pb-8px { padding-bottom: 8px !important; }
.pb-10px { padding-bottom: 10px !important; }
.pb-12px { padding-bottom: 12px !important; }
.pb-15px { padding-bottom: 15px !important; }
.pb-20px { padding-bottom: 20px !important; }
.pb-30px { padding-bottom: 30px !important; }
.pb-40px { padding-bottom: 40px !important; }
.pb-50px { padding-bottom: 50px !important; }
.pb-60px { padding-bottom: 60px !important; }
.pb-70px { padding-bottom: 70px !important; }
.pb-80px { padding-bottom: 80px !important; }
.pr-8px { padding-right: 8px !important; }
.pr-20px { padding-right: 20px !important; }
.pl-8px { padding-left: 8px !important; }
.pl-20px { padding-left: 20px !important; }