/*基础样式*/
body {
    background: #494A5F;
    color: #D5D6E2;
    font-weight: 500;
    font-size: 1.05em;
    font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a {
    color: #2fa0ec;
    outline: none;
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: none;
}
h1 {
    font-size: 95px;
    text-align: center;
    color: #fff;
    text-shadow: 0px 5px 3px #999;
}
.content {
    width: 100%;
}
.starability-container {
    width: 1200px;
    margin: 0 auto;
    padding: 2em 0;
}
.center {
    text-align: center;
}
.starability-slot {
    display: block;
    position: relative;
    width: 1200px;
    min-height: 60px;
    padding: 0;
    border: none;
}
/*starability-slot*/
.starability-slot > input {
    position: absolute;
    margin-right: -100%;
    opacity: 0;
}
/*
.starability-slot > input:checked ~ label, .starability-slot > input:focus ~ label, .starability-slot > input:hover ~ label, .starability-slot > input.light, .starability-slot > label.light {
    background-position: 0 -240px;
}*/
.starability-slot > input:focus + label {
    outline: 1px dotted #999;
}
.starability-slot > label {
    position: relative;
    display: inline-block;
    float: left;
    width: 240px;
    height: 240px;
    color: transparent;
    cursor: pointer;
    background-image: url(../img/icons_large.png);
    background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),screen and (-webkit-min-device-pixel-ratio:2) {
    .starability-slot > label {
        background-image: url(../img/icons_large.png);
        background-size: 240px auto;
    }
}
/*
.starability-slot > input:checked ~ label, .starability-slot > input:focus ~ label, .starability-slot > input:hover ~ label, .starability-slot > input.light~label {
    transition: background-position .7s;
}*/
@keyframes a {
    0% {
        transform: scale(1)
    }

    99% {
        transform: scale(4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 0;
    }
}
/*按钮样式*/
.btn {
    top: 0px;
    display: block;
    margin: 0px auto 20px auto;
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-style: normal;
    font-size: 50px;
    font-weight: bold;
    position: relative;
    border-radius: 40px;
    background: #A5DE37;
    color: #fff;
    text-shadow: 0px 5px 0px #a1d243;
    -webkit-box-shadow: 0px 10px 0px #8bc220, 0px 12px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 10px 0px #8bc220, 0px 12px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin-top: 50px;
}
.btn:hover, .btn:focus {
    -webkit-box-shadow: 0px 10px 0px #84b91f, 0px 12px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 10px 0px #84b91f, 0px 12px 0px rgba(0, 0, 0, 0.3);
}
.btn:active {
    color: #8bc220;
    top: 5px;
    text-shadow: 0px 0px 0px #fff;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
    -webkit-box-shadow: 0px 2px 0px #6b9619, 0px 4px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 0px #6b9619, 0px 4px 0px rgba(0, 0, 0, 0.3);
}