*{
    margin:0;
    padding: 0;
}
body{
    background-color:#fde3A7;
    /* 字体 草书*/
    font-family: 'Indie Flower', cursive;
}
.card{
    width:300px;
    height:400px;
    color:#013243;
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-200px;
    background-color:#e0e1dc;
    transform-style: preserve-3d;
    perspective: 2000px;
    /* x y 模糊值 */
    box-shadow: inset 300px 0 50px rgba(0, 0, 0, .5), 20px 0 60px rgba(0, 0, 0, .5);
    transition: 1s;
}

.card:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #BAC1BA;
    transform-origin: bottom;
    transform: skewX(-45deg);
}
.card:after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 100%;
    background: #92A29C;
    transform-origin: left;
    transform: skewY(-45deg);
}

.card .imgBox{
    width:100%;
    height:100%;
    position: relative;
    transform-origin: left;
	transition: .7s;
}
.card .bark {
    position: absolute;
    background: #e0e1dc;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .7s;
}
.card .imgBox img {
   width:100%;
}

.card .details {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    margin-top: 70px;
}
.card .details h4{
    font-size:26px;
    line-height:40px;
    text-align: center;
    font-family: 'Amatic SC', cursive;
}
.card .details p {
    font-size: 15px;
    line-height: 15px;
    transform: rotate(-10deg);
    padding: 0 20px;
}

.title1{
    color:#1bbc9b;
}
.title2{
    color:#c0392b;
    margin-bottom:30px; 
}
.text-right {
    text-align: right;
}

.card:hover{
    transform:rotate(15deg) scale(1.2);
	box-shadow: inset 20px 0 50px rgba(0, 0, 0, .5), 0 10px 100px rgba(0, 0, 0, .5);
}

.card:hover .imgBox {
    transform: rotateY(-135deg);
}
.card:hover .bark {
    opacity: 1;
    transition: .6s;
    box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset;
}