* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 10px;
    overflow: auto;
    width: 100%;
    min-width: 1200px;
    height: 100%;
    min-height: 800px;
    background: #f1f1f1;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* 顶部横幅 */
.banner {
    position: relative;
    width: 100%;
    height: 7rem;
    font-size: 2rem;
    color: #444444;
    font-weight: 600;
    box-sizing: border-box;
}

.banner .logo {
    position: absolute;
    left: 5rem;
    top: 2.25rem;
}

.banner .logo .logoIcon {
    box-sizing: border-box;
    background: #ffffff;
    padding: 0.6rem;
    border-radius: 50%;
    border: 0.5rem #e0e0e0 solid;
}

.banner .option {
    position: absolute;
    right: 4rem;
    top: 1.25rem;
    display: flex;
}

.banner .option p,
.banner .option div {
    width: 12rem;
    height: 4rem;
    line-height: 4rem;
    border-radius: 2rem;
    text-align: center;
    background: #ffffff;
    cursor: pointer;
}

.banner .option p:hover {
    background: #a2c587
}

.banner .option div {
    width: 26rem;
    background: #333333;
    color: #ffffff;
    text-align: left;
    padding-left: 2rem;
    box-sizing: border-box;
}

.banner .option div span {
    display: inline-block;
    vertical-align: middle;
    margin-top: -0.5rem;
}

.banner .option div .userName {
    width: 12rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.banner .option div .nameIcon {
    box-sizing: border-box;
    background: #ffffff;
    width: 5rem;
    height: 5rem;
    margin-top: -0.5rem;
    margin-right: -5rem;
    border-radius: 50%;
    border: 0.5rem #e0e0e0 solid;
}

/* 初始内容 */
body .content {
    width: 100%;
    height: calc(100% - 7rem);
    flex-direction: column;
    position: relative;
    background: #f1f1f1;
}

.content .home {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    aspect-ratio: 1.5;
    background: #ffffff;
    color: #333333;
    /* display: none; */
}

.home .seletT {
    height: 6rem;
    line-height: 6rem;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
}

.home .textItem {
    height: calc(100% - 14rem);
    width: calc(100% - 4rem);
    margin: 0 auto;
    background: #eff2f7;
}

.home .lev {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.home .lev p {
    display: inline-block;
    flex: 1;
    height: 5rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 5rem;
    text-align: center;
    background: #ffffff;
    border-radius: 0.5rem;
    cursor: pointer;
    margin: 0.15rem;
    margin-top: 0.3rem;
}

.home .lev p.active {
    background: #eff2f7;
}

.home .description {
    width: 100%;
    height: calc(100% - 5rem);
    font-size: 2rem;
    padding: 2rem 5rem;
    box-sizing: border-box;
    display: none;
    position: relative;
}

.home .description .leftGif {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0, -50%);
    width: 36%;
    aspect-ratio: 1.15;
}

.home .description .leftGif img {
    width: 100%;
}

.home .description .rightText {
    width: 40%;
    float: right;
}

.home .description .rightText p{
    font-size: 3rem;
}

.home .description .title {
    font-size: 4rem;
    font-weight: 600;
    text-align: center;
}

.home .description.active {
    display: block;
}

.home .description p.speed,
.home .description p.difficulty {
    font-size: 2.5rem;
    text-align: center;
}

.home .description p.speed input,
.home .description p.speed label,
.home .description p.difficulty input,
.home .description p.difficulty label {
    vertical-align: middle;
}

.home .begin {
    width: 14rem;
    height: 4rem;
    line-height: 4rem;
    margin: 0 auto;
    margin-top: 2rem;
    background: #6C54D3;
    color: #ffffff;
    text-align: center;
    font-size: 2rem;
    border-radius: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* 视标测试 */
.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    display: none;
}

.view .tips {
    position: absolute;
    left: calc(50% + 9cm + 6rem);
    top: calc(50% - 6cm + 4rem);
}

.tips .viewEye,
.tips .viewScope {
    width: 8rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 2rem;
    text-align: center;
    background: #f6d6b6;
    color: #333333;
    margin-top: 2rem;
}

.view .time {
    position: absolute;
    left: calc(50% + 9cm + 10.5rem);
    top: calc(50% - 6cm);
    transform: translate(-50%, 0);
    font-size: 2rem;
}

.view .time span {
    font-size: 3rem;
}

.view .center {
    position: absolute;
    left: calc(50% - 6rem - 0.5cm);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20cm;
    height: 12cm;
    border: 2px solid #000000;
    user-select: none;
}

.center>div {
    position: absolute;
    width: 2cm;
    height: 2cm;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center>div .idx {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    display: none;
}

.view .button {
    position: absolute;
    left: calc(50% + 9cm + 10rem);
    top: calc(50% + 2.8cm);
    transform: translate(-50%, 0);
    font-size: 0.8cm;
    width: 5cm;
    height: 3.2cm;
    display: none;
}

.button span {
    width: 1.5cm;
    height: 1.5cm;
    line-height: 1.35cm;
    background: #333333;
    color: #cccccc;
    border-radius: 0.75cm;
    text-align: center;
    cursor: pointer;
}

.button .top {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translate(-50%, 0);
}

.button .bottom {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0) rotate(180deg);
}

.button .left {
    position: absolute;
    top: 40%;
    left: 10%;
    transform: translate(0, -50%) rotate(270deg)
}

.button .right {
    position: absolute;
    top: 40%;
    right: 10%;
    transform: translate(0, -50%) rotate(90deg)
}


/* 选择眼镜弹窗 */
.cover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    width: 100%;
    height: 100%;
}

.cover>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    aspect-ratio: 1.2;
    background: #ffffff;
    border-radius: 2rem;
}

.cover .eye {
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 2rem;
    color: #2490ad;
}

.cover .eyeImage {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

.eyeImage div {
    position: absolute;
    width: 30%;
    aspect-ratio: 1.2;
    cursor: pointer;
    background: #e5e5e5;
    border-radius: 1rem;
}

.eyeImage div.eye1 {
    left: 0;
}

.eyeImage div.eye2 {
    left: 50%;
    transform: translate(-50%, 0);
}

.eyeImage div.eye3 {
    right: 0;
}

.eyeImage div.active {
    background: #ffff66
}

.eyeImage div img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.cover .scope {
    position: absolute;
    top: 54%;
    left: 5%;
    font-size: 2rem;
    color: #2490ad;
}

.cover .eyeScope,
.cover .colorMode {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    font-size: 2rem;
    display: flex;
    flex-wrap: wrap;
}

.cover .colorMode {
    top: 80%;
}

.cover .eyeScope p,
.cover .colorMode p {
    margin: 1rem 2rem;
}

.cover p input {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}

.cover p input,
.cover p label {
    vertical-align: middle;
}

.cover .sure {
    position: absolute;
    bottom: 4%;
    left: 32%;
    width: 10rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    font-size: 2rem;
    border-radius: 1rem;
    background: #6C54D3;
    color: #ffffff;
    cursor: pointer;
}

.cover .unsure {
    position: absolute;
    bottom: 4%;
    right: 32%;
    width: 10rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    font-size: 2rem;
    border-radius: 1rem;
    background: #6C54D3;
    color: #ffffff;
    cursor: pointer;
}

/* 是否结束训练弹窗 */
.cover2 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    width: 100%;
    height: 100%;
}

.cover2>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    aspect-ratio: 2.5;
    background: #ffffff;
    border-radius: 2rem;
}

.cover2>div .tip {
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 2rem;
    font-weight: 600;
}

.cover2>div .advice {
    position: absolute;
    width: 100%;
    top: 35%;
    text-align: center;
    font-size: 2rem;
}

.cover2>div>div {
    position: absolute;
    bottom: 10%;
    width: 100%;
}

.cover2 .goon {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 20%;
    aspect-ratio: 4;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 1rem;
    line-height: 3.9rem;
    background: #6C54D3;
    color: #ffffff;
    cursor: pointer;
}

.cover2 .stop {
    position: absolute;
    bottom: 0;
    right: 10%;
    width: 20%;
    aspect-ratio: 4;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 1rem;
    line-height: 3.9rem;
    background: #6C54D3;
    color: #ffffff;
    cursor: pointer;
}

/* 开始时候的说明文档 */
.cover3 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
}

.cover3>div {
    width: 65%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cover3>div img {
    width: 100%;
}

.cover3>div p {
    position: absolute;
    top: 90.5%;
    left: 49%;
    transform: translate(-50%, -50%);
    background: #6C54D3;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    width: 13.5rem;
    height: 4.5rem;
    line-height: 4.5rem;
    border-radius: 1rem;
    cursor: pointer;
}

/* 首次注册用户信息 */
.cover4 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
}

.cover4 .mainForm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    aspect-ratio: 1.22;
    background: url('../icon/login.png') no-repeat;
    background-size: cover;
    background-position: center;
}

.mainForm>input {
    width: 53.5%;
    height: 7%;
    box-sizing: border-box;
    background: white;
    font-size: 1.8rem;
    border: 1px solid #f2f2f2;
    outline: none;
    position: absolute;
    padding-left: 1rem;
}

.mainForm input#userName {
    left: 33.5%;
    top: 20.6%;
}

.mainForm #sex {
    left: 33.5%;
    top: 34%;
}

.mainForm input#age {
    left: 33.5%;
    top: 47.2%;
}

.mainForm input#phone {
    left: 33.5%;
    top: 60%;
}

.mainForm #btnLogin {
    position: absolute;
    left: 38%;
    bottom: 5.5%;
    cursor: pointer;
    width: 25%;
    height: 10%;
    background: #6C54D3;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 本次报告 */
.cover5 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #eff2f7;
    display: none;
}

.cover5 .reportDoc {
    width: 100%;
    height: 100%;
}
.reportDoc .logTitle{
    position: absolute;
    top: 2%;
    left: 2.5%;
    font-size: 3rem;
    font-weight: 600;
}

.reportDoc .closeLog {
    position: absolute;
    top: 1rem;
    right: 2rem;
    width: 8%;
    height: 5%;
    background: #6C54D3;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.logContent,
.submitErr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    font-size: 2rem;
    aspect-ratio: 2;
    background: #ffffff;
    border-radius: 1rem;
    box-sizing: border-box;
    padding: 1rem 2rem;
}
.submitErr{
    display: none;
}

.logContent .table {
    width: 100%;
    height: 45%;
    border: 0.2rem solid #f9f5f2;
    box-sizing: border-box;
    border-radius: 0.5rem;
    overflow: hidden;
}

.logContent .table .top, .logContent .table .left{
    background: #f9f5f2;
    padding: 0.25rem 2rem;
    display: flex;
    font-weight: 600;
}

.logContent .table .top text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.logContent .table .top .span1 {
    flex: 1.3;
}

.logContent .table .top .span2,
.logContent .table .top .span3 {
    flex: 1;
}

.logContent .table .top .span4 {
    flex: 2.5;
}

.logContent .table .left .item{
    margin-top: 1rem;
    flex: 1;
}
.logContent .table .left .item:last-child{
    flex: 1.12;
}

.logContent .table .right{
    margin-top: 2rem;
    margin-left: 2rem;
}
.logContent .table .right div{
    margin-bottom: 1rem;
    font-size: 3rem;
}

.logContent .table .right div .item {
    display: inline-block;
    width: 16rem;
    text-align: justify;
    color: red;
}

.logContent .result {
    position: absolute;
    left: 50%;
    top: calc(45% - 1rem);
    transform: translate(-50%, -50%);
    padding: 1rem 2rem;
    border-radius: 1rem;
    box-sizing: border-box;
    background: #f0f7f7;
    font-weight: 600;
}

.logContent .result .resultText {
    color: red;
}

.logContent .chart {
    width: 100%;
    height: 50%;
    margin-top: 5%;
}

.logContent .chartLeft {
    width: 45%;
    height: 100%;
    float: left;
    margin-left: 2.5%;
}

.logContent .chartRight {
    width: 45%;
    height: 100%;
    float: right;
    margin-right: 2.5%;
}

/* 训练记录 */
.cover6 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
}

.cover6 .tainingLogs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    aspect-ratio: 1.53;
    background: url('../icon/tainingLogs.png') no-repeat;
    background-size: cover;
    background-position: center;
}

.tainingLogs div {
    width: 90%;
    height: 75%;
    box-sizing: border-box;
    position: absolute;
    top: 10%;
    left: 5%;
    overflow-y: auto;
}

.tainingLogs>div>p {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    font-size: 1.5rem;
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    cursor: pointer;
}

.tainingLogs>div>p>span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tainingLogs>div>p>span.span1,
.tainingLogs>div>p>span.span2,
.tainingLogs>div>p>span.span3 {
    flex: 1;
}

.tainingLogs>div>p>span.span4 {
    flex: 2;
}

.tainingLogs>div>p>span.span5 {
    flex: 3;
}

.tainingLogs>p {
    position: absolute;
    top: 88.5%;
    left: 45%;
    width: 12%;
    height: 6%;
    background: #6C54D3;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

audio {
    display: none;
}

.bi{
    width: 1mm;
    position: absolute;
    bottom: 100%;
}

@media screen and (max-width: 1700px) {
    .content .home {
        width: 70%;
        aspect-ratio: 2;
    }

    .cover>div {
        width: 35%;
    }
}

@media screen and (max-width: 1500px) {
    .content .home {
        width: 80%;
        aspect-ratio: 2;
    }

    .cover>div {
        width: 40%;
    }
}

@media screen and (max-width: 1300px) {
    .content .home {
        width: 80%;
        aspect-ratio: 2;
    }

    .cover>div {
        width: 45%;
    }
}