html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


/* 定义全局变量 */
:root {
    --margin-left: 21px;
    --font-pingfang: "PingFang SC"
}


/* 跟标签 */
#root {
    background: linear-gradient(175deg,#89a5f7 3.72%,#fff 61.16%);
    width: 100%;
    height: 100%;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* 容器 */
.content {
    display: none;
    width: 93%;
    height: 100%;
}


/* 客服 */
.service {
    height: 72px;
    padding-right: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end
}
.sv-content {
    display: flex;
    flex-direction: column;
    align-items: center
}
.sv-content img {
    width: 32px;
    height: 32px
}
.sv-content div {
    margin-top: 5px;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}


/* 主体 */
.main {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #fff;
    overflow: hidden
}


/* logo */
.logo {
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;
    margin-top: -30px;
    margin-left: 20px;
    border-radius: 20px
}


/* 标题和五星 */
.title {
    margin-left: 123px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}
.title .title-text {
    font-family: var(--font-pingfang);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #2d2e30
}
.title .star {
    display: flex;
    flex-direction: row;
    align-items: center
}
.star img {
    width: 114px;
    height: 18px
}
.star div {
    color: #2d2e30;
    font-family: var(--font-pingfang);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    width: 20px;
    height: 18px;
    margin-left: 8px
}


/* 下载按钮 */
.download {
    max-width: 100%;
    height: auto;
    padding: 17px var(--margin-left) 15px var(--margin-left);
    display: flex;
    flex-direction: row;
    align-items: center
}
/* 第一个按钮 */
.download button:nth-of-type(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    background-color: #668AEF;
    height: 38px;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    border: none;
    border-radius: 19px;
}
/* 第二个按钮 */
.download button:nth-of-type(2) {
    margin-left: 12px;
    width: 30%;
    height: 38px;
    color: #668aef;
    background-color: #fff;
    border: 2px solid #668AEF;
    border-radius: 19px;
    font-size: 16px;
}


/* 提示文案 */
.tip-text {
    display: none;
    padding: 0 var(--margin-left);
    color: red;
    font-family: var(--font-pingfang);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.7px;
    margin-bottom: 10px;
}


/* 评分和下载次数 */
.score {
    padding: 0 var(--margin-left);
    display: flex;
    flex-direction: row;
    justify-content: space-between
}
.average {
    min-width: 33.3%;
    min-height: 37px;
    display: flex;
    flex-direction: row;
    align-items: center
}
.average img {
    width: 36px;
    height: 36px;
}
.average .text{
    display: flex;
    flex-direction: column;
    margin-left: 10px
}
.average .text div:nth-of-type(1) {
    width: 100%;
    height: 23px;
    color: #141414;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}
.average .text div:nth-of-type(2) {
    color: #8b71b8;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}
@media screen and (max-width: 375px) {
    .average .text div:nth-of-type(1) {
        font-size:16px
    }
    .average .text div:nth-of-type(2) {
        font-size: 10px
    }
}


/* 授权 */
.authorize {
    padding: 21px var(--margin-left) 0 var(--margin-left)
}
.authorize-text {
    color: #303030;
    font-family: var(--font-pingfang);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: .705px
}
.authorize-tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 21px
}
.authorize-tag div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    height: 32px;
    border-radius: 16px;
    background: #e4e9f9;
    color: #668AEF;
    font-family: var(--font-pingfang);
    font-size: 14px;
}


/* 评价 */
.evaluate {
    margin-top: 21px;
    padding: 0 var(--margin-left) 0 var(--margin-left)
}
.evaluate-title  {
    font-family: var(--font-pingfang);
    color: #2d2e30;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

/* 五星 */
.fiveStar {
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    align-items: center;
    gap: 21px
}
.num {
    width: 46px;
    height: 46px;
    color: #2d2e30;
    font-family: var(--font-pingfang);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}
.fiveStar .star-fraction img {
    width: 114px;
    height: 18px
}
.fiveStar .star-fraction div {
    margin-top: 0;
    color: #8b71b8;
    font-family: var(--font-pingfang);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

/* 梯形星 */
.trapezoid {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    align-items: flex-start
}
/* 五个容器 */
.container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 2px
}
/* 存放星 */
.starLevel {
    width: 39px;
    height: 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1px
}
.starLevel img {
    width: 7px;
    height: 7px
}

/* 存放进度条 */
.progressBar {
    margin-left: 14px;
    flex-grow: 1;
    height: 2px;
    width: auto;
    border-radius: 1px;
    background: #e4e4e6
}


/* 评论内容盒子 */
.evaluate-content {
    margin-top: 16px;
    max-width: 100%;
    padding: 24px 15px;
    border-radius: 16px;
    background: #f8f8f8
}
/* 用户头像和标题 */
.user {
    display: flex;
    flex-direction: row;
    align-items: center
}
.user img {
    width: 36px;
    height: 36px
}
.user-title {
    margin-left: 6px
}
.user-title div:nth-of-type(1) {
    color: #000;
    font-family: var(--font-pingfang);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}
.user-title div:nth-of-type(2) {
    color: #668AEF;
    font-family: var(--font-pingfang);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}
/* 评论文本 */
.evaluate-txt {
    margin-top: 18px;
    color: #303030;
    font-family: var(--font-pingfang);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: .705px
}
/* 评论星和日期 */
.date {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.date img {
    width: 114px;
    height: 18px
}
.date div {
    color: #668AEF;
    font-family: var(--font-pingfang);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

/* 信息 */
.info {
    margin-top: 21px;
    padding: 0 var(--margin-left) 0 var(--margin-left)
}
.info .info-titlle {
    font-family: var(--font-pingfang);
    color: #2d2e30;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 16px;
}
.item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px 0;
    font-family: var(--font-pingfang);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px
}
.item div:nth-of-type(1){
    min-width: 106px;
    height: 18px;
    color: #668AEF
}
.item div:nth-of-type(2){
    color: #303030;
    flex-grow: 1
}


/* 底部 */
.footer{
    padding: 20px;
    margin-bottom: 60px;
    font-size: 14px
}