body,html{
    width: 100%;
    height: 100%;
}
#mycontent{
    width: 100%;
    overflow: hidden;
    min-height: calc(100% - 302px);
    min-height: -ms-calc(100% - 302px);
    min-min-height: -moz-calc(100% - 302px);
	min-height: -webkit-calc(100% - 302px);
	min-height: -o-calc(100% - 302px);
}
#mybanner{
    width: 1200px;
    overflow: hidden;
    margin: 50px auto;

}
#mybanner li{
    width: 283px;
    height: 212px;
    border: 1px solid #e0e0e0;
    float: left;
    margin-right: 20px;
	background:rgba(0,0,0,0.6);
}
#mybanner li:nth-child(4)~li{
    margin-top: 20px;
}
#mybanner li:nth-child(4n){
    margin-right: 0;
}
#mybanner li>img{
    width: 100%;
    height: 160px;
    display: block;
}

#mybanner li>p:first-of-type{
    font-size: 14px;
    padding-left: 10px;
    line-height: 20px;
	color:#fff;
}
#mybanner li>p:last-of-type{
    height: 32px;
    display: table;
	color:#fff;
}
#mybanner li>p:last-of-type>span{
    display: block;
    font-size: 12px;
    padding-left: 10px;
    line-height: 16px;
    display: table-cell;
    vertical-align: middle;
}
@media screen and (max-width:1366px){
    #mycontent{
        min-height: calc(100% - 275px);
        min-height: -ms-calc(100% - 275px);
        min-min-height: -moz-calc(100% - 275px);
        min-height: -webkit-calc(100% - 275px);
        min-height: -o-calc(100% - 275px);
    }
    #mybanner{
        width: 960px;
        margin: 30px auto;
    }
    #mybanner li{
        width: 223px;
        height: 168px;
    }
    #mybanner li>img{
        width: 100%;
        height: 125px;
    }
    #mybanner li>p:first-of-type{
        font-size: 12px;
        line-height: 16px;
    }
    #mybanner li>p:last-of-type{
        height: 28px;
    }
    #mybanner li>p:last-of-type>span{
        line-height: 14px;
    }
}