/* 通用样式 start */
body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.container {
    width : 1200px;
    height: auto;
    margin: 0 auto;
}

/* 版心 */
.clearfix:after {
    content   : ".";
    display   : block;
    height    : 0;
    clear     : both;
    visibility: hidden;
}

/* 清除浮动 */
input,
button {
    border : none;
    outline: none;
}

span:focus,
div:focus,
button:focus,
img:focus,
h2:focus,
a:focus,
li:focus,
td:focus,
table:focus,
th:focus {
    outline: none;
}

a:hover {
    color: #1677ff;
}

/* 通用样式 end */

#app {
    font-family            : Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align             : center;
    color                  : #2c3e50;
    margin-top             : 0;
    padding                : 50px 0;
}

.body-content {
    clear     : both;
    width     : 1200px;
    height    : auto;
    margin    : 0 auto;
    text-align: center;
    background: #fff;
    border    : 1px solid #e8e8e8;
    padding   : 100px 260px;
}

.body-content li {
    float: left;
}

.div-kb {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODEiIGhlaWdodD0iOTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNjIuNzE4IDVMMjUuMzcyIDIwLjE5djEwLjEybDMuMzk2LTMuMzc2di01LjA2TDYxLjAyNSA4LjM4Nmw4LjQ4NyAxMC4xMnY2Mi40MzNINzhoLS4wMDh2LTMuMzg0SDcyLjlWMTguNDk3TDYyLjcxOCA1em0tMS42OTMgNzUuOTNoNS4wOVYxOS40MWwtNS4wOS01Ljk3M1Y4MC45M3pNMTEuNzkzIDM4Ljc1NnYzOC44MDdINXYzLjM3NmgxMC4xODJ2LTQwLjVMMzguOTUgMzAuMzJsMTAuMTUzIDcuMjcuMDM4IDQzLjM1aDguNDg3di0zLjM3NmgtNS4wOXYtNDAuNWwtMTMuNTgtMTAuMTItMjcuMTY1IDExLjgxM3pNMzguOTUgODAuOTRoNS4wOTFWMzguNzU2TDM4Ljk1IDM1LjM4djQ1LjU2ek0yMC4yMDkgNDUuNjlsLjA3MiA2LjU2MyAxMS44ODUtNS4wNnYtNi43NTRMMjAuMjA5IDQ1LjY5em0wIDEzLjY5NmwuMDcyIDYuMzczIDExLjg4NS0zLjM3N1Y1NS42M2wtMTEuOTU3IDMuNzU2em0uMDcyIDEzLjExNnY1LjA2aDExLjg4NXYtOC40MzVMMjAuMjggNzIuNTAyek01IDg2aDczdi0zLjM3N0g1Vjg2eiIgZmlsbD0iI0VERjJGNiIvPjxwYXRoIGQ9Ik02NC4wNDMgMEwyMi42MDQgMTYuODc3djExLjI0NmwzLjc2OS0zLjc1MlYxOC43NUw2Mi4xNjUgMy43NjJsOS40MTcgMTEuMjQ1djY5LjM3aDkuNDE3LS4wMXYtMy43NmgtNS42NDh2LTY1LjYyTDY0LjA0MyAwem0tMS44NzggODQuMzY3aDUuNjQ4VjE2LjAxMmwtNS42NDgtNi42Mzd2NzQuOTkyek03LjUzOCAzNy41MDd2NDMuMTE4SDB2My43NTJoMTEuMjk3di00NUwzNy42NyAyOC4xMzNsMTEuMjY3IDguMDc2LjA0MiA0OC4xNjhoOS40MTd2LTMuNzUyaC01LjY0OHYtNDVMMzcuNjggMjQuMzgxIDcuNTM4IDM3LjUwN3ptMzAuMTMyIDQ2Ljg3aDUuNjV2LTQ2Ljg3bC01LjY1LTMuNzUydjUwLjYyMnpNMTYuODc1IDQ1LjIxbC4wOCA3LjI5MyAxMy4xODgtNS42MjN2LTcuNTA0TDE2Ljg3NSA0NS4yMXptMCAxNS4yMThsLjA4IDcuMDgyIDEzLjE4OC0zLjc1M3YtNy41MDNMMTYuODc1IDYwLjQzem0uMDggMTQuNTczdjUuNjIzaDEzLjE4OHYtOS4zNzNsLTEzLjE4NyAzLjc1ek0wIDkwaDgxdi0zLjc1MkgwVjkweiIgZmlsbD0iIzNFNDk1NCIvPjwvZz48L3N2Zz4=);
}

.div-kb:hover {
    background-color: #1677ff;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODEiIGhlaWdodD0iOTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY0LjA0MyAwTDIyLjYwNCAxNi44Nzd2MTEuMjQ2bDMuNzY5LTMuNzUyVjE4Ljc1TDYyLjE2NSAzLjc2Mmw5LjQxNyAxMS4yNDV2NjkuMzdoOS40MTctLjAxdi0zLjc2aC01LjY0OHYtNjUuNjJMNjQuMDQzIDB6bS0xLjg3OCA4NC4zNjdoNS42NDhWMTYuMDEybC01LjY0OC02LjYzN3Y3NC45OTJ6TTcuNTM4IDM3LjUwN3Y0My4xMThIMHYzLjc1MmgxMS4yOTd2LTQ1TDM3LjY3IDI4LjEzM2wxMS4yNjcgOC4wNzYuMDQyIDQ4LjE2OGg5LjQxN3YtMy43NTJoLTUuNjQ4di00NUwzNy42OCAyNC4zODEgNy41MzggMzcuNTA3em0zMC4xMzIgNDYuODdoNS42NXYtNDYuODdsLTUuNjUtMy43NTJ2NTAuNjIyek0xNi44NzUgNDUuMjFsLjA4IDcuMjkzIDEzLjE4OC01LjYyM3YtNy41MDRMMTYuODc1IDQ1LjIxem0wIDE1LjIxOGwuMDggNy4wODIgMTMuMTg4LTMuNzUzdi03LjUwM0wxNi44NzUgNjAuNDN6bS4wOCAxNC41NzN2NS42MjNoMTMuMTg4di05LjM3M2wtMTMuMTg3IDMuNzV6TTAgOTBoODF2LTMuNzUySDBWOTB6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
}

.div-zx {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iOTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNTEuNDE1IDg3SDR2LTMuMzc3aDQ2LjQxNWEyMC4zNDQgMjAuMzQ0IDAgMDAxIDMuMzc3ek0zNy45NiAyNy45NDNsMTMuNTggMTAuMTItLjAwMSAzMy42MzNBMjAuNDQgMjAuNDQgMCAwMDUwIDc5LjVjMCAuODI2LjA0OSAxLjY0LjE0NCAyLjQ0SDQ4LjE0bC0uMDM4LTQzLjM1MkwzNy45NSAzMS4zMiAxNC4xODIgNDEuNDR2NDAuNUg0di0zLjM3Nmg2Ljc5M1YzOS43NTZMMzcuOTYgMjcuOTQzem0tLjAxIDguNDM2bDUuMDkyIDMuMzc3VjgxLjk0SDM3Ljk1VjM2LjM4em0tNi43ODMgMzMuNzQ4djguNDM2SDE5LjI4di01LjA2bDExLjg4NS0zLjM3NnptMC0xMy40OTd2Ni43NTJMMTkuMjggNjYuNzZsLS4wNzItNi4zNzMgMTEuOTU3LTMuNzU2em0yOC44Ni00Mi4xOTNsNS4wOSA1Ljk3NHYzOS4zMDNhMjAuMzgxIDIwLjM4MSAwIDAwLTUuMDkgMi4xNlYxNC40Mzd6TTYxLjcxNyA2TDcxLjkgMTkuNDk3djM5LjU1YTIwLjgwMyAyMC44MDMgMCAwMC0zLjM4OC4wNDhWMTkuNTA2bC04LjQ4Ny0xMC4xMi0zMi4yNTcgMTMuNDg4djUuMDZsLTMuMzk2IDMuMzc2VjIxLjE5TDYxLjcxOCA2ek0zMS4xNjYgNDEuNDR2Ni43NTNsLTExLjg4NSA1LjA2LS4wNzItNi41NjMgMTEuOTU3LTUuMjV6TTcwIDY1YzguMjcxIDAgMTUgNi41MDUgMTUgMTQuNUM4NSA4Ny40OTYgNzguMjcxIDk0IDcwIDk0cy0xNS02LjUwNC0xNS0xNC41QzU1IDcxLjUwNSA2MS43MjkgNjUgNzAgNjV6bTkuMjg5IDcuNjIxTDYzLjA4NyA4OC41OTRBMTEuODk4IDExLjg5OCAwIDAwNzAgOTAuNzc4YzYuNDY5IDAgMTEuNzMtNS4wNiAxMS43My0xMS4yNzggMC0yLjQ4Ni0uODY1LTQuOTEzLTIuNDQxLTYuODc5ek03MCA2OC4yMjNjLTYuNDY5IDAtMTEuNzMgNS4wNTgtMTEuNzMgMTEuMjc3IDAgMi40ODcuODY1IDQuOTE1IDIuNDQxIDYuODhsMTYuMjAyLTE1Ljk3NEExMS44OTYgMTEuODk2IDAgMDA3MCA2OC4yMjN6IiBmaWxsPSIjRURGMkY2Ii8+PHBhdGggZD0iTTY5Ljg5NiA2NS4zODJjLTcuODA3IDAtMTQuMTU3IDYuMjA1LTE0LjE1NyAxMy44MzMgMCAzLjA1IDEuMDQ0IDYuMDI4IDIuOTQ3IDguNDM4TDc4LjI0IDY4LjA2YTE0LjIgMTQuMiAwIDAwLTguMzQ0LTIuNjc4ek02MS41NTMgOTAuMzdhMTQuMjAyIDE0LjIwMiAwIDAwOC4zNDMgMi42NzhjNy44MDggMCAxNC4xNTgtNi4yMDYgMTQuMTU4LTEzLjgzMyAwLTMuMDUtMS4wNDQtNi4wMjctMi45NDctOC40MzhMNjEuNTUzIDkwLjM3ek02OS44OTYgOTdjLTkuOTgyIDAtMTguMTAzLTcuOTc3LTE4LjEwMy0xNy43ODVzOC4xMjEtMTcuNzg2IDE4LjEwMy0xNy43ODZDNzkuODggNjEuNDI5IDg4IDY5LjQwNyA4OCA3OS4yMTUgODggODkuMDIzIDc5Ljg3OSA5NyA2OS44OTYgOTd6TTU4Ljg3NiA4LjI4OWw2LjIwOCA3LjM0MnY0Mi42NDZsLS4zMjcuMDhhMjEuMjQ0IDIxLjI0NCAwIDAwLTUuMjQ0IDIuMDQybC0uNjM4LjM1M1Y4LjI5em0xMi44NzEgNDkuNTE0YTIxLjc0NiAyMS43NDYgMCAwMC0xLjg1MS0uMDkzYy0uNTQ1IDAtMS4wOC4wNC0xLjYxNy4wODFsLS40NjIuMDM1LS4wMjMtLjQ2MXYtNDIuMzhMNTkuMTc3IDQuNjNsLTMzLjM0IDE0LjA1NHY1LjI1MmwtNC40MjkgNC40MzhWMTYuMzI1TDYxLjIzIDBsMTAuOTg1IDE0LjY3OHY0My4xNjVsLS40NjctLjA0ek00Ni4zODggODEuMzk3bC0uMDM4LTQ2LjEzMi0xMC4yOTktNy40My0yNC40OTQgMTAuNTEzdjQzLjA0OUgwVjc2Ljk2aDcuMTRWMzZsMjkuMDM0LTEyLjcyNiAxNC42NCAxMC45OTh2MzUuMTMzbC0uMDQ3LjA5M2EyMS4zMTYgMjEuMzE2IDAgMDAtMi4zMzMgOS43MTdjMCAuNTguMDQgMS4xNS4wODUgMS43MThsLjAzOC40NjRoLTIuMTY5em0tMTAuNzExIDBWMzEuOWw2LjIwOSA0LjE1djQ1LjM0NmgtNi4yMXpNMTUuOTc5IDQzLjM0OGwxMy40MjctNS45NDN2OC4wOTZsLTEzLjM0IDUuNzI2LS4wODctNy44Nzl6TTAgODguODk1Vjg0LjQ2aDQ4LjY4bC4wNTguMzYxYy4xOTUgMS4yMDYuNDg4IDIuMzg3Ljg3MSAzLjUwNmwuMTk2LjU3SDB6TTE2LjA1OSA3Ny44MnYtNi4xMTRsMTMuMzQ3LTMuODIzdjkuOTM3SDE2LjA1OXptLS4wOC0xOS45OThsMTMuNDI3LTQuMjUydjguMDY0bC0xMy4zNCAzLjgyLS4wODctNy42MzJ6IiBmaWxsPSIjM0U0OTU0Ii8+PC9nPjwvc3ZnPg==);
}

.div-zx:hover {
    background-color: #1677ff;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iOTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY5Ljg5NiA2NS4zODJjLTcuODA3IDAtMTQuMTU3IDYuMjA1LTE0LjE1NyAxMy44MzMgMCAzLjA1IDEuMDQ0IDYuMDI4IDIuOTQ3IDguNDM4TDc4LjI0IDY4LjA2YTE0LjIgMTQuMiAwIDAwLTguMzQ0LTIuNjc4ek02MS41NTMgOTAuMzdhMTQuMjAyIDE0LjIwMiAwIDAwOC4zNDMgMi42NzhjNy44MDggMCAxNC4xNTgtNi4yMDYgMTQuMTU4LTEzLjgzMyAwLTMuMDUtMS4wNDQtNi4wMjctMi45NDctOC40MzhMNjEuNTUzIDkwLjM3ek02OS44OTYgOTdjLTkuOTgyIDAtMTguMTAzLTcuOTc3LTE4LjEwMy0xNy43ODVzOC4xMjEtMTcuNzg2IDE4LjEwMy0xNy43ODZDNzkuODggNjEuNDI5IDg4IDY5LjQwNyA4OCA3OS4yMTUgODggODkuMDIzIDc5Ljg3OSA5NyA2OS44OTYgOTd6TTU4Ljg3NiA4LjI4OWw2LjIwOCA3LjM0MnY0Mi42NDZsLS4zMjcuMDhhMjEuMjQ0IDIxLjI0NCAwIDAwLTUuMjQ0IDIuMDQybC0uNjM4LjM1M1Y4LjI5em0xMi44NzEgNDkuNTE0YTIxLjc0NiAyMS43NDYgMCAwMC0xLjg1MS0uMDkzYy0uNTQ1IDAtMS4wOC4wNC0xLjYxNy4wODFsLS40NjIuMDM1LS4wMjMtLjQ2MXYtNDIuMzhMNTkuMTc3IDQuNjNsLTMzLjM0IDE0LjA1NHY1LjI1MmwtNC40MjkgNC40MzhWMTYuMzI1TDYxLjIzIDBsMTAuOTg1IDE0LjY3OHY0My4xNjVsLS40NjctLjA0ek00Ni4zODggODEuMzk3bC0uMDM4LTQ2LjEzMi0xMC4yOTktNy40My0yNC40OTQgMTAuNTEzdjQzLjA0OUgwVjc2Ljk2aDcuMTRWMzZsMjkuMDM0LTEyLjcyNiAxNC42NCAxMC45OTh2MzUuMTMzbC0uMDQ3LjA5M2EyMS4zMTYgMjEuMzE2IDAgMDAtMi4zMzMgOS43MTdjMCAuNTguMDQgMS4xNS4wODUgMS43MThsLjAzOC40NjRoLTIuMTY5em0tMTAuNzExIDBWMzEuOWw2LjIwOSA0LjE1djQ1LjM0NmgtNi4yMXpNMTUuOTc5IDQzLjM0OGwxMy40MjctNS45NDN2OC4wOTZsLTEzLjM0IDUuNzI2LS4wODctNy44Nzl6TTAgODguODk1Vjg0LjQ2aDQ4LjY4bC4wNTguMzYxYy4xOTUgMS4yMDYuNDg4IDIuMzg3Ljg3MSAzLjUwNmwuMTk2LjU3SDB6TTE2LjA1OSA3Ny44MnYtNi4xMTRsMTMuMzQ3LTMuODIzdjkuOTM3SDE2LjA1OXptLS4wOC0xOS45OThsMTMuNDI3LTQuMjUydjguMDY0bC0xMy4zNCAzLjgyLS4wODctNy42MzJ6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
}

.div-kb:hover,
.div-zx:hover {
    -webkit-box-shadow: 0 5px 14px 0 hsla(0, 0%, 50.6%, .2);
    box-shadow        : 0 5px 14px 0 hsla(0, 0%, 50.6%, .2);
    color             : #fff;
}

.div-style {
    width              : 300px;
    height             : 200px;
    display            : inline-block;
    vertical-align     : top;
    border             : 1px solid #e8e8e8;
    -webkit-box-shadow : 0 5px 14px 0 hsla(0, 0%, 50.6%, .2);
    box-shadow         : 0 5px 14px 0 hsla(0, 0%, 50.6%, .2);
    border-radius      : 4px;
    background-size    : 81px 90px;
    background-position: 50% 30%;
    background-repeat  : no-repeat;
    font-size          : 18px;
    color              : #1c3a5c;
    letter-spacing     : 0;
    text-align         : center;
    line-height        : 320px;
    margin-right       : 36px;
    cursor             : pointer;
}

@media only screen and (max-width: 768px) {
    .body-content {
        width  : 100%;
        padding: 0.3rem;
    }

    .div-style {
        width       : 3rem;
        height      : 3rem;
        margin-right: 0.4rem;
        line-height : 5rem;
        font-size   : 13px;
    }

    .div-zx {
        margin: 0;
    }
    #app{padding: 0.5rem 0.2rem;}
}