@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */



@-webkit-keyframes flipOutYtest {
  from {
    -webkit-transform: perspective(1400px);
    transform: perspective(1400px);
  }

  40% {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
    opacity: 1;
  }

  50% {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
    opacity: 0;
  }
}

.test{
  -webkit-animation: flipOutYtest 0.75s linear;
  animation: flipOutYtest 0.75s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes flipInYtest {
  from {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
    opacity: 0;
  }

  50% {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(1400px);
    transform: perspective(1400px);
    opacity: 1;
  }
}

.test2{
  -webkit-animation: flipInYtest 0.75s linear;
  animation: flipInYtest 0.75s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



.well2{clear:both;padding-top: 60px;overflow: hidden; padding-bottom: 32px;}

.well2 .well-item{ position: relative; float: left; width: 224px;
  margin-right: 20px;height: 294px;
    background-color: #ececec;
}
.well2 .well-item:last-child{
  margin-right: 0;
}
.well2 .well-item .img{
  margin-top: 52px;
  text-align: center;
  height: 34px;
}
.well2 .well-item p{
  line-height: 28px;
  text-align: center;
  font-size: 15px;
  color: #333333;
}
.well2 .well-item h3{
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: normal;
}
.well2 .correct{
  position: absolute;
  width: 100%;
  height: 100%;
 
}
.well2 .correct .img{
  margin-top: 52px;
  text-align: center;
  height: 34px;
}
.well2 .opposite{
  width: 100%;
  height:292px;


}
.well2 .opposite div{
  width: 100%;
}
.well2 .opposite-content{
  display: table;
  width: 100%;
  min-height: 250px;
  background-color: #D95E22;
}




.well{clear:both;padding-top: 60px;overflow: hidden; padding-bottom: 32px;}

.well .well-item{ position: relative; float: left; width: 154px;margin-right: 20px;height: 244px; }
.well .well-item:last-child{
  margin-right: 0;
}
.well .well-item img{
  width: 100%;
  height: 178px;
}
.well .well-item p{
  height: 66px;
  line-height: 66px;
  text-align: center;
}
.correct{
  position: absolute;
  width: 100%;
}
.opposite{
  width: 100%;
  height: 178px;
}
.opposite div{
  width: 100%;
}
.opposite-content{
  display: table;
  width: 100%;
  min-height: 250px;
  background-color: #D95E22;
}
.opposite-content-text{ display: table-cell; vertical-align: middle; text-align: center; color: white; font-size: 24px; }




.syt_list li div{position: absolute;  width: 140px; height: 140px; overflow: hidden;
left:25%;
top:37px;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
backface-visibility: hidden;
}

.syt_list li .div1{z-index: 1;}
.syt_list li .div2{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}