.mybanner {

  background-position: center;

  background-repeat: no-repeat;

  height: 100vh;
  background-size: cover;
  image-rendering: pixelated;

}

.content-model {

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

}

@keyframes txt {

  0% {

    opacity: 0;

  }

  50% {

    opacity: 0.5;

  }

  100% {

    opacity: 1;

  }

}

@keyframes display {

  0% {

    opacity: 0;

  }

  50% {

    opacity: 0.5;

  }

  75% {

    opacity: 0.75;

  }

  100% {

    opacity: 0;

  }

}

@keyframes move {

  0% {

    transform: scale(1);

  }

  100% {

    transform: scale(1.2);

  }

}

@keyframes movemore {

  0% {

    transform: scale(1);

  }

  100% {

    transform: scale(1.4);

  }

}

.mybanner .area {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

}

.mybanner .area h1 {

  font-size: 72px;

  color: #ffffff;
  letter-spacing: 6px;

  /* animation: txt 4s linear; */
	font-family: OPPOSans-B;
}

.caseTxt h1 {

font-size: 36px;
    line-height: 48px;
    color: #333333;
    margin-bottom: 0;
    width: 71%;
    margin: 0 auto;
    margin-right: 0;
    white-space: nowrap;

}

.caseTxt p {

    font-size: 24px;
    line-height: 48px;
    color: #555555;
    width: 71%;
    text-align: justify;
    margin: 0 auto;
    margin-right: 0;
    margin-top: 46px;

}

.content-case {

  margin-top: 96px;

}

.content-case .area {

  display: flex;
  /*max-width: 1640px;*/
  justify-content: space-between;
  /*margin: 0 auto;*/
  /*margin-right: 0;*/
  width: inherit;
}

.content-case .caseTxt {

  width: 42.2%;
  padding-top: 143px;
  text-align: justify;

}

.content-case .caseImg {

  width: 51.5%;

}

.contetnt-list1 {

  margin-top: 88px;

  padding-top: 115px;

  background-color: #f7f8f6;

}

.list-nowrap > h1 {

  font-size: 50px;

  letter-spacing: 3px;

  color: #333333;

  text-align: center;

  margin-bottom: 28px;
	font-family: OPPOSans-B;
}

.list-nowrap > p {

  width: 73.37%;

  text-align: center;

  margin: auto;

  font-size: 18px;

  line-height: 36px;

  color: #333333;
	font-family: OPPOSans-R;
}

.item-ind {

  display: flex;

  flex-wrap: wrap;

  margin-top: 76px;

  overflow: hidden;

  justify-content: space-between;

}

.item-ind > div {

  width: 48.64%;

  margin-bottom: 58px;

  cursor: pointer;

}

.item-ind > div:hover img {

  transform: scale(1.05);

}

.item-ind > div img {

  margin-bottom: 20px;

  transition: all 0.3s linear;

}

.item-ind > div h5 {

  font-size: 24px;

  line-height: 36px;

  color: #333333;
  padding-bottom: 8px;
	font-family: OPPOSans-M;
}

.item-ind > div p {

  font-size: 16px;

  color: #555555;
	font-family: OPPOSans-R;
}

.zn-model {

  padding-top: 119px;

  position: relative;

}

.zn-model .t-txt h1,

.b-txt h1 {

  text-align: center;
  font-size: 50px;
	font-family: OPPOSans-B;
}
.zn-model .t-txt h1{
  font-size: 50px;
  font-family: OPPOSans-B;
}

.item-ind > div h5 {

  font-size: 22px;
  line-height: 16px;
  color: #000;
  letter-spacing: 1px;

}

.b-txt {

  margin-top: 114px;

}

.b-txt p {

  width: 50%;

  margin: auto;

  text-align: center;

  font-size: 18px;

  line-height: 36px;

  color: #333333;
  margin-top: 27px;
	font-family: OPPOSans-R;
}

.content-model {

  height: 872px;

  margin-top: 52px;

  position: relative;

  display: none;
  image-rendering: pixelated;

}

.content-model:nth-child(2) {

  display: block;

}

.position-left {

  padding-top: 120px;

  padding-left: 140px;

  background-color: rgba(000, 000, 000, 0.5);

  width: 45.88%;

  height: 527px;

  position: absolute;

  top: 45%;

  left: 0%;

  transform: translate(0%, -50%);

  animation: left 0.5s linear;

}

.baseCatch h3{
  font-size: 25px;
  font-family: OPPOSans-B;
}

@keyframes left {

  0% {

    width: 0;

  }

  100% {

    width: 45.88%;

  }

}

.baseCatch {

  width: 84%;

  color: #fff;

}


.baseCatch p {

  font-size: 17px;
  line-height: 30px;
  color: #ffffff;
  width: 100%;
  text-align: justify;
  margin-top: 23px;
	font-family: OPPOSans-R;
}

.item-list {

  margin-top: 65px;

  width: 74%;

  display: flex;

  align-items: flex-start;

  justify-content: space-around;

}

.item-list > div {

  text-align: center;
  line-height: 41px;

}
.item-list > div:last-child{
  display: none;
}

.item-list > div:nth-child(even) {
  font-size: 30px;

}

.item-list > div img {

  vertical-align: text-bottom;

}

.item-list > div p {

  margin-top: 12px;
  white-space: nowrap;
	font-family: OPPOSans-R;
}

.bottom-menu {

  display: flex;

  justify-content: space-between;

  position: absolute;

  bottom: 0px;

  width: 50%;

  left: 50%;

  transform: translate(-50%, 0%);

}

.bottom-menu > div {

  height: 200px;

  width: 200px;

  position: relative;

  font-size: 30px;

  text-align: center;

  line-height: 200px;

  color: #ffffff;

  cursor: pointer;

  opacity: 0.6;

}
.bottom-menu > div p{
  font-family: OPPOSans-M;
}
.bottom-menu > div .bbox {

  display: none;

  position: absolute;

  top: 0%;

  left: 0%;

}

.bottom-menu > div:hover .bbox {

  display: flex;

}

.bottom-sw {

  margin-top: 53px;

}
.bottom-sw img{
    image-rendering: pixelated;
}
.bottom-sw .vrsearch{
  width: 100%;
}
.bottom-sw .vrsearch img{
  width: 100%;
}

.bottom-sw .list-item {

  display: flex;

  width: 1200px;

  margin: auto;

  margin-top: 38px;

  text-align: center;

  justify-content: space-evenly;

}

.bottom-sw .list-item h3 {

  margin-top: 30px;

  font-size: 24px;
	font-family: OPPOSans-R;
}

.swiper-container1 {

  transition: all 0.3s linear;

}

.content-gj {

  /* height: 1200px;

  margin-top: 66px; */

  background-position: center center;

  background-repeat: no-repeat;

  padding-top: 100px;

  background-size: 100%;

}

.content-gj h1 {

  font-size: 50px;

  color: #333333;

  margin-bottom: 35px !important;

}

.content-gj p {

  font-size: 18px;

  line-height: 36px;

  color: #333333;

}

.content-gj h1,

.content-gj p {

  width: 1264px;

  margin: auto;

  text-align: center;
	font-family: OPPOSans-B;
}

.content-look {

  background-color: #f7f8f6;

  padding-top: 118px;

  padding-bottom: 138px;

}

.content-look .cen {

  text-align: center;

}

.content-look .cen > h1 {

  font-size: 50px;

  color: #111111;
  margin-bottom: 29px;
  white-space: nowrap;

}

.content-look .cen > p {

  font-size: 18px;

  line-height: 36px;

  color: #010101;

}

.content-look,

.list-t,

.content-look,

.list-b {

  display: flex;

  justify-content: space-between;

}

.list-t > div,

.list-b > div {

  width: 18%;

  font-size: 30px;

  line-height: 36px;

  color: #0071e3;

}

.list-t {

  margin-bottom: 61px;

}

.list-t > div p,

.list-b > div p {

  margin-bottom: 28px;

}
.list-t > div p{
    white-space: nowrap;
    font-family: OPPOSans-M;
}

.list-t {

  margin-top: 108px;

}

.content-garage .t-txt {

  width: 976px;

  text-align: center;

  margin: auto;

  margin-top: 114px;

}

.content-garage .t-txt h1 {

  font-size: 50px;

  color: #333333;
	font-family: OPPOSans-B;
}

.content-garage .t-txt p {

  font-size: 18px;

  line-height: 36px;

  color: #333333;

  margin-top: 25px;
  font-family: OPPOSans-R;
}

.content-garage .bottom-sw .list-ico {

  display: flex;

  justify-content: space-between;

  width: 1256px;

  margin: auto;

  text-align: center;

}

.content-garage .bottom-sw .list-ico div span{
    display: inline-block;
    height: 60px;
    
}
 
.content-garage .bottom-sw .list-ico {

  margin-top: 55px;

}

.content-garage .bottom-sw .list-ico p {

  margin-top: 30px;
  font-size: 22px;
  letter-spacing: 1px;
	font-family: OPPOSans-R;
}

.content-navigation {

  height: 1025px;

  margin-top: 74px;

  background-position: center center;

  background-repeat: no-repeat;

  background-size: 100%;
  image-rendering: pixelated;

}

.content-navigation ul{

    width: 1033px;
    /*margin-left: 35%;*/
    margin: 0 auto;
    margin-right: 11%;
    margin-top: 88px;
}
.content-navigation ul div{
    display: flex;
    max-width: 697px;
    justify-content: space-between;
    margin: 0 auto;
    margin-right: 0;
}
.content-navigation ul li{
    text-align: center;
}
.content-navigation ul li p:nth-child(1){
    text-align: center;
    height: 55px;
}
.content-navigation ul li p:nth-child(2){
    	font-size: 24px;
	color: #333333;
	margin-top: 24px;
  font-family: OPPOSans-R;
}


.content-navigation .text {

  /*margin-left: 35%;*/
  margin: 0 auto;
  margin-right: 11%;

  width: 1033px;

  text-align: right;

  padding-top: 165px;

}

.content-navigation .text h1 {

  font-size: 50px;

  color: #333333;
	font-family: OPPOSans-M;
}

.content-navigation .text p {

  font-size: 18px;

  line-height: 36px;

  color: #333333;

  margin-top: 35px;
  font-family: OPPOSans-R;
}

.content-gj {

  position: relative;

  overflow: hidden;

}

.content-gj .box1 {

  position: absolute;

  left: 44%;

  top: 41%;

}

.content-gj .mybox1 {

  position: absolute;

  right: 10%;

  top: 43%;

}

.content-gj .mybox1,

.content-gj .mybox2 {

  display: inline-block;

  border-radius: 100%;

  z-index: 1;

  box-shadow: 0px 0px 30px #deb5bd inset;

  z-index: 111;

}

.content-gj .mybox1 {

  width: 15%;

  height: 10.4%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  animation: sun 4s linear infinite;

}

.content-gj .mybox2 {

  width: 51.2%;

  height: 48.5%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  animation: sun 4s linear infinite;

}

.content-gj .box1,

.content-gj .box2,

.content-gj .box3 {

  display: inline-block;

  border-radius: 100%;

  z-index: 1;

  box-shadow: 0px 0px 30px #b8d2ed inset;

  z-index: 111;

}

.content-gj .box1 {

  width: 34.7%;

  height: 22.2%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  animation: sun 3s linear infinite;

}

.content-gj .box2 {

  width: 48.8%;

  height: 52.2%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  animation: sun 3s linear infinite;

}

.content-gj .box3 {

  width: 51.4%;

  height: 48.2%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  animation: sun 3s linear infinite;

}

.baseCatch h3{
  font-size: 30px;
}

@keyframes sun {

  0% {

    transform: scale(0);

    opacity: 1;

  }

  50% {

    transform: scale(0.5);

    opacity: 1;

  }

  100% {

    opacity: 0.5;

    transform: scale(1.1);

  }

}

.content-gj .round,

.content-gj .round2 {

  position: absolute;

  left: -2px;

  bottom: 2%;

  width: 1%;

  height: 1.5%;

  background-color: #3f94e9;

  border-radius: 100%;

}

.content-gj .round {

  animation: dian1 3.5s infinite linear;

  /* animation-delay: 0.8s; */

}

.content-gj .round2 {

  animation: dian2 6s infinite linear;

}

.content-gj .bgc {

  width: 100%;

  height: 100%;
  image-rendering: pixelated;

}

@keyframes safe-line3 {

  0% {

    transform: translate(0, 0);

  }

  50% {

    transform: translate(0, 10px);

  }

  100% {

    transform: translate(0, 0);

  }

}

@keyframes dian1 {

  0% {

    opacity: 1;

    bottom: 2%;

    left: -2px;

  }

  45% {

    left: 38.3%;

    bottom: 38.6%;

  }

  75% {

    left: 48.8%;

    bottom: 32.7%;

  }

  100% {

    left: 60.2%;

    bottom: 47%;

    opacity: 0;

  }

}

@keyframes dian2 {

  0% {

    opacity: 1;

    bottom: 2%;

    left: -2px;

  }

  25% {

    left: 38.3%;

    bottom: 38.6%;

  }

  35% {

    left: 48.8%;

    bottom: 32.7%;

  }

  55% {

    left: 60.2%;

    bottom: 47%;

  }

  70% {

    left: 66.4%;

    bottom: 45%;

  }

  75% {

    left: 68.8%;

    bottom: 46.5%;

  }

  85% {

    opacity: 1;

    left: 76.2%;

    bottom: 43.1%;

  }

  100% {

    opacity: 0;

    left: 81.8%;

    bottom: 51.3%;

  }

}

.content-gj .text {

  position: absolute;

  top: 13.5%;

    left: 50%;
    transform: translateX(-50%);

}

.content-gj .myico1 {

  position: absolute;
  left: 13%;
  bottom: 17.3%;
  width: 2%;
  animation: safe-line3 2s infinite linear;

}

.content-gj .myico2 {

  position: absolute;

  left: 37.7%;

  bottom: 40.6%;

  width: 2%;

  animation: safe-line3 2s infinite linear;

}

.content-gj .myico3 {

  position: absolute;

  left: 59.8%;

  bottom: 49.2%;

  width: 15%;

  animation: safe-line3 2s infinite linear;

}

.content-gj .myico4 {

  position: absolute;

  left: 81.5%;

  bottom: 53.5%;

  width: 15%;

  animation: safe-line3 2s infinite linear;

}

@media screen and (min-width: 1600px) {

  .content-navigation .text {

    /* margin-left: 200px; */

    width: 1033px;

    text-align: right;

    padding-top: 165px;

  }

  .mybanner .area h1 {

    font-size: 72px;

  }

}

/* padpro端 */

@media screen and (min-width: 991px) and (max-width: 1600px) {

  .area {

    width: 100%;

    padding: 0 10px;
    max-width: 95% !important;
    padding-right: 0;

  }
  
  
  
    .content-gj .text {
    position: absolute;
    top: 13.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
}

  .area2 {

    width: 100%;

    margin: auto;

  }

  .content-navigation .text {

    margin-left: 300px;

    width: 1033px;

    text-align: right;

    padding-top: 105px;

  }

  .mybanner .area h1 {

    font-size: 63px;

  }

  .caseTxt h1 {

    font-size: 28px;

    line-height: 48px;

    color: #333333;

    margin-bottom: 0;
    width: 97%;
    font-family: OPPOSans-M;
  }

  .caseTxt p {

    font-size: 18px;

    line-height: 35px;

    color: #555555;

    margin-top: 15px;
    width: 97%;
    font-family: OPPOSans-R;
  }

  .content-case .caseTxt {

    width: 33.93%;

    padding-top: 70px;

  }

  .content-case {

    margin-top: 50px;

  }

  .content-case .caseImg {

    width: 61.06%;

    height: 315px;

  }

  .contetnt-list1 {

    margin-top: 40px;

    padding-top: 35px;

  }

  .list-nowrap > h1 {

    font-size: 35px;

    letter-spacing: 3px;

    color: #333333;

    text-align: center;

    margin-bottom: 30px;

  }

  .list-nowrap > p {

    line-height: 26px;

    font-size: 16px;

  }

  .item-ind {

    margin-top: 45px;

    padding: 0 10px;

    justify-content: space-around;

  }

  .item-ind > div {

    width: 43%;

    height: 280px;

    margin-bottom: 100px;

    cursor: pointer;

  }

  .zn-model {

    padding-top: 50px;

  }

  .zn-model .t-txt h1 {

    font-size: 30px;

  }

  .item-list {

    margin-top: 38px;

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: space-around;

  }
  
  .item-list > div{
      line-height: 45px;
  }

  .position-left {

    padding-top: 80px;

    padding-left: 4%;

    background-color: rgba(000, 000, 000, 0.5);

    width: 45.88%;

    height: 544px;

    position: absolute;

    top: 45%;

    left: 0%;

    transform: translate(0%, -50%);

    animation: left 0.5s linear;

  }

  .bottom-menu {

    display: flex;

    justify-content: space-between;

    position: absolute;

    bottom: 25px;

    width: 72%;

    left: 50%;

    transform: translate(-50%, 0%);

  }

  .bottom-menu > div {

    height: 162px;

    width: 162px;

    position: relative;

    font-size: 30px;

    text-align: center;

    line-height: 200px;

    color: #ffffff;

    cursor: pointer;

    opacity: 0.6;

  }

  .bottom-menu .bbox {

    width: 162px;

    height: 162px;

    line-height: 90px;

    background-color: transparent;

    margin: auto;

    display: flex;

    align-items: center;

    box-shadow: 0px 4px 30px #fff;

    animation: display 2.5s infinite;

    transition: all 0.2s linear;

  }

  .bottom-menu .outside {

    width: 92px;

    height: 92px;

    margin: auto;

    display: flex;

    align-items: center;

    box-shadow: 0px 4px 30px #fff;

    animation: move 2.5s infinite;

  }

  .bottom-menu .inside {

    width: 42px;

    height: 42px;

    margin: auto;

    display: flex;

    align-items: center;

    box-shadow: 0px 4px 30px #fff;

    animation: move 2.5s infinite;

  }

  .bottom-menu p {

    line-height: 162px;

    font-size: 18px;

  }

  .content-model {

    height: 740px;

    margin-top: 52px;

    position: relative;

    display: none;

  }

  .b-txt p {

    width: 85%;

    font-size: 18px;

  }

  .b-txt h1 {

    font-size: 30px;

  }

  .b-txt {

    margin-top: 50px;

  }

  .bottom-sw .list-item h3 {

    margin-top: 30px;

    font-size: 16px;

  }

  .content-gj {

    /* height: 1200px;

    margin-top: 53px; */

    background-position: center;

    background-repeat: no-repeat;

    padding-top: 66px;

  }

  .content-gj h1,

  .content-gj p {

    width: 100%;

    padding: 0 10px;

    text-align: center;
    font-family: OPPOSans-R;
  }

  .content-gj h1 {

    font-size: 30px;

    color: #333333;

    margin-bottom: 25px !important;

  }

  .content-gj p {

    font-size: 16px;

    line-height: 25px;

    color: #333333;

  }

  .content-look {

    background-color: #f7f8f6;

    padding-top: 55px;

    padding-bottom: 70px;

  }

  .bottom-sw .list-item {

    display: flex;

    width: 100%;

    margin: auto;

    margin-top: 38px;

    text-align: center;

    justify-content: space-evenly;

  }

  .content-look .cen > h1 {

    font-size: 30px;
    font-family: OPPOSans-B;
  }

  .content-look .cen > p {

    font-size: 16px;

    line-height: 24px;

  }

  .list-t {

    margin-top: 60px;

    margin-bottom: 60px;

  }

  .content-look,

  .list-t,

  .content-look,

  .list-b {

    display: flex;

    justify-content: space-around;

  }

  .list-t > div,

  .list-b > div {

    width: 12%;

    font-size: 19px;

    line-height: 15px;

    color: #0071e3;

  }

  .content-garage .t-txt {

    width: 80%;

    text-align: center;

    margin: auto;

    margin-top: 114px;

  }

  .content-garage .t-txt {

    width: 85%;

    text-align: center;

    margin: auto;

    margin-top: 55px;

  }

  .content-garage .t-txt h1 {

    font-size: 30px;

    color: #333333;

  }

  .content-garage .t-txt p {

    font-size: 15px;

    line-height: 25px;

    color: #333333;

    margin-top: 16px;

  }

  .content-garage .bottom-sw .list-ico {

    display: flex;

    justify-content: space-between;

    width: 95%;

    margin: auto;

    margin-top: 30px;

    text-align: center;

  }

  .content-navigation .text {

    margin-left: 28px;

    width: 94%;

    text-align: right;

    padding-top: 55px 10px;

  }
  .content-navigation ul{
    margin-left: 28px;

    width: 94%;
  }
  .content-navigation ul div{
      max-width: 51%;
  }

  .content-navigation .text h1 {

    font-size: 30px;

    color: #333333;

  }

  .content-navigation .text p {

    font-size: 16px;

    line-height: 25px;

    color: #333333;

    margin-top: 18px;

  }

  .content-navigation {

    height: 666px;

    margin-top: 50px;

  }

}

/* pad端 */

@media screen and (min-width: 768px) and (max-width: 991px) {

  .mybanner .area {

    width: 100%;

  }
  


  .area {

    width: 100%;

    padding: 0 10px;

  }



  .area2 {

    width: 100%;

    margin: auto;

  }

  .content-navigation .text {

    margin-left: 300px;

    width: 1033px;

    text-align: right;

    padding-top: 105px;

  }

  .mybanner .area h1 {

    font-size: 45px;

  }

  .caseTxt h1 {

    font-size: 24px;

  }

  .caseTxt p {

    font-size: 15px;

    line-height: 26px;

    margin-top: 20px;

  }

  .content-case .caseTxt {

    width: 36.93%;

    padding-top: 8px;

  }

  .content-case {

    margin-top: 50px;

  }

  .content-case .caseImg {

    width: 61.06%;

    height: 228px;

  }

  .contetnt-list1 {

    margin-top: 30px;

    padding-top: 30px;

  }

  .list-nowrap > h1 {

    font-size: 25px;

    letter-spacing: 3px;

    color: #333333;

    text-align: center;

    margin-bottom: 30px;

  }

  .list-nowrap > p {

    line-height: 22px;

    font-size: 14px;

  }

  .item-ind {

    margin-top: 45px;

    padding: 0 10px;

    justify-content: space-around;

  }

  .item-ind > div {

    width: 45%;

    height: 200px;

    margin-bottom: 110px;

    cursor: pointer;

  }

  .zn-model {

    padding-top: 50px;

  }

  .zn-model .t-txt h1 {

    font-size: 30px;

  }

  .item-list {

    margin-top: 38px;

    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-around;

  }

  .position-left {

    padding-top: 24px;

    padding-left: 4%;

    background-color: rgba(000, 000, 000, 0.5);

    width: 45.88%;

    height: 366px;

    position: absolute;

    top: 40%;

    left: 0%;

    transform: translate(0%, -50%);

    animation: left 0.5s linear;

  }

  .bottom-menu {

    display: flex;

    justify-content: space-between;

    position: absolute;

    bottom: 25px;

    width: 72%;

    left: 50%;

    transform: translate(-50%, 0%);

  }

  .bottom-menu > div {

    height: 100px;

    width: 100px;

  }

  .bottom-menu .bbox {

    width: 100px;

    height: 100px;

  }

  .bottom-menu .outside {

    width: 65px;

    height: 65px;

  }

  .bottom-menu .inside {

    width: 30px;

    height: 30px;

  }

  .bottom-menu p {

    line-height: 100px;

    font-size: 14px;

    width: 100px;

  }

  .content-model {

    height: 540px;

    margin-top: 52px;

    position: relative;

    display: none;

  }

  .b-txt p {

    width: 85%;

    font-size: 14px;

    line-height: 25px;

  }

  .b-txt h1 {

    font-size: 25px;

  }

  .b-txt {

    margin-top: 35px;

  }

  .bottom-sw .list-item h3 {

    margin-top: 30px;

    font-size: 16px;

  }

  .content-gj {

    /* height: 400px;

    margin-top: 20px; */

    background-position: center;

    background-repeat: no-repeat;

    padding-top: 30px;

  }

  .content-gj h1,

  .content-gj p {

    width: 100%;

    padding: 0 10px;

    text-align: center;

  }

  .content-gj h1 {

    font-size: 30px;

    color: #333333;

    margin-bottom: 25px !important;

  }

  .content-gj p {

    font-size: 16px;

    line-height: 25px;

    color: #333333;

  }

  .content-look {

    background-color: #f7f8f6;

    padding-top: 40px;

    padding-bottom: 40px;

    padding-left: 10px;

    padding-right: 10px;

  }

  .bottom-sw .list-item {

    display: flex;

    width: 100%;

    margin: auto;

    margin-top: 20px;

    text-align: center;

    justify-content: space-evenly;

  }

  .content-look .cen > h1 {

    font-size: 25px;

  }

  .content-look .cen > p {

    font-size: 14px;

    line-height: 25px;
    font-family: OPPOSans-R;
  }

  .list-t {

    margin-top: 24px;

    margin-bottom: 28px;

  }

  .content-look,

  .list-t,

  .content-look,

  .list-b {

    display: flex;

    justify-content: space-around;

  }

  .list-t > div,

  .list-b > div {

    width: 20%;

    font-size: 19px;

    line-height: 15px;

    color: #0071e3;

  }

  .content-garage .t-txt {

    width: 80%;

    text-align: center;

    margin: auto;

    margin-top: 114px;

  }

  .content-garage .t-txt {

    width: 85%;

    text-align: center;

    margin: auto;

    margin-top: 55px;

  }

  .content-garage .t-txt h1 {

    font-size: 30px;

    color: #333333;

  }

  .content-garage .t-txt p {

    font-size: 15px;

    line-height: 25px;

    color: #333333;

    margin-top: 16px;

  }

  .content-garage .bottom-sw .list-ico {

    display: flex;

    justify-content: space-between;

    width: 95%;

    margin: auto;

    margin-top: 10px;

    text-align: center;

  }

  .content-navigation .text {

    margin-left: 0;

    width: 100%;

    text-align: right;

    padding: 30px 10px;

  }

  .content-navigation .text h1 {

    font-size: 25px;

    color: #333333;

  }

  .content-navigation .text p {

    font-size: 14px;

    line-height: 25px;

    color: #333333;

    margin-top: 12px;

  }

  .content-navigation {

    height: 560px;

  }

  .baseCatch h3 {

    font-size: 25px;

  }

  .baseCatch p {

    font-size: 14px;

    line-height: 26px;

  }

}

/* 移动端 */

@media (max-width: 767px) {

  .mybanner .area {

    width: 100%;

  }

  .area {

    width: 100%;

    padding: 0 10px;

    flex-wrap: wrap;

  }



  .area2 {

    width: 100%;

    margin: auto;

  }

  .content-navigation .text {

    margin-left: 300px;

    width: 1033px;

    text-align: right;

    padding-top: 105px;

  }

  .mybanner .area h1 {

    font-size: 40px;

    text-align: center;

  }

  .caseTxt h1 {

    font-size: 20px;

    line-height: 20px;

  }

  .caseTxt p {

    font-size: 12px;

    line-height: 18px;

    margin-top: 16px;

  }

  .content-case .caseTxt {

    width: 100%;

    padding-top: 8px;

  }

  .content-case {

    margin-top: 15px;

  }

  .content-case .caseImg {

    width: 100%;

    height: 180px;

    margin-top: 10px;

  }

  .contetnt-list1 {

    margin-top: 15px;

    padding-top: 15px;

  }

  .list-nowrap > h1 {

    font-size: 20px;

    letter-spacing: 3px;

    color: #333333;

    text-align: center;

    margin-bottom: 15px;

  }

  .list-nowrap > p {

    line-height: 20px;

    width: 95%;

    font-size: 12px;

  }

  .item-ind {

    margin-top: 45px;

    padding: 0 10px;

    justify-content: space-around;

  }

  .item-ind > div {

    width: 45%;

    height: 140px;

    margin-bottom: 95px;

    cursor: pointer;

  }

  .zn-model {

    padding-top: 50px;

  }

  .zn-model .t-txt h1 {

    font-size: 20px;

  }

  .item-list {

    margin-top: 20px;

    width: 108%;

    display: flex;

    align-items: flex-end;

    justify-content: space-around;

  }

  .position-left {

    padding-top: 24px;

    padding-left: 4%;

    background-color: rgba(000, 000, 000, 0.5);

    width: 67%;

    height: 300px;

    position: absolute;

    top: 40%;

    left: 0%;

    transform: translate(0%, -50%);

    animation: left 0.5s linear;

  }

  .bottom-menu {

    display: flex;

    justify-content: space-between;

    position: absolute;

    bottom: 25px;

    width: 99%;

    left: 50%;

    transform: translate(-50%, 0%);

  }

  .bottom-menu > div {

    height: 75px;

    width: 75px;

  }

  .bottom-menu .bbox {

    height: 75px;

    width: 75px;

  }

  .bottom-menu .outside {

    width: 45px;

    height: 45px;

  }

  .bottom-menu .inside {

    width: 30px;

    height: 30px;

  }

  .bottom-menu .sbox {

    width: 10px;

    height: 10px;

  }

  .bottom-menu p {

    line-height: 75px;

    font-size: 12px;

    width: 75px;

  }

  .content-model {

    height: 484px;

    margin-top: 25px;

    position: relative;

    display: none;

  }

  .b-txt p {

    width: 85%;

    font-size: 12px;

    line-height: 20px;

  }

  .b-txt h1 {

    font-size: 25px;

  }

  .b-txt {

    margin-top: 35px;

  }

  .bottom-sw .list-item h3 {

    margin-top: 30px;

    font-size: 16px;

  }

  .content-gj {

    /* height: 280px;

    margin-top: 20px; */

    background-position: center;

    background-repeat: no-repeat;

    padding-top: 30px;

  }

  .content-gj h1,

  .content-gj p {

    width: 100%;

    padding: 0 10px;

    text-align: center;

  }

  .content-gj h1 {

    font-size: 25px;

    color: #333333;

    margin-bottom: 25px !important;

  }

  .content-gj p {

    font-size: 14px;

    line-height: 20px;

    color: #333333;

  }

  .content-look {

    background-color: #f7f8f6;

    padding-top: 40px;

    padding-bottom: 40px;

    padding-left: 10px;

    padding-right: 10px;

  }

  .bottom-sw .list-item {

    display: flex;

    width: 100%;

    margin: auto;

    margin-top: 20px;

    text-align: center;

    justify-content: space-evenly;

  }

  .content-look .cen > h1 {

    font-size: 25px;

  }

  .content-look .cen > p {

    font-size: 12px;

    line-height: 20px;

  }

  .list-t {

    margin-top: 24px;

    margin-bottom: 28px;

  }

  .content-look,

  .list-t,

  .content-look,

  .list-b {

    display: flex;

    justify-content: space-around;

  }

  .list-t > div,

  .list-b > div {

    width: 30%;

    font-size: 12px;

    line-height: 10px;

    color: #0071e3;

  }

  .content-garage .t-txt {

    width: 95%;

    text-align: center;

    margin: auto;

    margin-top: 25px;

  }

  .content-garage .t-txt h1 {

    font-size: 25px;

    color: #333333;

  }

  .content-garage .t-txt p {

    font-size: 12px;

    line-height: 20px;

    color: #333333;

    margin-top: 12px;

  }

  .content-garage .bottom-sw .list-ico {

    display: flex;

    justify-content: space-between;

    width: 99%;

    margin: auto;

    margin-top: 10px;

    text-align: center;

  }

  .content-garage .bottom-sw .list-ico > div {

    width: 20%;

  }

  .content-garage .bottom-sw .list-ico > div p {

    font-size: 12px;

  }

  .content-navigation .text {

    margin-left: 0;

    width: 100%;

    text-align: right;

    padding: 30px 10px;

  }

  .content-navigation .text h1 {

    font-size: 25px;

    color: #333333;

  }

  .content-navigation .text p {

    font-size: 12px;

    line-height: 20px;

    color: #333333;

    margin-top: 12px;

  }

  .content-navigation {

    height: 475px;

  }

  .baseCatch h3 {

    font-size: 20px;

  }

  .baseCatch p {

    font-size: 12px;

    line-height: 18px;

  }



  .item-ind > div h5 {

    font-size: 16px;

    line-height: 16px;

    color: #333333;

  }

  .item-ind > div p {

    font-size: 12px;

    color: #555555;

    line-height: 15px;

  }

  .bottom-sw {

    margin-top: 20px;

  }

  .content-garage .bottom-sw .list-ico p {

    margin-top: 15px;

  }

  .content-navigation {

    margin-top: 20px;

  }

  .item-ind > div img {

    margin-bottom: 8px;

  }

}