@keyframes ghost-float {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-15px);
    }
}

@keyframes shadow-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: .3;
    }
}

@keyframes ghost-blink {
    0% {
        transform: scale(1, 0);
    }
    5% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}

body {
    margin: 0;
    background: #d5dde1;
}

html, body {
    width: 100%;
    height: 100%;
}

.container {
    width: 100%;
    padding-top: 25vh;
    overflow: hidden;
}

.ghost {
    float: right;
    width: 105px;
    margin: 0 30px;
}

.ghost:after {
    content: '';
    display: block;
    height: 15px;
    border-radius: 50%;
    margin-top: 20px;
    background: rgba(0, 0, 0, .1);
    animation: shadow-fade 3s alternate infinite ease-in-out;
}

.ghost-body {
    height: 120px;
    padding-top: 35px;
    background: #fff;
    border-radius: 70px 70px 0 0;
    text-align: center;
    box-sizing: border-box;
    animation: ghost-float 3s alternate infinite ease-in-out;
}

.ghost-body:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -9px;
    width: 100%;
    height: 10px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTcnIGhlaWdodD0nMTcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgIHZpZXdCb3g9JzAgMCAxMDAgMTAwJz4KCTxsaW5lYXJHcmFkaWVudCBpZD0nZzEnIHgxPScwJScgeTE9JzAlJyB4Mj0nMTAwJScgeTI9JzAlJz4KCQk8c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojOTk5OTk5O3N0b3Atb3BhY2l0eToxJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6I2ZiZGE1OTtzdG9wLW9wYWNpdHk6MCcgLz4KCTwvbGluZWFyR3JhZGllbnQ+Cgk8bGluZWFyR3JhZGllbnQgaWQ9J2cyJyB4MT0nMCUnIHkxPScwJScgeDI9JzAlJyB5Mj0nMTAwJSc+CgkJPHN0b3Agb2Zmc2V0PScwJScgc3R5bGU9J3N0b3AtY29sb3I6Izk5OTk5OTtzdG9wLW9wYWNpdHk6MScgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmYmRhNTk7c3RvcC1vcGFjaXR5OjAnIC8+Cgk8L2xpbmVhckdyYWRpZW50PgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnMycgY3g9JzAlJyBjeT0nMCUnIHI9JzEwMCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiM5OTk5OTk7c3RvcC1vcGFjaXR5OjEnIC8+CgkJPHN0b3Agb2Zmc2V0PScxMDAlJyBzdHlsZT0nc3RvcC1jb2xvcjojZmJkYTU5O3N0b3Atb3BhY2l0eTowJyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxnIHRyYW5zZm9ybT0ncm90YXRlKDQ1KSB0cmFuc2xhdGUoMjEuMiAtNDkuNSknPgoJCTxyZWN0IHg9Jy01MCUnIHk9Jy01MCUnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9JyNmZmZmZmYnIC8+CgkJPHJlY3QgeD0nNTAlJyB5PSctNTAlJyB3aWR0aD0nMCUnIGhlaWdodD0nMTAwJScgZmlsbD0ndXJsKCNnMSknIC8+CgkJPHJlY3QgeD0nLTUwJScgeT0nNTAlJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScwJScgZmlsbD0ndXJsKCNnMiknIC8+CgkJPHJlY3QgeD0nNTAlJyB5PSc1MCUnIHdpZHRoPScwJScgaGVpZ2h0PScwJScgZmlsbD0ndXJsKCNnMyknIC8+Cgk8L2c+Cjwvc3ZnPg==) repeat-x center top;
}

.ghost-eye {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    transition: all .1s ease;
}

.ghost-eye:before, .ghost-eye:after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background: #454e57;
    border-radius: 50%;
    margin: 2px;
    animation: ghost-blink 4s infinite ease;
}

.right {
    margin-left: 15px;
}

.left {
    margin-right: 15px;
}

.top {
    /*margin-top: -15px;*/
    transform: translateY(-15px);
}

.bottom {
    margin-top: 15px;
}

.tips-title {
    margin: 24px 0 12px 0;
    font-size: 32px;
    color: var(--primary-font-color);
}

.tips-con {
    margin: 5px 0;
    color: var(--regular-font-color);
    font-size: 14px;
}

.tips-con > a {
    color: var(--theme-color);
    text-decoration: none;
}

@media only screen and (max-width: 991px) {
    .ghost {
        float: none;
        margin: 0 auto;
    }

    .tips {
        text-align: center;
    }
}