@charset "utf-8";
:root {
  --primary-color: #FB5E14;
  --color-01: #0E1F3E;
  --color-02: #798AA2;
  --color-03: #F5F6FA;
  --color-04: #2563EB;
  --color-05: #FF0000;
  --color-06: #FFF7F3;
  --color-07: #EEEFF1;
  --color-08: #94A3B8;
  --color-09: #FFEFE7;

  --color-static-white: #fff;
  --color-static-black: #000;
  
  --shadow: 0 0 6px rgba(0,0,0,0.1);
  --filter-white: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(326deg) brightness(108%) contrast(101%);
  --filter-gray: brightness(0) saturate(100%) invert(78%) sepia(17%) saturate(370%) hue-rotate(175deg) brightness(82%) contrast(82%);
}

body, h1, h2, h3, h4, h5, h6, b, table, th, tr, td, strong, footer, div, input, button, select, textarea, label, dd, dl, dt{
  font-family: "Pretendard";
  font-weight: 300;
  letter-spacing: -0.5px;
  color: var(--color-01);
}
body{
  overflow-x: hidden;
}
*::placeholder{
  color: var(--color-gray-400);
  font-family: "Pretendard";
  letter-spacing: -0.5px;
}
.no_scroll {
  overflow: hidden;
}
.en{
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.wrap, .index_wrap{
  max-width: 1800px;
  width: 100%;
  padding: 0 50px;
  margin: 0 auto;
}
.letter_spa_0{
  letter-spacing: 0;
}

/* s: 공통모달 */
.modal_popup{
  display: none;
  width: 100%;
  min-height: 100%;
  position: fixed;
  inset: 0;
  background-color: var(--color-black-opa-50);
  overflow: hidden;
  z-index: 99999;
}
.modal_wrap {
  min-height: 100px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  opacity: 0;
  border-radius: 30px;
  background: var(--color-static-white);
  padding: 10px 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.modal_popup.active .modal_wrap{
  transform: translate(-50%, -50%);
  opacity: 1;
}
.modal_wrap_sm {
  max-width: 320px;
  width: 90%;
}
.modal_wrap_md {
  max-width: 400px;
  width: 90%;
}
.modal_scroll {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal_icon{
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--primary-color);
  border: 5px solid var(--color-static-white);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
}
.modal_icon>img{
  width: 40px;
}
.modal_content{
  padding: 34px 26px 14px;
}
.modal_content .modal_title{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 14px;
}
.modal_content .title_icon{
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.modal_content .title_icon img{
  width: 24px;
}
.modal_content .modal_p{
  font-size: 15px;
  white-space: pre-wrap;
  margin-bottom: 16px;
}
.modal_img{
  max-width: 200px;
  border-radius: 10px;
}
.modal_button div{
  cursor: pointer;
}
.modal_button.two{
  display: flex;
  justify-content: center;
  column-gap: 14px;
  padding: 0 10px;
}
.modal_button .btn_main_gra{
  width: 100%;
  background: var(--primary-color);
  color: var(--color-static-white);
  font-size: 17px;
  padding: 12px;
  border-radius: 10px;
  font-weight: 500;
}
.modal_button .btn_gray{
  width: 100%;
  background: var(--color-07);
  font-size: 17px;
  padding: 12px;
  border-radius: 10px;
  font-weight: 500;
}
.modal_button .btn_navy{
  background-color: var(--color-01);
  color: var(--color-static-white);
  border-radius: 10px;
  font-weight: 500;
}
.modal_button .btn_x_small{
  padding: 8px 0;
  max-width: 90px;
  margin: 0 auto;
}
.modal_button .btn_small{
  padding: 11px 0;
  max-width: 160px;
  margin: 0 auto;
}
/* e: 공통모달 */


/* s: index */
.index_bg{
  width: 35vw;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  background: url('../img/img_bg_01.jpg') no-repeat;
  background-position: right;
  background-size: cover;
  z-index: -1;
  transition: width 0.3s;
}
.index_logo{
  width: 160px;
  position: fixed;
  top: 30px;
  left: 50px;
  transition: all 0.5s;
}
.index_logo img{
  transition: filter 0.8s ease;
}
.index_wrap {
  margin: 20vh 0 0 100px;
  transition: margin 0.8s;
}
.index_tt{
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-size: clamp(30px, 10vw, 100px);
  line-height: 0.95;
  transition: color 0.5s;
}
.index_tt span{
  font-weight: 500;
}
.index_sub_tt{
  margin: 10px 0 100px;
  font-size: clamp(15px, 3vw, 20px);
  transition: color 0.5s;
}
.index_sub_tt span{
  font-weight: 700;
}
.btn_hover button {
  font-family: 'Pretendard';
  padding: 12px 80px;
  font-size: 20px;
  border-radius: 10px;
  background: var(--primary-color);
  --duration: .5s;
  --move-hover: -3px;
  --shadow-hover: 0 4px 20px -2px rgba(0, 0, 0, 0.25);
  display: block;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}
.btn_hover button div {
  font-weight: 500;
  display: flex;
  justify-content: center;
  color: var(--color-static-white);
}
.btn_hover button div span {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-style: normal;
}
.btn_hover button div span:nth-child(1) {
  --d: 0.05s;
}
.btn_hover button div span:nth-child(2) {
  --d: 0.1s;
}
.btn_hover button div span:nth-child(3) {
  --d: 0.15s;
}
.btn_hover button div span:nth-child(4) {
  --d: 0.2s;
}
.btn_hover button div span:nth-child(5) {
  --d: 0.25s;
}
.btn_hover button div span:nth-child(6) {
  --d: 0.3s;
}
.btn_hover button div span:nth-child(7) {
  --d: 0.35s;
}
.btn_hover button div span:nth-child(8) {
  --d: 0.4s;
}
.btn_hover button div span:nth-child(9) {
  --d: 0.45s;
}
.btn_hover button:hover {
  --y: var(--move-hover);
  --shadow: var(--shadow-hover);
  --move: -6px;
  --shadow-active: 0 3px 1px rgba(0, 0, 0, .2);
}
.btn_hover button:hover span {
  -webkit-animation: move var(--duration) linear var(--d);
  animation: move var(--duration) linear var(--d);
}
/* e: index */

/* s: login */
.login_bg{
  opacity: 0.2;
}
.login_bg::before{
  position: fixed;
  content: '';
  width: 35vw;
  height: 100vh;
  top: 0;
  right: 0;
  background: rgba(14, 31, 62, 0.1);
}
.login_wrap{
  width: 100%;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
}
.login_logo{
  text-align: center;
  margin-bottom: 18px;
}
.login_logo img{
  width: 120px;
  margin: 0 auto;
}
.login_form{
  padding: 50px 60px;
  max-width: 460px;
  width: 86%;
  margin: 0 auto;
  border: 1px solid #eee;
  background: var(--color-static-white);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10);
}
.form_group label{
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}
.input_form{
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  font-size: 15px;
}
.input_form.wrong{
  border: 0.6px solid var(--color-05);
}
/* s: checks */
.checkbox {
  position: relative;
  display: block;
  cursor: pointer;
}
.checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.checkbox .label {
  display: block;
  position: relative;
  line-height: 20px;
  padding: 0 0 0 30px;
  font-size: 15px;
}
.checkbox input + .label:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  border-radius: 2px;
  background-color: var(--color-static-white);
  border: 1px solid var(--color-gray-200);
  width: 20px;
  height: 20px;
}
.checkbox input:checked + .label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
  background-color: var(--primary-color);
  background-image: url("../img/icon_check.svg");
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}
/* e: checks */
.login_form .btn_hover button{
  margin: 0 auto;
}
.validation{
  text-align: center;
  color: var(--color-05);
  animation: shake 0.2s ease 3;
  font-size: 14px;
  position: absolute;
  top: 34px;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}
/* e: login */

/* s: dashborad */
.bg_body{
  background: var(--color-03);
}
header{
  max-width: 1760px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  padding: 20px 30px;
  justify-content: space-between;
}
.header_nav{
  display: flex;
  width: calc(100% - 76px);
  background: var(--color-static-white);
  padding: 0 24px;
  border-radius: 100px;
  column-gap: 40px;
  align-items: center;
  box-shadow: var(--shadow);
}
.header_nav .logo{
  font-size: 0;
  width: 96px;
  cursor: pointer;
}
.header_nav nav ul{
  display: flex;
  align-items: center;
  column-gap: 30px;
  color: var(--color-02);
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
}
.header_nav nav ul li.on{
  color: var(--primary-color);
}
.header_nav nav ul li:hover{
  color: var(--primary-color);
  transition: color 0.3s;
}
.header_right{
  display: flex;
}
.header_right div{
  width: 56px;
  aspect-ratio: 1/1 !important;
  background: var(--color-static-white);
  border-radius: 100px;
  box-shadow: var(--shadow);
  position: relative;
  cursor: pointer;
}
.header_right div img{
  width: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn_burger{
  display: none;
  position: relative;
}
.btn_burger span{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 19px;
  height: 2.2px;
  background: var(--color-02);
  transition: all 0.3s ease;
  border-radius: 10px;
}
.btn_burger span:nth-child(1){
  top: 15px;
}
.btn_burger span:nth-child(2){
  top: 50%;
  transform: translate(-50%, -50%);
}
.btn_burger span:nth-child(3){
  bottom: 15px;
}
.btn_burger.on span:nth-child(1){
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn_burger.on span:nth-child(2){
  opacity: 0;
}
.btn_burger.on span:nth-child(3){
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.btn_logout{
  position: relative;
}
.btn_logout:hover span{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
}
.btn_logout span{
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -32px;
  white-space: nowrap;
  font-size: 13px;
  background-color: var(--color-black-opa-50);
  padding: 4px 8px;
  color: var(--color-static-white);
  border-radius: 4px;
}
main{
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 10px;
  flex-wrap: wrap;
  row-gap: 20px;
}
.breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2px;
  margin-bottom: 4px;
}
.breadcrumb .arrow{
  width: 30px;
  transform: rotate(-90deg);
  filter: var(--filter-gray)
}
.breadcrumb .title{
  font-size: 30px;
  font-weight: 600;
  color: #94A3B8;
}
.breadcrumb .title:last-of-type{
  color: var(--color-01);
}
main .sub_tt{
  font-size: 14px;
  color: var(--color-02);
}
.btn_down, .btn_gift{
  background: var(--color-01);
  color: var(--color-static-white);
  display: flex;
  align-items: center;
  padding: 6px 12px;
  column-gap: 4px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.5s;
}
.btn_down:hover, .btn_gift:hover{
  transform: translateY(-2px);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
.btn_down img{
  width: 20px;
}
.main_section_wrap{
  min-height: calc(100vh - 146px);
}
.card_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 20px;
}
.card_area .card{
  box-shadow: var(--shadow);
  background: var(--color-static-white);
  border-radius: 18px;
  padding: 20px 0;
}
.card.sm{
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.card.pa{
  padding: 20px 30px;
}
.card_04_12_12, .card_04_06_12{
  width: 32%;
  transition: width 0.5s;
}
.card_08_06_12{
  width: 66%;
  transition: width 0.5s;
}
.card_12_12_12{
  width: 100%;
  transition: width 0.5s;
}
.card .icon img{
  width: 22px;
}
.card .icon, .card .m_icon{
  background: var(--color-01);
  display: inline-block;
  font-size: 0;
}
.card .icon{
  padding: 8px;
  border-radius: 10px;
}
.card .icon.grey, .card .m_icon.grey{
  background: var(--color-02);
}
.card .icon.blue, .card .m_icon.blue{
  background: var(--color-04);
}
.card .icon.red, .card .m_icon.red{
  background: var(--color-05);
}
.card .m_icon{
  display: none;
  padding: 5px;
  border-radius: 12px;
}
.card.line{
  position: relative;
  overflow: hidden;
}
.card.line::before{
  content: '';
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--color-02);
}
.card.line.blue::before{
  background: var(--color-04);
}
.card.line.red::before{
  background: var(--color-05);
}
.card.line.on::before{
  background: var(--primary-color);
}
.card .m_icon img{
  width: 12px;
}
.card .tt_num{
  width: 100%;
}
.card .tt_wrap{
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-bottom: 2px;
}
.card .tt_wrap .tt{
  font-size: 14px;
  font-weight: 500;
  color: var(--color-02);
}
.card .num_wrap{
  display: flex;
  column-gap: 4px;
  align-items: baseline;
}
.card .num_wrap .num{
  font-size: 32px;
  font-weight: 700;
}
.card .num_wrap .gb{
  font-size: 14px;
}
.card .card_tt{
  font-size: 22px;
  font-weight: 600;
}
.card .sub_tt, .title_area .sub_tt{
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-02);
  display: flex;
  column-gap: 5px;
}
.card .sub_tt img, .title_area .sub_tt img{
  width: 18px;
}
.card .legned_area ul{
  display: flex;
  font-size: 13px;
  column-gap: 20px;
}
.card .legned_area ul li{
  position: relative;
  padding-left: 16px;
}
.card .legned_area ul li::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background: var(--color-01);
}
.card .legned_area ul li:first-of-type::before{
  background: var(--primary-color);
}
.card .top{
  padding: 0 30px 16px;
  display: flex;
  justify-content: space-between;
  row-gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}
.tab_area{
  position: relative;
  display: flex;
  background: #EAECF5;
  padding: 4px;
  border-radius: 8px;
}
.tab_area div{
  flex: 1;
  text-align: center;
  color: var(--color-02);
  font-weight: 500;
  padding: 6px 20px;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.tab_area div.active{
  color: var(--color-01);
}
.tab_indicator{
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc(50% - 4px);
  background: var(--color-static-white);
  border-radius: 6px;
  transition: left 0.3s ease;
  z-index: 1;
}
.card .graph{
  min-height: 300px;
}
/* table */
.table_wrap{
  /* max-height: 480px; */
  overflow: auto;
}
.table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  white-space: nowrap;
}
table caption{
  font-size: 0;
}
.table th,
.table td {
  color: var(--color-01);
  text-align: center;
  padding: 10px 16px;
}
.table th, .table th div{
  background-color: var(--color-03);
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 10;
  vertical-align: middle;
}
.table tr td{
  vertical-align: middle;
  border-top: 1px solid var(--color-07);
  font-size: 15px;
}
.table tr:last-child td{
  border-bottom: 1px solid var(--color-07);
}
.table tr{
  background-color: var(--color-static-white);
}
.table tbody tr td:last-child{
  border-right: 0;
}
/* scrollbar */
.table_wrap::-webkit-scrollbar {
  width: 6px;
}
.table_wrap::-webkit-scrollbar:horizontal {
  height: 6px;
}
.table_wrap::-webkit-scrollbar-thumb {
  background-color: rgba(149, 149, 149, 0.2);
  border-radius: 10px;
}
.table_wrap::-webkit-scrollbar-track {
  background-color: rgba(106, 106, 106, 0);
}
.table_hover tbody tr{
  position: relative;
  transition: all 0.3s ease-in-out;
}
.table_hover tbody tr::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  opacity: 0;
  background: var(--primary-color);
  transition: all 0.4s;
}
.table_hover tbody tr:hover{
  background: var(--color-06);
}
.table_hover tbody tr:hover::after{
  width: 4px;
  opacity: 1;
}
.table .align{
  display: flex;
  align-items: center;
  justify-content: center;
}
.table .align figure{
  width: 16px;
  border-radius: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-static-white);
  margin-left: 4px;
  border: 1px solid var(--color-07);
  cursor: pointer;
  transition: all .3s;
}
.table .align figure.active{
  transform: rotate(180deg);
}
.table tr td .thumnail, .card .thumnail{
  width: 50px;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 1px solid var(--color-07);
}
.content_title {
  text-align: left !important;
}
.content_title div, .btn_view_more{
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding-right: 26px;
}
.content_title div::before, .btn_view_more::before{
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  background: var(--color-01);
}
.content_title div::after, .btn_view_more::after{
  content: '';
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  aspect-ratio: 1 / 1;
  background: url('../img/icon_arrow_right.svg');
  background-position: center;
  transition: all 0.3s;
}
.content_title div:hover::after, .btn_view_more:hover::after{
  right: 0px;
  transition: all 0.3s;
}
.btn_view_more_area{
  padding-top: 20px;
  text-align: center;
}
.btn_view_more{
  font-weight: 500;
  font-size: 14px;
}
/* e: dashborad */

/* s: footer */
footer{
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid var(--color-07);
}
footer p{
  color: var(--color-02);
  font-size: 14px;
}
/* e: footer */

/* s: pagination */
.pagination {
  display: flex;
  font-size: 15px;
  justify-content: center;
  margin-top: 20px;
}
.pagination ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.pagination li {
  display: inline-block;
  color: var(--color-static-black);
  cursor: pointer;
}
.pagination li {
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
}
.pagination li.is-active {
  background-color: var(--primary-color);
  border-radius: 100%;
  color: var(--color-static-white);
  font-weight: 600;
}
.pagination .pagi_arrow {
  color: transparent;
}
.pagination .prev {
  background: url('../img/icon_arrow_down.svg') no-repeat center;
  transform: rotate(90deg);
}
.pagination .next {
  background: url('../img/icon_arrow_down.svg') no-repeat center;
  transform: rotate(-90deg);
}
/* e: pagination */

/* s: rewards */
.gift_left_area{
  background: var(--color-static-white);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  border-radius: 100px;
  display: flex;
  color: var(--color-02);
  column-gap: 22px;
  row-gap: 12px;
  font-size: 14px;
  flex-wrap: wrap;
}
.gift_left_area p{
  font-weight: 500;
  position: relative;
  margin-right: 10px;
}
.gift_left_area p::after{
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: -10px;
  width: 2px;
  height: 100%;
  background: var(--primary-color);
}
.gift_left_area div span{
  font-weight: 500;
  color: var(--primary-color);
}
.filter_wrap{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.filter{
  display: flex;
  column-gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  height: fit-content;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.filter_up{
  width: 0;
  box-shadow: none;
  padding: 0;
  justify-content: left;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0;
}
.filter_wrap.is_open .filter_up{
  width: 100%;
  height: fit-content;
  opacity: 1;
}
.filter_wrap.is_open .filter{
  width: 0;
  overflow: hidden;
  height: 0;
  opacity: 0;
  margin: 0;
  position: absolute;
}
.filter .tt{
  font-size: 14px;
  font-weight: 500;
  color: var(--color-02);
  margin-bottom: 6px;
}
.filter .input_form{
  max-width: 140px;
  padding: 8px 12px;
  background-color: var(--color-03);
  border: 0;
}
/* s: datepicker */
.datepicker {
  position: relative;
}
.datepicker::after{
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: url('../img/icon_calendar.svg') no-repeat center;
  filter: var(--filter-gray);
  pointer-events: none;
}
.ui-widget.ui-widget-content {
  border: 0;
}
.ui-datepicker {
  width: 250px;
  box-shadow: var(--shadow);
  border: 0;
  background-color: var(--color-static-white);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 5px;
  padding: 0 5px;
  z-index: 1200 !important;
  display: none;
}
.ui-datepicker table {
  width: 100%;
  height: 200px;
  margin: 7px 0;
  font-size: .9em;
  border-collapse: collapse;
}
.ui-datepicker .ui-datepicker-header {
  background: var(--primary-color);
  margin: 0 -5px;
  text-align: center;
  display: flex;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
  display: flex;
  color: var(--color-static-white);
  font-size: 18px;
  font-weight: normal;
  line-height: 46px;
  height: 46px;
}
.ui-datepicker .ui-datepicker-title {
  margin: auto;
  text-align: center;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
  color: var(--color-static-white);
  font-size: 18px;
  margin: 0;
  padding: 0;
  min-width: auto;
  width: auto;
  cursor: pointer;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title select option {
  color: var(--color-static-black);
  font-weight: normal;
  font-size: 13px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title select.ui-datepicker-month {
  margin-left: 6px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 0;
  left: 0;
  border: 0;
  cursor: pointer;
  width: 35px;
  height: 46px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
  background: url('../img/icon_arrow_down.svg') 50% 50% no-repeat;
  filter: var(--filter-white);
  transform: rotate(90deg);
  display: flex;
  height: 100%;
  font-size: 0;
}
.ui-datepicker .ui-datepicker-next .ui-icon {
  background: url('../img/icon_arrow_down.svg') 50% 50% no-repeat;
  filter: var(--filter-white);
  transform: rotate(-90deg);
  display: flex;
  height: 100%;
  font-size: 0;
}
.ui-datepicker .ui-datepicker-next {
  left: auto;
  right: 0;
}
.ui-datepicker th {
  font-weight: 500;
  padding: 7px 0 4px;
}
.ui-datepicker th span {
  color: rgba(0, 0, 0, 0.3);
  font-size: 14px;
}
.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-decoration: none;
  line-height: 26px;
  border-radius: 50%;
}
.ui-datepicker td span,
.ui-datepicker td a:hover {
  background-color: var(--color-06);
  transition: all .3s;
}
.ui-datepicker td {
  border: 0;
  padding: 1px;
  vertical-align: middle;
}
.ui-state-default.ui-state-highlight {
  border: 1px solid var(--primary-color);
}
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-widget-content .ui-state-active {
  background-color: var(--color-06);
  border: 1px solid var(--primary-color);
  border-radius: 50%;
}
.ui-datepicker .mtz-monthpicker,
.ui-datepicker .ui-state-default {
  font-size: 13px;
  color: var(--color-static-black);
  text-align: center;
}
.ui-datepicker .ui-datepicker-buttonpane {
  display: flex;
  border: 0;
  justify-content: space-between;
  padding: 0 10px 0 10px;
}
.ui-datepicker-year,
.ui-datepicker-month {
  outline: none;
}
.ui-datepicker .ui-datepicker-buttonpane button,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  display: inline-block;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 27px;
  font-size: 0;
  font-weight: normal;
  padding: 2px 15px 2px 15px;
  margin: 0 0 13px;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  background-color: var(--primary-light-color);
  color: var(--primary-color);
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:before {
  content: "오늘";
  color: var(--primary-color);
}
.ui-datepicker .ui-datepicker-buttonpane button:before {
  content: "확인";
  font-size: 13px;
  color: #fff;
}
/* e:datepicker */
.filter_btn_wrap{
  display: flex;
  column-gap: 10px;
}
.filter_btn_wrap .btn_reset, .filter_btn_wrap .btn_up{
  cursor: pointer;
  background-color: var(--color-03);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}
.filter_btn_wrap .btn_reset:hover, .filter_btn_wrap .btn_up:hover{
  background: rgba(230, 230, 230, 1);
  transition: all 0.3s;
}
.filter_btn_wrap div img{
  width: 18px;
}
.btn_hover .btn_search{
  padding: 7px 30px;
  font-size: 15px;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(251, 94, 20, 0.35);
}
.card .total{
  font-weight: 400;
  font-size: 15px;
}
.card .total span{
  font-weight: 500;
  font-size: 18px;
  color: var(--primary-color);
}
.down_tab{
  display: flex;
  column-gap: 10px;
}
.tab_area.view .tab_indicator{
  background: var(--color-01);
}
.tab_area.view div{
  font-size: 0;
  padding: 2px 4px;
}
.tab_area.view div img{
  width: 24px;
  filter: var(--filter-gray);
}
.tab_area.view .active img{
  filter: var(--filter-white);
}
.table_wrap.badge .badge div, .grid_area .badge div{
  position: relative;
  display: inline-block;
  padding-left: 12px;
}
.table_wrap.badge .badge div::before, .grid_area .badge div::before{
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 100%;
  background-color: var(--color-02);
}
.grid_area .badge.on div::before{
  background-color: var(--primary-color);
  color: var(--primary-color);
}
.grid_area .badge div{
  font-size: 15px;
  color: var(--color-02);
}
.grid_area .badge.on div{
  color: var(--primary-color);
}
.table_wrap.badge .badge.on div::before{
  background-color: var(--primary-color);
}
.table_wrap.button .button div, .grid_area .card_contents .button{
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  background: var(--color-03);
  padding: 3px 10px;
  border-radius: 4px;
  color: var(--color-02);
}
.table_wrap.button .button.on div, .grid_area .card .button.on{
  background: var(--color-static-white);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.table_wrap.button .button.auto div, .grid_area .card .button.auto{
  background: var(--color-01);
  color: var(--color-static-white);
}
.table_wrap.button .button.wrong div, .grid_area .card .button.wrong{
  background: var(--color-05);
  color: var(--color-static-white);
}
.tab_con {
  display: none;
}
.tab_con.active {
  display: block;
}
.grid_area{
  padding: 0 30px;
  justify-content: normal;
  column-gap: 2%;
}
.grid_area .card{
  padding: 12px 14px;
  border: 2px solid var(--color-03);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.grid_area .card_top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.grid_area .card_top>div{
  display: flex;
  gap: 6px;
  align-items: start;
}
.grid_area .card_top .num{
  padding: 1px 10px;
  background: var(--color-03);
  font-size: 15px;
  border-radius: 4px;
}
.grid_area .card_top .stamp{
  font-size: 15px;
  font-weight: 600;
}
.grid_area .card.on .card_top .num{
  background-color: var(--color-09);
  color: var(--primary-color);
}
.grid_area .card_top .date{
  font-size: 14px;
  color: var(--color-08);
  letter-spacing: 0;
  text-align: right;
  margin: 0 0 0 auto;
}
.grid_area .card_contents .w_d_flex{
  display: flex;
  align-items: center;
  gap: 10px;
}
.grid_area .card_contents .img_p{
  display: flex;
  column-gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
}
.grid_area .card_contents .img_p img{
  min-width: 16px;
  width: 16px;
  filter: var(--filter-gray);
}
.grid_area .card_contents .img_p div{
  display: flex;
  flex-wrap: wrap;
}
.grid_area .card_contents .img_p_other{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grid_area .card.on{
  border: 2px solid var(--color-09);
}
/* e: rewards */

/* s: receipts */
.datapicker_wrap{
  display: flex;
  align-items: center;
}
/* s: Custom Select */
.custom_select_wrapper {
  width: 100%;
  position: relative;
  display: inline-block;
  user-select: none;
}
.custom_select_wrapper select {
  display: none;
}
.custom_select {
  position: relative;
  display: inline-block;
}
.custom_select_trigger {
  white-space: nowrap;
  position: relative;
  display: block;
  font-size: 15px;
  padding: 8px 32px 8px 12px;
  color: var(--color-static-black);
  background: var(--color-03);
  border-radius: 6px;
  cursor: pointer;
  min-width: 140px;
}
.custom_select_trigger:after {
  position: absolute;
  display: block;
  content: '';
  width: 8px; 
  height: 8px;
  top: 45%; 
  right: 16px;
  border-bottom: 1.5px solid var(--color-02);
  border-right: 1.5px solid var(--color-02);
  transform: rotate(45deg) translateY(-50%);
  transition: all .4s ease-in-out;
  transform-origin: 50% 0;
}
.custom_select.opened .custom_select_trigger:after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}
.custom_options {
  position: absolute;
  padding: 3px;
  display: block;
  font-size: 14px;
  top: 100%; left: 0; right: 0;
  min-width: 100%;
  max-height: 180px;
  overflow: auto;
  margin: 8px 0;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1px solid var(--color-02);
  background: var(--color-static-white);
  transition: all .4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-15px);
  z-index: 1;
}
.custom_options::-webkit-scrollbar-button:vertical:start:decrement, 
.custom_options::-webkit-scrollbar-button:vertical:end:decrement{
  display: block;
  height: 5px;
}
.custom_options::-webkit-scrollbar {
  background-color: transparent;
  width: 6px;
}
.custom_options::-webkit-scrollbar-track {
  background-color: transparent;
}
.custom_options::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.custom_options::-webkit-scrollbar-button {
  width: 100%;
  height: 5px;
}
.custom_select.opened .custom_options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}
.custom_option {
  position: relative;
  display: block;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: all .25s ease-in-out;
}
.custom_option:hover {
  background: var(--color-03);
}
/* e: Custom Select */
.select.ma{
  margin-bottom: 6px;
}
.no_border .custom_select_trigger {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 0 20px 0 0;
  color: var(--color-02);
  background: var(--color-input-main);
  border-radius: 10px;
  cursor: pointer;
}
.no_border .custom_select_trigger:after {
  width: 6px; 
  height: 6px;
  right: 0;
}
.no_border .custom_options {
  min-width: 74px;
  position: absolute;
  white-space: nowrap;
  color: var(--color-02);
  padding: 2px;
  background: var(--color-static-white);
}
.no_border .custom_option {
  padding: 3px 8px;
  cursor: pointer;
  transition: all .25s ease-in-out;
}
.receipt_detail_wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
}
.receipt_img img{
  max-width: 300px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.receipt_detail_box{
  max-width: 1000px;
  width: calc(70%);
}
.receipt_detail_box>div{
  width: 31%;
  position: relative;
}
.receipt_detail_box>div.w_2{
  width: 63.5%;
}
.receipt_detail_box .input_form{
  max-width: 100%;
  margin-bottom: 26px;
}
.receipt_detail_box .helper{
  position: absolute;
  bottom: 6px;
  left: 0;
  font-weight: 400;
  white-space: nowrap;
  font-size: 13px;
  color: var(--primary-color);
  padding-left: 20px;
}
.receipt_detail_box .helper::before{
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 16px;
  height: 16px;
  background: url('../img/icon_circle_exclamation.svg') no-repeat;
  background-size: 16px;
}
.table_wrap.abuser{
  width: 100%;
  margin-top: 80px;
}
.table_wrap.abuser tr th, .table_wrap.abuser tr td{
  font-size: 14px;
}
.notice{
  width: 100% !important;
  padding: 12px 16px;
  background: #FEFCE8;
  border: 1px solid #FFF697;
  border-radius: 10px;
  margin-top: 20px;
}
.notice>div{
  color: #844B08;
}
.notice .title{
  font-weight: 500;
  padding-left: 24px;
  position: relative;
}
.notice .title::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: url('../img/icon_circle_exclamation.svg') no-repeat;
  filter: brightness(0) saturate(100%) invert(23%) sepia(70%) saturate(1881%) hue-rotate(23deg) brightness(98%) contrast(94%);
  background-size: 20px;
}
.notice .content{
  font-size: 14px;
  margin-top: 8px;
  padding-left: 24px;
}
/* modalReceipt */
.modal_wrap.bg{
  background-color: var(--color-03);
}
.modal_top{
  display: flex;
  margin: 2px 12px 0;
  column-gap: 20px;
}
.modal_top .title_area{
  width: calc(100% - 60px);
  text-align: left;
}
.modal_top .title_area, .modal_top .close_area{
  background: var(--color-static-white);
  box-shadow: var(--shadow);
  padding: 11px 18px;
  border-radius: 100px;
}
.modal_top .title_area div{
  color: var(--color-02);
  font-weight: 500;
  position: relative;
  padding-left: 10px;
  font-size: 15px;
}
.modal_top .title_area div::before{
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--primary-color);
}
.modal_top .close_area{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.modal_top .close_area img{
  width: 18px;
  filter: var(--filter-gray);
}
.modal_content .receipt_img{
  max-width: 260px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.validation_btn{
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.validation_btn button{
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 17px;
  color: var(--color-static-white);
  transition: all 0.3s;
  padding-left: 50px;
  position: relative;
}
.validation_btn button:hover{
  transform: translateY(-2px);
}
.validation_btn button.wrong{
  background-color: var(--color-01);
  box-shadow: 0 4px 6px rgba(14, 31, 62, 0.25);
}
.validation_btn button.wrong::before, .validation_btn button.complete::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url('../img/icon_close.svg') no-repeat;
  background-size: 18px;
}
.validation_btn button.complete{
  background-color: var(--primary-color);
  box-shadow: 0 4px 6px rgba(251, 94, 20, 0.25);
}
.validation_btn button.complete::before{
  background: url('../img/icon_check.svg') no-repeat;
  background-size: 18px;
}
/* e: receipts */

/* s: contents */
.contents_info_wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
.contents_img img{
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 1px solid var(--color-07);
}
.contents_info{
  width: calc(100% - 220px);
  min-width: 400px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: space-between;
}
.contents_info .title{
  font-size: 19px;
  font-weight: 600;
  padding-left: 32px;
  position: relative;
  margin-bottom: 6px;
}
.contents_info .title::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(46%) saturate(4609%) hue-rotate(353deg) brightness(103%) contrast(97%);
  background: url('../img/icon_stamp.svg') no-repeat center;
  background-size: 14px;
}
.contents_info .title::before{
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  display: block;
  background: var(--color-09);
}
.contents_info .course_tt{
  color: var(--color-02);
  font-size: 15px;
  font-weight: 500;
}
.info_card_wrap{
  width: 100%;
  display: flex;
  gap: 20px;
}
.info_card{
  max-width: 210px;
  width: 100%;
  padding: 12px;
  background-color: #FFF7F3;
  border-radius: 12px;
  transition: all 0.4s;
}
.info_card .tt{
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}
.info_card .num_w{
  display: flex;
  align-items: baseline;
  column-gap: 6px;
}
.info_card .num{
  font-size: 26px;
  font-weight: 800;
}
.info_card .sub{
  font-size: 13px;
}
.info_card .star, .user_info .star{
  display: flex;
  column-gap: 1px;
}
.info_card .star img, .user_info .star img{
  width: 13px;
  height: 13px;
}
.info_card .star img.off, .user_info .star img.off{
  filter: var(--filter-gray);
}
.table_wrap.review tr td.review div{
  white-space: nowrap;
  max-width: 400px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.user_info_wrap{
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 10px;
}
.user_info_wrap>img{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 1px solid var(--color-07);
}
.user_info{
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.user_info .name{
  font-weight: 600;
  margin-bottom: 2px;
  text-align: left;
}
.user_info .num{
  font-size: 14px;
  text-align: left;
  color: var(--color-02);
}
.review_content{
  max-height: 260px;
  overflow: auto;
  min-height: 200px;
  padding: 12px;
  word-break: break-all;
  text-align: left;
  background: var(--color-static-white);
  box-shadow: var(--shadow);
  border-radius: 10px;
  margin-bottom: 20px;
}
/* e: contents */

/* s: lottery_private */
.filter_checks{
  margin-top: 15px;
}
.lottery .checkbox .label {
  line-height: 16px;
  padding: 0 0 0 24px;
  font-size: 14px;
  color: var(--color-02);
  font-weight: 500;
}
.lottery .checkbox .label.un{
  font-size: 0;
}
.lottery .checkbox input + .label:before {
  width: 16px;
  height: 16px;
}
.lottery .checkbox input:checked + .label:after {
  background-size: 14px;
  width: 16px;
  height: 16px;
}
.check_filter{
  text-align: center;
  margin: 100px 0;
  padding: 0 12px;
}
.check_filter h2{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}
.check_filter p{
  font-size: 14px;
  color: var(--color-02);
  line-height: 1.6;
  max-width: 290px;
  margin: 0 auto;
}
.btn_gift{
  background-color: #EAECF5;
  color: var(--color-01);
}
/* e: lottery_private */












































/* s: animation */
@-webkit-keyframes move {
  40% {
    transform: translateY(var(--move));
    text-shadow: var(--shadow-active);
  }
}
@keyframes move {
  40% {
    transform: translateY(var(--move));
    text-shadow: var(--shadow-active);
  }
}
@-webkit-keyframes shake {
  0%, 100% {
    transform: translateX(-50%);
	}
	50% {
    transform: translateX(-45%);
	}
}
@keyframes shake {
  0%, 100% {
    transform: translateX(-50%);
	}
	50% {
    transform: translateX(-45%);
	}
}
/* e: animation */







/* s: responsive */
@media (max-width: 1024px) {
  header{
    padding: 20px 20px;
  }
  .wrap{
    padding: 0 30px;
  }
  .header_nav .logo {
    width: 90px;
  }
  .header_nav {
    width: calc(100% - 60px);
  }
  .header_nav nav ul{
    column-gap: 26px;
    font-size: 16px;
  }
  .header_right div{
    width: 46px;
  }
  .main_section_wrap{
    min-height: calc(100vh - 136px);
  }
  .card.pa {
    padding: 20px 20px;
  }
  .card .top{
    padding: 0 20px 16px;
  }
  .filter_wrap{
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: 16px;
    align-items: center;
  }
  .filter_up, .filter{
    justify-content: center;
  }
  .grid_area {
    padding: 0 20px;
  }
  .receipt_detail_wrap{
    gap: 20px;
  }
  .receipt_detail_box{
    justify-self: unset;
  }
}
@media (max-width: 960px) {
  .receipt_detail_wrap{
    flex-direction: column;
    align-items: center;
  }
  .receipt_detail_box {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .mobile_block{
    display: block !important;
  }
  .header_nav{
    justify-content: space-between;
  }
  .index_logo img{
    filter: var(--filter-white);
    transition: filter 0.8s ease;
  }
  .index_bg{
    width: 100vw;
    background: url('../img/img_bg_01.jpg') no-repeat;
    background-position: right;
    background-size: cover;
  }
  .index_bg::after{
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: var(--color-black-opa-50);
  }
  .index_tt, .index_sub_tt{
    color: var(--color-static-white);
    text-shadow: 0 0 3px var(--color-black-opa-50);
  }
  .index_logo{
    width: 120px;
    left: 30px;
  }
  .index_wrap {
    padding: 0 30px;
    margin: 20vh 0 0 0;
    transition: margin 0.8s;
  }
  .btn_hover button{
    margin: 0 auto !important;
  }
  .btn_logout{
    display: none;
  }
  .btn_burger{
    display: block;
  }
  .header_nav nav{
    display: none;
    position: absolute;
    z-index: 10;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-static-white);
    width: calc(100vw - 60px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: var(--shadow);
  }
  .header_nav nav ul{
    flex-direction: column;
    row-gap: 12px;
  }
  .btn_down, .btn_gift{
    padding: 6px 10px;
    font-size: 14px;
    margin: 0 0 0 auto;
  }
  .btn_down img {
    width: 17px;
  }
  .card_04_12_12{
    width: 100%;
  }
  .card_04_06_12{
    width: 49%;
  }
  .card_08_06_12{
    width: 49%;
  }
  .filter{
    column-gap: 0;
    row-gap: 12px;
    justify-content: space-between;
  }
  .filter>div{
    width: 48%;
  }
  .filter .input_form{
    max-width: none;
    width: 100%;
  }
  .custom_select_trigger {
    width: 100%;
  }
  .m_w_100{
    width: 100% !important;
  }
  .datapicker_wrap .datepicker{
    width: 50% !important;
  }
  .receipt_detail_box>div, .receipt_detail_box>div.w_2 {
    width: 100%;
  }
  .tt.invisible{
    display: none;
  }
  .filter_checks {
    margin-top: 6px;
  }
}
@media (max-width: 620px) {
  header {
    padding: 16px 16px;
  }
  .wrap{
    padding: 0 20px;
  }
  .header_nav nav{
    width: calc(100vw - 32px);
  }
  .card_04_12_12, .card_04_06_12, .card_08_06_12{
    width: 100%;
  }
  .card .icon{
    display: none;
  }
  .card .m_icon{
    display: block;
  }
  .card .tt_wrap, .card .num_wrap{
    justify-content: center;
  }
  .dashboard main{
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
  .dashboard main .breadcrumb{
    justify-content: center;
  }
  .table tr th,
  .table tr td{
    font-size: 14px;
  }
  .contents_info{
    min-width: 100%;
  }
}
@media (max-width: 500px) {
  .login_form{
    padding: 50px 10vw;
  }
  .info_card_wrap{
    flex-direction: column;
  }
  .info_card{
    max-width: 100%;
  }
}
@media (max-width: 425px) {
  .wrap{
    padding: 0 20px;
  }
  .filter>div{
    width: 100%;
  }
}
@media (max-width: 380px) {

}
/* e: responsive */