/* 设定全局、超链接样、整体样式、填写框、比例高度
================ */
@font-face{
    font-family: 'SourceHanSansCN-Regular';
    src: url("../fonts/SourceHanSansCN-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
a:link{text-decoration:none;}
a::visited{text-decoration:none;}
a::active{text-decoration:none;}
body ,div ,img{margin: 0 0 0 0;padding: 0 0 0 0;}
html ,body ,div ,img{width:100%;}
html ,body ,div ,img{box-sizing: border-box;}
input{outline:medium;}
body ,html ,#in_body{height:100%;background:#e8e8e8;font-family: 'SourceHanSansCN-Regular';}

body{
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    transform:translate(-50%,0%);/*平移*/
}

#test_css{
    font-weight: 900;
    color: #fff;
    display:table-cell;
    text-align:right;
    vertical-align:middle;
}
#test_css p{
    position: relative;
    right: 3em;
    word-wrap:normal;/*换行方式*/
}
.test_css2{
    position: absolute;
    top:30%;
    right: 50%;
    width: 1em;
    height:1em;
    margin: 0 -0.5em 0 0;
    background: #44b5df;
    /*圆角*/
    border-radius:50%;
    animation:test_load 1s linear 0s infinite;/*名称 时间 速度曲线 等待跳过 次数*/
    -webkit-animation:test_load 1s linear 0s infinite;/*名称 时间 速度曲线 等待跳过 次数*/
}
.test_css{
    position: absolute;
    top:30%;
    right: 50%;
    width: 1em;
    height:1em;
    margin: 0 -0.5em 0 0;
    background: #44b5df;
    /*圆角*/
    border-radius:50%;
    animation:test_loadok 1s linear 0s forwards;/*名称 时间 速度曲线 等待跳过 次数*/
    -webkit-animation:test_loadok 1s linear 0s forwards;/*名称 时间 速度曲线 等待跳过 次数*/
}
@keyframes test_load{
    0%{
        width: 1em;
        height:1em;
        margin: 0 -0.5em 0 0;
        background: #44b5df;
    }
    50%{
        width: 3em;
        height:3em;
        margin: -1em -1.5em 0 0;
        background: rgba(68, 181, 223, 0);
    }
    100%{
        width: 1em;
        height:1em;
        margin: 0 -0.5em 0 0;
        background: #44b5df;
    }
}
@keyframes test_loadok{
    0%{
        top:30%;
        right: 50%;
        width: 1em;
        height:1em;
        border-radius:50%;
        margin: 0 -0.5em 0 0;
    }
    50%{
        top:0%;
        right: 50%;
        width: 1em;
        height:1em;
        border-radius:50%;
        margin: 0 -0.5em 0 0;
    }
    51%{
        top:0%;
        right: 50%;
        width: 1em;
        height:1em;
        border-radius:0%;
        margin: 0 -0.5em 0 0;
    }
    99%{
        right: 0%;
        width: 100%;
        height:3em;
        border-radius:0%;
        margin: 0 0em 0 0;
        background: rgba(0, 0, 0, 0.7);
    }
    100%{
        top:0;
        right:0%;
        width: 100%;
        height:3em;
        border-radius:0%;
        margin: 0 0em 0 0;
        background: rgba(0, 0, 0, 0.7);
    }
}