@charset "utf-8";

@import "./reset.css";

:root {
  --brand-primary: #007fff;
}

body,
html {
  padding: 0;
  margin: 0;
  width:100%;
  height: 100%;
  overflow: auto;
  font-size: 16px;
  position: relative;
  scroll-behavior:smooth;
  width: 100vw;
  overflow-x: hidden;
}
*{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* font-family: 'Spoqa Han Sans Neo', 'sans-serif'; */
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  -webkit-font-smoothing: antialiased;
}
*::-webkit-scrollbar{
  display: none;
}

a{
  text-decoration: none;
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6{
  line-height: 1;
  margin: 0;
}
ul, nav{
  list-style: none;
  padding: 0;
  margin: 0;
}



.relative{
  position: relative;
}
.d-flex{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.d-flex.inline{
  display: inline-flex;
}
.d-flex.aligntop{
  align-items: flex-start;
}
.d-flex.alignbottom{
  align-items: flex-end;
}
.d-flex.stretch{
  align-items: stretch;
}
.d-flex.center{
  align-items: center;
  justify-content: center;
}
.d-flex.left{
  justify-content: flex-start;
}
.d-flex.right{
  justify-content: flex-end;
}
.flex1{  flex: 1;  }
.flex2{  flex: 2;  }
.flex3{  flex: 3;  }
.flex4{  flex: 4;  }
.flex5{  flex: 5;  }
.flex6{  flex: 6;  }
.flex7{  flex: 7;  }
.flex8{  flex: 8;  }
.flex9{  flex: 9;  }
.flex10{ flex: 10; }
.flex11{ flex: 11; }
.flex12{ flex: 12; }
.d-flex.column{
  flex-direction: column !important;
}
.d-flex.space-between{
  justify-content: space-between !important;
}
.d-flex.space-between > div{
  flex-shrink: 0;
}

.gap5{ gap: 5px; }
.gap10{ gap: 10px; }
.gap15{ gap: 15px; }
.gap20{ gap: 20px; }
.gap25{ gap: 25px; }
.gap30{ gap: 30px; }
.gap35{ gap: 35px; }
.gap40{ gap: 40px; }
.gap45{ gap: 45px; }

.width100{
  width: 100% !important;
}
.heightauto{
  height: auto !important;
}
.height100{
  height: 100% !important;
}


.border {border: 1px solid #eeeeee;}
.border1 {border: 1px solid #eeeeee;}
.border-top {border-top: 1px solid #eeeeee;}
.border-left {border-left: 1px solid #eeeeee;}
.border-right {border-right: 1px solid #eeeeee;}
.border-bottom {border-bottom: 1px solid #eeeeee;}

.border-red {border-color: #ff3100 !important;}

.border-radius{
  border-radius: 18px !important;
  /* overflow: hidden; */
}
.border-radius .border-radius{
  border-radius: 12px !important;
}
.border-radius .border-radius .border-radius{
  border-radius: 8px !important;
}
.border-round{
  border-radius: 100px !important;
  overflow: hidden;
}
.border-radius-0, .no-border-radius{
  border-radius: 0 !important;
}
@media (max-width: 768px) {
}
.border-radius-4 {
  border-radius: 4px !important;
}
.border-radius-6 {
  border-radius: 6px !important;
}
.border-radius-8 {
  border-radius: 8px !important;
}
.border-radius-12 {
  border-radius: 12px !important;
}
.border-radius-16 {
  border-radius: 16px !important;
}
.border-radius-999 {
  border-radius: 999px !important;
}
.border-radius-s {
  border-radius: var(--border-radius-s) !important;
}
.border-radius-m {
  border-radius: var(--border-radius-m) !important;
}
.border-radius-l {
  border-radius: var(--border-radius-l) !important;
}

.text-center{
  text-align: center;
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}

.ft10{font-size: 10px !important;}
.ft11{font-size: 11px !important;}
.ft12{font-size: 12px !important;}
.ft13{font-size: 13px !important;}
.ft14{font-size: 14px !important;}
.ft15{font-size: 15px !important;}
.ft16{font-size: 16px !important;}
.ft18{font-size: 18px !important;}
.ft20{font-size: 20px !important;}
.ft22{font-size: 22px !important;}
.ft24{font-size: 24px !important;}
.ft26{font-size: 26px !important;}

.fw100{font-weight: 100 !important;}
.fw200{font-weight: 200 !important;}
.fw300{font-weight: 300 !important;}
.fw400{font-weight: 400 !important;}
.fw500{font-weight: 500 !important;}
.fw600{font-weight: 600 !important;}
.fw700{font-weight: 700 !important;}
.fw800{font-weight: 800 !important;}
.fw900{font-weight: 900 !important;}

.text-black, .text-333 { color: #333 !important; }
.text-111 { color: #111111 !important; }
.text-222 { color: #222222 !important; }
.text-333 { color: #333333 !important; }
.text-444 { color: #444444 !important; }
.text-555 { color: #555555 !important; }
.text-666 { color: #666666 !important; }
.text-777 { color: #777777 !important; }
.text-888 { color: #888888 !important; }
.text-999 { color: #999999 !important; }
.text-white { color: #FFF !important; }
.text-gray { color: #888 !important; }
.text-red { color: red !important; }
.text-primary { color: #007fff !important; }

@media (max-width: 768px) {
  .xs-ft10{font-size: 10px !important;}
  .xs-ft11{font-size: 11px !important;}
  .xs-ft12{font-size: 12px !important;}
  .xs-ft14{font-size: 14px !important;}
  .xs-ft15{font-size: 15px !important;}
  .xs-ft16{font-size: 16px !important;}
  .xs-ft18{font-size: 18px !important;}
  .xs-ft20{font-size: 20px !important;}
  .xs-ft22{font-size: 22px !important;}
  .xs-ft24{font-size: 24px !important;}
  .xs-ft26{font-size: 26px !important;}
}
@media (min-width: 769px) {
  .only-mobile{
    display: none !important;
  }
}
@media (max-width: 768px) {
  .only-pc{
    display: none !important;
  }
}


.bg-gray-lighter{
  background-color: #f3f3f3;
}
.bg-orange, .bg-primary{
  background-color: #fe5001;
}
.bg-white{
  background-color: #FFF;
}
.bg-transparent{
  background-color: transparent;
}



.bold{
  font-weight: bold !important;
}
.line1{
  line-height: 1;
}
.line14{
  line-height: 1.4;
}
.line15{
  line-height: 1.5;
}
.line16{
  line-height: 1.6;
}
.line17{
  line-height: 1.7;
}
.line18{
  line-height: 1.8;
}
.line2{
  line-height: 2;
}
.line3{
  line-height: 3;
}
.cursor-pointer{
  cursor: pointer;
}

span,p{
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}


.underline{
  text-decoration: underline;
}
a.underline{
  cursor: pointer;
}

.ellipsis,
.ellipsable{
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.ellipsis2{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: auto;
  max-height: 3em;
}

/*pa, py, px*/

.pa-0{padding: 0px!important;}
.pa-1{padding: 1px!important;}
.pa-2{padding: 2px!important;}
.pa-3{padding: 3px!important;}
.pa-5{padding: 5px!important;}
.pa-8{padding: 8px!important;}
.pa-10{padding: 10px!important;}
.pa-15{padding: 15px!important;}
.pa-20{padding: 20px!important;}
.pa-25{padding: 25px!important;}
.pa-30{padding: 30px!important;}
.pa-35{padding: 35px!important;}
.pa-40{padding: 40px!important;}
.pa-60{padding: 60px!important;}
.pa-80{padding: 80px!important;}
.pa-120{padding: 120px!important;}

.pt-0{padding-top: 0px!important;}
.pt-1{padding-top: 1px!important;}
.pt-2{padding-top: 2px!important;}
.pt-3{padding-top: 3px!important;}
.pt-5{padding-top: 5px!important;}
.pt-8{padding-top: 8px!important;}
.pt-10{padding-top: 10px!important;}
.pt-15{padding-top: 15px!important;}
.pt-20{padding-top: 20px!important;}
.pt-25{padding-top: 25px!important;}
.pt-30{padding-top: 30px!important;}
.pt-35{padding-top: 35px!important;}
.pt-40{padding-top: 40px!important;}
.pt-60{padding-top: 60px!important;}
.pt-80{padding-top: 80px!important;}
.pt-120{padding-top: 120px!important;}

.pb-0{padding-bottom: 0px!important;}
.pb-1{padding-bottom: 1px!important;}
.pb-2{padding-bottom: 2px!important;}
.pb-3{padding-bottom: 3px!important;}
.pb-5{padding-bottom: 5px!important;}
.pb-8{padding-bottom: 8px!important;}
.pb-10{padding-bottom: 10px!important;}
.pb-15{padding-bottom: 15px!important;}
.pb-20{padding-bottom: 20px!important;}
.pb-25{padding-bottom: 25px!important;}
.pb-30{padding-bottom: 30px!important;}
.pb-35{padding-bottom: 35px!important;}
.pb-40{padding-bottom: 40px!important;}
.pb-60{padding-bottom: 60px!important;}
.pb-80{padding-bottom: 80px!important;}
.pb-120{padding-bottom: 120px!important;}

.py-0{padding-top: 0px!important; padding-bottom: 0px!important;}
.py-1{padding-top: 1px!important; padding-bottom: 1px!important;}
.py-2{padding-top: 2px!important; padding-bottom: 2px!important;}
.py-3{padding-top: 3px!important; padding-bottom: 3px!important;}
.py-5{padding-top: 5px!important; padding-bottom: 5px!important;}
.py-8{padding-top: 8px!important; padding-bottom: 8px!important;}
.py-10{padding-top: 10px!important; padding-bottom: 10px!important;}
.py-15{padding-top: 15px!important; padding-bottom: 15px!important;}
.py-20{padding-top: 20px!important; padding-bottom: 20px!important;}
.py-25{padding-top: 25px!important; padding-bottom: 25px!important;}
.py-30{padding-top: 30px!important; padding-bottom: 30px!important;}
.py-35{padding-top: 35px!important; padding-bottom: 35px!important;}
.py-40{padding-top: 40px!important; padding-bottom: 40px!important;}
.py-60{padding-top: 60px!important; padding-bottom: 60px!important;}
.py-80{padding-top: 80px!important; padding-bottom: 80px!important;}
.py-120{padding-top: 120px!important; padding-bottom: 120px!important;}

.pl-0{padding-left: 0px!important;}
.pl-1{padding-left: 1px!important;}
.pl-2{padding-left: 2px!important;}
.pl-3{padding-left: 3px!important;}
.pl-5{padding-left: 5px!important;}
.pl-8{padding-left: 8px!important;}
.pl-10{padding-left: 10px!important;}
.pl-15{padding-left: 15px!important;}
.pl-20{padding-left: 20px!important;}
.pl-25{padding-left: 25px!important;}
.pl-30{padding-left: 30px!important;}
.pl-35{padding-left: 35px!important;}
.pl-40{padding-left: 40px!important;}
.pl-60{padding-left: 60px!important;}
.pl-80{padding-left: 80px!important;}
.pl-120{padding-left: 120px!important;}

.pr-0{padding-right: 0px!important;}
.pr-1{padding-right: 1px!important;}
.pr-2{padding-right: 2px!important;}
.pr-3{padding-right: 3px!important;}
.pr-5{padding-right: 5px!important;}
.pr-8{padding-right: 8px!important;}
.pr-10{padding-right: 10px!important;}
.pr-15{padding-right: 15px!important;}
.pr-20{padding-right: 20px!important;}
.pr-25{padding-right: 25px!important;}
.pr-30{padding-right: 30px!important;}
.pr-35{padding-right: 35px!important;}
.pr-40{padding-right: 40px!important;}
.pr-60{padding-right: 60px!important;}
.pr-80{padding-right: 80px!important;}
.pr-120{padding-right: 120px!important;}

.px-0{padding-left: 0px!important; padding-right: 0px!important;}
.px-1{padding-left: 1px!important; padding-right: 1px!important;}
.px-2{padding-left: 2px!important; padding-right: 2px!important;}
.px-3{padding-left: 3px!important; padding-right: 3px!important;}
.px-5{padding-left: 5px!important; padding-right: 5px!important;}
.px-8{padding-left: 8px!important; padding-right: 8px!important;}
.px-10{padding-left: 10px!important; padding-right: 10px!important;}
.px-15{padding-left: 15px!important; padding-right: 15px!important;}
.px-20{padding-left: 20px!important; padding-right: 20px!important;}
.px-25{padding-left: 25px!important; padding-right: 25px!important;}
.px-30{padding-left: 30px!important; padding-right: 30px!important;}
.px-35{padding-left: 35px!important; padding-right: 35px!important;}
.px-40{padding-left: 40px!important; padding-right: 40px!important;}
.px-60{padding-left: 60px!important; padding-right: 60px!important;}
.px-80{padding-left: 80px!important; padding-right: 80px!important;}
.px-120{padding-left: 120px!important; padding-right: 120px!important;}



.ma-0{margin: 0px!important;}
.ma-1{margin: 1px!important;}
.ma-2{margin: 2px!important;}
.ma-3{margin: 3px!important;}
.ma-5{margin: 5px!important;}
.ma-8{margin: 8px!important;}
.ma-10{margin: 10px!important;}
.ma-15{margin: 15px!important;}
.ma-20{margin: 20px!important;}
.ma-25{margin: 25px!important;}
.ma-30{margin: 30px!important;}
.ma-35{margin: 35px!important;}
.ma-40{margin: 40px!important;}
.ma-60{margin: 60px!important;}
.ma-80{margin: 80px!important;}
.ma-120{margin: 120px!important;}

.mt-0{margin-top: 0px!important;}
.mt-1{margin-top: 1px!important;}
.mt-2{margin-top: 2px!important;}
.mt-3{margin-top: 3px!important;}
.mt-5{margin-top: 5px!important;}
.mt-8{margin-top: 8px!important;}
.mt-10{margin-top: 10px!important;}
.mt-15{margin-top: 15px!important;}
.mt-20{margin-top: 20px!important;}
.mt-25{margin-top: 25px!important;}
.mt-30{margin-top: 30px!important;}
.mt-35{margin-top: 35px!important;}
.mt-40{margin-top: 40px!important;}
.mt-60{margin-top: 60px!important;}
.mt-80{margin-top: 80px!important;}
.mt-120{margin-top: 120px!important;}

.mb-0{margin-bottom: 0px!important;}
.mb-1{margin-bottom: 1px!important;}
.mb-2{margin-bottom: 2px!important;}
.mb-3{margin-bottom: 3px!important;}
.mb-5{margin-bottom: 5px!important;}
.mb-8{margin-bottom: 8px!important;}
.mb-10{margin-bottom: 10px!important;}
.mb-15{margin-bottom: 15px!important;}
.mb-20{margin-bottom: 20px!important;}
.mb-25{margin-bottom: 25px!important;}
.mb-30{margin-bottom: 30px!important;}
.mb-35{margin-bottom: 35px!important;}
.mb-40{margin-bottom: 40px!important;}
.mb-60{margin-bottom: 60px!important;}
.mb-80{margin-bottom: 80px!important;}
.mb-120{margin-bottom: 120px!important;}

.my-0{margin-top: 0px!important; margin-bottom: 0px!important;}
.my-1{margin-top: 1px!important; margin-bottom: 1px!important;}
.my-2{margin-top: 2px!important; margin-bottom: 2px!important;}
.my-3{margin-top: 3px!important; margin-bottom: 3px!important;}
.my-5{margin-top: 5px!important; margin-bottom: 5px!important;}
.my-8{margin-top: 8px!important; margin-bottom: 8px!important;}
.my-10{margin-top: 10px!important; margin-bottom: 10px!important;}
.my-15{margin-top: 15px!important; margin-bottom: 15px!important;}
.my-20{margin-top: 20px!important; margin-bottom: 20px!important;}
.my-25{margin-top: 25px!important; margin-bottom: 25px!important;}
.my-30{margin-top: 30px!important; margin-bottom: 30px!important;}
.my-35{margin-top: 35px!important; margin-bottom: 35px!important;}
.my-40{margin-top: 40px!important; margin-bottom: 40px!important;}
.my-60{margin-top: 60px!important; margin-bottom: 60px!important;}
.my-80{margin-top: 80px!important; margin-bottom: 80px!important;}
.my-120{margin-top: 120px!important; margin-bottom: 120px!important;}

.ml-0{margin-left: 0px!important;}
.ml-1{margin-left: 1px!important;}
.ml-2{margin-left: 2px!important;}
.ml-3{margin-left: 3px!important;}
.ml-5{margin-left: 5px!important;}
.ml-8{margin-left: 8px!important;}
.ml-10{margin-left: 10px!important;}
.ml-15{margin-left: 15px!important;}
.ml-20{margin-left: 20px!important;}
.ml-25{margin-left: 25px!important;}
.ml-30{margin-left: 30px!important;}
.ml-35{margin-left: 35px!important;}
.ml-40{margin-left: 40px!important;}
.ml-60{margin-left: 60px!important;}
.ml-80{margin-left: 80px!important;}
.ml-120{margin-left: 120px!important;}

.mr-0{margin-right: 0px!important;}
.mr-1{margin-right: 1px!important;}
.mr-2{margin-right: 2px!important;}
.mr-3{margin-right: 3px!important;}
.mr-5{margin-right: 5px!important;}
.mr-8{margin-right: 8px!important;}
.mr-10{margin-right: 10px!important;}
.mr-15{margin-right: 15px!important;}
.mr-20{margin-right: 20px!important;}
.mr-25{margin-right: 25px!important;}
.mr-30{margin-right: 30px!important;}
.mr-35{margin-right: 35px!important;}
.mr-40{margin-right: 40px!important;}
.mr-60{margin-right: 60px!important;}
.mr-80{margin-right: 80px!important;}
.mr-120{margin-right: 120px!important;}

.mx-0{margin-left: 0px!important; margin-right: 0px!important;}
.mx-1{margin-left: 1px!important; margin-right: 1px!important;}
.mx-2{margin-left: 2px!important; margin-right: 2px!important;}
.mx-1{margin-left: 1px!important; margin-right: 1px!important;}
.mx-2{margin-left: 2px!important; margin-right: 2px!important;}
.mx-3{margin-left: 3px!important; margin-right: 3px!important;}
.mx-5{margin-left: 5px!important; margin-right: 5px!important;}
.mx-8{margin-left: 8px!important; margin-right: 8px!important;}
.mx-10{margin-left: 10px!important; margin-right: 10px!important;}
.mx-15{margin-left: 15px!important; margin-right: 15px!important;}
.mx-20{margin-left: 20px!important; margin-right: 20px!important;}
.mx-25{margin-left: 25px!important; margin-right: 25px!important;}
.mx-30{margin-left: 30px!important; margin-right: 30px!important;}
.mx-35{margin-left: 35px!important; margin-right: 35px!important;}
.mx-40{margin-left: 40px!important; margin-right: 40px!important;}
.mx-60{margin-left: 60px!important; margin-right: 60px!important;}
.mx-80{margin-left: 80px!important; margin-right: 80px!important;}
.mx-120{margin-left: 120px!important; margin-right: 120px!important;}

.mt--0{margin-top: -0px!important;}
.mt--3{margin-top: -3px!important;}
.mt--5{margin-top: -5px!important;}
.mt--10{margin-top: -10px!important;}
.mt--15{margin-top: -15px!important;}
.mt--20{margin-top: -20px!important;}
.mt--25{margin-top: -25px!important;}
.mt--30{margin-top: -30px!important;}
.mt--35{margin-top: -35px!important;}
.mt--40{margin-top: -40px!important;}
.mt--60{margin-top: -60px!important;}
.mt--80{margin-top: -80px!important;}
.mt--120{margin-top: -120px!important;}

.mb--0{margin-bottom: -0px!important;}
.mb--3{margin-bottom: -3px!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;}
.mb--25{margin-bottom: -25px!important;}
.mb--30{margin-bottom: -30px!important;}
.mb--35{margin-bottom: -35px!important;}
.mb--40{margin-bottom: -40px!important;}
.mb--60{margin-bottom: -60px!important;}
.mb--80{margin-bottom: -80px!important;}
.mb--120{margin-bottom: -120px!important;}

.my--0{margin-top: -0px!important; margin-bottom: -0px!important;}
.my--3{margin-top: -3px!important; margin-bottom: -3px!important;}
.my--5{margin-top: -5px!important; margin-bottom: -5px!important;}
.my--10{margin-top: -10px!important; margin-bottom: -10px!important;}
.my--15{margin-top: -15px!important; margin-bottom: -15px!important;}
.my--20{margin-top: -20px!important; margin-bottom: -20px!important;}
.my--25{margin-top: -25px!important; margin-bottom: -25px!important;}
.my--30{margin-top: -30px!important; margin-bottom: -30px!important;}
.my--35{margin-top: -35px!important; margin-bottom: -35px!important;}
.my--40{margin-top: -40px!important; margin-bottom: -40px!important;}
.my--60{margin-top: -60px!important; margin-bottom: -60px!important;}
.my--80{margin-top: -80px!important; margin-bottom: -80px!important;}
.my--120{margin-top: -120px!important; margin-bottom: -120px!important;}

.ml--0{margin-left: -0px!important;}
.ml--3{margin-left: -3px!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;}
.ml--25{margin-left: -25px!important;}
.ml--30{margin-left: -30px!important;}
.ml--35{margin-left: -35px!important;}
.ml--40{margin-left: -40px!important;}
.ml--60{margin-left: -60px!important;}
.ml--80{margin-left: -80px!important;}
.ml--120{margin-left: -120px!important;}

.mr--0{margin-right: -0px!important;}
.mr--3{margin-right: -3px!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;}
.mr--25{margin-right: -25px!important;}
.mr--30{margin-right: -30px!important;}
.mr--35{margin-right: -35px!important;}
.mr--40{margin-right: -40px!important;}
.mr--60{margin-right: -60px!important;}
.mr--80{margin-right: -80px!important;}
.mr--120{margin-right: -120px!important;}

.mx--0{margin-left: -0px!important; margin-right: -0px!important;}
.mx--3{margin-left: -3px!important; margin-right: -3px!important;}
.mx--5{margin-left: -5px!important; margin-right: -5px!important;}
.mx--10{margin-left: -10px!important; margin-right: -10px!important;}
.mx--15{margin-left: -15px!important; margin-right: -15px!important;}
.mx--20{margin-left: -20px!important; margin-right: -20px!important;}
.mx--25{margin-left: -25px!important; margin-right: -25px!important;}
.mx--30{margin-left: -30px!important; margin-right: -30px!important;}
.mx--35{margin-left: -35px!important; margin-right: -35px!important;}
.mx--40{margin-left: -40px!important; margin-right: -40px!important;}
.mx--60{margin-left: -60px!important; margin-right: -60px!important;}
.mx--80{margin-left: -80px!important; margin-right: -80px!important;}
.mx--120{margin-left: -120px!important; margin-right: -120px!important;}

@media (max-width: 768px) {
  


  /*pa, py, px*/

  .xs-pa-0{padding: 0px!important;}
  .xs-pa-1{padding: 1px!important;}
  .xs-pa-2{padding: 2px!important;}
  .xs-pa-3{padding: 3px!important;}
  .xs-pa-5{padding: 5px!important;}
  .xs-pa-8{padding: 8px!important;}
  .xs-pa-10{padding: 10px!important;}
  .xs-pa-15{padding: 15px!important;}
  .xs-pa-20{padding: 20px!important;}
  .xs-pa-25{padding: 25px!important;}
  .xs-pa-30{padding: 30px!important;}
  .xs-pa-35{padding: 35px!important;}
  .xs-pa-40{padding: 40px!important;}
  .xs-pa-60{padding: 60px!important;}
  .xs-pa-80{padding: 80px!important;}
  .xs-pa-120{padding: 120px!important;}

  .xs-pt-0{padding-top: 0px!important;}
  .xs-pt-1{padding-top: 1px!important;}
  .xs-pt-2{padding-top: 2px!important;}
  .xs-pt-3{padding-top: 3px!important;}
  .xs-pt-5{padding-top: 5px!important;}
  .xs-pt-8{padding-top: 8px!important;}
  .xs-pt-10{padding-top: 10px!important;}
  .xs-pt-15{padding-top: 15px!important;}
  .xs-pt-20{padding-top: 20px!important;}
  .xs-pt-25{padding-top: 25px!important;}
  .xs-pt-30{padding-top: 30px!important;}
  .xs-pt-35{padding-top: 35px!important;}
  .xs-pt-40{padding-top: 40px!important;}
  .xs-pt-60{padding-top: 60px!important;}
  .xs-pt-80{padding-top: 80px!important;}
  .xs-pt-120{padding-top: 120px!important;}

  .xs-pb-0{padding-bottom: 0px!important;}
  .xs-pb-1{padding-bottom: 1px!important;}
  .xs-pb-2{padding-bottom: 2px!important;}
  .xs-pb-3{padding-bottom: 3px!important;}
  .xs-pb-5{padding-bottom: 5px!important;}
  .xs-pb-8{padding-bottom: 8px!important;}
  .xs-pb-10{padding-bottom: 10px!important;}
  .xs-pb-15{padding-bottom: 15px!important;}
  .xs-pb-20{padding-bottom: 20px!important;}
  .xs-pb-25{padding-bottom: 25px!important;}
  .xs-pb-30{padding-bottom: 30px!important;}
  .xs-pb-35{padding-bottom: 35px!important;}
  .xs-pb-40{padding-bottom: 40px!important;}
  .xs-pb-60{padding-bottom: 60px!important;}
  .xs-pb-80{padding-bottom: 80px!important;}
  .xs-pb-120{padding-bottom: 120px!important;}

  .xs-py-0{padding-top: 0px!important; padding-bottom: 0px!important;}
  .xs-py-1{padding-top: 1px!important; padding-bottom: 1px!important;}
  .xs-py-2{padding-top: 2px!important; padding-bottom: 2px!important;}
  .xs-py-3{padding-top: 3px!important; padding-bottom: 3px!important;}
  .xs-py-5{padding-top: 5px!important; padding-bottom: 5px!important;}
  .xs-py-8{padding-top: 8px!important; padding-bottom: 8px!important;}
  .xs-py-10{padding-top: 10px!important; padding-bottom: 10px!important;}
  .xs-py-15{padding-top: 15px!important; padding-bottom: 15px!important;}
  .xs-py-20{padding-top: 20px!important; padding-bottom: 20px!important;}
  .xs-py-25{padding-top: 25px!important; padding-bottom: 25px!important;}
  .xs-py-30{padding-top: 30px!important; padding-bottom: 30px!important;}
  .xs-py-35{padding-top: 35px!important; padding-bottom: 35px!important;}
  .xs-py-40{padding-top: 40px!important; padding-bottom: 40px!important;}
  .xs-py-60{padding-top: 60px!important; padding-bottom: 60px!important;}
  .xs-py-80{padding-top: 80px!important; padding-bottom: 80px!important;}
  .xs-py-120{padding-top: 120px!important; padding-bottom: 120px!important;}

  .xs-pl-0{padding-left: 0px!important;}
  .xs-pl-1{padding-left: 1px!important;}
  .xs-pl-2{padding-left: 2px!important;}
  .xs-pl-3{padding-left: 3px!important;}
  .xs-pl-5{padding-left: 5px!important;}
  .xs-pl-8{padding-left: 8px!important;}
  .xs-pl-10{padding-left: 10px!important;}
  .xs-pl-15{padding-left: 15px!important;}
  .xs-pl-20{padding-left: 20px!important;}
  .xs-pl-25{padding-left: 25px!important;}
  .xs-pl-30{padding-left: 30px!important;}
  .xs-pl-35{padding-left: 35px!important;}
  .xs-pl-40{padding-left: 40px!important;}
  .xs-pl-60{padding-left: 60px!important;}
  .xs-pl-80{padding-left: 80px!important;}
  .xs-pl-120{padding-left: 120px!important;}

  .xs-pr-0{padding-right: 0px!important;}
  .xs-pr-1{padding-right: 1px!important;}
  .xs-pr-2{padding-right: 2px!important;}
  .xs-pr-3{padding-right: 3px!important;}
  .xs-pr-5{padding-right: 5px!important;}
  .xs-pr-8{padding-right: 8px!important;}
  .xs-pr-10{padding-right: 10px!important;}
  .xs-pr-15{padding-right: 15px!important;}
  .xs-pr-20{padding-right: 20px!important;}
  .xs-pr-25{padding-right: 25px!important;}
  .xs-pr-30{padding-right: 30px!important;}
  .xs-pr-35{padding-right: 35px!important;}
  .xs-pr-40{padding-right: 40px!important;}
  .xs-pr-60{padding-right: 60px!important;}
  .xs-pr-80{padding-right: 80px!important;}
  .xs-pr-120{padding-right: 120px!important;}

  .xs-px-0{padding-left: 0px!important; padding-right: 0px!important;}
  .xs-px-1{padding-left: 1px!important; padding-right: 1px!important;}
  .xs-px-2{padding-left: 2px!important; padding-right: 2px!important;}
  .xs-px-3{padding-left: 3px!important; padding-right: 3px!important;}
  .xs-px-5{padding-left: 5px!important; padding-right: 5px!important;}
  .xs-px-8{padding-left: 8px!important; padding-right: 8px!important;}
  .xs-px-10{padding-left: 10px!important; padding-right: 10px!important;}
  .xs-px-15{padding-left: 15px!important; padding-right: 15px!important;}
  .xs-px-20{padding-left: 20px!important; padding-right: 20px!important;}
  .xs-px-25{padding-left: 25px!important; padding-right: 25px!important;}
  .xs-px-30{padding-left: 30px!important; padding-right: 30px!important;}
  .xs-px-35{padding-left: 35px!important; padding-right: 35px!important;}
  .xs-px-40{padding-left: 40px!important; padding-right: 40px!important;}
  .xs-px-60{padding-left: 60px!important; padding-right: 60px!important;}
  .xs-px-80{padding-left: 80px!important; padding-right: 80px!important;}
  .xs-px-120{padding-left: 120px!important; padding-right: 120px!important;}



  .xs-ma-0{margin: 0px!important;}
  .xs-ma-1{margin: 1px!important;}
  .xs-ma-2{margin: 2px!important;}
  .xs-ma-3{margin: 3px!important;}
  .xs-ma-5{margin: 5px!important;}
  .xs-ma-8{margin: 8px!important;}
  .xs-ma-10{margin: 10px!important;}
  .xs-ma-15{margin: 15px!important;}
  .xs-ma-20{margin: 20px!important;}
  .xs-ma-25{margin: 25px!important;}
  .xs-ma-30{margin: 30px!important;}
  .xs-ma-35{margin: 35px!important;}
  .xs-ma-40{margin: 40px!important;}
  .xs-ma-60{margin: 60px!important;}
  .xs-ma-80{margin: 80px!important;}
  .xs-ma-120{margin: 120px!important;}

  .xs-mt-0{margin-top: 0px!important;}
  .xs-mt-1{margin-top: 1px!important;}
  .xs-mt-2{margin-top: 2px!important;}
  .xs-mt-3{margin-top: 3px!important;}
  .xs-mt-5{margin-top: 5px!important;}
  .xs-mt-8{margin-top: 8px!important;}
  .xs-mt-10{margin-top: 10px!important;}
  .xs-mt-15{margin-top: 15px!important;}
  .xs-mt-20{margin-top: 20px!important;}
  .xs-mt-25{margin-top: 25px!important;}
  .xs-mt-30{margin-top: 30px!important;}
  .xs-mt-35{margin-top: 35px!important;}
  .xs-mt-40{margin-top: 40px!important;}
  .xs-mt-60{margin-top: 60px!important;}
  .xs-mt-80{margin-top: 80px!important;}
  .xs-mt-120{margin-top: 120px!important;}

  .xs-mb-0{margin-bottom: 0px!important;}
  .xs-mb-1{margin-bottom: 1px!important;}
  .xs-mb-2{margin-bottom: 2px!important;}
  .xs-mb-3{margin-bottom: 3px!important;}
  .xs-mb-5{margin-bottom: 5px!important;}
  .xs-mb-8{margin-bottom: 8px!important;}
  .xs-mb-10{margin-bottom: 10px!important;}
  .xs-mb-15{margin-bottom: 15px!important;}
  .xs-mb-20{margin-bottom: 20px!important;}
  .xs-mb-25{margin-bottom: 25px!important;}
  .xs-mb-30{margin-bottom: 30px!important;}
  .xs-mb-35{margin-bottom: 35px!important;}
  .xs-mb-40{margin-bottom: 40px!important;}
  .xs-mb-60{margin-bottom: 60px!important;}
  .xs-mb-80{margin-bottom: 80px!important;}
  .xs-mb-120{margin-bottom: 120px!important;}

  .xs-my-0{margin-top: 0px!important; margin-bottom: 0px!important;}
  .xs-my-1{margin-top: 1px!important; margin-bottom: 1px!important;}
  .xs-my-2{margin-top: 2px!important; margin-bottom: 2px!important;}
  .xs-my-3{margin-top: 3px!important; margin-bottom: 3px!important;}
  .xs-my-5{margin-top: 5px!important; margin-bottom: 5px!important;}
  .xs-my-8{margin-top: 8px!important; margin-bottom: 8px!important;}
  .xs-my-10{margin-top: 10px!important; margin-bottom: 10px!important;}
  .xs-my-15{margin-top: 15px!important; margin-bottom: 15px!important;}
  .xs-my-20{margin-top: 20px!important; margin-bottom: 20px!important;}
  .xs-my-25{margin-top: 25px!important; margin-bottom: 25px!important;}
  .xs-my-30{margin-top: 30px!important; margin-bottom: 30px!important;}
  .xs-my-35{margin-top: 35px!important; margin-bottom: 35px!important;}
  .xs-my-40{margin-top: 40px!important; margin-bottom: 40px!important;}
  .xs-my-60{margin-top: 60px!important; margin-bottom: 60px!important;}
  .xs-my-80{margin-top: 80px!important; margin-bottom: 80px!important;}
  .xs-my-120{margin-top: 120px!important; margin-bottom: 120px!important;}

  .xs-ml-0{margin-left: 0px!important;}
  .xs-ml-1{margin-left: 1px!important;}
  .xs-ml-2{margin-left: 2px!important;}
  .xs-ml-3{margin-left: 3px!important;}
  .xs-ml-5{margin-left: 5px!important;}
  .xs-ml-8{margin-left: 8px!important;}
  .xs-ml-10{margin-left: 10px!important;}
  .xs-ml-15{margin-left: 15px!important;}
  .xs-ml-20{margin-left: 20px!important;}
  .xs-ml-25{margin-left: 25px!important;}
  .xs-ml-30{margin-left: 30px!important;}
  .xs-ml-35{margin-left: 35px!important;}
  .xs-ml-40{margin-left: 40px!important;}
  .xs-ml-60{margin-left: 60px!important;}
  .xs-ml-80{margin-left: 80px!important;}
  .xs-ml-120{margin-left: 120px!important;}

  .xs-mr-0{margin-right: 0px!important;}
  .xs-mr-1{margin-right: 1px!important;}
  .xs-mr-2{margin-right: 2px!important;}
  .xs-mr-3{margin-right: 3px!important;}
  .xs-mr-5{margin-right: 5px!important;}
  .xs-mr-8{margin-right: 8px!important;}
  .xs-mr-10{margin-right: 10px!important;}
  .xs-mr-15{margin-right: 15px!important;}
  .xs-mr-20{margin-right: 20px!important;}
  .xs-mr-25{margin-right: 25px!important;}
  .xs-mr-30{margin-right: 30px!important;}
  .xs-mr-35{margin-right: 35px!important;}
  .xs-mr-40{margin-right: 40px!important;}
  .xs-mr-60{margin-right: 60px!important;}
  .xs-mr-80{margin-right: 80px!important;}
  .xs-mr-120{margin-right: 120px!important;}

  .xs-mx-0{margin-left: 0px!important; margin-right: 0px!important;}
  .xs-mx-1{margin-left: 1px!important; margin-right: 1px!important;}
  .xs-mx-2{margin-left: 2px!important; margin-right: 2px!important;}
  .xs-mx-3{margin-left: 3px!important; margin-right: 3px!important;}
  .xs-mx-5{margin-left: 5px!important; margin-right: 5px!important;}
  .xs-mx-8{margin-left: 8px!important; margin-right: 8px!important;}
  .xs-mx-10{margin-left: 10px!important; margin-right: 10px!important;}
  .xs-mx-15{margin-left: 15px!important; margin-right: 15px!important;}
  .xs-mx-20{margin-left: 20px!important; margin-right: 20px!important;}
  .xs-mx-25{margin-left: 25px!important; margin-right: 25px!important;}
  .xs-mx-30{margin-left: 30px!important; margin-right: 30px!important;}
  .xs-mx-35{margin-left: 35px!important; margin-right: 35px!important;}
  .xs-mx-40{margin-left: 40px!important; margin-right: 40px!important;}
  .xs-mx-60{margin-left: 60px!important; margin-right: 60px!important;}
  .xs-mx-80{margin-left: 80px!important; margin-right: 80px!important;}
  .xs-mx-120{margin-left: 120px!important; margin-right: 120px!important;}




  .xs-mt--0{margin-top: -0px!important;}
  .xs-mt--3{margin-top: -3px!important;}
  .xs-mt--5{margin-top: -5px!important;}
  .xs-mt--10{margin-top: -10px!important;}
  .xs-mt--15{margin-top: -15px!important;}
  .xs-mt--20{margin-top: -20px!important;}
  .xs-mt--25{margin-top: -25px!important;}
  .xs-mt--30{margin-top: -30px!important;}
  .xs-mt--35{margin-top: -35px!important;}
  .xs-mt--40{margin-top: -40px!important;}
  .xs-mt--60{margin-top: -60px!important;}
  .xs-mt--80{margin-top: -80px!important;}
  .xs-mt--120{margin-top: -120px!important;}

  .xs-mb--0{margin-bottom: -0px!important;}
  .xs-mb--3{margin-bottom: -3px!important;}
  .xs-mb--5{margin-bottom: -5px!important;}
  .xs-mb--10{margin-bottom: -10px!important;}
  .xs-mb--15{margin-bottom: -15px!important;}
  .xs-mb--20{margin-bottom: -20px!important;}
  .xs-mb--25{margin-bottom: -25px!important;}
  .xs-mb--30{margin-bottom: -30px!important;}
  .xs-mb--35{margin-bottom: -35px!important;}
  .xs-mb--40{margin-bottom: -40px!important;}
  .xs-mb--60{margin-bottom: -60px!important;}
  .xs-mb--80{margin-bottom: -80px!important;}
  .xs-mb--120{margin-bottom: -120px!important;}

  .xs-my--0{margin-top: -0px!important; margin-bottom: -0px!important;}
  .xs-my--3{margin-top: -3px!important; margin-bottom: -3px!important;}
  .xs-my--5{margin-top: -5px!important; margin-bottom: -5px!important;}
  .xs-my--10{margin-top: -10px!important; margin-bottom: -10px!important;}
  .xs-my--15{margin-top: -15px!important; margin-bottom: -15px!important;}
  .xs-my--20{margin-top: -20px!important; margin-bottom: -20px!important;}
  .xs-my--25{margin-top: -25px!important; margin-bottom: -25px!important;}
  .xs-my--30{margin-top: -30px!important; margin-bottom: -30px!important;}
  .xs-my--35{margin-top: -35px!important; margin-bottom: -35px!important;}
  .xs-my--40{margin-top: -40px!important; margin-bottom: -40px!important;}
  .xs-my--60{margin-top: -60px!important; margin-bottom: -60px!important;}
  .xs-my--80{margin-top: -80px!important; margin-bottom: -80px!important;}
  .xs-my--120{margin-top: -120px!important; margin-bottom: -120px!important;}

  .xs-ml--0{margin-left: -0px!important;}
  .xs-ml--3{margin-left: -3px!important;}
  .xs-ml--5{margin-left: -5px!important;}
  .xs-ml--10{margin-left: -10px!important;}
  .xs-ml--15{margin-left: -15px!important;}
  .xs-ml--20{margin-left: -20px!important;}
  .xs-ml--25{margin-left: -25px!important;}
  .xs-ml--30{margin-left: -30px!important;}
  .xs-ml--35{margin-left: -35px!important;}
  .xs-ml--40{margin-left: -40px!important;}
  .xs-ml--60{margin-left: -60px!important;}
  .xs-ml--80{margin-left: -80px!important;}
  .xs-ml--120{margin-left: -120px!important;}

  .xs-mr--0{margin-right: -0px!important;}
  .xs-mr--3{margin-right: -3px!important;}
  .xs-mr--5{margin-right: -5px!important;}
  .xs-mr--10{margin-right: -10px!important;}
  .xs-mr--15{margin-right: -15px!important;}
  .xs-mr--20{margin-right: -20px!important;}
  .xs-mr--25{margin-right: -25px!important;}
  .xs-mr--30{margin-right: -30px!important;}
  .xs-mr--35{margin-right: -35px!important;}
  .xs-mr--40{margin-right: -40px!important;}
  .xs-mr--60{margin-right: -60px!important;}
  .xs-mr--80{margin-right: -80px!important;}
  .xs-mr--120{margin-right: -120px!important;}

  .xs-mx--0{margin-left: -0px!important; margin-right: -0px!important;}
  .xs-mx--3{margin-left: -3px!important; margin-right: -3px!important;}
  .xs-mx--5{margin-left: -5px!important; margin-right: -5px!important;}
  .xs-mx--10{margin-left: -10px!important; margin-right: -10px!important;}
  .xs-mx--15{margin-left: -15px!important; margin-right: -15px!important;}
  .xs-mx--20{margin-left: -20px!important; margin-right: -20px!important;}
  .xs-mx--25{margin-left: -25px!important; margin-right: -25px!important;}
  .xs-mx--30{margin-left: -30px!important; margin-right: -30px!important;}
  .xs-mx--35{margin-left: -35px!important; margin-right: -35px!important;}
  .xs-mx--40{margin-left: -40px!important; margin-right: -40px!important;}
  .xs-mx--60{margin-left: -60px!important; margin-right: -60px!important;}
  .xs-mx--80{margin-left: -80px!important; margin-right: -80px!important;}
  .xs-mx--120{margin-left: -120px!important; margin-right: -120px!important;}

}




/* components */
/* SnackBar */
.snackbar_container {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  max-width: 350px;
  z-index: 99999989;
  /* overflow: hidden; */
  padding: 0 20px;
}

.snackbar_container._top_left {
  bottom: unset;
  right: unset;
  top: 0;
  left: 0;
}

.snackbar_container._top_center {
  top: 40px;
  bottom: unset;
  left: 50%;
  right: unset;
  transform: translateX(-50%);
}

.snackbar_container._top_right {
  bottom: unset;
  right: 0;
  left: unset;
  top: 0;
}

.snackbar_container._bottom_left {
  bottom: 0;
  right: unset;
  left: 0;
  top: unset;
}

.snackbar_container._bottom_center {
  bottom: 20px;
  right: unset;
  left: 50%;
  top: unset;
  transform: translateX(-50%);
}

.snackbar_container._fixed {
  position: fixed;
}

.snackbar_container .snackbar_wrapper {
  /* overflow: hidden; */
  height: auto;
  margin: 0;
  display: flex;
  width: 100%;
  transition-property: all;
  transition-timing-function: ease;
  transition-duration: 0.5s;
}

.snackbar {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 14px;
  /* background-color: #333; */
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
  /* border: 1px solid #000; */
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  padding: 16px;
  font-weight: bold;
  flex-grow: 1;
  text-align: left;
}
.snackbar > i {
  color: #fe5000;
  margin-right: 10px;
  font-size: 24px;
}
.snackbar > img {
  margin-right: 10px;
}
.snackbar a {
  display: flex;
  align-items: center;
  position: absolute;
  right: 16px;
  color: #fff;
  line-height: 1;
}
.snackbar a > span {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.snackbar a > i {
  color: #fff;
  font-size: 24px;
}
.snackbar i::before {
  margin: 0px;
}

.snackbar ._message {
  display: inline-block;
  line-height: 1.7;
}

.snackbar ._action {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
  color: #fe5000;
  cursor: pointer;
  line-height: 1;
}

.snackbar ._action:hover {
  background-color: #333;
}

.snackbar ._close {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 10px;
  user-select: none;
  color: #fff;
}




/* Modal */
.customModal {
  position: fixed;
  z-index: 999999999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.customModal ._inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  width: 100%;
  max-width: 280px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 10px 42px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.customModal ._inner ._content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.customModal ._inner ._content img {
  max-width: 100%;
  margin-bottom: 8px;
}
.customModal ._inner ._content i {
  font-size: 110px;
  margin-top: -0.3em;
  margin-bottom: -0.2em;
  color: #c4c4c4;
}
.customModal ._inner ._content ._title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.customModal ._inner ._content ._body {
  font-size: 14px;
  color: #333;
  margin-top: 4px;
}
.customModal ._inner ._btns {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.customModal ._inner ._btns button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  outline: none;
  border: none;
  width: 100%;
  height: 52px;
  border-radius: 16px;
  order: 1;
}

.customModal ._inner ._btns button._action {
  background-color: #333;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  order: 0;
}

.customModal ._inner ._btns button._cancel {
  color: #999;
  font-size: 14px;
  height: 20px;
}
.customModal.confirm ._inner ._btns button._cancel {
  color: #999999;
  font-size: 16px;
  font-weight: 700;
  height: 52px;
}
.customModal.confirm ._inner ._btns button._cancel._orange {
  background-color: var(--brand-primary) !important;
  color: #fff;
}
.customModal ._inner ._btns button._action._orange {
  background-color: var(--brand-primary) !important;
}
.customModal.confirm ._inner ._btns {
  flex-direction: row;
  gap: 8px;
  margin-bottom: 0;
}
.customModal.confirm ._inner ._btns button {
  background-color: #eeeeee;
  order: 0;
}
.customModal.confirm ._inner ._btns button._action {
  background-color: #333;
  order: 1;
}

.customModal.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}



/* BottomSheet */
ui-bottom-sheet {
  display: none;
}
ui-bottom-sheet[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.customBottomsheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999982;
  visibility: visible;
  transition: opacity 0.2s, visibility 0.2s;

  /* max-width: 420px; */
  margin: 0 auto;
  /* max-width: 540px; */
}
.customBottomsheet._modal {
  justify-content: center;
}
.customBottomsheet .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999980;
  background: rgba(0, 0, 0, 0.5);
}
.customBottomsheet .sheet__wrapper {
  display: flex;
  flex-direction: column;
  z-index: 99999983;
  border-radius: 18px 18px 0 0;
  background: #fff;
  position: relative;
  overflow-y: hidden;
  --default-transitions: transform 0.2s, border-radius 0.2s;
  transition: var(--default-transitions);
  transform: translateY(0);
  max-height: 100vh;
  width: 100%;

  max-width: 540px;
}
.customBottomsheet._modal .sheet__wrapper {
  width: 40%;
  max-width: 500px;
  border-radius: 18px;
}
.customBottomsheet .sheet__wrapper .controls {
  display: flex;
  flex-direction: column;
  padding: 0 30px 20px;
}
.customBottomsheet .sheet__wrapper .controls .title__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
.customBottomsheet .sheet__wrapper .controls .title__wrapper .title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.customBottomsheet .sheet__wrapper:not(.not-selectable) {
  transition: var(--default-transitions), height 0.2s;
}
.customBottomsheet[aria-hidden="true"] .sheet__wrapper {
  transform: translateY(100%);
}
.customBottomsheet .draggable-area {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
  padding: 12px;
  cursor: grab;
}
.customBottomsheet .draggable-thumb {
  width: 50px;
  height: 5px;
  background: #eeeeee;
  border-radius: 100px;
}
.customBottomsheet._modal .draggable-thumb {
  display: none;
}
.customBottomsheet .close-sheet {
  position: absolute;
  right: 0px;
  background: transparent;
  border: none;
  z-index: 9;
  padding:0;
  height: auto;
}
.customBottomsheet .close-sheet > i {
  background: url("/assets/images/icon_x.svg") center center / 61% no-repeat;
}
.customBottomsheet .content {
  padding: 0 30px 30px;
  height: 100%;
  overflow-y: auto;
  font-size: 14px;
}
.customBottomsheet .content img {
  max-width: 100% !important;
}
.customBottomsheet .sheet__wrapper.min__height {
  min-height: 30vh;
}
.customBottomsheet .sheet__wrapper.fullscreen {
  height: 100vh !important;
  border-radius: 0;
}
.customBottomsheet .sheet__wrapper .controls {
  padding: 0 20px 0;
}
.customBottomsheet .content {
  padding: 0 20px 20px;
}


/* pc bottomsheet -> modal */
@media (min-width: 769px) {
  .customBottomsheet .content{
    padding: 20px;
  }
  .customBottomsheet .sheet__wrapper{
    max-height: initial;
    display: block;
    margin: auto;
    border-radius: 12px;
    height: auto !important;
  }
  .customBottomsheet .sheet__wrapper .controls{
    display: none
  }
  .customBottomsheet .sheet__wrapper.fullscreen {
    height: calc(100vh - 40px) !important;
    border-radius: 12px;
  }
}

/* 슬라이더 */
.ui-slider {
  display: block;
  position: relative;
  overflow-y: scroll;
  isolation: isolate;
}
.ui-slider * {
  line-height: 1;
  margin: 0;
  padding: 0;
}
.ui-slider ._control {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  width: 32px;
  height: 32px;
  z-index: 1;
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.ui-slider ._control._prev {
  background: url("https://www.jumpit.co.kr/App/build/static/media/btn-prev.85cf9174.svg")
    center center / 32px 32px no-repeat;
  left: 16px;
}
.ui-slider ._control._next {
  background: url("https://www.jumpit.co.kr/App/build/static/media/btn-next.6acd9890.svg")
    center center / 32px 32px no-repeat;
  right: 16px;
}
.ui-slider ._rail {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  height: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  position: relative;
  height: 310px;
}
.ui-slider ._rail > * {
  scroll-snap-align: start;
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  scroll-snap-stop: always;
}
.ui-slider ._rail > * > img {
  position: relative;
  width: auto;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  outline-offset: -1px;
}
.ui-slider ._pager {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 4px 10px;
  background: rgba(51, 51, 51, 0.5);
  border-radius: 40px;
  color: rgb(255, 255, 255);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.ui-slider ._expand_slider_btn,
.ui-slider ._expand_slider_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 32px;
  height: 32px;
  background: rgba(51, 51, 51, 0.5);
  border-radius: 60px;
  border: none;
}
.ui-slider ._expand_slider_btn > img,
.ui-slider ._expand_slider_btn > img {
  width: 20px;
  height: 20px;
}



hr{
    margin: 0;
    width: 100%;
    background:rgba(0,0,0,0.1);
    height:1px;
    border:0;
}
button{
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;

    border: none;
    padding: 0 2em;
    font-weight: 700;
    font-size: 1.2em;
    color: #333;
    white-space:nowrap;
}
button.bg-white{
    background-color: #FFF !important;
}
button.bg-primary{
    background-color: #007fff;
    color: #FFF;
}
button.bg-black{
    background-color: #000;
    color: #FFF;
}
button.bg-red{
    background-color: #ff0101;
    color: #FFF;
}
button.outline{
    background-color: transparent;
    border: 1px solid #eee;
    color: #333;
}
button.disabled{
    /* background-color: #cbcbcb !important; */
    background-color: #f1f1f1 !important;
    color: #cbcbcb;
    pointer-events: none;
    cursor: not-allowed;
}
.cursor-pointer:active,
button:active{
    filter: brightness(90%);
}
button .pos_left{
    position: absolute;
    left: 1em;
}
button.loading{
    color: transparent;
    pointer-events: none;
}
button.loading:after{
    content: '';
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    background-image: url('/assets/loading-circle-white.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
button.circle{
    width: 52px;
    padding: 0;
    border-radius: 100px !important;
}
button.sm{
    height: 36px;
    border-radius: 14px;
    padding: 0 1em;
    font-size: 0.8em;
}
button.mini{
    height: 2.2em;
    border-radius: 10px;
    padding: 0 0.5em;
    font-size: 0.8em;
}
button.sm.loading:after{
  /* width: 18px;
  height: 18px; */
}
button.circle.sm{
    width: 36px;
}
input, textarea, select{
    height: 52px;
    border-radius: 18px;
    border: none;
    padding: 0 1em;
    font-weight: 600;
    font-size: 1em;
    color: #333;
    background-color: #fcfcfc;
    border: 1px solid rgba(0,0,0,0.05);
}
textarea{
    padding: 1em;
    min-height: 5em;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"] + label{
    position: relative;
    height: 1.8em;
    line-height: 1.8em;
    width: auto;
    padding-left: 2.3em;
    padding-right: 0.5em;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5em;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    font-weight: 600;
}
input[type="checkbox"] + label::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8em;
    height: 1.8em;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.7em;
    box-sizing: border-box;
}
input[type="checkbox"]:checked + label::before{
    /* border-color: #6e0022; */
    border-color: rgba(0,0,0,0.5);
}
input[type="checkbox"]:checked + label::after{
    content:'';
    width: 1.8em;
    height: 1.8em;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: #007fff; */
    background-color: #000;
    border-radius: 0.7em;
    transform: scale(0.6);
    box-sizing: border-box;
}
input[type="radio"]{
    display: none;
}
input[type="radio"] + label{
    position: relative;
    height: 1.8em;
    line-height: 1.8em;
    width: auto;
    padding-left: 2.3em;
    padding-right: 0.5em;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5em;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    font-weight: 600;
}
input[type="radio"] + label::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8em;
    height: 1.8em;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    box-sizing: border-box;
}
input[type="radio"]:checked + label::before{
    /* border-color: #6e0022; */
    border-color: rgba(0,0,0,0.5);
}
input[type="radio"]:checked + label::after{
    content:'';
    width: 1.8em;
    height: 1.8em;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: #007fff; */
    background-color: #000;
    border-radius: 50%;
    transform: scale(0.6);
    box-sizing: border-box;
}




/* components */
.ui.avatar{
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.ui.avatar.sm{
    width: 40px;
    height: 40px;
}
.ui.avatar.sm{
    width: 28px;
    height: 28px;
}
.ui.avatar.lg{
    width: 84px;
    height: 84px;
}
.ui.avatar > img{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: #d1d1d1;
}
.ui.avatar > img:nth-child(1){
    border: 1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
}
.ui.avatar > img:nth-child(2){
    z-index: 0;
    transform: scale(1.2);
    filter: blur(0.5em) brightness(1.5);
    opacity: 0.5;
    top: 0.4em;
}
.ui.avatars{
    display: flex;
    align-items: center;
}
.ui.avatars > span{
    font-size: 0.7em;
    margin-left: 2em;
    font-weight: 400;
    color: #555;
}
.ui.avatars > .ui.avatar{
    margin-right: -0.9em;
    display: none;
}
.ui.avatars > .ui.avatar >img:first-child{
    border: 1.5px solid #FFF;
}
.ui.avatars > .ui.avatar:nth-child(1), .ui.avatars > .ui.avatar:nth-child(2), .ui.avatars > .ui.avatar:nth-child(3){
    display: block;
}

.ui.instIcon{
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.ui.avatar > .ui.instIcon{
    position: absolute;
    z-index: 1;
    width: 55%;
    height: 55%;
    right: -8%;
    bottom: -8%;
    border: 2px solid #FFF;
    background-color: #FFF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
}

pre{
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 10px;
  background: #333;
  color: rgb(0,255,0);
  position: fixed;
  bottom: 0;
  left:0;
  max-width: 400px;

  white-space: pre-wrap;
}
.box-shadow{
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
}





.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown > button {
  border: none;
  outline: none;
  background: transparent;
}
.dropdown > nav {
  position: absolute;
  z-index: 99;
  top: 100%;
  left: inherit;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: 300ms all;
  border-radius: 12px;
  background-color: #FFF;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  width: auto;
  min-width: 104px;
  overflow: hidden;
  margin-top: 6px;
}
.dropdown.left > nav {
  left: 0;
  right: inherit;
}
.dropdown > nav > ul {
  /* padding: 0.5em 0; */
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dropdown > nav > ul > li {
  padding: 0;
}
.dropdown > nav > ul > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 3em;
  font-size: 14px;
  line-height: 3em;
  color: #333 !important;
  font-weight: 500;
  padding: 0 1em;
  border-radius: 0;
  white-space:nowrap;
}
.dropdown > nav > ul > li > a span {
  margin-right: 1em;
  word-break: keep-all;
  white-space: nowrap;
}
.dropdown > nav > ul > li > a:hover {
  background: aliceblue;
}
.dropdown > nav > ul > li > a.dot:after{
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  overflow: hidden;
  background-color: tomato;
  display: inline-block;
  vertical-align: super;
  margin-left: 0.3em;
  -webkit-animation: blinker 1s infinite;
  animation: blinker 1s infinite;
}
.dropdown:focus-within > nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0.25rem);
}

.dropdown > nav > ul > li.border{
  border: none!important;
  box-shadow: none!important;
  height: 9px;
  position: relative;
}
.dropdown > nav > ul > li.border:after{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -1px;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.08);
}


.ui.badge{
  height: 2.2em;
  border-radius: 2.2em;
  overflow: hidden;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  font-weight: 600;
  color: #007fff;
  border: 1px solid #007fff;
}
.ui.badge.fill{
  background-color: #007fff;
  color: #FFF;
  border: 1px solid #007fff;
}
.ui.badge.sm{
  height: 1.8em;
  font-size: 0.8em;
  padding: 0 0.5em;
}
.ui.thumbnail{
  background-size: cover;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}




* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
*:focus {
  outline: none !important;
}



.blink {
  -webkit-animation: blinker 1s step-start infinite;
  animation: blinker 1s step-start infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.2;
  }
}




.gap2 { gap: 2px !important; }
.gap3 { gap: 3px !important; }
.gap4 { gap: 4px !important; }
.gap5 { gap: 5px !important; }
.gap8 { gap: 8px !important; }
.gap10 { gap: 10px !important; }
.gap12 { gap: 12px !important; }
.gap13 { gap: 13px !important; }
.gap16 { gap: 16px !important; }
.gap24 { gap: 24px !important; }
.gap15 { gap: 15px !important; }
.gap20 { gap: 20px !important; }
.gap25 { gap: 25px !important; }
.gap30 { gap: 30px !important; }
.gap35 { gap: 35px !important; }
.gap40 { gap: 40px !important; }


.cubic02{ transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); }
.cubic03{ transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.cubic04{ transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.cubic05{ transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.cubic1, .cubic10{ transition: 1.0s cubic-bezier(0.25, 1, 0.5, 1); }


.animShake {
  animation: one-time-animation 0.3s normal ease-in-out;
  animation-iteration-count: 1;
}
.animShakeAfter05s {
  animation: one-time-animation 0.3s normal ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
}
.animShakeAfter03s {
  animation: one-time-animation 0.3s normal ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 0.3s;
}
.animShakeAfter1s {
  animation: one-time-animation 0.3s normal ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 1s;
}
.animShakeAfter2s {
  animation: one-time-animation 0.3s normal ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 2s;
}
@keyframes one-time-animation {
  0% {
    transform: translateX(-0.3em);
  }
  20% {
    transform: translateX(0.3em);
  }
  40% {
    transform: translateX(-0.3em);
  }
  60% {
    transform: translateX(0.3em);
  }
  80% {
    transform: translateX(-0.3em);
  }
  100% {
    transform: translateX(0em);
  }
}

.animGlancing{
  position: relative;
  overflow: hidden;
}
.animGlancing:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
  animation: animGlancing 5s infinite;
  transform: skew(10deg, 0);
}
@keyframes animGlancing{
  0%{
    left: -150%;
    opacity: 0;
  }
  25%{
    left: -150%;
    opacity: 1;
  }
  70%{
    left: 150%;
    opacity: 1;
  }
  71%{
    left: 150%;
    opacity: 0;
  }
  100%{
    left: 150%;
    opacity: 0;
  }
}

.hidden{
  visibility: hidden;
}


.border{
  /* box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important; */
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  border: none;
}
.border .border{
  box-shadow: none;
  border: 1px solid #eee;
}
.border-gray{
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(200, 200, 200, 0.9) 0px 0px 0px 1px !important;
  border: none;
}

i.help{
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  background-color: gray;
  border-radius: 1em;
  cursor: pointer;
  vertical-align: middle;
}
i.help:after{
  content: '?';
  color: #FFF;
  font-weight: 900;
  font-size: 0.6em;
  letter-spacing: 0;
  line-height: 1;
  font-style: normal;
}
i.help:active{
  opacity: 0.5;
}


.talkui{
  background-color: rgb(171, 194, 210); 
  padding: 20px 20px 35px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.talkui > li{
  display: grid; 
  grid-template-columns: 40px 1fr; 
  padding-right: 80px; 
  align-items: flex-start; 
  gap: 10px;
}
.talkui > li > img{
  width: 40px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%;
}
.talkui > li > .wrap{
  display: flex; flex-direction: column; gap: 7px; position: relative; align-items: flex-start;
}
.talkui > li > .wrap .nick{
  font-size: 14px; color: rgba(0, 0, 0, 0.9); font-weight: bold;
}
.talkui > li > .wrap .message{
  border-radius: 14px; background: rgb(255, 255, 255); position: relative;
}
.talkui > li > .wrap .message:after{
  content: ''; position: absolute; background: #FFF; width: 10px; height: 10px; left: -2px; top: 6px; transform: skew(40deg, 0deg);
}
.talkui > li > .wrap .message.withTitle:after{
  background: rgb(254, 229, 2);
}
.talkui > li > .wrap .message.withTitle:before{
  content: attr(data-title); padding: 13px 15px; font-weight: 700; font-size: 1em; line-height: 1; color: rgba(0, 0, 0, 0.9); background-color: rgb(254, 229, 2); border-radius: 14px 14px 0px 0px; width: 100%; display: block;
}
.talkui > li > .wrap .message.withTitle.bg-red:after{
  background: rgb(174 18 18); color: #FFF;
}
.talkui > li > .wrap .message.withTitle.bg-red:before{
  background: rgb(174 18 18); color: #FFF;
}
.talkui > li > .wrap .message > .body{
  padding: 12px 15px; font-weight: 500; font-size: 1em; line-height: 1.5; color: rgb(0, 0, 0);
}
.talkui > li > .wrap .message > .body img{
  /* max-width: 50% !important; */
  margin-top: 0.3em;
  display: block;
}
.talkui > li > .wrap .time{
  font-size: 0.75em;
  padding: 2px 0 0 8px;
  line-height: 1;
  opacity: 0.8;
}
.talkui > li.r{
    display: flex;
    justify-content: flex-end;
    padding-left: 80px;
    padding-right: 0;
}
.talkui > li.r > img{
  display: none;
}
.talkui > li.r > .wrap{
  align-items: flex-end;
}
.talkui > li.r > .wrap .message:after{
  left: inherit;
  right: -2px;
  transform: skew(-40deg, 0deg);
}
.talkui > li.r > .wrap .nick{
  text-align: right;
}
.talkui > li.r > .wrap .message.withTitle:before{
}



.marquee_wrap{
  position: relative;
  overflow: hidden;
}
.marquee_wrap:before, .marquee_wrap:after{
  content: '';
  width: 40px;
  height: 140%;
  position: absolute;
  top: -20%;
}
.marquee_wrap:before{
  left: 0;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.marquee_wrap:before{
  right: 0;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.marquee {
  display: flex;
  overflow: hidden;
  transition: none !important;
  /* gap: 1em; */
  line-height: 1;
  height: 1em;
}
.marquee.reverse {
  flex-direction: row-reverse;
}
.marquee .marquee-text {
  padding: 0 0.6em 0 0 ;
  margin: 0;
  font-size: inherit;
  white-space: nowrap;
  transition: none !important;
  line-height: 1;
}
.grayscale{
  filter: grayscale(1);
}





dl{
  display: grid;
  grid-template-columns: minmax(50px, auto) 1fr;
  gap: 15px 15px;
  /* align-items: center; */
}
dl > dt{
  padding-top: 0.1em;
  font-size: 0.92em;
}
dl > dd{
  min-height: 1.9em;
}

.imgfit{
  aspect-ratio: 1 / 1; object-fit: cover;
}