* {
    margin: 0;padding: 0;outline: none;
}
img {
    border: none;
    vertical-align:middle;
}
input {
    border: none;
}
a {
    text-decoration: none;
    color: #000000;
}
*, :after, :before {
    box-sizing: border-box;
}

body {
    background: #6097a9;
    background: linear-gradient(to bottom right, #6097a9 0, #7bbfd6 100%);
}
.middle-box {
    width: 500px;
    margin: 40px auto 0 auto;
    z-index: 100;
}

.middle-box h1 {
    color: #ffffff;
    font-size: 40px;
    text-align: center;
}

.row-content {
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 5px;
    padding: 20px;
}

.row-content .collect {
    display: inline-block;
    width: 100%;
    height: 50px;
    background: #6097a9;
    color: #ffffff;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.row-one {
    display: flex;
    flex-direction: column;
    padding: 0 20px 0 20px;
}
.row-one a {
    color: #6097a9;
}
.row-one span,a {
    margin-bottom: 10px;
}
.row-one a:last-child {
    margin-bottom: 0;
}
.row-one a:hover {
    text-decoration: underline;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #e2e0de;
}


.footer {
    text-align: center;
    padding: 50px 0;
    color: #ffffff;
}

.fixed {
    display: inline-block;
    position: fixed;
    bottom: 0;


    line-height: 50px;
    text-align: center;
    font-size: 14px;

}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
}

/*滚动条 阴影~圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.7);
    border-radius: 10px;
    background-color: #f5f5f5;
}

/*滑块 阴影~圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.7);
    background-color: rgb(149, 147, 147);
}

.tip {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    color: #6097a9;
}
.tip span {
    color: #d9534f;
    font-size: 25px;
}



.ball {
    display: inline-block;
    position: fixed;
    bottom: -51px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    height: 50px;
    width: 50px;
    color: #ffffff;
    font-weight: bold;
    z-index:-1;
    border-radius: 50%;
    /* 为球的背景添加径向渐变，渐变中心在 77% 水平、30% 垂直位置 */
    background: radial-gradient(circle at 77% 30%,
        /* 渐变起点颜色为白色，半径为 5 像素 */
    white 5px,
        /* 渐变颜色从白色平滑过渡到淡蓝色，半径为 8% */
    aqua 8%,
        /* 渐变颜色从淡蓝色平滑过渡到深蓝色，半径为 60% */
    darkblue 60%,
        /* 渐变颜色从深蓝色平滑过渡到淡蓝色，半径为 100% */
    aqua 100%);
    /* 为球添加多重内阴影效果 */
    /* 内部白色阴影，宽度 20 像素 */
    box-shadow: inset 0 0 5px #fff,
        /* 内部淡蓝色阴影，位置偏右 10 像素，宽度 46 像素 */
    inset 2px 0 12px #eaf5fc,
        /* 内部浅蓝色阴影，位置偏右 88 像素，宽度 60 像素 */
    inset 22px 0px 15px #c2d8fe,
        /* 内部淡橙色阴影，位置偏左上方，宽度 100 像素 */
    inset -5px -15px 25px #fde9ea,
        /* 内部淡橙色阴影，位置偏下方，宽度 140 像素 */
    inset 0 12px 32px #fde9ea,
        /* 外部白色阴影，宽度 90 像素 */
    0 0 21px #fff;

}

.email {
    text-align: center;
    font-size: 18px;
    color: #6097a9;
}

/********小于1200px的时候**********/
@media (max-width: 1200px) {
    .middle-box {
        width: 100%;
    }
    .middle-box h1 {
        font-size: 28px;
    }
    .row-content {
        width: 85%;
        margin: 30px auto 0 auto;
    }
    .email {
        font-size: 15px;
    }
}