/* metro layout */
.metro-layout {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.metro-layout .box {
    /* float: left; 改用 flex 布局 */
    position: relative;
    margin: 0.25em 0.2em;
    padding: 0.25em;
    width: 10em;
    height: 3em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    color: #fff;
    background: #00a8ec;
    z-index: 9;
    flex-shrink: 0;
}
.metro-layout .box:hover { opacity: 0.85; filter: alpha(opacity=85); }
.metro-layout .box img.icon { position: absolute; left: 48%; top: 48%; margin-left: -87px; margin-top: -32px; z-index: 5; }
.metro-layout .content { height: 100%; overflow: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix {margin: 0.25em 0.1em 0.25em 0.1em}