
@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;
      }
    }
    

.huaneng-container{
  margin-top:-70px;	
}	

 .caursel3d {
        width: 300px;
        height: 208px;
        top: 30px;
        perspective: 2100px;
    }

    #carousel figure {
        width: 280px;
    }

    #carousel figure:nth-child(1) {
        transform: rotateY(0deg) translateZ(460px);
    }

    #carousel figure:nth-child(2) {
        transform: rotateY(45deg) translateZ(460px);
    }

    #carousel figure:nth-child(3) {
        transform: rotateY(90deg) translateZ(460px);
    }

    #carousel figure:nth-child(4) {
        transform: rotateY(135deg) translateZ(460px);
    }

    #carousel figure:nth-child(5) {
        transform: rotateY(180deg) translateZ(460px);
    }

    #carousel figure:nth-child(6) {
        transform: rotateY(225deg) translateZ(460px);
    }

    #carousel figure:nth-child(7) {
        transform: rotateY(270deg) translateZ(460px);
    }

    #carousel figure:nth-child(8) {
        transform: rotateY(315deg) translateZ(460px);
    }
     
	#carousel figure:nth-child(9) {
        transform: rotateY(225deg) translateZ(180px);
    }

    #carousel figure:nth-child(10) {
        transform: rotateY(270deg) translateZ(180px);
    }

    #carousel figure:nth-child(11) {
        transform: rotateY(315deg) translateZ(180px);
    }
    .caursel3d-container {
        position: relative;
    }
    

.responsibility {
  position: relative; }

.responsibility .title span {
  background-color: #fff; }

.caursel3d-container {
    position: relative;
}


.showSelectImg-container {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.showSelectImg {
  display: block;
  width: 500px;
  height: 100%;
  margin: 0 auto; }

.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: 0px;
    overflow: hidden;
}
.caursel3d img{
  cursor: pointer;
  transition: all .5s ease;
  
  width: 100%;
  height: 100%; }
/*
.caursel3d img:hover{
  transform: scale(1.2, 1.2); }
*/
