img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; }

.common_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1; }

.common_title {
  text-align: center; }
  .common_title .p1 {
    color: #000;
    font-style: normal;
    font-weight: bold;
    line-height: 2.0833333333vw;
    /* 100% */ }
  .common_title .line {
    width: 5.9895833333vw;
    height: 1px;
    background: #000000;
    margin: 1.4583333333vw auto 2.0833333333vw; }
  .common_title .text {
    color: #666;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 32.4px */ }

.section1 {
  padding: 5.2083333333vw 4.1666666667vw 5.2083333333vw 4.1666666667vw;
  display: flex;
  gap: 0 4.1666666667vw; }
  .section1 .l {
    width: 56.6666666667vw;
    height: 31.25vw;
    position: relative; }
    .section1 .l .cut {
      position: absolute;
      top: 2.0833333333vw;
      left: 2.0833333333vw;
      z-index: 5;
      display: flex;
      gap: 0 0.625vw; }
      .section1 .l .cut .list {
        display: flex;
        padding: 1.0416666667vw 1.6666666667vw;
        justify-content: center;
        align-items: center;
        color: #000;
        font-style: normal;
        font-weight: 400;
        line-height: 1.25vw;
        /* 133.333% */
        transition: .6s ease;
        background: #fff;
        cursor: pointer;
        border-radius: 10px; }
        .section1 .l .cut .list.on {
          background: #0F927B;
          color: #fff; }
    .section1 .l .img {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1; }
      .section1 .l .img img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        transition: .6s ease; }
        .section1 .l .img img.on {
          opacity: 1;
          pointer-events: auto; }
  .section1 .r {
    margin: 5.2083333333vw 0 0 0; }
    .section1 .r .box {
      display: none; }
      .section1 .r .box.on {
        display: block; }
    .section1 .r .list {
      display: flex; }
      .section1 .r .list:not(:last-child) {
        margin: 0 0 3.125vw; }
      .section1 .r .list .icon {
        width: 1.1458333333vw;
        height: 1.3020833333vw;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0.5208333333vw 1.25vw 0 0; }
        .section1 .r .list .icon img {
          object-fit: contain; }
      .section1 .r .list .text .p1 {
        color: #000;
        font-style: normal;
        margin: 0 0 0.625vw;
        font-weight: bold; }
      .section1 .r .list .text .p2 {
        color: #333;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
        /* 155.556% */ }
        .section1 .r .list .text .p2 span {
          text-decoration: underline; }

.section2 {
  padding: 0 4.1666666667vw 3.6458333333vw 4.1666666667vw; }
  .section2 .content {
    margin: 3.125vw 0 0 0;
    display: flex;
    justify-content: space-between; }
    .section2 .content .l {
      height: fit-content; }
      .section2 .content .l .p1 {
        color: #000;
        font-style: normal;
        line-height: normal;
        margin: 0 0 2.0833333333vw;
        font-weight: bold; }
      .section2 .content .l .p2 {
        color: #000;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
        /* 28.8px */ }
    .section2 .content .r {
      display: flex;
      gap: 0 1.0416666667vw;
      position: relative;
      z-index: 1; }
      .section2 .content .r:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
        top: 0.78125vw;
        left: 0; }
      .section2 .content .r .item {
        width: 20.8333333333vw; }
        .section2 .content .r .item .num {
          display: flex;
          width: 1.6666666667vw;
          height: 1.6666666667vw;
          justify-content: center;
          align-items: center;
          border-radius: 0.3125vw;
          border: 1px solid #000;
          background: #000;
          color: #FFF;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          margin: 0 0 0.8333333333vw; }
        .section2 .content .r .item .p1 {
          color: #000;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          margin: 0 0 0.8333333333vw; }
        .section2 .content .r .item ul li {
          color: #333;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
          /* 24px */
          list-style: unset;
          list-style: disc;
          position: relative;
          left: 1.0416666667vw; }
        .section2 .content .r .item .img {
          margin: 2.0833333333vw 0 0 0;
          width: 100%;
          height: 31.25vw;
          overflow: hidden; }
          .section2 .content .r .item .img:hover img {
            transform: scale(1.05); }
          .section2 .content .r .item .img img {
            width: 100%;
            height: 100%;
            transition: .6s ease; }
  .section2 .content2 {
    padding: 0 2.96875vw 0 23.8541666667vw;
    display: flex;
    justify-content: space-between;
    margin: 6.7708333333vw 0 0 0; }
    .section2 .content2 .l {
      position: relative;
      padding: 0.2604166667vw 0 0 0; }
      .section2 .content2 .l .numSwiper {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        width: 100%; }
      .section2 .content2 .l:after {
        content: '';
        width: 1px;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        border-left: 1px dashed rgba(0, 0, 0, 0.2);
        position: absolute; }
      .section2 .content2 .l .flex {
        width: 13.5416666667vw;
        display: flex;
        justify-content: flex-end;
        position: relative;
        z-index: 52; }
        .section2 .content2 .l .flex:nth-child(2n) {
          justify-content: unset; }
          .section2 .content2 .l .flex:nth-child(2n) .item .circle {
            right: -1.875vw;
            left: unset; }
          .section2 .content2 .l .flex:nth-child(2n) .item .position {
            left: unset;
            right: calc(100% + 0.625vw);
            flex-direction: row-reverse; }
            .section2 .content2 .l .flex:nth-child(2n) .item .position .text {
              text-align: right; }
        .section2 .content2 .l .flex:not(:last-child) {
          margin: 0 0 1.4583333333vw; }
        .section2 .content2 .l .flex .item {
          display: flex;
          align-items: center;
          gap: 0 0.46875vw;
          position: relative; }
          .section2 .content2 .l .flex .item.on .position {
            opacity: 1;
            pointer-events: auto; }
          .section2 .content2 .l .flex .item.on .circle:after {
            transform: translate(-50%, -50%) scale(1.7);
            background: #0F927B; }
          .section2 .content2 .l .flex .item.on .p1, .section2 .content2 .l .flex .item.on .num {
            color: #0F927B; }
          .section2 .content2 .l .flex .item .position {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: calc(100% + 0.625vw);
            display: flex;
            align-items: center;
            gap: 0 0.5208333333vw;
            opacity: 0;
            pointer-events: none;
            transition: .6s ease; }
            .section2 .content2 .l .flex .item .position .text {
              color: #333;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              width: 13.5416666667vw; }
            .section2 .content2 .l .flex .item .position .img {
              width: 9.7916666667vw;
              height: 6.0416666667vw;
              overflow: hidden; }
              .section2 .content2 .l .flex .item .position .img:hover img {
                transform: scale(1.05); }
              .section2 .content2 .l .flex .item .position .img img {
                width: 100%;
                height: 100%;
                transition: .6s ease; }
          .section2 .content2 .l .flex .item .circle {
            width: 0.7291666667vw;
            height: 0.7291666667vw;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -1.9791666667vw;
            z-index: 2; }
            .section2 .content2 .l .flex .item .circle:after {
              width: 100%;
              height: 100%;
              background: #D9D9D9;
              border: 0.1041666667vw solid #fff;
              border-radius: 50%;
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: .6s ease; }
          .section2 .content2 .l .flex .item .num {
            color: #000;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            transition: .6s ease; }
          .section2 .content2 .l .flex .item .p1 {
            color: #000;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            transition: .6s ease; }
    .section2 .content2 .r .p1 {
      color: #000;
      font-style: normal;
      line-height: normal;
      margin: 0 0 2.0833333333vw;
      font-weight: bold; }
    .section2 .content2 .r .p2 {
      color: #000;
      font-style: normal;
      font-weight: 400;
      line-height: 180%;
      /* 28.8px */ }

.section3 {
  padding: 3.125vw 4.1666666667vw 5.2083333333vw 4.1666666667vw;
  background: #F7F7F7;
  overflow: hidden; }
  .section3 .cut {
    margin: 3.125vw 0 0 0;
    display: flex;
    gap: 0 4.1666666667vw; }
    .section3 .cut .list {
      cursor: pointer;
      color: #000;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      transition: .6s ease; }
      .section3 .cut .list.on {
        color: #0F927B; }
  .section3 .cut2 {
    margin: 1.0416666667vw 0 0 0;
    display: flex;
    gap: 0 2.0833333333vw; }
    .section3 .cut2 .list {
      color: #000;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      cursor: pointer;
      transition: .6s ease; }
      .section3 .cut2 .list.on {
        color: #0F927B; }
  .section3 .grid {
    margin: 4.1666666667vw 0 0 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.9375vw;
    position: relative;
    z-index: 99; }
    .section3 .grid .item {
      width: 100%;
      position: relative; }
      .section3 .grid .item.on .show {
        border: 1px solid #0F927B;
        background: #0F927B; }
        .section3 .grid .item.on .show .p1 {
          color: #fff; }
        .section3 .grid .item.on .show .dis .p2 {
          color: #fff; }
        .section3 .grid .item.on .show .dis svg {
          transform: rotate(0); }
        .section3 .grid .item.on .show .dis svg path {
          fill: #fff; }
      .section3 .grid .item.on .hide {
        opacity: 1;
        pointer-events: auto; }
      .section3 .grid .item .hide {
        position: absolute;
        top: 100%;
        left: 0;
        display: inline-flex;
        padding: 1.0416666667vw;
        flex-direction: column;
        align-items: flex-start;
        background: #FFF;
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
        height: 28.125vw;
        overflow: hidden;
        overflow-y: scroll;
        opacity: 0;
        pointer-events: none;
        transition: 1s;
        z-index: 5; }
        .section3 .grid .item .hide .list {
          display: flex;
          width: 9.375vw;
          height: 2.6041666667vw;
          padding: 1.0416666667vw 0px;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 16px;
          color: #000;
          font-size: 0.8333333333vw;
          font-style: normal;
          font-weight: 400;
          transition: .6s ease;
          cursor: pointer; }
          .section3 .grid .item .hide .list.on, .section3 .grid .item .hide .list:hover {
            background: rgba(15, 146, 123, 0.1);
            color: #0F927B; }
      .section3 .grid .item .show {
        width: 100%;
        height: 10.625vw;
        border: 1px solid #FFF;
        background: #FFF;
        cursor: pointer;
        padding: 3.0729166667vw 0 0 0;
        text-align: center;
        transition: .6s ease; }
        .section3 .grid .item .show .p1 {
          color: #000;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin: 0 0 0.8333333333vw;
          transition: .6s ease; }
        .section3 .grid .item .show .dis {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          left: 0.8333333333vw;
          gap: 0 0.4166666667vw; }
          .section3 .grid .item .show .dis .p2 {
            color: #000;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            transition: .6s ease; }
          .section3 .grid .item .show .dis svg {
            width: 1.25vw;
            height: 1.25vw;
            transform: rotate(180deg);
            transition: .6s ease; }
            .section3 .grid .item .show .dis svg path {
              fill: #000;
              transition: .6s ease; }
  .section3 .content {
    margin: 4.6875vw 0 0 0;
    display: flex;
    justify-content: space-between;
    padding: 0 7.3958333333vw 0 0; }
    .section3 .content .r {
      margin: 8.9583333333vw 0 0 0; }
      .section3 .content .r .p1 {
        color: #000;
        font-style: normal;
        font-weight: bold;
        line-height: normal;
        margin: 0 0 0.8333333333vw; }
      .section3 .content .r .p2 {
        color: #000;
        font-style: normal;
        font-weight: 400;
        line-height: normal; }
    .section3 .content .l {
      display: flex;
      gap: 0 2.0833333333vw; }
      .section3 .content .l .item {
        width: 20.8333333333vw; }
        .section3 .content .l .item:nth-child(2) {
          margin: 5.4166666667vw 0 0 0; }
        .section3 .content .l .item .itemSwiper {
          width: 100%;
          height: 31.25vw; }
          .section3 .content .l .item .itemSwiper .swiper-slide {
            overflow: hidden; }
            .section3 .content .l .item .itemSwiper .swiper-slide:hover img {
              transform: scale(1.05); }
            .section3 .content .l .item .itemSwiper .swiper-slide img {
              width: 100%;
              height: 100%;
              transition: .6s ease; }
        .section3 .content .l .item .text {
          margin: 1.0416666667vw 0 0 0;
          display: flex;
          align-items: center;
          justify-content: space-between; }
          .section3 .content .l .item .text .p1 {
            color: #000;
            font-style: normal;
            font-weight: 500;
            line-height: normal; }
          .section3 .content .l .item .text .swiper-pagination {
            position: static;
            width: fit-content;
            display: flex;
            align-items: center; }
            .section3 .content .l .item .text .swiper-pagination span {
              width: 1.71875vw;
              height: 0.2604166667vw;
              background: rgba(0, 0, 0, 0.2);
              opacity: 1 !important;
              margin: 0 1.0416666667vw 0 0 !important;
              border-radius: 0.3645833333vw;
              transition: .3s ease; }
              .section3 .content .l .item .text .swiper-pagination span:last-child {
                margin: 0 !important; }
              .section3 .content .l .item .text .swiper-pagination span.swiper-pagination-bullet-active {
                background: #000;
                width: 3.75vw; }

.section4 {
  padding: 3.125vw 4.1666666667vw 10.4166666667vw 4.1666666667vw; }
  .section4 .headline {
    margin: 3.125vw 0 0 0; }
    .section4 .headline .p1 {
      color: #000;
      font-style: normal;
      font-weight: 600;
      line-height: normal; }
    .section4 .headline .p2 {
      color: #000;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin: 0.8333333333vw 0 0 0; }
  .section4 .center {
    width: 100%;
    height: 46.3020833333vw;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 7.8125vw;
    margin: 2.0833333333vw 0 0 0; }
    .section4 .center:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.4); }
    .section4 .center .item {
      display: flex;
      width: 21.1458333333vw;
      padding: 3.125vw 4.2291666667vw;
      flex-direction: column;
      align-items: center;
      gap: 3.125vw;
      border-radius: 0.2083333333vw;
      background: #FFF;
      text-align: center;
      position: relative;
      z-index: 2; }
      .section4 .center .item .p1 {
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        color: #333; }
        .section4 .center .item .p1 span {
          color: #0F927B; }
      .section4 .center .item .p2 {
        width: 13.4166666667vw;
        margin: auto;
        color: #000;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
        /* 28.8px */ }
  .section4 .content {
    position: relative;
    margin: 6.25vw 0 0 0;
    z-index: 1; }
    .section4 .content .line {
      width: calc(100% + 4.16vw);
      max-width: unset;
      position: relative;
      left: -4.16vw; }
    .section4 .content .position {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none; }
      .section4 .content .position .item1 {
        top: -3.75vw;
        left: 4.7916666667vw; }
      .section4 .content .position .item2 {
        top: -3.75vw;
        left: 33.6979166667vw; }
      .section4 .content .position .item3 {
        top: -3.75vw;
        left: 60.3645833333vw; }
      .section4 .content .position .item4 {
        top: 10.8333333333vw;
        left: 73.1770833333vw; }
      .section4 .content .position .item5 {
        top: 10.8333333333vw;
        left: 45.4166666667vw; }
      .section4 .content .position .item6 {
        top: 10.8333333333vw;
        left: 16.4583333333vw; }
      .section4 .content .position .item7 {
        top: 25.3645833333vw;
        left: 20.0520833333vw; }
      .section4 .content .position .item {
        position: absolute;
        text-align: center;
        pointer-events: auto; }
        .section4 .content .position .item .p1 {
          color: #000;
          font-style: normal;
          font-weight: 600;
          line-height: normal; }
        .section4 .content .position .item .circle {
          width: 1.25vw;
          height: 1.25vw;
          border-radius: 50%;
          background: #0F927B;
          position: relative;
          z-index: 1;
          margin: 1.3020833333vw auto 0; }
          .section4 .content .position .item .circle:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: #0F927B;
            opacity: .7;
            animation: scaleAnimate 1s linear infinite; }
        .section4 .content .position .item .p2 {
          width: 19.4270833333vw;
          color: #666;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin: 0.8333333333vw auto 0; }
  .section4 .content2 {
    margin: 10.4166666667vw 0 0 0;
    position: relative;
    z-index: 1;
    padding: 5.2083333333vw 0;
    display: flex;
    align-items: center;
    justify-content: center; }
    .section4 .content2 .joke {
      width: 64.5833333333vw;
      background: #fff;
      border-radius: 0.5208333333vw;
      padding: 60px 4.1666666667vw; }
      .section4 .content2 .joke .title {
        color: #000;
        font-style: normal;
        font-weight: 600;
        line-height: normal; }
      .section4 .content2 .joke form {
        margin: 1.8229166667vw 0 0 0; }
        .section4 .content2 .joke form .flex {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 2.2916666667vw 0; }
          .section4 .content2 .joke form .flex .item {
            width: 26.3541666667vw;
            position: relative; }
            .section4 .content2 .joke form .flex .item.textarea {
              width: 100%; }
            .section4 .content2 .joke form .flex .item .p1 {
              color: #000;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              margin: 0 0 0.8333333333vw; }
            .section4 .content2 .joke form .flex .item input {
              width: 100%;
              height: 2.7083333333vw;
              background: transparent;
              border: 1px solid rgba(0, 0, 0, 0.2);
              border-radius: 1.5625vw;
              padding: 0 1.3541666667vw;
              font-size: 0.8333333333vw;
              font-style: normal;
              font-weight: 300;
              color: #000; }
              .section4 .content2 .joke form .flex .item input::placeholder {
                color: rgba(0, 0, 0, 0.6); }
            .section4 .content2 .joke form .flex .item textarea {
              width: 100%;
              height: 6.6145833333vw;
              background: transparent;
              border: 1px solid rgba(0, 0, 0, 0.2);
              border-radius: 1.5625vw;
              padding: 0.9375vw 1.3541666667vw;
              font-size: 0.8333333333vw;
              font-style: normal;
              font-weight: 300;
              color: #000;
              resize: none; }
              .section4 .content2 .joke form .flex .item textarea::placeholder {
                color: rgba(0, 0, 0, 0.6); }
            .section4 .content2 .joke form .flex .item .bor {
              cursor: pointer; }
              .section4 .content2 .joke form .flex .item .bor.on .hide {
                opacity: 1;
                pointer-events: auto; }
              .section4 .content2 .joke form .flex .item .bor .show {
                width: 100%;
                height: 2.7083333333vw;
                background: transparent;
                border: 1px solid rgba(0, 0, 0, 0.2);
                border-radius: 1.5625vw;
                padding: 0 1.3541666667vw;
                display: flex;
                align-items: center;
                justify-content: space-between; }
                .section4 .content2 .joke form .flex .item .bor .show p {
                  font-style: normal;
                  font-weight: 300;
                  color: rgba(0, 0, 0, 0.6); }
                .section4 .content2 .joke form .flex .item .bor .show svg {
                  width: 0.9375vw;
                  height: 0.9375vw; }
              .section4 .content2 .joke form .flex .item .bor .hide {
                position: absolute;
                width: 100%;
                left: 0;
                top: calc(100% + 15px);
                border: 1px solid rgba(0, 0, 0, 0.2);
                border-radius: 20px;
                background: #fff;
                z-index: 5;
                padding: 0.78125vw 0;
                overflow: hidden;
                opacity: 0;
                pointer-events: none;
                transition: .6s ease; }
                .section4 .content2 .joke form .flex .item .bor .hide .list {
                  color: rgba(0, 0, 0, 0.6);
                  font-style: normal;
                  font-weight: bold;
                  line-height: 1.5625vw;
                  /* 100% */
                  padding: 0.2604166667vw 1.0416666667vw;
                  transition: .6s ease; }
                  .section4 .content2 .joke form .flex .item .bor .hide .list:hover {
                    color: #0F927B; }
        .section4 .content2 .joke form .other {
          margin: 2.0833333333vw 0 0 0;
          display: flex;
          justify-content: space-between; }
          .section4 .content2 .joke form .other .l .p1 {
            overflow: hidden;
            color: #000;
            text-overflow: ellipsis;
            font-style: normal;
            font-weight: 300;
            text-transform: capitalize;
            margin: 0 0 1.3541666667vw; }
          .section4 .content2 .joke form .other .l .dis {
            display: flex;
            gap: 0 11.25vw; }
            .section4 .content2 .joke form .other .l .dis .list p {
              color: rgba(0, 0, 0, 0.6);
              font-style: normal;
              font-weight: 400;
              line-height: 150%;
              /* 21px */
              text-transform: capitalize; }
          .section4 .content2 .joke form .other .more {
            display: flex;
            height: fit-content;
            border: none;
            padding: 0.6770833333vw 1.3020833333vw;
            justify-content: center;
            align-items: center;
            gap: 0.625vw;
            border-radius: 9999px;
            background: #0F927B;
            cursor: pointer; }
            .section4 .content2 .joke form .other .more p {
              color: #FFF;
              font-style: normal;
              font-weight: 400; }
            .section4 .content2 .joke form .other .more svg {
              width: 0.6770833333vw; }

@keyframes scaleAnimate {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: .7; }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0; } }
@media screen and (max-width: 1024px) {
  .common_title .p1 {
    line-height: unset; }
  .common_title .text br {
    display: none; }
  .common_title .line {
    width: 70px;
    margin: 15px auto 25px; }

  .section1 {
    padding: 50px 5%;
    flex-direction: column; }
    .section1 .l {
      width: 100%;
      height: 300px; }
      .section1 .l .cut {
        top: 20px;
        left: 20px;
        gap: 0 10px; }
        .section1 .l .cut .list {
          height: 40px;
          width: fit-content;
          padding: 15px 10px; }
    .section1 .r {
      margin: 20px 0 0 0; }
      .section1 .r .list {
        flex-direction: column; }
        .section1 .r .list .icon {
          width: 30px;
          height: 30px;
          margin: 0 0 15px; }

  .section2 {
    padding: 0 5%;
    overflow: hidden; }
    .section2 .content {
      flex-direction: column; }
      .section2 .content .r {
        margin: 30px 0 0 0;
        flex-direction: column; }
        .section2 .content .r:after {
          display: none; }
        .section2 .content .r .item {
          width: 100%; }
          .section2 .content .r .item:not(:last-child) {
            margin: 0 0 40px; }
          .section2 .content .r .item .num {
            width: 25px;
            height: 25px;
            border-radius: 5px;
            margin: 0 0 15px; }
          .section2 .content .r .item .p1 {
            margin: 0 0 15px; }
          .section2 .content .r .item ul li {
            left: 20px; }
          .section2 .content .r .item .img {
            height: 300px;
            margin: 22px 0 0 0; }
    .section2 .content2 {
      padding: 0;
      margin: 45px 0 0 0;
      flex-direction: column-reverse; }
      .section2 .content2 .l:after {
        display: none; }
      .section2 .content2 .l .flex {
        width: 100%;
        justify-content: unset !important; }
        .section2 .content2 .l .flex:not(:last-child) {
          margin: 0 0 35px; }
        .section2 .content2 .l .flex .item {
          width: 100%;
          gap: 0;
          flex-direction: column;
          align-items: unset; }
          .section2 .content2 .l .flex .item .p1 {
            margin: 5px 0 10px; }
          .section2 .content2 .l .flex .item .circle {
            display: none; }
          .section2 .content2 .l .flex .item .position {
            position: static;
            flex-direction: column !important;
            opacity: 1;
            transform: none;
            width: 100%; }
            .section2 .content2 .l .flex .item .position .text {
              width: 100%;
              text-align: left !important; }
            .section2 .content2 .l .flex .item .position .img {
              width: 100%;
              height: auto;
              margin: 20px 0 0 0; }
      .section2 .content2 .r {
        margin: 30px 0 45px 0; }
        .section2 .content2 .r .p1 {
          margin: 0 0 15px; }

  .section3 {
    padding: 55px 5%; }
    .section3 .cut {
      margin: 30px 0 0;
      gap: 0 15px; }
    .section3 .cut2 {
      margin: 30px 0 0 0;
      gap: 0 25px; }
    .section3 .grid {
      margin: 30px 0 0 0;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px; }
      .section3 .grid .item .show {
        height: auto;
        padding: 20px 0; }
        .section3 .grid .item .show .p1 {
          margin: 0 0 7px; }
        .section3 .grid .item .show .dis {
          gap: 0 10px; }
          .section3 .grid .item .show .dis svg {
            width: 20px;
            height: 20px; }
      .section3 .grid .item .hide {
        width: 100%;
        padding: 10px;
        height: 350px; }
        .section3 .grid .item .hide .list {
          width: 100%;
          padding: 10px 0;
          gap: 15px;
          height: auto;
          font-size: 15px;
          line-height: 30px; }
    .section3 .content {
      margin: 30px 0 0 0;
      padding: 0;
      flex-direction: column-reverse; }
      .section3 .content .r .p1 {
        margin: 0 0 10px; }
      .section3 .content .l {
        flex-direction: column;
        gap: 20px; }
        .section3 .content .l .item {
          width: 100%;
          margin: 30px 0 0 0; }
          .section3 .content .l .item .itemSwiper {
            height: 250px; }
          .section3 .content .l .item .text {
            margin: 20px 0 0 0; }
            .section3 .content .l .item .text .swiper-pagination span {
              width: 25px;
              height: 3px;
              margin: 0 7px 0 0 !important;
              border-radius: 7px; }
              .section3 .content .l .item .text .swiper-pagination span:last-child {
                margin: 0 !important; }
              .section3 .content .l .item .text .swiper-pagination span.swiper-pagination-bullet-active {
                width: 40px; }

  .section4 {
    padding: 50px 5%; }
    .section4 .headline {
      margin: 40px 0 0 0; }
      .section4 .headline .p1 {
        margin: 0 0 10px; }
    .section4 .center {
      padding: 40px 0;
      height: auto;
      flex-direction: column;
      gap: 20px;
      margin: 40px 0; }
      .section4 .center .item {
        width: 90%;
        height: auto;
        padding: 26px 5%; }
        .section4 .center .item .p2 {
          width: 100%; }
    .section4 .content {
      flex-direction: column;
      margin: 40px 0 0 0; }
      .section4 .content .line {
        display: none; }
      .section4 .content .position {
        position: static;
        margin: 20px 0 0 0; }
        .section4 .content .position .item {
          position: static;
          width: 100%;
          text-align: left; }
          .section4 .content .position .item:not(:last-child) {
            margin: 0 0 30px; }
          .section4 .content .position .item .circle {
            display: none; }
          .section4 .content .position .item .p2 {
            width: 100%;
            margin: 20px 0 0 0; }
    .section4 .content2 {
      margin: 55px 0 0 0;
      padding: 10px; }
      .section4 .content2 .joke {
        width: 100%;
        height: auto;
        padding: 30px; }
        .section4 .content2 .joke form {
          margin: 25px 0 0 0; }
          .section4 .content2 .joke form .flex {
            flex-direction: column;
            gap: 30px; }
            .section4 .content2 .joke form .flex .item {
              width: 100%; }
              .section4 .content2 .joke form .flex .item .p1 {
                margin: 0 0 10px; }
              .section4 .content2 .joke form .flex .item input {
                width: 100%;
                height: 50px;
                border-radius: 25px;
                padding: 0 15px;
                font-size: 14px; }
              .section4 .content2 .joke form .flex .item .bor .show {
                width: 100%;
                height: 50px;
                border-radius: 25px;
                padding: 0 15px;
                font-size: 14px; }
                .section4 .content2 .joke form .flex .item .bor .show p {
                  font-size: 14px; }
                .section4 .content2 .joke form .flex .item .bor .show svg {
                  width: 20px;
                  height: 20px; }
              .section4 .content2 .joke form .flex .item .bor .hide {
                padding: 10px 0;
                border-radius: 25px; }
                .section4 .content2 .joke form .flex .item .bor .hide .list {
                  font-size: 12px;
                  line-height: 30px;
                  padding: 0 5%; }
              .section4 .content2 .joke form .flex .item textarea {
                height: 150px;
                width: 100%;
                border-radius: 20px;
                padding: 15px 15px;
                font-size: 14px; }
          .section4 .content2 .joke form .other {
            margin: 30px 0 0 0;
            flex-direction: column; }
            .section4 .content2 .joke form .other .l .p1 {
              font-size: 16px;
              margin: 0 0 20px; }
            .section4 .content2 .joke form .other .l .dis {
              gap: 10px 0;
              flex-direction: column; }
              .section4 .content2 .joke form .other .l .dis .list p {
                font-size: 12px; }
            .section4 .content2 .joke form .other .more {
              width: fit-content;
              height: 45px;
              padding: 0 25px;
              gap: 0 7px;
              margin: 25px 0 0 0; }
              .section4 .content2 .joke form .other .more p {
                font-size: 13px; }
              .section4 .content2 .joke form .other .more svg {
                width: 15px;
                height: 15px; } }
.kf_box {
  z-index: 999; }

/*# sourceMappingURL=contact.css.map */