*{
	margin: 0;
	padding: 0;
}
.container{
    width:1200px;
    margin: 50px auto!important;

}
.course_item{
    width: 280px;
    height: 324px;
    background-image: url(../images/pfwt1.png);
    background-size: 100% 100%;
    position: relative;
    perspective: 300px;
    /*-webkit-perspective: 500;*/
    display: block;
    cursor: pointer;
    margin:0px 15px 0px 0px;
    float: left;
}
.course_item:nth-child(2){
    width: 280px;
    height: 324px;
     background-image: url(../images/pfwt2.jpg);
     background-size: 100% 100%;
     position: relative;
     perspective: 300px;
     /*-webkit-perspective: 500;*/
     display: block;
     cursor: pointer;
    margin:25px 15px 0px 0px;
 }

.course_item:nth-child(3){
    width: 280px;
    height: 324px;
    background-image: url(../images/pfwt3.png);
    background-size: 100% 100%;
    position: relative;
    perspective: 300px;
    /*-webkit-perspective: 500;*/
    display: block;
    cursor: pointer;
    margin:0px 15px 0px 0px;
}

.course_item:nth-child(4){
    width: 280px;
    height: 324px;
    background-image: url(../images/pfwt4.png);
    background-size: 100% 100%;
    position: relative;
    perspective: 300px;
    /*-webkit-perspective: 500;*/
    display: block;
    cursor: pointer;
    margin:25px 15px 0px 0px;
}

.course_item_name{
    /*position: absolute;*/
    /*left: 75px;*/
    padding:30px 20px;
}
.course_item_modal{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(53, 111, 156, 0.8);
    /*transform: rotateY(0deg);*/
    /*transform-origin: left;*/
    display: none;
    border: 2px solid #3397d7;
    box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 50%);
}
.course_item_inner{
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
}
.course_item_modal h4{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 38px;
    /*text-align: center;*/
}
.course_item_modal.active{
    display: block;
    transform-origin: left;
    animation: animate 1.5s;
/*    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards; !* Safari 和 Chrome *!*/
}
.course_item_inner p{
    /*text-align: center;*/
    margin-top: 27px;
    font-size: 16px;
}
/*@keyframes animate {*/
/*    to {*/
/*      transform: rotateY(5deg);*/
/*    }*/
/*}*/