.OKRau {
  font-family: 'PT Sans', sans-serif;
  box-sizing: border-box;
  flex: 1;
  color: #0E161C;
  color: var(--phoenixBlack, #0E161C);
}

._2HyXm {
  position: relative;
  display: flex;
  flex-direction: column;
}

.xiZ37 {
  margin: 0 auto;
  max-width: 1200px;
  z-index: 10;
}

._3r-nL {
  position: absolute;
  top: 0;
  left: 0;
}

._1D7PA {
  position: absolute;
  top: 0;
  right: 0;
}

._36hCQ {
  display: none;
}

._2VMj5 {
  display: none;
}

._1KyQq {
  text-align: center;
  padding: 67px;
  max-width: 840px;
  margin: 0 auto;
}

._1KyQq ._17FaB {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  line-height: 21px;
  margin-bottom: 16px;
}

.EUqpN {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #008c52;
  color: var(--primaryDark, #008c52);
  margin: 0;
}

._3K8oM {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 59px;
  color: #0E161C;
  color: var(--phoenixBlack, #0E161C);
  margin: 24px 0 56px;
}

._3K8oM._1JSn2 {
  font-size: 56px;
  line-height: 68px;
  margin: 40px 0 48px;
}

._10Wan a:not(:last-child) {
  margin-right: 8px;
}

._10Wan .mZsFr {
  margin: 0 5px;
  display: inline-block;
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 48px;
  transition: background-size 0.2s ease-in;
}

._10Wan .mZsFr:hover {
  background-size: 100%;
}

.-kfFX {
  width: 1200px;
  border-radius: 32px;
  background-color: #0E161C;
  background-color: var(--phoenixBlack, #0E161C);
  padding: 45px;
  text-align: center;
  color: #ffffff;
  position: relative;
  background-image: linear-gradient(270deg, #0E161C 0%, rgba(14, 22, 28, 0.2) 47.1%), url("/assets/images/main/img_volunteer.jpg");
  background-image: linear-gradient(270deg, #0E161C 0%, rgba(14, 22, 28, 0.2) 47.1%), -webkit-image-set("/assets/images/main/img_volunteer.webp" type("image/webp"), "/assets/images/main/img_volunteer.jpg" type("image/jpeg"));
  background-image: linear-gradient(270deg, #0E161C 0%, rgba(14, 22, 28, 0.2) 47.1%), image-set("/assets/images/main/img_volunteer.webp" type("image/webp"), "/assets/images/main/img_volunteer.jpg" type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: auto 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.-kfFX img {
  position: absolute;
  left: 0;
}

.-kfFX p {
  z-index: 10;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}

._1kyAc {
  display: inline-block;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  border-radius: 90px;
  padding: 13px 28px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  text-decoration: none;
  color: #ffffff;
  margin-left: 40px;
  transition: all 0.3s ease-out;
}

._1kyAc:hover {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  color: #0E161C;
  color: var(--phoenixBlack, #0E161C);
}

.rA8Yt {
  display: inline-block;
  border: 1px solid #0E161C;
  background-color: transparent;
  box-sizing: border-box;
  border-radius: 90px;
  padding: 13px 28px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-decoration: none;
  color: #0E161C;
  color: var(--phoenixBlack, #0E161C);
  transition: all 0.3s ease-out;
  margin-top: 48px;
  cursor: pointer;
  min-width: 296px;
}

.rA8Yt:hover {
  color: #ffffff;
  background-color: #0E161C;
  background-color: var(--phoenixBlack, #0E161C);
}

.KRwlJ {
  margin-top: 64px;
  width: 1200px;
  border-radius: 32px;
  padding: 88px;
  display: flex;
  justify-content: space-between;
}

.KRwlJ._1Kp4I {
  background-color: #E6F7F0;
  flex-direction: row;
}

.KRwlJ._1Kp4I:hover ._1wb6O {
  left: -10px;
}

.KRwlJ._1Kp4I:hover ._3Fc8p {
  right: -10px;
}

.KRwlJ._3L9Pc {
  background-color: #EBEFF2;
  flex-direction: row-reverse;
}

.KRwlJ._3L9Pc:hover ._1wb6O {
  left: -10px;
}

.KRwlJ._3L9Pc:hover ._3Fc8p {
  right: -10px;
}

.B-2kv {
  width: 720px;
}

.KRwlJ._1Kp4I .B-2kv {
  padding-right: 88px;
}

.KRwlJ._3L9Pc .B-2kv {
  padding-left: 88px;
}

._2ggY4 {
  display: none;
}

._2BT0q {
  position: relative;
  min-width: 346px;
}

._1wb6O {
  position: absolute;
  left: 0;
  top: 42px;
  z-index: 20;
  transition: all 0.5s ease-out;
}

._3Fc8p {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 30;
  transition: all 0.5s ease-out;
}

._17FaB {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 130%;
  margin: 0 0 24px 0;
}

._20p3z {
  font-weight: 700;
}

._2R76F {
  margin-bottom: 56px;
}

._2KIG3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}

._2KIG3 ._17FaB._2I7xs {
  margin: 0;
  font-family: 'PT Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 130%;
}

._2KIG3 ._1qUYs {
  margin-right: 16px;
}

._1qUYs._3PT2O {
  color: #00A660;
  color: var(--primary, #00A660);
  ;
}

.bUSGi {
  display: inline-block;
  border: 1px solid #0E161C;
  border: 1px solid var(--phoenixBlack, #0E161C);
  background-color: #0E161C;
  background-color: var(--phoenixBlack, #0E161C);
  ;
  box-sizing: border-box;
  border-radius: 90px;
  padding: 16px 48px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.3s ease-out;
}

.bUSGi:hover {
  opacity: 0.7;
}

._1EA3J {
  width: 1200px;
  margin-top: 120px;
}

._1EA3J ._3K8oM {
  margin: 24px 0;
}

._1EA3J ._17FaB {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 130%;
}

._3S2nS {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

._1_y-a {
  width: 33%;
  margin: 16px 0;
  display: flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}

._3Kmwz {
  margin-right: 24px;
  flex: 1;
}

._2cvAR {
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  line-height: 32px;
}

._27xDr {
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 21px;
  margin: 0;
}

._3XdMI {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background-color: rgba(0, 166, 96, 0.1);
  margin-right: 32px;
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._3XdMI img {
  transition: transform 0.2s ease-in-out;
}

._3XdMI:hover img {
  transform: scale(1.2);
}

.KRwlJ._22PPG {
  flex-direction: column;
  position: relative;
  background-image: url("/assets/images/volunteer/bg_yellow.jpg");
  background-image: -webkit-image-set("/assets/images/volunteer/bg_yellow.webp" type("image/webp"), "/assets/images/volunteer/bg_yellow.jpg" type("image/jpeg"));
  background-image: image-set("/assets/images/volunteer/bg_yellow.webp" type("image/webp"), "/assets/images/volunteer/bg_yellow.jpg" type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

._22PPG ._3K8oM {
  width: 50%;
}

._3CX2V {
  position: absolute;
  top: 64px;
  right: 64px;
}

._1J9n5 {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.AW2I7 {
  display: none;
}

._3di-k {
  width: 25%;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  margin-bottom: 17px;
  transition: all 0.3s ease-out;
  cursor: default;
}

._3di-k a {
  color: #0E161C;
  color: var(--phoenixBlack, #0E161C);
  text-decoration: none;
}

._3di-k a:hover {
  text-decoration: underline;
  color: #008c52;
  color: var(--primaryDark, #008c52);
}

._3yGAO {
  width: 100%;
  margin-top: 144px;
  padding: 126px;
  background-color: #0E161C;
  background-color: var(--phoenixBlack, #0E161C);
  text-align: center;
  color: #ffffff;
  position: relative;
  background-image: url("/assets/images/main/img_banner_city.jpg");
  background-image: -webkit-image-set("/assets/images/main/img_banner_city.webp" type("image/webp"), "/assets/images/main/img_banner_city.jpg" type("image/jpeg"));
  background-image: image-set("/assets/images/main/img_banner_city.webp" type("image/webp"), "/assets/images/main/img_banner_city.jpg" type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center;
}

._3yGAO p {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 48px;
}

._3yGAO ._1kyAc {
  font-size: 20px;
  line-height: 24px;
  margin: 0;
}

._3LWgp {
  width: 1200px;
  margin-top: 144px;
}

._3LWgp ._3K8oM {
  margin-bottom: 24px;
}

._3LWgp ._17FaB {
  margin-bottom: 72px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 130%;
}

.Dc7Xt {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.Dc7Xt ._2R76F {
  margin: 0;
}

.d8plo {
  width: 50%;
  padding-left: 12px;
}

.d8plo a {
  text-decoration: none;
  color: #0E161C;
  color: var(--phoenixBlack, #0E161C);
}

.d8plo:first-child {
  padding-left: 0px;
  padding-right: 12px;
}

._2cPO3 {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  padding: 56px 64px;
  position: relative;
}

._2cPO3._1QGhY {
  background-image: url("/assets/images/volunteer/bg_yellow.jpg");
  background-image: -webkit-image-set("/assets/images/volunteer/bg_yellow.webp" type("image/webp"), "/assets/images/volunteer/bg_yellow.jpg" type("image/jpeg"));
  background-image: image-set("/assets/images/volunteer/bg_yellow.webp" type("image/webp"), "/assets/images/volunteer/bg_yellow.jpg" type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

._2cPO3._2iaji {
  background-image: url("/assets/images/volunteer/bg_green.jpg");
  background-image: -webkit-image-set("/assets/images/volunteer/bg_green.webp" type("image/webp"), "/assets/images/volunteer/bg_green.jpg" type("image/jpeg"));
  background-image: image-set("/assets/images/volunteer/bg_green.webp" type("image/webp"), "/assets/images/volunteer/bg_green.jpg" type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

._2cPO3 ._3VqG_ {
  opacity: 0;
  position: absolute;
  right: 52px;
  bottom: 36px;
  color: #0E161C;
  color: var(--PhoenixBlack, #0E161C);
}

._2cPO3:hover ._3VqG_ {
  opacity: 1;
  transition: right 0.5s ease-out;
  right: 36px;
}

._2cPO3 ._1bnVU {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 32px;
  mix-blend-mode: overlay;
  transition: all 0.2s ease;
}

._2cPO3 ._1bnVU:hover {
  border: 10px solid rgba(0, 0, 0, 0.7);
}

._1pkx0 {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  line-height: 32px;
  color: #0E161C;
  color: var(--phoenixBlack, #0E161C);
  margin: 24px 0 40px;
}

._2JRIc {
  width: 1200px;
  margin: 144px auto 96px;
  text-align: center;
}

._30Sn5 {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  color: #0E161C;
  color: var(--phoenixBlack, #0E161C);
}

@media (max-width: 1366px) {
  .xiZ37 {
    margin: 0 32px;
    max-width: 100%;
  }

  .-kfFX,
  .KRwlJ,
  ._1EA3J,
  ._3LWgp,
  ._2JRIc {
    width: 100%;
  }

  ._3K8oM._1JSn2 {
    font-size: 48px;
    line-height: 59px;
  }
}

@media (max-width: 980px) {
  .OKRau {
    overflow-y: auto !important;
  }

  .OKRau>div {
    overflow: inherit !important;
  }

  ._3r-nL,
  ._1D7PA {
    display: none;
  }

  ._36hCQ {
    display: inline-block;
    position: absolute;
    top: -179px;
    left: -172px;
  }

  ._2VMj5 {
    display: inline-block;
    position: absolute;
    transform: rotate(155deg);
    top: 126px;
    right: -141px;
  }

  ._1KyQq {
    padding: 67px 0;
  }

  .KRwlJ {
    padding: 64px;
  }

  .KRwlJ._1Kp4I,
  .KRwlJ._3L9Pc {
    flex-direction: column;
  }

  .B-2kv {
    width: 100%;
  }

  .KRwlJ._1Kp4I .B-2kv {
    padding-right: 0;
  }

  .KRwlJ._3L9Pc .B-2kv {
    padding-left: 0;
  }

  ._2BT0q {
    min-width: 256px;
    min-height: 368px;
    margin-right: 48px;
  }

  ._1wb6O {
    height: 284px;
    width: 137px;
  }

  ._3Fc8p {
    height: 368px;
    width: 177px;
  }

  ._1vhTc {
    display: none;
  }

  ._2ggY4 {
    display: block;
  }

  ._3gfay {
    display: flex;
    align-items: center;
  }

  ._1_y-a {
    width: 50%;
  }

  ._3di-k {
    width: 33%;
  }

  ._22PPG ._3K8oM {
    width: 100%;
  }

  ._2cPO3 {
    padding: 48px;
  }

  ._3CX2V {
    display: none;
  }
}

@media (max-width: 660px) {
  .xiZ37 {
    margin: 0;
  }

  ._1KyQq {
    padding: 64px 32px;
  }

  ._3K8oM._1JSn2 {
    font-size: 32px;
    line-height: 39px;
  }

  .-kfFX,
  .KRwlJ,
  ._2cPO3 {
    border-radius: 0;
  }

  .-kfFX {
    padding: 48px 32px;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(270deg, #0E161C 0%, rgba(14, 22, 28, 0.2) 47.1%), url("/assets/images/main/img_volunteer.jpg");
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(270deg, #0E161C 0%, rgba(14, 22, 28, 0.2) 47.1%), -webkit-image-set("/assets/images/main/img_volunteer.webp" type("image/webp"), "/assets/images/main/img_volunteer.jpg" type("image/jpg"));
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(270deg, #0E161C 0%, rgba(14, 22, 28, 0.2) 47.1%), image-set("/assets/images/main/img_volunteer.webp" type("image/webp"), "/assets/images/main/img_volunteer.jpg" type("image/jpg"));
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: auto 100%;
  }

  .KRwlJ {
    margin: 0;
    padding: 64px 32px;
  }

  ._3gfay {
    flex-direction: column;
  }

  ._2BT0q {
    margin-right: 0;
    margin-bottom: 56px;
  }

  ._2ggY4 {
    text-align: center;
  }

  ._3K8oM {
    font-size: 32px;
    line-height: 39px;
  }

  ._1EA3J {
    margin: 0;
    padding: 88px 32px;
  }

  ._1EA3J h2 {
    margin-top: 0;
  }

  ._3yGAO {
    margin-top: 0;
  }

  ._3LWgp {
    margin-top: 88px;
  }

  ._3LWgp ._3K8oM {
    padding: 0 32px;
  }

  ._3LWgp ._17FaB {
    padding: 0 32px;
  }

  .Dc7Xt {
    flex-wrap: wrap;
  }

  .d8plo {
    width: 100%;
    padding-left: 0;
  }

  .d8plo:first-child {
    padding-left: 0;
    padding-right: 0;
  }

  ._2cPO3 {
    padding: 32px;
  }

  ._2JRIc {
    margin: 99px auto 96px;
    padding: 0 32px;
  }

  ._3yGAO {
    padding: 126px 32px;
  }

  ._1J9n5 {
    display: none;
  }

  .AW2I7 {
    display: block;
    text-align: center;
  }

  .EfJEi {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .-kfFX {
    flex-direction: column;
  }

  .-kfFX ._1kyAc {
    margin-left: 0;
  }

  ._1_y-a {
    width: 100%;
  }

  ._3di-k {
    width: 50%;
  }
}