@charset "UTF-8";


.bg_3D {
  width: 100%;
  height: 100vh;
  background-color: #333;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.bg_3D .bg {
  width: 100.8%; /*To fix rotate*/
  height: 100.8vh;
  background-position: left top;;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  opacity: 0;
  transform: scale(1.1, 1.1) rotate(0deg);
  -ms-transform: scale(1.1, 1.1) rotate(0deg);	/* IE 9 */
  -webkit-transform: scale(1.1, 1.1) rotate(0deg);	/* Safari 和 Chrome */
  -o-transform: scale(1.1, 1.1) rotate(0deg);	/* Opera */
  -moz-transform: scale(1.1, 1.1) rotate(0deg);	/* Firefox */
  transition: transform 3s ease, opacity .5s ease;
  -moz-transition: transform 3s ease, opacity .5s ease; /* Firefox 4 */
  -webkit-transition: transform 3s ease, opacity .5s ease; /* Safari 和 Chrome */
  -o-transition: transform 3s ease, opacity .5s ease; /* Opera */
  position: relative;
  left: -0.4%; /*To fix rotate*/
  top: -0.4%;
}
.bg_3D .bg.active {
  opacity: 1;
  transform: scale(1, 1) rotate(0.2deg); /*to fix IE browser shaking when transition*/
  -ms-transform: scale(1, 1) rotate(0.2deg);	/* IE 9 */
  -webkit-transform: scale(1, 1) rotate(0.2deg);	/* Safari 和 Chrome */
  -o-transform: scale(1, 1) rotate(0.2deg);	/* Opera */
  -moz-transform: scale(1, 1) rotate(0.2deg);	/* Firefox */
}
.bg_3D .bg.bg_01 {
  background-image: url(../images/bg1.jpg);
  background-position-x: center;
}
.bg_3D .bg.bg_02 {
  background-image: url(../images/bg2.jpg);
  background-position-x: center;
}
.bg_3D .bg.bg_03 {
  background-image: url(../images/bg3.jpg);
  background-position-x: center;
  /* background-position-y: -10px; */
}
.bg_3D .bg.bg_04 {
  background-image: url(../images/bg4.jpg);
  background-position-x: center;
}
.bg_3D .bg.bg_05 {
  background-image: url(../images/bg5.jpg);
  background-position-x: center;
}

@media screen and (width:1024px) and (height:1366px) {
  .bg_3D .bg.bg_01 {
    background-position-x: -650px;
  }
  .bg_3D .bg.bg_02 {
    background-position-x: -600px;
  }
  .bg_3D .bg.bg_03 {
    background-position-x: center;
  }
  .bg_3D .bg.bg_04 {
    background-position-x: center;
  }
  .bg_3D .bg.bg_05 {
    background-position-x: 75%;
  }
}
@media screen and (max-width:1200px) {
  .bg_3D .bg.bg_01 {
    background-position-x: 75%;
  }
  .bg_3D .bg.bg_03 {
    background-position-y: 20px;
  }
}
@media screen and (max-width:768px) {
  .bg_3D .bg.bg_01 {
    background-position-x: 33%;
  }
  .bg_3D .bg.bg_02 {
    background-position-x: 33%;
  }
  .bg_3D .bg.bg_03 {
    background-position-y: 0;
  }
  .bg_3D .bg.bg_05 {
    background-position-x: 75%;
  }
}

@media screen and (max-width:320px) {
  .bg_3D .bg.bg_03 {
    background-position-x: 37%;
  }
}