@charset "UTF-8";
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
}

img {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  line-height: 100%;
}

ul {
  list-style: none;
}

input[type=button] {
  border: none;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

select {
  appearance: none; /* 隱藏原生樣式 */
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none; /* Firefox */
  background: transparent; /* 移除背景 */
  border: none; /* 移除邊框 */
}

.my-bg-my-primary-950 {
  background-color: #0B2846 !important;
}

.my-bg-my-primary-900 {
  background-color: #10406A !important;
}

.my-bg-my-primary-800 {
  background-color: #0C4B80 !important;
}

.my-bg-my-primary-700 {
  background-color: #0A599A !important;
}

.my-bg-my-primary-600 {
  background-color: #0A6FBF !important;
}

.my-bg-my-primary-500 {
  background-color: #178DE0 !important;
}

.my-bg-my-primary-400 {
  background-color: #4FAFF1 !important;
}

.my-bg-my-primary-300 {
  background-color: #82C5F7 !important;
}

.my-bg-my-primary-200 {
  background-color: #BDDFFA !important;
}

.my-bg-my-primary-100 {
  background-color: #E1EFFD !important;
}

.my-bg-my-primary-50 {
  background-color: #F1F8FE !important;
}

.my-bg-my-secondary-950 {
  background-color: #1D1F25 !important;
}

.my-bg-my-secondary-900 {
  background-color: #363A44 !important;
}

.my-bg-my-secondary-800 {
  background-color: #3C4250 !important;
}

.my-bg-my-secondary-700 {
  background-color: #464D5E !important;
}

.my-bg-my-secondary-600 {
  background-color: #565F73 !important;
}

.my-bg-my-secondary-500 {
  background-color: #6B768C !important;
}

.my-bg-my-secondary-400 {
  background-color: #8993A7 !important;
}

.my-bg-my-secondary-300 {
  background-color: #B3B9C6 !important;
}

.my-bg-my-secondary-200 {
  background-color: #D6D9E1 !important;
}

.my-bg-my-secondary-100 {
  background-color: #EDEEF1 !important;
}

.my-bg-my-secondary-50 {
  background-color: #F6F7F9 !important;
}

.my-bg-my-grey-950 {
  background-color: #262626 !important;
}

.my-bg-my-grey-900 {
  background-color: #313131 !important;
}

.my-bg-my-grey-800 {
  background-color: #383838 !important;
}

.my-bg-my-grey-700 {
  background-color: #434343 !important;
}

.my-bg-my-grey-600 {
  background-color: #515151 !important;
}

.my-bg-my-grey-500 {
  background-color: #666666 !important;
}

.my-bg-my-grey-400 {
  background-color: #818181 !important;
}

.my-bg-my-grey-300 {
  background-color: #A4A4A4 !important;
}

.my-bg-my-grey-200 {
  background-color: #C8C8C8 !important;
}

.my-bg-my-grey-100 {
  background-color: #E3E3E3 !important;
}

.my-bg-my-grey-50 {
  background-color: #F7F7F7 !important;
}

.my-bg-my-grey-0 {
  background-color: #FFFFFF !important;
}

.my-bg-my-success-950 {
  background-color: #0B2B08 !important;
}

.my-bg-my-success-900 {
  background-color: #1F4E19 !important;
}

.my-bg-my-success-800 {
  background-color: #255F1C !important;
}

.my-bg-my-success-700 {
  background-color: #29781D !important;
}

.my-bg-my-success-600 {
  background-color: #309920 !important;
}

.my-bg-my-success-500 {
  background-color: #47CB32 !important;
}

.my-bg-my-success-400 {
  background-color: #67D355 !important;
}

.my-bg-my-success-300 {
  background-color: #9BE78E !important;
}

.my-bg-my-success-200 {
  background-color: #C7F3BF !important;
}

.my-bg-my-success-100 {
  background-color: #E2FADE !important;
}

.my-bg-my-success-50 {
  background-color: #F4FCF1 !important;
}

.my-bg-my-errorNote-950 {
  background-color: #481007 !important;
}

.my-bg-my-errorNote-900 {
  background-color: #842718 !important;
}

.my-bg-my-errorNote-800 {
  background-color: #A02714 !important;
}

.my-bg-my-errorNote-700 {
  background-color: #C12C14 !important;
}

.my-bg-my-errorNote-600 {
  background-color: #E5381D !important;
}

.my-bg-my-errorNote-500 {
  background-color: #F8553B !important;
}

.my-bg-my-errorNote-400 {
  background-color: #FF735D !important;
}

.my-bg-my-errorNote-300 {
  background-color: #FFADA0 !important;
}

.my-bg-my-errorNote-200 {
  background-color: #FFCFC7 !important;
}

.my-bg-my-errorNote-100 {
  background-color: #FFE5E1 !important;
}

.my-bg-my-errorNote-50 {
  background-color: #FFF3F1 !important;
}

.my-text-my-primary-950 {
  color: #0B2846 !important;
}

.my-text-my-primary-900 {
  color: #10406A !important;
}

.my-text-my-primary-800 {
  color: #0C4B80 !important;
}

.my-text-my-primary-700 {
  color: #0A599A !important;
}

.my-text-my-primary-600 {
  color: #0A6FBF !important;
}

.my-text-my-primary-500 {
  color: #178DE0 !important;
}

.my-text-my-primary-400 {
  color: #4FAFF1 !important;
}

.my-text-my-primary-300 {
  color: #82C5F7 !important;
}

.my-text-my-primary-200 {
  color: #BDDFFA !important;
}

.my-text-my-primary-100 {
  color: #E1EFFD !important;
}

.my-text-my-primary-50 {
  color: #F1F8FE !important;
}

.my-text-my-secondary-950 {
  color: #1D1F25 !important;
}

.my-text-my-secondary-900 {
  color: #363A44 !important;
}

.my-text-my-secondary-800 {
  color: #3C4250 !important;
}

.my-text-my-secondary-700 {
  color: #464D5E !important;
}

.my-text-my-secondary-600 {
  color: #565F73 !important;
}

.my-text-my-secondary-500 {
  color: #6B768C !important;
}

.my-text-my-secondary-400 {
  color: #8993A7 !important;
}

.my-text-my-secondary-300 {
  color: #B3B9C6 !important;
}

.my-text-my-secondary-200 {
  color: #D6D9E1 !important;
}

.my-text-my-secondary-100 {
  color: #EDEEF1 !important;
}

.my-text-my-secondary-50 {
  color: #F6F7F9 !important;
}

.my-text-my-grey-950 {
  color: #262626 !important;
}

.my-text-my-grey-900 {
  color: #313131 !important;
}

.my-text-my-grey-800 {
  color: #383838 !important;
}

.my-text-my-grey-700 {
  color: #434343 !important;
}

.my-text-my-grey-600 {
  color: #515151 !important;
}

.my-text-my-grey-500 {
  color: #666666 !important;
}

.my-text-my-grey-400 {
  color: #818181 !important;
}

.my-text-my-grey-300 {
  color: #A4A4A4 !important;
}

.my-text-my-grey-200 {
  color: #C8C8C8 !important;
}

.my-text-my-grey-100 {
  color: #E3E3E3 !important;
}

.my-text-my-grey-50 {
  color: #F7F7F7 !important;
}

.my-text-my-grey-0 {
  color: #FFFFFF !important;
}

.my-text-my-success-950 {
  color: #0B2B08 !important;
}

.my-text-my-success-900 {
  color: #1F4E19 !important;
}

.my-text-my-success-800 {
  color: #255F1C !important;
}

.my-text-my-success-700 {
  color: #29781D !important;
}

.my-text-my-success-600 {
  color: #309920 !important;
}

.my-text-my-success-500 {
  color: #47CB32 !important;
}

.my-text-my-success-400 {
  color: #67D355 !important;
}

.my-text-my-success-300 {
  color: #9BE78E !important;
}

.my-text-my-success-200 {
  color: #C7F3BF !important;
}

.my-text-my-success-100 {
  color: #E2FADE !important;
}

.my-text-my-success-50 {
  color: #F4FCF1 !important;
}

.my-text-my-errorNote-950 {
  color: #481007 !important;
}

.my-text-my-errorNote-900 {
  color: #842718 !important;
}

.my-text-my-errorNote-800 {
  color: #A02714 !important;
}

.my-text-my-errorNote-700 {
  color: #C12C14 !important;
}

.my-text-my-errorNote-600 {
  color: #E5381D !important;
}

.my-text-my-errorNote-500 {
  color: #F8553B !important;
}

.my-text-my-errorNote-400 {
  color: #FF735D !important;
}

.my-text-my-errorNote-300 {
  color: #FFADA0 !important;
}

.my-text-my-errorNote-200 {
  color: #FFCFC7 !important;
}

.my-text-my-errorNote-100 {
  color: #FFE5E1 !important;
}

.my-text-my-errorNote-50 {
  color: #FFF3F1 !important;
}

.my-border-my-primary-950 {
  border-color: #0B2846 !important;
}

.my-border-my-primary-900 {
  border-color: #10406A !important;
}

.my-border-my-primary-800 {
  border-color: #0C4B80 !important;
}

.my-border-my-primary-700 {
  border-color: #0A599A !important;
}

.my-border-my-primary-600 {
  border-color: #0A6FBF !important;
}

.my-border-my-primary-500 {
  border-color: #178DE0 !important;
}

.my-border-my-primary-400 {
  border-color: #4FAFF1 !important;
}

.my-border-my-primary-300 {
  border-color: #82C5F7 !important;
}

.my-border-my-primary-200 {
  border-color: #BDDFFA !important;
}

.my-border-my-primary-100 {
  border-color: #E1EFFD !important;
}

.my-border-my-primary-50 {
  border-color: #F1F8FE !important;
}

.my-border-my-secondary-950 {
  border-color: #1D1F25 !important;
}

.my-border-my-secondary-900 {
  border-color: #363A44 !important;
}

.my-border-my-secondary-800 {
  border-color: #3C4250 !important;
}

.my-border-my-secondary-700 {
  border-color: #464D5E !important;
}

.my-border-my-secondary-600 {
  border-color: #565F73 !important;
}

.my-border-my-secondary-500 {
  border-color: #6B768C !important;
}

.my-border-my-secondary-400 {
  border-color: #8993A7 !important;
}

.my-border-my-secondary-300 {
  border-color: #B3B9C6 !important;
}

.my-border-my-secondary-200 {
  border-color: #D6D9E1 !important;
}

.my-border-my-secondary-100 {
  border-color: #EDEEF1 !important;
}

.my-border-my-secondary-50 {
  border-color: #F6F7F9 !important;
}

.my-border-my-grey-950 {
  border-color: #262626 !important;
}

.my-border-my-grey-900 {
  border-color: #313131 !important;
}

.my-border-my-grey-800 {
  border-color: #383838 !important;
}

.my-border-my-grey-700 {
  border-color: #434343 !important;
}

.my-border-my-grey-600 {
  border-color: #515151 !important;
}

.my-border-my-grey-500 {
  border-color: #666666 !important;
}

.my-border-my-grey-400 {
  border-color: #818181 !important;
}

.my-border-my-grey-300 {
  border-color: #A4A4A4 !important;
}

.my-border-my-grey-200 {
  border-color: #C8C8C8 !important;
}

.my-border-my-grey-100 {
  border-color: #E3E3E3 !important;
}

.my-border-my-grey-50 {
  border-color: #F7F7F7 !important;
}

.my-border-my-grey-0 {
  border-color: #FFFFFF !important;
}

.my-border-my-success-950 {
  border-color: #0B2B08 !important;
}

.my-border-my-success-900 {
  border-color: #1F4E19 !important;
}

.my-border-my-success-800 {
  border-color: #255F1C !important;
}

.my-border-my-success-700 {
  border-color: #29781D !important;
}

.my-border-my-success-600 {
  border-color: #309920 !important;
}

.my-border-my-success-500 {
  border-color: #47CB32 !important;
}

.my-border-my-success-400 {
  border-color: #67D355 !important;
}

.my-border-my-success-300 {
  border-color: #9BE78E !important;
}

.my-border-my-success-200 {
  border-color: #C7F3BF !important;
}

.my-border-my-success-100 {
  border-color: #E2FADE !important;
}

.my-border-my-success-50 {
  border-color: #F4FCF1 !important;
}

.my-border-my-errorNote-950 {
  border-color: #481007 !important;
}

.my-border-my-errorNote-900 {
  border-color: #842718 !important;
}

.my-border-my-errorNote-800 {
  border-color: #A02714 !important;
}

.my-border-my-errorNote-700 {
  border-color: #C12C14 !important;
}

.my-border-my-errorNote-600 {
  border-color: #E5381D !important;
}

.my-border-my-errorNote-500 {
  border-color: #F8553B !important;
}

.my-border-my-errorNote-400 {
  border-color: #FF735D !important;
}

.my-border-my-errorNote-300 {
  border-color: #FFADA0 !important;
}

.my-border-my-errorNote-200 {
  border-color: #FFCFC7 !important;
}

.my-border-my-errorNote-100 {
  border-color: #FFE5E1 !important;
}

.my-border-my-errorNote-50 {
  border-color: #FFF3F1 !important;
}

/*rwd*/
.my-border {
  border: 1px solid #EDEEF1 !important;
}

.my-border-0 {
  border-width: 0px !important;
}

.my-border-1 {
  border-width: 1px !important;
}

.my-border-2 {
  border-width: 2px !important;
}

.my-border-3 {
  border-width: 3px !important;
}

.my-border-4 {
  border-width: 4px !important;
}

.my-border-5 {
  border-width: 5px !important;
}

.my-border-t-1 {
  border-width: 1px 0px 0px 0px !important;
}

.my-border-t-2 {
  border-width: 2px 0px 0px 0px !important;
}

.my-border-t-3 {
  border-width: 3px 0px 0px 0px !important;
}

.my-border-t-4 {
  border-width: 4px 0px 0px 0px !important;
}

.my-border-t-5 {
  border-width: 5px 0px 0px 0px !important;
}

.my-border-x-1 {
  border-width: 1px 0px 1px 0px !important;
}

.my-border-x-2 {
  border-width: 2px 0px 2px 0px !important;
}

.my-border-x-3 {
  border-width: 3px 0px 3px 0px !important;
}

.my-border-x-4 {
  border-width: 4px 0px 4px 0px !important;
}

.my-border-x-5 {
  border-width: 5px 0px 5px 0px !important;
}

.my-border-solid {
  border-style: solid;
}

.my-border-secondary-100 {
  border-color: #EDEEF1 !important;
}

.my-border-secondary-50 {
  border-color: #F7F7F7 !important;
}

@media (max-width: 768px) {
  .my-border-b-md {
    border-bottom: 1px solid transparent !important;
  }
  .my-border-secondary-100-md {
    border-color: #EDEEF1 !important;
  }
}
@media (max-width: 570px) {
  .my-border-0-sm {
    border-width: 0px !important;
  }
  .my-border-t-sm {
    border-top: 1px solid #EDEEF1 !important;
  }
  .my-border-b-sm {
    border-bottom: 1px solid #EDEEF1 !important;
  }
  .my-border-secondary-100-sm {
    border-color: #EDEEF1 !important;
  }
}
.my-btn-icon-main {
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 0px !important;
  transition: 0.5s !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
}
.my-btn-icon-main svg {
  width: 24px !important;
  height: 24px !important;
}

.my-btn-icon-main-s {
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 0px !important;
  transition: 0.5s !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
}
.my-btn-icon-main-s svg {
  width: 24px !important;
  height: 24px !important;
}

.my-btn-icon-round {
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 0px !important;
  transition: 0.5s !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 100px !important;
}
.my-btn-icon-round svg {
  width: 24px !important;
  height: 24px !important;
}

.my-btn-icon-round-s {
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 0px !important;
  transition: 0.5s !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 100px !important;
}
.my-btn-icon-round-s svg {
  width: 24px !important;
  height: 24px !important;
}

.my-btn-arrow {
  line-height: 0px !important;
}

.my-btn-main {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: 0.5s !important;
  border-radius: 6px !important;
  padding: 6px 16px 6px 16px !important;
}
.my-btn-main .my-btn-icon {
  margin: 0 6px 0 0 !important;
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main .my-btn-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main .my-btn-text {
  line-height: 24px !important;
  font-size: 14px !important;
}
.my-btn-main .my-btn-arrow {
  margin: 0 0 0 6px !important;
}
.my-btn-main .my-btn-arrow svg {
  width: 24px !important;
  height: 24px !important;
}

.my-btn-main-s {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: 0.5s !important;
  border-radius: 6px !important;
  padding: 4px 8px 4px 8px !important;
}
.my-btn-main-s .my-btn-icon {
  margin: 0 6px 0 0 !important;
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main-s .my-btn-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main-s .my-btn-text {
  line-height: 24px !important;
  font-size: 13px !important;
}
.my-btn-main-s .my-btn-arrow {
  margin: 0 0 0 6px !important;
}
.my-btn-main-s .my-btn-arrow svg {
  width: 24px !important;
  height: 24px !important;
}

@media (max-width: 768px) {
  .my-btn-main-s-md {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: 0.5s !important;
    border-radius: 6px !important;
    padding: 4px 8px 4px 8px !important;
  }
  .my-btn-main-s-md .my-btn-icon {
    margin: 0 6px 0 0 !important;
    width: 24px !important;
    height: 24px !important;
  }
  .my-btn-main-s-md .my-btn-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  .my-btn-main-s-md .my-btn-text {
    line-height: 24px !important;
    font-size: 13px !important;
  }
  .my-btn-main-s-md .my-btn-arrow {
    margin: 0 0 0 6px !important;
  }
  .my-btn-main-s-md .my-btn-arrow svg {
    width: 24px !important;
    height: 24px !important;
  }
}
@media (max-width: 570px) {
  .my-btn-main-s-sm {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: 0.5s !important;
    border-radius: 6px !important;
    padding: 4px 8px 4px 8px !important;
  }
  .my-btn-main-s-sm .my-btn-icon {
    margin: 0 6px 0 0 !important;
    width: 24px !important;
    height: 24px !important;
  }
  .my-btn-main-s-sm .my-btn-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  .my-btn-main-s-sm .my-btn-text {
    line-height: 24px !important;
    font-size: 13px !important;
  }
  .my-btn-main-s-sm .my-btn-arrow {
    margin: 0 0 0 6px !important;
  }
  .my-btn-main-s-sm .my-btn-arrow svg {
    width: 24px !important;
    height: 24px !important;
  }
}
.my-btn-round {
  cursor: pointer !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: 0.5s !important;
  border-radius: 100px !important;
  padding: 8px 12px 8px 8px !important;
}
.my-btn-round .my-btn-icon {
  font-size: 0px !important;
  line-height: 0px !important;
  margin: 0 8px 0 0 !important;
}
.my-btn-round .my-btn-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.my-btn-round .my-btn-text {
  line-height: 24px !important;
  font-size: 13px !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

.my-btn-main-text {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: 0.5s !important;
  border-radius: 6px !important;
  padding: 0px 0px 0px 0px !important;
}
.my-btn-main-text .my-btn-icon {
  margin: 0 6px 0 0 !important;
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main-text .my-btn-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main-text .my-btn-icon svg path {
  transition: 0.5s !important;
}
.my-btn-main-text .my-btn-text {
  line-height: 24px !important;
  font-size: 14px !important;
}
.my-btn-main-text .my-btn-arrow {
  margin: 0 0 0 6px !important;
}
.my-btn-main-text .my-btn-arrow svg {
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main-text .my-btn-arrow svg path {
  transition: 0.5s !important;
}

.my-btn-main-text-s {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: 0.5s !important;
  border-radius: 6px !important;
  padding: 0px 0px 0px 0px !important;
}
.my-btn-main-text-s .my-btn-icon {
  margin: 0 6px 0 0 !important;
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main-text-s .my-btn-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.my-btn-main-text-s .my-btn-icon svg path {
  transition: 0.5s !important;
}
.my-btn-main-text-s .my-btn-text {
  line-height: 24px !important;
  font-size: 14px !important;
}
.my-btn-main-text-s .my-btn-arrow {
  margin: 0 0 0 6px !important;
}
.my-btn-main-text-s .my-btn-arrow svg {
  width: 16px !important;
  height: 16px !important;
}
.my-btn-main-text-s .my-btn-arrow svg path {
  transition: 0.5s !important;
}

.my-btn-main-text.my-btn-primary {
  color: #3C4250 !important;
  background: transparent !important;
  border: 2px solid transparent !important;
}
.my-btn-main-text.my-btn-primary svg path {
  fill: #3C4250 !important;
}
.my-btn-main-text.my-btn-primary:hover {
  color: #4FAFF1 !important;
  background: transparent !important;
  border: 2px solid transparent !important;
}
.my-btn-main-text.my-btn-primary:hover svg path {
  fill: #4FAFF1 !important;
}
.my-btn-main-text.my-btn-primary:focus {
  color: #178DE0 !important;
  background: transparent !important;
  border: 2px solid transparent !important;
}
.my-btn-main-text.my-btn-primary:focus svg path {
  fill: #178DE0 !important;
}

.my-btn-main-text-s.my-btn-primary {
  color: #3C4250 !important;
  background: transparent !important;
  border: 2px solid transparent !important;
}
.my-btn-main-text-s.my-btn-primary svg path {
  fill: #3C4250 !important;
}
.my-btn-main-text-s.my-btn-primary:hover {
  color: #4FAFF1 !important;
  background: transparent !important;
  border: 2px solid transparent !important;
}
.my-btn-main-text-s.my-btn-primary:hover svg path {
  fill: #4FAFF1 !important;
}
.my-btn-main-text-s.my-btn-primary:focus {
  color: #178DE0 !important;
  background: transparent !important;
  border: 2px solid transparent !important;
}
.my-btn-main-text-s.my-btn-primary:focus svg path {
  fill: #178DE0 !important;
}

.my-btn-main-text.my-btn-primary.my-btn-disabled {
  border: 2px solid transparent !important;
  background-color: transparent !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-main-text-s.my-btn-primary.my-btn-disabled {
  border: 2px solid transparent !important;
  background-color: transparent !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-primary {
  color: #ffffff !important;
  background-color: #4FAFF1 !important;
  border: 2px solid #4FAFF1 !important;
}
.my-btn-primary svg path {
  fill: #fff !important;
}
.my-btn-primary:hover {
  border: 2px solid #178DE0 !important;
  background-color: #178DE0 !important;
}
.my-btn-primary:focus {
  border: 2px solid #82C5F7 !important;
  background-color: #4FAFF1 !important;
}

.my-btn-primary.my-btn-disabled {
  border: 2px solid #4FAFF1 !important;
  background-color: #4FAFF1 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-round-primary {
  color: #ffffff !important;
  background-color: #4FAFF1 !important;
  border: 2px solid #4FAFF1 !important;
}
.my-btn-round-primary svg path {
  fill: #fff !important;
}
.my-btn-round-primary:hover {
  border: 2px solid #178DE0 !important;
  background-color: #178DE0 !important;
}
.my-btn-round-primary:focus {
  border: 2px solid #82C5F7 !important;
  background-color: #4FAFF1 !important;
}

.my-btn-round-primary.my-btn-disabled {
  border: 2px solid #4FAFF1 !important;
  background-color: #4FAFF1 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-secondary {
  color: #515151 !important;
  background-color: #E3E3E3 !important;
  border: 2px solid #E3E3E3 !important;
}
.my-btn-secondary svg path {
  fill: #515151 !important;
}
.my-btn-secondary:hover {
  border: 2px solid #C8C8C8 !important;
  background-color: #C8C8C8 !important;
}
.my-btn-secondary:focus {
  border: 2px solid #C8C8C8 !important;
  background-color: #E3E3E3 !important;
}

.my-btn-secondary.my-btn-disabled {
  border: 2px solid #E3E3E3 !important;
  background-color: #E3E3E3 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-round-secondary {
  color: #515151 !important;
  background-color: #F7F7F7 !important;
  border: 2px solid #F7F7F7 !important;
}
.my-btn-round-secondary svg path {
  fill: #515151 !important;
}
.my-btn-round-secondary:hover {
  border: 2px solid #E3E3E3 !important;
  background-color: #E3E3E3 !important;
}
.my-btn-round-secondary:focus {
  border: 2px solid #E3E3E3 !important;
  background-color: #F7F7F7 !important;
}

.my-btn-round-secondary.my-btn-disabled {
  border: 2px solid #E3E3E3 !important;
  background-color: #E3E3E3 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-icon-primary {
  background-color: #4FAFF1 !important;
}
.my-btn-icon-primary svg path {
  fill: #ffffff !important;
}
.my-btn-icon-primary:hover {
  background-color: #178DE0 !important;
}
.my-btn-icon-primary:focus {
  background-color: #178DE0 !important;
}

.my-btn-icon-primary.my-btn-icon-disabled {
  background-color: #4FAFF1 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-icon-secondary {
  background-color: #E3E3E3 !important;
}
.my-btn-icon-secondary:hover {
  background-color: #C8C8C8 !important;
}
.my-btn-icon-secondary:focus {
  background-color: #C8C8C8 !important;
}

.my-btn-icon-secondary.my-btn-icon-disabled {
  background-color: #E3E3E3 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-icon-third {
  background-color: transparent !important;
}
.my-btn-icon-third svg path {
  fill: #515151 !important;
}
.my-btn-icon-third:hover {
  color: #515151 !important;
  background-color: #F7F7F7 !important;
}
.my-btn-icon-third:focus {
  color: #4FAFF1 !important;
  background-color: transparent !important;
}
.my-btn-icon-third:focus svg path {
  fill: #4FAFF1 !important;
}

.my-btn-icon-third.my-btn-icon-disabled {
  background-color: transparent !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-icon-fourth {
  background-color: rgba(54, 58, 68, 0.5019607843) !important;
}
.my-btn-icon-fourth svg path {
  fill: #ffffff !important;
}
.my-btn-icon-fourth:hover {
  background-color: rgba(54, 58, 68, 0.6980392157) !important;
}
.my-btn-icon-fourth:focus {
  background-color: rgba(54, 58, 68, 0.6980392157) !important;
}

.my-btn-icon-fourth.my-btn-icon-disabled {
  background-color: rgba(54, 58, 68, 0.5019607843) !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-outline {
  color: #6B768C !important;
  background-color: transparent !important;
  border: 1.5px solid #6B768C !important;
}
.my-btn-outline svg path {
  transition: 0.5s !important;
  --btn-icon-color: #6B768C!important;
}
.my-btn-outline:hover {
  color: #363A44 !important;
  background-color: transparent !important;
  border: 1.5px solid #363A44 !important;
}
.my-btn-outline:hover svg path {
  --btn-icon-color: #363A44!important;
}
.my-btn-outline:focus {
  color: #178DE0 !important;
  border: 1.5px solid #178DE0 !important;
  background-color: #E1EFFD !important;
}
.my-btn-outline:focus svg path {
  --btn-icon-color: #178DE0!important;
}

.my-btn-outline.my-btn-disabled {
  color: #6B768C !important;
  border: 1.5px solid #6B768C !important;
  background-color: transparent !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.my-btn-round.my-btn-outline {
  padding: 6px 12px 6px 12px !important;
  outline-width: 1px !important;
}
.my-btn-round.my-btn-outline .my-btn-icon svg {
  width: 16px !important;
  height: 16px !important;
}
.my-btn-round.my-btn-outline:hover {
  color: #4FAFF1 !important;
  background-color: transparent !important;
  border: 1.5px solid #4FAFF1 !important;
}
.my-btn-round.my-btn-outline:hover svg path {
  fill: #4FAFF1 !important;
  stroke: #4FAFF1 !important;
}
.my-btn-round.my-btn-outline:focus {
  color: #ffffff !important;
  border: 1.5px solid #4FAFF1 !important;
  background-color: #4FAFF1 !important;
}
.my-btn-round.my-btn-outline:focus svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
.my-btn-round.my-btn-outline .my-btn-text {
  font-size: 14px !important;
  line-height: 20px !important;
}

.my-bg-primary-950 {
  background-color: #0B2846 !important;
}

.my-bg-primary-900 {
  background-color: #10406A !important;
}

.my-bg-primary-800 {
  background-color: #0C4B80 !important;
}

.my-bg-primary-700 {
  background-color: #0A599A !important;
}

.my-bg-primary-600 {
  background-color: #0A6FBF !important;
}

.my-bg-primary-500 {
  background-color: #178DE0 !important;
}

.my-bg-primary-400 {
  background-color: #4FAFF1 !important;
}

.my-bg-primary-300 {
  background-color: #82C5F7 !important;
}

.my-bg-primary-200 {
  background-color: #BDDFFA !important;
}

.my-bg-primary-100 {
  background-color: #E1EFFD !important;
}

.my-bg-primary-50 {
  background-color: #F1F8FE !important;
}

.my-bg-secondary-950 {
  background-color: #1D1F25 !important;
}

.my-bg-secondary-900 {
  background-color: #363A44 !important;
}

.my-bg-secondary-800 {
  background-color: #3C4250 !important;
}

.my-bg-secondary-700 {
  background-color: #464D5E !important;
}

.my-bg-secondary-600 {
  background-color: #565F73 !important;
}

.my-bg-secondary-500 {
  background-color: #6B768C !important;
}

.my-bg-secondary-400 {
  background-color: #8993A7 !important;
}

.my-bg-secondary-300 {
  background-color: #B3B9C6 !important;
}

.my-bg-secondary-200 {
  background-color: #D6D9E1 !important;
}

.my-bg-secondary-100 {
  background-color: #EDEEF1 !important;
}

.my-bg-secondary-50 {
  background-color: #F6F7F9 !important;
}

.my-bg-grey-950 {
  background-color: #262626 !important;
}

.my-bg-grey-900 {
  background-color: #313131 !important;
}

.my-bg-grey-800 {
  background-color: #383838 !important;
}

.my-bg-grey-700 {
  background-color: #434343 !important;
}

.my-bg-grey-600 {
  background-color: #515151 !important;
}

.my-bg-grey-500 {
  background-color: #666666 !important;
}

.my-bg-grey-400 {
  background-color: #818181 !important;
}

.my-bg-grey-300 {
  background-color: #A4A4A4 !important;
}

.my-bg-grey-200 {
  background-color: #C8C8C8 !important;
}

.my-bg-grey-100 {
  background-color: #E3E3E3 !important;
}

.my-bg-grey-50 {
  background-color: #F7F7F7 !important;
}

.my-bg-grey-0 {
  background-color: #FFFFFF !important;
}

.my-bg-success-950 {
  background-color: #0B2B08 !important;
}

.my-bg-success-900 {
  background-color: #1F4E19 !important;
}

.my-bg-success-800 {
  background-color: #255F1C !important;
}

.my-bg-success-700 {
  background-color: #29781D !important;
}

.my-bg-success-600 {
  background-color: #309920 !important;
}

.my-bg-success-500 {
  background-color: #47CB32 !important;
}

.my-bg-success-400 {
  background-color: #67D355 !important;
}

.my-bg-success-300 {
  background-color: #9BE78E !important;
}

.my-bg-success-200 {
  background-color: #C7F3BF !important;
}

.my-bg-success-100 {
  background-color: #E2FADE !important;
}

.my-bg-success-50 {
  background-color: #F4FCF1 !important;
}

.my-bg-errorNote-950 {
  background-color: #481007 !important;
}

.my-bg-errorNote-900 {
  background-color: #842718 !important;
}

.my-bg-errorNote-800 {
  background-color: #A02714 !important;
}

.my-bg-errorNote-700 {
  background-color: #C12C14 !important;
}

.my-bg-errorNote-600 {
  background-color: #E5381D !important;
}

.my-bg-errorNote-500 {
  background-color: #F8553B !important;
}

.my-bg-errorNote-400 {
  background-color: #FF735D !important;
}

.my-bg-errorNote-300 {
  background-color: #FFADA0 !important;
}

.my-bg-errorNote-200 {
  background-color: #FFCFC7 !important;
}

.my-bg-errorNote-100 {
  background-color: #FFE5E1 !important;
}

.my-bg-errorNote-50 {
  background-color: #FFF3F1 !important;
}

.my-bg-transparent {
  background-color: transparent !important;
}

.my-text-primary-950 {
  color: #0B2846 !important;
}

.my-text-primary-900 {
  color: #10406A !important;
}

.my-text-primary-800 {
  color: #0C4B80 !important;
}

.my-text-primary-700 {
  color: #0A599A !important;
}

.my-text-primary-600 {
  color: #0A6FBF !important;
}

.my-text-primary-500 {
  color: #178DE0 !important;
}

.my-text-primary-400 {
  color: #4FAFF1 !important;
}

.my-text-primary-300 {
  color: #82C5F7 !important;
}

.my-text-primary-200 {
  color: #BDDFFA !important;
}

.my-text-primary-100 {
  color: #E1EFFD !important;
}

.my-text-primary-50 {
  color: #F1F8FE !important;
}

.my-text-secondary-950 {
  color: #1D1F25 !important;
}

.my-text-secondary-900 {
  color: #363A44 !important;
}

.my-text-secondary-800 {
  color: #3C4250 !important;
}

.my-text-secondary-700 {
  color: #464D5E !important;
}

.my-text-secondary-600 {
  color: #565F73 !important;
}

.my-text-secondary-500 {
  color: #6B768C !important;
}

.my-text-secondary-400 {
  color: #8993A7 !important;
}

.my-text-secondary-300 {
  color: #B3B9C6 !important;
}

.my-text-secondary-200 {
  color: #D6D9E1 !important;
}

.my-text-secondary-100 {
  color: #EDEEF1 !important;
}

.my-text-secondary-50 {
  color: #F6F7F9 !important;
}

.my-text-grey-950 {
  color: #262626 !important;
}

.my-text-grey-900 {
  color: #313131 !important;
}

.my-text-grey-800 {
  color: #383838 !important;
}

.my-text-grey-700 {
  color: #434343 !important;
}

.my-text-grey-600 {
  color: #515151 !important;
}

.my-text-grey-500 {
  color: #666666 !important;
}

.my-text-grey-400 {
  color: #818181 !important;
}

.my-text-grey-300 {
  color: #A4A4A4 !important;
}

.my-text-grey-200 {
  color: #C8C8C8 !important;
}

.my-text-grey-100 {
  color: #E3E3E3 !important;
}

.my-text-grey-50 {
  color: #F7F7F7 !important;
}

.my-text-grey-0 {
  color: #FFFFFF !important;
}

.my-text-success-950 {
  color: #0B2B08 !important;
}

.my-text-success-900 {
  color: #1F4E19 !important;
}

.my-text-success-800 {
  color: #255F1C !important;
}

.my-text-success-700 {
  color: #29781D !important;
}

.my-text-success-600 {
  color: #309920 !important;
}

.my-text-success-500 {
  color: #47CB32 !important;
}

.my-text-success-400 {
  color: #67D355 !important;
}

.my-text-success-300 {
  color: #9BE78E !important;
}

.my-text-success-200 {
  color: #C7F3BF !important;
}

.my-text-success-100 {
  color: #E2FADE !important;
}

.my-text-success-50 {
  color: #F4FCF1 !important;
}

.my-text-errorNote-950 {
  color: #481007 !important;
}

.my-text-errorNote-900 {
  color: #842718 !important;
}

.my-text-errorNote-800 {
  color: #A02714 !important;
}

.my-text-errorNote-700 {
  color: #C12C14 !important;
}

.my-text-errorNote-600 {
  color: #E5381D !important;
}

.my-text-errorNote-500 {
  color: #F8553B !important;
}

.my-text-errorNote-400 {
  color: #FF735D !important;
}

.my-text-errorNote-300 {
  color: #FFADA0 !important;
}

.my-text-errorNote-200 {
  color: #FFCFC7 !important;
}

.my-text-errorNote-100 {
  color: #FFE5E1 !important;
}

.my-text-errorNote-50 {
  color: #FFF3F1 !important;
}

@media (max-width: 768px) {
  .my-bg-primary-950-md {
    background-color: #0B2846 !important;
  }
  .my-bg-primary-900-md {
    background-color: #10406A !important;
  }
  .my-bg-primary-800-md {
    background-color: #0C4B80 !important;
  }
  .my-bg-primary-700-md {
    background-color: #0A599A !important;
  }
  .my-bg-primary-600-md {
    background-color: #0A6FBF !important;
  }
  .my-bg-primary-500-md {
    background-color: #178DE0 !important;
  }
  .my-bg-primary-400-md {
    background-color: #4FAFF1 !important;
  }
  .my-bg-primary-300-md {
    background-color: #82C5F7 !important;
  }
  .my-bg-primary-200-md {
    background-color: #BDDFFA !important;
  }
  .my-bg-primary-100-md {
    background-color: #E1EFFD !important;
  }
  .my-bg-primary-50-md {
    background-color: #F1F8FE !important;
  }
  .my-bg-secondary-950-md {
    background-color: #1D1F25 !important;
  }
  .my-bg-secondary-900-md {
    background-color: #363A44 !important;
  }
  .my-bg-secondary-800-md {
    background-color: #3C4250 !important;
  }
  .my-bg-secondary-700-md {
    background-color: #464D5E !important;
  }
  .my-bg-secondary-600-md {
    background-color: #565F73 !important;
  }
  .my-bg-secondary-500-md {
    background-color: #6B768C !important;
  }
  .my-bg-secondary-400-md {
    background-color: #8993A7 !important;
  }
  .my-bg-secondary-300-md {
    background-color: #B3B9C6 !important;
  }
  .my-bg-secondary-200-md {
    background-color: #D6D9E1 !important;
  }
  .my-bg-secondary-100-md {
    background-color: #EDEEF1 !important;
  }
  .my-bg-secondary-50-md {
    background-color: #F6F7F9 !important;
  }
  .my-bg-grey-950-md {
    background-color: #262626 !important;
  }
  .my-bg-grey-900-md {
    background-color: #313131 !important;
  }
  .my-bg-grey-800-md {
    background-color: #383838 !important;
  }
  .my-bg-grey-700-md {
    background-color: #434343 !important;
  }
  .my-bg-grey-600-md {
    background-color: #515151 !important;
  }
  .my-bg-grey-500-md {
    background-color: #666666 !important;
  }
  .my-bg-grey-400-md {
    background-color: #818181 !important;
  }
  .my-bg-grey-300-md {
    background-color: #A4A4A4 !important;
  }
  .my-bg-grey-200-md {
    background-color: #C8C8C8 !important;
  }
  .my-bg-grey-100-md {
    background-color: #E3E3E3 !important;
  }
  .my-bg-grey-50-md {
    background-color: #F7F7F7 !important;
  }
  .my-bg-grey-0-md {
    background-color: #FFFFFF !important;
  }
  .my-bg-success-950-md {
    background-color: #0B2B08 !important;
  }
  .my-bg-success-900-md {
    background-color: #1F4E19 !important;
  }
  .my-bg-success-800-md {
    background-color: #255F1C !important;
  }
  .my-bg-success-700-md {
    background-color: #29781D !important;
  }
  .my-bg-success-600-md {
    background-color: #309920 !important;
  }
  .my-bg-success-500-md {
    background-color: #47CB32 !important;
  }
  .my-bg-success-400-md {
    background-color: #67D355 !important;
  }
  .my-bg-success-300-md {
    background-color: #9BE78E !important;
  }
  .my-bg-success-200-md {
    background-color: #C7F3BF !important;
  }
  .my-bg-success-100-md {
    background-color: #E2FADE !important;
  }
  .my-bg-success-50-md {
    background-color: #F4FCF1 !important;
  }
  .my-bg-errorNote-950-md {
    background-color: #481007 !important;
  }
  .my-bg-errorNote-900-md {
    background-color: #842718 !important;
  }
  .my-bg-errorNote-800-md {
    background-color: #A02714 !important;
  }
  .my-bg-errorNote-700-md {
    background-color: #C12C14 !important;
  }
  .my-bg-errorNote-600-md {
    background-color: #E5381D !important;
  }
  .my-bg-errorNote-500-md {
    background-color: #F8553B !important;
  }
  .my-bg-errorNote-400-md {
    background-color: #FF735D !important;
  }
  .my-bg-errorNote-300-md {
    background-color: #FFADA0 !important;
  }
  .my-bg-errorNote-200-md {
    background-color: #FFCFC7 !important;
  }
  .my-bg-errorNote-100-md {
    background-color: #FFE5E1 !important;
  }
  .my-bg-errorNote-50-md {
    background-color: #FFF3F1 !important;
  }
  .my-bg-transparent-md {
    background-color: transparent !important;
  }
  .my-text-primary-950-md {
    color: #0B2846 !important;
  }
  .my-text-primary-900-md {
    color: #10406A !important;
  }
  .my-text-primary-800-md {
    color: #0C4B80 !important;
  }
  .my-text-primary-700-md {
    color: #0A599A !important;
  }
  .my-text-primary-600-md {
    color: #0A6FBF !important;
  }
  .my-text-primary-500-md {
    color: #178DE0 !important;
  }
  .my-text-primary-400-md {
    color: #4FAFF1 !important;
  }
  .my-text-primary-300-md {
    color: #82C5F7 !important;
  }
  .my-text-primary-200-md {
    color: #BDDFFA !important;
  }
  .my-text-primary-100-md {
    color: #E1EFFD !important;
  }
  .my-text-primary-50-md {
    color: #F1F8FE !important;
  }
  .my-text-secondary-950-md {
    color: #1D1F25 !important;
  }
  .my-text-secondary-900-md {
    color: #363A44 !important;
  }
  .my-text-secondary-800-md {
    color: #3C4250 !important;
  }
  .my-text-secondary-700-md {
    color: #464D5E !important;
  }
  .my-text-secondary-600-md {
    color: #565F73 !important;
  }
  .my-text-secondary-500-md {
    color: #6B768C !important;
  }
  .my-text-secondary-400-md {
    color: #8993A7 !important;
  }
  .my-text-secondary-300-md {
    color: #B3B9C6 !important;
  }
  .my-text-secondary-200-md {
    color: #D6D9E1 !important;
  }
  .my-text-secondary-100-md {
    color: #EDEEF1 !important;
  }
  .my-text-secondary-50-md {
    color: #F6F7F9 !important;
  }
  .my-text-grey-950-md {
    color: #262626 !important;
  }
  .my-text-grey-900-md {
    color: #313131 !important;
  }
  .my-text-grey-800-md {
    color: #383838 !important;
  }
  .my-text-grey-700-md {
    color: #434343 !important;
  }
  .my-text-grey-600-md {
    color: #515151 !important;
  }
  .my-text-grey-500-md {
    color: #666666 !important;
  }
  .my-text-grey-400-md {
    color: #818181 !important;
  }
  .my-text-grey-300-md {
    color: #A4A4A4 !important;
  }
  .my-text-grey-200-md {
    color: #C8C8C8 !important;
  }
  .my-text-grey-100-md {
    color: #E3E3E3 !important;
  }
  .my-text-grey-50-md {
    color: #F7F7F7 !important;
  }
  .my-text-grey-0-md {
    color: #FFFFFF !important;
  }
  .my-text-success-950-md {
    color: #0B2B08 !important;
  }
  .my-text-success-900-md {
    color: #1F4E19 !important;
  }
  .my-text-success-800-md {
    color: #255F1C !important;
  }
  .my-text-success-700-md {
    color: #29781D !important;
  }
  .my-text-success-600-md {
    color: #309920 !important;
  }
  .my-text-success-500-md {
    color: #47CB32 !important;
  }
  .my-text-success-400-md {
    color: #67D355 !important;
  }
  .my-text-success-300-md {
    color: #9BE78E !important;
  }
  .my-text-success-200-md {
    color: #C7F3BF !important;
  }
  .my-text-success-100-md {
    color: #E2FADE !important;
  }
  .my-text-success-50-md {
    color: #F4FCF1 !important;
  }
  .my-text-errorNote-950-md {
    color: #481007 !important;
  }
  .my-text-errorNote-900-md {
    color: #842718 !important;
  }
  .my-text-errorNote-800-md {
    color: #A02714 !important;
  }
  .my-text-errorNote-700-md {
    color: #C12C14 !important;
  }
  .my-text-errorNote-600-md {
    color: #E5381D !important;
  }
  .my-text-errorNote-500-md {
    color: #F8553B !important;
  }
  .my-text-errorNote-400-md {
    color: #FF735D !important;
  }
  .my-text-errorNote-300-md {
    color: #FFADA0 !important;
  }
  .my-text-errorNote-200-md {
    color: #FFCFC7 !important;
  }
  .my-text-errorNote-100-md {
    color: #FFE5E1 !important;
  }
  .my-text-errorNote-50-md {
    color: #FFF3F1 !important;
  }
}
@media (max-width: 570px) {
  .my-bg-primary-950-sm {
    background-color: #0B2846 !important;
  }
  .my-bg-primary-900-sm {
    background-color: #10406A !important;
  }
  .my-bg-primary-800-sm {
    background-color: #0C4B80 !important;
  }
  .my-bg-primary-700-sm {
    background-color: #0A599A !important;
  }
  .my-bg-primary-600-sm {
    background-color: #0A6FBF !important;
  }
  .my-bg-primary-500-sm {
    background-color: #178DE0 !important;
  }
  .my-bg-primary-400-sm {
    background-color: #4FAFF1 !important;
  }
  .my-bg-primary-300-sm {
    background-color: #82C5F7 !important;
  }
  .my-bg-primary-200-sm {
    background-color: #BDDFFA !important;
  }
  .my-bg-primary-100-sm {
    background-color: #E1EFFD !important;
  }
  .my-bg-primary-50-sm {
    background-color: #F1F8FE !important;
  }
  .my-bg-secondary-950-sm {
    background-color: #1D1F25 !important;
  }
  .my-bg-secondary-900-sm {
    background-color: #363A44 !important;
  }
  .my-bg-secondary-800-sm {
    background-color: #3C4250 !important;
  }
  .my-bg-secondary-700-sm {
    background-color: #464D5E !important;
  }
  .my-bg-secondary-600-sm {
    background-color: #565F73 !important;
  }
  .my-bg-secondary-500-sm {
    background-color: #6B768C !important;
  }
  .my-bg-secondary-400-sm {
    background-color: #8993A7 !important;
  }
  .my-bg-secondary-300-sm {
    background-color: #B3B9C6 !important;
  }
  .my-bg-secondary-200-sm {
    background-color: #D6D9E1 !important;
  }
  .my-bg-secondary-100-sm {
    background-color: #EDEEF1 !important;
  }
  .my-bg-secondary-50-sm {
    background-color: #F6F7F9 !important;
  }
  .my-bg-grey-950-sm {
    background-color: #262626 !important;
  }
  .my-bg-grey-900-sm {
    background-color: #313131 !important;
  }
  .my-bg-grey-800-sm {
    background-color: #383838 !important;
  }
  .my-bg-grey-700-sm {
    background-color: #434343 !important;
  }
  .my-bg-grey-600-sm {
    background-color: #515151 !important;
  }
  .my-bg-grey-500-sm {
    background-color: #666666 !important;
  }
  .my-bg-grey-400-sm {
    background-color: #818181 !important;
  }
  .my-bg-grey-300-sm {
    background-color: #A4A4A4 !important;
  }
  .my-bg-grey-200-sm {
    background-color: #C8C8C8 !important;
  }
  .my-bg-grey-100-sm {
    background-color: #E3E3E3 !important;
  }
  .my-bg-grey-50-sm {
    background-color: #F7F7F7 !important;
  }
  .my-bg-grey-0-sm {
    background-color: #FFFFFF !important;
  }
  .my-bg-success-950-sm {
    background-color: #0B2B08 !important;
  }
  .my-bg-success-900-sm {
    background-color: #1F4E19 !important;
  }
  .my-bg-success-800-sm {
    background-color: #255F1C !important;
  }
  .my-bg-success-700-sm {
    background-color: #29781D !important;
  }
  .my-bg-success-600-sm {
    background-color: #309920 !important;
  }
  .my-bg-success-500-sm {
    background-color: #47CB32 !important;
  }
  .my-bg-success-400-sm {
    background-color: #67D355 !important;
  }
  .my-bg-success-300-sm {
    background-color: #9BE78E !important;
  }
  .my-bg-success-200-sm {
    background-color: #C7F3BF !important;
  }
  .my-bg-success-100-sm {
    background-color: #E2FADE !important;
  }
  .my-bg-success-50-sm {
    background-color: #F4FCF1 !important;
  }
  .my-bg-errorNote-950-sm {
    background-color: #481007 !important;
  }
  .my-bg-errorNote-900-sm {
    background-color: #842718 !important;
  }
  .my-bg-errorNote-800-sm {
    background-color: #A02714 !important;
  }
  .my-bg-errorNote-700-sm {
    background-color: #C12C14 !important;
  }
  .my-bg-errorNote-600-sm {
    background-color: #E5381D !important;
  }
  .my-bg-errorNote-500-sm {
    background-color: #F8553B !important;
  }
  .my-bg-errorNote-400-sm {
    background-color: #FF735D !important;
  }
  .my-bg-errorNote-300-sm {
    background-color: #FFADA0 !important;
  }
  .my-bg-errorNote-200-sm {
    background-color: #FFCFC7 !important;
  }
  .my-bg-errorNote-100-sm {
    background-color: #FFE5E1 !important;
  }
  .my-bg-errorNote-50-sm {
    background-color: #FFF3F1 !important;
  }
  .my-bg-transparent-sm {
    background-color: transparent !important;
  }
  .my-text-primary-950-sm {
    color: #0B2846 !important;
  }
  .my-text-primary-900-sm {
    color: #10406A !important;
  }
  .my-text-primary-800-sm {
    color: #0C4B80 !important;
  }
  .my-text-primary-700-sm {
    color: #0A599A !important;
  }
  .my-text-primary-600-sm {
    color: #0A6FBF !important;
  }
  .my-text-primary-500-sm {
    color: #178DE0 !important;
  }
  .my-text-primary-400-sm {
    color: #4FAFF1 !important;
  }
  .my-text-primary-300-sm {
    color: #82C5F7 !important;
  }
  .my-text-primary-200-sm {
    color: #BDDFFA !important;
  }
  .my-text-primary-100-sm {
    color: #E1EFFD !important;
  }
  .my-text-primary-50-sm {
    color: #F1F8FE !important;
  }
  .my-text-secondary-950-sm {
    color: #1D1F25 !important;
  }
  .my-text-secondary-900-sm {
    color: #363A44 !important;
  }
  .my-text-secondary-800-sm {
    color: #3C4250 !important;
  }
  .my-text-secondary-700-sm {
    color: #464D5E !important;
  }
  .my-text-secondary-600-sm {
    color: #565F73 !important;
  }
  .my-text-secondary-500-sm {
    color: #6B768C !important;
  }
  .my-text-secondary-400-sm {
    color: #8993A7 !important;
  }
  .my-text-secondary-300-sm {
    color: #B3B9C6 !important;
  }
  .my-text-secondary-200-sm {
    color: #D6D9E1 !important;
  }
  .my-text-secondary-100-sm {
    color: #EDEEF1 !important;
  }
  .my-text-secondary-50-sm {
    color: #F6F7F9 !important;
  }
  .my-text-grey-950-sm {
    color: #262626 !important;
  }
  .my-text-grey-900-sm {
    color: #313131 !important;
  }
  .my-text-grey-800-sm {
    color: #383838 !important;
  }
  .my-text-grey-700-sm {
    color: #434343 !important;
  }
  .my-text-grey-600-sm {
    color: #515151 !important;
  }
  .my-text-grey-500-sm {
    color: #666666 !important;
  }
  .my-text-grey-400-sm {
    color: #818181 !important;
  }
  .my-text-grey-300-sm {
    color: #A4A4A4 !important;
  }
  .my-text-grey-200-sm {
    color: #C8C8C8 !important;
  }
  .my-text-grey-100-sm {
    color: #E3E3E3 !important;
  }
  .my-text-grey-50-sm {
    color: #F7F7F7 !important;
  }
  .my-text-grey-0-sm {
    color: #FFFFFF !important;
  }
  .my-text-success-950-sm {
    color: #0B2B08 !important;
  }
  .my-text-success-900-sm {
    color: #1F4E19 !important;
  }
  .my-text-success-800-sm {
    color: #255F1C !important;
  }
  .my-text-success-700-sm {
    color: #29781D !important;
  }
  .my-text-success-600-sm {
    color: #309920 !important;
  }
  .my-text-success-500-sm {
    color: #47CB32 !important;
  }
  .my-text-success-400-sm {
    color: #67D355 !important;
  }
  .my-text-success-300-sm {
    color: #9BE78E !important;
  }
  .my-text-success-200-sm {
    color: #C7F3BF !important;
  }
  .my-text-success-100-sm {
    color: #E2FADE !important;
  }
  .my-text-success-50-sm {
    color: #F4FCF1 !important;
  }
  .my-text-errorNote-950-sm {
    color: #481007 !important;
  }
  .my-text-errorNote-900-sm {
    color: #842718 !important;
  }
  .my-text-errorNote-800-sm {
    color: #A02714 !important;
  }
  .my-text-errorNote-700-sm {
    color: #C12C14 !important;
  }
  .my-text-errorNote-600-sm {
    color: #E5381D !important;
  }
  .my-text-errorNote-500-sm {
    color: #F8553B !important;
  }
  .my-text-errorNote-400-sm {
    color: #FF735D !important;
  }
  .my-text-errorNote-300-sm {
    color: #FFADA0 !important;
  }
  .my-text-errorNote-200-sm {
    color: #FFCFC7 !important;
  }
  .my-text-errorNote-100-sm {
    color: #FFE5E1 !important;
  }
  .my-text-errorNote-50-sm {
    color: #FFF3F1 !important;
  }
}
.my-cursor-initial {
  cursor: initial !important;
}

.my-tag li {
  display: inline-block;
  padding: 4px 12px 4px 12px;
  border-radius: 50px;
  background: #E3E3E3;
  color: #565F73;
  font-size: 12px;
}
@media (max-width: 570px) {
  .my-tag li {
    padding: 2px 8px 2px 8px;
  }
}

.my-d-inlineBlock {
  display: inline-block !important;
}

.my-d-flex {
  display: flex !important;
}

.my-hide {
  display: none !important;
}

.my-show {
  display: block !important;
}

.my-d-block {
  display: block !important;
}

.my-d-none {
  display: none !important;
}

@media (max-width: 768px) {
  .my-hide-md {
    display: none !important;
  }
  .my-show-md {
    display: block !important;
  }
  .my-d-flex-md {
    display: flex !important;
  }
}
@media (max-width: 570px) {
  .my-hide-sm {
    display: none !important;
  }
  .my-show-sm {
    display: block !important;
  }
  .my-d-flex-sm {
    display: flex !important;
  }
  .my-d-block-sm {
    display: block !important;
  }
}
.my-justify-content-start {
  justify-content: flex-start !important;
}

.my-justify-content-end {
  justify-content: flex-end !important;
}

.my-justify-content-center {
  justify-content: center !important;
}

.my-justify-content-between {
  justify-content: space-between !important;
}

.my-justify-content-around {
  justify-content: space-around !important;
}

.my-justify-content-evenly {
  justify-content: space-evenly !important;
}

@media (max-width: 900px) {
  .my-justify-content-start-lg {
    justify-content: flex-start !important;
  }
  .my-justify-content-end-lg {
    justify-content: flex-end !important;
  }
  .my-justify-content-center-lg {
    justify-content: center !important;
  }
  .my-justify-content-between-lg {
    justify-content: space-between !important;
  }
  .my-justify-content-around-lg {
    justify-content: space-around !important;
  }
  .my-justify-content-evenly-lg {
    justify-content: space-evenly !important;
  }
}
@media (max-width: 768px) {
  .my-justify-content-start-md {
    justify-content: flex-start !important;
  }
  .my-justify-content-end-md {
    justify-content: flex-end !important;
  }
  .my-justify-content-center-md {
    justify-content: center !important;
  }
  .my-justify-content-between-md {
    justify-content: space-between !important;
  }
  .my-justify-content-around-md {
    justify-content: space-around !important;
  }
  .my-justify-content-evenly-md {
    justify-content: space-evenly !important;
  }
}
@media (max-width: 570px) {
  .my-justify-content-start-sm {
    justify-content: flex-start !important;
  }
  .my-justify-content-end-sm {
    justify-content: flex-end !important;
  }
  .my-justify-content-center-sm {
    justify-content: center !important;
  }
  .my-justify-content-between-sm {
    justify-content: space-between !important;
  }
  .my-justify-content-around-sm {
    justify-content: space-around !important;
  }
  .my-justify-content-evenly-sm {
    justify-content: space-evenly !important;
  }
}
.my-flex-row {
  flex-direction: row !important;
}

.my-flex-row-reverse {
  flex-direction: row-reverse !important;
}

.my-flex-column {
  flex-direction: column !important;
}

.my-flex-column-reverse {
  flex-direction: column-reverse !important;
}

@media (max-width: 1140px) {
  .my-flex-row-xl {
    flex-direction: row !important;
  }
  .my-flex-row-reverse-xl {
    flex-direction: row-reverse !important;
  }
  .my-flex-column-xl {
    flex-direction: column !important;
  }
  .my-flex-column-reverse-xl {
    flex-direction: column-reverse !important;
  }
}
@media (max-width: 900px) {
  .my-flex-row-lg {
    flex-direction: row !important;
  }
  .my-flex-row-reverse-lg {
    flex-direction: row-reverse !important;
  }
  .my-flex-column-lg {
    flex-direction: column !important;
  }
  .my-flex-column-reverse-lg {
    flex-direction: column-reverse !important;
  }
}
@media (max-width: 768px) {
  .my-flex-row-md {
    flex-direction: row !important;
  }
  .my-flex-row-reverse-md {
    flex-direction: row-reverse !important;
  }
  .my-flex-column-md {
    flex-direction: column !important;
  }
  .my-flex-column-reverse-md {
    flex-direction: column-reverse !important;
  }
}
@media (max-width: 570px) {
  .my-flex-row-sm {
    flex-direction: row !important;
  }
  .my-flex-row-reverse-sm {
    flex-direction: row-reverse !important;
  }
  .my-flex-column-sm {
    flex-direction: column !important;
  }
  .my-flex-column-reverse-sm {
    flex-direction: column-reverse !important;
  }
}
.my-align-content-start {
  align-items: start !important;
}

.my-align-content-end {
  align-items: end !important;
}

.my-align-content-center {
  align-items: center !important;
}

.my-align-content-around {
  align-items: space-around !important;
}

.my-align-content-stretch {
  align-items: stretch !important;
}

@media (max-width: 570px) {
  .my-align-content-start-sm {
    align-items: start !important;
  }
  .my-align-content-end-sm {
    align-items: end !important;
  }
  .my-align-content-center-sm {
    align-items: center !important;
  }
  .my-align-content-around-sm {
    align-items: space-around !important;
  }
  .my-align-content-stretch-sm {
    align-items: stretch !important;
  }
}
.my-flex-wrap {
  flex-wrap: wrap !important;
}

.my-flex-nowrap {
  flex-wrap: nowrap !important;
}

.my-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

@media (max-width: 570px) {
  .my-flex-wrap-sm {
    flex-wrap: wrap !important;
  }
  .my-flex-nowrap-sm {
    flex-wrap: nowrap !important;
  }
  .my-flex-wrap-reverse-sm {
    flex-wrap: wrap-reverse !important;
  }
}
.my-flex-1 {
  flex: 1 !important;
}

.my-flex-fill {
  flex: 1 1 auto !important;
  max-width: 100% !important;
}

.my-flex-grow-1 {
  flex-grow: 1 !important;
}

.my-flex-shrink-1 {
  flex-shrink: 1 !important;
}

.my-w50 {
  width: 50% !important;
}

.my-w100 {
  width: 100% !important;
}

.my-wmax100 {
  max-width: 100% !important;
}

.my-wauto {
  width: auto !important;
}

.my-h100 {
  height: 100% !important;
}

.my-hmin-initial {
  min-height: initial !important;
}

.my-vh-100 {
  height: 100vh !important;
}

.my-h-initial {
  height: initial !important;
}

.my-wmin-100px {
  min-width: 100px;
}

.my-w-initial {
  width: initial !important;
}

@media (max-width: 768px) {
  .my-flex-fill-md {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
  .my-wmax100-md {
    max-width: 100% !important;
  }
  .my-w100-md {
    width: 100% !important;
  }
  .my-wauto-md {
    width: auto !important;
  }
}
@media (max-width: 570px) {
  .my-flex-fill-sm {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
  .my-wmax100-sm {
    max-width: 100% !important;
  }
  .my-w100-sm {
    width: 100% !important;
  }
  .my-wauto-sm {
    width: auto !important;
  }
  .my-h-initial-sm {
    height: initial !important;
  }
}
.my-column-2 {
  width: 100% !important;
  max-width: 50% !important;
}

.my-column-3 {
  width: 100% !important;
  max-width: 33.3333333333% !important;
}

@media (max-width: 570px) {
  .my-column-1-sm {
    width: 100% !important;
    max-width: 100% !important;
  }
  .my-column-2-sm {
    width: 100% !important;
    max-width: 50% !important;
  }
  .my-column-3-sm {
    width: 100% !important;
    max-width: 33.3333333333% !important;
  }
  .my-column-4-sm {
    width: 100% !important;
    max-width: 25% !important;
  }
}
.my-font-list {
  display: flex !important;
  align-items: center !important;
}
.my-font-list .my-font-item {
  cursor: pointer !important;
  position: relative !important;
}
.my-font-list .my-font-item:nth-child(1) {
  margin: 0 12px 0 0 !important;
}
.my-font-list .my-font-item:nth-child(1)::after {
  position: absolute !important;
  top: -2px !important;
  right: -12px !important;
  content: "" !important;
  background-color: #EDEEF1 !important;
  width: 1px !important;
  height: 24px !important;
  cursor: initial !important;
}
.my-font-list .my-font-item:nth-child(2) {
  margin: 0 0 0 12px !important;
}

.my-font-h2 {
  font-size: 26px !important;
  line-height: 120% !important;
  font-weight: 700 !important;
}
@media (max-width: 768px) {
  .my-font-h2 {
    font-size: 24px !important;
  }
}
@media (max-width: 570px) {
  .my-font-h2 {
    font-size: 20px !important;
  }
}

.my-font-h3 {
  font-size: 22px !important;
  line-height: 26px !important;
  font-weight: 700 !important;
}
@media (max-width: 768px) {
  .my-font-h3 {
    font-size: 20px !important;
  }
}
@media (max-width: 570px) {
  .my-font-h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}

.my-font-h4 {
  font-size: 16px !important;
  line-height: 120% !important;
  font-weight: 700 !important;
}
@media (max-width: 768px) {
  .my-font-h4 {
    font-size: 16px !important;
  }
}
@media (max-width: 570px) {
  .my-font-h4 {
    font-size: 14px !important;
  }
}

.my-font-l {
  font-size: 16px !important;
  line-height: 140% !important;
  font-weight: 400 !important;
}
@media (max-width: 570px) {
  .my-font-l {
    font-size: 14px !important;
  }
}

.my-font-m {
  font-size: 14px !important;
  line-height: 140% !important;
  font-weight: 400 !important;
}
@media (max-width: 768px) {
  .my-font-m {
    font-size: 13px !important;
  }
}

.my-font-s {
  font-size: 12px !important;
  line-height: 140% !important;
  font-weight: 400 !important;
}

.my-font-bold {
  font-weight: bold;
}

.my-text-nowrap {
  white-space: nowrap;
}

.my-font-start {
  text-align: left;
}

.my-font-center {
  text-align: center;
}

.my-font-end {
  text-align: end;
}

.my-font-decoration-none {
  text-decoration: none;
}

.my-font-26 {
  font-size: 26px;
  line-height: 120%;
}

.my-font-24 {
  font-size: 24px;
  line-height: 120%;
}

.my-font-22 {
  font-size: 22px;
  line-height: 120%;
}

.my-font-18 {
  font-size: 18px;
  line-height: 120%;
}

.my-font-16 {
  font-size: 16px;
  line-height: 120%;
}

.my-font-14 {
  font-size: 14px;
  line-height: 140%;
}

.my-font-13 {
  font-size: 13px;
  line-height: 140%;
}

.my-font-12 {
  font-size: 12px;
  line-height: 140%;
}

@media (max-width: 570px) {
  .my-font-26-sm {
    font-size: 26px;
    line-height: 120%;
  }
  .my-font-24-sm {
    font-size: 24px;
    line-height: 120%;
  }
  .my-font-22-sm {
    font-size: 22px;
    line-height: 120%;
  }
  .my-font-16-sm {
    font-size: 16px;
    line-height: 120%;
  }
  .my-font-14-sm {
    font-size: 14px;
    line-height: 140%;
  }
  .my-font-13-sm {
    font-size: 13px;
    line-height: 140%;
  }
  .my-font-12-sm {
    font-size: 12px;
    line-height: 140%;
  }
}
@media (max-width: 570px) {
  .my-font-start-sm {
    text-align: left;
  }
  .my-font-center-sm {
    text-align: center;
  }
  .my-font-end-sm {
    text-align: end;
  }
  .my-font-start-s {
    text-align: left;
  }
  .my-font-center-s {
    text-align: center;
  }
  .my-font-end-s {
    text-align: end;
  }
}
.invalid-feedback {
  color: #F8553B;
  width: 100%;
}
.invalid-feedback + .my-form-control {
  border-color: #F8553B;
}
.invalid-feedback + .my-form-control:hover {
  border-color: #F8553B;
}
.invalid-feedback + .my-form-control:focus-visible {
  border-color: #F8553B;
}
.invalid-feedback + .my-form-input-group {
  border-color: #F8553B;
}
.invalid-feedback + .my-form-input-group:hover {
  border-color: #F8553B;
}
.invalid-feedback + .my-form-input-group:focus-visible {
  border-color: #F8553B;
}

.is-valid.my-form-control {
  background: url(https://image.mycard520.com/mycardweb/image/form/form-fill.svg) no-repeat scroll right 16px center transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.is-valid.my-form-control:hover {
  color: initial;
  border: 1px solid #D6D9E1;
}

.is-invalid + .my-form-select {
  border-color: #F8553B;
}
.is-invalid + .my-form-control {
  border-color: #F8553B;
}
.is-invalid + .my-form-input-group {
  border-color: #F8553B;
}

.my-form-group {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.my-form-group label {
  color: #1D1F25;
  font-size: 14px;
  line-height: 140%;
  font-weight: 400;
  width: 100%;
}
@media (max-width: 570px) {
  .my-form-group label {
    font-size: 13px;
  }
}
.my-form-group .my-form-input {
  width: 100%;
  padding: 0 16px;
  border-radius: 6px;
  height: 40px;
  line-height: 40px;
  text-indent: 2px;
  background-color: transparent;
  border: 0px solid transparent;
  color: #363A44;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  outline: none;
}
.my-form-group .my-form-input:hover {
  color: #B3B9C6;
}
.my-form-group .my-form-input:focus-visible {
  color: #363A44;
}
.my-form-group .my-form-input::-moz-placeholder {
  color: #B3B9C6;
}
.my-form-group .my-form-input::placeholder {
  color: #B3B9C6;
}
.my-form-group .my-form-input-disabled {
  opacity: 0.5;
}

.my-form-input-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.my-form-select-group + .my-form-input-group {
  margin: 0 0 0 12px;
}

.my-form-select-group.my-form-select-w120 {
  width: 100%;
  max-width: 120px;
}

.my-form-label + .my-form-input-group {
  flex: initial;
}

.my-form-input-group {
  flex-wrap: wrap;
}

.my-form-control {
  width: 100%;
  border-radius: 6px;
  text-indent: 2px;
  background-color: transparent;
  border: 1px solid #D6D9E1;
  color: #363A44;
  transition: 0.5s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  outline: none;
  font-size: 14px;
}
.my-form-control:hover {
  color: #363A44;
  border: 1px solid #B3B9C6;
}
.my-form-control:focus-visible {
  border: 1px solid #8993A7;
  color: #363A44;
}
.my-form-control::-moz-placeholder {
  color: #B3B9C6;
}
.my-form-control::placeholder {
  color: #B3B9C6;
}

.my-form-control-s {
  height: 32px;
  line-height: 32px;
  padding: 0 8px 0 8px;
}

.my-form-control-m {
  height: 40px;
  line-height: 40px;
  padding: 0 16px 0 16px;
}

.my-form-control-m + .my-form-input-btn-m {
  top: 4px;
  right: 4px;
}

.my-form-control-l {
  height: 48px;
  line-height: 48px;
  padding: 0 56px 0 16px;
}

.my-form-control-l + .my-form-input-btn-l {
  top: 8px;
  right: 8px;
}

.my-form-control.is-invalid {
  border-color: #F8553B;
}

@media (max-width: 768px) {
  .my-form-control-m-md + .my-form-input-btn-m-md {
    top: 4px;
    right: 4px;
  }
  .my-form-control-m-md {
    height: 40px;
    line-height: 40px;
    padding: 0 16px 0 16px;
  }
}
@media (max-width: 570px) {
  .my-form-control-m-sm {
    height: 40px;
    line-height: 40px;
  }
  .my-form-control-m-sm + .my-form-input-btn-m-sm {
    top: 4px;
    right: 4px;
  }
  .my-form-control-l-sm {
    height: 48px;
    line-height: 48px;
  }
}
.my-form-inputBtn-group {
  width: 100%;
  flex: initial;
  position: relative;
}
.my-form-inputBtn-group .my-form-input-btn {
  min-width: 64px;
  cursor: pointer;
  font-size: 13px;
  height: 32px;
  line-height: 32px;
  padding: 0 16px 0 16px;
  border-radius: 6px;
  transition: 0.5s;
  position: absolute;
}
.my-form-inputBtn-group .my-form-input-btn.disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.my-form-inputBtn-group .my-form-input-btn-primary {
  color: #FFFFFF;
  background-color: #4FAFF1;
}
.my-form-inputBtn-group .my-form-input-btn-secondary {
  color: #515151;
  background-color: #E3E3E3;
}

.my-form-inputBtn-group.is-invalid {
  border-color: #F8553B;
}

label + .my-form-inputBtn-group {
  flex: initial;
}

.my-form-control.is-invalid {
  border-color: #F8553B;
}

.my-form-select-group .my-form-select {
  width: 100%;
  border-radius: 6px;
  text-indent: 2px;
  background-color: transparent;
  border: 1px solid #D6D9E1;
  color: #363A44;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  outline: none;
  transition: 0.5s;
  cursor: pointer;
}
.my-form-select-group .my-form-select option:checked, .my-form-select-group .my-form-select:hover {
  border-color: #B3B9C6;
  color: #363A44;
}
.my-form-select-group .my-form-select:focus {
  border-color: #8993A7;
  color: #B3B9C6;
}
.my-form-select-group .my-form-select:focus-visible {
  border-color: #D6D9E1;
  color: #363A44;
}
.my-form-select-group .my-form-select:disabled {
  border-color: #D6D9E1;
  color: #B3B9C6;
}
.my-form-select-group .my-form-select option, .my-form-select-group .my-form-select::-webkit-datalist-option, .my-form-select-group .my-form-select::-moz-datalist-option {
  padding: 0;
  background-color: transparent;
  color: inherit;
  border: none;
  -webkit-appearance: none;
          appearance: none;
}
.my-form-select-group .my-form-select option:hover, .my-form-select-group .my-form-select::-webkit-datalist-option:hover, .my-form-select-group .my-form-select::-moz-datalist-option:hover {
  background-color: #F6F7F9;
}
.my-form-select-group .my-form-select option:checked, .my-form-select-group .my-form-select::-webkit-datalist-option:checked, .my-form-select-group .my-form-select::-moz-datalist-option:checked {
  background-color: #ffffff;
}
.my-form-select-group .my-form-select option:focus, .my-form-select-group .my-form-select::-webkit-datalist-option:focus, .my-form-select-group .my-form-select::-moz-datalist-option:focus {
  background-color: #ffffff;
  color: #178DE0;
}
.my-form-select-group .my-form-select option:disabled, .my-form-select-group .my-form-select::-webkit-datalist-option:disabled, .my-form-select-group .my-form-select::-moz-datalist-option:disabled {
  background-color: #ffffff;
  color: #acacac;
}
.my-form-select-group .my-form-select-disabled {
  opacity: 0.5 !important;
  cursor: default !important;
}
.my-form-select-group .my-form-select-s {
  height: 32px;
  line-height: 32px;
  padding: 0px 8px 0px 8px;
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-arrow_default.svg);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.my-form-select-group .my-form-select-m {
  height: 40px;
  line-height: 40px;
  padding: 0px 16px 0px 16px;
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-arrow_default.svg);
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 16px;
}
.my-form-select-group .my-form-select-l {
  height: 48px;
  line-height: 48px;
  padding: 0px 16px 0px 16px;
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-arrow_default.svg);
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 16px;
}
.my-form-select-group .my-form-select.is-invalid {
  border-color: #F8553B;
}

@media (max-width: 768px) {
  .my-form-select-group .my-form-select-m-md {
    height: 40px;
    line-height: 40px;
    padding: 0px 16px 0px 16px;
    background-image: url(https://image.mycard520.com/mycardweb/image/form/form-arrow_default.svg);
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 16px;
  }
}
@media (max-width: 570px) {
  .my-form-select-group .my-form-select-m-sm {
    height: 40px;
    line-height: 40px;
    padding: 0px 16px 0px 16px;
    background-image: url(https://image.mycard520.com/mycardweb/image/form/form-arrow_default.svg);
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 16px;
  }
}
.my-form-check-group .my-form-check .my-form-check-label {
  flex: 1;
  color: #3C4250;
}
.my-form-check-group .my-form-check + .my-form-check {
  margin: 12px 0 0 0;
}
.my-form-check-group .my-form-check-label-agree {
  font-size: 14px;
  line-height: 140%;
  font-weight: 400;
}
.my-form-check-group .my-form-check-label-agree .my-form-check-label-link {
  color: #178DE0;
}

.my-title .my-dropDown {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1019607843);
  border-radius: 16px 16px 16px 16px;
  display: none;
  top: 40px;
  right: 0px;
}
@media (max-width: 570px) {
  .my-title .my-dropDown {
    border-radius: 16px 16px 0px 0px;
  }
}
.my-title .my-dropDown .my-form-group {
  justify-content: space-between;
}
.my-title .my-dropDown .my-form-group div {
  flex: 1;
}

@media (max-width: 570px) {
  .my-dropDown {
    z-index: 200;
  }
}
.my-dropDown .my-modal.my-modal-m {
  min-width: 320px;
  max-width: 320px;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-header {
  padding: 10px 24px 10px 24px;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-header .my-font-h3 {
  width: inherit;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body {
  min-height: 390px;
  padding: 8px 12px 12px 12px;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box {
  max-height: 390px;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check + .my-form-check {
  margin: 0 0 0 0;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check {
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-label-main {
  padding: 10px 12px 10px 12px;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-label-item {
  padding: 10px 12px 10px 40px;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-state {
  display: flex;
  align-items: center;
  flex: 1;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-state:hover .my-form-check-input[type=radio], .my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-state:hover .my-form-check-input[type=checkbox] {
  border: 2px solid #3C4250;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-state:hover .my-form-check-input[type=radio]:checked[type=radio], .my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-state:hover .my-form-check-input[type=checkbox]:checked[type=radio] {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-radioChecked.svg);
  border-color: #178DE0;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-state:hover .my-form-check-input[type=radio]:checked[type=checkbox], .my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-state:hover .my-form-check-input[type=checkbox]:checked[type=checkbox] {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-checkBox.svg);
  border-color: #178DE0;
  background-color: #178DE0;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-state .my-form-check-label {
  flex: 1;
  cursor: pointer;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-icon {
  cursor: pointer;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-icon .iconBox {
  display: flex;
  margin: 0 0 0 8px;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-icon .iconBox.rotate-180 {
  transform: rotate(180deg);
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-form-group .my-form-check .my-form-check-list {
  width: 100%;
  display: none;
}
.my-dropDown .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-footer {
  padding: 12px 12px 12px 12px;
}

.my-form-verify {
  position: relative;
}
.my-form-verify .code-pic {
  position: absolute;
  top: 3px;
  left: 16px;
}
.my-form-verify .code-pic img {
  width: auto;
  max-height: 42px;
}
@media (max-width: 768px) {
  .my-form-verify .code-pic img {
    max-height: 34px;
  }
}
.my-form-verify .my-form-input-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  min-width: initial;
  width: 48px;
  height: 48px;
  line-height: 48px;
  padding: 0 0 0 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 570px) {
  .my-form-verify .my-form-input-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}
.my-form-verify .my-form-input-btn img {
  width: 100%;
  max-width: 24px;
  max-height: 24px;
}

.my-form-column-4 {
  flex-wrap: wrap;
}
.my-form-column-4 .my-form-group {
  width: 100%;
  max-width: calc(25% - 24px);
}

.my-form-column-2 {
  flex-wrap: wrap;
}
.my-form-column-2 .my-form-group {
  width: 100%;
  max-width: calc(50% - 16px);
}
.my-form-column-2 .my-form-returnData-group {
  max-width: calc(50% - 16px);
}

@media (max-width: 768px) {
  .my-form-column-2-lg .my-form-group {
    max-width: calc(50% - 16px);
  }
  .my-form-column-1-lg .my-form-group {
    max-width: 100%;
  }
}
@media (max-width: 570px) {
  .my-form-column-2-sm .my-form-group {
    max-width: calc(50% - 6px);
  }
  .my-form-column-1-sm .my-form-group {
    max-width: 100%;
  }
}
.my-form-returnData {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}
.my-form-returnData.my-tradeInfo {
  gap: 0;
}
.my-form-returnData.my-tradeInfo .my-form-returnData-group {
  height: initial;
  line-height: initial;
  padding: 8px 0 8px 0;
  border: none;
  gap: 16px;
  height: 48px;
}
@media (max-width: 768px) {
  .my-form-returnData.my-tradeInfo .my-form-returnData-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: initial;
  }
}
.my-form-returnData.my-tradeInfo .my-form-returnData-group + .my-form-returnData-group {
  border-top: 1px solid #F7F7F7;
}
.my-form-returnData.my-tradeInfo .my-form-returnData-group .my-form-returnData-title {
  padding: 0;
  background-color: initial;
  text-align: left;
}
.my-form-returnData.my-tradeInfo .my-form-returnData-group .my-form-returnData-text {
  padding: 0;
}
.my-form-returnData .my-form-returnData-group {
  border: 1px solid #EDEEF1;
  display: flex;
  flex-wrap: wrap;
  height: 48px;
  line-height: 48px;
  border-radius: 6px;
  width: 100%;
  max-width: calc(50% - 20px);
  font-size: 14px;
}
@media (max-width: 768px) {
  .my-form-returnData .my-form-returnData-group {
    height: 34px;
    line-height: 34px;
    max-width: 100%;
    border: 1px solid #EDEEF1;
    border-radius: 6px;
    font-size: 13px;
  }
}
@media (max-width: 570px) {
  .my-form-returnData .my-form-returnData-group {
    height: 34px;
    line-height: 34px;
    max-width: 100%;
    border: none;
    border-radius: initial;
    font-size: 13px;
  }
}
.my-form-returnData .my-form-returnData-group .my-form-returnData-title {
  min-width: 160px;
  max-width: 160px;
  display: block;
  padding: 0 24px 0 24px;
  text-align: center;
  color: #3C4250;
  background-color: #F6F7F9;
}
@media (max-width: 570px) {
  .my-form-returnData .my-form-returnData-group .my-form-returnData-title {
    min-width: 130px;
    max-width: 130px;
    padding: 0;
    text-align: left;
    background-color: transparent;
  }
}
.my-form-returnData .my-form-returnData-group .my-form-returnData-text {
  padding: 0 24px 0 24px;
  flex: 1;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  padding: 0 24px 0 24px;
  flex: 1;
  color: #6B768C;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 570px) {
  .my-form-returnData .my-form-returnData-group .my-form-returnData-text {
    font-size: 13px;
  }
}
@media (max-width: 768px) {
  .my-form-returnData .my-form-returnData-group + .my-form-returnData-group {
    border-top: 1px solid #F7F7F7;
  }
}
.my-form-returnData .my-form-returnData-group.my-skeleton {
  font-size: 0 !important;
  border-radius: 4px;
  height: 48px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  animation: skeleton-animation 1.5s infinite;
  background-size: 200% 100%;
}
.my-form-returnData .my-form-returnData-group.my-skeleton .my-form-returnData-title {
  background: initial;
}
.my-form-returnData .my-form-returnData-group.my-skeleton .my-form-returnData-text {
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-form-returnData .my-form-returnData-group.my-skeleton {
    height: 34px;
    line-height: 34px;
  }
}

.my-form-check {
  display: flex;
  align-items: center;
}
.my-form-check .my-form-check-input {
  margin: 0 8px 0 0;
}
.my-form-check .my-form-check-input[type=radio] {
  width: 20px;
  height: 20px;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 2px solid #6B768C;
  border-radius: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
}
.my-form-check .my-form-check-input[type=radio]:checked[type=radio] {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-radio.svg);
  background-size: 12px;
  border-color: #4FAFF1;
}
.my-form-check .my-form-check-input[type=radio]:disabled {
  background-color: #edeef1;
  border: 2px solid #D6D9E1;
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.my-form-check .my-form-check-input[type=radio]:disabled:checked[type=radio] {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-radio.svg);
  border-color: #4FAFF1;
}
.my-form-check .my-form-check-input[type=checkbox] {
  width: 100%;
  max-width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #6B768C;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
}
.my-form-check .my-form-check-input[type=checkbox]:checked {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-checkBox.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #4FAFF1;
  border: 2px solid #4FAFF1;
}
.my-form-check .my-form-check-input[type=checkbox]:indeterminate {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-mixed.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #4FAFF1;
  border: 2px solid #4FAFF1;
}
.my-form-check .my-form-check-input[type=checkbox]:disabled {
  background-color: #EDEEF1;
  border: 2px solid #D6D9E1;
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.my-form-check .my-form-check-input[type=checkbox]:disabled:checked[type=checkbox] {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-checkBox.svg);
  background-color: #4FAFF1;
  border-color: #4FAFF1;
}
.my-form-check .my-form-check-label-main .my-form-check-input[type=checkbox] {
  width: 100%;
  max-width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #6B768C;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
}
.my-form-check .my-form-check-label-main .my-form-check-input[type=checkbox]:checked {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-checkBox.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #4FAFF1;
  border: 2px solid #4FAFF1;
}
.my-form-check .my-form-check-label-main .my-form-check-input[type=checkbox]:indeterminate {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-mixed.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #4FAFF1;
  border: 2px solid #4FAFF1;
}
.my-form-check .my-form-check-label-main .my-form-check-input[type=checkbox]:disabled {
  background-color: #EDEEF1;
  border: 2px solid #D6D9E1;
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.my-form-check .my-form-check-label-main .my-form-check-input[type=checkbox]:disabled:checked[type=checkbox] {
  background-image: url(https://image.mycard520.com/mycardweb/image/form/form-checkBox.svg);
  background-color: #4FAFF1;
  border-color: #4FAFF1;
}

.my-form-input-groupFlex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  overflow: hidden;
  border: 1px solid #D6D9E1;
  border-radius: 6px;
}
.my-form-input-groupFlex:hover {
  border: 1px solid #B3B9C6;
}
.my-form-input-groupFlex:focus-visible {
  border: 1px solid #8993A7;
}
.my-form-input-groupFlex::-moz-placeholder {
  color: #B3B9C6;
}
.my-form-input-groupFlex::placeholder {
  color: #B3B9C6;
}

.my-form-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}
.my-form-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.my-form-switch input:checked + .slider {
  background-color: #4FAFF1;
}
.my-form-switch input:checked + .slider:before {
  transform: translateX(16px);
}
.my-form-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #B3B9C6;
  transition: 0.4s;
  border-radius: 100px;
}
.my-form-switch .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.my-icon-80 {
  width: 80px;
  height: 80px;
}

.my-icon-40 {
  width: 40px;
  height: 40px;
}

.my-icon-36 {
  width: 36px;
  height: 36px;
}

.my-icon-24 {
  width: 24px;
  height: 24px;
}

.my-icon-16 {
  width: 16px;
  height: 16px;
}

@media (max-width: 570px) {
  .my-icon-80-sm {
    width: 80px;
    height: 80px;
  }
  .my-icon-36-sm {
    width: 36px;
    height: 36px;
  }
}
/*輸入欄位*/
.my-input-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  border-radius: 100px;
  background-color: #F7F7F7;
  overflow: hidden;
}

.my-input-text {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  margin: 0 8px 0 16px;
  color: #3C4250;
}
.my-input-text::-moz-placeholder {
  color: #3C4250;
}
.my-input-text::placeholder {
  color: #3C4250;
}
.my-input-text:focus {
  outline: none;
  color: #1D1F25;
}
.my-input-text:hover {
  color: #1D1F25;
}

.my-input-btn-text {
  cursor: pointer;
  font-size: 13px;
  line-height: 120%;
  padding: 0 16px 0 16px;
  margin: 0 4px 0 0;
  border-radius: 100px;
  height: 32px;
  color: #3C4250;
  background-color: #EDEEF1;
  transition: 0.5s;
}
.my-input-btn-text:hover {
  background-color: #FFFFFF;
}

.my-input-btn-icon {
  position: relative;
  z-index: 5;
  cursor: pointer;
  display: block;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}
.my-input-btn-icon .iconBox svg {
  width: 24px;
  height: 24px;
}

.my-input-btn-icon-r6 {
  border-radius: 6px 6px 6px 6px !important;
}

.my-input-btn-icon-r100 {
  border-radius: 100px 100px 100px 100px !important;
}

.my-input-btn-icon-secondary {
  background-color: #EDEEF1;
}
.my-input-btn-icon-secondary:hover {
  background-color: #D6D9E1;
}
.my-input-btn-icon-secondary .iconBox svg.icon_forward path {
  fill: #565F73;
}

.my-input-btn-icon-primary {
  background-color: #4FAFF1;
}
.my-input-btn-icon-primary:hover {
  background-color: #178DE0;
}

@media (max-width: 768px) {
  .my-input-btn-icon-primary-sm {
    background-color: #4FAFF1 !important;
  }
  .my-input-btn-icon-primary-sm:hover {
    background-color: #178DE0 !important;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  .my-input-btn-icon-primary-sm .iconBox .icon_forward path {
    fill: #fff !important;
  }
}

.my-text-list-group-numbered {
  padding: 0 0 0 20px;
  list-style-type: decimal;
}

.my-scrollbar::-webkit-scrollbar {
  width: 6px;
  border-radius: 4px;
}
@media (max-width: 570px) {
  .my-scrollbar::-webkit-scrollbar {
    width: 10px;
  }
}
.my-scrollbar::-webkit-scrollbar-button {
  height: 0px;
}
.my-scrollbar::-webkit-scrollbar-track-piece {
  background: transparent;
}
.my-scrollbar::-webkit-scrollbar-thumb {
  background-color: #E3E3E3;
  border-left: 0px solid #ffffff;
  border-radius: 4px;
}
@media (max-width: 570px) {
  .my-scrollbar::-webkit-scrollbar-thumb {
    border: 2px solid #FFFFFF;
  }
}
.my-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: transparent;
}

.my-scrollbar-m::-webkit-scrollbar {
  width: 6px;
  border-radius: 4px;
}
@media (max-width: 570px) {
  .my-scrollbar-m::-webkit-scrollbar {
    width: 10px;
  }
}
.my-scrollbar-m::-webkit-scrollbar-button {
  height: 0px;
}
.my-scrollbar-m::-webkit-scrollbar-track-piece {
  background: transparent;
}
.my-scrollbar-m::-webkit-scrollbar-thumb {
  background-color: #E3E3E3;
  border-left: 0px solid #ffffff;
  border-radius: 4px;
}
@media (max-width: 570px) {
  .my-scrollbar-m::-webkit-scrollbar-thumb {
    border: 2px solid #FFFFFF;
  }
}
.my-scrollbar-m::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: transparent;
}

.my-scrollbar-bgTransparent::-webkit-scrollbar {
  width: 6px;
}
.my-scrollbar-bgTransparent::-webkit-scrollbar-button {
  height: 0px;
  background: transparent;
  border-radius: 4px;
}
.my-scrollbar-bgTransparent::-webkit-scrollbar-track-piece {
  background: transparent;
}
.my-scrollbar-bgTransparent::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #FFFFFF;
}
.my-scrollbar-bgTransparent::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: transparent;
}

@keyframes skeleton-animation {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: -100% 50%;
  }
}
.swiper-slide::after {
  background: transparent !important;
}
.swiper-slide .skeleton_topImg .imgBox {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 0;
  padding-top: 56%;
  border-radius: 16px 16px 16px 16px;
  background-color: #E3E3E3;
  overflow: hidden;
}
.swiper-slide .skeleton_topImg .imgBox::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%); /* 添加骨架屏颜色 */
  background-size: 200% 100%; /* 骨架屏渐变动画 */
  animation: skeleton-animation 1.5s infinite; /* 骨架屏渐变动画 */
}
@media (max-width: 570px) {
  .swiper-slide .skeleton_topImg .imgBox::before {
    border-radius: 8px 8px 8px 8px;
  }
}
.swiper-slide .skeleton_topImg .grade {
  display: none;
}
.swiper-slide .skeleton_topImg .text h4 {
  font-size: 0px !important;
}
.swiper-slide .skeleton_topImg .text p {
  font-size: 0px !important;
}

.my-skeleton {
  cursor: default;
}
.my-skeleton a {
  cursor: default;
}
.my-skeleton .imgBox {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.my-skeleton .imgBox::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-font-h2 {
  width: 300px !important;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-font-h2 + .my-font-m {
  background: initial;
}
.my-skeleton .my-font-h3 {
  width: 300px !important;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
@media (max-width: 570px) {
  .my-skeleton .my-font-h3 {
    width: 100% !important;
  }
}
.my-skeleton .my-font-h4 {
  width: 100%;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-font-s {
  width: 100%;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-font-m {
  width: 100%;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-font-l {
  width: 100%;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-tabs-box .my-tabs-item {
  width: 60px;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
  border: none !important;
}
.my-skeleton .my-tags .my-tags-box .my-tags-item {
  width: 66px;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-title .my-titleBox .my-font-h3 {
  background: initial !important;
}
.my-skeleton .my-title .my-titleBox .my-font-h3 .my-list-tab .my-list-tab-tiem {
  width: 44px;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-title .my-titleBox .my-font-h3 .my-list-tab.my-list-tab-colorBlue .my-list-tab-tiem.active {
  border-bottom: none !important;
}
.my-skeleton .my-btn-main {
  width: 100%;
  height: 44px;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
  border: none !important;
  font-size: 0 !important;
}
.my-skeleton .my-btn-main .my-btn-text {
  font-size: 0 !important;
}
.my-skeleton .my-btn-main-text {
  width: 100%;
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-btn-main-text .my-btn-text {
  font-size: 0 !important;
}
.my-skeleton .my-btn-main-text .my-btn-arrow svg {
  width: 0px !important;
}
.my-skeleton .my-text-list-group-numbered {
  padding: 0 0 0 0;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-form-label {
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-form-group {
  font-size: 0 !important;
}
.my-skeleton .my-form-group .my-form-control {
  font-size: 0px;
  border: none;
}
.my-skeleton .my-form-group .my-form-input-btn {
  display: none;
}
.my-skeleton .my-form-select-group {
  font-size: 0 !important;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-form-select-group .my-form-select {
  border: none !important;
  font-size: 0px;
}
.my-skeleton .my-form-select-group .my-form-select-l {
  background-image: none !important;
}
.my-skeleton .my-platform li {
  width: 20px;
  height: 20px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-platform li svg {
  width: 0px;
}
.my-skeleton .my-form-returnData .my-form-returnData-group {
  margin: 8px 0 0 0;
  height: 16px;
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .my-form-returnData .my-form-returnData-group .my-form-returnData-title {
  background: initial;
}
.my-skeleton .my-form-returnData .my-form-returnData-group .my-form-returnData-text {
  font-size: 0 !important;
}
.my-skeleton .inputNumberBox input, .my-skeleton .inputNumberBox button {
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .inputNumberBox input svg, .my-skeleton .inputNumberBox button svg {
  width: 0 !important;
}
.my-skeleton .relatedLinks-icon .relatedLinks-icon-item .my-btn-icon-round {
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .relatedLinks-icon .relatedLinks-icon-item .my-btn-icon-round svg {
  width: 0px !important;
}
.my-skeleton .relatedLinks-icon .relatedLinks-icon-item .text {
  font-size: 0 !important;
  border-radius: 4px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
.my-skeleton .swiper .swiper-button-next, .my-skeleton .swiper .swiper-button-prev {
  display: none;
}
.my-skeleton .swiper .swiper-pagination .swiper-pagination-bullet {
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%); /* 添加骨架屏颜色 */
  background-size: 200% 100%; /* 骨架屏渐变动画 */
  animation: skeleton-animation 1.5s infinite; /* 骨架屏渐变动画 */
}
.my-skeleton .skeleton_square_row .imgBox {
  margin: 0 0 16px 0;
  position: relative;
  width: 100%;
  width: 90px;
  height: 90px;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_square_row .imgBox {
    border-radius: 8px 8px 8px 8px;
    width: 60px;
    height: 60px;
  }
}
.my-skeleton .skeleton_square_row .imgBox::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, #E3E3E3 25%, #F4F4F4 50%, #E3E3E3 75%); /* 添加骨架屏颜色 */
  background-size: 200% 100%; /* 骨架屏渐变动画 */
  animation: skeleton-animation 1.5s infinite; /* 骨架屏渐变动画 */
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_square_row .imgBox::before {
    border-radius: 8px 8px 8px 8px;
  }
}
.my-skeleton .skeleton_square_row .imgBox .grade {
  display: none;
}
.my-skeleton .skeleton_square_row .text .tag {
  font-size: 0px;
  line-height: initial;
}
.my-skeleton .skeleton_square_row .text .tag li {
  margin: 0 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
  padding: 0 0 0 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_square_row .text .tag li {
    height: 8px;
  }
}
.my-skeleton .skeleton_square_row .text h4 {
  margin: 16px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_square_row .text h4 {
    height: 8px;
  }
}
.my-skeleton .skeleton_square_row .text p {
  margin: 0 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_square_row .text p {
    height: 8px;
  }
}
.my-skeleton .skeleton_square_row .text .btn {
  margin: 0 0 0 0 !important;
}
.my-skeleton .skeleton_square_row .text .btn p {
  padding: 0 !important;
}
.my-skeleton .skeleton_rectangle_l .imgBox {
  margin: 0 0 16px 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 83.335%;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_l .imgBox {
    border-radius: 8px 8px 8px 8px;
    margin: 0 0 8px 0;
  }
}
.my-skeleton .skeleton_rectangle_l .imgBox::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, hsl(0, 0%, 89%) 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_l .imgBox::before {
    border-radius: 8px 8px 8px 8px;
  }
}
.my-skeleton .skeleton_rectangle_l .imgBox .grade {
  display: none;
}
.my-skeleton .skeleton_rectangle_l .text .tag {
  font-size: 0px;
  line-height: initial;
}
.my-skeleton .skeleton_rectangle_l .text .tag li {
  margin: 0 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
  padding: 0 0 0 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_l .text .tag li {
    height: 8px;
  }
}
.my-skeleton .skeleton_rectangle_l .text h4 {
  margin: 16px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_l .text h4 {
    height: 8px;
  }
}
.my-skeleton .skeleton_rectangle_l .text p {
  margin: 12px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_l .text p {
    height: 8px;
    margin: 8px 0 0 0 !important;
  }
}
.my-skeleton .skeleton_rectangle_l .text .btn {
  margin: 0 0 0 0 !important;
}
.my-skeleton .skeleton_rectangle_l .text .btn p {
  padding: 0 !important;
}
.my-skeleton .skeleton_rectangle_m .imgBox {
  margin: 0 0 16px 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 61.425%;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_m .imgBox {
    border-radius: 8px 8px 8px 8px;
    margin: 0 0 8px 0;
  }
}
.my-skeleton .skeleton_rectangle_m .imgBox::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, hsl(0, 0%, 89%) 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_m .imgBox::before {
    border-radius: 8px 8px 8px 8px;
  }
}
.my-skeleton .skeleton_rectangle_m .imgBox .grade {
  display: none;
}
.my-skeleton .skeleton_rectangle_m .text .tag {
  font-size: 0px;
  line-height: initial;
}
.my-skeleton .skeleton_rectangle_m .text .tag li {
  margin: 0 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
  padding: 0 0 0 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_m .text .tag li {
    height: 8px;
  }
}
.my-skeleton .skeleton_rectangle_m .text h4 {
  margin: 16px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_m .text h4 {
    height: 8px;
  }
}
.my-skeleton .skeleton_rectangle_m .text p {
  margin: 12px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_m .text p {
    height: 8px;
    margin: 8px 0 0 0 !important;
  }
}
.my-skeleton .skeleton_rectangle_m .text .btn {
  margin: 0 0 0 0 !important;
}
.my-skeleton .skeleton_rectangle_m .text .btn p {
  padding: 0 !important;
}
.my-skeleton .skeleton_rectangle_s .imgBox {
  margin: 0 0 16px 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 43.63%;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_s .imgBox {
    border-radius: 8px 8px 8px 8px;
    margin: 0 0 8px 0;
  }
}
.my-skeleton .skeleton_rectangle_s .imgBox::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, hsl(0, 0%, 89%) 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_s .imgBox::before {
    border-radius: 8px 8px 8px 8px;
  }
}
.my-skeleton .skeleton_rectangle_s .imgBox .grade {
  display: none;
}
.my-skeleton .skeleton_rectangle_s .text .tag {
  font-size: 0px;
  line-height: initial;
}
.my-skeleton .skeleton_rectangle_s .text .tag li {
  margin: 0 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
  padding: 0 0 0 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_s .text .tag li {
    height: 8px;
  }
}
.my-skeleton .skeleton_rectangle_s .text h4 {
  margin: 16px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_s .text h4 {
    height: 8px;
  }
}
.my-skeleton .skeleton_rectangle_s .text p {
  margin: 12px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_rectangle_s .text p {
    height: 8px;
    margin: 8px 0 0 0 !important;
  }
}
.my-skeleton .skeleton_rectangle_s .text .btn {
  margin: 0 0 0 0 !important;
}
.my-skeleton .skeleton_rectangle_s .text .btn p {
  padding: 0 !important;
}
.my-skeleton .skeleton_cardRow .imgBox {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 43.633%;
  overflow: hidden;
  border-radius: 16px;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardRow .imgBox {
    border-radius: 8px 8px 8px 8px;
  }
}
.my-skeleton .skeleton_cardRow .imgBox::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, hsl(0, 0%, 89%) 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
  border-radius: 16px 16px 16px 16px;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardRow .imgBox::before {
    border-radius: 8px 8px 8px 8px;
  }
}
.my-skeleton .skeleton_cardRow .imgBox .mask {
  background: transparent !important;
}
.my-skeleton .skeleton_cardRow .imgBox .grade {
  display: none;
}
.my-skeleton .skeleton_cardRow .text {
  background-color: transparent !important;
}
.my-skeleton .skeleton_cardRow .text .tag {
  font-size: 0px;
  line-height: initial;
}
.my-skeleton .skeleton_cardRow .text .tag li {
  margin: 0 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
  padding: 0 0 0 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardRow .text .tag li {
    height: 8px;
  }
}
.my-skeleton .skeleton_cardRow .text h4 {
  margin: 16px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardRow .text h4 {
    height: 8px;
  }
}
.my-skeleton .skeleton_cardRow .text p {
  margin: 12px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardRow .text p {
    height: 8px;
    margin: 8px 0 0 0 !important;
  }
}
.my-skeleton .skeleton_cardRow .text .btn {
  margin: 0 0 0 0 !important;
}
.my-skeleton .skeleton_cardRow .text .btn p {
  padding: 0 !important;
}
.my-skeleton .skeleton_cardRow .text .grade {
  display: none;
}
.my-skeleton .skeleton_cardColumn .imgBox {
  margin: 0 0 16px 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 153.85%;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardColumn .imgBox {
    border-radius: 8px 8px 8px 8px;
  }
}
.my-skeleton .skeleton_cardColumn .imgBox::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, hsl(0, 0%, 89%) 25%, #F4F4F4 50%, #E3E3E3 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardColumn .imgBox::before {
    border-radius: 8px 8px 8px 8px;
  }
}
.my-skeleton .skeleton_cardColumn .imgBox .mask {
  background: transparent !important;
}
.my-skeleton .skeleton_cardColumn .imgBox .grade {
  display: none;
}
.my-skeleton .skeleton_cardColumn .text {
  height: 95px !important;
  background-color: transparent !important;
}
@media (max-width: 1140px) {
  .my-skeleton .skeleton_cardColumn .text {
    height: 50px !important;
  }
}
.my-skeleton .skeleton_cardColumn .text .tag {
  font-size: 0px;
  line-height: initial;
}
.my-skeleton .skeleton_cardColumn .text .tag li {
  margin: 0 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #E3E3E3;
  font-size: 0 !important;
  padding: 0 0 0 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardColumn .text .tag li {
    height: 8px;
  }
}
.my-skeleton .skeleton_cardColumn .text h4 {
  margin: 0 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardColumn .text h4 {
    height: 8px;
  }
}
.my-skeleton .skeleton_cardColumn .text p {
  margin: 12px 0 0 0 !important;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: 0 !important;
}
@media (max-width: 570px) {
  .my-skeleton .skeleton_cardColumn .text p {
    height: 8px;
    margin: 8px 0 0 0 !important;
  }
}
.my-skeleton .skeleton_cardColumn .text .btn {
  margin: 0 0 0 0 !important;
}
.my-skeleton .skeleton_cardColumn .text .btn p {
  padding: 0 !important;
}

.my-mt-0 {
  margin-top: 0px !important;
}

.my-mt-1 {
  margin-top: 4px !important;
}

.my-mt-2 {
  margin-top: 8px !important;
}

.my-mt-3 {
  margin-top: 12px !important;
}

.my-mt-4 {
  margin-top: 16px !important;
}

.my-mt-5 {
  margin-top: 24px !important;
}

.my-mt-6 {
  margin-top: 32px !important;
}

.my-mt-7 {
  margin-top: 40px !important;
}

.my-mt-8 {
  margin-top: 48px !important;
}

.my-mt-9 {
  margin-top: 60px !important;
}

/* 更新 .my-mb 类 */
.my-mb-0 {
  margin-bottom: 0px !important;
}

.my-mb-1 {
  margin-bottom: 4px !important;
}

.my-mb-2 {
  margin-bottom: 8px !important;
}

.my-mb-3 {
  margin-bottom: 12px !important;
}

.my-mb-4 {
  margin-bottom: 16px !important;
}

.my-mb-5 {
  margin-bottom: 24px !important;
}

.my-mb-6 {
  margin-bottom: 32px !important;
}

.my-mb-7 {
  margin-bottom: 40px !important;
}

.my-mb-8 {
  margin-bottom: 48px !important;
}

.my-mb-9 {
  margin-bottom: 60px !important;
}

/* 更新 .my-ml 类 */
.my-ml-0 {
  margin-left: 0px !important;
}

.my-ml-1 {
  margin-left: 4px !important;
}

.my-ml-2 {
  margin-left: 8px !important;
}

.my-ml-3 {
  margin-left: 12px !important;
}

.my-ml-4 {
  margin-left: 16px !important;
}

.my-ml-5 {
  margin-left: 24px !important;
}

.my-ml-6 {
  margin-left: 32px !important;
}

.my-ml-7 {
  margin-left: 40px !important;
}

.my-ml-8 {
  margin-left: 48px !important;
}

.my-ml-9 {
  margin-left: 60px !important;
}

/* 更新 .my-mr 类 */
.my-mr-0 {
  margin-right: 0px !important;
}

.my-mr-1 {
  margin-right: 4px !important;
}

.my-mr-2 {
  margin-right: 8px !important;
}

.my-mr-3 {
  margin-right: 12px !important;
}

.my-mr-4 {
  margin-right: 16px !important;
}

.my-mr-5 {
  margin-right: 24px !important;
}

.my-mr-6 {
  margin-right: 32px !important;
}

.my-mr-7 {
  margin-right: 40px !important;
}

.my-mr-8 {
  margin-right: 48px !important;
}

.my-mr-9 {
  margin-right: 60px !important;
}

/* 更新 .my-my 类 */
.my-my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.my-my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.my-my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.my-my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.my-my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.my-my-5 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.my-my-6 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.my-my-7 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.my-my-8 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.my-my-9 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

/* 更新 .my-mx 类 */
.my-mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.my-mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-mx-5 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.my-mx-6 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.my-mx-7 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.my-mx-8 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.my-mx-9 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}

.my-mt-auto {
  margin-top: auto !important;
}

.my-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px) {
  .my-mt-0-md {
    margin-top: 0px !important;
  }
  .my-mt-1-md {
    margin-top: 4px !important;
  }
  .my-mt-2-md {
    margin-top: 8px !important;
  }
  .my-mt-3-md {
    margin-top: 12px !important;
  }
  .my-mt-4-md {
    margin-top: 16px !important;
  }
  .my-mt-5-md {
    margin-top: 24px !important;
  }
  .my-mt-6-md {
    margin-top: 32px !important;
  }
  .my-mt-7-md {
    margin-top: 40px !important;
  }
  .my-mt-8-md {
    margin-top: 48px !important;
  }
  .my-mt-9-md {
    margin-top: 60px !important;
  }
  /* 更新 .my-mb 类 */
  .my-mb-0-md {
    margin-bottom: 0px !important;
  }
  .my-mb-1-md {
    margin-bottom: 4px !important;
  }
  .my-mb-2-md {
    margin-bottom: 8px !important;
  }
  .my-mb-3-md {
    margin-bottom: 12px !important;
  }
  .my-mb-4-md {
    margin-bottom: 16px !important;
  }
  .my-mb-5-md {
    margin-bottom: 24px !important;
  }
  .my-mb-6-md {
    margin-bottom: 32px !important;
  }
  .my-mb-7-md {
    margin-bottom: 40px !important;
  }
  .my-mb-8-md {
    margin-bottom: 48px !important;
  }
  .my-mb-9-md {
    margin-bottom: 60px !important;
  }
  /* 更新 .my-ml 类 */
  .my-ml-0-md {
    margin-left: 0px !important;
  }
  .my-ml-1-md {
    margin-left: 4px !important;
  }
  .my-ml-2-md {
    margin-left: 8px !important;
  }
  .my-ml-3-md {
    margin-left: 12px !important;
  }
  .my-ml-4-md {
    margin-left: 16px !important;
  }
  .my-ml-5-md {
    margin-left: 24px !important;
  }
  .my-ml-6-md {
    margin-left: 32px !important;
  }
  .my-ml-7-md {
    margin-left: 40px !important;
  }
  .my-ml-8-md {
    margin-left: 48px !important;
  }
  .my-ml-9-md {
    margin-left: 60px !important;
  }
  /* 更新 .my-mr 类 */
  .my-mr-0-md {
    margin-right: 0px !important;
  }
  .my-mr-1-md {
    margin-right: 4px !important;
  }
  .my-mr-2-md {
    margin-right: 8px !important;
  }
  .my-mr-3-md {
    margin-right: 12px !important;
  }
  .my-mr-4-md {
    margin-right: 16px !important;
  }
  .my-mr-5-md {
    margin-right: 24px !important;
  }
  .my-mr-6-md {
    margin-right: 32px !important;
  }
  .my-mr-7-md {
    margin-right: 40px !important;
  }
  .my-mr-8-md {
    margin-right: 48px !important;
  }
  .my-mr-9-md {
    margin-right: 60px !important;
  }
  /* 更新 .my-my 类 */
  .my-my-0-md {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .my-my-1-md {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .my-my-2-md {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .my-my-3-md {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .my-my-4-md {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .my-my-5-md {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .my-my-6-md {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .my-my-7-md {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .my-my-8-md {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .my-my-9-md {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  /* 更新 .my-mx 类 */
  .my-mx-0-md {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .my-mx-1-md {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .my-mx-2-md {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .my-mx-3-md {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .my-mx-4-md {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .my-mx-5-md {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .my-mx-6-md {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .my-mx-7-md {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .my-mx-8-md {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .my-mx-9-md {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .my-mx-auto-md {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 570px) {
  /* 更新 .my-mt-sm 类 */
  .my-mt-0-sm {
    margin-top: 0px !important;
  }
  .my-mt-1-sm {
    margin-top: 4px !important;
  }
  .my-mt-2-sm {
    margin-top: 8px !important;
  }
  .my-mt-3-sm {
    margin-top: 12px !important;
  }
  .my-mt-4-sm {
    margin-top: 16px !important;
  }
  .my-mt-5-sm {
    margin-top: 24px !important;
  }
  .my-mt-6-sm {
    margin-top: 32px !important;
  }
  .my-mt-7-sm {
    margin-top: 40px !important;
  }
  .my-mt-8-sm {
    margin-top: 48px !important;
  }
  .my-mt-9-sm {
    margin-top: 60px !important;
  }
  /* 更新 .my-mb-s 类 */
  .my-mb-0-sm {
    margin-bottom: 0px !important;
  }
  .my-mb-1-sm {
    margin-bottom: 4px !important;
  }
  .my-mb-2-sm {
    margin-bottom: 8px !important;
  }
  .my-mb-3-sm {
    margin-bottom: 12px !important;
  }
  .my-mb-4-sm {
    margin-bottom: 16px !important;
  }
  .my-mb-5-sm {
    margin-bottom: 24px !important;
  }
  .my-mb-6-sm {
    margin-bottom: 32px !important;
  }
  .my-mb-7-sm {
    margin-bottom: 40px !important;
  }
  .my-mb-8-sm {
    margin-bottom: 48px !important;
  }
  .my-mb-9-sm {
    margin-bottom: 60px !important;
  }
  /* 更新 .my-ml-s 类 */
  .my-ml-0-sm {
    margin-left: 0px !important;
  }
  .my-ml-1-sm {
    margin-left: 4px !important;
  }
  .my-ml-2-sm {
    margin-left: 8px !important;
  }
  .my-ml-3-sm {
    margin-left: 12px !important;
  }
  .my-ml-4-sm {
    margin-left: 16px !important;
  }
  .my-ml-5-sm {
    margin-left: 24px !important;
  }
  .my-ml-6-sm {
    margin-left: 32px !important;
  }
  .my-ml-7-sm {
    margin-left: 40px !important;
  }
  .my-ml-8-sm {
    margin-left: 48px !important;
  }
  .my-ml-9-sm {
    margin-left: 60px !important;
  }
  /* 更新 .my-mr-s 类 */
  .my-mr-0-sm {
    margin-right: 0px !important;
  }
  .my-mr-1-sm {
    margin-right: 4px !important;
  }
  .my-mr-2-sm {
    margin-right: 8px !important;
  }
  .my-mr-3-sm {
    margin-right: 12px !important;
  }
  .my-mr-4-sm {
    margin-right: 16px !important;
  }
  .my-mr-5-sm {
    margin-right: 24px !important;
  }
  .my-mr-6-sm {
    margin-right: 32px !important;
  }
  .my-mr-7-sm {
    margin-right: 40px !important;
  }
  .my-mr-8-sm {
    margin-right: 48px !important;
  }
  .my-mr-9-sm {
    margin-right: 60px !important;
  }
  /* 更新 .my-my-s 类 */
  .my-my-0-sm {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .my-my-1-sm {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .my-my-2-sm {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .my-my-3-sm {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .my-my-4-sm {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .my-my-5-sm {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .my-my-6-sm {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .my-my-7-sm {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .my-my-8-sm {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .my-my-9-sm {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  /* 更新 .my-mx-sm 类 */
  .my-mx-0-sm {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .my-mx-1-sm {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .my-mx-2-sm {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .my-mx-3-sm {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .my-mx-4-sm {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .my-mx-5-sm {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .my-mx-6-sm {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .my-mx-7-sm {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .my-mx-8-sm {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .my-mx-9-sm {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
}
/* 更新 padding 类 */
.my-p-0 {
  padding: 0px !important;
}

.my-p-1 {
  padding: 4px !important;
}

.my-p-2 {
  padding: 8px !important;
}

.my-p-3 {
  padding: 12px !important;
}

.my-p-4 {
  padding: 16px !important;
}

.my-p-5 {
  padding: 24px !important;
}

.my-p-6 {
  padding: 32px !important;
}

.my-p-7 {
  padding: 40px !important;
}

.my-p-8 {
  padding: 48px !important;
}

.my-p-9 {
  padding: 60px !important;
}

.my-p-20 {
  padding: 20px !important;
}

/* 更新 padding-top 类 */
.my-pt-0 {
  padding-top: 0px !important;
}

.my-pt-1 {
  padding-top: 4px !important;
}

.my-pt-2 {
  padding-top: 8px !important;
}

.my-pt-3 {
  padding-top: 12px !important;
}

.my-pt-4 {
  padding-top: 16px !important;
}

.my-pt-5 {
  padding-top: 24px !important;
}

.my-pt-6 {
  padding-top: 32px !important;
}

.my-pt-7 {
  padding-top: 40px !important;
}

.my-pt-8 {
  padding-top: 48px !important;
}

.my-pt-9 {
  padding-top: 60px !important;
}

/* 更新 padding-bottom 类 */
.my-pb-0 {
  padding-bottom: 0px !important;
}

.my-pb-1 {
  padding-bottom: 4px !important;
}

.my-pb-2 {
  padding-bottom: 8px !important;
}

.my-pb-3 {
  padding-bottom: 12px !important;
}

.my-pb-4 {
  padding-bottom: 16px !important;
}

.my-pb-5 {
  padding-bottom: 24px !important;
}

.my-pb-6 {
  padding-bottom: 32px !important;
}

.my-pb-7 {
  padding-bottom: 40px !important;
}

.my-pb-8 {
  padding-bottom: 48px !important;
}

.my-pb-9 {
  padding-bottom: 60px !important;
}

/* 更新 padding-right 类 */
.my-pr-0 {
  padding-right: 0px !important;
}

.my-pr-1 {
  padding-right: 4px !important;
}

.my-pr-2 {
  padding-right: 8px !important;
}

.my-pr-3 {
  padding-right: 12px !important;
}

.my-pr-4 {
  padding-right: 16px !important;
}

.my-pr-5 {
  padding-right: 24px !important;
}

.my-pr-6 {
  padding-right: 32px !important;
}

.my-pr-7 {
  padding-right: 40px !important;
}

.my-pr-8 {
  padding-right: 48px !important;
}

.my-pr-9 {
  padding-right: 60px !important;
}

/* 更新 padding-left 类 */
.my-pl-0 {
  padding-left: 0px !important;
}

.my-pl-1 {
  padding-left: 4px !important;
}

.my-pl-2 {
  padding-left: 8px !important;
}

.my-pl-3 {
  padding-left: 12px !important;
}

.my-pl-4 {
  padding-left: 16px !important;
}

.my-pl-5 {
  padding-left: 24px !important;
}

.my-pl-6 {
  padding-left: 32px !important;
}

.my-pl-7 {
  padding-left: 40px !important;
}

.my-pl-8 {
  padding-left: 48px !important;
}

.my-pl-9 {
  padding-left: 60px !important;
}

/* 更新 padding-y 类 */
.my-py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.my-py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.my-py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.my-py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.my-py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.my-py-5 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.my-py-6 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.my-py-7 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.my-py-8 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.my-py-9 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* 更新 padding-x 类 */
.my-px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.my-px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.my-px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.my-px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.my-px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.my-px-5 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.my-px-6 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.my-px-7 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.my-px-8 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.my-px-9 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

/* 更新 Web 570 中的 padding 类 */
@media (max-width: 1140px) {
  .my-px-7-lg {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (max-width: 768px) {
  /* 更新 padding 类 */
  .my-p-0-md {
    padding: 0px !important;
  }
  .my-p-1-md {
    padding: 4px !important;
  }
  .my-p-2-md {
    padding: 8px !important;
  }
  .my-p-3-md {
    padding: 12px !important;
  }
  .my-p-4-md {
    padding: 16px !important;
  }
  .my-p-5-md {
    padding: 24px !important;
  }
  .my-p-6-md {
    padding: 32px !important;
  }
  .my-p-7-md {
    padding: 40px !important;
  }
  .my-p-8-md {
    padding: 48px !important;
  }
  .my-p-9-md {
    padding: 60px !important;
  }
  .my-p-20-md {
    padding: 20px !important;
  }
  /* 更新 padding-top 类 */
  .my-pt-0-md {
    padding-top: 0px !important;
  }
  .my-pt-1-md {
    padding-top: 4px !important;
  }
  .my-pt-2-md {
    padding-top: 8px !important;
  }
  .my-pt-3-md {
    padding-top: 12px !important;
  }
  .my-pt-4-md {
    padding-top: 16px !important;
  }
  .my-pt-5-md {
    padding-top: 24px !important;
  }
  .my-pt-6-md {
    padding-top: 32px !important;
  }
  .my-pt-7-md {
    padding-top: 40px !important;
  }
  .my-pt-8-md {
    padding-top: 48px !important;
  }
  .my-pt-9-md {
    padding-top: 60px !important;
  }
  /* 更新 padding-bottom 类 */
  .my-pb-0-md {
    padding-bottom: 0px !important;
  }
  .my-pb-1-md {
    padding-bottom: 4px !important;
  }
  .my-pb-2-md {
    padding-bottom: 8px !important;
  }
  .my-pb-3-md {
    padding-bottom: 12px !important;
  }
  .my-pb-4-md {
    padding-bottom: 16px !important;
  }
  .my-pb-5-md {
    padding-bottom: 24px !important;
  }
  .my-pb-6-md {
    padding-bottom: 32px !important;
  }
  .my-pb-7-md {
    padding-bottom: 40px !important;
  }
  .my-pb-8-md {
    padding-bottom: 48px !important;
  }
  .my-pb-9-md {
    padding-bottom: 60px !important;
  }
  /* 更新 padding-right 类 */
  .my-pr-0-md {
    padding-right: 0px !important;
  }
  .my-pr-1-md {
    padding-right: 4px !important;
  }
  .my-pr-2-md {
    padding-right: 8px !important;
  }
  .my-pr-3-md {
    padding-right: 12px !important;
  }
  .my-pr-4-md {
    padding-right: 16px !important;
  }
  .my-pr-5-md {
    padding-right: 24px !important;
  }
  .my-pr-6-md {
    padding-right: 32px !important;
  }
  .my-pr-7-md {
    padding-right: 40px !important;
  }
  .my-pr-8-md {
    padding-right: 48px !important;
  }
  .my-pr-9-md {
    padding-right: 60px !important;
  }
  /* 更新 padding-left 类 */
  .my-pl-0-md {
    padding-left: 0px !important;
  }
  .my-pl-1-md {
    padding-left: 4px !important;
  }
  .my-pl-2-md {
    padding-left: 8px !important;
  }
  .my-pl-3-md {
    padding-left: 12px !important;
  }
  .my-pl-4-md {
    padding-left: 16px !important;
  }
  .my-pl-5-md {
    padding-left: 24px !important;
  }
  .my-pl-6-md {
    padding-left: 32px !important;
  }
  .my-pl-7-md {
    padding-left: 40px !important;
  }
  .my-pl-8-md {
    padding-left: 48px !important;
  }
  .my-pl-9-md {
    padding-left: 60px !important;
  }
  /* 更新 padding-y 类 */
  .my-py-0-md {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .my-py-1-md {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .my-py-2-md {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .my-py-3-md {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .my-py-4-md {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .my-py-5-md {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .my-py-6-md {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .my-py-7-md {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .my-py-8-md {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .my-py-9-md {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  /* 更新 padding-x 类 */
  .my-px-0-md {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .my-px-1-md {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .my-px-2-md {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .my-px-3-md {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .my-px-4-md {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .my-px-5-md {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .my-px-6-md {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .my-px-7-md {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .my-px-8-md {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .my-px-9-md {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}
@media (max-width: 570px) {
  .my-p-0-sm {
    padding: 0px !important;
  }
  .my-p-1-sm {
    padding: 4px !important;
  }
  .my-p-2-sm {
    padding: 8px !important;
  }
  .my-p-3-sm {
    padding: 12px !important;
  }
  .my-p-4-sm {
    padding: 16px !important;
  }
  .my-p-5-sm {
    padding: 24px !important;
  }
  .my-p-6-sm {
    padding: 32px !important;
  }
  .my-p-7-sm {
    padding: 40px !important;
  }
  .my-p-8-sm {
    padding: 48px !important;
  }
  .my-p-9-sm {
    padding: 60px !important;
  }
  /* 更新 padding-top 类 */
  .my-pt-0-sm {
    padding-top: 0px !important;
  }
  .my-pt-1-sm {
    padding-top: 4px !important;
  }
  .my-pt-2-sm {
    padding-top: 8px !important;
  }
  .my-pt-3-sm {
    padding-top: 12px !important;
  }
  .my-pt-4-sm {
    padding-top: 16px !important;
  }
  .my-pt-5-sm {
    padding-top: 24px !important;
  }
  .my-pt-6-sm {
    padding-top: 32px !important;
  }
  .my-pt-7-sm {
    padding-top: 40px !important;
  }
  .my-pt-8-sm {
    padding-top: 48px !important;
  }
  .my-pt-9-sm {
    padding-top: 60px !important;
  }
  /* 更新 padding-bottom 类 */
  .my-pb-0-sm {
    padding-bottom: 0px !important;
  }
  .my-pb-1-sm {
    padding-bottom: 4px !important;
  }
  .my-pb-2-sm {
    padding-bottom: 8px !important;
  }
  .my-pb-3-sm {
    padding-bottom: 12px !important;
  }
  .my-pb-4-sm {
    padding-bottom: 16px !important;
  }
  .my-pb-5-sm {
    padding-bottom: 24px !important;
  }
  .my-pb-6-sm {
    padding-bottom: 32px !important;
  }
  .my-pb-7-sm {
    padding-bottom: 40px !important;
  }
  .my-pb-8-sm {
    padding-bottom: 48px !important;
  }
  .my-pb-9-sm {
    padding-bottom: 60px !important;
  }
  /* 更新 padding-right 类 */
  .my-pr-0-sm {
    padding-right: 0px !important;
  }
  .my-pr-1-sm {
    padding-right: 4px !important;
  }
  .my-pr-2-sm {
    padding-right: 8px !important;
  }
  .my-pr-3-sm {
    padding-right: 12px !important;
  }
  .my-pr-4-sm {
    padding-right: 16px !important;
  }
  .my-pr-5-sm {
    padding-right: 24px !important;
  }
  .my-pr-6-sm {
    padding-right: 32px !important;
  }
  .my-pr-7-sm {
    padding-right: 40px !important;
  }
  .my-pr-8-sm {
    padding-right: 48px !important;
  }
  .my-pr-9-sm {
    padding-right: 60px !important;
  }
  /* 更新 padding-left 类 */
  .my-pl-0-sm {
    padding-left: 0px !important;
  }
  .my-pl-1-sm {
    padding-left: 4px !important;
  }
  .my-pl-2-sm {
    padding-left: 8px !important;
  }
  .my-pl-3-sm {
    padding-left: 12px !important;
  }
  .my-pl-4-sm {
    padding-left: 16px !important;
  }
  .my-pl-5-sm {
    padding-left: 24px !important;
  }
  .my-pl-6-sm {
    padding-left: 32px !important;
  }
  .my-pl-7-sm {
    padding-left: 40px !important;
  }
  .my-pl-8-sm {
    padding-left: 48px !important;
  }
  .my-pl-9-sm {
    padding-left: 60px !important;
  }
  /* 更新 padding-y 类 */
  .my-py-0-sm {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .my-py-1-sm {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .my-py-2-sm {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .my-py-3-sm {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .my-py-4-sm {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .my-py-5-sm {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .my-py-6-sm {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .my-py-7-sm {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .my-py-8-sm {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .my-py-9-sm {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  /* 更新 padding-x 类 */
  .my-px-0-sm {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .my-px-1-sm {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .my-px-2-sm {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .my-px-3-sm {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .my-px-4-sm {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .my-px-5-sm {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .my-px-6-sm {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .my-px-7-sm {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .my-px-8-sm {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .my-px-9-sm {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}
.my-gap-0 {
  gap: 0px !important;
}

.my-gap-1 {
  gap: 4px;
}

.my-gap-2 {
  gap: 8px;
}

.my-gap-3 {
  gap: 12px;
}

.my-gap-4 {
  gap: 16px;
}

.my-gap-5 {
  gap: 24px;
}

.my-gap-6 {
  gap: 32px;
}

.my-gap-7 {
  gap: 40px;
}

.my-gap-8 {
  gap: 48px;
}

.my-gap-9 {
  gap: 60px;
}

@media (max-width: 768px) {
  .my-gap-0-md {
    gap: 0px !important;
  }
  .my-gap-1-md {
    gap: 4px !important;
  }
  .my-gap-2-md {
    gap: 8px !important;
  }
  .my-gap-3-md {
    gap: 12px !important;
  }
  .my-gap-4-md {
    gap: 16px !important;
  }
  .my-gap-5-md {
    gap: 24px !important;
  }
  .my-gap-6-md {
    gap: 32px !important;
  }
  .my-gap-7-md {
    gap: 40px !important;
  }
  .my-gap-8-md {
    gap: 48px !important;
  }
  .my-gap-9-md {
    gap: 60px !important;
  }
}
@media (max-width: 570px) {
  .my-gap-0-sm {
    gap: 0px !important;
  }
  .my-gap-1-sm {
    gap: 4px !important;
  }
  .my-gap-2-sm {
    gap: 8px !important;
  }
  .my-gap-3-sm {
    gap: 12px !important;
  }
  .my-gap-4-sm {
    gap: 16px !important;
  }
  .my-gap-5-sm {
    gap: 24px !important;
  }
  .my-gap-6-sm {
    gap: 32px !important;
  }
  .my-gap-7-sm {
    gap: 40px !important;
  }
  .my-gap-8-sm {
    gap: 48px !important;
  }
  .my-gap-9-sm {
    gap: 60px !important;
  }
}
.my-tabs ul.my-tabs-box {
  display: flex;
  -webkit-overflow-scrolling: touch; /* 開啟慣性滾動 */
  overflow-x: auto;
}
.my-tabs ul.my-tabs-box::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1140px) {
  .my-tabs ul.my-tabs-box::-webkit-scrollbar {
    display: none;
  }
}
.my-tabs ul.my-tabs-box::-webkit-scrollbar-button {
  height: 0px;
  background: transparent;
}
.my-tabs ul.my-tabs-box::-webkit-scrollbar-track-piece {
  background: transparent;
}
.my-tabs ul.my-tabs-box::-webkit-scrollbar-track {
  background-color: transparent;
}
.my-tabs ul.my-tabs-box::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.my-tabs ul.my-tabs-box li {
  padding: 6px 12px 6px 12px;
  border-radius: 100px;
  border: 1px solid transparent;
  margin: 0 0 0 12px;
  font-size: 14px;
  line-height: 140%;
  flex-shrink: 0;
  transition: 0.3s;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.my-tabs ul.my-tabs-box li:first-child {
  margin: 0 0 0 0;
}
.my-tabs ul.my-tabs-box li.my-tab-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.my-tabs.my-tab-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.my-tabs.my-tabs-primary ul.my-tabs-box li {
  color: #6B768C;
  border: 1px solid #6B768C;
}
.my-tabs.my-tabs-primary ul.my-tabs-box li:hover {
  border: 1px solid #4FAFF1;
  background-color: transparent;
  color: #4FAFF1;
}
.my-tabs.my-tabs-primary ul.my-tabs-box li:focus {
  border: 1px solid #4FAFF1;
  background-color: #4FAFF1;
  color: white;
}
.my-tabs.my-tabs-primary ul.my-tabs-box li.active {
  border: 1px solid #4FAFF1;
  background-color: #4FAFF1;
  color: white;
}

.my-tabs.my-tabs-secondary ul.my-tabs-box li {
  color: #363A44;
  border: 1px solid #EDEEF1;
  background-color: #EDEEF1;
}
.my-tabs.my-tabs-secondary ul.my-tabs-box li:hover {
  border: 1px solid #D6D9E1;
  background-color: #D6D9E1;
  color: #363A44;
}
.my-tabs.my-tabs-secondary ul.my-tabs-box li:focus {
  border: 1px solid #D6D9E1;
  background-color: #D6D9E1;
  color: #363A44;
}
.my-tabs.my-tabs-secondary ul.my-tabs-box li.active {
  border: 1px solid #D6D9E1;
  background-color: #D6D9E1;
  color: #363A44;
}

.my-tabs.btn-style ul.my-tabs-box li {
  padding: initial;
  border-radius: initial;
  border: initial;
  margin: initial;
  font-size: initial;
  line-height: initial;
  flex-shrink: initial;
  transition: initial;
  cursor: pointer;
  -webkit-user-select: initial;
     -moz-user-select: initial;
          user-select: initial;
}
.my-tabs.btn-style ul.my-tabs-box li:first-child {
  margin: initial;
}
.my-tabs.btn-style ul.my-tabs-box li.my-tab-disabled {
  opacity: initial;
  pointer-events: initial;
}
.my-tabs.btn-style ul.my-tabs-box li.active .my-btn-outline {
  background-color: #E1EFFD !important;
  outline: 1.5px solid #178DE0 !important;
  color: #178DE0 !important;
}

.my-tags ul.my-tags-box {
  display: flex;
  overflow-x: auto;
}
.my-tags ul.my-tags-box::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1140px) {
  .my-tags ul.my-tags-box::-webkit-scrollbar {
    display: block;
    height: 4px;
    border-radius: 5px;
  }
}
.my-tags ul.my-tags-box::-webkit-scrollbar-button {
  height: 0px;
  background: transparent;
}
.my-tags ul.my-tags-box::-webkit-scrollbar-track-piece {
  background: transparent;
}
.my-tags ul.my-tags-box::-webkit-scrollbar-track {
  background-color: transparent;
}
.my-tags ul.my-tags-box::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.my-tags ul.my-tags-box li {
  border-radius: 100px;
  border: 1px solid transparent;
  margin: 0 0 0 12px;
  font-size: 12px;
  flex-shrink: 0;
  transition: 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.my-tags ul.my-tags-box li:first-child {
  margin: 0 0 0 0;
}
.my-tags ul.my-tags-box li.my-tab-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.my-tags.my-tags-s ul.my-tags-box li {
  line-height: 21px;
  padding: 0px 8px 0px 8px;
}

.my-tags.my-tags-m ul.my-tags-box li {
  line-height: 25px;
  padding: 0px 12px 0px 12px;
}

.my-tags.my-tags-primary ul.my-tags-box li {
  color: #565F73;
  border: 1px solid #E3E3E3;
  background-color: #E3E3E3;
}

.my-tag {
  display: block;
  padding: 4px 12px 4px 12px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  line-height: 140% !important;
}
@media (max-width: 570px) {
  .my-tag {
    padding: 2px 8px 2px 8px !important;
  }
}

.my-round-0 {
  border-radius: 0px;
}

.my-round-1 {
  border-radius: 4px;
}

.my-round-2 {
  border-radius: 6px;
}

.my-round-3 {
  border-radius: 8px;
}

.my-round-4 {
  border-radius: 12px;
}

.my-round-5 {
  border-radius: 16px;
}

.my-round-100 {
  border-radius: 100px;
}

.my-round-bx-2 {
  border-radius: 0 0 6px 6px;
}

.my-round-bx-5 {
  border-radius: 0 0 16px 16px !important;
}

.my-round-tx-5 {
  border-radius: 16px 16px 0 0 !important;
}

@media (max-width: 768px) {
  .my-round-0-md {
    border-radius: 0px;
  }
  .my-round-1-s {
    border-radius: 4px;
  }
  .my-round-2-s {
    border-radius: 6px;
  }
  .my-round-3-md {
    border-radius: 8px;
  }
  .my-round-4-s {
    border-radius: 12px;
  }
  .my-round-5-md {
    border-radius: 16px;
  }
  .my-round-top-3-md {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
  .my-round-top-5-md {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
}
@media (max-width: 570px) {
  .my-round-0-sm {
    border-radius: 0px;
  }
  .my-round-1-s {
    border-radius: 4px;
  }
  .my-round-2-s {
    border-radius: 6px;
  }
  .my-round-3-sm {
    border-radius: 8px !important;
  }
  .my-round-4-s {
    border-radius: 12px;
  }
  .my-round-5-sm {
    border-radius: 16px;
  }
  .my-round-top-3-sm {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
  .my-round-top-5-sm {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
}
.my-border-shadow {
  box-shadow: 0px 0px 8px 0px rgba(102, 102, 115, 0.1019607843);
}

.my-border-shadow-15 {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1019607843);
}

.my-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
}

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

.my-overflow-auto {
  overflow: auto !important;
}

.my-pup {
  width: 100%;
  max-width: 600px;
}
.my-pup .my-modal {
  min-height: 20vh;
  max-height: 70vh;
}

.my-modal {
  background-color: #ffffff;
  z-index: 1000;
  display: flex;
  margin: 0 auto;
  cursor: initial;
}
@media (max-width: 570px) {
  .my-modal {
    min-width: initial;
  }
}
.my-modal .my-modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.my-modal .my-modal-dialog .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.my-modal .my-modal-dialog .modal-content .my-modal-header {
  position: relative;
  padding: 12px 24px 12px 24px;
  border-bottom: 1px solid #EDEEF1;
}
@media (max-width: 570px) {
  .my-modal .my-modal-dialog .modal-content .my-modal-header {
    padding: 10px 16px 10px 16px;
  }
}
.my-modal .my-modal-dialog .modal-content .my-modal-header .my-modal-title {
  line-height: 32px;
  color: #363A44;
}
.my-modal .my-modal-dialog .modal-content .my-modal-header .my-modal-close {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 8px;
  right: 24px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 570px) {
  .my-modal .my-modal-dialog .modal-content .my-modal-header .my-modal-close {
    top: 6px;
    right: 16px;
  }
}
.my-modal .my-modal-dialog .modal-content .my-modal-body {
  flex: 1;
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box {
  width: 100%;
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .imgBox {
  width: 100%;
  max-width: 160px;
  margin: auto;
}
@media (max-width: 570px) {
  .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .imgBox {
    max-width: 120px;
  }
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .imgBox img {
  width: 100%;
  max-width: 160px;
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox .imgBox {
  max-width: initial;
  margin: 0 auto;
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox .imgBox.qrcodeBox {
  border: 1px solid #EDEEF1;
  border-radius: 6px;
  padding: 24px;
  width: 100%;
  max-width: 100%;
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox .imgBox.qrcodeBox img {
  max-width: 180px;
  margin: 0 auto 0 auto;
}
@media (max-width: 570px) {
  .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox .imgBox.qrcodeBox img {
    max-width: 120px;
  }
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox .imgBox img {
  width: 100%;
  max-width: 278px;
  margin: 0 auto 0 auto;
  border-radius: 6px !important;
}
@media (max-width: 570px) {
  .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox .imgBox img {
    max-width: 100%;
  }
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox-col-6 {
  width: 100% !important;
  max-width: calc(50% - 8px) !important;
}
.my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox-col-12 + .textBox-col-12 {
  margin: 16px 0 0 0;
}
@media (max-width: 570px) {
  .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox-col-12 + .textBox-col-12 {
    margin: 12px 0 0 0;
  }
}
@media (max-width: 570px) {
  .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .textBox-col-12-sm {
    width: 100% !important;
    max-width: 100% !important;
  }
}
.my-modal .my-modal-dialog .modal-content .my-modal-footer {
  border-top: 1px solid #EDEEF1;
  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
}
.my-modal .my-modal-dialog .modal-content .my-modal-footer .my-btn-main {
  width: 100%;
  max-width: 50%;
}

.my-modal.my-modal-s {
  width: 100% !important;
  max-width: 400px !important;
  min-height: 280px !important;
}
.my-modal.my-modal-s .my-modal-dialog .modal-content .my-modal-body {
  justify-content: center;
  padding: 40px 24px 32px 24px !important;
}
@media (max-width: 570px) {
  .my-modal.my-modal-s .my-modal-dialog .modal-content .my-modal-body {
    padding: 24px 16px 16px 16px !important;
  }
}
.my-modal.my-modal-s .my-modal-dialog .modal-content .my-modal-footer {
  border-top: none !important;
  padding: 16px 24px 24px 24px !important;
}
@media (max-width: 570px) {
  .my-modal.my-modal-s .my-modal-dialog .modal-content .my-modal-footer {
    padding: 8px 16px 16px 16px !important;
  }
}

.my-modal.my-modal-m {
  width: 100%;
  max-width: 600px;
}
.my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body {
  padding: 24px 8px 24px 24px;
}
@media (max-width: 570px) {
  .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body {
    padding: 16px 4px 16px 16px;
  }
}
.my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box {
  max-height: 520px;
  overflow-y: auto;
  height: 100%;
  padding-right: 8px;
}
.my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-footer {
  padding: 24px 24px 24px 24px;
}
@media (max-width: 570px) {
  .my-modal.my-modal-m .my-modal-dialog .modal-content .my-modal-footer {
    padding: 16px 16px 16px 16px;
  }
}

.my-modal.my-modal-full {
  width: 100%;
  max-width: 648px;
}
.my-modal.my-modal-full .my-modal-dialog .modal-content {
  height: 100vh;
}
.my-modal.my-modal-full .my-modal-dialog .modal-content .my-modal-header {
  padding: 12px 24px 12px 24px;
}
.my-modal.my-modal-full .my-modal-dialog .modal-content .my-modal-body {
  padding: 16px 24px 16px 24px;
}

.my-pagination .my-pagination-list {
  display: flex !important;
  gap: 12px !important;
}
.my-pagination .my-pagination-list .my-pagination-item.my-pagination-arrow.opacity-50 .my-pagination-link {
  opacity: 0.5;
}
.my-pagination .my-pagination-list .my-pagination-item {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.my-pagination .my-pagination-list .my-pagination-item .my-pagination-link {
  width: 22px !important;
  height: 32px !important;
  text-decoration: none !important;
  color: #1D1F25 !important;
  width: 100% !important;
  line-height: 32px !important;
  border-radius: 6px 6px 6px 6px !important;
  text-align: center !important;
  transition: 0.5s !important;
}
.my-pagination .my-pagination-list .my-pagination-item .my-pagination-link:hover {
  background-color: #EDEEF1 !important;
}
.my-pagination .my-pagination-list .my-pagination-item .my-pagination-link:focus {
  background-color: #4FAFF1 !important;
  color: #ffffff !important;
}
.my-pagination .my-pagination-list .my-pagination-item .my-pagination-link:focus .iconBox svg path {
  fill: #ffffff !important;
}
.my-pagination .my-pagination-list .my-pagination-item .my-pagination-link .iconBox {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
}
.my-pagination .my-pagination-list .my-pagination-item.dots {
  width: 12px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.my-pagination .my-pagination-list .my-pagination-item.dots .my-pagination-link {
  width: 12px !important;
  height: 22px !important;
  cursor: default;
}
.my-pagination .my-pagination-list .my-pagination-item.dots .my-pagination-link:hover {
  background-color: transparent !important;
}
.my-pagination .my-pagination-list .my-pagination-item.dots .my-pagination-link:focus {
  background-color: transparent !important;
  color: #ffffff !important;
}
.my-pagination .my-pagination-list .my-pagination-item.dots .my-pagination-link:focus .iconBox svg path {
  fill: #ffffff !important;
}
.my-pagination .my-pagination-list .my-pagination-item.active .my-pagination-link {
  background-color: #4FAFF1 !important;
  color: #ffffff !important;
}

.my-position-fixed {
  position: fixed !important;
}

.my-position-absolute {
  position: absolute !important;
}

.my-position-static {
  position: static !important;
}

.my-position-relative {
  position: relative !important;
}

.my-position-sticky {
  position: sticky !important;
}

.my-position-fixed-center {
  bottom: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 50%) !important;
}

.my-position-bottom-0 {
  bottom: 0 !important;
}

.my-position-top-0 {
  top: 0 !important;
}

.my-position-left-0 {
  left: 0 !important;
}

.my-position-right-0 {
  right: 0 !important;
}

@media (max-width: 570px) {
  .my-position-transform-initial-sm {
    transform: initial !important;
  }
  .my-position-top-initial-sm {
    top: initial !important;
  }
  .my-position-bottom-0-sm {
    bottom: 0 !important;
  }
  .my-position-top-0-sm {
    top: 0 !important;
  }
  .my-position-left-0-sm {
    left: 0 !important;
  }
  .my-position-right-0-sm {
    right: 0 !important;
  }
  .my-position-fixed-sm {
    position: fixed !important;
  }
  .my-position-absolute-sm {
    position: absolute !important;
  }
  .my-position-static-sm {
    position: static !important;
  }
  .my-position-relative-sm {
    position: relative !important;
  }
  .my-position-sticky-sm {
    position: sticky !important;
  }
  .my-position-fixed-center-sm {
    bottom: 50% !important;
    left: 50% !important;
    transform: translate(-50%, 50%) !important;
  }
}
.my-position-fixed-md {
  position: fixed !important;
}

.my-position-absolute-md {
  position: absolute !important;
}

.my-position-static-md {
  position: static !important;
}

.my-position-relative-md {
  position: relative !important;
}

.my-position-sticky-md {
  position: sticky !important;
}

.my-position-fixed-center-md {
  bottom: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 50%) !important;
}

.my-position-fixed-lg {
  position: fixed !important;
}

.my-position-absolute-lg {
  position: absolute !important;
}

.my-position-static-lg {
  position: static !important;
}

.my-position-relative-lg {
  position: relative !important;
}

.my-position-sticky-lg {
  position: sticky !important;
}

.my-position-fixed-center-lg {
  bottom: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 50%) !important;
}

.my-position-fixed-xl {
  position: fixed !important;
}

.my-position-absolute-xl {
  position: absolute !important;
}

.my-position-static-xl {
  position: static !important;
}

.my-position-relative-xl {
  position: relative !important;
}

.my-position-sticky-xl {
  position: sticky !important;
}

.my-position-fixed-center-xl {
  bottom: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 50%) !important;
}

.my-position-fixed-xxl {
  position: fixed !important;
}

.my-position-absolute-xxl {
  position: absolute !important;
}

.my-position-static-xxl {
  position: static !important;
}

.my-position-relative-xxl {
  position: relative !important;
}

.my-position-sticky-xxl {
  position: sticky !important;
}

.my-position-fixed-center-xxl {
  bottom: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 50%) !important;
}

.my-zindex-100 {
  z-index: 100;
}

.my-zindex-200 {
  z-index: 200;
}

.my-zindex-300 {
  z-index: 300;
}

.my-zindex-400 {
  z-index: 400;
}

.my-zindex-500 {
  z-index: 500;
}

.my-zindex-600 {
  z-index: 600;
}

.my-zindex-700 {
  z-index: 700;
}

.my-zindex-800 {
  z-index: 800;
}

.my-zindex-900 {
  z-index: 900;
}

.my-zindex-1000 {
  z-index: 1000;
}

.my-bg-my-primary-950 {
  background-color: #0B2846 !important;
}

.my-bg-my-primary-900 {
  background-color: #10406A !important;
}

.my-bg-my-primary-800 {
  background-color: #0C4B80 !important;
}

.my-bg-my-primary-700 {
  background-color: #0A599A !important;
}

.my-bg-my-primary-600 {
  background-color: #0A6FBF !important;
}

.my-bg-my-primary-500 {
  background-color: #178DE0 !important;
}

.my-bg-my-primary-400 {
  background-color: #4FAFF1 !important;
}

.my-bg-my-primary-300 {
  background-color: #82C5F7 !important;
}

.my-bg-my-primary-200 {
  background-color: #BDDFFA !important;
}

.my-bg-my-primary-100 {
  background-color: #E1EFFD !important;
}

.my-bg-my-primary-50 {
  background-color: #F1F8FE !important;
}

.my-bg-my-secondary-950 {
  background-color: #1D1F25 !important;
}

.my-bg-my-secondary-900 {
  background-color: #363A44 !important;
}

.my-bg-my-secondary-800 {
  background-color: #3C4250 !important;
}

.my-bg-my-secondary-700 {
  background-color: #464D5E !important;
}

.my-bg-my-secondary-600 {
  background-color: #565F73 !important;
}

.my-bg-my-secondary-500 {
  background-color: #6B768C !important;
}

.my-bg-my-secondary-400 {
  background-color: #8993A7 !important;
}

.my-bg-my-secondary-300 {
  background-color: #B3B9C6 !important;
}

.my-bg-my-secondary-200 {
  background-color: #D6D9E1 !important;
}

.my-bg-my-secondary-100 {
  background-color: #EDEEF1 !important;
}

.my-bg-my-secondary-50 {
  background-color: #F6F7F9 !important;
}

.my-bg-my-grey-950 {
  background-color: #262626 !important;
}

.my-bg-my-grey-900 {
  background-color: #313131 !important;
}

.my-bg-my-grey-800 {
  background-color: #383838 !important;
}

.my-bg-my-grey-700 {
  background-color: #434343 !important;
}

.my-bg-my-grey-600 {
  background-color: #515151 !important;
}

.my-bg-my-grey-500 {
  background-color: #666666 !important;
}

.my-bg-my-grey-400 {
  background-color: #818181 !important;
}

.my-bg-my-grey-300 {
  background-color: #A4A4A4 !important;
}

.my-bg-my-grey-200 {
  background-color: #C8C8C8 !important;
}

.my-bg-my-grey-100 {
  background-color: #E3E3E3 !important;
}

.my-bg-my-grey-50 {
  background-color: #F7F7F7 !important;
}

.my-bg-my-grey-0 {
  background-color: #FFFFFF !important;
}

.my-bg-my-success-950 {
  background-color: #0B2B08 !important;
}

.my-bg-my-success-900 {
  background-color: #1F4E19 !important;
}

.my-bg-my-success-800 {
  background-color: #255F1C !important;
}

.my-bg-my-success-700 {
  background-color: #29781D !important;
}

.my-bg-my-success-600 {
  background-color: #309920 !important;
}

.my-bg-my-success-500 {
  background-color: #47CB32 !important;
}

.my-bg-my-success-400 {
  background-color: #67D355 !important;
}

.my-bg-my-success-300 {
  background-color: #9BE78E !important;
}

.my-bg-my-success-200 {
  background-color: #C7F3BF !important;
}

.my-bg-my-success-100 {
  background-color: #E2FADE !important;
}

.my-bg-my-success-50 {
  background-color: #F4FCF1 !important;
}

.my-bg-my-errorNote-950 {
  background-color: #481007 !important;
}

.my-bg-my-errorNote-900 {
  background-color: #842718 !important;
}

.my-bg-my-errorNote-800 {
  background-color: #A02714 !important;
}

.my-bg-my-errorNote-700 {
  background-color: #C12C14 !important;
}

.my-bg-my-errorNote-600 {
  background-color: #E5381D !important;
}

.my-bg-my-errorNote-500 {
  background-color: #F8553B !important;
}

.my-bg-my-errorNote-400 {
  background-color: #FF735D !important;
}

.my-bg-my-errorNote-300 {
  background-color: #FFADA0 !important;
}

.my-bg-my-errorNote-200 {
  background-color: #FFCFC7 !important;
}

.my-bg-my-errorNote-100 {
  background-color: #FFE5E1 !important;
}

.my-bg-my-errorNote-50 {
  background-color: #FFF3F1 !important;
}

.my-text-my-primary-950 {
  color: #0B2846 !important;
}

.my-text-my-primary-900 {
  color: #10406A !important;
}

.my-text-my-primary-800 {
  color: #0C4B80 !important;
}

.my-text-my-primary-700 {
  color: #0A599A !important;
}

.my-text-my-primary-600 {
  color: #0A6FBF !important;
}

.my-text-my-primary-500 {
  color: #178DE0 !important;
}

.my-text-my-primary-400 {
  color: #4FAFF1 !important;
}

.my-text-my-primary-300 {
  color: #82C5F7 !important;
}

.my-text-my-primary-200 {
  color: #BDDFFA !important;
}

.my-text-my-primary-100 {
  color: #E1EFFD !important;
}

.my-text-my-primary-50 {
  color: #F1F8FE !important;
}

.my-text-my-secondary-950 {
  color: #1D1F25 !important;
}

.my-text-my-secondary-900 {
  color: #363A44 !important;
}

.my-text-my-secondary-800 {
  color: #3C4250 !important;
}

.my-text-my-secondary-700 {
  color: #464D5E !important;
}

.my-text-my-secondary-600 {
  color: #565F73 !important;
}

.my-text-my-secondary-500 {
  color: #6B768C !important;
}

.my-text-my-secondary-400 {
  color: #8993A7 !important;
}

.my-text-my-secondary-300 {
  color: #B3B9C6 !important;
}

.my-text-my-secondary-200 {
  color: #D6D9E1 !important;
}

.my-text-my-secondary-100 {
  color: #EDEEF1 !important;
}

.my-text-my-secondary-50 {
  color: #F6F7F9 !important;
}

.my-text-my-grey-950 {
  color: #262626 !important;
}

.my-text-my-grey-900 {
  color: #313131 !important;
}

.my-text-my-grey-800 {
  color: #383838 !important;
}

.my-text-my-grey-700 {
  color: #434343 !important;
}

.my-text-my-grey-600 {
  color: #515151 !important;
}

.my-text-my-grey-500 {
  color: #666666 !important;
}

.my-text-my-grey-400 {
  color: #818181 !important;
}

.my-text-my-grey-300 {
  color: #A4A4A4 !important;
}

.my-text-my-grey-200 {
  color: #C8C8C8 !important;
}

.my-text-my-grey-100 {
  color: #E3E3E3 !important;
}

.my-text-my-grey-50 {
  color: #F7F7F7 !important;
}

.my-text-my-grey-0 {
  color: #FFFFFF !important;
}

.my-text-my-success-950 {
  color: #0B2B08 !important;
}

.my-text-my-success-900 {
  color: #1F4E19 !important;
}

.my-text-my-success-800 {
  color: #255F1C !important;
}

.my-text-my-success-700 {
  color: #29781D !important;
}

.my-text-my-success-600 {
  color: #309920 !important;
}

.my-text-my-success-500 {
  color: #47CB32 !important;
}

.my-text-my-success-400 {
  color: #67D355 !important;
}

.my-text-my-success-300 {
  color: #9BE78E !important;
}

.my-text-my-success-200 {
  color: #C7F3BF !important;
}

.my-text-my-success-100 {
  color: #E2FADE !important;
}

.my-text-my-success-50 {
  color: #F4FCF1 !important;
}

.my-text-my-errorNote-950 {
  color: #481007 !important;
}

.my-text-my-errorNote-900 {
  color: #842718 !important;
}

.my-text-my-errorNote-800 {
  color: #A02714 !important;
}

.my-text-my-errorNote-700 {
  color: #C12C14 !important;
}

.my-text-my-errorNote-600 {
  color: #E5381D !important;
}

.my-text-my-errorNote-500 {
  color: #F8553B !important;
}

.my-text-my-errorNote-400 {
  color: #FF735D !important;
}

.my-text-my-errorNote-300 {
  color: #FFADA0 !important;
}

.my-text-my-errorNote-200 {
  color: #FFCFC7 !important;
}

.my-text-my-errorNote-100 {
  color: #FFE5E1 !important;
}

.my-text-my-errorNote-50 {
  color: #FFF3F1 !important;
}

.my-border-my-primary-950 {
  border-color: #0B2846 !important;
}

.my-border-my-primary-900 {
  border-color: #10406A !important;
}

.my-border-my-primary-800 {
  border-color: #0C4B80 !important;
}

.my-border-my-primary-700 {
  border-color: #0A599A !important;
}

.my-border-my-primary-600 {
  border-color: #0A6FBF !important;
}

.my-border-my-primary-500 {
  border-color: #178DE0 !important;
}

.my-border-my-primary-400 {
  border-color: #4FAFF1 !important;
}

.my-border-my-primary-300 {
  border-color: #82C5F7 !important;
}

.my-border-my-primary-200 {
  border-color: #BDDFFA !important;
}

.my-border-my-primary-100 {
  border-color: #E1EFFD !important;
}

.my-border-my-primary-50 {
  border-color: #F1F8FE !important;
}

.my-border-my-secondary-950 {
  border-color: #1D1F25 !important;
}

.my-border-my-secondary-900 {
  border-color: #363A44 !important;
}

.my-border-my-secondary-800 {
  border-color: #3C4250 !important;
}

.my-border-my-secondary-700 {
  border-color: #464D5E !important;
}

.my-border-my-secondary-600 {
  border-color: #565F73 !important;
}

.my-border-my-secondary-500 {
  border-color: #6B768C !important;
}

.my-border-my-secondary-400 {
  border-color: #8993A7 !important;
}

.my-border-my-secondary-300 {
  border-color: #B3B9C6 !important;
}

.my-border-my-secondary-200 {
  border-color: #D6D9E1 !important;
}

.my-border-my-secondary-100 {
  border-color: #EDEEF1 !important;
}

.my-border-my-secondary-50 {
  border-color: #F6F7F9 !important;
}

.my-border-my-grey-950 {
  border-color: #262626 !important;
}

.my-border-my-grey-900 {
  border-color: #313131 !important;
}

.my-border-my-grey-800 {
  border-color: #383838 !important;
}

.my-border-my-grey-700 {
  border-color: #434343 !important;
}

.my-border-my-grey-600 {
  border-color: #515151 !important;
}

.my-border-my-grey-500 {
  border-color: #666666 !important;
}

.my-border-my-grey-400 {
  border-color: #818181 !important;
}

.my-border-my-grey-300 {
  border-color: #A4A4A4 !important;
}

.my-border-my-grey-200 {
  border-color: #C8C8C8 !important;
}

.my-border-my-grey-100 {
  border-color: #E3E3E3 !important;
}

.my-border-my-grey-50 {
  border-color: #F7F7F7 !important;
}

.my-border-my-grey-0 {
  border-color: #FFFFFF !important;
}

.my-border-my-success-950 {
  border-color: #0B2B08 !important;
}

.my-border-my-success-900 {
  border-color: #1F4E19 !important;
}

.my-border-my-success-800 {
  border-color: #255F1C !important;
}

.my-border-my-success-700 {
  border-color: #29781D !important;
}

.my-border-my-success-600 {
  border-color: #309920 !important;
}

.my-border-my-success-500 {
  border-color: #47CB32 !important;
}

.my-border-my-success-400 {
  border-color: #67D355 !important;
}

.my-border-my-success-300 {
  border-color: #9BE78E !important;
}

.my-border-my-success-200 {
  border-color: #C7F3BF !important;
}

.my-border-my-success-100 {
  border-color: #E2FADE !important;
}

.my-border-my-success-50 {
  border-color: #F4FCF1 !important;
}

.my-border-my-errorNote-950 {
  border-color: #481007 !important;
}

.my-border-my-errorNote-900 {
  border-color: #842718 !important;
}

.my-border-my-errorNote-800 {
  border-color: #A02714 !important;
}

.my-border-my-errorNote-700 {
  border-color: #C12C14 !important;
}

.my-border-my-errorNote-600 {
  border-color: #E5381D !important;
}

.my-border-my-errorNote-500 {
  border-color: #F8553B !important;
}

.my-border-my-errorNote-400 {
  border-color: #FF735D !important;
}

.my-border-my-errorNote-300 {
  border-color: #FFADA0 !important;
}

.my-border-my-errorNote-200 {
  border-color: #FFCFC7 !important;
}

.my-border-my-errorNote-100 {
  border-color: #FFE5E1 !important;
}

.my-border-my-errorNote-50 {
  border-color: #FFF3F1 !important;
}

/*rwd*/
/*rwd*/
.module-coverImg {
  z-index: 200;
  display: none;
}
.module-coverImg .module-coverImgBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.module-coverImg .module-coverImgBox a {
  display: block;
  text-decoration: none;
}
.module-coverImg .module-coverImgBox a .imgBox {
  position: relative;
  margin: 0 0 4px 0;
}
.module-coverImg .module-coverImgBox a .imgBox .grade {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 100%;
}
@media (max-width: 570px) {
  .module-coverImg .module-coverImgBox a .imgBox .grade {
    top: 4px;
    right: 4px;
  }
}
.module-coverImg .module-coverImgBox a .imgBox .grade img {
  border-radius: 4px 4px 4px 4px;
  width: auto;
  height: 10%;
  max-height: 40px;
  transform: scale(1, 1);
}
@media (max-width: 570px) {
  .module-coverImg .module-coverImgBox a .imgBox .grade img {
    max-height: 20px;
  }
}
.module-coverImg .module-coverImgBox a .imgBox img {
  width: 100%;
  max-width: 1068px;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .module-coverImg .module-coverImgBox a .imgBox img.imgPc {
    display: none;
  }
}
.module-coverImg .module-coverImgBox a .imgBox img.imgMb {
  min-width: 225px;
  display: none;
}
@media (max-width: 768px) {
  .module-coverImg .module-coverImgBox a .imgBox img.imgMb {
    display: block;
  }
}
.module-coverImg .module-coverImgBox a .timeBox {
  text-align: center;
  font-size: 14px;
  color: #ffffff;
}
@media (max-width: 570px) {
  .module-coverImg .module-coverImgBox a .timeBox {
    font-size: 12px;
  }
}
.module-coverImg .module-coverImgBox a .timeBox .colon {
  margin: 0 4px 0 4px;
}
.module-coverImg .module-coverImgBox .iconBox {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: -48px;
  padding: 8px 8px 8px 8px;
  cursor: pointer;
}
@media (max-width: 570px) {
  .module-coverImg .module-coverImgBox .iconBox {
    width: 32px;
    height: 32px;
    right: -40px;
    padding: 4px 4px 4px 4px;
  }
}
.module-coverImg .module-coverImgBox .iconBox svg.icon_close {
  filter: brightness(0) invert(1);
}

.module-closableImg {
  position: fixed;
  right: 40px;
  bottom: 106px;
  width: 100%;
  max-width: 78px;
  z-index: 50;
}
@media (max-width: 570px) {
  .module-closableImg {
    right: 16px;
  }
}
.module-closableImg .module-closableImgBox {
  position: relative;
}
.module-closableImg .module-closableImgBox a {
  text-decoration: none;
}
.module-closableImg .module-closableImgBox a .module-closableImg-simpleImg {
  padding: 8px 8px 0px 8px;
}
.module-closableImg .module-closableImgBox a .module-closableImg-simpleImg .imgBox {
  border: 1px solid #fff;
  border-radius: 6px;
}
.module-closableImg .module-closableImgBox a .module-closableImg-simpleImg .imgBox img {
  width: 100%;
  max-width: 60px;
}
.module-closableImg .module-closableImgBox a .module-closableImg-simpleImg .textBox {
  margin: 8px 0 0 0;
}
.module-closableImg .module-closableImgBox a .module-closableImg-simpleImg .textBox p {
  font-size: 14px;
  color: #ffffff;
  line-height: 140%;
  text-align: center;
}
.module-closableImg .module-closableImgBox a .module-closableImg-simpleImg .icon_forward {
  display: block;
  margin: 8px auto 0 auto;
  width: 24px;
  height: 24px;
  padding: 4px;
  background-color: #4FAFF1;
  border-radius: 100px;
}
.module-closableImg .module-closableImgBox a .module-closableImg-simpleImg .icon_forward svg {
  filter: brightness(0) invert(1);
}
.module-closableImg .module-closableImgBox a .time {
  background-color: #464D5E;
  border-radius: 4px;
  margin: 4px 0 0 0;
  padding: 2px 2px 2px 2px;
}
.module-closableImg .module-closableImgBox a .time .timeBox {
  text-align: center;
  font-size: 12px;
  color: #ffffff;
}
.module-closableImg .module-closableImgBox a .time .timeBox .colon {
  margin: 0 4px 0 4px;
}
.module-closableImg .module-closableImgBox .icon_close {
  position: absolute;
  top: -5px;
  right: -10px;
  background-color: rgba(49, 49, 49, 0.5019607843);
  border-radius: 100px;
  cursor: pointer;
  width: 24px;
  height: 24px;
}
@media (max-width: 570px) {
  .module-closableImg .module-closableImgBox .icon_close {
    top: -3px;
    right: -8px;
    width: 20px;
    height: 20px;
    padding: 2px 2px 2px 2px;
  }
}
.module-closableImg .module-closableImgBox .icon_close svg {
  filter: brightness(0) invert(1);
}
@media (max-width: 570px) {
  .module-closableImg .module-closableImgBox .icon_close svg {
    width: 16px;
    height: 16px;
  }
}

.module-closableImg.module-colorBlock .module-closableImgBox a .module-closableImg-simpleImg {
  padding: 8px 8px 8px 8px;
  background-color: #82C5F7;
  border-radius: 8px 8px 8px 8px;
}
.module-closableImg.module-colorBlock .module-closableImgBox a .module-closableImg-simpleImg .textBox p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}
.module-closableImg.module-colorBlock .module-closableImgBox .icon_close {
  top: 0px;
  right: 0px;
  transform: translate(50%, -50%);
}
@media (max-width: 570px) {
  .module-closableImg.module-colorBlock .module-closableImgBox .icon_close {
    top: 2px;
    right: 2px;
  }
}

.module-closableImg.botton {
  bottom: -40px;
  right: 0px;
  max-width: 100%;
  height: 40px;
  background-color: #82C5F7;
  transition: 0.3s;
}
@media (max-width: 570px) {
  .module-closableImg.botton {
    bottom: -44px;
    height: 44px;
  }
}
.module-closableImg.botton .module-closableImgBox a {
  padding: 8px 8px 8px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.module-closableImg.botton .module-closableImgBox a .module-closableImg-simpleImg {
  padding: 0 0 0 0;
  margin: 0 16px 0 0;
}
.module-closableImg.botton .module-closableImgBox a .module-closableImg-simpleImg .textBox {
  margin: 0 0 0 0;
}
.module-closableImg.botton .module-closableImgBox a .module-closableImg-simpleImg .textBox p {
  width: 100%;
  max-width: 182px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  font-size: 14px;
  color: #ffffff;
  line-height: 140%;
  text-align: center;
}
.module-closableImg.botton .module-closableImgBox a .time {
  background-color: #178DE0;
  border-radius: 4px;
  margin: 0 0 0 0;
  padding: 2px 4px 2px 4px;
}
.module-closableImg.botton .module-closableImgBox a .time .timeBox {
  text-align: center;
  font-size: 12px;
  color: #ffffff;
}
.module-closableImg.botton .module-closableImgBox a .time .timeBox .colon {
  margin: 0 4px 0 4px;
}
.module-closableImg.botton .module-closableImgBox a .iconBox {
  margin: 0 0 0 16px;
  width: 24px;
  height: 24px;
  padding: 4px;
  background-color: #4FAFF1;
  border-radius: 100px;
}
.module-closableImg.botton .module-closableImgBox a .iconBox svg.icon_forward {
  filter: brightness(0) invert(1);
}

.module-closableImg.botton.show {
  bottom: 0px;
}

.page {
  padding: 63px 0 0 0;
}
@media (max-width: 1140px) {
  .page {
    padding: 51px 0 0 0;
  }
}

.imgBox img {
  width: 100%;
  max-width: 100%;
}

.areaState {
  width: 100%;
}
.areaState .imgBox {
  width: 100%;
}
.areaState .imgBox img {
  width: 100%;
  max-width: 260px;
}
@media (max-width: 900px) {
  .areaState .imgBox img {
    max-width: 200px;
  }
}
@media (max-width: 570px) {
  .areaState .imgBox img {
    max-width: 160px;
  }
}
.areaState .text {
  color: #363A44;
}

.my-title .my-titleBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my-title .my-titleBox .my-textBox {
  width: 100%;
}
.my-title .my-titleBox .my-textBox .my-list-tab {
  gap: 40px;
  overflow-x: auto;
}
@media (max-width: 570px) {
  .my-title .my-titleBox .my-textBox .my-list-tab {
    gap: 16px;
  }
}
.my-title .my-titleBox .my-textBox .my-list-tab::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1140px) {
  .my-title .my-titleBox .my-textBox .my-list-tab::-webkit-scrollbar {
    display: block;
    height: 0px;
    border-radius: 5px;
  }
}
.my-title .my-titleBox .my-textBox .my-list-tab::-webkit-scrollbar-button {
  height: 0px;
  background: transparent;
}
.my-title .my-titleBox .my-textBox .my-list-tab::-webkit-scrollbar-track-piece {
  background: transparent;
}
.my-title .my-titleBox .my-textBox .my-list-tab::-webkit-scrollbar-track {
  background-color: transparent;
}
.my-title .my-titleBox .my-textBox .my-list-tab::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.my-title .my-titleBox .my-textBox .my-list-tab .my-list-tab-tiem {
  padding: 0 0 4px 0;
  color: #1D1F25;
}
.my-title .my-titleBox .my-textBox .my-list-tab .my-list-tab-tiem {
  color: #B3B9C6;
  flex-shrink: 0;
  cursor: pointer;
  transition: 0.3s;
  border-bottom: 2px solid transparent;
}
@media (max-width: 570px) {
  .my-title .my-titleBox .my-textBox .my-list-tab .my-list-tab-tiem {
    padding: 6px 0 6px 0;
  }
}
.my-title .my-titleBox .my-textBox .my-list-tab .my-list-tab-tiem:hover {
  border-bottom: 2px solid #B3B9C6;
}
.my-title .my-titleBox .my-textBox .my-list-tab .my-list-tab-tiem.active {
  color: #1D1F25;
  border-bottom: 2px solid #1D1F25;
}
.my-title .my-titleBox .my-textBox .my-list-tab.my-list-tab-colorBlue .my-list-tab-tiem.active {
  color: #4FAFF1 !important;
  border-bottom: 2px solid #4FAFF1 !important;
}
.my-title .my-titleBox .my-title-btn {
  display: flex;
  align-items: center;
  margin: 0 0 0 24px;
  text-decoration: none;
}
@media (max-width: 570px) {
  .my-title .my-titleBox .my-title-btn {
    margin: 0 0 0 16px;
  }
}
.my-title .my-titleBox .my-title-btn .my-btn-main-text-s {
  cursor: pointer;
  color: #565F73;
  text-align: center;
}
@media (max-width: 570px) {
  .my-title .my-titleBox .my-title-btn .my-btn-main-text-s {
    display: none;
  }
}
.my-title .my-titleBox .my-title-btn .iconBox {
  line-height: 100%;
  cursor: pointer;
  font-size: 0px;
  margin: 0 0 0 6px;
}
@media (max-width: 570px) {
  .my-title .my-titleBox .my-title-btn .iconBox {
    margin: 0 0 0 0;
  }
}
.my-title .my-titleBox .my-title-btn .iconBox svg {
  width: 24px;
  height: 24px;
}
.my-title .my-titleBox .my-title-btn .icon_right path {
  fill: #565F73;
}

.my-swiper-bullet-inside-main .swiper-pagination {
  position: absolute !important;
  margin: 16px 0 0 0 !important;
  bottom: 12px !important;
  font-size: 0px !important;
}
@media (max-width: 570px) {
  .my-swiper-bullet-inside-main .swiper-pagination {
    margin: 12px 0 0 0 !important;
  }
}
.my-swiper-bullet-inside-main .swiper-pagination .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px 0 6px !important;
  background-color: rgb(227, 227, 227) !important;
  opacity: 1 !important;
}
@media (max-width: 570px) {
  .my-swiper-bullet-inside-main .swiper-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px 0 4px !important;
  }
}
.my-swiper-bullet-inside-main .swiper-pagination .swiper-pagination-bullet-active {
  background-color: rgb(227, 227, 227) !important;
  width: 60px !important;
  border-radius: 50px !important;
}
.my-swiper-bullet-inside-main .swiper-pagination .swiper-pagination-bullet-active::before {
  content: "" !important;
  display: block !important;
  height: 100% !important;
  background-color: rgb(23, 141, 224) !important;
  border-radius: 50px !important;
  animation-name: bullet-active !important;
  animation-duration: 4s !important;
}
@keyframes bullet-active {
  0% {
    width: 10px !important;
  }
  100% {
    width: 100% !important;
  }
}
@media (max-width: 570px) {
  .my-swiper-bullet-inside-main .swiper-pagination .swiper-pagination-bullet-active {
    width: 40px !important;
  }
}

.my-swiper-bullet-outside-main .swiper-pagination {
  position: relative;
  margin: 16px 0 0 0;
  font-size: 0px;
  bottom: initial;
}
@media (max-width: 570px) {
  .my-swiper-bullet-outside-main .swiper-pagination {
    margin: 12px 0 0 0;
  }
}
.my-swiper-bullet-outside-main .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 6px 0 6px;
  background-color: rgb(227, 227, 227);
  opacity: 1;
}
@media (max-width: 570px) {
  .my-swiper-bullet-outside-main .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px 0 4px;
  }
}
.my-swiper-bullet-outside-main .swiper-pagination .swiper-pagination-bullet-active {
  background-color: rgb(227, 227, 227);
  width: 60px;
  border-radius: 50px;
}
.my-swiper-bullet-outside-main .swiper-pagination .swiper-pagination-bullet-active::before {
  content: "";
  display: block;
  height: 100%;
  background-color: rgb(23, 141, 224);
  border-radius: 50px;
  animation-name: bullet-active;
  animation-duration: 4s;
}
@keyframes bullet-active {
  0% {
    width: 10px;
  }
  100% {
    width: 100%;
  }
}
@media (max-width: 570px) {
  .my-swiper-bullet-outside-main .swiper-pagination .swiper-pagination-bullet-active {
    width: 40px;
  }
}

.my-swiper-bullet-inside .swiper-pagination {
  position: absolute !important;
  bottom: 12px !important;
  font-size: 0px !important;
}
.my-swiper-bullet-inside .swiper-pagination .swiper-pagination-bullet {
  background-color: #E3E3E3 !important;
  width: 10px !important;
  height: 10px !important;
  opacity: 1 !important;
  margin: 0 6px 0 6px !important;
}
@media (max-width: 570px) {
  .my-swiper-bullet-inside .swiper-pagination .swiper-pagination-bullet {
    margin: 0 4px 0 4px !important;
    width: 8px !important;
    height: 8px !important;
  }
}
.my-swiper-bullet-inside .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #E3E3E3 !important;
  opacity: 1 !important;
}
.my-swiper-bullet-inside .swiper-pagination .swiper-pagination-bullet-active::before {
  content: "" !important;
  background-color: #82c5f7 !important;
}

.my-swiper-bullet-outside .swiper-pagination {
  position: relative !important;
  margin: 16px 0 0 0 !important;
  bottom: 0px !important;
  font-size: 0px !important;
}
.my-swiper-bullet-outside .swiper-pagination .swiper-pagination-bullet {
  background-color: #E3E3E3 !important;
  width: 10px !important;
  height: 10px !important;
  opacity: 1 !important;
  margin: 0 6px 0 6px !important;
}
@media (max-width: 570px) {
  .my-swiper-bullet-outside .swiper-pagination .swiper-pagination-bullet {
    margin: 0 4px 0 4px !important;
    width: 8px !important;
    height: 8px !important;
  }
}
.my-swiper-bullet-outside .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #82C5F7 !important;
  opacity: 1 !important;
}
.my-swiper-bullet-outside .swiper-pagination .swiper-pagination-bullet-active::before {
  content: "" !important;
  background-color: #82c5f7 !important;
}

@media (max-width: 570px) {
  .my-swiper {
    border-radius: 0px 0px 0px 0px;
  }
}
.my-swiper .swiper-slide a .imgBox img {
  border-radius: 16px 16px 16px 16px;
}
.my-swiper .swiper-slide-active a .imgBox img {
  border-radius: 16px 16px 16px 16px;
}
.my-swiper .swiper-button-prev, .my-swiper .swiper-button-next {
  color: #ffffff !important;
  background-color: rgba(29, 31, 37, 0.3) !important;
  padding: 24px 10px 24px 10px !important;
  border-radius: 12px !important;
  width: 60px !important;
  height: 88px !important;
  z-index: 200 !important;
  transition: 0.3s !important;
}
@media (max-width: 1140px) {
  .my-swiper .swiper-button-prev, .my-swiper .swiper-button-next {
    display: none !important;
  }
}
.my-swiper .swiper-button-prev:hover, .my-swiper .swiper-button-next:hover {
  background-color: rgba(29, 31, 37, 0.4) !important;
}
.my-swiper .swiper-button-prev {
  top: 50% !important;
  left: 20% !important;
  transform: translate(0, -50%) !important;
}
.my-swiper .swiper-button-next {
  top: 50% !important;
  right: 20% !important;
  transform: translate(0%, -50%) !important;
}

.my-modal.my-modal-m .faceImg {
  width: 100%;
  max-width: 100px;
}

.my-modal.my-modal-s .areaState .imgBox {
  width: 100%;
}
.my-modal.my-modal-s .areaState .imgBox img {
  width: 100%;
  max-width: 160px;
}
@media (max-width: 570px) {
  .my-modal.my-modal-s .areaState .imgBox img {
    max-width: 120px;
  }
}

.my-module-columns-three-row.grid-row .swiper-wrapper .swiper-slide a {
  display: flex !important;
  align-items: center !important;
}
.my-module-columns-three-row.grid-row .swiper-wrapper .swiper-slide a .imgBox {
  margin: 0 0 0 0;
  flex: 90px 0;
}
@media (max-width: 570px) {
  .my-module-columns-three-row.grid-row .swiper-wrapper .swiper-slide a .imgBox {
    flex: 60px 0;
  }
}
.my-module-columns-three-row.grid-row .swiper-wrapper .swiper-slide a .imgBox img.mainImg {
  margin: 0 0 0 0;
}
.my-module-columns-three-row.grid-row .swiper-wrapper .swiper-slide a .text {
  margin: 0 0 0 12px;
  flex: 1;
}
.my-module-columns-three-row.grid-row .swiper-wrapper .swiper-slide a .text h4 {
  margin: 0 0 4px 0;
}
.my-module-columns-three-row.grid-row .swiper-wrapper .swiper-slide a .text p {
  margin: 0 0 0 0;
}

.my-modal-body .my-modal-body-box p.invalid {
  color: #F8553B;
}
.my-modal-body .my-modal-body-box .faceImg-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.my-modal-body .my-modal-body-box .faceImg-list .faceImg-item {
  cursor: pointer;
  border-radius: 100px;
  overflow: hidden;
  width: calc(25% - 18px);
  border: 3px solid transparent;
  position: relative;
  transition: 0.5s;
}
.my-modal-body .my-modal-body-box .faceImg-list .faceImg-item:hover {
  border: 3px solid #82C5F7;
}
.my-modal-body .my-modal-body-box .faceImg-list .faceImg-item img {
  width: 100%;
  max-width: 100%;
}
.my-modal-body .my-modal-body-box .faceImg-list .click.faceImg-item::before {
  content: "";
  background-image: url(../img/member/check.png);
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.my-modal-body .my-modal-body-box .faceImg-list .click.faceImg-item::after {
  content: "";
  background-color: #1D1F25;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.my-modal-body .my-modal-body-box .btn-list {
  width: 100%;
}
.my-modal-body .my-modal-body-box .btn-list .btn-item {
  padding: 8px 8px 8px 8px;
  text-align: center;
}
.my-modal-body .my-modal-body-box .btn-list .btn-item p {
  display: inline-block;
  cursor: pointer;
  color: #464D5E;
}
.my-modal-body .my-modal-body-box .textBox h2 {
  font-size: 22px;
  color: #1D1F25;
}
@media (max-width: 570px) {
  .my-modal-body .my-modal-body-box .textBox h2 {
    font-size: 16px;
  }
}
.my-modal-body .my-modal-body-box .textBox h3 {
  margin: 16px 0 0 0;
  color: #1D1F25;
  font-size: 16px;
}
@media (max-width: 570px) {
  .my-modal-body .my-modal-body-box .textBox h3 {
    font-size: 14px;
  }
}
.my-modal-body .my-modal-body-box .textBox .time {
  margin: 16px 0 0 0;
}
.my-modal-body .my-modal-body-box .textBox .time h4 {
  font-size: 16px;
  font-weight: initial;
  line-height: 140%;
  color: #1D1F25;
}
@media (max-width: 570px) {
  .my-modal-body .my-modal-body-box .textBox .time h4 {
    font-size: 14px;
  }
}
.my-modal-body .my-modal-body-box .textBox .time p {
  font-size: 14px;
  line-height: 140%;
  color: #3C4250;
  margin: 4px 0 0 0;
}
@media (max-width: 570px) {
  .my-modal-body .my-modal-body-box .textBox .time p {
    font-size: 13px;
  }
}
.my-modal-body .my-modal-body-box .textBox p {
  font-size: 14px;
  line-height: 140%;
  margin: 0 0 0 0;
}
@media (max-width: 570px) {
  .my-modal-body .my-modal-body-box .textBox p {
    font-size: 13px;
  }
}
.my-modal-body .my-modal-body-box .textBox .iconBox .icon_copy {
  cursor: pointer;
}
.my-modal-body .my-modal-body-box .textBox-link-list {
  list-style: disc;
}
.my-modal-body .my-modal-body-box .textBox-link-list .textBox-link-list-item::before {
  content: "·";
  font-size: 16px;
  color: #178DE0;
  vertical-align: middle;
  line-height: 20px;
  padding: 0 8px;
}
.my-modal-body .my-modal-body-box .textBox-link-list .textBox-link-list-item a {
  color: #178DE0;
  text-decoration: underline;
  font-size: 14px;
  line-height: 140%;
  font-weight: 400;
}
@media (max-width: 768px) {
  .my-modal-body .my-modal-body-box .textBox-link-list .textBox-link-list-item a {
    font-size: 13px;
  }
}
.my-modal-body .my-modal-body-box .textBox-imgText-list {
  width: 100%;
}
.my-modal-body .my-modal-body-box .textBox-imgText-list .textBox-imgText-list-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0 8px 0;
  border-bottom: 1px solid #EDEEF1;
  color: #3C4250;
}
.my-modal-body .my-modal-body-box .textBox-imgText-list .textBox-imgText-list-item .textBox-imgText-list-item-img img {
  width: 30px;
  height: 30px;
}
.my-modal-body .my-modal-body-box .textBox-imgText-list .textBox-imgText-list-item .textBox-imgText-list-item-text {
  margin: 0 16px 0 16px;
}
.my-modal-body .my-modal-body-box .textBox-imgText-list .textBox-imgText-list-item .textBox-imgText-list-item-icon svg.rotate-180 {
  transform: rotate(180deg);
}
.my-modal-body .my-modal-body-box .textBox-imgText-list .textBox-imgText-list-item ul.textBox-imgText-list {
  margin: 0 0 0 46px;
  display: none;
}
.my-modal-body .my-modal-body-box .textBox-imgText-list .textBox-imgText-list-item ul.textBox-imgText-list li {
  border-bottom: none;
  padding: 2px 0 2px 0;
}
.my-modal-body .my-modal-body-box .textBox-imgText-list .textBox-imgText-list-item.cursor {
  cursor: pointer;
}
.my-modal-body .my-modal-body-box .textBox-note-list {
  list-style: decimal;
  padding: 0 0 0 16px;
}
.my-modal-body .my-modal-body-box .textBox-note-list .textBox-note-list-item {
  color: #3C4250;
}
.my-modal-body .my-modal-body-box .textBox-note-list .textBox-note-list-item a {
  color: #178DE0;
}
.my-modal-body .my-modal-body-box .textBox-list {
  list-style: decimal;
  padding: 0 0 0 16px;
}
.my-modal-body .my-modal-body-box .textBox-list .textBox-list-item {
  color: #565F73;
}
.my-modal-body .my-modal-body-box .textBox-list .textBox-list-item + .textBox-list-item {
  margin: 16px 0 0 0;
}

.my-btn-column-4 {
  flex-wrap: wrap;
  gap: 24px 32px;
}
.my-btn-column-4 .btnBox {
  width: 100%;
  max-width: calc(25% - 24px);
}
.my-btn-column-4 .btnBox .my-btn-main {
  width: 100%;
}

@media (max-width: 570px) {
  .my-btn-column-1-sm {
    gap: 12px 12px;
  }
  .my-btn-column-1-sm .btnBox {
    width: 100%;
    max-width: 100%;
  }
  .my-btn-column-1-sm .btnBox .my-btn-main {
    width: 100%;
  }
}
@media (max-width: 570px) {
  .my-card-column-1-sm {
    flex-wrap: wrap;
  }
  .my-card-column-1-sm .my-card-column-item {
    width: 100%;
    max-width: 100%;
  }
}
.my-module-card-list-six .my-module-card-item {
  width: 100%;
  max-width: calc(16.6666666667% - 20px);
}

@media (max-width: 768px) {
  .my-module-card-list-four-md .my-module-card-item {
    width: 100%;
    max-width: calc(25% - 18px);
  }
}
@media (max-width: 570px) {
  .my-module-card-list-six-sm .my-module-card-item {
    width: 100%;
    max-width: calc(16.6666666667% - 8px);
  }
  .my-module-card-list-three-sm .my-module-card-item {
    width: 100%;
    max-width: calc(33.3333333333% - 8px);
  }
}
.my-module-card .my-module-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
@media (max-width: 768px) {
  .my-module-card .my-module-card-list {
    gap: 24px;
  }
}
@media (max-width: 570px) {
  .my-module-card .my-module-card-list {
    gap: 12px;
  }
}
.my-module-card .my-module-card-list .my-module-card-item a {
  text-decoration: none;
}
.my-module-card .my-module-card-list .my-module-card-item a .my-card-body .my-card-title {
  margin: 12px 0 0 0;
}
@media (max-width: 570px) {
  .my-module-card .my-module-card-list .my-module-card-item a .my-card-body .my-card-title {
    margin: 8px 0 0 0;
  }
}
.my-search {
  width: 100%;
  min-height: 40px;
  max-height: 40px;
  position: relative;
}
@media (max-width: 768px) {
  .my-search {
    width: 100%;
  }
}
.my-search .my-search-box {
  min-height: 40px;
  max-height: 40px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 4px 8px;
  border-radius: 100px;
  overflow: hidden;
  background-color: #F7F7F7;
  border: 1px solid transparent;
}
.my-search .my-search-box:hover {
  border: 1px solid #A4A4A4;
}
@media (max-width: 768px) {
  .my-search .my-search-box {
    padding: 4px 4px 4px 16px;
  }
}
.my-search .my-search-box .iconBox {
  margin: 0 0 0 0;
}
.my-search .my-search-box .iconBox .icon_search {
  width: 24px;
  height: 24px;
}
@media (max-width: 768px) {
  .my-search .my-search-box .iconBox .icon_search {
    display: none;
  }
}
.my-search .my-search-box .input {
  position: absolute;
  z-index: 4;
  flex: 1;
  width: calc(100% - 24px);
  margin: 0 0 0 34px;
  background-color: transparent;
  height: 100%;
}
@media (max-width: 768px) {
  .my-search .my-search-box .input {
    margin: 0 0 0 0;
    width: 100%;
  }
}
.my-search .my-search-box .input .inputBox {
  height: 100%;
}
.my-search .my-search-box .input .inputBox input[type=search] {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  flex: 1;
  font-size: 16px;
  transform: scale(0.92);
  transform-origin: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.my-search .my-search-box .input .inputBox input[type=search]:focus {
  outline: none;
  color: #313131;
}
.my-search .my-search-box .input .inputBox input[type=search]:hover {
  color: #313131;
}
.my-search .my-search-box .input .inputBox input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.my-search .my-search-box .input .inputBox .textJump {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 5;
  background-color: transparent;
  overflow-x: hidden !important;
  font-weight: 200;
  height: 100%;
}
.my-search .my-search-box .input .inputBox .textJump .swiper {
  width: 100%;
  height: 30px;
  height: 100%;
}
.my-search .my-search-box .input .inputBox .textJump .swiper .swiper-slide {
  text-align: left;
  font-size: 18px;
  display: flex;
  align-items: center;
  font-size: 13px;
}
.my-search .my-search-box .input .inputBox .textJump .swiper .swiper-slide p {
  color: #A4A4A4;
}
.my-search .my-search-box.border {
  border: 1px solid #A4A4A4;
}
.my-search .my-dropDown {
  width: 100%;
  padding: 16px 16px 16px 16px;
  background-color: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1019607843);
  border-radius: 16px;
  display: none;
  position: absolute;
  left: 0px;
  top: 48px;
  z-index: 100;
}
.my-search .my-dropDown .my-keywords-title {
  font-weight: initial;
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 140%;
}
.my-search .my-dropDown .my-keywords-list {
  display: flex;
  flex-wrap: wrap;
  line-height: 32px;
  gap: 12px;
}
.my-search .my-dropDown .my-keywords-list .my-keywords-item .my-keywords-link {
  text-decoration: none;
  background-color: #E3E3E3;
  padding: 6px 12px 6px 12px;
  border-radius: 100px;
  white-space: initial;
  font-size: 14px;
  color: #363A44;
}

.my-tab-card .my-title-tab-contentBox .my-title-tab-content {
  display: none;
}
.my-tab-card .my-title-tab-contentBox .my-title-tab-content.active {
  display: block !important;
}
.my-tab-card .my-title-tab-contentBox .my-tab-content {
  display: none;
}
.my-tab-card .my-title-tab-contentBox .my-tab-content.active {
  display: block !important;
}

.product {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 570px) {
  .product {
    gap: 0px;
  }
}
.product .product-column-item.active {
  background-color: #EDEEF1 !important;
}
.product .product-column-item {
  position: relative;
  border: 1px solid #EDEEF1;
  background-color: #fff;
  border-radius: 6px;
  width: 100%;
  max-width: calc(33.3333333333% - 10.662px);
  height: 92px;
  transition: 0.3s;
  overflow: hidden;
}
.product .product-column-item + .product-column-item {
  border-top: 2px solid #f7f7f7;
}
.product .product-column-item:hover {
  box-shadow: 0 0 8px 0 rgba(102, 102, 115, 0.1019607843);
}
@media (max-width: 1140px) {
  .product .product-column-item {
    max-width: calc(50% - 8px);
  }
}
@media (max-width: 570px) {
  .product .product-column-item {
    border: none;
    border-radius: initial;
    max-width: 100%;
    height: 76px;
  }
  .product .product-column-item:hover {
    box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0);
  }
}
.product .product-column-item label {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 16px 16px;
  cursor: pointer;
}
@media (max-width: 570px) {
  .product .product-column-item label {
    padding: 8px 12px;
  }
}
.product .product-column-item label .product-column-item-tag {
  overflow: hidden;
  background-color: #47CB32;
  color: #ffffff;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 0px 100px 100px 0;
  padding: 4px 6px;
}
.product .product-column-item label .product-column-item-tag p {
  line-height: 14px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.product .product-column-item label .imgText {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 570px) {
  .product .product-column-item label .imgText {
    gap: 12px;
  }
}
.product .product-column-item label .imgText .imgBox {
  min-width: 60px;
}
.product .product-column-item label .imgText .imgBox::before {
  content: "";
  border-radius: 4px;
}
.product .product-column-item label .imgText .imgBox img {
  border-radius: 4px;
}
.product .product-column-item label .imgText .textBox {
  width: 100%;
}
.product .product-column-item label .imgText .textBox h5 {
  font-weight: 500 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}
.product .product-column-item label .imgText .textBox p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.product .product-column-item label .imgText .inputBox {
  width: 100%;
}
.product .product-column-item label .imgText .inputBox input {
  background-color: #FFFFFF;
}

.paymentMain .payment-more {
  border: 1px solid #EDEEF1;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.paymentMain .payment-more .payment-moreBox .imgBox {
  font-size: 0px;
}
.paymentMain .payment-more .payment-moreBox .imgBox img {
  min-width: 24px;
}
.paymentMain .payment-more:hover {
  box-shadow: 0 0 8px 0 rgba(102, 102, 115, 0.1019607843);
}
@media (max-width: 570px) {
  .paymentMain .payment-more {
    padding: 0px;
  }
}
.paymentMain .payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
@media (max-width: 570px) {
  .paymentMain .payment-list {
    gap: 0px !important;
  }
}
.paymentMain .payment-list .payment-column-item {
  position: relative;
  border: 1px solid #EDEEF1;
  background-color: #fff;
  border-radius: 6px;
  width: 100%;
  max-width: calc(33.3333333333% - 10.662px);
  height: 92px;
  overflow: hidden;
}
@media (max-width: 570px) {
  .paymentMain .payment-list .payment-column-item + .payment-column-item {
    border-top: 2px solid #f7f7f7;
  }
}
.paymentMain .payment-list .payment-column-item:hover {
  box-shadow: 0 0 8px 0 rgba(102, 102, 115, 0.1019607843);
}
.paymentMain .payment-list .payment-column-item.active {
  background-color: #EDEEF1;
  padding: 0px;
}
@media (max-width: 570px) {
  .paymentMain .payment-list .payment-column-item.active {
    border-radius: 4px;
  }
}
@media (max-width: 1140px) {
  .paymentMain .payment-list .payment-column-item {
    max-width: calc(50% - 8px);
  }
}
@media (max-width: 570px) {
  .paymentMain .payment-list .payment-column-item {
    border: none;
    border-radius: initial;
    max-width: 100%;
    height: 76px;
  }
  .paymentMain .payment-list .payment-column-item:hover {
    box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0);
  }
}
.paymentMain .payment-list .payment-column-item input[type=radio] {
  position: absolute;
  opacity: 0;
}
.paymentMain .payment-list .payment-column-item label {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 16px 16px 16px;
  cursor: pointer;
}
@media (max-width: 570px) {
  .paymentMain .payment-list .payment-column-item label {
    padding: 8px 12px 8px 0px;
  }
}
.paymentMain .payment-list .payment-column-item label .imgText {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 570px) {
  .paymentMain .payment-list .payment-column-item label .imgText {
    gap: 12px;
  }
}
.paymentMain .payment-list .payment-column-item label .imgText .imgBox {
  min-width: 60px;
}
.paymentMain .payment-list .payment-column-item label .imgText .imgBox::before {
  content: "";
  border-radius: 4px;
}
.paymentMain .payment-list .payment-column-item label .imgText .imgBox img {
  border-radius: 4px;
}
.paymentMain .payment-list .payment-column-item label .imgText .textBox {
  width: 100%;
}
.paymentMain .payment-list .payment-column-item label .imgText .textBox h5 {
  font-weight: 500 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.paymentSub .payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 570px) {
  .paymentSub .payment-list {
    gap: 0px;
  }
}
.paymentSub .payment-list .payment-column-item.active {
  background-color: #EDEEF1 !important;
}
.paymentSub .payment-list .payment-column-item {
  position: relative;
  border: 1px solid #EDEEF1;
  background-color: #fff;
  border-radius: 6px;
  width: 100%;
  max-width: calc(33.3333333333% - 10.662px);
  height: 92px;
  transition: 0.3s;
  overflow: hidden;
}
@media (max-width: 570px) {
  .paymentSub .payment-list .payment-column-item + .payment-column-item {
    border-top: 2px solid #f7f7f7;
  }
}
.paymentSub .payment-list .payment-column-item:hover {
  box-shadow: 0 0 8px 0 rgba(102, 102, 115, 0.1019607843);
}
@media (max-width: 1140px) {
  .paymentSub .payment-list .payment-column-item {
    max-width: calc(50% - 8px);
  }
}
@media (max-width: 570px) {
  .paymentSub .payment-list .payment-column-item {
    border: none;
    border-radius: initial;
    max-width: 100%;
    height: 76px;
  }
  .paymentSub .payment-list .payment-column-item:hover {
    box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0);
  }
}
.paymentSub .payment-list .payment-column-item input[type=radio] {
  position: absolute;
  opacity: 0;
}
.paymentSub .payment-list .payment-column-item label {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 16px 16px;
  cursor: pointer;
}
@media (max-width: 570px) {
  .paymentSub .payment-list .payment-column-item label {
    padding: 8px 12px;
  }
}
.paymentSub .payment-list .payment-column-item label .imgText {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 570px) {
  .paymentSub .payment-list .payment-column-item label .imgText {
    gap: 12px;
  }
}
.paymentSub .payment-list .payment-column-item label .imgText .imgBox {
  min-width: 60px;
}
.paymentSub .payment-list .payment-column-item label .imgText .imgBox::before {
  content: "";
  border-radius: 4px;
}
.paymentSub .payment-list .payment-column-item label .imgText .imgBox img {
  border-radius: 4px;
}
.paymentSub .payment-list .payment-column-item label .imgText .textBox {
  width: 100%;
}
.paymentSub .payment-list .payment-column-item label .imgText .textBox h5 {
  font-weight: 500 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.relatedLinks-icon {
  display: flex;
  gap: 12px;
}
@media (max-width: 570px) {
  .relatedLinks-icon {
    margin: 0 0 0 0;
    padding: 12px 12px 12px 12px;
  }
}
.relatedLinks-icon .relatedLinks-icon-item {
  min-width: 66px;
  max-width: 66px;
}
.relatedLinks-icon .relatedLinks-icon-item a {
  text-decoration: none;
}
.relatedLinks-icon .relatedLinks-icon-item a .text {
  font-size: 13px;
  text-align: center;
  color: #3C4250;
  margin: 8px 0 0 0;
}

.gameIntroduction .rotate-180 {
  transform: rotate(180deg);
  transition: 0.3s;
}
.gameIntroduction .text .heightLimit {
  max-height: 560px;
  overflow: hidden;
}
.gameIntroduction .text .textBox p {
  margin: 16px 0 0 0;
}
.gameIntroduction .text .btn-more {
  cursor: pointer;
}

.event {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media (max-width: 570px) {
  .event {
    gap: 16px;
  }
}
.event .eventItem {
  width: 100%;
  max-width: calc(50% - 16px);
  border: 1px solid #EDEEF1;
  border-radius: 8px 8px 8px 8px;
  background-color: #ffffff;
}
@media (max-width: 768px) {
  .event .eventItem {
    max-width: 100%;
  }
}
.event .eventItem .title {
  padding: 8px 16px 8px 16px;
  border-bottom: 1px solid #EDEEF1;
  max-height: 42px;
}
@media (max-width: 570px) {
  .event .eventItem .title {
    max-height: 40px;
  }
}
.event .eventItem .information {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 16px 16px 16px;
}
@media (max-width: 570px) {
  .event .eventItem .information {
    flex-direction: column;
    gap: 16px;
  }
}
.event .eventItem .information .textBox {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  color: #3C4250;
}
@media (max-width: 570px) {
  .event .eventItem .information .textBox {
    gap: 8px;
  }
}
.event .eventItem .information .textBox .text {
  color: #1D1F25;
}
.event .eventItem .information .btnLink {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 200px;
  max-width: 200px;
}
@media (max-width: 570px) {
  .event .eventItem .information .btnLink {
    flex-direction: row-reverse;
    min-width: initial;
    max-width: initial;
  }
}
@media (max-width: 570px) {
  .event .eventItem .information .btnLink .my-btn-main {
    width: 100%;
    max-width: 50%;
  }
}
.event .eventItem .information .btnLink .my-btn-main-text {
  justify-content: end !important;
}

.tradingInformation .tradingInformation-state {
  flex: 1;
}
.tradingInformation .tradingInformation-state .areaState .text {
  width: 100%;
  max-width: 260px;
}
@media (max-width: 768px) {
  .tradingInformation .tradingInformation-state .areaState .text {
    max-width: 230px;
  }
}
.tradingInformation .tradingInformation-data {
  flex: 1;
  width: 100%;
  max-width: 540px;
}
@media (max-width: 1140px) {
  .tradingInformation .tradingInformation-data {
    max-width: 100%;
  }
}

.inputNumberBox {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.inputNumberBox .inputNumberBox-btn {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.inputNumberBox .inputNumberBox-input {
  width: 32px;
  line-height: 32px;
  border: none;
  text-align: center;
}

.my-floating-state {
  width: 100%;
  max-width: 360px;
  line-height: 44px;
  padding: 10px 16px 10px 16px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 128px;
  z-index: 51;
}
@media (max-width: 570px) {
  .my-floating-state {
    max-width: calc(100% - 32px);
    bottom: 16px;
  }
}

@media (max-width: 570px) {
  .tab-title.fixed-top {
    z-index: 10;
    position: fixed;
    width: 100%;
    top: 51px;
    left: 0px;
    background-color: #ffffff;
  }
}
.my-platform li {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 570px) {
  .my-platform li {
    width: 20px;
    height: 20px;
  }
}
.my-platform li svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 570px) {
  .my-platform li svg {
    width: 16px;
    height: 16px;
  }
}

.gameRating .imgBox img {
  width: 50px;
  height: 50px;
}
@media (max-width: 570px) {
  .gameRating .imgBox img {
    width: 40px;
    height: 40px;
  }
}

.checkout.fixed-bottom {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 50;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1019607843);
  background-color: #fff;
}
.checkout.fixed-bottom .checkoutBox {
  padding: 0 0 0 0 !important;
  margin: 0 0 0 0 !important;
}
.checkout.fixed-bottom .checkoutBox .checkoutBox-content {
  border-radius: 0 0 0 0 !important;
  max-width: 1192px;
  padding: 0 16px 0 16px;
  margin: 0 auto !important;
  border: none;
}
@media (max-width: 570px) {
  .checkout.fixed-bottom .checkoutBox .checkoutBox-content {
    padding: 0 0 0 0;
  }
}
.checkout.fixed-bottom .checkoutBox .checkoutBox-content .btnBox {
  min-width: 200px;
}

.my-breadcrumb {
  list-style: none;
  display: flex;
}
.my-breadcrumb .my-breadcrumb-item {
  display: flex;
}
.my-breadcrumb .my-breadcrumb-item .iconBox {
  margin: 0 8px 0 8px;
  display: flex;
  align-items: center;
}
.my-breadcrumb .my-breadcrumb-item a {
  text-decoration: none;
  color: #8993A7;
  font-size: 14px;
  line-height: 19.6px;
}
.my-breadcrumb .my-breadcrumb-item.active a {
  color: #565F73;
}

.my-bag-list .my-bag-itemizedType {
  flex-wrap: wrap;
}
@media (max-width: 570px) {
  .my-bag-list .my-bag-itemizedType.my-bag-fourCardType {
    padding: 12px 12px 12px 12px;
    background-color: #ffffff;
    border-radius: 8px 8px 8px 8px !important;
    gap: 16px !important;
  }
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item {
  flex-basis: calc(20% - 19.2px);
  padding: 0px 0px 0px 0px;
  position: relative;
  gap: 0px;
  border: none;
}
@media (max-width: 570px) {
  .my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item {
    flex-basis: calc(33.3333% - 11px);
  }
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox {
  gap: 0px;
  display: initial;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .imgBox {
  max-width: 100%;
  max-height: 100%;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .imgBox img {
  max-width: initial;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .textBox {
  position: absolute;
  left: 0px;
  top: 12px;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .textBox .my-font-l {
  display: none;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .textBox .my-font-m {
  display: none;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .textBox .dateBox {
  margin: 0px 0px 0px 0px;
  gap: 0px;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .textBox .dateBox .date {
  display: none;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .textBox .dateBox .state .my-tag {
  border-radius: 0 100px 100px 0 !important;
}
.my-bag-list .my-bag-itemizedType.my-bag-fourCardType .my-bag-item .imgtextBox .seal {
  top: initial;
  right: 4px;
  bottom: 4px;
  transform: initial;
}
.my-bag-list .my-bag-itemizedType .my-bag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-basis: calc(50% - 12px);
  padding: 16px 16px 16px 16px;
  border: 1px solid #EDEEF1;
  border-radius: 8px 8px 8px 8px;
  position: relative;
}
.my-bag-list .my-bag-itemizedType .my-bag-item.popdata {
  cursor: pointer;
}
@media (max-width: 570px) {
  .my-bag-list .my-bag-itemizedType .my-bag-item {
    flex-direction: column;
    background-color: #ffffff;
    padding: 12px 12px 12px 12px;
    border-radius: 8px 8px 8px 8px;
    gap: 16px;
    flex-basis: 100%;
    border: none;
  }
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox {
  width: 100%;
  display: flex;
  gap: 24px;
}
@media (max-width: 570px) {
  .my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox {
    gap: 16px;
  }
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .imgBox {
  width: 100%;
  max-width: 82px;
  max-height: 82px;
  border-radius: 6px 6px 6px 6px;
  background-color: #F6F7F9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .imgBox img {
  width: 100%;
  max-width: 82px;
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .textBox {
  width: 100%;
  position: relative;
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .textBox .my-font-m {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .textBox .my-font-l {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .textBox .dateBox {
  display: flex;
  align-items: center;
  margin: 16px 0 0 0;
  gap: 16px;
}
@media (max-width: 570px) {
  .my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .textBox .dateBox {
    margin: 8px 0 0 0;
  }
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .textBox .dateBox .date {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 26px;
}
@media (max-width: 570px) {
  .my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .textBox .dateBox .date {
    line-height: 21px;
    width: 100%;
  }
}
@media (max-width: 570px) {
  .my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .textBox .dateBox .state {
    justify-content: space-between;
  }
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .seal {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translate(0, -50%);
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .seal .circleLine {
  width: 70px;
  height: 70px;
  border: 1.5px solid #8993A7;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-bag-list .my-bag-itemizedType .my-bag-item .imgtextBox .seal .circleLine .text {
  transform: rotate(15deg);
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
}
.my-bag-list .my-bag-itemizedType .my-bag-item .my-bag-item-pop {
  position: relative;
  z-index: 201;
}

.my-prizeMode {
  width: 100%;
  max-width: 340px;
  transition: 0.5s;
  cursor: pointer;
  border: 2px solid #D6D9E1;
  border-radius: 6px;
}
@media (max-width: 570px) {
  .my-prizeMode {
    max-width: 100%;
  }
}
.my-prizeMode.active {
  border: 2px solid #82C5F7;
}
.my-prizeMode.active:hover {
  border: 2px solid #82C5F7;
}
.my-prizeMode:hover {
  border: 2px solid #8993A7;
}
.my-prizeMode .iconBox {
  padding: 8px 8px 8px 8px;
}
.my-prizeMode .iconBox svg {
  width: 60px;
  height: 60px;
}
@media (max-width: 570px) {
  .my-prizeMode .iconBox {
    padding: 6px 6px 6px 6px;
  }
  .my-prizeMode .iconBox svg {
    width: 48px;
    height: 48px;
  }
}

.my-pop-message {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 10px 16px 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 6px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 202;
}
@media (max-width: 570px) {
  .my-pop-message {
    max-width: calc(100% - 32px);
    bottom: 16px;
  }
}

#topup_list #header .header-search {
  display: none;
}
#topup_list #header .header-search-mb {
  display: none;
}
#topup_list .module-topImg-bar::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  max-width: 50%;
  height: 100%;
  background-color: #82c5f7;
}
#topup_list .module-topImg-bar::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  max-width: 50%;
  height: 100%;
  background-color: #82c5f7;
}
#topup_list .module-topImg-bar .module-topImg-bar-container {
  background-image: url(https://image.mycard520.com/globalmycard/member/mycardweb-test/images/topimg/topimg-s-1920.jpg);
  padding: 74px 0 74px 0;
}
@media (max-width: 1140px) {
  #topup_list .module-topImg-bar .module-topImg-bar-container {
    min-height: 140px;
    background-image: url(https://image.mycard520.com/globalmycard/member/mycardweb-test/images/topimg/topimg-s-1140.jpg);
  }
}
#topup_list .module-topImg-bar .module-topImg-bar-container .textBox {
  padding: 0 16px 0 16px;
}
#topup_list .module-topImg-bar .my-search {
  margin: 48px auto 0 auto;
  max-width: 680px;
}
@media (max-width: 570px) {
  #topup_list .module-topImg-bar .my-search {
    margin: 24px auto 0 auto;
  }
}
#topup_list .main-content .main-content-container .history .my-module-card .swiper .swiper-wrapper .swiper-slide .my-card-body .my-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  font-weight: 500 !important;
}
@media (max-width: 570px) {
  #topup_list .main-content .main-content-container .history .my-module-card .swiper .swiper-wrapper .swiper-slide .my-card-body .my-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
  }
}
#topup_list .main-content .main-content-container .allServices .my-module-card .my-module-card-item .my-card-body .my-card-title, #topup_list .main-content .main-content-container .recommended .my-module-card .my-module-card-item .my-card-body .my-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  font-weight: 500 !important;
}
@media (max-width: 570px) {
  #topup_list .main-content .main-content-container .allServices .my-module-card .my-module-card-item .my-card-body .my-card-title, #topup_list .main-content .main-content-container .recommended .my-module-card .my-module-card-item .my-card-body .my-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
  }
}
#topup_list .areaState h4.my-font-h4 {
  font-weight: normal !important;
}
#topup_list .my-titleBox .dropDown {
  position: absolute;
  top: 40px;
  right: 0px;
}

#topUpItem .product-pup, #topUpItem .event-pup {
  z-index: 201;
}
#topUpItem .topUpItem-overlay {
  z-index: 200;
}

@media (max-width: 570px) {
  #payment .tradingInformation .tradingInformation-state .areaState .imgBox img {
    max-width: 110px;
  }
}

#member {
  padding: 63px 0 0 0;
}
@media (max-width: 570px) {
  #member {
    padding: 51px 0 0 0;
  }
}

#memberBag .my-font-list .my-font-item:nth-child(1) {
  margin: 0 0 0 0 !important;
}
#memberBag .my-font-list .my-font-item:nth-child(1)::after {
  width: 0px !important;
}
#memberBag .filter-dropDown {
  top: 47px;
  right: 24px;
  z-index: 1;
}
@media (max-width: 570px) {
  #memberBag .filter-dropDown {
    right: 0px;
  }
}
#memberBag .filterBtn {
  cursor: pointer;
}
#memberBag .filterBtn.active svg path {
  stroke: #4FAFF1;
}
#memberBag .moreBtn {
  cursor: pointer;
}
#memberBag .my-more-dropDown {
  position: absolute;
  top: 44px;
  right: 32px;
  padding: 8px 8px 8px 8px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1019607843);
  border-radius: 8px;
  background-color: #ffffff;
  z-index: 2;
}
@media (max-width: 570px) {
  #memberBag .my-more-dropDown {
    right: 0px;
  }
}
#memberBag .my-more-dropDown .my-more-dropDown-list {
  height: auto;
  flex-direction: column;
}
#memberBag .my-more-dropDown .my-more-dropDown-list .my-more-dropDown-item {
  cursor: pointer;
  margin: 0 0 0 0;
  text-align: left;
  width: 100%;
}
#memberBag .my-more-dropDown .my-more-dropDown-list .my-more-dropDown-item .my-more-dropDown-item-link {
  display: block;
  padding: 8px 8px 8px 8px;
  color: #464D5E;
  text-decoration: none;
  font-size: 13px;
  line-height: 140%;
  white-space: nowrap;
}
#memberBag .my-more-dropDown .my-more-dropDown-list .my-more-dropDown-item .my-more-dropDown-item-link:hover {
  background-color: #F6F7F9;
}
#memberBag .my-more-dropDown .my-more-dropDown-list .my-more-dropDown-item .my-more-dropDown-item-link::after {
  content: "";
  position: initial;
}
#memberBag .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-pop-discountList .my-pop-discountitem {
  padding: 12px 0 12px 0;
}
#memberBag .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-pop-discountList .my-pop-discountitem + .my-pop-discountitem {
  border-top: 1px solid #edeef1;
}
#memberBag .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-pop-discountList .my-pop-discountitem .imgtextBox .imgBox {
  max-width: 82px !important;
}
#memberBag .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-pop-discountList .my-pop-discountitem .imgtextBox .imgBox img {
  max-width: 82px !important;
}
#memberBag .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-pop-discountList .my-pop-discountitem .textmoreBtn svg {
  width: 16px !important;
  height: 16px !important;
}
#memberBag .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-pop-discountList .my-pop-discountitem .textmoreBtn svg path {
  fill: #6B768C !important;
}
#memberBag .my-modal .my-modal-dialog .modal-content .my-modal-body .my-modal-body-box .my-pop-discountList .my-pop-discountitem .btnBox .my-btn-main {
  min-width: 160px;
}

#memberBag .main-content-container, #memberBag-setting .main-content-container {
  display: flex;
}
@media (max-width: 900px) {
  #memberBag .main-content-container, #memberBag-setting .main-content-container {
    flex-direction: column;
  }
}
#memberBag .main-content-container .sideBar, #memberBag-setting .main-content-container .sideBar {
  width: 100%;
  max-width: 300px;
}
@media (max-width: 900px) {
  #memberBag .main-content-container .sideBar, #memberBag-setting .main-content-container .sideBar {
    max-width: 100%;
  }
}
@media (max-width: 570px) {
  #memberBag .main-content-container .sideBar, #memberBag-setting .main-content-container .sideBar {
    display: none;
  }
}
#memberBag .main-content-container .sideContent, #memberBag-setting .main-content-container .sideContent {
  width: 100%;
  max-width: calc(100% - 340px);
}
@media (max-width: 900px) {
  #memberBag .main-content-container .sideContent, #memberBag-setting .main-content-container .sideContent {
    max-width: 100%;
  }
}
#memberBag .main-content-container .sideContent .imgBox img, #memberBag-setting .main-content-container .sideContent .imgBox img {
  display: block;
  width: 100%;
  border-radius: 16px;
}
#memberBag .my-breadcrumb, #memberBag-setting .my-breadcrumb {
  display: none;
}
@media (max-width: 570px) {
  #memberBag .my-breadcrumb, #memberBag-setting .my-breadcrumb {
    display: flex;
  }
}
#memberBag .memberBag-overlay, #memberBag-setting .memberBag-overlay {
  z-index: 200;
}
#memberBag .icon_question, #memberBag-setting .icon_question {
  cursor: pointer;
}
#memberBag .question-pop, #memberBag-setting .question-pop {
  z-index: 201;
}

.my-bg-my-primary-950 {
  background-color: #0B2846 !important;
}

.my-bg-my-primary-900 {
  background-color: #10406A !important;
}

.my-bg-my-primary-800 {
  background-color: #0C4B80 !important;
}

.my-bg-my-primary-700 {
  background-color: #0A599A !important;
}

.my-bg-my-primary-600 {
  background-color: #0A6FBF !important;
}

.my-bg-my-primary-500 {
  background-color: #178DE0 !important;
}

.my-bg-my-primary-400 {
  background-color: #4FAFF1 !important;
}

.my-bg-my-primary-300 {
  background-color: #82C5F7 !important;
}

.my-bg-my-primary-200 {
  background-color: #BDDFFA !important;
}

.my-bg-my-primary-100 {
  background-color: #E1EFFD !important;
}

.my-bg-my-primary-50 {
  background-color: #F1F8FE !important;
}

.my-bg-my-secondary-950 {
  background-color: #1D1F25 !important;
}

.my-bg-my-secondary-900 {
  background-color: #363A44 !important;
}

.my-bg-my-secondary-800 {
  background-color: #3C4250 !important;
}

.my-bg-my-secondary-700 {
  background-color: #464D5E !important;
}

.my-bg-my-secondary-600 {
  background-color: #565F73 !important;
}

.my-bg-my-secondary-500 {
  background-color: #6B768C !important;
}

.my-bg-my-secondary-400 {
  background-color: #8993A7 !important;
}

.my-bg-my-secondary-300 {
  background-color: #B3B9C6 !important;
}

.my-bg-my-secondary-200 {
  background-color: #D6D9E1 !important;
}

.my-bg-my-secondary-100 {
  background-color: #EDEEF1 !important;
}

.my-bg-my-secondary-50 {
  background-color: #F6F7F9 !important;
}

.my-bg-my-grey-950 {
  background-color: #262626 !important;
}

.my-bg-my-grey-900 {
  background-color: #313131 !important;
}

.my-bg-my-grey-800 {
  background-color: #383838 !important;
}

.my-bg-my-grey-700 {
  background-color: #434343 !important;
}

.my-bg-my-grey-600 {
  background-color: #515151 !important;
}

.my-bg-my-grey-500 {
  background-color: #666666 !important;
}

.my-bg-my-grey-400 {
  background-color: #818181 !important;
}

.my-bg-my-grey-300 {
  background-color: #A4A4A4 !important;
}

.my-bg-my-grey-200 {
  background-color: #C8C8C8 !important;
}

.my-bg-my-grey-100 {
  background-color: #E3E3E3 !important;
}

.my-bg-my-grey-50 {
  background-color: #F7F7F7 !important;
}

.my-bg-my-grey-0 {
  background-color: #FFFFFF !important;
}

.my-bg-my-success-950 {
  background-color: #0B2B08 !important;
}

.my-bg-my-success-900 {
  background-color: #1F4E19 !important;
}

.my-bg-my-success-800 {
  background-color: #255F1C !important;
}

.my-bg-my-success-700 {
  background-color: #29781D !important;
}

.my-bg-my-success-600 {
  background-color: #309920 !important;
}

.my-bg-my-success-500 {
  background-color: #47CB32 !important;
}

.my-bg-my-success-400 {
  background-color: #67D355 !important;
}

.my-bg-my-success-300 {
  background-color: #9BE78E !important;
}

.my-bg-my-success-200 {
  background-color: #C7F3BF !important;
}

.my-bg-my-success-100 {
  background-color: #E2FADE !important;
}

.my-bg-my-success-50 {
  background-color: #F4FCF1 !important;
}

.my-bg-my-errorNote-950 {
  background-color: #481007 !important;
}

.my-bg-my-errorNote-900 {
  background-color: #842718 !important;
}

.my-bg-my-errorNote-800 {
  background-color: #A02714 !important;
}

.my-bg-my-errorNote-700 {
  background-color: #C12C14 !important;
}

.my-bg-my-errorNote-600 {
  background-color: #E5381D !important;
}

.my-bg-my-errorNote-500 {
  background-color: #F8553B !important;
}

.my-bg-my-errorNote-400 {
  background-color: #FF735D !important;
}

.my-bg-my-errorNote-300 {
  background-color: #FFADA0 !important;
}

.my-bg-my-errorNote-200 {
  background-color: #FFCFC7 !important;
}

.my-bg-my-errorNote-100 {
  background-color: #FFE5E1 !important;
}

.my-bg-my-errorNote-50 {
  background-color: #FFF3F1 !important;
}

.my-text-my-primary-950 {
  color: #0B2846 !important;
}

.my-text-my-primary-900 {
  color: #10406A !important;
}

.my-text-my-primary-800 {
  color: #0C4B80 !important;
}

.my-text-my-primary-700 {
  color: #0A599A !important;
}

.my-text-my-primary-600 {
  color: #0A6FBF !important;
}

.my-text-my-primary-500 {
  color: #178DE0 !important;
}

.my-text-my-primary-400 {
  color: #4FAFF1 !important;
}

.my-text-my-primary-300 {
  color: #82C5F7 !important;
}

.my-text-my-primary-200 {
  color: #BDDFFA !important;
}

.my-text-my-primary-100 {
  color: #E1EFFD !important;
}

.my-text-my-primary-50 {
  color: #F1F8FE !important;
}

.my-text-my-secondary-950 {
  color: #1D1F25 !important;
}

.my-text-my-secondary-900 {
  color: #363A44 !important;
}

.my-text-my-secondary-800 {
  color: #3C4250 !important;
}

.my-text-my-secondary-700 {
  color: #464D5E !important;
}

.my-text-my-secondary-600 {
  color: #565F73 !important;
}

.my-text-my-secondary-500 {
  color: #6B768C !important;
}

.my-text-my-secondary-400 {
  color: #8993A7 !important;
}

.my-text-my-secondary-300 {
  color: #B3B9C6 !important;
}

.my-text-my-secondary-200 {
  color: #D6D9E1 !important;
}

.my-text-my-secondary-100 {
  color: #EDEEF1 !important;
}

.my-text-my-secondary-50 {
  color: #F6F7F9 !important;
}

.my-text-my-grey-950 {
  color: #262626 !important;
}

.my-text-my-grey-900 {
  color: #313131 !important;
}

.my-text-my-grey-800 {
  color: #383838 !important;
}

.my-text-my-grey-700 {
  color: #434343 !important;
}

.my-text-my-grey-600 {
  color: #515151 !important;
}

.my-text-my-grey-500 {
  color: #666666 !important;
}

.my-text-my-grey-400 {
  color: #818181 !important;
}

.my-text-my-grey-300 {
  color: #A4A4A4 !important;
}

.my-text-my-grey-200 {
  color: #C8C8C8 !important;
}

.my-text-my-grey-100 {
  color: #E3E3E3 !important;
}

.my-text-my-grey-50 {
  color: #F7F7F7 !important;
}

.my-text-my-grey-0 {
  color: #FFFFFF !important;
}

.my-text-my-success-950 {
  color: #0B2B08 !important;
}

.my-text-my-success-900 {
  color: #1F4E19 !important;
}

.my-text-my-success-800 {
  color: #255F1C !important;
}

.my-text-my-success-700 {
  color: #29781D !important;
}

.my-text-my-success-600 {
  color: #309920 !important;
}

.my-text-my-success-500 {
  color: #47CB32 !important;
}

.my-text-my-success-400 {
  color: #67D355 !important;
}

.my-text-my-success-300 {
  color: #9BE78E !important;
}

.my-text-my-success-200 {
  color: #C7F3BF !important;
}

.my-text-my-success-100 {
  color: #E2FADE !important;
}

.my-text-my-success-50 {
  color: #F4FCF1 !important;
}

.my-text-my-errorNote-950 {
  color: #481007 !important;
}

.my-text-my-errorNote-900 {
  color: #842718 !important;
}

.my-text-my-errorNote-800 {
  color: #A02714 !important;
}

.my-text-my-errorNote-700 {
  color: #C12C14 !important;
}

.my-text-my-errorNote-600 {
  color: #E5381D !important;
}

.my-text-my-errorNote-500 {
  color: #F8553B !important;
}

.my-text-my-errorNote-400 {
  color: #FF735D !important;
}

.my-text-my-errorNote-300 {
  color: #FFADA0 !important;
}

.my-text-my-errorNote-200 {
  color: #FFCFC7 !important;
}

.my-text-my-errorNote-100 {
  color: #FFE5E1 !important;
}

.my-text-my-errorNote-50 {
  color: #FFF3F1 !important;
}

.my-border-my-primary-950 {
  border-color: #0B2846 !important;
}

.my-border-my-primary-900 {
  border-color: #10406A !important;
}

.my-border-my-primary-800 {
  border-color: #0C4B80 !important;
}

.my-border-my-primary-700 {
  border-color: #0A599A !important;
}

.my-border-my-primary-600 {
  border-color: #0A6FBF !important;
}

.my-border-my-primary-500 {
  border-color: #178DE0 !important;
}

.my-border-my-primary-400 {
  border-color: #4FAFF1 !important;
}

.my-border-my-primary-300 {
  border-color: #82C5F7 !important;
}

.my-border-my-primary-200 {
  border-color: #BDDFFA !important;
}

.my-border-my-primary-100 {
  border-color: #E1EFFD !important;
}

.my-border-my-primary-50 {
  border-color: #F1F8FE !important;
}

.my-border-my-secondary-950 {
  border-color: #1D1F25 !important;
}

.my-border-my-secondary-900 {
  border-color: #363A44 !important;
}

.my-border-my-secondary-800 {
  border-color: #3C4250 !important;
}

.my-border-my-secondary-700 {
  border-color: #464D5E !important;
}

.my-border-my-secondary-600 {
  border-color: #565F73 !important;
}

.my-border-my-secondary-500 {
  border-color: #6B768C !important;
}

.my-border-my-secondary-400 {
  border-color: #8993A7 !important;
}

.my-border-my-secondary-300 {
  border-color: #B3B9C6 !important;
}

.my-border-my-secondary-200 {
  border-color: #D6D9E1 !important;
}

.my-border-my-secondary-100 {
  border-color: #EDEEF1 !important;
}

.my-border-my-secondary-50 {
  border-color: #F6F7F9 !important;
}

.my-border-my-grey-950 {
  border-color: #262626 !important;
}

.my-border-my-grey-900 {
  border-color: #313131 !important;
}

.my-border-my-grey-800 {
  border-color: #383838 !important;
}

.my-border-my-grey-700 {
  border-color: #434343 !important;
}

.my-border-my-grey-600 {
  border-color: #515151 !important;
}

.my-border-my-grey-500 {
  border-color: #666666 !important;
}

.my-border-my-grey-400 {
  border-color: #818181 !important;
}

.my-border-my-grey-300 {
  border-color: #A4A4A4 !important;
}

.my-border-my-grey-200 {
  border-color: #C8C8C8 !important;
}

.my-border-my-grey-100 {
  border-color: #E3E3E3 !important;
}

.my-border-my-grey-50 {
  border-color: #F7F7F7 !important;
}

.my-border-my-grey-0 {
  border-color: #FFFFFF !important;
}

.my-border-my-success-950 {
  border-color: #0B2B08 !important;
}

.my-border-my-success-900 {
  border-color: #1F4E19 !important;
}

.my-border-my-success-800 {
  border-color: #255F1C !important;
}

.my-border-my-success-700 {
  border-color: #29781D !important;
}

.my-border-my-success-600 {
  border-color: #309920 !important;
}

.my-border-my-success-500 {
  border-color: #47CB32 !important;
}

.my-border-my-success-400 {
  border-color: #67D355 !important;
}

.my-border-my-success-300 {
  border-color: #9BE78E !important;
}

.my-border-my-success-200 {
  border-color: #C7F3BF !important;
}

.my-border-my-success-100 {
  border-color: #E2FADE !important;
}

.my-border-my-success-50 {
  border-color: #F4FCF1 !important;
}

.my-border-my-errorNote-950 {
  border-color: #481007 !important;
}

.my-border-my-errorNote-900 {
  border-color: #842718 !important;
}

.my-border-my-errorNote-800 {
  border-color: #A02714 !important;
}

.my-border-my-errorNote-700 {
  border-color: #C12C14 !important;
}

.my-border-my-errorNote-600 {
  border-color: #E5381D !important;
}

.my-border-my-errorNote-500 {
  border-color: #F8553B !important;
}

.my-border-my-errorNote-400 {
  border-color: #FF735D !important;
}

.my-border-my-errorNote-300 {
  border-color: #FFADA0 !important;
}

.my-border-my-errorNote-200 {
  border-color: #FFCFC7 !important;
}

.my-border-my-errorNote-100 {
  border-color: #FFE5E1 !important;
}

.my-border-my-errorNote-50 {
  border-color: #FFF3F1 !important;
}

/*rwd*/
.my-member-quick {
  width: 100%;
  max-width: 100%;
  margin: 0 40px 0 0;
  height: 100%;
  min-height: 860px;
  background-image: url(https://image.mycard520.com/globalmycard/member/test0417/0417/img/member-sidebar-bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  border-radius: 16px 16px 16px 16px;
  padding: 32px 8px 8px 8px;
  position: relative;
}
@media (max-width: 570px) {
  .my-member-quick {
    max-width: 100%;
    min-height: initial;
    padding: 24px 16px 16px 16px;
    margin: 0 0 24px 0;
  }
}
.my-member-quick .my-member-quick-level {
  position: absolute;
  top: 0px;
  right: 16px;
  width: 53px;
  height: 20px;
  background: linear-gradient(180deg, #F8D136 0%, #FAB558 100%);
  color: #fff;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 2px 13px 4px 13px;
  border-radius: 0 0 6px 6px;
}
.my-member-quick .my-member-quick-level .my-member-quick-level-title {
  font-size: 9px;
  line-height: 100%;
  color: #FFFFFF;
}
.my-member-quick .my-member-quick-level .my-member-quick-level-number {
  font-size: 12px;
  line-height: 100%;
  color: #FFFFFF;
}
.my-member-quick .my-member-quickBox {
  width: 100%;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox {
    max-width: 100%;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-info {
  flex: 1;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-portrait {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 0 16px 0;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-portrait {
    flex-direction: row;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-portrait .my-member-quick-group {
  width: 100%;
  display: flex;
  align-items: center;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-portrait .my-member-quick-group .my-member-quick-img {
  flex: 0 0 60px;
  margin: 0 24px 0 0;
  position: relative;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-portrait .my-member-quick-group .my-member-quick-img a {
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid #fff;
  display: block;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-portrait .my-member-quick-group .my-member-quick-img a img {
  width: 100%;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-portrait .my-member-quick-group .my-member-quick-img .my-member-quick-img-btn {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-portrait .my-member-quick-group .my-member-quick-img .my-member-quick-img-btn svg {
  width: 16px;
  height: 16px;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-num {
  cursor: pointer;
  padding: 12px 16px 12px 16px;
  border-radius: 6px;
  background-color: #FFFFFF;
  width: 100%;
  margin: 0 0 16px 0;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-num .my-member-quick-info-num-text {
  color: #3C4250;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-num .my-member-quick-info-num-number {
  flex: 1;
  color: #1D1F25;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-num .iconBox {
  width: 24px;
  height: 24px;
}
.my-member-quick .my-member-quickBox .my-member-quick-info .my-member-quick-info-num .iconBox svg {
  width: 24px;
  height: 24px;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool {
  width: 100%;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool {
    max-width: 100%;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool .my-member-quick-tool-container ul {
  width: 100%;
  gap: 16px;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool .my-member-quick-tool-container ul li a {
  text-decoration: none;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool .my-member-quick-tool-container ul li a .iconText .iconBox svg {
  width: 48px;
  height: 48px;
}
@media (max-width: 900px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool .my-member-quick-tool-container ul li a .iconText .iconBox svg {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool .my-member-quick-tool-container ul li a .iconText .iconBox svg {
    width: 48px;
    height: 48px;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool .my-member-quick-tool-container ul li a .iconText .text {
  color: #3C4250;
  text-align: center;
}
.my-member-quick .my-member-quickBox .my-member-quick-points {
  width: 100%;
  margin: 0 0 0 0;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-points {
    max-width: 100%;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-points .my-member-quick-points-container .swiper .swiper-wrapper .swiper-slide {
  background-color: #FFFFFF;
  border-radius: 6px;
}
.my-member-quick .my-member-quickBox .my-member-quick-points .my-member-quick-points-container .swiper .swiper-wrapper .swiper-slide .my-member-quick-points-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 8px 16px;
}
.my-member-quick .my-member-quickBox .my-member-quick-points .my-member-quick-points-container .swiper .swiper-wrapper .swiper-slide .my-member-quick-points-text .iconBox {
  cursor: pointer;
  display: none;
}
.my-member-quick .my-member-quickBox .my-member-quick-points .my-member-quick-points-container .swiper .swiper-wrapper .swiper-slide .my-member-quick-points-text .iconBox.show {
  display: block;
}
.my-member-quick .my-member-quickBox .my-member-quick-points .my-member-quick-points-container .swiper .swiper-wrapper .swiper-slide .my-member-quick-points-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 16px;
  color: #178DE0;
}
.my-member-quick .my-member-quickBox .my-member-quick-points .my-member-quick-points-container .swiper .swiper-wrapper .swiper-slide .my-member-quick-points-wallet .currency {
  font-size: 13px;
}
.my-member-quick .my-member-quickBox .my-member-quick-points .my-member-quick-points-container .swiper .swiper-wrapper .swiper-slide .my-member-quick-points-wallet .points {
  font-size: 14px;
  line-height: 140%;
  font-weight: 700;
}
.my-member-quick .my-member-quickBox .my-member-quick-points .my-member-quick-points-container .swiper .swiper-pagination {
  position: initial;
}
.my-member-quick .my-member-quickBox .imgBox {
  width: 100%;
  max-width: 100%;
}
.my-member-quick .my-member-quickBox .imgBox a img {
  width: 100%;
  max-width: 100%;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper {
  width: 100%;
  margin: 24px 0 0 0;
  overflow-y: auto;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper::-webkit-scrollbar {
  width: 12px;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper::-webkit-scrollbar-button {
  height: 0px;
  background: transparent;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper::-webkit-scrollbar-track-piece {
  background: transparent;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper::-webkit-scrollbar-track {
  background-color: transparent;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #E3E3E3;
  border: 4px solid #FFFFFF;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool-swiper {
    max-width: 100%;
    overflow-y: initial;
    border: 1px solid #EDEEF1;
    background-color: #fff;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide:first-child a {
  border-radius: 6px 6px 0 0;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide:last-child a {
  border-bottom: none;
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a {
  display: block;
  line-height: initial;
  text-decoration: none;
  background-color: #fff;
  border-bottom: 2px solid #EDEEF1;
  padding: 12px 16px 12px 16px;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a {
    border-bottom: initial;
    padding: 8px 8px 8px 8px;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a .iconText {
  display: flex;
  align-items: center;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a .iconText {
    flex-direction: column;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a .iconText .iconBox {
  margin: 0 8px 0 0;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a .iconText .iconBox {
    margin: 0 0 8px 0;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a .iconText .iconBox svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a .iconText .iconBox svg {
    width: 32px;
    height: 32px;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a .iconText .text {
  color: #565F73;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a .iconText .text {
    font-size: 12px;
    text-align: center;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a.active {
  background-color: #EDEEF1;
}
@media (max-width: 570px) {
  .my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-wrapper .swiper-slide a.active {
    background-color: #ffffff;
  }
}
.my-member-quick .my-member-quickBox .my-member-quick-tool-swiper .swiper .swiper-pagination {
  position: initial;
}

.my-member-quick-otherFunctions {
  border: 1px solid #F6F7F9;
  border-radius: 8px;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-title {
  padding: 6px 8px 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #F6F7F9;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-title .my-member-quick-otherFunctions-name {
  line-height: 24px;
  font-size: 12px;
  color: #3C4250;
  font-weight: 400;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-title .my-member-quick-otherFunctions-btn {
  margin: 0 0 0 10px;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-title .my-member-quick-otherFunctions-btn .iconBox {
  cursor: pointer;
  display: none;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-title .my-member-quick-otherFunctions-btn .iconBox svg {
  width: 24px;
  height: 24px;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-title .my-member-quick-otherFunctions-btn .iconBox.show {
  display: block;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-list {
  display: flex;
  flex-wrap: wrap;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a {
  display: flex;
  text-decoration: none;
  padding: 8px 16px 8px 16px;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a .iconBox {
  margin: 0 8px 0 0;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a .iconBox svg {
  width: 24px;
  height: 24px;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a .iconText {
  display: flex;
  align-items: center;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a .iconText .text {
  font-size: 14px;
  line-height: 24px;
  color: #565F73;
  font-weight: 500;
}
.my-member-quick-otherFunctions .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item + .my-member-quick-otherFunctions-item {
  border-top: 1px solid #EDEEF1;
}

.my-member-quick-otherFunctions.list-fourCardType .my-member-quick-otherFunctions-list {
  gap: 12px;
  padding: 8px 8px 8px 8px;
}
.my-member-quick-otherFunctions.list-fourCardType .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item {
  border-top: none;
  width: calc(25% - 9px);
}
.my-member-quick-otherFunctions.list-fourCardType .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a {
  flex-direction: column;
  padding: 0 0 0 0;
}
.my-member-quick-otherFunctions.list-fourCardType .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a .iconText {
  flex-direction: column;
}
.my-member-quick-otherFunctions.list-fourCardType .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a .iconText .iconBox {
  margin: 0 0 0 0;
}
.my-member-quick-otherFunctions.list-fourCardType .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a .iconText .iconBox svg {
  width: 32px;
  height: 32px;
}
.my-member-quick-otherFunctions.list-fourCardType .my-member-quick-otherFunctions-list .my-member-quick-otherFunctions-item a .iconText .text {
  font-size: 12px;
  line-height: 14.4px;
  text-align: center;
  margin: 8px 0 8px 0;
}

#quick-electAvatar {
  position: fixed;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  display: none;
  z-index: 203;
}

#member-checkIn .member-checkIn-overlay {
  z-index: 200;
}
#member-checkIn .rule-pop {
  z-index: 201;
}
#member-checkIn .terms-pop {
  z-index: 201;
}
#member-checkIn .pleaseLogIn-pop {
  z-index: 201;
}
#member-checkIn .main-content-container {
  display: flex;
}
@media (max-width: 900px) {
  #member-checkIn .main-content-container {
    flex-direction: column;
  }
}
#member-checkIn .main-content-container .sideBar {
  width: 100%;
  max-width: 300px;
}
@media (max-width: 900px) {
  #member-checkIn .main-content-container .sideBar {
    max-width: 100%;
  }
}
@media (max-width: 570px) {
  #member-checkIn .main-content-container .sideBar {
    display: none;
  }
}
#member-checkIn .main-content-container .sideContent {
  width: 100%;
  max-width: calc(100% - 340px);
}
@media (max-width: 900px) {
  #member-checkIn .main-content-container .sideContent {
    max-width: 100%;
  }
}
#member-checkIn .main-content-container .sideContent .imgBox img {
  display: block;
  width: 100%;
}
#member-checkIn .my-checkIn-list.noLogging {
  opacity: 0.5;
}
#member-checkIn .my-checkIn-list .swiper-wrapper {
  width: 100%;
  max-width: 892px;
}
#member-checkIn .my-checkIn-list .swiper-wrapper .swiper-slide .my-checkIn-item {
  background-color: #F6F7F9;
  border-radius: 6px;
  padding: 8px;
}
#member-checkIn .my-checkIn-list .swiper-wrapper .swiper-slide .my-checkIn-item.expired {
  opacity: 0.5;
}
#member-checkIn .my-checkIn-list .swiper-wrapper .swiper-slide .my-checkIn-item.today {
  border: 2px solid #4FAFF1;
}
#member-checkIn .my-checkIn-list .swiper-wrapper .swiper-slide .my-checkIn-item .imgBox {
  width: 100%;
  max-width: 40px;
}
#member-checkIn .checkIn-btnBox .my-btn-main {
  width: 100%;
  max-width: 360px;
}

.webpage {
  padding: 63px 0 0 0;
}
@media (max-width: 1140px) {
  .webpage {
    padding: 51px 0 0 0;
  }
}

.main-content {
  margin: 40px 0 60px 0;
}
@media (max-width: 768px) {
  .main-content {
    margin: 40px 0 64px 0;
  }
}
@media (max-width: 570px) {
  .main-content {
    margin: 16px 0 40px 0;
  }
}
.main-content .main-content-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}

section {
  margin: 40px 0 0;
}
@media (max-width: 570px) {
  section {
    margin: 24px 0 0 0;
  }
}
section:first-child {
  margin: 0 0 0 0;
}

.none {
  display: none !important;
}

.show-f {
  display: flex !important;
}

.show-b {
  display: block !important;
}

.overlay-two {
  z-index: 200;
  display: none;
}

.overlay {
  z-index: 100;
  display: none;
}

.noslide {
  position: relative;
  overflow-y: hidden;
  margin-right: 17px;
}
@media (max-width: 570px) {
  .noslide {
    margin-right: 0px;
  }
}

/*ios正常但會有每次開彈窗會跑到置頂的問題*/
/* 針對 iOS Safari 的額外處理 */
@supports (-webkit-touch-callout: none) {
  .noslide {
    height: -webkit-fill-available; /* iOS Safari 的替代高度解決方案 */
  }
}
html {
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.rotate-180 {
  transform: rotate(180deg);
}

:root {
  --swiper-navigation-size: 30px;
}

button {
  background-color: transparent;
  cursor: pointer;
  border: none;
}

.iconBox {
  line-height: 0px;
  font-size: 0px;
}

.pageContent-container {
  padding: 60px 80px 60px 80px;
}
@media (max-width: 1140px) {
  .pageContent-container {
    padding: 60px 40px 60px 40px;
  }
}
@media (max-width: 768px) {
  .pageContent-container {
    padding: 0 16px 0 16px;
  }
}

body {
  background-color: #f7f7f7;
}/*# sourceMappingURL=mysystem.css.map */