@import url(./reset.css);

.wrap {
  margin-bottom: 80px;
}

.member_home_memberArea {
  border-bottom: 1px solid var(--primary-color-200, #BAE7F9);
  background: var(--Background-Color-Blue, #EDF8FD);
  padding: 40px 100px;
}

.memberArea_areaHeader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.member_home_memberArea img {
  width: 80px;
  height: 80px;
  border-radius: 50px 50px;
}

.memberArea_personInfo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.memberArea_name {
  color: var(--Text-Color-Primary, #1A1A1A);
  font-family: "Noto Sans TC";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  margin: 0 42px 0 28px;
}

.memberArea_companyArea {
  display: flex;
}

.memberArea_companyName {
  color: var(--Text-Color-Blue, #246987);
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.memberArea_companyName span {
  margin-left: 8px;
}

.memberArea_companyName_dash {
  margin: 0 24px !important;
  height: 12px;
}

.member_areafooter {
  margin-top: 40px;
}

.member_areafooter_topBar {
  display: flex;
  justify-content: center;
}

.member_areafooter a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 248px;
  padding: 12px 20px 12px 16px;
  margin-right: 24px;
  border-radius: var(--Button-Radius-Round, 99px);
  border: 2px solid var(--Button-Blue---Filled-Default, #D1EFFA);
  background: var(--Background-Color-White, #FAFAFA);
  color: var(--Text-Color-Blue, #246987);
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

.member_areafooter img {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

.memberInfo_remark {
  color: var(--Text-Color-Secondary, #525252);
  display: block;
  text-align: center;
  margin-top: 8px;
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.1px;
}

.member_home_contain {
  padding: 80px 108px;
  text-align: center;
}

.member_home_contain h2 {
  margin-bottom: 80px;
  color: var(--Text-Color-Primary, #1A1A1A);
  /* Headline/Medium */
  font-family: "Noto Sans TC";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
}

.member_home_contain ul {
  padding: 0 104px;
}

.member_home_contain ul li {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 24px 32px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-bottom: 1px solid var(--grayscale-gray-200, #E0E0E0);
  background: var(--Background-Color-White, #FAFAFA);
}

.contain_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.contain_box_date_content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contain_box_icon {
  padding: 12px;
}

.contain_box_icon img {
  display: block;
  height: 16px;
}

.headerArea_date {
  color: var(--Text-Color-Secondary, #525252);
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.1px;
  margin-left: 24px;
  margin-right: 24px;
}

.contain_box_headerTitle {
  border-radius: 999px;
  background: var(--secondary-color-yellow-300, #FDC44E);
  padding: 4px 16px;
  color: var(--Text-Color-Primary, #1A1A1A);
  font-family: "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.2px;
}

.contain_box_headerTitle_blue_bc {
  background: var(--logo-color-blue-000, #AFE5FD);
}

.contain_box_headerTitle_orange_bc {
  background: var(--secondary-color-orange-100, #FFAD7A);
}

.contain_box_title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  flex: 1 0 0;
  overflow: hidden;
  color: var(--Text-Color-Primary, #1A1A1A);
  text-overflow: ellipsis;
  font-family: "Noto Sans TC";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.25px;
}

.contain_footerArea {
  display: flex;
  justify-content: center;
}

.footerArea-btn {
  margin-top: 80px;
  width: 288px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 12px 20px;
  border-radius: var(--Button-Radius-Round, 99px);
  border: 1px solid var(--Button-Blue---Filled-Hover, #98DAF7);
  background: var(--Button-Blue---Filled-Default, #D1EFFA);
}

.footerArea-btn p {
  color: var(--Text-Color-Blue, #246987);
  /* Label/Large - M */
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

.coc-news__pagination {
  display: flex;
  align-items: center;
}

.member_home_contain_list>li {
  min-height: 40px;
}

/* RWD */
@media screen and (max-width: 1439px) {
  .member_home_memberArea {
    padding: 40px 40px;
  }

  .memberArea_name {
    font-size: 24px;
    margin: 0 36px 0 24px;
  }

  .member_areafooter a {
    width: 174px;
  }

  .member_home_contain {
    padding: 80px var(--Radius---XL, 40px);
  }

  .contain_box_title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .footerArea-btn {
    width: 252px;
  }

  .footerArea-btn p {
    margin-right: 8px;
  }
}

@media screen and (max-width: 991px) {
  .member_home_memberArea {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 40px 20px 40px;
  }

  .memberArea_areaHeader {
    display: block;
    width: 284px;
  }

  .memberArea_personInfo {
    margin-bottom: 40px;
  }

  .memberArea_name {
    font-weight: 400;
    margin: 0 36px 0 24px;
  }

  .memberArea_companyArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .memberArea_companyName {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
  }

  .memberArea_companyName_dash {
    display: none;
  }

  .member_areafooter_topBar {
    display: flex;
    flex-direction: column;
    margin-top: 0px;
    margin-left: 0px;
  }

  .member_areafooter a {
    display: flex;
    align-items: center;
    width: 156px;
    padding: 10px 16px 10px 12px;
    margin-bottom: 16px;
    margin-right: 0px;
  }

  .memberInfo_remark {
    font-size: 10px;
    line-height: 16px;
    margin-top: 8px;
  }

  .wp991_mb0 {
    margin-bottom: 0px !important;
  }

  .member_home_contain {
    padding: 40px 40px;
  }

  .member_home_contain h2 {
    margin-bottom: 40px;
    color: var(--Text-Color-Blue, #246987);
  }

  .member_home_contain ul {
    padding: 0px 78px;
  }

  .member_home_contain ul li {
    padding: 8px 16px 8px 24px;
  }

  .headerArea_date {
    margin-left: 16px;
    margin-right: 16px;
    font-size: 12px;
    line-height: 18px;
  }

  .contain_box_headerTitle {
    padding: 4px 16px;
  }

  .contain_box_title {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px;
  }

  .footerArea-btn {
    width: 156px;
    padding: 10px 12px 10px 16px;
    margin-top: 40px;
  }

  .footerArea-btn p {
    font-style: 12px;
  }

  .footerArea-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

@media screen and (max-width: 767px) {
  .member_home_memberArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 24px 4px 24px;
  }

  .memberArea_personInfo {
    margin-bottom: 20px;
  }

  .memberArea_name {
    font-size: 22px;
    margin: 0 0 0 20px !important;
  }

  .memberArea_companyName {
    font-size: 10px;
    line-height: 16px;
    margin-bottom: 8px;
  }

  .member_areafooter {
    margin: 12px 0 0 0 !important;
  }

  .member_areafooter a {
    margin-right: 0;
  }

  .memberInfo_remark {
    margin-top: 4px;
  }

  .member_home_contain {
    padding: 40px 24px;
  }

  .member_home_contain ul {
    padding: 0;
  }

  .member_home_contain ul li {
    align-items: start;
  }

  .contain_box {
    display: block;
  }

  .contain_box_date_content {
    justify-content: start;
    padding: 7px 0;
  }

  .headerArea_date {
    font-size: 10px;
    line-height: 16px;
  }

  .contain_box_title {
    margin-top: 8px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.1px;
  }

  .footerArea-btn {
    margin-top: 16px;
  }
}