@charset "utf-8";
@import url("http://at.alicdn.com/t/font_1261873_n7dbplomc4r.css");

body {
    margin: 0px; padding: 0px; min-width: 1048px;
    font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    font-size: 14.8px; color: #333; text-align: center;
    user-select: none; -moz-user-select: none; -webkit-user-select: none;
    cursor: default;
}
a {
    color: #333; text-decoration: none; outline: none;
            transition: color 0.24s ease-in-out;
         -o-transition: color 0.24s ease-in-out;
       -moz-transition: color 0.24s ease-in-out;
    -webkit-transition: color 0.24s ease-in-out;
}
a:hover { color: #f30; text-decoration: none; }

header { display: block; margin: 0px; padding: 48px 0px 24px; height: auto; }
header img {
    display: block; margin: 0px auto; padding: 0px; width: 128px; height: auto;
}
header span { display: block; margin: 16px 0px; padding: 0px; height: 32px; }
header a {
    display: inline-flex; position: relative; margin: 0px 32px 0px 0px;
    height: inherit; align-items: center;
}
header a::after {
    position: absolute; top: 10px; right: -18px; bottom: 9px; content: "";
    border-right: solid 1px #ccc;
            transform: rotate(16deg);
         -o-transform: rotate(16deg);
        -ms-transform: rotate(16deg);
       -moz-transform: rotate(16deg);
    -webkit-transform: rotate(16deg);
    z-index: -2;
}
header a:last-child { margin: 0px; }
header a:last-child::after { display: none; }

ul {
    display: inline-block; position: relative;
    margin: 0px auto; padding: 32px 0px; width: 1200px; height: calc(100vh - 188px - 56px - 64px - 4px);
    text-align: center;
}
li {
    position: relative; float: left;
    margin: 0px; padding: 24px 32px; width: calc(100% / 3); height: 50%; min-height: 216px;
    font-size: 0.88rem; text-align: center; color: #999;
    list-style-type: none; outline: none;
    border: solid 1px #f9f9f9; border-top: none; border-left: none;
                transition: all 0.24s ease-in-out;
             -o-transition: all 0.24s ease-in-out;
            -ms-transition: all 0.24s ease-in-out;
           -moz-transition: all 0.24s ease-in-out;
        -webkit-transition: all 0.24s ease-in-out;
    box-sizing: border-box;
}
li::before {
    position: absolute; right: -1px; bottom: 0px; left: 0px; content: "";
    width: 100%; height: 0px; background: #fff;
                transition: all 0.32s ease-in-out;
             -o-transition: all 0.32s ease-in-out;
            -ms-transition: all 0.32s ease-in-out;
           -moz-transition: all 0.32s ease-in-out;
        -webkit-transition: all 0.32s ease-in-out;
    z-index: -2;
}
li:first-child::after,
li:last-child::after {
    position: absolute; top: -1px; left: -1px; content: "";
    width: 128px; height: 48px;
    border: solid 1px #e9e9e9; border-right: none; border-bottom: none;
}
li:last-child::after {
    top: auto; right: -1px; bottom: -1px; left: auto;
    border: solid 1px #e9e9e9; border-top: none; border-left: none;
}
li:nth-child(4),
li:nth-child(5),
li:nth-child(6) { border-bottom: none; }
li:nth-child(3),
li:nth-child(6) { border-right: none; }

li i {
    display: inline-block; margin-bottom: 16px; width: 64px; height: 64px;
    line-height: 64px;
    font-family: "iconfont" !important; font-size: 3.24rem; color: #1894cd;
    font-style: normal;
            transition: color 0.40s ease-in-out;
         -o-transition: color 0.40s ease-in-out;
        -ms-transition: color 0.40s ease-in-out;
       -moz-transition: color 0.40s ease-in-out;
    -webkit-transition: color 0.40s ease-in-out;
    -webkit-font-smoothing: ntialiased; -webkit-text-stroke-width: 0px;
    -moz-osx-font-smoothing: grayscale;
}
li p {
    margin: 0px 0px 16px; padding: 0px; line-height: 28px; font-size: 1.08rem; color: #666;
            transition: color 0.24s ease-in-out;
         -o-transition: color 0.24s ease-in-out;
        -ms-transition: color 0.24s ease-in-out;
       -moz-transition: color 0.24s ease-in-out;
    -webkit-transition: color 0.24s ease-in-out;
}
li:hover { color: #333; }
li:hover,
li:hover i,
li:hover p { color: #fff; }
li:hover::before {
    height: 100%; background-image: linear-gradient(-16deg, #1f6cae, #1894cd);
}

footer {
    display: flex; clear: both; margin: 0px; padding: 0px; height: 56px;
    font-size: 0.80rem; color: #333; align-items: center; justify-content: center;
    border-top: solid 1px #f3f3f3;
}
footer a.beian { position: relative; padding-left: 22px; }
footer img { position: absolute; top: -2px; left: 0px; }