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
}

.proInfo1 {
  position: relative
}

.proInfo1 .img {
  width: 100%
}

.proInfo1 .back {
  position: absolute;
  left: 16.61458vw;
  bottom: 4.73958vw;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px
}

.proInfo1 .back svg {
  width: .9375vw;
  height: .9375vw
}

.proInfo1 .back p {
  color: #00378A;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.12px;
  text-transform: uppercase
}

.proInfo2 {
  padding: 2.39583vw 8.33333vw 5.73958vw 14.375vw
}

.proInfo2 .cut {
  display: flex;
  gap: .98958vw
}

.proInfo2 .cut .list {
  /* width: 9.47917vw; */
  width: fit-content;
  padding: 0 10px;
  height: 3.33333vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2.86458vw;
  border: 1px solid #00378A;
  background: #FFF;
  box-shadow: 0 0 15px 0 rgba(0, 55, 138, 0.4);
  color: #00378A;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  cursor: pointer;
  transition: .6s ease
}

.proInfo2 .cut .list.on,
.proInfo2 .cut .list:hover {
  border: 1px solid #00378A;
  background: #00378A;
  color: #fff
}

.proInfo2 .content {
  margin: 6.25vw 0 0 0;
  display: flex;
  justify-content: space-between
}

.proInfo2 .content .l .dis {
  display: flex;
  align-items: flex-end;
  gap: 1.14583vw;
  margin: 0 0 6.97917vw
}

.proInfo2 .content .l .dis img {
  width: 7.91667vw
}

.proInfo2 .content .l .dis p {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 500;
  line-height: normal
}

.proInfo2 .content .l .img {
  width: 18.64583vw
}

.proInfo2 .content .l .img img {
  width: 100%
}

.proInfo2 .content [data-lenis-prevent]::-webkit-scrollbar {
  width: .26042vw;
  display: block
}

.proInfo2 .content [data-lenis-prevent]::-webkit-scrollbar-thumb {
  background: #0D4E90;
  border-radius: .3125vw
}

.proInfo2 .content [data-lenis-prevent]::-webkit-scrollbar-track {
  background: rgba(13, 78, 144, 0.2);
  border-radius: .3125vw
}

.proInfo2 .content .r {
  max-height: 27.55208vw;
  padding: 0 4.21875vw 0 0;
  overflow: hidden;
  overflow-y: auto
}

.proInfo2 .content .r .item {
  width: 40.83333vw;
  border-radius: 1.66667vw;
  background: #F6F6F6;
  padding: 1.5625vw 2.86458vw;
  position: relative;
  z-index: 1
}

.proInfo2 .content .r .item:not(:last-child) {
  margin: 0 0 1.51042vw
}

.proInfo2 .content .r .item .bg {
  position: absolute;
  right: 1.25vw;
  top: 50%;
  transform: translateY(-50%);
  width: 13.125vw
}

.proInfo2 .content .r .item .p1 {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0 0 .83333vw
}

.proInfo2 .content .r .item .p2 {
  color: #666;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.proInfo3 {
  padding: 0 8.59375vw 9.6875vw 8.38542vw
}

.proInfo3 .img {
  width: 100%;
  height: 36.45833vw;
  border-radius: 1.66667vw;
  background: rgba(217, 217, 217, 0.6)
}

.proInfo3 .img img {
  width: 100%;
  height: 100%
}

.proInfo4 {
  padding: 0 8.36458vw 5.96875vw 10.67708vw;
  display: flex;
  justify-content: space-between
}

.proInfo4 .l {
  width: 31.25vw
}

.proInfo4 .l .title {
  color: #666;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 500;
  margin: 0 0 2.03125vw
}

.proInfo4 .l .img {
  width: 100%;
  height: 23.22917vw;
  border-radius: 1.25vw;
  background: rgba(217, 217, 217, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 2.60417vw
}

.proInfo4 .l .img img {
  max-width: 90%;
  max-height: 90%
}

.proInfo4 .l .label {
  text-align: center;
  margin: 0 0 1.45833vw;
  width: 100%;
  height: 3.33333vw;
  border-radius: 1.66667vw;
  background: rgba(217, 217, 217, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(90, 90, 90, 0.8);
  font-style: normal;
  font-weight: 500;
  line-height: normal
}

.proInfo4 .l .label2 {
  border-radius: 1.66667vw;
  background: rgba(217, 217, 217, 0.2);
  padding: 1.66667vw 2.55208vw;
  opacity: 0;
  pointer-events: none;
  transition: .6s ease;
  text-align: center
}

.proInfo4 .l .label2.on {
  opacity: 1;
  pointer-events: none
}

.proInfo4 .l .label2 p {
  color: rgba(90, 90, 90, 0.8);
  font-style: normal;
  font-weight: 500;
  line-height: normal
}

.proInfo4 .l .label2 p:not(:last-child) {
  margin: 0 0 1.45833vw
}

.proInfo4 .r {
  width: 46.14583vw
}

.proInfo4 .r .p1 {
  color: #0D4E90;
  font-style: normal;
  font-weight: 500;
  margin: 0 0 1.04167vw;
  padding: 0 0 0 3.69792vw;
}

.proInfo4 .r table {
  width: 100%
}

.proInfo4 .r table tr td {
  padding: 0 0 1.71875vw;
  vertical-align: top;
  word-break: keep-all !important;
}

.proInfo4 .r table tr td:first-child {
  padding: 0 1.04167vw 1.71875vw 3.69792vw
}

.proInfo4 .r table tr td .text {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  max-width: 31.875vw
}

@media (min-width:769px) {
  .proInfo4 .r .table-container {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 48.4375vw;
    padding: 0 2.21875vw 0 0;
  }

  .proInfo4 .r [data-lenis-prevent]::-webkit-scrollbar {
    width: .26042vw;
    display: block
  }

  .proInfo4 .r [data-lenis-prevent]::-webkit-scrollbar-thumb {
    background: #0D4E90;
    border-radius: .3125vw
  }

  .proInfo4 .r [data-lenis-prevent]::-webkit-scrollbar-track {
    background: rgba(13, 78, 144, 0.2);
    border-radius: .3125vw
  }
}

.proInfo4 .r table tr td .text span {
  color: #0D4E90;
  white-space: nowrap;
}

.proInfo4 .phone_box {
  display: none
}

.proInfo4 .phone_box .label {
  text-align: center;
  margin: 0 0 1.45833vw;
  width: 100%;
  height: 3.33333vw;
  border-radius: 1.66667vw;
  background: rgba(217, 217, 217, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(90, 90, 90, 0.8);
  font-style: normal;
  font-weight: 500;
  line-height: normal
}

.proInfo4 .phone_box .label2 {
  border-radius: 1.66667vw;
  background: rgba(217, 217, 217, 0.2);
  padding: 1.66667vw 2.55208vw;
  opacity: 0;
  pointer-events: none;
  transition: .6s ease;
  text-align: center
}

.proInfo4 .phone_box .label2.on {
  opacity: 1;
  pointer-events: inherit
}

.proInfo4 .phone_box .label2 p {
  color: rgba(90, 90, 90, 0.8);
  font-style: normal;
  font-weight: 500;
  line-height: normal
}

.proInfo4 .phone_box .label2 p:not(:last-child) {
  margin: 0 0 1.45833vw
}

.proInfo5 {
  padding: 0 0 7.60417vw;
  overflow: hidden
}

.proInfo5 .title {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 0 0 0 9.375vw
}

.proInfo5 .content {
  margin: 3.85417vw 0 0 0
}

.proInfo5 .content .swiper-pagination {
  width: 33.85417vw;
  height: .36458vw;
  border-radius: .46875vw;
  background: rgba(13, 78, 144, 0.2);
  margin: 5.98958vw auto 0;
  position: static
}

.proInfo5 .content .swiper-pagination span {
  border-radius: inherit;
  background: #0D4E90
}

.proInfo5 .content .swiper1 {
  width: 125vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  overflow: unset
}

.proInfo5 .content .swiper1 .swiper-slide .item {
  width: 100%;
  background: rgba(246, 246, 246, 0.1);
  border: .15625vw solid #fff;
  box-shadow: 0 0.5px 14.9px rgba(0, 55, 138, 0.17);
  border-radius: 1.30208vw;
  padding: 3.59375vw 4.27083vw 1.875vw 4.27083vw
}

.proInfo5 .content .swiper1 .swiper-slide .item .p1 {
  color: #666;
  font-style: normal;
  font-weight: 700;
  /* line-height: 178.571%; */
  line-height: 1.5;
  margin: 0 0 2.20833vw;
  /* padding: 0 1.09375vw */
}

.proInfo5 .content .swiper1 .swiper-slide .item .p2 {
  height: 13.0208vw;
  overflow: auto;
}

.proInfo5 .content .swiper1 .swiper-slide .item .p2 .list {
  display: flex;
}

.proInfo5 .content .swiper1 .swiper-slide .item .p2 .list p {
  color: rgba(102, 102, 102, 0.8);
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%
}

.proInfo5 .content .swiper1 .swiper-slide .item .year {
  text-align: right;
  color: #666;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 3.125vw 0 0 0
}

.proInfo6 {
  height: 100vh
}

.proInfo6 .fix {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center
}

.proInfo6 .fix .wrap {
  width: 100%;
  padding: 0 9.21875vw
}

.proInfo6 .fix .wrap .title {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 700;
  line-height: normal
}

.proInfo6 .fix .wrap .line {
  width: 14.21875vw;
  height: .26042vw;
  background: rgba(13, 78, 144, 0.2);
  margin: 5.20833vw auto 0;
  border-radius: .3125vw
}

.proInfo6 .fix .wrap .line div {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #0D4E90;
  transition: .6s ease
}

.proInfo6 .fix .wrap .content {
  margin: 8.4375vw auto 0;
  position: relative;
  width: 59.16667vw
}

.proInfo6 .fix .wrap .content .matter {
  width: 100%;
  /* height: 14.16667vw; */
  height: 17.16667vw;
  margin: auto;
  position: relative
}

.proInfo6 .fix .wrap .content .matter:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100vh)
}

.proInfo6 .fix .wrap .content .matter .joke {
  width: 100%;
  height: 100%;
  border-radius: 1.04167vw;
  background: #F3F6F9;
  overflow: hidden;
  padding: 3.125vw 5.05208vw 1.82292vw 5.05208vw;
  transition: .6s ease
}

.proInfo6 .fix .wrap .content .matter .joke .p1 {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 1.66667vw
}

.proInfo6 .fix .wrap .content .matter .joke .dis {
  display: flex;
  justify-content: space-between
}

.proInfo6 .fix .wrap .content .matter .joke .dis .p2 {
  color: rgba(92, 92, 92, 0.6);
  font-style: normal;
  font-weight: 400;
  line-height: 171.429%
}

.proInfo6 .fix .wrap .content .matter .joke .dis .more {
  width: 9.47917vw;
  height: 2.60417vw;
  border-radius: 4.375vw;
  background: #FFF;
  box-shadow: 0 0 22.917px 0 rgba(0, 55, 138, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00378A;
  text-align: center;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.764px;
  text-transform: capitalize;
  margin: 2.44792vw 0 0 0;
  transition: .6s ease
}

.proInfo6 .fix .wrap .content .matter .joke .dis .more:hover {
  background: #0D4E90;
  color: #FFF
}

.common_sec {
  margin: 0 0 14.58333vw
}

.common_sec .title {
  margin: 0 0 4.53125vw;
  color: #5A5A5A;
  font-style: normal;
  font-weight: 700;
  line-height: normal
}

@media screen and (max-width: 768px) {
  .proInfo1 {
    height: 200px
  }

  .proInfo1 .img {
    height: 100%
  }

  .proInfo2 .content .r .item .bg {
    width: 195px;
  }

  .proInfo1 .back {
    left: 5%;
    bottom: 10%;
    gap: 10px
  }

  .proInfo1 .back svg {
    width: 16px;
    height: 16px
  }

  .proInfo2 {
    padding: 30px 5%
  }

  .proInfo2 .cut {
    gap: 10px;
    flex-wrap: wrap
  }

  .proInfo2 .cut .list {
    /* width: fit-content; */
    width: 78%;
    height: 40px;
    padding: 0 10px;
    border-radius: 30px
  }

  .proInfo2 .content {
    margin: 30px 0 0 0;
    flex-direction: column;
    gap: 20px
  }

  .proInfo2 .content .l {
    gap: 10px;
    margin: 0 0 15px
  }

  .proInfo2 .content .l .dis {
    gap: 15px;
    margin: 0 0 20px;
    flex-wrap: wrap;
  }

  .proInfo2 .content .l .dis img {
    /* width: 100px */
    width: 130px;
  }

  .proInfo2 .content .l .img {
    width: 100%
  }

  .proInfo2 .content .r {
    width: 100%;
    max-height: none;
    height: auto;
    padding: 0
  }

  .proInfo4 .r .table-container {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px;
  }

  .proInfo2 .content .r .item {
    width: 100%;
    height: auto;
    border-radius: 15px;
    padding: 20px 5%
  }

  .proInfo2 .content .r .item:not(:last-child) {
    margin: 0 0 20px
  }

  .proInfo2 .content .r .item .p1 {
    margin: 0 0 10px;
    /* font-size: 14px; */
    font-size: 16px;
  }
  .proInfo2 .content .r .item .p2 {
    font-size: 14px;
  }
  .proInfo3 {
    padding: 0 5% 40px 5%
  }

  .proInfo3 .img {
    height: 250px;
    border-radius: 15px
  }

  .proInfo4 {
    padding: 30px 5%;
    flex-direction: column
  }

  .proInfo4 .r {
    width: 100%;
    margin: 10px 0 0 0
  }

  .proInfo4 .r .p1 {
    margin: 0 0 20px
  }

  .proInfo4 .r table tr td {
    padding: 0 10px 0 0 !important
  }

  .proInfo4 .r table tr td .text {
    font-size: 12px !important;
    max-width: 60vw
  }

  .proInfo4 .l {
    width: 100%
  }

  .proInfo4 .l .title {
    margin: 0 0 15px;
    font-size: 12px;
  }

  .proInfo4 .l .img {
    padding: 40px 5%;
    border-radius: 15px;
    height: auto;
    margin: 0 0 20px
  }

  .proInfo4 .l .label {
    height: auto;
    margin: 0 0 20px;
    border-radius: 15px;
    padding: 20px 5%;
    display: none
  }

  .proInfo4 .l .label2 {
    height: auto;
    margin: 0 0 20px;
    border-radius: 15px;
    padding: 20px 5%;
    display: none
  }

  .proInfo4 .phone_box {
    display: block;
    margin-top: 15px
  }

  .proInfo4 .phone_box .label {
    height: auto;
    margin: 0 0 20px;
    border-radius: 15px;
    padding: 20px 5%
  }

  .proInfo4 .phone_box .label2 {
    height: auto;
    margin: 0 0 20px;
    border-radius: 15px;
    padding: 20px 5%
  }

  .proInfo5 {
    padding: 30px 5%
  }

  .proInfo5 .title {
    padding: 0;
    margin: 0 0 30px
  }

  .proInfo5 .content {
    margin: 25px 0 0 0
  }

  .proInfo5 .content .swiper-pagination {
    width: 60%;
    height: 3px;
    border-radius: 4px;
    margin: 50px auto 0
  }

  .proInfo5 .content .swiper1 {
    width: 100%
  }

  .proInfo5 .content .swiper1 .swiper-slide .item {
    transform: scale(1) !important;
    padding: 25px 5%;
    height: 360px;
  }

  .proInfo5 .content .swiper1 .swiper-slide .item .p1 {
    /* margin: 0 0 20px; */
    padding: 0;
    font-size: 16px
  }

  .proInfo6 {
    height: auto !important
  }

  .proInfo6 .fix {
    height: auto
  }

  .proInfo6 .fix .wrap {
    padding: 0 5%
  }

  .proInfo6 .fix .wrap .line {
    display: none
  }

  .proInfo6 .fix .wrap .content {
    margin: 30px 0 0 0;
    width: 100%
  }

  .proInfo6 .fix .wrap .content .matter {
    height: auto;
    position: static !important;
    transform: none !important;
    margin: 0 0 20px
  }

  .proInfo6 .fix .wrap .content .matter .joke {
    border-radius: 15px;
    padding: 20px 5%;
    transform: scale(1) !important;
    opacity: 1 !important
  }

  .proInfo6 .fix .wrap .content .matter .joke .p1 {
    margin: 0 0 20px;
    font-size: 14px;
  }

  .proInfo6 .fix .wrap .content .matter .joke .dis {
    flex-direction: column;
    gap: 20px
  }

  .proInfo6 .fix .wrap .content .matter .joke .dis .more {
    width: fit-content;
    height: 45px;
    padding: 0 20px;
    border-radius: 30px;
    margin: 0
  }

  .common_sec {
    padding: 30px 5%;
    margin: 0 0 20px
  }

  .common_sec .title {
    margin: 0 0 25px
  }

  .proInfo5 .content .swiper1 .swiper-slide .item .p2 {
    height: 206px;
  }
}