@keyframes rotation {
  from {
    transform: rotateY(0deg); }

  to {
    transform: rotateY(-360deg); } }

@keyframes rotation1 {
  from {
    transform: rotateY(0deg); }

  to {
    transform: rotateY(-360deg); } }

@keyframes rotation2 {
  from {
    transform: rotateY(-45deg); }

  to {
    transform: rotateY(-405deg); } }

@keyframes rotation3 {
  from {
    transform: rotateY(-90deg); }

  to {
    transform: rotateY(-450deg); } }

@keyframes rotation4 {
  from {
    transform: rotateY(-135deg); }

  to {
    transform: rotateY(-495deg); } }

@keyframes rotation5 {
  from {
    transform: rotateY(-180deg); }

  to {
    transform: rotateY(-540deg); } }

@keyframes rotation6 {
  from {
    transform: rotateY(-225deg); }

  to {
    transform: rotateY(-585deg); } }

@keyframes rotation7 {
  from {
    transform: rotateY(-270deg); }

  to {
    transform: rotateY(-630deg); } }

@keyframes rotation8 {
  from {
    transform: rotateY(-315deg); }

  to {
    transform: rotateY(-675deg); } }


@media (max-width:1300px){
      .pointContainer{
        display: none !important;
      }
    }
    
/* 灏忓睆骞曪紙骞虫澘锛屽ぇ浜庣瓑浜� 768px锛� */
@media (max-width: 1200px) {
	

.caursel3d {
        width: 136px;
        height: 100px;
        top: 50px;
        perspective: 1200px;
    }


    #carousel figure {
        width: 136px;
        height: 100px;
    }

    #carousel figure:nth-child(1) {
        transform: rotateY(0deg) translateZ(180px);
    }

    #carousel figure:nth-child(2) {
        transform: rotateY(45deg) translateZ(180px);
    }

    #carousel figure:nth-child(3) {
        transform: rotateY(90deg) translateZ(180px);
    }

    #carousel figure:nth-child(4) {
        transform: rotateY(135deg) translateZ(180px);
    }

    #carousel figure:nth-child(5) {
        transform: rotateY(180deg) translateZ(180px);
    }

    #carousel figure:nth-child(6) {
        transform: rotateY(225deg) translateZ(180px);
    }

    #carousel figure:nth-child(7) {
        transform: rotateY(270deg) translateZ(180px);
    }

    #carousel figure:nth-child(8) {
        transform: rotateY(315deg) translateZ(180px);
    }

    .caursel3d-container {
        height: 150px;
    }
    

}

@media (min-width: 1200px) {

 .caursel3d {
        width: 336px;
        height: 208px;
        top: 100px;
        perspective: 1200px;
    }

    #carousel figure {
        width: 336px;
        height: 208px;
    }
	
    #carousel figure:nth-child(1) {
        transform: rotateY(0deg) translateZ(480px);
    }

    #carousel figure:nth-child(2) {
        transform: rotateY(45deg) translateZ(480px);
    }

    #carousel figure:nth-child(3) {
        transform: rotateY(90deg) translateZ(480px);
    }

    #carousel figure:nth-child(4) {
        transform: rotateY(135deg) translateZ(480px);
    }

    #carousel figure:nth-child(5) {
        transform: rotateY(180deg) translateZ(480px);
    }

    #carousel figure:nth-child(6) {
        transform: rotateY(225deg) translateZ(480px);
    }

    #carousel figure:nth-child(7) {
        transform: rotateY(270deg) translateZ(480px);
    }

    #carousel figure:nth-child(8) {
        transform: rotateY(315deg) translateZ(480px);
    }

    .caursel3d-container {
        position: relative;
    }
    

.caursel3d-container {
    position: relative;
}





.responsibility .more {
    top: 50px;
}
/* 420,260 */
/* .carousel3d { */
.caursel3d {
  display: block;
  position: relative;
  margin: auto; }

#carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: auto;
 
  transform-style: preserve-3d;

  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: rotation; }

#carousel:hover {
    animation-play-state: paused;
}

#carousel figure {
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    overflow: hidden;
}
.caursel3d img{
  cursor: pointer;
  transition: all .5s ease;
  
  width: 100%;
  height: 100%; }

.caursel3d img:hover{
  transform: scale(1.2, 1.2); }