/* about */
.bgFull {
  background-color: var(--black5);
}

.historyItem {
  display: flex;
  padding-bottom: 2em;
  align-items: flex-start;
  gap: 2em;
  align-self: stretch;
  width: 100%;
}
.staticPage_year {
  display: flex;
  padding-right: 2em;
  border-right: 0.2em solid var(--brand60);
  align-items: flex-start;
  align-self: stretch;
  font-size: 1.5rem;
}
.history {
  display: flex;
  flex-direction: column;
  gap: 2em;
  width: 100%;
}
.historyGroup {
  line-height: 160%;
  padding: 0.25em 0.5em;
}
.historyGroup:hover {
  background-color: var(--brand15);
}
.month {
  color: var(--brand100);
  font-weight: 700;
}

.advantages {
  display: flex;
  gap: 4em;
  justify-content: center;
  align-items: center;
}
.plusGroup {
  display: flex;
  gap: 1em;
}
.plus {
  display: flex;
  flex-direction: column;
  background-color: var(--black5);
  padding: 1em;
  gap: 0.5em;
  border-radius: 1em;
  font-weight: 500;
}
.plusTitle {
  font-size: 1.75rem;
  color: var(--brand100);
  font-weight: 700;
  font-family: Verdana;
}

/* main */
.listGroup,
.ItemGroup {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--gray15);
  list-style: none;
}
.listItem,
.select-listItem,
.select-listItem02 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 160%;
  margin: 0.5em auto;
}
.select-listItem {
  flex-wrap: wrap;
}
.listItem:hover {
  background-color: var(--brand15);
  animation: itemBg 0.4s;
}
@keyframes itemBg {
  from {
    background-color: var(--white100);
  }
  to {
    background-color: var(--brand15);
  }
}
.select-listItem02 {
  width: 100%;
}
.select-listItem02:hover {
  background-color: var(--brand15);
}
.downloadList button a {
  color: var(--brand100);
  font-size: 0.9rem;
  cursor: pointer;
}
.downloadList {
}
.downloadList > ol > li {
  list-style: cjk-ideographic;
  margin-bottom: 1em;
  margin-left: 0;
  line-height: 160%;
  text-align: justify;
}
.d-none {
  display: none;
}
.pl2 {
  padding-left: 2em;
}
.ml2 {
  margin-left: 2em;
}
.contentBox {
  margin-bottom: 4em;
}
.maintenance {
  color: var(--gray60);
  font-size: 0.8rem;
  margin: 0.5em 0 2em 0;
  text-align: right;
}
.srManagers li ul {
}
.srManagers li ul li {
  list-style-type: disc;
  line-height: 160%;
  margin: 1em 0;
}
.srLine,
.managementLine {
  margin: 0 0.5em 0.5em;
  padding-left: 0.5em;
  text-align: justify;
}
.srLine {
  border-left: 2px solid var(--brand100);
}
.managementLine {
  border-left: 2px solid var(--gray15);
}
.managementBox div {
  line-height: 160%;
}
.managementItem {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  border-bottom: 1px solid var(--gray15);
  margin-top: 1.25em;
}
.managementTitle {
  color: var(--gray100);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 160%;
}
.managementSubtitle {
  font-size: 1.25rem;
  font-weight: normal;
}
.managementGroup {
  display: flex;
}
.managementGroupTitle {
  flex-shrink: 0;
}

.managementLi li {
  list-style-type: disc;
  margin: 0.5em auto;
  line-height: 160%;
  text-align: justify;
}

.managementTableContainer01 {
  background-color: var(--white100);
}

.managementTableContainer01 table,
.managementTableContainer02 table,
.financialInformationTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 360px;
}

.managementTableContainer01 th,
.managementTableContainer01 td {
  border: 1px solid var(--gray15);
  padding: 0.5em;
  text-align: center;
  vertical-align: middle;
  line-height: 160%;
  transition: background-color 0.3s ease;
}

.managementTableContainer01 th {
  background-color: var(--black5);
}

.managementTableContainer01 .category-header {
  background-color: var(--black5);
  text-align: left;
}

.hover-column {
  background-color: var(--brand15) !important;
  animation: itemBg 0.4s;
  will-change: background-color;
}

.managementTableContainer02 {
  background-color: var(--white100);
}

.managementTableContainer02 table {
  border: 1px solid var(--gray15);
}

.managementTableContainer02 th {
  background-color: var(--black5);
  padding: 1em;
  border: 1px solid var(--gray15);
  line-height: 160%;
}

.managementTableContainer02 td {
  padding: 1em;
  border: 1px solid var(--gray15);
  line-height: 160%;
  text-align: center;
}

.organizationImg img,
.memberImg img,
.coupon_logo img {
  width: 70%;
  border-radius: 0.5em;
}
.financialInformationTable {
  background: var(--white100);
}

.financialInformationTable th,
.financialInformationTable td {
  border: 1px solid var(--gray15);
  text-align: right;
  padding: 0.5em;
  line-height: 160%;
}

.financialInformationTable th {
  background-color: var(--black5);
  text-align: center;
}

.financialInformationTable td:first-child {
  text-align: center;
  background-color: var(--black5);
}

.financialInformationTable tr:hover td {
  background-color: var(--brand15);
}
.overflow_x_auto {
  overflow-x: auto;
}
.note,
.faq_libraryPath {
  padding: 0.5em;
  color: var(--gray60);
  font-size: 0.8rem;
  line-height: 160%;
}
.faq_highlight {
  color: var(--orange);
  padding: 0 0.5em;
}
.note a {
  color: var(--primary100);
}
.contentBorder {
  border: 1px solid var(--brand100);
  padding: 0 2em 2em;
  border-radius: 0.5em;
}
.listGroup1 > ol li {
  list-style: decimal;
  margin: 0 0 0.5em 1em;
  line-height: 160%;
}
.listGroupA > ol li {
  list-style: lower-alpha;
  margin: 0 0 0.5em 1.25em;
}
.memberSubtitleImg {
  text-align: center;
}
.memberSubtitle {
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1em;
}
.memberImg2 img {
  width: 100%;
  border-radius: 0.5em;
}
.memberImgMb {
  display: none;
}
.btnGroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.btnGroup button {
  padding: 1.25em 4em;
  border-radius: 0.5em;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  flex: 1;
}
.btn_login,
.btn_register,
.btn_bankLogin,
.btn_bankInfo {
  font-size: 1rem;
}
.btn_login {
  background-color: var(--white100);
  border: 1px solid var(--gray15);
  color: var(--gray100);
}
.btn_login:hover {
  border: 1px solid var(--primary100);
  color: var(--primary100);
}
.btn_register,
.btn_bankLogin {
  background-color: var(--primary100);
  color: var(--white100);
}
.btn_register:hover,
.btn_bankLogin:hover {
  background-color: rgb(0, 155, 193);
}
.btnGroup_bank {
  display: inline-flex;
}
.btnGroup_bank button {
  padding: 1em 2em;
  border-radius: 0.5em;
  flex-basis: auto;
  cursor: pointer;
}
.stepTitle {
  background-color: var(--primary100);
  color: var(--white100);
  padding: 0.5em 1em;
  border-radius: 99px;
  display: inline-block;
}
/* voucher */
.voucher {
  /* width: 600px; */
  background-color: var(--white100);
  border-radius: 1em;
  overflow: hidden;
}
.voucher_header {
  display: flex;
  background-color: var(--orange);
  color: var(--white100);
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  padding: 4em 2em 2em;
}
.coupon_logo {
  position: absolute;
  top: 1em;
  left: 1em;
}
.voucher_info {
  flex: 1;
}
.voucherTitle {
  font-size: 2.5rem;
  margin: 0;
  font-weight: 500;
  color: var(--yellowLight);
}
.voucherAmount {
  font-family: "Comfortaa", sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0.25em 0;
  color: var(--white100);
}
.voucherValue {
  font-size: 4rem;
}
.currency,
.voucherBtn {
  font-size: 1.75rem;
}
.voucherRules {
  font-size: 0.8rem;
  position: absolute;
  bottom: 1em;
}
.voucherBtn {
  background-color: var(--white100);
  color: var(--orange);
  border: none;
  border-radius: 1em;
  padding: 1em;
  cursor: pointer;
}

.voucher_body {
  padding: 0 2em 2em;
  display: none;
  background-color: var(--white100);
  border: 1px solid var(--orange);
  border-radius: 0 0 1em 1em;
}

.voucher_body.show {
  display: block;
}
.voucher_body ol {
  padding-left: 20px;
}

.coupon_link {
  display: inline-block;
  margin-top: 10px;
  color: var(--orange);
}
/* bank */
.anchors_bank {
  padding: 0 15%;
  background-color: var(--white100);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: sticky;
  top: 3em;
}
.anchors_bank a {
  color: var(--primary100);
  margin-right: 1em;
  padding: 1em;
}
.bankContainer {
  gap: 1em;
  min-width: 23%;
  justify-content: space-between;
  text-align: center;
}
.bankContainer img {
  width: 11.5em;
}
.bankInfo {
  line-height: 160%;
}
.bankDuration {
  border-bottom: 1px solid var(--gray15);
  padding: 1em;
}
.btn_bankInfo {
  color: var(--primary100);
}
.bankFooter {
  background-color: var(--black5);
  padding: 1.5em;
  text-align: center;
}
.bankFooterTitle {
  font-size: 2.25em;
  margin-bottom: 0.25em;
}
.bankDetailContainer {
  flex-direction: column;
}