

@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) {

.play{

	display:none !important;

}



#a03{

	padding-top:50px !important;

}	

	

#gallery {

	width: 30%!important;

}	



#china {

	width: 30%!important;

}	



#special {

	width: 30%!important;

}	

	

.china-content .tab-pane {

	height: 320px; 

	overflow:hidden;

}	



.special-content .tab-pane {

	height: 350px; 

	overflow:hidden;

}	

	

.text {

  padding: 0 5%;

  margin-top: 15px;

  font-size: 1.6rem;

  height: 37px;

  overflow: hidden;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  text-overflow: ellipsis;

  display: -webkit-box;

  }



    .news-container{

        background: #fff!important;

        padding: 40px 0!important;

    }



    .responsibility-container{

		padding: 0 !important;

		margin-bottom: 40px;

	}

	

	.responsibility-container>.responsibility>.more{

		top: 50px !important;

		position: relative !important;

		margin: 0;

	}



    .news-radio{

        top: 75px!important;

        margin-right: 10px!important;

    }



    .huaneng-content{

        margin-top: 30px!important;

    }



    .atvimg {

    width: 200%;

    height: auto; }



  .image-subcard {

    width: 90%;

    height: auto;

    margin: 15px 5%; }



  .news-list {

    padding: 0 5% !important; }



    .news-list-item{

        margin: 15px 0;

        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.11);

        border-bottom: none;

        border-radius: 10px;

        behavior:url(/cms-chng-theme/js/PIE.htc);

    	-ms-behavior:url(/cms-chng-theme/js/PIE.htc);

    }



  .news-item-img {

    width: 70px;

    top: 50% !important;

    margin-top: -50px;

 }



  .news-index {

    width: 50px;

    height: 50px; }



  .news-date {

    top: 30px;

    height: 15px;

    line-height: 15px; 

    font-size: 10px !important;

}



  .news-list-con {

    margin-left: 80px;

    height: 160px !important; }



  .news-detail {

    height: auto !important;

    margin-bottom: 0 !important; 

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

  }



.caursel3d {


        width: 176px;

        height: 170px;

        top: 50px;

        perspective: 1200px;

    }

.portlet-content-container{
  margin-top: 450px !important;
}



    #carousel figure {

        width: 176px;

        height: 170px;

    }



    #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;

    }


  .galleryrow .item,

  .galleryrow2 .item {

    height: 125px; }



  .galleryrow .item span,

  .galleryrow2 .item span {

    font-size: 0.8rem; }



  .video,

  .picture {

    width: 20px;

    height: 21px; }



  .play {

    width: 36px;

    height: 36px; }



  .galleryrow .item:hover span,

  .galleryrow2 .item:hover span {

    font-size: 1.4rem; }



    .china-item {

      width: 20%!important;

    margin: 0; }



  .special-item {

      width: 25%!important;

    padding: 0 10px !important; }



  .show-item {

    width: 90%;

    height: 100px;

    margin: 5%; }



  .special-item img {

    width: 100%;

    height: auto;

    border-radius: 15px;

     }



  .showroom {

    width: 100%;

    height: 200px; }



  .show-tips {

    margin-top: -47px; }



  .galleryrow,

  .galleryrow2 {

    height: 300px; } 

    #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);

  }
  
}

/* æ¶“î… ç“‘çžå¿“ç®·é”›å Ÿî”‘é—ˆãˆ¡æ¨‰ç»€å“„æ«’é”›å±½ã‡æµœåº£ç“‘æµœï¿½ 992pxé”›ï¿½ */

@media (min-width: 1200px) {

.huaneng-container{

  margin-top:-70px;	

}	

	

.text {

  padding: 0 5%;

  margin-top: 15px;

  font-size: 1.6rem;

  height: 44px;

  overflow: hidden;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  text-overflow: ellipsis;

  display: -webkit-box;

  }



  .atvimg {

    width: 510px;

    height: 170px;

    }



  .image-subcard {

    width: 255px;

    height: 290px; }



  .news-list-item {

    height: 170px; }



  .news-item-img {

    width: 132px; }



  .news-index {

    width: 40px;

    height: 40px;

    line-height:40px !important;  }



  .news-date {

    position: relative;

    top: 30px;

    height: 20px;

    line-height: 20px; }



  .news-list-con {

    margin-left: 140px;

    /* margin-left: 20px; */ }



/*  .responsibility .menus {

    padding: 0 100px; }*/



 .caursel3d {

        width: 336px;

        height: 208px;

        top: 100px;

        perspective: 2100px;

    }



    #carousel figure {

        width: 249px;

        height: 229px;

    }



    #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;

    }

    



  .video,

  .picture {

    width: 30px;

    height: 28px; }



  .play {

    width: 48px;

    height: 48px; }



  .item span {

    font-size: 1.8rem; }



  .item:hover span {

    font-size: 2.4rem; }



  .china-content,

  .special-content {

    margin-left: 90px;

    width: 1100px; }



  .china-item {

    margin: 10px; }



  .special-item img {

    width: 540px;

    height: auto;

    border-radius: 15px;

     }



  .show-item {

    width: 100%;

    height: 118px; }



  .showroom {

    height: 500px; }



  .show-tips {

    margin-top: -77px; } }

header {

  height: auto !important; }



.col-xs-6 {

  padding: 0 !important; }



/* é—æŒŽæ°¨é‹ï¿½ */

.anchorContainer {

  position: fixed;

  right: 50px;

  top: 25%;

  height: 180px;

  width: 30px;

  background-color: transparent;

  padding-right: 0;

  border-radius: 5px;

  behavior:url(../images/pie.htc);

  -ms-behavior:url(/cms-chng-theme/js/PIE.htc);

  z-index: 999;

  visibility: hidden;

  transition: all .3s; }



.pointContainer {

  width: 30px;

  height: 30px; }



.pointContainer a {

  display: inline-block;

  width: 10px;

  height: 10px;

  border-radius: 50px;

  behavior:url(/cms-chng-theme/js/PIE.htc);

  -ms-behavior:url(/cms-chng-theme/js/PIE.htc);

  background-color: #949494; }



.pointContainer a:hover {

  transform: scale(1.3); }



.actAnchor a {

  display: inline-block;

  width: 10px;

  height: 25px;

  border-radius: 50px;

  behavior:url(/cms-chng-theme/js/PIE.htc);

  -ms-behavior:url(/cms-chng-theme/js/PIE.htc);

  background-color: #0054A7; }



/* é–ºå‚™å³å¦žå Ÿç¨‰é¡“ç‚µå¦‡ */

.news-container {

  position: relative;

  width: 100%;

  height: 100%;

  padding: 60px 0;

  background-color: #f6f6f6;



}



.news {

  position: relative; }



.news .more {

  top: -10px; }



.news-radio {

  position: absolute;

  right: 10px;

  top: 0;

  width: 100px;

  font-size: 0;

  height: 30px;

  border: 1px solid #b9b9b9; }



.news-radio span {

  display: inline-block;

  width: 50%;

  height: 100%;

  font-size: 1.2rem;

  text-align: center;

  line-height: 30px;

  cursor: pointer; }



.atvSelect {

  background-color: #0054a7;

  color: #fff; }



.image-card {

  /* margin-top: 20px; */

  margin: 60px -15px 0 -15px; }



.image-subcard {

  margin-bottom: 0;

  margin: 15px auto;

  cursor: pointer;

  overflow: hidden;

  padding: 0 !important;

  background-color: #fff;

  border: 1px solid #e8e8e8;

  box-shadow: 0 5px 5px #e8e8e8;}



.image-subcard .caption {

  padding: 3%; }



.atvimg {

  overflow: hidden;

  transition: 300ms; }



.atvimg img {

  width: 50%;

  transition: all .3s; }







.share {

  position: relative;

  margin-top: 16px;

  width: 100%; }



.share span {

  color: #333;

  font-size: 1.2rem;

  margin-left: 11px; }



.share .share-img {

  position: absolute;

  right: 0;

  bottom: 0;

  display: none;

  margin-right: 19px; }



.qrcode-img {

  display: inline-block;

  position: relative;

  left: -5px; }



.share img {

  width: 18px;

  height: 18px; }



.image-subcard:hover .atvimg img {

  transform: translateX(-100%);

  transform: scale(1.1) \9;

  transition-duration: .5s;

  -moz-transition-duration: .5s;

  -webkit-transition-duration: .5s;

  -o-transition-duration: .5s; }



.image-subcard:hover .atvimg img:first-child {

  z-index: 10; }



.image-subcard:hover .text {

  color: #0054a7;

  animation: textmove .3s alternate;

  animation-duration: .3s;

  -moz-animation-duration: .3s;

  -webkit-animation-duration: .3s;

  -o-animation-duration: .3s; }



.image-subcard:hover .share > div {

  display: block;

  transition-duration: .3s;

  -moz-transition-duration: .3s;

  -webkit-transition-duration: .3s;

  -o-transition-duration: .3s; }



.qrcode {

  position: absolute;

  top: -200px;

  left: 10%;

  margin-left: -75px;

  width: 140px;

  height: 160px;

  background-color: #fff;

  border: 1px solid #d9d9d9; }



@keyframes textmove {

  0% {

    transform: translateX(-8px); }



  25% {

    transform: translateX(0px); }



  50% {

    transform: translateX(8px); }



  100% {

    transform: translateY(0px); } }



.news-list {

  display: none;

  position: relative;

  width: 100%;

  margin: 30px 0;

  z-index: 10;

  top: 20px; }



.news-leader-list {

  display: none;

  position: relative;

  margin: 30px 15px;

  z-index: 6;

  top: 20px; }



.news-first-list {

  display: none;

  position: relative;

    margin: 30px 15px;

  z-index: 10;

  top: 20px; }



.news-mediarep-list {

  display: none;

  position: relative;

    margin: 30px 15px;

  z-index: 10;

  top: 20px; }



.news-advisory-list {

  display: none;

  position: relative;

    margin: 30px 15px;

  z-index: 10;

  top: 20px; }



.news-list-item {

  position: relative;

  width: 100%;

  cursor: pointer;

  padding: 20px 0;

  background-color: #fff;

  box-sizing: border-box;

  border-bottom: 1px solid #d9d9d9; }



.news-item-img {

  position: absolute;

  float: left; }



.news-index {

  position: relative;

  margin: 0 auto;

  top: 20px;

  border: 1px solid #0054A7;

  color: #0054A7;

  font-size: 30px;

  line-height: 50px;

  text-align: center; }



.news-date {

  position: relative;

  font-size: 18px;

  color: #0054A7;

  text-align: center; }



.news-list-con {

  position: relative;

  color: #333;

  height: 110px;

  transition: .3s;

  padding-left: 30px;

  box-sizing: border-box;

  border-left: 1px solid #e8e8e8; }



.news-title {

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

  font-size: 2rem;

  line-height: 24px;

  margin-top: 10px;

  font-weight: 600;

  padding-right: 10px; }



.news-detail {

  height: 60px;

  font-size: 1.4rem;

  line-height: 24px;

  margin-top: 10px;

  margin-right: 20px;

  margin-bottom: 20px; }



.news-share {

  position: absolute;

  right: 20px;

  display: none;

  bottom: 20px; }



.news-share img {

  width: 20px;

  height: 20px;

  /* margin: 0 5px; */ }



.news-list-item:hover {

  z-index: 100;

  transition-duration: .3s;

  box-shadow: 10px 10px 5px #e8e8e8; }



.news-list-item:hover .news-index {

  background-color: #0054A7;

  color: #fff !important; }



.news-list-item .news-item-img img {

  transition: 300ms;

  transform: scale(1); }



.news-list-item:hover .news-item-img img {

  transform: scale(1.2);

  transition-duration: 0.3s; }



.news-list-item:hover .news-list-con {

  color: #0054A7;

  transform: translateY(-5px);

  transition-duration: 0.3s; }



.news-list-item:hover .news-list-con.right {

  transform: scale(1.05);

  transition-duration: 0.3s; }



.news-list-item:hover .news-list-con.right .news-detail {

  height: auto;

  transition-duration: 0.3s; }



.news-list-item:hover .news-share {

  display: block;

  transition-duration: 0.3s; }



/* ç»€å¥ç´°ç’ï½„æ¢ */

.responsibility-container {

  position: relative;

  padding: 40px 0;

  width: 100%;

  background-image: url(../images/bg_3d.png);

  background-position: center;

  background-size: 100% 85%;

  background-repeat: no-repeat; }



.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: 600px;

  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: 10px;

    overflow: hidden;

}

.caursel3d img{

  cursor: pointer;

  transition: all .5s ease;

  

  width: 100%;

  height: 100%; }



.caursel3d img:hover{

  /* transform: scale(1.2, 1.2); */
 }



/* é–ºå†©æ¹¹éžî„„å´¡æ´ã‚…åŽ´ */

.huaneng-container {

  position: relative;

  padding: 60px 0;

  width: 100%; }



.huaneng {

  position: relative; }



.huaneng .title span {

  background-color: #fff; }



.huaneng-content {

  margin: 70px 0 20px 0;

  width: 100%;

  height: 100%; }



.gallery {

  position: relative;

  width: 100%; }



.galleryrow,

.galleryrow2 {

  position: relative;

  width: 100%;

  font-size: 0;

  height: 300px; }



.item {

  position: absolute;

  height: 300px;

  cursor: pointer;

  overflow: hidden;

  transition: all .3s !important; }



.i1 {

  left: 0;

  right: 75%; }



.i2 {

  left: 25%;

  right: 49.5%; }



.i3 {

  left: 50%;

  right: 25%; }



.i4 {

  left: 75%;

  right: 0; }



.i5 {

  left: 0;

  right: 66.6%; }



.i6 {

  left: 33.4%;

  right: 33.4%; }



.i7 {

  left: 66.6%;

  right: 0; }



/* .galleryrow:hover .item {

    width: 22%;

} */

.item img {

  width: 100%;

  transition: 300ms; }



.item span {

  position: absolute;

  left: 20px;

  bottom: 20px;

  color: #fff;

  z-index: 3; }



.video,

.picture {

  display: inline-block;

  position: absolute;

  left: 20px;

  top: 20px;

  z-index: 5; }



.video {

  background-size: contain;

  -ms-behavior: url(../images/backgroundsize.min.htc);

  behavior: url(/cms-chng-theme/js/backgroundsize.min.htc);

  z-index: 5;

  background-image: url(../images/video.png); }



.picture {

  background-size: contain;

  -ms-behavior: url(../images/backgroundsize.min.htc);

  behavior: url(/cms-chng-theme/js/backgroundsize.min.htc);

  z-index: 5;

  background-image: url(../images/picture.png); }



.video-container {

  position: relative;

  width: 100%;

  height: 100%; }



.item-video {

  height: 100%;

  width: 100%\0;

  position: absolute;

  top: 0!important;

  left: 0!important;

   }



.play {

  position: absolute;

  left: 50%;

  top: 50%;

  /* width: 48px;

  height: 48px; */

  margin-left: -24px;

  margin-top: -24px;

  background-image: url(../images/play.png);

  background-size: contain;

  -ms-behavior: url(../images/backgroundsize.min.htc);

  behavior: url(/cms-chng-theme/js/backgroundsize.min.htc);

  z-index: 5; }



.item:hover {

  transition-duration: 0.4s; }



.videoitem2:hover {

  flex: 2.3;

  transition-duration: 0.4s; }



.videoitem2:hover .play {

  display: none\0;

  transform: scale(0.3);

  opacity: 0;

  transform: rotate(360deg);

  transition-duration: .5s;

  -moz-transition-duration: .5s;

  -webkit-transition-duration: .5s;

  -o-transition-duration: .5s; }



.videoitem2:hover .video {

  display: none\0;

  transform: translateY(-100px);

  opacity: 0;

  transition-duration: .5s;

  -moz-transition-duration: .5s;

  -webkit-transition-duration: .5s;

  -o-transition-duration: .5s; }



.item:hover span {

  /* font-size: 2.4rem; */

  /* border-bottom: 2px solid #fff; */

  transition-duration: 0.4s; }



.item:hover::after {

  display: none; }



.tab-content {

  position: relative;

  width: 100%;

  height: 100%; }



.china,

.special {

  display: none;

  position: relative;

  width: 100%;

  height: 100%; }



#china1 {

  width: 100%; }



.timeline-wrapper {

  position: absolute;

  top: 40px;

  /* top: 50%; */

  /* margin-top: -150px; */

  float: left;

  width: 120px;

  height: 300px; }



.timeline {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

  /* position: absolute;

  top: 50%;

  margin-top: -150px;

  float: left;

  width: 120px;

  height: 300px;

  overflow: hidden; */ }



.timeline-pre {

  position: absolute;

  top: -30px;

  left: 50%;

  margin-left: -10px;

  width: 20px;

  height: 20px;

  cursor: pointer;

  background-image: url(../images/to-top.png);

  background-position: center;

  background-size: contain;

  -ms-behavior: url(../images/backgroundsize.min.htc);

  behavior: url(/cms-chng-theme/js/backgroundsize.min.htc);

  background-repeat: no-repeat; }



.timeline-next {

  position: absolute;

  left: 50%;

  bottom: -30px;

  margin-left: -10px;

  width: 20px;

  height: 20px;

  cursor: pointer;

  background-image: url(../images/to-bottom.png);

  background-position: center;

  background-size: contain;

  -ms-behavior: url(../images/backgroundsize.min.htc);

  behavior: url(/cms-chng-theme/js/backgroundsize.min.htc);

  background-repeat: no-repeat; }



.timeline .line {

  position: relative;

  width: 20px;

  height: 100%;

  margin: 0 auto;

  transform: translateY(0);

  transition: all .2s; }



.timeline .line::before {

  content: "";

  position: absolute;

  left: 10px;

  top: 0;

  width: 1px;

  height: 1000%;

  background-color: #000; }



.time-point {

  position: relative;

  width: 20px;

  height: 20px;

  border: 1px solid #000;

  border-radius: 50px;

  behavior:url(/cms-chng-theme/js/PIE.htc);

  -ms-behavior:url(/cms-chng-theme/js/PIE.htc);

  margin-top: 90px;

  background-color: #fff;

  cursor: pointer; }



.time-point span {

  position: absolute;

  left: -40px;

  width: 40px;

  height: 20px;

  font-size: 1.4rem;

  color: #000; }



.time-point::after {

  content: "";

  position: absolute;

  background-color: #000;

  width: 10px;

  height: 10px;

  left: 50%;

  top: 50%;

  margin-left: -5px;

  margin-top: -5px;

  border-radius: 50px;

  behavior:url(../images/pie.htc);

  -ms-behavior:url(/cms-chng-theme/js/PIE.htc); }



.timeline .nav-tabs {

  border: none !important; }



.timeline .active-time-point {

  border-color: #0054A7; }



.timeline .active-time-point span {

  color: #0054A7; }



.timeline .active-time-point::after {

  background-color: #0054A7; }



.time-point:first-child {

  margin: 0; }



.china-content,

.special-content {

  float: left;

  margin-left: 90px;

  width: 1110px;

  margin-top: 20px;

  text-align: center; }



.china-content p {

  margin-top: 25px;

  color: #333;

  font-size: 1.6rem; }



.china-item {

  cursor: pointer;

  padding: 10px; }



.china-item img {

  width: 100%;

  height: auto; }



.china-item:hover img {

  transform: scale(1.1);

  transition-duration: .3s; }



.special-item {

  padding: 10px; }



.special-item img {

  /* width: 540px;

  height: 160px; */

  margin: 10px auto;

  cursor: pointer; }



.special-item img:hover {

  transform: scale(1.05);

  transition-duration: .3s; }



/* é–¸æ¥€æ°¦éæ¨¼ä»¦é‡ç‚²æ³› */

.showroom {

  position: relative;

  /* width: 100%; */

  /* height: 500px; */ }



.showroom .backImg {

  width: 100%;

  height: 100%;

  margin: 0 auto; }



.show-arrow {

  position: absolute;

  top: 0;

  left: 50%;

  /* width: 100%; */

  height: 100%;

  margin-left: -600px;

  z-index: 10; }



.show-arrow-left {

  float: left;

  width: 200px;

  height: 22px;

  margin-top: 239px;

  margin-left: 50px;

  animation: heart 0.5s ease-in-out 1.5s infinite alternate;

  animation-duration: .5s;

  -moz-animation-duration: .5s;

  -webkit-animation-duration: .5s;

  -o-animation-duration: .5s; }



.show-arrow-right {

  float: right;

  width: 200px;

  height: 22px;

  margin-top: 239px;

  margin-right: 50px;

  animation: heart 0.5s ease-in-out 1.5s infinite alternate; }



.show-tips {

  position: absolute;

  width: 400px;

  height: 134px;

  left: 50%;

  top: 30%;

  z-index: 10;

  margin-left: -200px;

  font-size: 30px;

  text-align: center;

  color: #fff; }



.playBtn {

  position: absolute;

  width: 80px;

  height: 80px;

  font-size: 14px;

  top: 50%;

  margin-top: -40px;

  left: 50%;

  margin-left: -40px;

  background-color: #0054a7;

  border-radius: 50px;

  behavior:url(../images/pie.htc);

  -ms-behavior:url(/cms-chng-theme/js/PIE.htc);

  line-height: 80px;

  text-align: center;

  color: #fff;

  cursor: pointer;

  z-index: 10;

  box-sizing: border-box; }



.playBtnWater {

  position: absolute;

  width: 90px;

  height: 90px;

  font-size: 14px;

  top: 50%;

  margin-top: -45px;

  left: 50%;

  margin-left: -45px;

  border-radius: 50px;

  behavior:url(/cms-chng-theme/js/PIE.htc);

  -ms-behavior:url(/cms-chng-theme/js/PIE.htc);

  background-color: rgba(0, 84, 167, 0.5);

  cursor: pointer;

  z-index: 1;

  animation: btnWater 2.5s infinite 1s;

  box-sizing: border-box; }



.show-arrow img {

  width: 200px;

  height: 22px; }



@keyframes btnWater {

  from {

    transform: scale(1); }



  to {

    transform: scale(1.3);

    opacity: 0; } }



@keyframes heart {

  from {

    transform: translate(0, 0); }



  to {

    transform: translate(10px, 0); } }



/* éŽ¼å­˜æ´ŸéŽæ’®æ‡£å©Šå†¨ç¤‹é–¹ç¨¿î˜µéŽ¸ï¿½ */

.show-bottom {

  position: relative;

  margin: 60px auto; }



.show-bottom-con {

  margin: 0 -15px; }



.show-bottom p {

  display: inline-block;

  position: absolute;

  bottom: 10px;

  text-align: center;

  width: 100%; }



.col-55 {

  position: relative;

  float: left;

  /* margin: 8px; */

  padding: 0; }



.show-item {

  position: relative;

  background-position: center 30%;

  background-repeat: no-repeat;

  background-size: 40px;

  cursor: pointer;

  border: 1px solid #e8e8e8;

  box-shadow: 0 5px 5px #e8e8e8;

}



.show-item:hover {

  color: #fff;

  background-color: #0054A7;

  transform: translateY(-10px);

  transition-duration: .4s;

  -moz-transition-duration: .5s;

  -webkit-transition-duration: .5s;

  -o-transition-duration: .5s; }



.item1 {

  background-image: url(../images/show-icon1.png); }



.item2 {

  background-image: url(../images/show-icon2.png); }



.item3 {

  background-image: url(../images/show-icon3.png); }



.item4 {

  background-image: url(../images/show-icon4.png); }



.item5 {

  background-image: url(../images/show-icon5.png); }



.item1:hover {

  background-image: url(../images/show-icon1-hover.png); }



.item2:hover {

  background-image: url(../images/show-icon2-hover.png); }



.item3:hover {

  background-image: url(../images/show-icon3-hover.png); }



.item4:hover {

  background-image: url(../images/show-icon4-hover.png); }



.item5:hover {

  background-image: url(../images/show-icon5-hover.png); }



.qrcode {

  top: -150px;

  margin-left: -50px;

  width: 102px;

  height: 120px;

  padding: 5px;

  z-index: 10; }



.qrcode p {

  font-size: 1rem; }

  

 .swiper-container{

 	height: 300px;

}