.header {
  background-color: #159B6C;
  color: #ffffff;
}
 .header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
}
 .header .container .sign {
  display: flex;
  align-items: center;
}
 .header .container .sign span {
  padding-left: 15px;
  font-weight: 400;
  font-size: 24.5007px;
  line-height: 32px;
}
 .header .container .rec {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 27px;
}
 .header .container .rec a {
  width: 175.65px;
  height: 43.62px;
  background: #FFFFFF;
  border-radius: 27px;
  font-weight: 400;
  font-size: 19.6582px;
  line-height: 43.62px;
  color: #000000;
  text-align: center;
}
 .header .container .rec a img {
  width: 49.5px;
  height: 22.38px;
}
 .header .container .rec:hover {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 770px) {
   .header .container {
    min-height: 56.77rem;
    padding: 0 17rem 0 20rem;
  }
   .header .container .sign img {
    width: 31.24rem;
    height: 31.24rem;
  }
   .header .container .sign span {
    padding-left: 11rem;
    font-size: 18.4876rem;
    line-height: 24rem;
  }
   .header .container .rec {
    border-radius: 18.6249rem;
  }
   .header .container .rec a {
    width: 121.17rem;
    height: 30.09rem;
    border-radius: 18.6249rem;
    font-weight: 400;
    font-size: 13.5604rem;
    line-height: 30.09rem;
    overflow: hidden;
  }
   .header .container .rec a img {
    width: 34.12rem;
    height: 15.44rem;
  }
}
 .wrapper1 {
  margin-top: 54px;
}
 .wrapper1 .container .box {
  width: 100%;
  border: 2.99593px solid #57A16E;
  box-sizing: border-box;
  padding: 23px 69px 33px 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 .wrapper1 .container .box .box-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 .wrapper1 .container .box .box-left .text-box {
  padding-left: 49px;
}
 .wrapper1 .container .box .box-left .text-box .title {
  font-weight: 700;
  font-size: 41.9431px;
  line-height: 55px;
  color: #57A16E;
}
 .wrapper1 .container .box .box-left .text-box .desc {
  font-weight: 290;
  font-size: 23.9675px;
  line-height: 154.51%;
  color: #232323;
  padding-top: 10px;
}
 .wrapper1 .container .box .box-right {
  text-align: center;
}
 .wrapper1 .container .box .box-right .rec {
  display: flex;
  align-items: center;
  border-radius: 27px;
}
 .wrapper1 .container .box .box-right .rec a {
  width: 263.12px;
  height: 77.26px;
  background: #FFA800;
  border-radius: 13px;
  font-weight: 400;
  font-size: 29.4473px;
  line-height: 75px;
  color: #FFFFFF;
  text-align: center;
}
 .wrapper1 .container .box .box-right .rec a img {
  width: 82.08px;
  height: 36.2px;
}
 .wrapper1 .container .box .box-right .rec a:hover {
  background: #FF7A00;
}
 .wrapper1 .container .box .box-right .link {
  padding-top: 13px;
}
 .wrapper1 .container .box .box-right .link a {
  font-weight: 290;
  font-size: 18px;
  line-height: 176.01%;
  color: #57A16E;
}
 .wrapper1 .container .box .box-right .link a:hover {
  text-decoration-line: underline;
}
@media (max-width: 770px) {
   .wrapper1 {
    margin-top: 24px;
  }
   .wrapper1 .container .box {
    margin: 0 auto;
    width: 93.88%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22rem 5rem 20rem 15rem;
  }
   .wrapper1 .container .box .box-left {
    margin-right: 15rem;
  }
   .wrapper1 .container .box .box-left .sign img {
    height: 58.54rem;
    width: 58.54rem;
  }
   .wrapper1 .container .box .box-right {
    text-align: left;
  }
   .wrapper1 .container .box .box-right .text-box .title {
    font-weight: 700;
    font-size: 20rem;
    line-height: 26rem;
    color: #57A16E;
  }
   .wrapper1 .container .box .box-right .text-box .desc {
    font-weight: 290;
    font-size: 12rem;
    line-height: 154.51%;
    color: #232323;
    margin: 8rem 0 15rem;
  }
   .wrapper1 .container .box .box-right .rec {
    border-radius: 8.48382rem;
  }
   .wrapper1 .container .box .box-right .rec a {
    width: 171.71rem;
    height: 50.42rem;
    border-radius: 8.48382rem;
    font-weight: 400;
    font-size: 19.2173rem;
    line-height: 50.42rem;
    color: #FFFFFF;
  }
   .wrapper1 .container .box .box-right .rec a img {
    width: 53.56rem;
    height: 23.62rem;
  }
   .wrapper1 .container .box .box-right .link a {
    font-size: 12rem;
  }
}
 .wrapper2 {
  margin-top: 44.3px;
}
 .wrapper2 .container .wrapper-box .box {
  background: url(../images/wrapper2-bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 50px 10px 36.2px;
  width: 100%;
}
 .wrapper2 .container .wrapper-box .box .box-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 .wrapper2 .container .wrapper-box .box .box-left .desc {
  font-weight: 700;
  font-size: 34px;
  line-height: 152.48%;
  text-align: center;
  color: #FFFFFF;
  padding-left: 15px;
}
 .wrapper2 .container .wrapper-box .box .box-right .rec {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 27px;
}
 .wrapper2 .container .wrapper-box .box .box-right .rec a {
  width: 263.12px;
  height: 77.26px;
  background: #FFA800;
  border-radius: 13px;
  font-weight: 400;
  font-size: 29.4473px;
  line-height: 75px;
  color: #FFFFFF;
  text-align: center;
}
 .wrapper2 .container .wrapper-box .box .box-right .rec a img {
  width: 82.08px;
  height: 36.2px;
}
 .wrapper2 .container .wrapper-box .box .box-right .rec:hover {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
 .wrapper2 .container .wrapper-box .box .box-right .link {
  margin-top: 13px;
  text-align: center;
}
 .wrapper2 .container .wrapper-box .box .box-right .link a {
  font-weight: 290;
  font-size: 18px;
  line-height: 176.01%;
  color: #FFFFFF;
}
 .wrapper2 .container .wrapper-box .box .box-right .link a:hover {
  text-decoration-line: underline;
}
@media (max-width: 770px) {
   .wrapper2 {
    margin-top: 20rem;
  }
   .wrapper2 .container .wrapper-box .box {
    margin: 0 auto;
    width: 93.88%;
    background: url(../images/wrapper2-bg-mobile.png) no-repeat;
    background-size: 100% 100%;
    padding: 12.58rem 8rem 8rem 138rem;
    flex-direction: column;
    text-align: center;
  }
   .wrapper2 .container .wrapper-box .box .desc {
    font-weight: 700;
    font-size: 19.4155rem;
    line-height: 148.98%;
    text-align: center;
    color: #FFFFFF;
  }
   .wrapper2 .container .wrapper-box .box .rec {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8.48382rem;
    margin: 10rem 0 3rem;
  }
   .wrapper2 .container .wrapper-box .box .rec a {
    width: 171.71rem;
    height: 50.42rem;
    border-radius: 8.48382rem;
    font-weight: 400;
    font-size: 19.2173rem;
    line-height: 50.42rem;
    color: #FFFFFF;
    background: #FFA800;
  }
   .wrapper2 .container .wrapper-box .box .rec a img {
    width: 53.56rem;
    height: 23.62rem;
  }
   .wrapper2 .container .wrapper-box .box .rec:hover {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }
   .wrapper2 .container .wrapper-box .box .link a {
    font-weight: 290;
    font-size: 10.2038rem;
    line-height: 176.01%;
    color: #FFFFFF;
  }
   .wrapper2 .container .wrapper-box .box .link a:hover {
    text-decoration-line: underline;
  }
}
 .wrapper3 {
  margin: 107.5px 0 130px;
}
 .wrapper3 .container .flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
 .wrapper3 .container .flex-box .flex-list {
  background: #FFFFFF;
  flex: 0 0 260.04px;
  padding: 37px 0 36.57px;
  text-align: center;
}
 .wrapper3 .container .flex-box .flex-list .package {
  font-weight: 400;
  font-size: 23.6931px;
  line-height: 32px;
  color: #545454;
  margin-bottom: 16px;
}
 .wrapper3 .container .flex-box .flex-list .price {
  font-weight: 700;
  font-size: 29.6164px;
  line-height: 39px;
  color: #FF3737;
}
 .wrapper3 .container .flex-box .flex-list .price .old-pri {
  font-weight: 290;
  font-size: 14.5817px;
  line-height: 19px;
  text-decoration-line: line-through;
  color: #9A9A9A;
}
 .wrapper3 .container .flex-box .flex-list .desc ul {
  padding-left: 33px;
}
 .wrapper3 .container .flex-box .flex-list .desc ul li {
  text-align: left;
  padding-top: 18px;
  font-weight: 290;
  font-size: 16px;
  line-height: 21px;
  color: #545454;
  list-style-image: url(../images/buypage/tick.png);
}
 .wrapper3 .container .flex-box .flex-list .desc ul .cross {
  list-style-image: url(../images/buypage/cross.png);
}
 .wrapper3 .container .flex-box .flex-list .btn {
  border-radius: 7.71527px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 44px;
}
 .wrapper3 .container .flex-box .flex-list .btn a {
  background: #FFA800;
  border-radius: 7.71527px;
  width: 158.35px;
  height: 46.5px;
  line-height: 46.5px;
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  text-align: center;
}
 .wrapper3 .container .flex-box .flex-list .btn a img {
  padding-left: 10px;
}
 .wrapper3 .container .flex-box .flex-list .btn a:hover {
  background: #FF7A00;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(1) {
  box-shadow: 0px 6px 20.7314px rgba(102, 102, 102, 0.2);
  border-top: #EAEAEA solid 6.67px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(2) {
  box-shadow: 0px 6px 20.7314px rgba(102, 102, 102, 0.2);
  border-top: rgba(87, 161, 110, 0.34) 6.67px solid;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(2) .desc ul {
  padding-left: 56.6px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(3) {
  border: 3.90431px solid #57A16E;
  box-shadow: 0px -5.85647px 20.4976px rgba(192, 192, 192, 0.2), -1.95216px 3.90431px 11.7129px rgba(192, 192, 192, 0.36);
  flex: 0 0 302px;
  position: relative;
  padding: 67px 0 50px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(3) .desc ul {
  padding-left: 67px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(3) .btn {
  border-radius: 9.16061px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(3) .btn a {
  border-radius: 9.16061px;
  width: 201.49px;
  height: 59.16px;
  line-height: 59.16px;
  font-size: 25.6497px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(3) .btn a img {
  padding-left: 12.4px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(3)::after {
  content: '';
  background: url(../images/buypage/one-year.png) no-repeat;
  background-size: 100% 100%;
  width: 55.75px;
  height: 62.2px;
  position: absolute;
  right: 23px;
  top: 32px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(4) {
  box-shadow: 0px 6px 20.7314px rgba(102, 102, 102, 0.2);
  border-top: rgba(87, 161, 110, 0.56) 6.67px solid;
  position: relative;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(4) .desc ul {
  padding-left: 41.3px;
}
 .wrapper3 .container .flex-box .flex-list:nth-child(4)::after {
  content: '';
  background: url(../images/buypage/three-years.png) no-repeat;
  background-size: 100% 100%;
  width: 57.42px;
  height: 64.06px;
  position: absolute;
  right: 14.64px;
  top: 11px;
}
@media (max-width: 770px) {
   .wrapper3 {
    margin: 18rem 0 45rem;
  }
   .wrapper3 .container .flex-box {
    flex-direction: column;
  }
   .wrapper3 .container .flex-box .flex-list {
    margin-top: 24rem;
    width: 302rem;
    padding: 67.52rem 51rem 50rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3.90431px solid #57A16E !important;
    box-shadow: 0px -5.85647px 20.4976px rgba(192, 192, 192, 0.2), -1.95216px 3.90431px 11.7129px rgba(192, 192, 192, 0.36) !important;
    position: relative;
  }
   .wrapper3 .container .flex-box .flex-list .package {
    font-weight: 400;
    font-size: 23.4259rem;
    line-height: 31rem;
    color: #545454;
  }
   .wrapper3 .container .flex-box .flex-list .price {
    font-weight: 700;
    font-size: 29.2824rem;
    line-height: 39rem;
    color: #FF3737;
  }
   .wrapper3 .container .flex-box .flex-list .price .old-pri {
    font-weight: 290;
    font-size: 14.5817rem;
    line-height: 19rem;
    text-decoration-line: line-through;
    color: #9A9A9A;
  }
   .wrapper3 .container .flex-box .flex-list .desc ul {
    padding-left: 0 !important;
  }
   .wrapper3 .container .flex-box .flex-list .desc ul li {
    font-weight: 290;
    font-size: 16rem;
    line-height: 21rem;
    color: #545454;
  }
   .wrapper3 .container .flex-box .flex-list .btn {
    border-radius: 9.16061rem;
  }
   .wrapper3 .container .flex-box .flex-list .btn a {
    width: 201.49rem !important;
    height: 59.16rem !important;
    border-radius: 9.16061rem;
    font-size: 25.6497rem !important;
    line-height: 59.16rem !important;
  }
   .wrapper3 .container .flex-box .flex-list .btn a img {
    height: 23.7rem;
    padding-left: 12.4rem;
  }
   .wrapper3 .container .flex-box .flex-list:nth-child(1)::after {
    content: '';
    background: url(../images/buypage/one-year.png) no-repeat;
    background-size: 100% 100%;
    width: 55.75rem;
    height: 62.2rem;
    position: absolute;
    right: 23rem;
    top: 32rem;
  }
   .wrapper3 .container .flex-box .flex-list:nth-child(2)::after {
    content: '';
    background: url(../images/buypage/three-years.png) no-repeat;
    background-size: 100% 100%;
    height: 64.06rem;
    position: absolute;
    right: 22rem;
    top: 35rem;
  }
   .wrapper3 .container .flex-box .flex-list:nth-child(3)::after {
    background: none;
  }
   .wrapper3 .container .flex-box .flex-list:nth-child(4)::after {
    background: none;
  }
}