html,body {
    padding:0 0 80px;
    margin:0;
    min-height: 100%;
    width: 100%;
    background: #c7c4b9;
}
#app {
    h1 {
        text-align: center;
        color: #745d02;
        font-size: 60px;
        font-family: cursive;
        margin:0;
    }
    .demo-container {
        width: 1052px;
        margin: 40px auto;
        position: relative;
    }
    .demo {
        display: inline-block;
        vertical-align: top;
        margin: 10px;
        cursor: pointer;
        width: 243px;
        height: 290px;
        .name {
            font-size: 21px;
            text-align: center;
            margin-top: 13px;
            color: #4c2512;
            width: 193px;
        }
        .sample-container {
            overflow: hidden;
            box-shadow: 6px 10px 21px #2229;
        }
        .ops {
            display: none;
        }
    }
    .demo:hover {
        position: relative;
        .sample-container {
            overflow: visible;
        }
        .ops {
            opacity: 0.8;
            display: block;
            padding: 10px;
            position: absolute;
            right: 0px;
            bottom: 20px;
            font-size: 40px;
            pointer: cursor;
            i.iconfont {
                display: inline-block;
                transition: transform 0.4s ease;
            }
            i.iconfont:hover {
                transform: scale(1.3);
            }
        }
    }
    .show-container {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #0008;
        .show-area {
            width: 80%;
            height: 80%;
        }
    }
}