/* 初始化样式 */
body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
select {
  margin: 0;
  padding: 0
}

em {
  font-style: normal
}

li {
  list-style: none
}

img {
  border: 0;
  vertical-align: middle
}

small {
  font-size: 12px;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  white-space: nowrap;
  color: #ffffff;
}

a,
a:visited {
  color: #ffffff;
}

a:hover {
  color: #ffffff;
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font-size: 100%;
  background-color: transparent;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img[src=''],
img:not([src]) {
  display: none;
  opacity: 0;
}

img[src='undefined'] {
  display: none;
  opacity: 0;
}

body {
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 首页样式开始 */
.home {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('../img/homebg.png');
  background-position: center;
  background-size: cover;
}


.homecontent {
  width: 90%;
  height: 11rem;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.hometitle {
  width: 100%;
  font-size: 0.56rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}

.hometitle1 {
  margin-top: 0.5rem;
}

.homebtn {
  border-width: 0;
  width: 3.4rem;
  height: 0.66rem;
  background-image: url('../img/homebtn.png');
  background-position: center;
  background-size: cover;
  border: none;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  font-size: 0.2rem;
  position: absolute;
  left: calc(50% - 1.7rem);
  bottom: 5%;
  animation: homebtnanimate 2s infinite;
}

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

  50% {
    transform: scale(1.2);
  }

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

/* 首页样式结束 */

/* 答题页面样式开始 */
.subject {
  width: 100%;
  height: 100%;
  display: none;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.subject1 {
  background-image: url('../img/subjectbg1.jpg');
}

.subject2 {
  background-image: url('../img/subjectbg2.jpg');
}

.subject3 {
  background-image: url('../img/subjectbg3.jpg');
}

.subject4 {
  background-image: url('../img/subjectbg4.jpg');
}

.subject5 {
  background-image: url('../img/subjectbg5.jpg');
}

.subject6 {
  background-image: url('../img/subjectbg6.jpg');
}

.subject7 {
  background-image: url('../img/subjectbg7.jpg');
}

.subject8 {
  background-image: url('../img/subjectbg8.jpg');
}

.subject9 {
  background-image: url('../img/subjectbg9.jpg');
}

.subject10 {
  background-image: url('../img/subjectbg10.jpg');
}

.subject11 {
  background-image: url('../img/subjectbg11.jpg');
}

.subject12 {
  background-image: url('../img/subjectbg12.jpg');
}

.subject13 {
  background-image: url('../img/subjectbg13.jpg');
}

.subject14 {
  background-image: url('../img/subjectbg14.jpg');
}

.subject15 {
  background-image: url('../img/subjectbg15.jpg');
}

.subject16 {
  background-image: url('../img/subjectbg16.jpg');
}

.subject17 {
  background-image: url('../img/subjectbg17.jpg');
}

.subject18 {
  background-image: url('../img/subjectbg18.jpg');
}

.subject19 {
  background-image: url('../img/subjectbg19.jpg');
}

.subject20 {
  background-image: url('../img/subjectbg20.jpg');
}


.subjectcontent {
  width: 90%;
  height: 10rem;
  position: absolute;
  top: 40%;
  left: 5%;
  transform: translate(0%, -50%);
  overflow: hidden;
}

.progressbar {
  margin: 0.55rem 0;
  width: 100%;
  height: 0.37rem;
}

.progressbarcenter {
  width: 94%;
  margin: 0 3%;
  height: 100%;
  background-color: #fffae7;
  border-radius: 30px;
  font-size: 0.26rem;
  text-align: right;
  padding-right: 0.2rem;
  position: relative;
  overflow: hidden;
}

.progressbarcenter span {
  position: absolute;
  top: 0;
  right: 0.3rem;
}

.progressbarcenters {
  height: 100%;
  border-radius: 30px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffeda4;
}

.progressbarcenters1 {
  width: 5%;
}

.progressbarcenters2 {
  width: 10%;
}

.progressbarcenters3 {
  width: 15%;
}

.progressbarcenters4 {
  width: 20%;
}

.progressbarcenters5 {
  width: 25%;
}

.progressbarcenters6 {
  width: 30%;
}

.progressbarcenters7 {
  width: 35%;
}

.progressbarcenters8 {
  width: 40%;
}

.progressbarcenters9 {
  width: 45%;
}

.progressbarcenters10 {
  width: 50%;
}

.progressbarcenters11 {
  width: 55%;
}

.progressbarcenters12 {
  width: 60%;
}

.progressbarcenters13 {
  width: 65%;
}

.progressbarcenters14 {
  width: 70%;
}

.progressbarcenters15 {
  width: 75%;
}

.progressbarcenters16 {
  width: 80%;
}

.progressbarcenters17 {
  width: 85%;
}

.progressbarcenters18 {
  width: 90%;
}

.progressbarcenters19 {
  width: 95%;
}

.progressbarcenters20 {
  width: 100%;
}

.subjecttitle {
  width: 100%;
  font-size: 0.44rem;
  font-weight: 900;
  text-align: left;
  line-height: 0.7rem;
  margin-bottom: 0.7rem;
}

.answer {
  margin-bottom: 0.3rem;
  font-size: 0.38rem;
  font-weight: 300;
  text-align: left;
  line-height: 0.7rem;
}
 
/* 答题页面样式结束 */

.resultpage {
  display: none;
  width: 100%;
  max-height: 100vh;
  background-image: url('../img/resultpagebg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
}

.mapdiv {
  width: 100%;
  height: 3.2rem;
  margin-top: 0.1rem;
}

#myChart2 {
  width: 100%;
  height: 3.2rem;
}

.toptitle,
.content {
  width: 100%;
  font-size: 0.1rem;
}

.toptitle {
  text-align: center;
}

.topresult {
  font-size: 0.6rem;
  font-weight: 900;
  padding-top: 0.6rem;
  text-indent: 0.5rem;
  letter-spacing: 0.2rem;
}

.topname {
  margin-top: 0.4rem;
  font-size: 0.36rem;
  font-weight: 900;
  text-indent: 0.2rem;
  letter-spacing: 0.1rem;
}

.content {
  padding: 0 8%;
  width: 84%;
  margin-top: 0.2rem;
}

.content1 {
  font-size: 0.4rem;
  font-weight: 900;
  margin: 0.4rem 0 0;
}

.bottomlogo {
  padding: 0.3rem 0 0.8rem;
}

.logo {
  width: 100%;
  height: 0.37rem;
  background-image: url('../img/logo-2.png');
  background-position: center;
  background-size: 3.17rem 0.37rem;
  background-repeat: no-repeat;
}

.divcontent {
  font-size: 0.3rem;
  color: rgba(0, 0, 0, 0.5);
  margin: 0.2rem 0;
  font-weight: 400;
  line-height: 1.5;
}

.divtitle {
  font-size: 0.34rem;
  color: rgba(0, 0, 0, 0.8);
  margin: 0.2rem 0;
  font-weight: 900;
}

.share {
  width: 100%;
  height: 0.6rem;
  background-image: url('../img/share.png');
  background-position: right;
  background-size: 1.03rem 0.6rem;
  background-repeat: no-repeat;
  position: fixed;
  top: 1rem;
  right: -0.3rem;
}

#wrap3 {
  width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}

.wrap3img {
  width: 80%;
  margin: 5% 10%;
}

.recommendation{
  display: none;
}
.rdiv{
  display: none;
}
.morebtndiv{
  width: 100%;
  height: 0.5rem;
  margin: 0.3rem 0 0.4rem;
}
.morebtn{
  width: 50%;
  height: 0.66rem;
  /* border: 1px solid red; */
  margin: 0 auto;
  background-image: url('../img/more.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 提前加载图片 */
.imgmore{
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  position: fixed;
  top: -100rem;
  height: -100rem;
  opacity: 0;
}
.imgmore1{background-image: url("../img/subjectbg1.jpg");}
.imgmore2{background-image: url("../img/subjectbg2.jpg");}
.imgmore3{background-image: url("../img/subjectbg3.jpg");}
.imgmore4{background-image: url("../img/subjectbg4.jpg");}
.imgmore5{background-image: url("../img/subjectbg5.jpg");}
.imgmore6{background-image: url("../img/subjectbg6.jpg");}
.imgmore7{background-image: url("../img/subjectbg7.jpg");}
.imgmore8{background-image: url("../img/subjectbg8.jpg");}
.imgmore9{background-image: url("../img/subjectbg9.jpg");}
.imgmore10{background-image: url("../img/subjectbg10.jpg");}
.imgmore11{background-image: url("../img/subjectbg11.jpg");}
.imgmore12{background-image: url("../img/subjectbg12.jpg");}
.imgmore13{background-image: url("../img/subjectbg13.jpg");}
.imgmore14{background-image: url("../img/subjectbg14.jpg");}
.imgmore15{background-image: url("../img/subjectbg15.jpg");}
.imgmore16{background-image: url("../img/subjectbg16.jpg");}
.imgmore17{background-image: url("../img/subjectbg17.jpg");}
.imgmore18{background-image: url("../img/subjectbg18.jpg");}
.imgmore19{background-image: url("../img/subjectbg19.jpg");}
.imgmore20{background-image: url("../img/subjectbg20.jpg");}