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
}

.technology1 {
  padding: 15.15625vw 0 21.04167vw
}

.technology1 .title {
  padding: 0 0 0 13.80208vw;
  color: #5A5A5A;
  font-weight: bold;
  /* text-transform: uppercase; */
  margin: 0 0 5.83333vw
}

.technology1 .content {
  display: flex;
  align-items: center;
  gap: 5.20833vw
}

.technology1 .content .img {
  width: 50vw;
  height: 37.8125vw;
  border-radius: 0 1.66667vw 1.66667vw 0
}

.technology1 .content .img img {
  width: 100%;
  height: 100%
}

.technology1 .content .r {
  width: 31.5625vw
}

.technology1 .content .r .list:not(:last-child) {
  margin: 0 0 2.5vw
}

.technology1 .content .r .list .p1 {
  color: #666666;
  font-weight: bold;
  margin: 0 0 1.04167vw
}

.technology1 .content .r .list .p2 {
  color: #666666;
  /* line-height: 1.97917vw */
  line-height: 1.5vw;
}

.technology2 {
  padding: 0 13.54167vw 19.0625vw 13.90625vw
}

.technology2 .title {
  color: #5A5A5A;
  font-weight: bold;
  margin: 0 0 3.38542vw
}

.technology2 .content {
  display: flex;
  justify-content: space-between
}

.technology2 .content .line {
  width: .26042vw;
  height: 32.8125vw;
  border-radius: .3125vw;
  background: rgba(13, 78, 144, 0.2);
  margin: 0 0 0 5.83333vw;
  position: sticky;
  position: -webkit-sticky;
  top: 5.20833vw
}

.technology2 .content .line div {
  width: 100%;
  height: 0;
  border-radius: inherit;
  background: #0D4E90
}

.technology2 .content .r {
  width: 57.29167vw
}

.technology2 .content .r .item {
  width: 100%;
  border: .15625vw solid #fff;
  background: #F6F6F61A;
  padding: 3.90625vw 2.76042vw 4.53125vw 2.76042vw;
  box-shadow: 0 1px 14px rgba(0, 55, 138, 0.17);
  border-radius: 1.66667vw;
  position: relative;
  z-index: 1;
  overflow: hidden
}

.technology2 .content .r .item .bg {
  position: absolute;
  height: 7.70833vw;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: #F0F3F8;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end
}

.technology2 .content .r .item .bg img {
  width: 15.78125vw;
  height: 100%
}

.technology2 .content .r .item .common_bg {
  display: none
}

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

.technology2 .content .r .item .p1 {
  color: #5A5A5A;
  margin: 0 0 6.25vw
}

.technology2 .content .r .item .p2 {
  /* line-height: 1.97917vw; */
  line-height: 1.5vw;
  color: #666666
}

.technology2 .content .r .item .p2 span {
  font-weight: bold
}

.technology3 {
  padding: 0 4.58333vw 7.5vw 4.58333vw
}

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

.technology3 .content {
  width: 100%;
  margin: 4.21875vw 0 0 0
}

.technology3 .content img {
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
}

.technology3 .content table {
  width: 100%;
  border-collapse: collapse
}

.technology3 .content table tr:first-child {
  position: sticky;
  left: 0;
  top: 0;
  transition: all 300ms
}

.technology3 .content table tr:first-child td {
  background: rgba(246, 246, 246, 0.96);
  height: 3.75vw;
  font-size: .83333vw;
  border: none
}

.technology3 .content table tr.ttop {
  top: 4.6875vw
}

.technology3 .content table tr td {
  color: #5A5A5A;
  font-size: .72917vw;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.44px;
  padding: .83333vw 1.45833vw;
  border: 1px solid #CFCDCD;
  text-align: center
}

.technology3 .content table tr td[colspan="5"] {
  padding: 0;
  border: none
}

.technology3 .content table tr td.bg {
  background: rgba(214, 214, 214, 0.2)
}

.technology3 .content table tr td .text {
  font-size: .72917vw
}

.technology3 .content table tr td .line {
  width: 95%;
  height: .88542vw;
  border-radius: 0 1.5625vw 1.5625vw 0;
  background: #E6E6E6
}

.technology3 .content table tr td .line.yellow div {
  background: linear-gradient(0deg, #FFD690 0%, #FFD690 100%), #E6E6E6
}

.technology3 .content table tr td .line div {
  height: 100%;
  border-radius: inherit;
  background: #3879C9
}

.technology4 {
  padding: 0 13.4375vw 13.80208vw 13.4375vw
}

.technology4 .cut {
  display: flex;
  gap: 2.03125vw
}

.technology4 .cut .list {
  width: 7.5vw;
  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
}

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

.technology4 .content {
  margin: 4.27083vw 0 0 0
}

.technology4 .content .matter:not(:last-child) {
  margin: 0 0 7.55208vw
}

.technology4 .content .matter .title {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 700;
  margin: 0 0 4.16667vw;
  line-height: normal
}

.technology4 .content .matter .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.125vw 1.97917vw
}

.technology4 .content .matter .grid .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);
  padding: 2.23958vw 1.92708vw 1.71875vw 1.92708vw
}

.technology4 .content .matter .grid .item .p1 {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 500;
  line-height: 2.22;
  margin: 0 0 3.59375vw
}

.technology4 .content .matter .grid .item .p2 {
  color: #5C5C5C;
  font-style: normal;
  font-weight: 400;
  line-height: 214.286%;
  margin: 0 0 2.1875vw
}

.technology4 .content .matter .grid .item .dis {
  display: flex;
  justify-content: space-between;
  align-items: flex-end
}

.technology4 .content .matter .grid .item .dis .p3 {
  color: #5A5A5A;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

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

.technology4 .content .matter .grid .item .dis .more:hover {
  background: #00378A;
  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) {
  .home {
    overflow: hidden
  }

  .technology1 {
    padding: 30px 5%
  }

  .technology1 .title {
    padding: 0;
    margin: 0 0 25px
  }

  .technology1 .content {
    flex-direction: column-reverse;
    gap: 20px
  }

  .technology1 .content .img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    overflow: hidden
  }

  .technology1 .content .r {
    width: 100%;
    height: auto
  }

  .technology1 .content .r .list:not(:last-child) {
    margin: 0 0 25px
  }

  .technology1 .content .r .list .p1 {
    margin: 0 0 15px
  }

  .technology1 .content .r .list .p2 {
    line-height: 25px
  }

  .technology2 {
    padding: 30px 5%
  }

  .technology2 .title {
    margin: 0 0 20px
  }

  .technology2 .content .line {
    display: none
  }

  .technology2 .content .r {
    width: 100%;
    display: none
  }

  .technology2 .content .r.sj_r {
    width: 100%;
    display: block !important
  }

  .technology2 .content .r.sj_r .sjSwiper1 {
    overflow: unset
  }

  .technology2 .content .r.sj_r .swiper-pagination {
      width: 60%;
      height: 3px;
      border-radius: 4px;
      margin: 50px auto 0;
      position: static;
      background: rgba(13, 78, 144, 0.2);
  }
   .technology2 .content .r.sj_r .swiper-pagination span {
    border-radius: inherit;
    background: #0D4E90;
   }

  .technology2 .content .r .item {
    width: 100%;
    height: auto;
    max-height: 250px;
    border-radius: 15px;
    overflow-y: scroll;
    padding: 20px 5%
  }

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

  .technology2 .content .r .item .bg {
    height: 90px
  }

  .technology2 .content .r .item .bg img {
    height: 100%
  }

  .technology2 .content .r .item .p1 {
    margin: 0 0 20px;
    height: 2.5em;
  }

  .technology2 .content .r .item .p2 {
    line-height: 1.6;
    font-size: 14px
  }

  .technology3 {
    padding: 30px 5%
  }

  .technology3 .title {
    margin: 0
  }

  .technology3 .content {
    margin: 30px 0 0 0
  }

  .technology3 .content table {
    width: 100%;
    display: block;
    overflow-x: auto
  }

  .technology3 .content table tbody {
    width: max-content;
    display: inline-table
  }

  .technology3 .content table tr:first-child td {
    height: 40px;
    font-size: 16px;
    padding: 10px
  }

  .technology3 .content table tr td {
    font-size: 14px;
    padding: 15px
  }

  .technology3 .content table tr td .line {
    height: 14px
  }

  .technology3 .content table tr td .text {
    font-size: 14px
  }

  .technology4 {
    padding: 30px 5%
  }

  .technology4 .cut {
    gap: 10px
  }

  .technology4 .cut .list {
    width: fit-content;
    height: 40px;
    padding: 0 20px;
    border-radius: 30px;
    font-size: 12px;
  }

  .technology4 .content {
    margin: 20px 0 0 0
  }

  .technology4 .content .matter:not(:last-child) {
    margin: 0 0 25px
  }

  .technology4 .content .matter .title {
    margin: 0 0 15px
  }

  .technology4 .content .matter .grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px
  }

  .technology4 .content .matter .grid .item {
    width: 100%;
    height: auto;
    padding: 20px 5%
  }

  .technology4 .content .matter .grid .item .p1 {
    margin: 0 0 30px;
    line-height: 1.8
  }

  .technology4 .content .matter .grid .item .p2 {
    margin: 0 0 20px
  }

  .technology4 .content .matter .grid .item .dis {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px
  }

  .technology4 .content .matter .grid .item .dis .more {
    width: fit-content;
    height: 45px;
    padding: 0 20px;
    border-radius: 30px;
    margin: 0
  }
}