.home .container {
  padding: 11.45833vw 0 6.25vw 0
}

.home .container .section1 {
  padding: 0 5.20833vw
}

.home .container .section1 .links {
  display: flex;
  align-items: center
}

.home .container .section1 .links img {
  width: 1.30208vw
}

.home .container .section1 .links a {
  color: #0D030C;
  margin-left: .52083vw
}

.home .container .section1 .links span {
  height: 1.04167vw;
  width: .10417vw;
  background: #043491;
  margin: 0 1.04167vw
}

.home .container .section1 .links p {
  color: #043491;
  font-weight: 700
}

.home .container .section1 .swiper1 {
  margin: 2.60417vw 0 1.5625vw 0;
  width: 100%
}

.home .container .section1 .swiper1 .pic {
  border-radius: 2.08333vw;
  overflow: hidden
}

.home .container .section1 .swiper1 .pic img {
  width: 100%;
  height: 35.15625vw;
  border-radius: 2.08333vw;
  object-fit: cover;
  transition: all 600ms
}

.home .container .section1 .swiper1 .pic:hover img {
  transform: scale(1.05)
}

.home .container .section1 .thumbs {
  width: 18.75vw
}

.home .container .section1 .thumbs .swiper2 {
  width: 100%
}

.home .container .section1 .thumbs .swiper2 .swiper-slide {
  cursor: pointer
}

.home .container .section1 .thumbs .swiper2 .swiper-slide .pic {
  width: 100%;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.32292vw;
  transition: all 600ms;
  padding: .52083vw
}

.home .container .section1 .thumbs .swiper2 .swiper-slide .pic img {
  max-width: 100%;
  transition: all 600ms
}

.home .container .section1 .thumbs .swiper2 .swiper-slide-thumb-active .pic {
  border-color: #043491
}

.home .container .section1 .thumbs .swiper2 .swiper-slide-thumb-active .pic img {
  border-radius: 50%;
  transform: scale(1.1)
}

.home .container .section2 {
  padding: 6.82292vw 5.20833vw 12.5vw 5.20833vw;
  display: flex
}

.home .container .section2.no_model .lbox {
  width: 100%
}

.home .container .section2.no_model .lbox .des {
  width: 38.54167vw
}

.home .container .section2 .lbox {
  width: 38.54167vw
}

.home .container .section2 .lbox h1 {
  color: #043491;
  font-weight: 700
}

.home .container .section2 .lbox .des {
  margin: 1.5625vw 0;
  color: rgba(13, 3, 12, 0.75);
  font-weight: 500;
  letter-spacing: 0.48px;
  padding-bottom: 3.125vw;
  border-bottom: 1px solid #043491
}

.home .container .section2 .lbox .list .item {
  border-bottom: 1px solid rgba(13, 3, 12, 0.2);
  cursor: pointer;
  padding: 1.04167vw 0
}

.home .container .section2 .lbox .list .item .dt {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.home .container .section2 .lbox .list .item .dt p {
  color: #043491;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: capitalize
}

.home .container .section2 .lbox .list .item .dt .icon {
  position: relative
}

.home .container .section2 .lbox .list .item .dt .icon img {
  transition: all 600ms;
  width: 1.25vw
}

.home .container .section2 .lbox .list .item .dt .icon img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0
}

.home .container .section2 .lbox .list .item .dc {
  margin-top: .52083vw;
  display: none
}

.home .container .section2 .lbox .list .item.on .dt .icon img:nth-child(1) {
  opacity: 0
}

.home .container .section2 .lbox .list .item.on .dt .icon img:nth-child(2) {
  opacity: 1
}

.section2 .rbox {
  width: 51.041vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.section2 .rbox svg {
  width: 13.802vw;
}

.mg-tab {
  border-bottom: 2px solid rgba(4, 52, 145, 0.20);
  width: 100%;
  display: flex;
  margin: 1.562vw 0;
}

.mg-tab .ev {
  flex: 1;
  position: relative;
  text-align: center;
  padding-bottom: 0.937vw;
}

.mg-tab .ev::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.104vw;
  display: block;
  width: 100%;
  height: 0.208vw;
  border-radius: 2px;
  background: #043491;
  opacity: 0;
  transition: all ease .3s;
}

.mg-tab .ev.on {
  color: #043491;
}

.mg-tab .ev.on::after {
  opacity: 1;
}

#joeColor {
  width: 100%;
  margin: 0 0 40px;
  background: #fff;
}

.colorPicker .extras .hex {
  margin: 10px 0;
}

.colorPicker .extras .hex input {
  width: 65px;
  height: 30px;
  text-align: center;
  border: 1px solid #BBB;
}

.home .container .section3 {
  border-top: .10417vw solid #043491;
  padding: 4.16667vw 5.20833vw 8.33333vw 5.20833vw;
  display: flex;
  justify-content: space-between;
  position: relative
}

.home .container .section3 .bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 57.29167vw;
  z-index: -1
}

.home .container .section3 .lbox {
  width: 33.48958vw;
  text-align: center
}

.home .container .section3 .lbox .pt {
  color: #043491;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 5.10417vw
}

.home .container .section3 .lbox .pic img {
  max-width: 100%
}

.home .container .section3 .rbox {
  width: 52.08333vw;
  text-align: center
}

.home .container .section3 .rbox .pt {
  color: #043491;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase
}

.home .container .section3 .rbox .des {
  margin: 1.5625vw 0 1.71875vw 0;
  color: rgba(4, 52, 145, 0.75);
  letter-spacing: 0.4px
}

.home .container .section3 .rbox .pic img {
  max-width: 100%
}

.home .container .section3 .rbox .notice {
  font-size: .52083vw;
  color: rgba(13, 3, 12, 0.6);
  letter-spacing: 0.2px
}

.home .container .section3 .rbox .notice img {
  width: .83333vw
}

@media screen and (max-width: 768px) {
  .home .container {
    padding: 80px 0
  }

  .home .container .section1 {
    padding: 0 5%
  }

  .home .container .section1 .links {
    flex-wrap: wrap;
    font-size: 14px
  }

  .home .container .section1 .links img {
    width: 20px
  }

  .home .container .section1 .links a {
    margin-left: 10px
  }

  .home .container .section1 .links span {
    height: 15px;
    width: 1px;
    margin: 0 10px
  }

  .home .container .section1 .swiper1 {
    margin: 20px 0 10px 0
  }

  .home .container .section1 .swiper1 .pic {
    border-radius: 10px
  }

  .home .container .section1 .swiper1 .pic img {
    height: 300px;
    border-radius: 10px
  }

  .home .container .section1 .thumbs {
    width: 100%
  }

  .home .container .section1 .thumbs .swiper2 .swiper-slide .pic {
    height: 77px
  }

  .home .container .section1 .thumbs .swiper2 .swiper-slide .pic img {
    max-width: 100%;
    transform: scale(0.9)
  }

  .home .container .section1 .thumbs .swiper2 .swiper-slide-thumb-active .pic img {
    transform: scale(1)
  }

  .home .container .section2 {
    padding: 60px 5%;
    flex-direction: column
  }

  .home .container .section2.no_model .lbox {
    width: 100%
  }

  .home .container .section2.no_model .lbox .des {
    width: 100%
  }

  .home .container .section2 .lbox {
    width: 100%
  }

  .home .container .section2 .lbox h1 {
    font-size: 28px
  }

  .home .container .section2 .lbox .des {
    margin: 15px 0 25px 0;
    padding-bottom: 30px;
    font-size: 16px
  }

  .home .container .section2 .lbox .list .item {
    padding: 15px 0
  }

  .home .container .section2 .lbox .list .item .dt .icon img {
    width: 20px
  }

  .home .container .section2 .lbox .list .item .dc {
    margin-top: 10px
  }

  .section2 .rbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
  }
  
  .section2 .rbox svg {
    width: 83px;
  }
  
  .mg-tab {
    border-bottom: 2px solid rgba(4, 52, 145, 0.20);
    width: 100%;
    display: flex;
    margin: 15px 0;
  }
  
  .mg-tab .ev {
    flex: 1;
    padding-bottom: 9px;
  }
  
  .mg-tab .ev::after {
    bottom: -1px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
  }

  .home .container .section3 {
    padding: 40px 5%;
    flex-direction: column
  }

  .home .container .section3 .bg {
    width: 100%
  }

  .home .container .section3 .lbox {
    width: 100%;
    text-align: center
  }

  .home .container .section3 .lbox .pt {
    margin-bottom: 25px
  }

  .home .container .section3 .lbox .pic img {
    max-width: 100%
  }

  .home .container .section3 .rbox {
    margin-top: 60px;
    width: 100%
  }

  .home .container .section3 .rbox .des {
    margin: 15px 0 20px 0
  }

  .home .container .section3 .rbox .notice {
    font-size: 10px
  }

  .home .container .section3 .rbox .notice img {
    width: 16px
  }
}