.duowen {}
.duowen .box{
    display: flex;
    flex-wrap: wrap;
}
.duowen .list {
    width: 50%;
    padding: 0 4%;
    height: auto;
    margin: 28px 0;
}
.duowen .list .cell {
    width: 100%;
    height:200px;
    background-color: #fff;
    padding: 5% 12%;
    position: relative;
    box-shadow: 2px 2px 15px #eee, -2px -2px 15px #eee;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}
.duowen .list .wdlx{
    position: absolute;
    right: .1rem;
    bottom: 0;
    font-size: .45rem;
    color: #c52f1f;
}
.duowen .list:hover .wdlx{
    color: #fff;
    z-index:2;
}
.duowen .list .cell:after {
    content: attr(data-num);
    position: absolute;
    right: 4%;
    top: 5%;
    font-size: 46px;
    color: #eee;
    font-family: word;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    z-index: 6;
}
.duowen .list .cell:hover h4,.duowen .list .cell:hover p {
    color: #fff;
} 
.duowen .list .cell:hover:after {
    color: #4EBC00FF
}
.duowen .list .cell > h4:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 1.5px;
    background-color: #01472f;
    left: 0;
    bottom: 0;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}
.duowen .list .cell > h4 {
    position: relative;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    margin-bottom:12px;
    padding-bottom:12px;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    z-index: 5;
}
.duowen .list .cell:hover h4:after {
    background-color: #fff;
}
.duowen .list .cell > p {
    opacity: 0.8;
    line-height:2;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    position: relative;
    z-index: 5;
}
.duowen .list .cell .c-mask {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:#01472f;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}
.duowen .list .cell:hover .c-mask {
    visibility: visible;
    opacity: 1;
}
@media screen and (max-width: 1024px) {
    .duowen .list {width: 100%;padding: 0 3%;margin: .4rem 0 0;}
    .duowen .list .cell{height:3rem}
}
@media screen and (max-width: 640px) {
    .duowen .list .cell {padding:5% 8%}
    .duowen .list .cell > h4 {font-size:.31rem;}
    .duowen .list .cell > p{line-height:1.5}
}