.top-ring {
    position: absolute;
    right: 48px;
    top: 0;
    width: 48px;
    height: 48px;
    background: url('https://i2.w.hjfile.cn/doc/201506/73c19d74c6114a0fb899c85ff567c7df.png') no-repeat;
    background-size: 48px auto;
}

.top-ring-on {
    background: url('https://i2.w.hjfile.cn/doc/201506/a7c99e795d6e4a7d9d1edc7a50272cd6.gif') no-repeat;
    background-size: 48px auto;
}

.top-ring-wrap {
    position: fixed;
    width: 240px;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -120px;
}

.top-ring-slider{
}
.top-ring-li {
    float: left;
    height: 300px;
}
.top-ring-slider a {
    display: block;
    height: 100%;
    width: 204px;
    margin: 0 auto;
}

.top-ring-slider img {
    display: block;
    height: 100%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
}

.top-ring-close {
    position: fixed;
    right: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAlRJREFUeNrMmDtrAkEUhTcRAoIgBISAIFgFrAQrwcoQsLKyEgL+AFsrWytbQUhlZWVlFRCsAqmEVIZUgUAgIRAIBAIBYXLHnDHXx+ruzuzjwinceX077szcOUeCwrKsB9IF6c2KTqRIE4v47sVfPJLSkjcCOiPNBX6ckmaAfCJlQoZLY7JkzNTDJOkOD59J2ZDgMpgkAZ4kL0yQblH4QjoPGC6LyRHgSCyXx0alOGmKSq+kXEBw55gUgfHjqmxXZVl4g8rvAUDmMBkC48Z5uV2jkw3IvE9wefQvY4xxLSeACnKMxh+kgo9wo11whwAV5AidfJKKhuAKeGkZQ1LMrq6TzmLoRMYXqaQJV8TLyhjsg3MKqCAH6PSbVPYIV8JLOoJzA6h0zSArLtuW0U6gH0ftvMxCzwNkhcH13Izn9TtSkD+k6oG6VdST0XU7ls7H3mWQNZs6NQbX8TKO7nbRweALUn2jrI7nMtpexzCxp7UZZAPPrhhcS6d/U6dCS/zHgME1dfs2eXQ1xXo0TfR7bEU9DP/FC3biaH9/fiwStZIbJlawyW1m117It5lOGIBdB6dJTecUMXHUOTmP+VHXCwKw7yHt4slC309Anm65TVwv/Uy3eMKqk1XznNBYwspTfhP3Ep5VD3VTfn5pMnmz4/cS2xudm2unH3djfrMbu712cnfBTwuE3423XIV91sc0QBPJlfXBHa4gbTgOaWsecY8wDCOTO1xb9lvYcLs8wpWByS3gKPjU3GVdWsAT/JjDvI6Cib7yqdVSlx9mKiJwa07/rwADAMm0lJ82xRGJAAAAAElFTkSuQmCC') center center no-repeat;
    background-size: 20px auto;
}