.sec1 {
  background: #F9F9F9;
  padding: 9.89583vw 8.33333vw 7.29167vw
}

.sec1 .crumbs {
  display: flex;
  align-items: center;
  margin-bottom: 1.40625vw;
  gap: .41667vw
}

.sec1 .crumbs a {
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  line-height: 1.9
}

.sec1 .crumbs a:hover,
.sec1 .crumbs a.on {
  color: #003D96
}

.sec1 .crumbs span {
  display: block;
  width: 1.04167vw;
  height: 1px;
  background: rgba(0, 0, 0, 0.7)
}

.sec1 .box {
  display: flex;
  gap: 3.64583vw
}

.sec1 .box .l {
  width: 39.27083vw
}

.sec1 .box .l .img {
  width: 100%;
  height: 26.04167vw;
  border: 1px solid #CCC;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center
}

.sec1 .box .l .img img {
  display: block;
  max-width: 90%;
  max-height: 90%
}

.sec1 .box .l .l_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: .625vw 0 0
}

.sec1 .box .l .l_bottom .video_btn {
  display: flex;
  align-items: center;
  gap: .52083vw;
  padding: 0 1.04167vw;
  height: 2.60417vw;
  border-radius: 1.61458vw;
  background: #003D96;
  cursor: pointer
}

.sec1 .box .l .l_bottom .video_btn img {
  display: block;
  width: 1.35417vw
}

.sec1 .box .l .l_bottom .video_btn p {
  color: #FFF;
  font-weight: 500
}

.sec1 .box .l .l_bottom .btns {
  display: flex;
  gap: .625vw
}

.sec1 .box .l .l_bottom .btns .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .41667vw;
  width: 9.27083vw;
  height: 2.60417vw;
  border-radius: .20833vw;
  transition: 0.6s
}

.sec1 .box .l .l_bottom .btns .btn p {
  color: #333;
  font-weight: 400;
  transition: 0.6s
}

.sec1 .box .l .l_bottom .btns .btn img {
  display: block;
  width: .57292vw;
  transition: 0.6s
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(1) {
  border: 1px solid #092A63
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(1):hover {
  background: #003D96;
  border-color: #003D96
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(1):hover p {
  color: #FFF
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(1):hover img {
  filter: brightness(0) invert(1)
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(2) {
  background: #003D96
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(2) p {
  color: #FFF
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(2) img {
  filter: brightness(0) invert(1)
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(2):hover {
  background: unset;
  border: 1px solid #003D96
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(2):hover p {
  color: #333
}

.sec1 .box .l .l_bottom .btns .btn:nth-child(2):hover img {
  filter: brightness(1)
}

.sec1 .box .r {
  /* width: 36.19792vw */
  flex: 1;
}

.sec1 .box .r .title {
  color: #000;
  font-weight: 700;
  line-height: 1.2
}

.sec1 .box .r .des {
  color: #000;
  font-weight: 400;
  line-height: 1.5;
  margin: .9375vw 0 3.07292vw
}
.sec1 .box .r .part {
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
.sec1 .box .r .part_title {
  color: #666;
  font-weight: 400;
  line-height: 2;
  margin-bottom: .67708vw
}

.sec1 .box .r .part .item:not(:last-child) {
  margin-bottom: .625vw
}

.sec1 .box .r .part .item .h5 {
  color: #666;
  font-weight: 400;
  line-height: 1.5
}

.sec1 .box .r .part .item .p {
  color: #000;
  font-weight: 400;
  line-height: 1.5
}

.sec2 {
  position: relative;
  padding: 4.84375vw 8.33333vw 6.25vw
}

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

.sec2 .bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.sec2 .wrap {
  width: 100%;
  display: flex;
  gap: 4.6875vw
}

.sec2 .wrap .img {
  width: 41.51042vw;
  height: 24.01042vw;
  overflow: hidden
}

.sec2 .wrap .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s
}

.sec2 .wrap .img:hover img {
  transform: scale(1.1)
}

.sec2 .wrap .r {
  width: 41.51042vw
}

.sec2 .wrap .r .line {
  width: 5.41667vw;
  height: .10417vw;
  background: #003D96
}

.sec2 .wrap .r .title {
  color: #000;
  font-weight: 700;
  line-height: 1.1;
  margin: 2.08333vw 0 4.11458vw
}

.sec2 .wrap .r ul {
  margin: 3.02083vw 0 0
}

.sec2 .wrap .r ul li {
  color: #000;
  font-weight: 400;
  line-height: 2
}

.sec2 .wrap .r .labels {
  display: flex;
  gap: 4.6875vw
}

.sec2 .wrap .r .labels .label .icon {
  width: 2.39583vw;
  height: 2.39583vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .88542vw;
  transition: 1s
}

.sec2 .wrap .r .labels .label .icon img {
  display: block;
  max-width: 100%;
  max-height: 100%
}

.sec2 .wrap .r .labels .label p {
  color: #003D96;
  font-weight: 700;
  line-height: 1
}

.sec2 .wrap .r .labels .label:hover .icon {
  transform: rotateY(360deg)
}

.sec3 {
  padding: 5.72917vw 8.33333vw 8.33333vw;
  overflow: hidden
}

.sec3 .title {
  color: #000;
  font-weight: 700;
  line-height: 1.1;
  text-align: center
}

.sec3 .line {
  width: 2.8125vw;
  height: .20833vw;
  background: #1D4891;
  margin: 1.5625vw auto
}

.sec3 .des {
  color: #000;
  font-weight: 400;
  line-height: 1.5;
  text-align: center
}

.sec3 .swiper {
  width: 67.70833vw;
  margin: 2.60417vw 0 0
}

.sec3 .swiper .swiper-slide {
  height: 18.75vw;
  overflow: hidden
}

.sec3 .swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s
}

.sec3 .swiper .swiper-slide:hover img {
  transform: scale(1.1)
}

.sec4 {
  padding: 0 8.33333vw 6.77083vw
}

.sec4 .wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center
}

.sec4 .wrap .box {
  position: absolute;
  left: 6.97917vw;
  z-index: 3
}

.sec4 .wrap .box .h5 {
  color: #FFF;
  font-weight: 700;
  line-height: 1.6
}

.sec4 .wrap .box .p {
  color: #FFF;
  font-weight: 400;
  line-height: 1.5;
  margin: .9375vw 0 2.60417vw
}

.sec4 .wrap .box .more {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 2.60417vw;
  border-radius: .20833vw;
  background: #FFF;
  gap: .41667vw;
  padding: 0 1.51042vw;
  transition: 0.6s
}

.sec4 .wrap .box .more p {
  color: #333;
  font-weight: 400;
  transition: 0.6s
}

.sec4 .wrap .box .more img {
  display: block;
  width: .57292vw;
  transition: 0.6s
}

.sec4 .wrap .box .more:hover {
  background: #003D96
}

.sec4 .wrap .box .more:hover p {
  color: #FFFFFF
}

.sec4 .wrap .box .more:hover img {
  filter: brightness(0) invert(1)
}

.sec4 .wrap .img {
  width: 100%;
  height: 23.22917vw
}

.sec4 .wrap .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s
}

@media screen and (max-width: 768px) {
  .sec1 {
    padding: 100px 5vw 40px
  }

  .sec1 .crumbs {
    gap: 5px;
    margin-bottom: 10px
  }

  .sec1 .crumbs span {
    width: 10px
  }

  .sec1 .box {
    display: block
  }

  .sec1 .box .r {
    margin: 20px 0 0;
    width: 100%
  }

  .sec1 .box .r .title {
    font-size: 24px;
    margin-bottom: 15px
  }

  .sec1 .box .r .des {
    font-size: 15px;
    margin-bottom: 20px
  }

  .sec1 .box .r .part .part_title {
    font-size: 18px;
    margin-bottom: 15px
  }

  .sec1 .box .r .part .item .h5,
  .sec1 .box .r .part .item .p {
    font-size: 15px
  }

  .sec1 .box .r .part .item:not(:last-child) {
    margin-bottom: 8px
  }

  .sec1 .box .l {
    width: 100%
  }

  .sec1 .box .l .img {
    height: 60vw
  }

  .sec1 .box .l .l_bottom {
    margin: 10px 0 0;
    display: block
  }

  .sec1 .box .l .l_bottom .btns {
    margin: 10px 0 0;
    gap: 10px
  }

  .sec1 .box .l .l_bottom .btns .btn {
    width: 140px;
    height: 40px;
    border-radius: 4px;
    gap: 6px
  }

  .sec1 .box .l .l_bottom .btns .btn img {
    width: 8px
  }

  .sec1 .box .l .l_bottom .video_btn {
    padding: 0 20px;
    width: fit-content;
    gap: 8px;
    height: 40px;
    border-radius: 20px
  }

  .sec1 .box .l .l_bottom .video_btn img {
    width: 16px
  }

  .sec1 .box .l .l_bottom .video_btn p {
    font-size: 15px
  }

  .sec2 {
    padding: 50px 5vw
  }

  .sec2 .wrap {
    display: block
  }

  .sec2 .wrap .img {
    width: 100%;
    height: 52vw
  }

  .sec2 .wrap .r {
    margin: 20px 0 0;
    width: 100%
  }

  .sec2 .wrap .r .line {
    width: 40px;
    height: 3px
  }

  .sec2 .wrap .r .title {
    margin: 10px 0 25px;
    font-size: 24px
  }

  .sec2 .wrap .r .labels {
    gap: 15px
  }

  .sec2 .wrap .r .labels .label .icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 6px
  }

  .sec2 .wrap .r .labels .label p {
    font-size: 16px
  }

  .sec2 .wrap .r ul {
    margin: 20px 0 0
  }

  .sec2 .wrap .r ul li {
    font-size: 15px
  }

  .sec3 {
    padding: 50px 5vw
  }

  .sec3 .title {
    font-size: 24px
  }

  .sec3 .line {
    width: 40px;
    height: 3px;
    margin: 15px auto
  }

  .sec3 .des {
    font-size: 15px
  }

  .sec3 .swiper {
    width: 100%;
    margin: 30px 0 0
  }

  .sec3 .swiper .swiper-slide {
    height: 40vw
  }

  .sec4 {
    padding: 20px 5vw 60px
  }

  .sec4 .wrap {
    padding: 50px 20px;
    width: 100%;
    position: relative
  }

  .sec4 .wrap .box {
    position: unset
  }

  .sec4 .wrap .box .h5 {
    font-size: 24px
  }

  .sec4 .wrap .box .p {
    font-size: 15px;
    margin: 10px 0 15px
  }

  .sec4 .wrap .box .more {
    height: 40px;
    padding: 0 20px;
    gap: 6px;
    border-radius: 4px
  }

  .sec4 .wrap .box .more img {
    width: 8px
  }

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

  .sec4 .wrap .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }
}