/* Mobile CSS*/
.home-head div{float:left;}
.home-head strong {font-size: 14px;}
.home-head span{padding: 1px 8px;}

/**/
.gird-4 li .midimg,.gird-5 li .midimg{border-radius:8px;}
.gird-4 li .midimg,.gird-5 li .midimg{background: linear-gradient(270deg, #F44336 0%, #f5695f 50%, #F44336 100%) !important;}
.gird-4 li:nth-child(2) .midimg,.gird-5 li:nth-child(2) .midimg{background: linear-gradient(270deg, #E91E63 0%, #f75a8f 50%, #E91E63 100%) !important;}
.gird-4 li:nth-child(3) .midimg,.gird-5 li:nth-child(3) .midimg{background: linear-gradient(270deg, #9C27B0 0%, #bf3cd6 50%, #9C27B0 100%) !important;}
.gird-4 li:nth-child(4) .midimg,.gird-5 li:nth-child(4) .midimg{background: linear-gradient(270deg, #673AB7 0%, #8957e2 50%, #673AB7 100%) !important;}
.gird-4 li:nth-child(5) .midimg,.gird-5 li:nth-child(5) .midimg{background: linear-gradient(270deg, #3F51B5 0%, #5265ce 50%, #3F51B5 100%) !important;}
.gird-4 li:nth-child(6) .midimg,.gird-5 li:nth-child(6) .midimg{background: linear-gradient(270deg, #2196F3 0%, #29b5f5 50%, #2196F3 100%) !important;}
.gird-4 li:nth-child(7) .midimg,.gird-5 li:nth-child(7) .midimg{background: linear-gradient(270deg, #03A9F4 0%, #1fb1f3 50%, #03A9F4 100%) !important;}
.gird-4 li:nth-child(8) .midimg,.gird-5 li:nth-child(8) .midimg{background: linear-gradient(270deg, #00BCD4 0%, #089caf 50%, #00BCD4 100%) !important;}
.gird-4 li:nth-child(9) .midimg,.gird-5 li:nth-child(9) .midimg{background: linear-gradient(270deg, #009688 0%, #057d72 50%, #009688 100%) !important;}
.gird-4 li:nth-child(10) .midimg,.gird-5 li:nth-child(10) .midimg{background: linear-gradient(270deg, #4CAF50 0%, #399a3d 50%, #4CAF50 100%) !important;}
.gird-4 li:nth-child(11) .midimg,.gird-5 li:nth-child(11) .midimg{background: linear-gradient(270deg, #8BC34A 0%, #74b12d 50%, #8BC34A 100%) !important;}
.gird-4 li:nth-child(12) .midimg,.gird-5 li:nth-child(12) .midimg{background: linear-gradient(270deg, #FF5722 0%, #e0400d 50%, #FF5722 100%) !important;}
.gird-4 li:nth-child(13) .midimg,.gird-5 li:nth-child(13) .midimg{background: linear-gradient(270deg, #FF9800 0%, #e88d06 50%, #FF9800 100%) !important;}
.gird-4 li:nth-child(14) .midimg,.gird-5 li:nth-child(14) .midimg{background: linear-gradient(270deg, #FFC107 0%, #d4a107 50%, #FFC107 100%) !important;}
.gird-4 .midimg img,.gird-5 .midimg img{filter: grayscale(100%) brightness(300%);}
/* 竖屏底下的查询 */
@media screen and (orientation: portrait) {
    body{
        /* 防止页面被底部横线遮住 */
        padding-bottom: 0;
        padding-bottom:calc(constant(safe-area-inset-bottom) - 10px);
        padding-bottom:calc(env(safe-area-inset-bottom) - 10px);
    }
    .foot-bar,.foot-bar-fix,.foot-btn,.com-bar{
        padding-bottom:calc(constant(safe-area-inset-bottom) - 15px);
        padding-bottom:calc(env(safe-area-inset-bottom) - 15px);
    }
}