* {padding: 0;margin: 0;letter-spacing: 1px;font-family: Helvetica Neue LT, Helvetica Neue, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;line-height: 1;
}

a {text-decoration: none;
}

html,
body {background: #f5f5f5;color: #333;
}

#app {max-width: 600px;margin: 0 auto;background: #fff;
}

img {vertical-align: top;
}

ul,
li,
p {font-style: normal;font-weight: 400;list-style: none;
}

.header {height: 55px;background: #ed1f50;font-size: 20px;color: #fff;display: flex;align-items: center;justify-content: center;position: sticky;width: 100%;top: 0;letter-spacing: 2px;
}

.img-06 {width: 100%;
}

.footer {height: 55px;background: #ed1f50;font-size: 20px;color: #fff;display: flex;align-items: center;justify-content: center;position: fixed;width: 100%;bottom: 0;letter-spacing: 2px;padding-bottom: env(safe-area-inset-bottom);
}

.footer-padding {height: 55px;padding-bottom: env(safe-area-inset-bottom);
}

.sm-div {padding: 30px 15px 30px;
}

.sm-title {font-weight: 550;color: #ed1f50;font-size: 20px;
}

.sm-p {font-size: 16px;line-height: 1.5;padding-top: 20px;
}

.sm-p2 {padding-top: 20px;
}

.num-div {padding: 20px 15px;background: #fff;
}

.num-span1 {font-size: 20px;color: #ed1f50;
}

.num-span2 {color: #999;font-size: 16px;position: relative;left: -4px;
}

.num-length {width: 100%;background: #f5f5f5;height: 10px;border-radius: 10px;margin-top: 15px;
}

.num-length2 {border-radius: 10px;background: #ed1f50;width: 0%;height: 100%;
}

.topic {margin: 20px 15px;background: #fff;border-radius: 10px;padding: 20px 15px;
}

.topic-title {font-weight: bold;font-size: 22px;
}

.topic-title2 {font-weight: bold;font-size: 18px;padding-top: 20px;padding-bottom: 10px;
}

.topic-li {border-bottom: 1px solid #eaeaea;display: flex;align-items: center;padding: 18px 0;
}

.topic-li:last-child {border-bottom: 0;
}

.topic-circle {width: 22px;height: 22px;border-radius: 50%;box-sizing: border-box;border: 1px solid #999;display: flex;align-items: center;justify-content: center;
}

.topic-li .topic-circle-red{
    width: 12px;height: 12px;border-radius: 50%;background: transparent;

}
.topic-li-active .topic-circle-red{
    background: #ed1f50;
}

.topic-li-active .topic-circle {border: 1px solid #ed1f50 !important;
}


.topic-txt {font-size: 20px;padding-left: 10px;
}

.but {display: flex;align-items: center;margin-top: 20px;
}

.but>div {flex: 1;box-sizing: border-box;display: flex;align-items: center;justify-content: center;height: 46px;border: 1px solid #ed1f50;border-radius: 46px;font-size: 20px;color: #ed1f50;
}

#previous-question {margin-right: 15px;
}

#view-results {margin-left: 15px;
}

.but>.but2 {background: #ed1f50;color: #fff;
}

.report-div {background-image: url(/static/qgcs/aq1/img/img_07.jpg);background-size: 100% 100%;background-repeat: no-repeat;height: 100vh;overflow-y: auto;padding: 0 15px;color: #000;
}

.report-title {font-size: 16px;padding-top: 40px;
}

.report-result {padding: 18px 20px 22px;border-radius: 14px;background: #fff;margin-top: 15px;
}

.result-fraction {font-size: 20px;font-weight: bold;
}

.result-fraction-n {font-size: 36px;
}

.result-txt {font-size: 20px;font-weight: bold;padding-top: 15px;
}

.report-add-txt {font-size: 20px;text-align: center;margin-top: 100px;
}

.benefit {padding: 15px 0;text-align: center;background: #ffe8ee;border-radius: 12px;margin-top: 30px;font-size: 18px;color: #ff003e;
}

.benefit>div {line-height: 2;
}

.report-add-but {box-sizing: border-box;display: flex;align-items: center;justify-content: center;height: 54px;border-radius: 54px;font-size: 20px;color: #fff;background: #ed1f50;width: 80%;margin: 30px auto;animation: scale .8s infinite;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

#answerQuestions,
#report,
#previous-question,
#next-question,
#view-results {
    display: none;
}