.site-content {
  width: 990px;
  max-width: 100%;
  margin: 0 auto; }

.section-title {
  text-align: center;
  text-transform: uppercase; }

.project {
  width: 100%;
  float: left;
}
  .project-list:after {
    content: " ";
    display: block;
    clear: both; }
  .project__image {
    display: block;
    position: relative;
     }
    .project__image img {
      width: 690px;
      max-width: 690px;
      height: 425px;
      display: block; 
    }
    .project__image:after {
      content: " ";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
      transition: opacity .3s ease;
      opacity: 0; }
  .project__card {
    position: relative;
    will-change: transform;
    transition: box-shadow .3s ease;
    box-shadow: 0 10px 30px transparent; 
  }
    .project__card.hover-in {
      transition: -webkit-transform .2s ease-out;
      transition: transform .2s ease-out;
      transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
    .project__card.hover-out {
      transition: -webkit-transform .2s ease-in;
      transition: transform .2s ease-in;
      transition: transform .2s ease-in, -webkit-transform .2s ease-in; }
  .project:hover .project__card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
  .project:hover .project__image:after {
    opacity: 1; 
  }
  .project:hover .project__detail {
    /*border-width: 10px;*/
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
  .project:hover .project__title, .project:hover .project__category, .project:hover .project__remarks {
    /*-webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);*/
    opacity: 1; 
  }
  .project__detail {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    pointer-events: none;
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px);
    border: 0 solid #00BCD4;
    transition: border .4s ease; 
  }
  .project__title {
    margin: 0 auto;
    /*font-size: 36px;
    font-weight: 700;
    transition: .4s ease;*/
    /*opacity: 1;
    -webkit-transform: translateY(40px) scale(0);
        -ms-transform: translateY(40px) scale(0);
            transform: translateY(40px) scale(0);
    will-change: transform; */
  }
    .project__title a {
      /*color: white;*/ 
    }
  .project__category {
    opacity: 1;
    padding-top: 24px;
    /*transition: .4s ease;
    transition-delay: .1s;
    -webkit-transform: translateY(40px) scale(0);
        -ms-transform: translateY(40px) scale(0);
            transform: translateY(40px) scale(0);
    will-change: transform; */
  }
    .project__category a {
      /*color: rgba(255, 255, 255, 0.8);
      font-size: 1.3em; */
    }
  .project__category img{width: 432px;height: 53px;margin:0 auto;}
  .project__remarks{padding-top: 30px;}
  .project__remarks img{width: 266px;height: 28px;margin: 0 auto;}


/*第二种样式*/
.movie {
  float: left; 
}
  .movie-list:after {
    content: " ";
    display: block;
    clear: both; 
}
  .movie__card {
    position: relative;
    width: 690px;
    height: 425px; }
    .movie__card.hover-in {
      transition: .3s ease-out; }
    .movie__card.hover-out {
      transition: .3s ease-in; 
}
  .movie .layer-1,.movie .layer-2,.movie .layer-3,.movie .layer-4,.movie .layer-5,.movie .layer-6,.movie .layer-7,.movie .layer-8,.movie .layer-9,.movie .layer-10{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.movie .layer-1{
    background-image: url(../images/banner_01.png);
}
.movie .layer-2{
    background-image: url(../images/banner_02.jpg);
}
.movie .layer-3{
    background-image: url(../images/banner_03.jpg);
}
.movie .layer-4{
    background-image: url(../images/banner_04.jpg);
}
.movie .layer-5{
    background-image: url(../images/banner_05.jpg);
}
.movie .layer-6{
    background-image: url(../images/banner_06.png);
}
.movie .layer-7{
    background-image: url(../images/banner_07.jpg);
}
.movie .layer-8{
    background-image: url(../images/banner_08.jpg);
}
.movie .layer-9{
  background-image: url(../images/xqd_banner1.jpg);
}
.movie .layer-10{
  background-image: url(../images/xqd_banner2.jpg);
}
  .movie .layer-8-1 {
    width: 486px;
    height: 86px;
    position: absolute;
    left: 50%;
    top: 76px;
    margin-left: -243px;
    background-image: url(../images/banner_08_01.png);
    background-repeat:no-repeat; 
    background-position:center; 
    background-size:100%; 
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px); 
}
  .movie .layer-8-2 {
    width: 364px;
    height: 122px;
    position: absolute;
    left: 187px;
    top: 174px;
    background-image: url(../images/banner_08_02.png);
    background-repeat:no-repeat; 
    background-position:center; 
    background-size:100%; 
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
            z-index: 10;
}
  .movie .layer-6-2 {
    width: 660px;
    height: 388px;
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -330px;
    background-image: url(../images/banner_06_01.png);
    background-repeat:no-repeat; 
    background-position:center; 
    background-size:100%; 
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px); 
}
  .movie .layer-6-3 {
    width: 491px;
    height: 340px;
    position: absolute;
    left: 50%;
    top: 65px;
    margin-left: -245px;
    background-image: url(../images/banner_06_02.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(10px);
            transform: translateZ(10px); 
}
  .movie .layer-1-2 {
    width: 375px;
    height: 22px;
    position: absolute;
    left: 50%;
    top: 105px;
    margin-left: -187px;
    background-image: url(../images/banner_01_01.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px); 
}
  .movie .layer-1-3 {
    width: 432px;
    height: 53px;
    position: absolute;
    left: 50%;
    top: 160px;
    margin-left: -216px;
    background-image: url(../images/banner_01_02.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(10px);
            transform: translateZ(10px); 
}
.movie .layer-1-4 {
    width: 266px;
    height: 28px;
    position: absolute;
    left: 50%;
    top: 258px;
    margin-left: -133px;
    background-image: url(../images/banner_01_03.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px); 
}
  .movie .layer-2-1 {
    width: 250px;
    height: 66px;
    position: absolute;
    left: 224px;
    top: 105px;
    background-image: url(../images/banner_02_01.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px); 
}
  .movie .layer-2-2 {
    width: 526px;
    height: 182px;
    position: absolute;
    left: 90px;
    top: 109px;
    background-image: url(../images/banner_02_02.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px); 
}
  .movie .layer-2-3 {
    width: 322px;
    height: 33px;
    position: absolute;
    left: 185px;
    top: 183px;
    background-image: url(../images/banner_02_03.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(40px);
            transform: translateZ(40px); 
}
  .movie .layer-3-1 {
    width: 550px;
    height: 86px;
    position: absolute;
    left: 50%;
    top: 156px;
    margin-left: -275px;
    background-image: url(../images/banner_03_01.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px); 
}
  .movie .layer-3-2 {
    width: 314px;
    height: 30px;
    position: absolute;
    left: 50%;
    bottom: 134px;
    margin-left: -157px;
    background-image: url(../images/banner_03_02.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px); 
}
  .movie .layer-4-1 {
    width: 629px;
    height: 138px;
    position: absolute;
    left: 50%;
    top: 96px;
    margin-left: -314px;
    background-image: url(../images/banner_04_01.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(10px);
            transform: translateZ(10px); 
}
  .movie .layer-4-2 {
    width: 445px;
    height: 160px;
    position: absolute;
    left: 50%;
    top: 86px;
    margin-left: -223px;
    background-image: url(../images/banner_04_02.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px); 
}
  .movie .layer-5-1 {
    width: 554px;
    height: 364px;
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -277px;
    background-image: url(../images/banner_05_01.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px); 
}
  .movie .layer-5-2 {
    width: 394px;
    height: 34px;
    position: absolute;
    left: 50%;
    top: 198px;
    margin-left: -197px;
    background-image: url(../images/banner_05_02.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px); 
}
  .movie .layer-5-3 {
    width: 512px;
    height: 44px;
    position: absolute;
    left: 50%;
    bottom: 54px;
    margin-left: -256px;
    background-image: url(../images/banner_05_03.png);
    background-repeat:no-repeat; 
    -webkit-transform: translateZ(40px);
            transform: translateZ(40px); 
}
  .movie .shine {
    border-radius: 10px; 
}
.shine{cursor: pointer;}