.y-lock {
    position: relative;
}

.y-lock:before {
    content: ' ';
    width: 1.5625rem;
    height: 1.5625rem;
    display: block;
    position: absolute;
    top: .5rem;
    left: .5rem;
    background: url("gua/icon_stop.png") no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}

.y-glod {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
}

.y-glod img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -9.15rem;
    margin-top: -6.5rem;
    width: 18.3rem;
    height: 13rem;
}

.y-glod-score {
    position: absolute;
    left: 50%;
    top: 70%;
    display: inline-block;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    background: #802222;
    padding: 10px 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.y-glod-score.show {
    opacity: 1;
}

.panel1 li {
    height: 4.6rem;
    padding: .425rem .3rem;
}

.panel1 li .scratch,
.panel1 li .scratch .card {
    width: 8.15rem;
    height: 4.6rem;
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animated.infinite {
    animation-iteration-count: infinite;
}

.animated.hinge {
    animation-duration: 2s;
}

.animated.bounceIn {
    animation-duration: .75s;
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(.97, .97, .97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    animation-name: bounceIn;
}

.y-dialog {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
}

.y-dialog.show {
    display: block;
}


.y-dialog-body {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 25.333333333rem;
    height: 13.933333333rem;
    margin-left: -12.666666666rem;
    margin-top: -6.966666666rem;
    background: #fff;
    padding: 2rem 2.333333333rem;
    box-sizing: border-box;
}

.y-dialog-close {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 2.466666667rem;
    height: 2.466666667rem;
    margin-right: -1.233333334rem;
    margin-top: -1.233333334rem;
    background: url("gua/icon-close.jpg") no-repeat center center #dedede;
    background-size: .933333333rem 1.2rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.y-dialog-content {
    font-size: 1.466666667rem;
    text-align: center;
    color: #515151;
}

.y-dialog-content.checkbox {
    font-size: .733333333rem;
    padding: .6rem 0 2.4rem;
}

.y-dialog-btn {
    display: inline-block;
    width: 10rem;
    height: 3.333333333rem;
    line-height: 3.333333333rem;
    color: #fff;
    background: #de9d37;
    border-radius: 1.666666666rem;
}

.y-dialog-btn:last-child {
    background: #dc4413;
}