#banner {
  position: relative;
}

#banner .container {
  position: absolute;
  left: 0;
  right: 0;
  width: 1200px;
  top: 26%;
  color: #fff;
  display: block;
}

#banner a {
  display: inline-block;
  cursor: auto;
}

#banner .container .bannerButtonBox .code a {
  width: 170px;
  margin-right: 100px;
}

#banner a img {
  width: 100%;
  vertical-align: middle;
}

#banner .container .bannerTitle {
  font-size: 2.75rem;
  font-weight: bold;
}

#banner .container .bannerTontent {
  font-size: 2.25rem;
  margin: 2rem 0rem 6rem 0rem;
}

#banner .container .bannerButtonBox {
  display: flex;
  width: 48%;
}

#banner .container .bannerButtonBox .androidBtn {
  cursor: pointer;
}

#banner .container .bannerButtonBox .button .iosBtn {
  margin-top: 2rem;
  cursor: pointer;
}

#banner .container .bannerButtonBox .code {
  margin-left: auto;
}

#management {
  padding: 3.8125rem 0rem 5.25rem 0rem;
  background-color: #fff;
}


#management>.container>.row .content {
  height: 665px;
  position: relative;
  overflow: hidden;
}

.public>.container>.row .content .left {
  text-align: center;
}

.public>.container>.row .content .left a {
  display: inline-block;
  width: 22.3rem;
  position: relative;
}

.public>.container>.row .content .left a img {
  width: 100%;
}

.public>.container>.row .content .left a>.options {
  position: absolute;
  left: 0%;
  width: 8rem;
  top: 0;
  padding-top: 100px;
  transition: .8s;
  opacity: 0;
  transform: translateX(-50%);
}

.public>.container>.row .content .left a>.options.managementoptions {
  left: 19%;
  opacity: 1;
}

.public>.container>.row .content .right {
  padding-top: 11.4375rem;
}

.public>.container>.row .content div {
  display: inline-block;
  /* width: 49%; */
  vertical-align: top;
}

.public>.container>.row .content .tranLeft {
  position: absolute;
  right: 80%;
  transition: 1s;
  opacity: 0;
}

.public>.container>.row .content .tranRight {
  position: absolute;
  left: 80%;
  transition: 1s;
  opacity: 0;
}

.public>.container>.row .content .tranLeft.LeftScroll {
  right: 54%;
  opacity: 1;
}

.public>.container>.row .content .tranRight.RightScroll {
  left: 55%;
  opacity: 1;
}

.public>.container>.row .content .right .info {
  width: 28.8125rem;
  margin: 0 auto;
}

.public>.container>.row .content .right .title,.complaints .title{
  font-size: 3.25rem;
  margin: 0rem;
}
#footer p{
  font-size: 2.4rem;
}
.complaints{
  padding: 3.8125rem 0rem 5.25rem 0rem;
}
.complaints .solid{
  margin-top: 2.8rem;
  margin-bottom: 3rem;
  width: 3.375rem;
  height: 0.375rem;
  background: rgba(253, 126, 44, 1);
}
.public>.container>.row .content .right .solid {
  margin-top: 2.8rem;
  margin-bottom: 3rem;
  width: 3.375rem;
  height: 0.375rem;
  background: rgba(253, 126, 44, 1);
}

.public>.container>.row .content .right span{
  color: #666;
  font-family: PingFang-SC-Regular;
  font-size: 1.375rem;
  line-height: 2.6rem;
  display: inline-block;
  font-weight: 400;
}
.complaints p{
  color: #666;
  font-family: PingFang-SC-Regular;
  font-size: 1.375rem;
  line-height: 2.6rem;
  font-weight: 400;
  margin: 0;
}
#case {
  padding-top: 5.18rem;
  padding-bottom: 4.5rem;
  background: rgba(166, 166, 166, 0.1);
}

#case>.container>.row .content {
  height: 665px;
  position: relative;
  overflow: hidden;
}

#case>.container>.row .content .right .info {
  width: 28rem;
}

#case>.container>.row .content .left a {
  display: inline-block;
  width: 22.3rem;
  position: relative;
}

#case>.container>.row .content .left a>.position {
  position: absolute;
}

#case>.container>.row .content .left a>.modern {
  width: 6.3125rem;
  top: -18%;
  right: 76.8%;
  transition: .35s;
  opacity: 0;
  transform: scale(0);
}

#case>.container>.row .content .left a>.contracted {
  width: 7.25rem;
  top: -21%;
  right: 94.1%;
  transition: .5s;
  opacity: 0;
  transform: scale(0);
}

#case>.container>.row .content .left a>.american {
  width: 6.3125rem;
  top: -18%;
  left: 92.7%;
  transition: .35s;
  opacity: 0;
  transform: scale(0);
}

#case>.container>.row .content .left a>.ChineseStyle {
  width: 4.3125rem;
  top: -21.1%;
  left: 92.7%;
  transition: .5s;
  opacity: 0;
  transform: scale(0);
}


#case>.container>.row .content .left a>.modern.caseModern {
  top: 8.5%;
  opacity: 1;
  transform: scale(1);
}

#case>.container>.row .content .left a>.contracted.caseContracted {
  top: 32%;
  opacity: 1;
  transform: scale(1);
}

#case>.container>.row .content .left a>.american.caseAmerican {
  top: 19%;
  opacity: 1;
  transform: scale(1);
}

#case>.container>.row .content .left a>.ChineseStyle.caseChineseStyle {
  top: 47.9%;
  opacity: 1;
  transform: scale(1);
}

#case>.container>.row .content .tranLeft.caseLeftScroll {
  right: 49%;
  opacity: 1;
}

#case>.container>.row .content .tranRight.caseRightScroll {
  left: 45%;
  opacity: 1;
}

#package {
  padding-top: 7rem;
  padding-bottom: 4.3125rem;
  background-color: #fff;
}

#package>.container>.row .content {
  height: 665px;
  position: relative;
  overflow: hidden;
}

#package>.container>.row .content .left a {
  width: 22.3rem;
}

#package>.container>.row .content .left a img {
  position: relative;
  z-index: 66;
}

#package>.container>.row .content .left a>.packageImg {
  position: absolute;
  z-index: 60;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0rem;
  /* opacity: 0; */
  transition: 1s;
}

#package>.container>.row .content .left a>.packageImg.packageImgScroll {
  /* opacity: 1; */
  width: 33.375rem;
}

#package>.container>.row .content .tranLeft.packageLeftScroll {
  right: 51%;
  opacity: 1;
}

#package>.container>.row .content .tranRight.packageRightScroll {
  left: 54%;
  opacity: 1;
}

#vr {
  background: rgba(166, 166, 166, 0.1);
  padding-top: 5.1875rem;
  padding-bottom: 4.125rem;
}

#vr>.container>.row .content {
  height: 665px;
  position: relative;
  overflow: hidden;
}

#vr>.container>.row .content .left a {
  width: 22.3rem;
}

#vr>.container>.row .content .left a img {
  position: relative;
  z-index: 66;
}

#vr>.container>.row .content .left a>.vr {
  position: absolute;
  z-index: 60;
}

#vr>.container>.row .content .left a>.square {
  width: 13.125rem;
  top: 5%;
  right: 210%;
  transition: 1s;
  transform: scale(0);
}

#vr>.container>.row .content .left a>.square.squareScroll {
  right: 82.4%;
  transform: scale(1);
}

#vr>.container>.row .content .left a>.VRsquare {
  width: 8.75rem;
  top: 40%;
  left: 92%;
  transition: .5s;
  opacity: 0;
}

#vr>.container>.row .content .left a>.VRsquare.VRsquareScroll {
  opacity: 1;
  top: 66.1%;
}

#vr>.container>.row .content .tranLeft.vrLeftScroll {
  right: 44%;
  opacity: 1;
}

#vr>.container>.row .content .tranRight.vrRightScroll {
  left: 51.4%;
  opacity: 1;
}

#vr>.container>.row .content .right {
  padding-top: 11.625rem;
}

/* 适配屏幕缩放 */
@media (max-width: 1800px) {
  #banner .container .bannerTontent {
    margin: 2rem 0rem 5.5rem 0rem;
  }
}

@media (max-width: 1700px) {
  #banner .container .bannerTontent {
    margin: 2rem 0rem 5rem 0rem;
  }
}

@media (max-width: 1600px) {
  #banner .container .bannerTontent {
    margin: 2rem 0rem 4.5rem 0rem;
  }
}

@media (max-width: 1500px) {
  #banner .container .bannerTontent {
    margin: 2rem 0rem 4rem 0rem;
  }

  #banner .container {
    top: 22%;
  }
}

@media (max-width: 1400px) {
  #banner .container .bannerTontent {
    margin: 2rem 0rem 3.5rem 0rem;
  }

  #banner .container {
    top: 20%;
  }
}

@media (max-width: 1300px) {
  #banner .container .bannerTontent {
    margin: 2rem 0rem 3rem 0rem;
  }

  #banner .container .bannerButtonBox .code a {
    margin-right: 100px;
  }

  #banner .container {
    top: 22%;
  }
}

/* 适配ipad */
@media (max-width: 1200px) {

  .public>.container>.row .content .tranLeft {
    right: 50%;
    opacity: 1;
  }

  #banner .container .bannerButtonBox .code a {
    width: 120px;
    margin-left: 10px;
  }

  #banner .container {
    top: 20%;
    right: 156px;
  }

  #banner .container .bannerButtonBox .button .iosBtn {
    margin-top: 1rem;
  }

  #banner .container .bannerTontent {
    margin: 2rem 0rem 3rem 0rem;
  }

  .public>.container>.row .content .tranRight {
    left: 50%;
    opacity: 1;
  }

  #management {
    padding: 2rem 0rem 2rem 0rem;
    background-color: #fff;
  }

  #management>.container>.row .content {
    height: 524px;
  }

  #case>.container>.row .content {
    height: 480px;
  }

  #case {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #package {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #fff;
  }

  #package>.container>.row .content {
    height: 486px;
  }

  #vr {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #vr>.container>.row .content {
    height: 476px;
  }

  .public>.container>.row .content .tranLeft .info {
    margin-left: 22%;
  }

}

/* 适配ipad */
@media (max-width: 1024px) {
  #banner .container {
    top: 23%;
    right: 0px;
  }

  #banner .container .bannerButtonBox .code a {
    width: 122px;
    margin-left: 10px;
  }
}

/* 适配ipad */
@media (max-width: 768px) {
  #banner .container {
    top: 20%;
    right: 0px;
  }

  #banner .container .bannerTitle {
    font-size: 2rem;
  }

  #banner .container .bannerTontent {
    font-size: 1.8rem;
  }

  #banner .container .bannerButtonBox .button a {
    width: 200px;
  }

  #banner .container .bannerButtonBox .code a {
    width: 114px;
  }

}

/*@media (max-width: 414px) {*/
@media (max-width: 768px) {
  #banner .container {
    display: none;
  }

  /*#banner {*/
    /*padding-top: 50px;*/
  /*}*/

  .public>.container>.row .content .left a {
    width: 168px;
  }

  .public>.container>.row .content .right {
    padding-top: 5.5rem;
  }

  .public>.container>.row .content .right .title ,.complaints .title{
    font-size: 2.25rem;
  }
  .complaints{
    padding: 3rem 2rem;
  }
  #footer p{
    font-size: 12px;
  }
  .public>.container>.row .content .right .solid {
    margin-top: 1.8rem;
    margin-bottom: 2rem;
  }

  .public>.container>.row .content .right span {
    font-size: 12px;
    line-height: 2rem;
  }
  .complaints p{
    font-size: 12px;
    line-height: 2rem;
    color: #666;
  }
  .public>.container>.row .content .right .info {
    width: 100%;
  }

  .public>.container>.row .content .right:nth-child(2) {
    padding-left: 4px;
    padding-right: 30px;
  }

  .public>.container>.row .content .right:nth-child(1) {
    padding-left: 30px;
    padding-right: 0px;
  }

  #management>.container>.row .content {
    height: 300px;
  }

  .public>.container>.row .content .tranLeft .info {
    margin-left: 0%;
  }

  #case>.container>.row .content .right .info {
    width: 100%;
  }

  #case>.container>.row .content .left a {
    width: 168px;
  }

  #case>.container>.row .content .right {
    padding-top: 3.5rem;
  }

  #case>.container>.row .content {
    height: 300px;
  }

  #case>.container>.row .content .left a>.modern {
    width: 6.3125rem;
    top: -18%;
    right: 76.8%;
    transition: .35s;
    opacity: 1;
    transform: scale(1);
  }

  #case>.container>.row .content .left a>.modern {
    width: 4rem;
    top: 10%;
    right: 45%;
    opacity: 1;
    transform: scale(1);
  }

  #case>.container>.row .content .left a>.contracted {
    width: 3.25rem;
    top: 38%;
    right: 75.1%;
    opacity: 1;
    transform: scale(1);
  }

  #case>.container>.row .content .left a>.american {
    width: 4rem;
    top: 60%;
    left: 42.7%;
    opacity: 1;
    transform: scale(1);
  }

  #case>.container>.row .content .left a>.ChineseStyle {
    width: 3rem;
    top: 44%;
    left: 77.7%;
    opacity: 1;
    transform: scale(1);
  }

  #package>.container>.row .content .left a {
    width: 168px;
  }

  #package>.container>.row .content {
    height: 300px;
  }

  #package>.container>.row .content .right {
    padding-top: 6rem;
  }

  #vr>.container>.row .content .left a {
    width: 160px;
  }

  #vr>.container>.row .content .right {
    padding-top: 4.8rem;
  }

  #vr>.container>.row .content {
    height: 290px;
  }

  #banner .getLoad {
    display: none;
  }

}

@media (max-width: 375px) {
  #vr>.container>.row .content {
    height: 244px;
  }

  #case>.container>.row .content .left a>.ChineseStyle {
    left: 72%;
  }

  #vr>.container>.row .content .left a {
    width: 13.5rem;
  }

  #package {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #fff;
  }

  #management {
    padding: 2rem 0rem 2rem 0rem;
  }

  #case {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #vr {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (max-width: 320px) {
  .public>.container>.row .content .left a {
    width: 12rem;
  }

  .public>.container>.row .content .right {
    padding-top: 3rem;
  }

  .public>.container>.row .content .right:nth-child(2) {
    padding-left: 8px;
    padding-right: 22px;
  }

  #management>.container>.row .content {
    height: 262px;
  }

  #case>.container>.row .content .left a {
    width: 12rem;
  }

  #case>.container>.row .content .right {
    padding-top: 1rem;
  }

  #case>.container>.row .content {
    height: 262px;
  }

  #package>.container>.row .content .left a {
    width: 12rem;
  }

  #package>.container>.row .content .right {
    padding-top: 3.5rem;
  }

  #package>.container>.row .content {
    height: 262px;
  }

  #vr>.container>.row .content .left a {
    width: 11.5rem;
  }

  #vr>.container>.row .content .right {
    padding-top: 4rem;
  }

  #vr>.container>.row .content {
    height: 248px;
  }

  .public>.container>.row .content .right .solid {
    width: 4.375rem;
  }
}