/*

 For owlling
 v1.1
 2020.09.24

 */

 
.book-container {
        display: left;
        align-items: left;
        float:left;
        justify-content: left;
        margin-right: 4%;
    }

@keyframes initAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}

/*白色封面*/

.book-white {
  width: 135px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-white:hover {
  transform: rotateY(0deg);
}

.book-white::before {
  position: absolute;
  content: ' ';
  left: 0;
  top: 3px;
  width: 28px;
  height: 184px;
  transform: translateX(117px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book-white > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 190px;
  transform: translateZ(15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 30px 5px #f1f2f3;
  background-color: #f2f3f4;
}

.book-white::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 135px;
  height: 190px;
  transform: translateZ(-15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 10px 10 60px 10px #f1f2f3;
  background-color: #f2f3f4;
}

/*end*/


/*黑色封面*/

.book-black {
  width: 135px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-black:hover {
  transform: rotateY(0deg);
}

.book-black::before {
  position: absolute;
  content: ' ';
  left: 0;
  top: 3px;
  width: 28px;
  height: 184px;
  transform: translateX(117px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book-black > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 190px;
  transform: translateZ(15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 30px 5px #f1f2f3;
  background-color: #121212;
}

.book-black::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 135px;
  height: 190px;
  transform: translateZ(-15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 10px 10 60px 10px #f1f2f3;
  background-color: #121212;
}

/*end*/


/*五导家设计观*/

.book-uyidian {
  width: 135px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-uyidian:hover {
  transform: rotateY(0deg);
}

.book-uyidian::before {
  position: absolute;
  content: ' ';
  left: 0;
  top: 3px;
  width: 28px;
  height: 184px;
  transform: translateX(117px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book-uyidian > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 190px;
  transform: translateZ(15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 30px 5px #f1f2f3;
  background-color: #FE5A18;
}

.book-uyidian::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 135px;
  height: 190px;
  transform: translateZ(-15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 10px 10 60px 10px #f1f2f3;
  background-color: #FE5A18;
}

/*end*/

/*西文字体2*/

.book-xwzt2 {
  width: 135px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-xwzt2:hover {
  transform: rotateY(0deg);
}

.book-xwzt2::before {
  position: absolute;
  content: ' ';
  left: 0;
  top: 3px;
  width: 28px;
  height: 184px;
  transform: translateX(117px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book-xwzt2 > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 190px;
  transform: translateZ(15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 30px 5px #f1f2f3;
  background-color: #6BCD33;
}

.book-xwzt2::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 135px;
  height: 190px;
  transform: translateZ(-15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 10px 10 60px 10px #f1f2f3;
  background-color: #6BCD33;
}

/*end*/


/*为什么精英都是时间控*/

.book-jydssjk {
  width: 135px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-jydssjk:hover {
  transform: rotateY(0deg);
}

.book-jydssjk::before {
  position: absolute;
  content: ' ';
  left: 0;
  top: 3px;
  width: 28px;
  height: 184px;
  transform: translateX(117px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book-jydssjk > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 190px;
  transform: translateZ(15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 30px 5px #f1f2f3;
  background-color: #59B9D5;
}

.book-jydssjk::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 135px;
  height: 190px;
  transform: translateZ(-15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 10px 10 60px 10px #f1f2f3;
  background-color: #59B9D5;
}

/*end*/


/*你只是看起来很努力*/

.book-jydssjk {
  width: 135px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-jydssjk:hover {
  transform: rotateY(0deg);
}

.book-jydssjk::before {
  position: absolute;
  content: ' ';
  left: 0;
  top: 3px;
  width: 28px;
  height: 184px;
  transform: translateX(117px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book-jydssjk > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 190px;
  transform: translateZ(15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 30px 5px #f1f2f3;
  background-color: #59B9D5;
}

.book-jydssjk::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 135px;
  height: 190px;
  transform: translateZ(-15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 10px 10 60px 10px #f1f2f3;
  background-color: #59B9D5;
}

/*end*/

/*三十而立*/

.book-ssel {
  width: 135px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-ssel:hover {
  transform: rotateY(0deg);
}

.book-ssel::before {
  position: absolute;
  content: ' ';
  left: 0;
  top: 3px;
  width: 28px;
  height: 184px;
  transform: translateX(117px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book-ssel > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 190px;
  transform: translateZ(15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 30px 5px #f1f2f3;
  background-color: #93DFA9;
}

.book-ssel::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 135px;
  height: 190px;
  transform: translateZ(-15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 10px 10 60px 10px #f1f2f3;
  background-color: #93DFA9;
}

/*end*/

/*Facebook开放平台*/

.book-kfpt {
  width: 135px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-kfpt:hover {
  transform: rotateY(0deg);
}

.book-kfpt::before {
  position: absolute;
  content: ' ';
  left: 0;
  top: 3px;
  width: 28px;
  height: 184px;
  transform: translateX(117px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book-kfpt > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 190px;
  transform: translateZ(15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 30px 5px #f1f2f3;
  background-color: #562006;
}

.book-kfpt::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 135px;
  height: 190px;
  transform: translateZ(-15px);
  border-radius: 0 2px 2px 0;
  box-shadow: 10px 10 60px 10px #f1f2f3;
  background-color: #562006;
}

/*end*/