#app {
  overflow: initial;
  height: auto; }

.thecurrentpage {
  color: #6c6c6c;
  font-size: 16px;
  margin-top: 10px; }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .thecurrentpage {
      padding: 0 31px; } }
  @media screen and (min-width: 320px) and (max-width: 767px) {
    .thecurrentpage {
      padding: 0 0.53rem;
      font-size: 14px; } }
  .thecurrentpage img {
    width: 8px;
    height: auto;
    margin: 0 5px; }

.product-list {
  display: flex;
  flex-wrap: wrap; }
  @media screen and (min-width: 992px) and (max-width: 1024px) {
    .product-list {
      padding: 0 60px; } }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .product-list {
      padding: 0 31px; } }
  @media screen and (min-width: 320px) and (max-width: 767px) {
    .product-list {
      padding: 0 0.53rem; } }
  .product-list-item {
    width: calc( 100% / 3 - 31px);
    min-height: 298px;
    height: auto;
    border: 2px solid #F0F0F0;
    border-radius: 20px;
    margin-right: 46px;
    padding: 58px 25px 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 85px;
    position: relative; }
    @media screen and (min-width: 1025px) {
      .product-list-item:nth-child(3n + 0) {
        margin-right: 0; } }
    @media screen and (min-width: 992px) and (max-width: 1024px) {
      .product-list-item {
        width: calc( 100% / 2 - 23px); }
        .product-list-item:nth-child(2n + 0) {
          margin-right: 0; } }
    @media screen and (min-width: 768px) and (max-width: 991px) {
      .product-list-item {
        width: calc( 100% / 2 - 16px);
        margin-right: 32px; }
        .product-list-item:nth-child(2n + 0) {
          margin-right: 0; } }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .product-list-item {
        width: 100%;
        min-height: 7.66rem;
        margin-right: 0;
        margin-top: 2rem;
        padding: 1.3rem 0.53rem .93rem; } }

    .product-list-item .angle-mark {
      position: absolute;
      top: 32px;
      right: 35px; }
      @media screen and (min-width: 320px) and (max-width: 1024px) {
        .product-list-item .angle-mark {
          right: 45px; } }
      .product-list-item .angle-mark img {
        width: 70px; }
        @media screen and (min-width: 320px) and (max-width: 1024px) {
          .product-list-item .angle-mark img {
            width: 80px; } }

    .product-list-item img {
      position: absolute;
      width: 67px;
      height: auto;
      top: -32px;
      left: 50%;
      margin-left: -33.5px; }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .product-list-item img img {
          width: 1.69rem;
          margin-left: -.845rem; } }
    .product-list-item h4 {
      font-size: 20px;
      font-weight: bold;
      color: #000; }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .product-list-item h4 {
          font-size: 0.53rem; } }
    .product-list-item .doc {
      font-size: 16px;
      color: #333;
      font-weight: 100;
      text-align: center;
      line-height: 1.2;

      margin-top: 10px;
      margin-bottom: 20px; }

      .product-list-item-language .doc {
        height: 0.4rem;
      }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .product-list-item .doc {
          font-size: 0.4rem;
          margin-top: 0.41rem;
          margin-bottom: 0.8rem; }
        .product-list-item-language .doc {
          height: auto;
        }
      }

      @media screen and (min-width: 768px) and (max-width: 1024px) {
        .product-list-item-language .doc {
          height:auto;
      } }

    .product-list-item .price {
      color: #FA594B;
      font-size: 20px;
      font-weight: bold; }
    .product-list-item .pricespan {
          font-size: 18px;
          color: #666;
          margin-left: 5px;
          font-weight: 300;
          text-decoration: line-through; }

      @media screen and (min-width: 320px) and (max-width: 767px) {
        .product-list-item .price {
          font-size: 0.48rem; } }
    .product-list-item .time {
      font-size: 14px;
      color: #999;
      margin: 5px 0 10px; }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .product-list-item .time {
          font-size: 0.32rem;
          margin: 0.2rem 0 0.4rem; } }
    .product-list-item button {
      width: 278px;
      height: 48px;
      background: #FA594B;
      border-radius: 10px;
      color: #FFF;
      font-size: 17px;
      font-weight: bold;
      transition: background-color .5s;
      cursor: pointer; }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .product-list-item button {
          font-size: 0.48rem; } }
    .product-list-item button:hover {
      background: #ff6f62; }





.special-title {
  font-size: 24px;
  color: 000;
  font-weight: bold;
  margin: 70px 0 30px;
  text-align: center; }

@media screen and (min-width: 992px) and (max-width: 1024px) {
  .special-list {
    padding: 0 60px; } }

@media screen and (min-width: 768px) and (max-width: 991px) {
  .special-list {
    padding: 0 31px; } }

@media screen and (min-width: 320px) and (max-width: 767px) {
  .special-list {
    padding: 0 0.50rem; } }

.special-list-item {
  width: 100%;
  min-height: 157px;
  height: auto;
  border: 2px solid #F0F0F0;
  border-radius: 20px;
  padding: 20px 32px;
  margin-bottom: 30px;
  position: relative;}
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .special-list-item {
      padding: 20px; } }
  @media screen and (min-width: 320px) and (max-width: 996px) {
    .special-list-item {
      display: flex;
      flex-direction: column;
      padding: 0.5rem 0.5rem;
      border-radius: 0.4rem;
      text-align: center; } }

  .special-list-item .angle-mark {
    position: absolute;
    top: 0;
    right: 0; }
    .special-list-item .angle-mark img {
      width: 80px; }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        .special-list-item .angle-mark img {
          width: 110px; } }

  .special-list-item-left {
    display: flex; }
    .special-list-item-left img {
      width: 164px;
      height: auto; }
      @media screen and (min-width: 768px) and (max-width: 991px) {
        .special-list-item-left img {
          width: auto;
          height: calc(131px / 2); } }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .special-list-item-left img {
          width: auto;
          height: 1.7rem; } }
  .special-list-item-in {
    flex: 1;
    margin: 0 30px 0 20px; }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .special-list-item-in {
        margin: 0; } }
    .special-list-item-in h4 {
      font-size: 20px;
      color: #000;
      font-weight: bold; }
      @media screen and (min-width: 992px) and (max-width: 1024px) {
        .special-list-item-in h4 {
          font-size: 18px; } }
      @media screen and (min-width: 768px) and (max-width: 991px) {
        .special-list-item-in h4 {
          margin: 35px 0 14px;
          line-height: 1.2; } }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .special-list-item-in h4 {
          font-size: 0.53rem;
          text-align: center;
          line-height: 1.2;
          margin: 0.98rem 0 0.57rem; } }
    .special-list-item-in p {
      font-size: 16px;
      color: #666;
      font-weight: 100; }
      @media screen and (min-width: 992px) and (max-width: 1024px) {
        .special-list-item-in p {
          font-size: 14px; } }
      @media screen and (min-width: 768px) and (max-width: 991px) {
        .special-list-item-in p {
          margin-bottom: 25px; } }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .special-list-item-in p {
          font-size: 0.4rem;
          text-align: center;
          margin-bottom: .5rem; } }
  .special-list-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    @media screen and (min-width: 320px) and (max-width: 991px) {
      .special-list-item-right {
        width: 100%; } }
    .special-list-item-right-img {
      display: flex; }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        .special-list-item-right-img {
          margin: 0 auto; } }
      .special-list-item-right-img img {
        cursor: pointer;
        width: 160px;
        height: auto;
        margin-left: 13px; }
        @media screen and (min-width: 768px) and (max-width: 1024px) {
          .special-list-item-right-img img {
            width: 169px;
            margin-top: 5px; } }
    .special-list-item-right p {
      text-align: center; }
      .special-list-item-right p span:nth-child(1) {
        color: #FA594B;
        font-size: 20px;
        font-weight: bold; }
      .special-list-item-right p span:nth-child(2) {
        color: #000;
        font-size: 14px;
        text-decoration: line-through;
        margin: 0 10px; }
      .special-list-item-right p span:nth-child(3) {
        color: #FE0000;
        font-size: 14px;
        font-weight: 100; }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .special-list-item-right-img {
        display: flex;
        flex-direction: column;
        align-items: center; }
        .special-list-item-right-img img {
          width: 7.92rem;
          height: auto;
          margin-top: 0.29rem;
          margin-left: 0; }
          .special-list-item-right-img img:nth-child(1) {
            margin-right: 0; } }
    .special-list-item-right .time {
      font-size: 14px;
      color: #999;
      font-weight: 100;
      margin: 0px 0 7px;
      text-align: center; }
    .special-list-item-right button {
      width: 278px;
      height: 48px;
      background: #FA594B;
      border-radius: 10px;
      font-size: 17px;
      color: #FFF;
      font-weight: bold;
      cursor: pointer;
      margin: 0 auto;
      transition: background-color .5s; }
    .special-list-item-right button:hover {
      background: #ff6f62; }

.special-list-item:last-child {
  margin-bottom: 80px; }

.w-advantage {
  padding-bottom: 92px; }
  @media screen and (min-width: 320px) and (max-width: 767px) {
    .w-advantage {
      padding-bottom: 0.93rem; } }
  .w-advantage-list {
    display: flex; }
    @media screen and (min-width: 992px) and (max-width: 1024px) {
      .w-advantage-list {
        padding: 0 60px;
        flex-wrap: wrap; } }
    @media screen and (min-width: 768px) and (max-width: 991px) {
      .w-advantage-list {
        padding: 0 31px;
        flex-wrap: wrap; } }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .w-advantage-list {
        padding: 0 0.53rem;
        flex-direction: column; } }
    .w-advantage-list-item {
      width: calc(100% / 3.15);
      height: 316px;
      border: 2px solid #EFEFEF;
      border-radius: 15px;
      margin-right: 38px;
      text-align: center;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: all .4s; }
      @media screen and (min-width: 1024px) {
        .w-advantage-list-item:nth-child(3n + 0) {
          margin-right: 0; } }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        .w-advantage-list-item {
          width: calc(100% / 2 - 19px);
          height: calc(88.5vw / 2 - 19px);
          margin-bottom: 38px; }
          .w-advantage-list-item:nth-child(2n + 0) {
            margin-right: 0; } }
      .w-advantage-list-item img {
        width: calc(84px / 2);
        height: auto; }
      .w-advantage-list-item h4 {
        color: #555;
        font-size: 18px;
        height: 40px;
        margin: 25px 10px 19px; }
      .w-advantage-list-item p {
        color: #555;
        height: 72px;
        font-size: 16px; }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .w-advantage-list-item {
          width: 100%;
          height: 6.06rem;
          margin-right: 0;
          margin-bottom: 0.64rem;
          justify-content: flex-start;
          padding-top: 1.28rem; }
          .w-advantage-list-item h4 {
            font-size: 0.42rem;
            margin: 0.5rem 0 0.3rem; }
          .w-advantage-list-item p {
            margin: 0 10px;
            font-size: 0.37rem; }
          .w-advantage-list-item img {
            width: 1.12rem; } }

      @media screen and (min-width: 768px) and (max-width: 1024px) {
        .w-advantage-list-item p {
            margin: 0 10px;}
      }