.hvr-float-shadow, .hvr-glow {
    -moz-osx-font-smoothing: grayscale
}

.container {
    height: 595px;
    padding-top: 88px;
    margin: 0 auto;
    background: url(../images/index/bg-kf.jpg) top center no-repeat
}

.container-index {
    width: 1000px;
    height: 502px;
    position: relative;
    margin: 0 auto
}

.kv-num, .modules-kv, .modules-kv-li {
    position: absolute
}

.container-index .modules-kv, .container-index .modules-type-1, .container-index .modules-type-2, .container-index .modules-type-3 {
    position: absolute;
    display: block
}

.modules-type-1, .modules-type-1 img {
    width: 316px;
    height: 316px
}

.modules-kv, .modules-kv img, .modules-type-2, .modules-type-2 img {
    width: 316px;
    height: 150px
}

.modules-type-3, .modules-type-3 img {
    width: 150px;
    height: 150px
}

@media (max-width: 1366px) and (min-width: 0) {
    .container {
        height: 515px;
        padding-top: 10px
    }
}

.modules-1 {
    left: 10px;
    top: 10px;
    background: #4e9cef
}

.modules-2 {
    left: 342px;
    top: 10px;
    background: #6d98e7
}

.modules-kv {
    left: 674px;
    top: 10px;
    width: 316px;
    height: 150px;
    overflow: hidden
}

.modules-4 {
    left: 342px;
    top: 176px;
    background: #29cbcd
}

.modules-5 {
    left: 674px;
    top: 176px;
    background: #4e9cef
}

.modules-6 {
    left: 10px;
    top: 342px;
    background: #ffc933
}

.modules-7 {
    left: 176px;
    top: 342px;
    background: #4e9cef
}

.modules-8 {
    left: 342px;
    top: 342px;
    background: #6d98e7
}

.modules-9 {
    left: 508px;
    top: 342px;
    background: #ffc933
}

.modules-10 {
    left: 674px;
    top: 342px;
    background: #6d98e7
}

.modules-11 {
    left: 840px;
    top: 342px;
    background: #29cbcd
}

.kv-num {
    bottom: 10px;
    right: 5px;
    z-index: 10;
    text-align: center;
    zoom: 1
}

.kv-num li {
    margin: 0 3px;
    float: left;
    zoom: 1;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
    display: inline-block;
    transition: width .3s ease-out;
    cursor: pointer;
    overflow: hidden
}

.kv-num li.active {
    background: #29cbcd
}

.modules-kv-li {
    display: none;
    width: 316px;
    height: 150px;
    top: 0;
    left: 0
}

.hvr-float-shadow, .hvr-glow, .modules-kv-li:first-child {
    display: inline-block
}

.hvr-float-shadow {
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    -ms-transition-property: transform;
    -o-transition-property: transform;
    transition-property: transform
}

.hvr-float-shadow:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 80%);
    background: -moz-radial-gradient(center, ellipse, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 80%);
    background: -ms-radial-gradient(center, ellipse, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 80%);
    background: -o-radial-gradient(center, ellipse, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 80%);
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform, opacity;
    -moz-transition-property: transform, opacity;
    -ms-transition-property: transform, opacity;
    -o-transition-property: transform, opacity;
    transition-property: transform, opacity
}

.hvr-float-shadow:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px)
}

.hvr-float-shadow:hover:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(5px)
}

.hvr-glow {
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow
}

.hvr-glow:hover {
    box-shadow: 0 3px 20px rgba(0, 0, 0, .6)
}

.modules-type-1 .modules-bg {
    width: 316px;
    height: 316px;
    position: absolute;
    top: 0;
    left: 0
}

.modules-type-2 .modules-bg {
    width: 316px;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0
}

.modules-type-3 .modules-bg {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0
}

.modules-type-1:hover .bigger {
    width: 326px;
    height: 326px;
    position: absolute;
    top: -5px;
    left: -5px
}

.modules-kv:hover .bigger, .modules-type-2:hover .bigger {
    width: 326px;
    height: 160px;
    position: absolute;
    top: -5px;
    left: -5px
}

.modules-type-3:hover .bigger {
    width: 160px;
    height: 160px;
    position: absolute;
    top: -5px;
    left: -5px
}