html {
  background-color: #fff;
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: initial;
  font-family: Microsoft YaHei;
  font-weight: 400;
  width: 100%;
  /* todo 移动端宽度显示适配 */
  /* min-width: 1200px; */
  background: #e7eefe;
  color: #333333;
  font-size: 1em;
  line-height: 1.5;
}

body::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

blockquote,
body,
dd,
dl,
dt,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
iframe,
legend,
li,
ol,
p,
pre,
textarea,
ul {
  margin: 0;
  padding: 0;
}

dl {
  list-style: none;
}

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

/* 隐藏ios默认input search图标 */
input[type="search"] {
  -webkit-appearance: none;
}
[type="search"]::-webkit-search-decoration {
  display: none;
}
input::-webkit-search-cancel-button {
  display: none;
}

.main {
  overflow: hidden;
}

.center {
  width: 1200px;
  margin: 0 auto;
}

.mt85 {
  margin-top: 124px;
}

#min-height-container {
  min-height: calc(100vh - 352px);
  width: 100vw;
}

.top-nav1 {
  height: 44px;
  background: #e7eefe;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.top-nav-main {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 44px;
  overflow: hidden;
}

.top-nav-btn svg {
  width: 30px;
  height: 30px;
  cursor: pointer;
  user-select: none;
}

.top-nav-column {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  /* flex: 1; */
  height: 28px;
  overflow: hidden;
}

.top-nav2 .nav-btn1 {
  display: none;
}

.top-nav1 .nav-btn2 {
  display: none;
}

.top-nav2 .top-nav-btn {
  margin-top: 210px;
  margin-right: 10px;
}

.nav-btn1-st0 {
  fill: #8a8a8a;
}
.nav-btn2-st0 {
  fill: #54b182;
}
.nav-btn2-st1 {
  display: none;
  fill: #8a8a8a;
}

.column-item {
  height: 28px;
  background: white;
  border-radius: 14px;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0 10px;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  float: left;
}

.column-item:hover {
  background: #54b182;
}

.column-item .column-item-icon {
  display: none;
}

.column-item .column-item-title {
  font-size: 14px;
  color: #333333;
}

.column-item:hover .column-item-title {
  color: white;
}

.top-nav2 {
  height: 250px;
  background: #e7eefe;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.top-nav2 .top-nav-main {
  height: 250px;
}

.top-nav2 .column-item {
  display: none;
}
.top-nav1 .column-item-full {
  display: none;
}
.top-nav2 .top-nav-column {
  height: 210px;
}

.top-nav2 .column-item-full {
  display: flex;
  width: 170px;
  height: 100px;
  background: #73bd7a;
  box-shadow: 0px 2px 0px 0px #e7eefe;
  border-radius: 6px;
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top-nav2 .column-item-full:hover{
  opacity: 0.8;
}

.column-item-full .column-item-icon img {
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
}

.column-item-full .column-item-title {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
}

.top {
  height: 80px;
  border-bottom: 1px solid #cccccc;
  /* background: rgba(51, 51, 51, 1); */
  background: #f4f7ff;
  /* overflow: hidden; */
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  position: absolute;
  top: 44px;
  justify-content: center;
  z-index: 9;
}

.top .top-center {
  height: 100%;
}

.top .top-center .logo {
  /* margin-top: 15px; */
  float: left;
}

.top .top-center .logo img {
  height: 60px;
}

.top .top-center .text {
  float: left;
  height: 36px;
  margin-top: 27px;
  margin-left: 12px;
  text-indent: 12px;
  border-left: 1px solid #dddddd;
  color: #cccccc;
  font-size: 12px;
  line-height: 20px;
}

.top .top-center .text span {
  font-size: 16px;
  color: #00a5e3;
  font-style: italic;
  font-weight: bold;
}

.top-left {
  display: flex;
  align-items: center;
  justify-content: left;
  /* height: 100%; */
  position: absolute;
}

.top-menu {
  margin: 0 30px;
  position: relative;
  user-select: none;
  cursor: pointer;
}
.top-menu-title {
  height: 75px;
  line-height: 75px;
}

@media (hover: hover) {
  .top-menu:hover .top-menu-title {
    color: #54b282;
  }
  .top-menu:hover .top-menu-title path {
    stroke: #54b282;
  }
}

.top-menu-ul {
  position: absolute;
  /* display: flex; */
  flex-direction: column;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  width: 240px;
  /* overflow: hidden; */
  box-sizing: border-box;
  flex-direction: column;
  padding: 5px;
  text-align: center;
  display: none;
  border-radius: 5px;
  /* border-top: 2px solid #54b282; */
  box-shadow: 0px -2px 0px 0px #53b383;
}

.top-menu:hover .top-menu-ul {
  display: block;
}

.top-menu-li {
  list-style: none;
  margin: 5px 0;
}
.top-menu a {
  text-decoration: none;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 20px;
}

.top-menu-img {
  width: 32px;
  height: 32px;
  margin: 10px;
  margin-left: 20px;
}
.top-menu-a {
  text-decoration: none;
  color: #333333;
}

.angle {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top-width: 0;
  border-bottom-color: #54b182;
  /* border-width: 20px; */
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 22px solid #54b182;
}
.angle::after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  content: "";
  border-width: 20px;
  top: 4px;
  margin-left: -15px;
  border-top-width: 0;
  border-bottom-color: #fff;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 22px solid #fff;
}

.top .top-center .nav {
  /* overflow: hidden; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.top .top-center .nav ul {
  display: flex;
}

.top .top-center .nav ul li {
  float: left;
  /* line-height: 85px; */
  margin-left: 20px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top .top-center .nav ul li a {
  font-size: 15px;
  color: #cccccc;
  text-decoration: none;
}

.top .top-center .nav ul li svg {
  width: 36px;
  height: 36px;
}
.top .top-center .nav .nav-search {
  margin-left: 20px;
  position: relative;
}

#mobile-menu-ul {
  width: 140px;
  right: 5px;
  left: auto;
  transform: none;
  z-index: 15;
}

#mobile-menu-img {
  pointer-events: none;
}

#mobile-menu-ul .angle {
  left: auto;
  right: 10px;
  transform: none;
}

.nav-user {
  user-select: none;
  cursor: pointer;
  position: relative;
}

.top-center .nav .nav-user .top-menu-ul {
  display: none;
  width: 160px;
}

.nav-user .top-menu-ul a {
  text-decoration: none;
  color: #333333;
  display: block;
  margin: 10px;
}

@media (hover: hover) {
  .nav-user:hover .top-menu-ul {
    display: flex !important;
  }
}

.nav-user svg {
  width: 44px;
  height: 44px;
  margin: 10px;
}

.nav-user-img {
  width: 44px;
  height: 44px;
  margin: 10px;
  border-radius: 50%;
  overflow: hidden;
}

.user-menu {
  position: relative;
}

.user-menu-select {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  background: turquoise;
}
.user-menu-select a {
  display: inline-block;
  padding: 5px;
  text-align: center;
  width: max-content;
}
@media (hover: hover) {
  .user-menu:hover .user-menu-select {
    display: block;
  }
}

.top_search_input {
  position: relative;
}

.top_search_input input {
  line-height: 44px;
  padding: 0 0 0 5px;
  width: 300px;
  height: 44px;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 40px;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.top_search_input span {
  position: absolute;
  right: 3px;
  top: 2px;
  cursor: pointer;
}

.menu-search {
  margin: 20px 10px;
}
.menu_search_input {
  position: relative;
}

.menu_search_input input {
  line-height: 34px;
  padding: 0 0 0 5px;
  width: 200px;
  height: 34px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #ecf0fa;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 40px;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.menu_search_input span {
  position: absolute;
  right: 2px;
  top: -2px;
  cursor: pointer;
}
.menu_search_input .search-icon {
  width: 30px;
}

.top_search_input {
  position: relative;
  display: inline-block;
  /* height: 788px; */
}
.search-top-container {
  background: #f4f7ff;
}
.search-top {
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.mobile-top {
  display: none;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}

.mobile-header .header {
  min-width: 330px;
  position: relative;
  width: 100%;
  height: 50px;
  /* border-bottom: 1px solid #000; */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
}

.mobile-header .header_left {
  /* float: left; */
  /* width: 40px; */
  padding-left: 15px;
  cursor: pointer;
}

.nav_ico {
  flex: 0 0 auto;
  cursor: pointer;
  order: 1;
  align-self: flex-start;
  min-width: 2em;
  min-height: 2em;
  pointer-events: none;
}

.nav_ico div {
  width: 28px;
  height: 4px;
  margin: 6px 0;
  background-color: #9d9d9d;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}

.bar1,
.bar2,
.bar3 {
  transition: 0.6s;
}

.change .bar1 {
  transform: rotate(-45deg) translate(-11px, 5px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: rotate(45deg) translate(-9px, -3px);
}

.mobile-header .logo-a {
  height: 50px;
  display: flex;
  align-items: center;
  /* margin-right: -50px; */
}

.mobile-header .nav-user svg {
  width: 40px;
  height: 40px;
}

.nav-user-img {
  width: 40px;
  height: 40px;
}

/* 
@media only screen and (max-width: 500px) {
  .mobile-header .logo-a {
    position: absolute;
    left: 60px;
  }
} */

.mobile-header .logo-a img {
  height: 80%;
  user-select: none;
}

.mobile-header .header_right {
  /* float: right; */
  /* width: 40px; */
  /* padding-right: 10px; */
  cursor: pointer;
  display: flex;
}

.search-page-input {
  width: 100%;
  height: 70px;
  background: white;
  position: relative;
}

.search-page-input input {
  line-height: 70px;
  padding: 0 0 0 5px;
  width: 100%;
  height: 100%;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 60px;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  font-size: 27px;
  color: #333333;
}

.search-page-input span {
  position: absolute;
  right: 15px;
  top: 10px;
  cursor: pointer;
}

.search-page-num {
  font-weight: 400;
  font-size: 20px;
  color: #898989;
  margin: 10px 0;
}
.search-list-a {
  text-decoration: none;
  color: #333333;
}
.search-list-per {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid gray;
  border-radius: 20px;
  margin: 20px;
  overflow: hidden;
  background: white;
}

.mobile-search-list {
  display: none;
}

.user-right-list .mobile-search-list {
  margin-top: 45px;
}

.search-list .quiz-per-img {
  width: 30%;
  /* height: 200px; */
  /* width: auto;
  height: auto; */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-list .quiz-per-content {
  flex: 1;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.search-list .quiz-per-title {
  font-size: 20px;
  font-weight: 700;
  margin: 10px;
}
.search-list .quiz-per-img img {
  width: 100%;
  height: 100%;
}

.search-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.search-pagination svg {
  display: none;
}

/* 分页 */
#quizPagination {
  clear: both;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  margin: 0 auto 20px;
}
#quizPagination ul {
  list-style: none;
  /* padding: 3px 5px 2px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .31);
  background: #fff; */
}
#quizPagination ul a {
  text-decoration: none;
  color: #333333;
}
#quizPagination ul li {
  display: inline-block;
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 6px;
  line-height: 44px;
  background-color: #fff;
  color: #333333;
}

@media (hover: hover) {
  #quizPagination ul li:hover {
    background: #e7eefe;
    color: #898989;
  }
}

#quizPagination ul li.pagination-li-active {
  color: #fff;
  background-color: #54b282;
}
#quizPagination ul li.pagination-li-split {
  background-color: transparent;
}
/* #quizPagination ul li.pagination-li-first {
  background: #ffffff;
  color: #3d2e81;
}
#quizPagination ul li.pagination-li-first a {
  color: #3d2e81;
} */

.bottom {
  background-color: white;
  text-align: left;
  color: #b5b5b5;
  overflow: hidden;
  user-select: none;
}

.bottom .bottom-center .bottom-middle {
  height: 193px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom .bottom-center .bottom-middle > div {
  /* float: left; */
}

.bottom .bottom-center .bottom-middle h2 {
  font-size: 16px;
  font-weight: normal;
  line-height: 60px;
}

.bottom .bottom-center .bottom-middle h3 {
  font-size: 25px;
  color: #63a7e2;
  font-weight: normal;
}

.bottom-middle .bottom-svg .share-a {
  font-size: 0;
  /* overflow: hidden; */
  width: 35px;
  height: 35px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  background: #adadad;
  position: relative;
  cursor: pointer;
}

.mobile-menu-share .bottom-svg .share-a {
  margin: 0;
  scale: 0.8;
}

.mobile-page-btn {
  position: absolute;
  left: 10px;
  bottom: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
}

.mobile-page-btn-a {
  display: inline-block;
  text-decoration: none;
  width: 95px;
  height: 34px;
  background: #9ca2a9;
  border-radius: 6px;
  font-weight: 400;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-share .copy-text {
  position: absolute;
  bottom: -23px;
  left: 50%;
  transform: translate(-50%);
  font-size: 12px;
  color: #fff;
  padding: 1px 5px;
  display: none;
  background: #adadad;
  border-radius: 3px;
  width: max-content;
  pointer-events: none;
}

.bottom .copy-text {
  position: absolute;
  bottom: -23px;
  left: 50%;
  transform: translate(-50%);
  font-size: 12px;
  color: #fff;
  padding: 1px 5px;
  display: none;
  background: #adadad;
  border-radius: 3px;
  width: max-content;
  pointer-events: none;
}

.share-svg {
  width: 35px;
  height: 35px;
  /* border-radius: 50%; */
  margin-right: 0px;
  /* color: #fff; */
  /* fill: #fff; */
  user-select: none;
  cursor: pointer;
  /* background: #adadad; */
}
.share-a svg,
.share-a svg path,
.share-a svg g,
.share-a svg title {
  pointer-events: none;
  user-select: none;
}

.share-svg1,
.share-svg4,
.share-svg5 {
  margin: 8px;
  height: 20px;
  width: 18px;
  fill: #fff;
}

.share-svg2,
.share-svg3 {
  background: #fff;
  fill: #adadad;
}

@media (hover: hover) {
  .bottom-middle .bottom-svg .share-a:hover {
    background: #666666;
  }
  .share-a:hover .share-svg2,
  .share-a:hover .share-svg3 {
    fill: #666666;
  }
}

.result-share .bottom-svg {
  display: grid;
  /* width: 80%; */
  padding: 0 10px;
  margin: 0 auto;
  /* display: flex
  ; */
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 10px;
}

.result-share .bottom-svg .share-a {
  width: 70px;
  height: 70px;
  display: inline-block;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

.result-share .copy-text {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translate(-50%);
  font-size: 12px;
  color: #fff;
  padding: 1px 5px;
  display: none;
  background: #adadad;
  border-radius: 3px;
  width: max-content;
  pointer-events: none;
}

.rusult-share-title {
  margin: 20px;
  font-size: 16px;
  color: #adadad;
}

.result-share .bottom-svg .share-svg {
  width: 70px;
  height: 70px;
}

.result-share .bottom-svg .share-svg1,
.result-share .bottom-svg .share-svg4,
.result-share .bottom-svg .share-svg5 {
  margin: 16px;
  height: 40px;
  width: 36px;
}

.bottom .bottom-center .bottom-middle .middle h2 {
  /* background: url(img/index/phone.jpg) no-repeat 0 20px; */
  text-indent: 40px;
}

.bottom .bottom-center .bottom-middle .middle p {
  text-indent: 0;
}

.bottom .bottom-center .bottom-middle p {
  line-height: 40px;
  font-size: 12px;
  text-indent: 30px;
}

.bottom .bottom-center .bottom-middle .left {
  width: 30%;
  /* margin-top: 36px; */
  /* margin-right: 103px; */
}

.bottom .bottom-center .bottom-middle .middle {
  /* margin-top: 30px; */
  /* margin-right: 120px; */
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom .bottom-center .bottom-middle .left img {
  /* margin-left: 34px; */
}

.bottom .bottom-center .bottom-middle .right {
  /* margin-top: 42px; */
  width: 30%;
}
.bottom .bottom-bottom-container {
  height: 80px;
  background: #333333;
}
.bottom .bottom-bottom {
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  height: 100%;
  color: white;
  border-top: 1px solid #838383;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom-list-ul {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #333333;
}

.bottom-list-li {
  list-style: none;
  margin: 0 10px;
}

.bottom-list-li-seg {
  list-style: none;
}

.bottom-list-li a {
  text-decoration: none;
  color: white;
}

.mobile-bottom {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #333333;
  color: #ffffff;
  width: 100vw;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  font-size: 16px;
}

.mobile-bottom-text {
  color: #999999;
  margin: 20px;
}

.mobile-bottom-list-ul {
  display: ruby;
  /* height: 100%; */
  background: #333333;
}

.mobile-bottom-list-ul .bottom-list-li {
  margin-bottom: 10px;
  display: inline-block;
  /* max-height: 25px; */
}

.banner-container {
  background: rgba(228, 228, 228, 1);
}

.banner-container .banner img {
  width: 100%;
}
.carousel-bgc {
  background: rgba(228, 228, 228);
}

.carousel-container {
  width: 1200px;
  width: 100vw;
  height: 400px;
  /* padding: 10px; */
  /* border: 1px solid #ddd; */
  margin: 0 auto;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.carousel-container .screen {
  width: 1200px;
  width: 100vw;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.carousel-container .screen ul {
  font-size: 0;
  width: 400%;
  transition: all 0.35s ease-in-out;
}

.carousel-container .screen ul li {
  display: inline-block;
  width: 1200px;
  width: 100vw;

  height: 400px;
}

.carousel-container .screen ul li .banner-bg-img {
  width: 100%;
  height: 100%;
  filter: blur(9px) opacity(0.5);
  object-fit: cover;
}
.carousel-container ol {
  display: none;
}

.carousel-container .screen .banner-a {
  position: relative;
}

.banner-quiz-info {
  width: 1000px;
  height: 300px;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.banner-quiz-info .banner-quiz-title {
  font-size: 40px;
  width: max-content;
  color: #333333;
  width: 630px;
  margin: 20px 0;
  line-height: 48px;
}

@media (hover: hover) {
  .banner-quiz-info .banner-quiz-title:hover {
    color: black;
  }
}

.banner-quiz-info .banner-quiz-img {
  width: 340px;
  height: 220px;
  background: #ffffff;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 34/22;
}

.carousel-container .screen ol li {
  display: inline-block;
  margin-right: 3px;
  padding: 1px 6px;
  border: 1px solid #ddd;
  background: lightgrey;
  cursor: pointer;
}

.carousel-container .screen ol li.active {
  background: #db192a;
  color: #ddd;
}

.carousel-container .arrow {
  /* position: absolute; */
  top: 50%;
  left: 0;
  transform: translate(0, -222px);
  /* width: 100%; */
  height: 44px;
  line-height: 44px;
  /* padding: 0 15px; */
  /*display: flex;*/
  justify-content: space-between;
  display: none;
  pointer-events: none;
}

.carousel-container .arrow span {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 34px;
  color: #ffffff;
  /* padding: 0 5px 5px; */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: all;
}

.banner-quiz-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 700px;
}

.banner-quiz-category {
  font-size: 24px;
  color: #ef6a3b;
  border-left: 5px solid #ef6a3b;
  padding-left: 10px;
}
.banner-quiz-btn {
  font-weight: 400;
  font-size: 30px;
  color: #ffffff;
  width: 200px;
  height: 55px;
  background: #333333;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-quiz-right {
  position: relative;
}

.banner-right-shadow {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.shadow1 {
  background: rgba(255, 255, 255, 0.3);
  right: -10px;
  top: -10px;
}
.shadow2 {
  background: rgba(255, 255, 255, 0.2);
  right: -20px;
  top: -20px;
}
.shadow3 {
  background: rgba(255, 255, 255, 0.1);
  right: -30px;
  top: -30px;
}

.banner-li {
  position: relative;
}

.banner-bg {
  position: absolute;
}

.test_content {
  display: none;
}

.banner-mobile-title {
  display: none;
  position: absolute;
  bottom: 0px;
  left: 0;
  border-radius: 6px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  width: 100%;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 0 5px 0;
  box-sizing: border-box;
  text-align: center;
  min-height: 60px;
  color: white;
  align-items: center;
  justify-content: center;
}

.banner-mobile-btn {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: white;
  background: #54b282;
  width: 160px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-list {
  display: block;
  font-size: 60px;
  margin: 10px;
  width: 300px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid #333333;
  background: beige;
}

.mask-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 4;
  display: none;
}

.quiz-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.quiz-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  /* padding: 0 10px; */
  width: 1180px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-top: 1px solid #57d022;
}

.quiz-top .quiz-title {
  /* font-size: 30px; */
  /* font-weight: 700; */
  position: relative;
  /* border-top: 5px solid #57d022; */
}

.quiz-top .quiz-channel-ul {
  display: flex;
}

.quiz-top .quiz-channel-a {
  position: relative;
}

.quiz-top .quiz-channel-num {
  height: 18px;
  background: #ff7d7e;
  border-radius: 9px;
  color: white;
  font-size: 12px;
  position: absolute;
  top: 10px;
  right: -5px;
  min-width: 22px;
  text-align: center;
  padding: 0 5px;
}

.quiz-top .quiz-channel-ul li {
  list-style: none;
  margin-right: 10px;
  /* border-top: 2px solid #57d022; */
  padding: 5px 20px;
  font-size: 16px;
  /* border-radius: 20px; */
}
.quiz-top a {
  text-decoration: none;
  color: #333333;
}

@media (hover: hover) {
  .quiz-top a:hover {
    color: black;
  }
}

.quiz-top .quiz-more a {
  font-size: 17px;
  /* font-weight: 700; */
  display: inline-block;
  border-top: 2px solid #57d022;
  text-decoration: none;
  line-height: 33px;
  padding: 0 5px;
  /* color: #00a5e3; */
}

.quiz-top .div-space {
  width: 100%;
  position: absolute;
  background: #57d022;
  height: 18px;
}

.space-title {
  opacity: 0;
  padding: 0 10px;
  font-size: 20px;
}
.space-title2 {
  position: absolute;
  padding: 0 10px;
  top: 3px;
  font-size: 20px;
}
.quiz-index-container {
  width: 1200px;
  overflow: scroll;
}
.quiz-index-container {
}

.quiz-index-container .quiz-index .quiz-per-a {
  margin: 0 10px;
  width: 280px;
}
.quiz-index-container .quiz-per {
  margin: 0;
  padding: 0;
}
.quiz-index-container .quiz-per-img {
  width: 280px;
  position: relative;
}
.scroll-container {
  /* width: 3600px; */
}

.test-container {
  position: relative;
}

.arrow-container {
  position: relative;
  /* width: 1280px; */
  margin: 0 auto;
  display: none;
}

@media (hover: hover) {
  .test-container:hover .arrow-container {
    display: flex;
  }
}

.arrow-container .arrow {
  position: absolute;
  top: 110px;
  left: -20px;
  /* transform: translate(0, -50%); */
  width: 1240px;
  height: 44px;
  line-height: 44px;
  /* padding: 0 15px; */
  display: flex;
  justify-content: space-between;
  /* display: none; */
  z-index: 2;
  user-select: none;
  pointer-events: none;
}

.arrow-container .arrow span {
  width: 44px;
  height: 44px;
  background: rgba(155, 155, 155, 0.6);
  border-radius: 4px;
  font-size: 34px;
  color: #ffffff;
  padding: 0 5px 5px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

.quiz-index {
  /* display: grid; */
  /* grid-template-columns: 1fr 1fr 1fr; */
  display: flex;
  margin-bottom: 20px;
}

.mobile-quiz-index {
  display: none;
}
.scroll-container .quiz-index {
  float: left;
  width: 1200px;
}

.scroll-container .quiz-index :nth-child(1) {
}
.quiz-per {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px solid gray; */
  /* padding: 10px; */
  border-radius: 5px;
  margin: 0 10px;
  overflow: hidden;
  background: white;
  position: relative;
}

.quiz-per-img {
  height: 170px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.quiz-per-img img {
  transition: all 0.5s;
}

.quiz-per-take {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 120px;
  height: 34px;
  color: #5e766a;
  background: rgba(255, 255, 255, 0.6);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
}

@media (hover: hover) {
  .quiz-per-img:hover img {
    scale: 1.1;
    filter: brightness(0.7);
  }

  .quiz-per-img:hover .quiz-per-take {
    display: flex;
  }
}

.quiz-index .quiz-per-a {
  display: flex;
  width: 100%;
  /* margin: 0 10px; */
  text-decoration: none;
  color: #333333;
}

.quiz-index .quiz-per-a a {
  text-decoration: none;
  color: #333333;
}

.quiz-per img {
  /* max-width: 300px; */
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.quiz-per .quiz-per-content .quiz-category {
  position: absolute;
  top: -23px;
  color: white;
  background: #57d022;
  left: 50%;
  transform: translate(-50%, 10px);
  padding: 0 10px;
  box-sizing: border-box;
  width: max-content;
  font-size: 14px;
}

.quiz-category-gray {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 0 10px;
  box-sizing: border-box;
  width: max-content;
  font-size: 16px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  color: white;
  transform: translate(-50%, 0);
}

.quiz-per-content {
  text-align: center;
  position: relative;
}

.p-margin,
.a-margin {
  margin: 10px;
  margin-bottom: 0;
  text-align: left;
  height: 50px;
  line-height: 25px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 18px;
}

.search-highlight .p-margin,
.search-highlight .p-margin,
.search-highlight .top-quiz-title,
.search-highlight .top-quiz-description {
  display: block !important;
}
.search-highlight .top-quiz-title {
  max-height: 40px;
}
.search-highlight .top-quiz-description {
  max-height: 70px;
}
.m-title {
  display: none !important;
  align-items: center;
  justify-content: flex-start;
}

.a-space {
  display: none;
}

.quiz-per-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
  width: calc(100% - 20px);
}

.quiz-per-info div {
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 20px;
  background: #e7eefe;
  position: relative;
  font-size: 14px;
}

.index-container .info-text {
  max-width: 120px;
  overflow: hidden;
}

.quiz-author img {
  position: absolute;
  width: 30px !important;
  left: 0;
  z-index: 1;
  height: 30px !important;
  border-radius: 15px;
}

.quiz-per-info div svg {
  position: absolute;
  width: 30px;
  left: 0;
  z-index: 1;
}

.info-text {
  margin-left: 20px;
}
.list-quiz-per {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid gray;
  border-radius: 20px;
  margin: 20px;
  overflow: hidden;
}

.list-quiz-per .quiz-per-img {
  /* width: 30%; */
  /* height: 200px; */
  width: 285px;
  height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-quiz-per .quiz-per-img img {
  width: 100%;
  height: 100%;
  /* margin: 5px; */
  box-sizing: border-box;
}

.tag-detail .tag-title {
  font-size: 30px;
  /* font-weight: 700; */
  margin: 20px;
  margin-left: 0;
  padding-left: 10px;
  border-left: 5px solid #54b282;
}

.tag-detail .interest-top {
  margin-bottom: 0;
}

.tag-detail .tag-save {
  width: 110px;
  height: 40px;
  padding: 5px 10px;
  border-radius: 6px;
  user-select: none;
  cursor: pointer;
  color: white;
  background: #c9cfdd;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag-detail .quiz-per-a,
.column-container .quiz-per-a {
  max-width: 300px;
}
.tag-save svg {
  width: 30px;
  height: 30px;
  pointer-events: none;
}

.tag-save path {
  pointer-events: none;
}

.tag-save div {
  pointer-events: none;
}

@media (hover: hover) {
  .tag-save .info-text:hover {
    color: white !important;
  }
}

#fav-tag-container {
  overflow: visible;
}
#fav-tag-list {
  overflow: visible;
  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); */
}

.fav-tag-div {
  display: inline-block;
  margin: 0 auto;
}

.fav-tag-container .list-container {
  display: inline-table;
}

.fav-tag-a {
  position: relative;
  display: inline-block;
  min-width: 240px;
  height: 52px;
  background: #e7eefe;
  border-radius: 6px;
  font-size: 20px;
  color: #333333;
  line-height: 52px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.fav-tag-name {
  text-align: center;
}

.fav-tag-close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: -10px;
  right: -10px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fav-tag-svg {
  pointer-events: none;
}

.top-list {
  overflow: hidden;
}
.top-list .quiz-per-content {
  margin: 10px 0;
}
.tag-list-container {
  display: flex;
}
.top-list .list-container a {
  text-decoration: none;
  color: #333333;
}
.top-list .info-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.top-list .info-left,
.top-list .info-right {
  width: auto !important;
}

.top-list .quiz-per-info div {
  width: max-content;
  margin-right: 10px;
}
.tag-div {
  height: 40px;
  font-size: 20px;
  background: #ffffff;
  border-radius: 6px;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 10px 5px;
  box-sizing: border-box;
}

.current-tag {
  background: #54b282;
}
.current-tag a {
  color: white !important;
}

.top-list-title {
  font-weight: 400;
  font-size: 42px;
  color: #333333;
  padding-left: 10px;
  border-left: 6px solid #54b282;
  width: 1180px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.top-quiz-title {
  font-weight: 400;
  font-size: 24px;
  color: #333333;
  text-align: left;
  width: 100%;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.top-quiz-description {
  font-weight: 400;
  font-size: 16px;
  color: #9ca2a9;
  text-align: left;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.top-list .list-quiz-per {
  border: none;
  background: white;
  border-radius: 6px;
  margin: 20px 0;
  max-height: 180px;
  justify-content: space-between;
}

.top-list .quiz-per-text {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
}
.top-list .quiz-per-info {
  width: 100%;
  margin: 10px 0;
}

.top-list .mobile-search-list .quiz-per-info {
  width: 90%;
}

.top-list .mobile-search-list .quiz-per-content {
  margin: 0;
}
.top-list .quiz-per-img {
  position: relative;
}
.top-num {
  background: #78c56b;
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  color: white;
  font-size: 24px;
  text-align: center;
  padding-right: 10px;
  border-bottom-right-radius: 50px;
}

.list-container a:nth-child(1) .top-num,
.mobile-top-list a:nth-child(1) .top-num {
  background: red;
}
.list-container a:nth-child(2) .top-num,
.mobile-top-list a:nth-child(2) .top-num {
  background: #eb7400;
}
.list-container a:nth-child(3) .top-num,
.mobile-top-list a:nth-child(3) .top-num {
  background: #ebb600;
}

.mobile-user-list .interest-quiz-item {
  width: auto;
  margin: 0;
  margin-bottom: 10px;
}

.mobile-user-list .quiz-per-img,
.mobile-user-list .quiz-per img {
  height: 220px;
}

.mobile-top-list {
  display: none;
}

.top-list .mobile-top-list {
  background: none;
}

.top-list .mobile-top-list .quiz-per-info {
  width: 90%;
}

.top-list .mobile-top-list .quiz-per-content {
  margin: 0;
}
.top-list-page .mobile-top-list .quiz-author {
  display: block;
}

.mobile-bg1,
.mobile-bg2 {
  position: absolute;
  width: 100%;
  left: 0;
  min-height: 40px;
  max-height: 80px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  color: white;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  padding-left: 15px;
  box-sizing: border-box;
}

.mr10 {
  margin-right: 10px;
}
.mobile-bg1 {
  top: 0;
}

.mobile-bg2 {
  bottom: 0;
}
.mobile-bg2 .time-line-text-right {
  margin: 0;
}
.mobile-bg2 .option-div {
  position: absolute;
  right: 10px;
}
.mobile-bg2 .option-btn {
  pointer-events: none;
  transition: all 0.5s;
}

.mobile-bg2 .option-div:hover .option-btn {
  pointer-events: all;
}
.list-container {
  overflow: hidden;
  margin-top: -20px;
}
.interest-quiz-item,
.interest-quiz-item a {
  text-decoration: none;
  color: #333333;
}
.quiz-per-content a {
  text-decoration: none;
  color: #333333;
}

.interest-container {
  width: 100%;
  background: #f4f7ff;
  overflow: hidden;
}

.interest-container .interest-center .interest-quiz-item:nth-child(n + 5) {
  display: none;
}

.interest-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-bottom: 20px;
  user-select: none;
  /* cursor: pointer; */
  /* border-top: 1px solid gray; */
}

.interest-top .quiz-title {
  font-size: 20px;
  /* font-weight: 700; */
  margin-right: 20px;
  padding-left: 10px;
  border-left: 5px solid #54b282;
}

.interest-top li {
  list-style: none;
  /* margin-right: 10px; */
  /* border: 1px solid gray; */
  padding: 5px 10px;
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
  color: white;
  background: #54b282;
}

.interest-center .quiz-per {
  aspect-ratio: 1/1;
  border: none;
  border-radius: 5px;
  background: white;
  justify-content: space-between;
}

.interest-img-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.interest-center .quiz-per-img {
  height: 170px;
  position: relative;
}
.index-list-container {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}
.num-div {
  position: absolute;
  display: flex;
  bottom: 0;
  right: 0;
  font-size: 14px;
  line-height: 24px;
}
.quiz-num,
.answer-num {
  background: rgba(0, 0, 0, 0.5);
  min-width: 70px;
  padding-right: 10px;
  text-align: center;
  border-radius: 20px;
  margin: 10px;
  position: relative;
  box-sizing: border-box;
}

.num-svg {
  position: absolute;
  left: -3px;
  width: 26px;
  height: 26px;
  top: -1px;
}
.num-num {
  margin-left: 27px;
  color: white;
  text-align: left;
}

.interest-center .interest-a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
}

.interest-center .interest-img {
  filter: brightness(0.7);
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.interest-center .interest-svg {
  /* position: absolute; */
  width: 40%;
  height: auto;
  margin-bottom: 10px;
  /* top: 30%;
  left: 50%;
  transform: translate(-50%, -50%); */
  color: white;
  z-index: 1;
}

.interest-center .interest-title {
  /* position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%); */
  color: white;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
  z-index: 3;
  position: relative;
  width: min-content;
  text-decoration: none;
}

.mobile-interest-title {
  display: none;
  height: 70px;
  background: #73bd7a;
  box-shadow: 0px 2px 0px 0px #e7eefe;
  border-radius: 6px;
  margin: 8px auto;
  box-sizing: border-box;
  max-width: 590px;
}

.mobile-interest-title .interest-a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.mobile-interest-title .interest-svg {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.mobile-interest-title .interest-title {
  font-size: 28px;
  color: #ffffff;
}

.title-shadow {
  /* width: 100%; */
  background: lawngreen;
  height: 25px;
  position: absolute;
  bottom: -15px;
  z-index: -1;
  /* box-shadow: 0pxs 27px 0px 0px green; */
  width: calc(100% + 30px);
  transform: translateX(-15px);
}

.interest-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  min-height: 700px;
  box-sizing: border-box;
  padding: 40px;
  background: #f4f7ff;
  z-index: 5;
  display: none;
  border-radius: 6px;
}

.modal-content-login,
.modal-content-register,
.modal-content-reset {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#login-modal {
  width: 480px;
  min-height: 480px;
}

.login-modal {
  font-size: 14px;
  color: #333333;
}

.login-modal input {
  width: 390px;
  height: 50px;
  background: #fff;
  border: none;
  border-radius: 6px;
  padding-left: 50px;
  outline-color: #54b182;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}

.login-modal input[type="checkbox"] {
  cursor: pointer;
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 14px;
  background: none;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  margin-right: 5px;
}

.login-modal input[type="button"],
.login-modal input[type="submit"],
.login-modal input[type="reset"] {
  -webkit-appearance: none;
}

.login-modal textarea {
  -webkit-appearance: none;
}

.login-modal input[type="checkbox"]::after {
  position: absolute;
  top: 0;
  left: 0;
  color: #54b182;
  width: 18px;
  height: 18px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 3px;
  border: 2px solid #9ca2a9;
  box-sizing: border-box;
}

.login-modal input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background-color: #54b182;
  border: none;
}

.login-checkbox-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}

.login-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}

.login-checkbox label {
  user-select: none;
  cursor: pointer;
}

.red-text {
  font-size: 14px;
  color: #ff7777;
  user-select: none;
  cursor: pointer;
}

.red-text a {
  color: #ff7777;
  text-decoration: none;
}

.multiple-lines .login-checkbox {
  align-items: flex-start;
}

.multiple-lines label {
  width: 95%;
}
/* 
.login-modal input:-internal-autofill-selected {
  background: #fff!important;

}
.login-modal input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 0px transparent inset !important;
}
.login-modal input:-internal-autofill-previewed,
.login-modal input:-internal-autofill-selected {
  -webkit-text-fill-color: #333333 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
.login-modal input:-internal-autofill-selected {
    transition: background-color 5000s ease-in-out 0s !important;
    background-color: transparent !important;
}
 */

/* 修改自动填充默认颜色 */
.login-modal input {
  box-shadow: inset 0 0 0 1000px white !important;
}

.mb35 {
  margin-bottom: 35px;
}

.login-input-div {
  position: relative;
  margin-bottom: 20px;
}

.login-input-svg {
  position: absolute;
  top: 10px;
  left: 10px;
}

.login-input-div input:focus-visible .login-input-svg {
  fill: #54b182;
}
.login-input-div input:focus-visible + .login-input-svg path {
  fill: #54b182;
}

.login-input-div input::placeholder {
  color: #9ca2a9;
}

#modal-content-register {
  display: none;
}

.send-code {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 92px;
  box-sizing: border-box;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #9ca2a9;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}

.green-text {
  color: #54b282 !important;
  user-select: none;
  cursor: pointer;
}

.interest-close {
  text-align: right;
  /* color: red; */
  font-size: 28px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
}
.interest-close svg {
  fill: #9ca2a9;
}
.interest-modal-title {
  text-align: center;
  font-weight: 400;
  font-size: 30px;
  color: #333333;
  line-height: 30px;
  user-select: none;
}

.interest-modal-subtitle {
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 30px;
  margin: 10px;
  margin-bottom: 30px;
  user-select: none;
}

.interest-modal-footer {
  user-select: none;
}

.modal-content-reset .interest-modal-footer {
  width: 50%;
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}

.modal-content-login .interest-modal-subtitle,
.modal-content-register .interest-modal-subtitle {
  font-size: 14px;
}

.interest-per-title {
  font-weight: 400;
  font-size: 20px;
  color: #333333;
  padding-left: 10px;
  border-left: 4px solid #497dff;
}

.interest-choose {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  font-size: 14px;
}

.interest-choose div {
  text-align: center;
  /* padding: 5px; */
  margin: 5px;
  /* border: 1px solid gray; */
  border-radius: 5px;
  background: white;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  min-height: 40px;
  /* line-height: 40px; */
  box-sizing: border-box;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.interest-choose-svg {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  display: none;
}

.interest-submit {
  font-size: 30px;
  text-align: center;
  margin: 20px auto 10px;
  cursor: pointer;
  user-select: none;
  width: 143px;
  height: 50px;
  background: #54b182;
  border-radius: 6px;
  border: none;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-select {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.select-input {
  width: 254px;
  height: 26px;
  margin-right: 20px;
}

/* .select-box {
  width: 260px;
  min-height: 32px;
  max-height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #999;
  border-radius: 5px;
} */

.select-result-label {
  display: block;
  height: 32px;
  line-height: 32px;
}

/* 
.select-list {
  position: absolute;
  left: 0;
  top: 40px;

} */

.select-list div {
  /* padding: 2px 4px; */
  box-sizing: border-box;
  cursor: pointer;
}

@media (hover: hover) {
  .select-list div:hover {
    /* color: gray; */
    /* cursor: pointer; */
    border-color: #54b182;
  }
}

.selected {
  background: #e7eefe !important;
  /* border-color: #00a5e3 !important; */
  color: #54b182 !important;
  border: 2px solid #54b182 !important;
}
.selected .interest-choose-svg {
  display: block;
}
.select-result {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.select-result div {
  height: 26px;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 3px;
  margin: 3px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.select-result div span:last-of-type {
  display: inline-block;
  border: 1px solid #999;
  height: 8px;
  width: 8px;
  border-radius: 100%;
  padding: 2px;
  line-height: 7px;
  text-align: center;
  font-size: 12px;
  margin-left: 3px;
  cursor: pointer;
}

/* @media screen and (min-width: 800px) {
  .quiz-list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1000px) {
  .quiz-list {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1200px) {
  .quiz-list {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
} */

.quiz-item {
  border: 2px solid #333333;
  color: #333333;
  border-radius: 10px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}

.quiz-item-div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  aspect-ratio: 1 / 1;
}

.quiz-list .quiz-image {
  width: 100%;
  max-width: 300px;
  max-height: 300px;
}

.exam-container {
  /* min-height: 700px; */
  color: #333333;
  background: #f4f7ff;
  /* flex-direction: column;
  align-items: center;
  justify-content: center; */
}

.exam-container-main {
  overflow: hidden;
  display: flex;
}

.page-left {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.page-left div {
  box-sizing: border-box;
}

.page-left .quiz-per-a:nth-child(1) .quiz-per {
  margin-left: 0;
}

.page-left .quiz-per-a:nth-child(2) .quiz-per {
  margin-right: 0;
}

.page-left .quiz-per .quiz-per-img {
  height: 220px;
}

.page-left .quiz-per img {
  height: 220px;
}
.page-right {
  width: 300px;
  /* height: 900px; */
  margin-left: 20px;
  position: relative;
}

.ad-left {
  width: 728px;
  height: 90px;
  background: thistle;
  margin: 20px auto;
  text-align: center;
}

.mobile-info-ad,
.mobile-detail-ad,
.mobile-result-ad {
  display: none;
  width: 100%;
  height: 280px;
  background: #e7eefe;
  margin: 20px auto;
  text-align: center;
}

.ad-right {
  position: absolute;
  top: 20px;
  text-align: center;
}

.ad-right .ad-right-top1 {
  width: 300px;
  /* height: 265px; */
  background: #fff;
  margin-bottom: 20px;
  overflow: hidden;
}

.ad-right .ad-right-top2 {
  width: 300px;
  height: 600px;
  background: paleturquoise;
  margin-bottom: 20px;
}

.exam-quiz-container {
  background: white;
  overflow: hidden;
}
.exam-container .exam-title {
  background: white;
  margin: 20px 0;
  padding: 20px;
  text-align: left;
  font-size: 20px;
  color: #333333;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.mobile-result-title {
  display: none;
}

.exam-container .exam-title-text {
  max-width: calc(100% - 150px);
}

.exam-container .info-title {
  max-width: 100%;
}
.streak-num-container {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.answer-item {
  display: flex;
  align-items: center;
  margin: 10px;
  height: 35px;
}

.answer-item-title {
  margin-right: 5px;
}
.answer-item svg {
  margin-right: 10px;
  width: 24px;
  height: 24px;
}
.streak-num {
  margin: 0 10px;
}

.answer-text {
  color: #333333;
  font-size: 16px;
}

.answer-right {
  color: #54b182;
}
.exam-top-border {
  width: 880px;
  height: 4px;
  background: #e7eefe;
  position: relative;
}

.exam-top-border2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 4px;
  background: #54b282;
}
.exam-top-num {
  position: absolute;
  left: 0px;
  top: 0;
  background: #54b282;
  z-index: 1;
  font-size: 16px;
  color: #ffffff;
  padding: 3px;
  width: max-content;
}
.exam-container .exam-img-div {
  background: white;
  /* margin: 20px; */
  padding: 40px;
  padding-bottom: 0;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.exam-container .exam-img-div img {
  width: 800px;
  height: 400px;
  object-fit: cover;
}
.exam-container .exam-info {
  position: absolute;
  bottom: 0;
  width: 800px;
  height: 88px;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  font-size: 20px;
  color: #e7eefe;
}

.info-text {
  display: flex;
  flex-direction: column;
}
.info-author {
  display: flex;
  align-items: center;
  height: 30px;
}

.exam-info .info-text,
.result-main-info .info-text {
  padding-left: 10px;
}

.exam-container .exam-info svg {
  position: absolute;
  width: 30px;
  left: 5px;
  top: 5px;
  z-index: 1;
}

.exam-info-author {
  display: flex;
  align-items: center;
}

@media (hover: hover) {
  .exam-info-author .info-text:hover {
    color: #e7eefe !important;
  }
}

.author-seg {
  margin: 10px;
}
.small-font {
  font-size: 16px;
}
.exam-container .exam-info .author-img {
  width: 66px;
  height: 66px;
  background: #b2cefc;
  border-radius: 50%;
  border: 2px solid #e7eefe;
}

.exam-info-right {
  display: flex;
}

.exam-info-right .quiz-like {
  position: relative;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border-radius: 20px;
  background: #e7eefe;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.exam-info-right .quiz-info-text {
  padding: 0 10px 0 30px;
}

.exam-start-button,
.exam-next-button {
  font-weight: bold;
  font-size: 30px;
  color: #ffffff;
  background: orange;
  color: white;
  text-decoration: none;
  font-size: 30px;
  width: 800px;
  height: 88px;
  background: #54b282;
  box-shadow: 0px 4px 0px 0px #319160;
  border-radius: 6px;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-start-btn,
.mobile-next-btn {
  display: none;
  padding: 5px 40px;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 3;
  bottom: 0;
  left: 0;
  width: 100vw;
}

.exam-description {
  background: white;
  margin-bottom: 20px;
  padding: 20px 40px;
  font-size: 20px;
  width: 100%;
  box-sizing: border-box;
}
.exam-tag-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
}

.exam-tag-text {
  font-size: 18px;
  color: #9ca2a9;
  margin-right: 10px;
  min-width: 155px;
}

.exam-tag-list {
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

.exam-tag-list a {
  text-decoration: none;
  color: #333333;
  display: inline-flex;
}
.exam-tag-div {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333333;
  background: #ffffff;
  border-radius: 6px;
  border: 2px solid #54b282;
  margin: 5px;
  padding: 0 10px;
  user-select: none;
  cursor: pointer;
}

@media (hover: hover) {
  .exam-tag-div:hover {
    background: #54b282;
    color: white;
  }
}

.related-quiz {
  font-size: 20px;
  margin-right: 20px;
  padding-left: 20px;
  border-left: 5px solid #54b282;
  margin-bottom: 20px;
  margin-top: 20px;
}
.related-quiz-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* .related-quiz-list .quiz-per {
  max-width: 330px;
} */

.detail-main {
  min-height: 700px;
}

.quiz-container {
  position: relative;
  min-height: 385px;
  /* background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); */
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 32px 32px 10px;
  margin-top: 20px;
}

.result-main .quiz-container {
  padding: 0;
}

.quiz-content-image {
  position: absolute;
  align-items: flex-start;
  z-index: 1;
  right: 40px;
  top: 40px;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quiz-content-image img {
  width: 340px;
  height: 220px;
  object-fit: cover;
}

.quiz-content {
  width: 100%;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
  /* background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 40px 24px 24px; */
}

.quiz-question {
  max-width: 460px;
  height: 240px;
  display: block;
  font-size: 30px;
  color: #333333;
  position: relative;
}

.send-like {
  position: absolute;
  bottom: 10px;
  left: 0;
}

.send-like-div {
  cursor: pointer;
  display: inline-block;
}

.send-like svg {
  pointer-events: none;
}

.send-like svg path {
  pointer-events: none;
  fill: #cacdd7;
}

.is-like-question .like-question-svg path {
  fill: #ff5e5e;
}

.not-like-question .dislike-question-svg path {
  fill: #54b182;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  position: relative;
  padding-top: 110px;
}

.ad-left-quiz {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 728px;
  height: 90px;
  background: rgb(193, 232, 54);
  /* margin: 20px auto; */
  text-align: center;
}

@media print, screen and (min-width: 769px) {
  /* .quiz-options {
    margin-top: 2rem;
    width: 90%;
  } */
}

.option-container .option-label {
  /* background: #fff6f8; */
}

@media print, screen and (min-width: 769px) {
  .option-label {
    padding: 7.5px 16px;
  }
}

.option-label {
  justify-content: center;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 100%;
  border: 2px solid #204454; */
  border-radius: 4.99105px;
  transition: all 0.5s;
  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 24px;
  color: #204454;
  margin: 0;
  padding: 14px 16px;
  /* width: 390px; */
  height: 60px;
  background: #ffffff;
  border-radius: 6px;
  border: 2px solid #54b282;
  box-sizing: border-box;
  text-align: center;
}

@media (hover: hover) {
  .option-label:hover {
    color: white;
    background: #54b282;
  }
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: baseline;
}

.op-right-svg,
.op-wrong-svg {
  position: absolute;
  left: 40px;
  display: none;
}

.op-right .option-label {
  color: #54b282;
}
.op-right .op-right-svg {
  display: block;
}
.op-wrong .option-label {
  color: #ff5e5e;
  border-color: #ff5e5e;
}
.op-wrong .op-wrong-svg {
  display: block;
}

.op-other .option-label {
  color: #cacdd7;
  border-color: #cacdd7;
}

.option-input {
  opacity: 0;
  position: absolute;
}

.column {
  overflow: hidden;
  padding: 10px;
}

.answer-title {
  font-weight: 500;
  font-size: 1.95312rem;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #204454;
  margin-bottom: 24px;
}

.answer-container {
  height: 55px;
}
.answer-button-container {
  margin: 42px 0;
  max-width: 286px;
}

.next-text {
  width: 100%;
  text-align: center;
}

#next-question1 div,
#next-question2 div {
  pointer-events: none;
}
.answer-button {
  width: max-content;
  cursor: pointer;
}

.answer-button-div {
  border: 1px solid #204454;
  font-family: Bebas Neue Pro, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.5625rem;
  line-height: 135%;
  text-transform: uppercase;
  color: #fff;
  padding: 2px 10.55px 2px 8.45px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 5px;
  margin-bottom: 5px;
  padding: 6px 10.55px 6px 8.45px;
  /* background: #ffd14b; */
  width: 390px;
  height: 60px;
  background: #54b282;
  border-radius: 6px;
  border: 2px solid #54b282;
}

.quiz-result {
  display: none;
}

#quiz-result {
  display: none;
}

.HQResultHeader__container {
  /* display: none; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 20px;
  padding: 20px;
  border-radius: 0;
  margin-bottom: 20px;
}

.result-main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-top: 4px solid #54b282;
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); */
  position: relative;
  min-height: 765px;
}

.result-info-left {
  width: 160px;
}
.result-info-flag {
  position: absolute;
  top: 0;
  left: 30px;
  width: 105px;
}

.flag-img {
  position: absolute;
}

.flag-num {
  position: absolute;
  z-index: 2;
  font-size: 36px;
  color: #ffffff;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.flag-text {
  position: absolute;
  z-index: 2;
  font-size: 18px;
  color: #ffffff;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.result-info-ad {
  width: 160px;
  height: 600px;
  background: rgb(18, 170, 147);
  /* margin: 20px auto; */
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 20px;
}

.result-main-info {
  width: 700px;
}

.result-main-info .answer-info {
  font-weight: 400;
  font-size: 24px;
  color: #333333;
}
/* @media print, screen and (min-width: 769px) {
  .HQResultHeader__score {
    max-width: 286px;
    min-width: 215px;
  }
}

.HQResultHeader__score {
  transform: scale(1.1);
  margin-top: 20px;
} */

.HQResultScore__container,
.HQResultScore__overallScore {
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.HQResultScore__container {
  flex-direction: column;
}

.HQResultScore__statement {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 150%;
  text-align: center;
  color: #204454;
  margin-bottom: 16px;
}

@media print, screen and (min-width: 769px) {
  .HQResultScore__result {
    margin-bottom: 32px;
  }
}

.HQResultScore__result {
  display: flex;
  margin-bottom: 26px;
}

.HQResultData__container,
.result-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.result-icon-container img {
  width: 42px;
  height: 42px;
}

.result-icon-container .result-date-img {
  width: 38px;
}

.result-middle-icon {
  /* margin: 0 10px; */
  margin-right: 40px;
}

.HQResultData__container {
  flex-direction: column;
}

.HQResultData__title {
  font-weight: 400;
  font-size: 18px;
  color: #333333;
  margin: 5px 0;
  line-height: 120%;
  display: flex;
  align-items: center;
}

.HQResultData__number {
  line-height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 36px;
  color: #333333;
}

.result-main {
  width: calc(100% - 320px);
  overflow: hidden;
}

.result-main .question-bottom-img img {
  width: 300px;
}

.result-question {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #c9cfdd;
  box-sizing: border-box;
  position: relative;
  padding: 0 20px;
  margin-bottom: 20px;
}

.result-question-top {
  /* margin-right: 32px; */
}

.question-bottom-img {
  margin: 20px auto;
}
.question-order-num {
  font-size: 30px;
  color: #ff5e5e;
  margin: 10px auto;
}

.question-correct {
  color: #54b282;
}

.result-question-title {
  font-size: 24px;
  color: #333333;
  margin-bottom: 10px;
}
.result-question-explanation {
  text-align: justify;
  font-size: 16px;
  color: #333333;
}

.mobile-explanation {
  display: none;
  margin-top: 10px;
}

.question-option {
  width: 100%;
  margin-bottom: 8px;
}

.result-question-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.result-question-bottom .question-bottom-img {
  flex: 1;
}

.result-question-bottom .question-bottom-options {
  flex: 1.15;
}

.result-option-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 47px;
}
.result-img {
  width: 370px;
  height: 240px;
  border-radius: 6px;
}
.result-answer-bar-total {
  background: #e7eefe;
}

.result-answer-bar {
  background: #c9cfdd;
  height: 5px;
}

.result-answer-bar-correct {
  /* background: greenyellow; */
}

.option-correct .result-answer-bar {
  background: #54b282;
}
.option-correct .result-answer-text {
  color: #54b282;
}
.user-select .result-answer-bar {
  background: #ff5e5e;
}
.user-select .result-answer-text {
  color: #ff5e5e;
}
.option-correct .user-select .result-answer-bar {
  background: #54b282;
}
.option-correct .user-select .result-answer-text {
  color: #54b282;
}

.result-option-container {
  height: 54px;
}

.right-svg {
  display: none;
  width: 30px;
  height: 30px;
  margin: 5px;
  margin-left: 0;
}

.wrong-svg {
  display: none;
  width: 28px;
  height: 28px;
  margin: 5px;
  margin-left: 0;
}
.option-correct .right-svg {
  display: block;
}

.user-select .wrong-svg {
  display: block;
}
.option-correct .user-select .right-svg {
  display: block;
}

.option-correct .user-select .wrong-svg {
  display: none;
}

.result-answer-text {
  font-weight: 400;
  font-size: 20px;
  color: #c9cfdd;
  display: flex;
  align-items: center;
}

.option-precentage {
  font-size: 18px;
  color: #c9cfdd;
}

.option-correct .option-precentage,
.user-select .option-precentage {
  color: #333333;
}
.evaluate-container {
  margin: 20px auto;
  position: relative;
  min-width: 213px;
  text-align: center;
}

.evaluate-text {
  font-weight: bold;
  font-size: 36px;
  color: #54b282;
}

.evaluate-img {
  transform: translateY(-12px);
}

.subscription {
  font-size: 20px;
  color: #333333;
}

.like-and-save {
  font-size: 30px;
  margin: 20px auto;
  display: flex;
}

.like-and-save .quiz-like {
  position: relative;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border-radius: 20px;
  color: #333333;
  background: #e7eefe;
  border-radius: 20px;
  margin-right: 10px;
  font-size: 20px;
  user-select: none;
  cursor: pointer;
}
.like-and-save .quiz-info-text {
  padding: 0 10px 0 30px;
}

.quiz-like svg,
.quiz-like div {
  pointer-events: none;
}

.like-and-save svg {
  position: absolute;
  width: 30px;
  left: 5px;
  top: 5px;
  z-index: 1;
}

.not-liked .liked-svg {
  display: none;
}

.is-liked .like-svg {
  display: none;
}

.not-fav .faved-svg {
  display: none;
}

.is-fav .fav-svg {
  display: none;
}

.anchor-container-div {
  background: #f4f7ff;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  margin: 5px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 680px;
}

.anchor-text {
  margin: 20px auto;
  font-size: 20px;
  color: #333333;
}
.anchor-text-bold {
  font-weight: bold;
}

.anchor-container-div a {
  text-decoration: none;
}

.anchor-container-div .answer-button-div {
  margin: 20px auto;
  cursor: pointer;
  user-select: none;
}
.anchor-container {
  /* width: 680px;
  height: 304px; */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.quiz-anchor {
  /* width: 122px; */
  height: 46px;
  background: #ffffff;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #c9cfdd;
  color: #ff5e5e;
  cursor: pointer;
  user-select: none;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.quiz-anchor svg {
  width: 22px;
  height: 22px;
}
.quiz-anchor .small-wrong {
  width: 20px;
  height: 20px;
}
.anchor-correct {
  color: #54b282;
}

.to-top-anchor {
  width: 20px;
  height: 20px;
  margin: 10px auto;
  user-select: none;
  cursor: pointer;
}

.result-title {
  font-size: 20px;
  color: #333333;
  text-align: left;
  margin: 10px auto;
}

.page-main {
  overflow: hidden;
}

.page-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.page-list {
  margin-right: 30px;
}

.page-list-title {
  font-size: 30px;
  font-weight: 700;
  color: gray;
  height: 60px;
  line-height: 60px;
}

.page-list-ul {
  width: 200px;
  margin-bottom: 20px;
}

.page-list-li {
  list-style: none;
  line-height: 30px;
  color: gray;
}

.page-list-li a {
  text-decoration: none;
  color: #333333;
  font-size: 14px;
  user-select: none;
}

.page-left-ad {
  width: 160px;
  height: 600px;
  background: tan;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-main {
}

.content-main .content-title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
  background: gray;
  color: white;
  text-align: center;
  height: 120px;
  line-height: 120px;
}

.content-text-container {
  height: 800px;
  overflow: scroll;
  background: white;
  padding: 50px;
  box-sizing: border-box;
  border-radius: 20px;
  margin-bottom: 50px;
}

.m-today {
  display: none;
  width: 100vw;
  /* height: 100%; */
  min-height: 550px;
  background-size: cover;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.today-container {
  background: #bceef9;
  min-height: 700px;
  text-align: center;
  /* display: flex; */
}

.today-img {
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

.today-img img {
  width: 100%;
  height: 100%;
}

.register-container {
  min-height: 700px;
}

.channel-container {
}

.channel-banner-container {
  width: 100%;
  background: rgb(255, 234, 197);
  position: relative;
  overflow: hidden;
  height: 418px;
  margin-bottom: 10px;
}
.channel-banner {
  position: relative;
  height: 100%;
  padding: 50px;
  box-sizing: border-box;
}

.m-channel-banner {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
  height: 100%;
  background-size: 100% 100%;
}

.m-channel-banner .quiz-right {
  width: 100vw;
  height: auto;
  position: relative;
  right: auto;
  top: auto;
}
.m-channel-banner .quiz-per-info {
  justify-content: center;
  scale: 1.2;
}

.m-channel-banner .quiz-per-info div {
  background: #ffd799;
  color: #333333;
  margin-right: 10px;
}

.channer-banner2 .m-channel-banner .quiz-per-info div {
  background: #9ceee8;
}

.m-channel-title .title-a {
  width: 96vw;
  display: flex;
  align-items: center;
  margin: 0 auto;
  justify-content: space-between;
  height: 40px;
  border-radius: 6px;
  color: #fff;
  padding: 0 10px 0 5px;
  box-sizing: border-box;
}

.m-channel-left {
  display: flex;
  align-items: center;
}

.m-channel-banner .num-num {
  color: #333333;
}

.m-channel-title {
  display: none;
}

.channer-banner2 {
  background: #9befe8;
}

.channer-banner2 .quiz-left .quiz-per-info div {
  background: #9befe8;
}

.channer-banner2 .quiz-right .play-btn {
  background: #00d0bf;
}

.channel-banner-img {
  /* width: 100%; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  user-select: none;
  pointer-events: none;
}
.quiz-left,
.quiz-right {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background: blue; */
  width: 500px;
  height: 250px;
}
.quiz-left {
  top: 90px;
  left: 60px;
}

.quiz-right {
  right: 30px;
  top: 75px;
  padding: 30px;
  box-sizing: border-box;
  text-align: justify;
}

.quiz-left .quiz-left-img {
  width: 400px;
  height: 250px;
  border-radius: 6px;
}

.quiz-left .quiz-per-info div {
  background: rgb(255, 234, 197);
  width: max-content;
  margin-right: 5px;
  color: #333333;
  user-select: none;
  /* cursor: pointer; */
}

.quiz-left .quiz-per-info .quiz-like {
  cursor: pointer;
}

.quiz-left .quiz-per-info div:hover {
  /* color: black; */
}

.quiz-left .quiz-per-info {
  position: absolute;
  bottom: -20px;
  justify-content: center;
}

.quiz-right .channel-title {
  font-weight: 400;
  font-size: 36px;
  color: #ffffff;
}
.quiz-right .quiz-title {
  font-weight: 400;
  font-size: 24px;
  color: #333333;
}

.quiz-right .play-a {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-right .play-btn {
  width: 220px;
  height: 66px;
  background: #ff973d;
  border-radius: 8px;
  font-weight: 400;
  font-size: 30px;
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.channel-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 20px;
}

.big-fr {
  grid-template-columns: 1fr 1fr;
}

.big-fr .quiz-per .quiz-per-img img {
  height: 300px !important;
}

.channel-main .quiz-per {
  margin: 0;
}

.channel-main .quiz-per-a {
  display: none;
}

.channel-columns .quiz-per-a:nth-child(1) {
  /* display: flex; */
}

.channel-main .show0 .quiz-per-a:nth-child(1) {
  display: flex;
}

.channel-main .show1 .quiz-per-a:nth-child(2) {
  display: flex;
}

.channel-main .show2 .quiz-per-a:nth-child(3) {
  display: flex;
}

.channel-main .show0 .category-list .channel-column-title:nth-child(1) {
  border-bottom: 2px solid green;
}

.channel-main .show1 .category-list .channel-column-title:nth-child(2) {
  border-bottom: 2px solid green;
}

.channel-main .show2 .category-list .channel-column-title:nth-child(3) {
  border-bottom: 2px solid green;
}

.channel-main
  .show0
  .category-list
  .channel-column-title:nth-child(1)
  .column-title-text {
  color: #333333;
}

.channel-main
  .show1
  .category-list
  .channel-column-title:nth-child(2)
  .column-title-text {
  color: #333333;
}

.channel-main
  .show2
  .category-list
  .channel-column-title:nth-child(3)
  .column-title-text {
  color: #333333;
}

.channel-main .quiz-per-img {
  height: auto;
}

.channel-main .quiz-per img {
  height: 200px;
}
.channel-category {
}
.channel-category a {
  text-decoration: none;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.channel-category-title {
  font-size: 20px;
  font-weight: 700;
  margin: 10px;
}

.channel-category .quiz-per-content {
  width: 100%;
}

.channel-category .quiz-per .quiz-per-content .quiz-category {
  top: -21px;
}

.channel-category .quiz-per .quiz-per-title {
  display: flex;
  align-items: center;
}

.channel-category-title .title-img {
  margin-right: 10px;
  width: 40px;
  height: 40px;
}
.m-channel-title .title-img {
  width: 40px;
  height: 40px;
}
.channel-category-title .title-a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.channel-main .quiz-per .quiz-per-content .quiz-category {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  color: white;
  transform: translate(-50%, 0);
}

.channel-columns {
  background: white;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.channel-quiz-img {
  width: 200px;
  height: 200px;
}

.category-list {
  display: flex;
}

.channel-column-title {
  flex: 1;
  /* background: #57d022; */
  height: 44px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  position: relative;
}
.channel-column-title .column-title-text {
  color: #9ca2a9;
  /* height: 100%; */
  font-size: 14px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  pointer-events: none;
}

.column-title-text-border {
  font-size: 0;
  border-right: 2px solid #e7eefe;
  position: absolute;
  width: 100%;
  height: 24px;
  pointer-events: none;
}
.category-container {
  background: #f4f7ff;
  overflow: hidden;
}

.category-top-conainer {
  background: #e7eefe;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-top {
  /* background: gray; */
  color: #333333;
  /* padding: 20px; */
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.category-top .div-space {
  width: 100%;
  position: absolute;
  background: #56abe3;
  height: 40px;
}

.category-top .category-title {
  height: 70px;
  line-height: 70px;
  position: relative;
  width: max-content;
}

.category-top .space-title,
.category-top .space-title2 {
  font-size: 42px;
  padding: 0 20px;
}

.category-intro {
  font-weight: 400;
  font-size: 24px;
  color: #333333;
}

.category-show1-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.category-show1-title {
  font-size: 20px;
  font-weight: 700;
  margin-right: 20px;
  padding-left: 15px;
  height: 40px;
  line-height: 40px;
  border-left: 4px solid #56abe3;
}

.category-show1-btns {
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-show1-btn {
  width: 34px;
  height: 34px;
  background: #e7eefe;
  border-radius: 4px;
  margin-right: 10px;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-show1-btns .btn-text {
  display: block;
  color: #56abe3;
  font-size: 22px;
  line-height: 22px;
  width: 22px;
  height: 22px;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.btn-svg {
  display: none;
  width: 40px;
  height: 40px;
  pointer-events: none;
  user-select: none;
}

.btn-svg path {
  stroke: #fff;
}

.category-show1-btns .more-btn {
  width: 80px;
  height: 40px;
  background: #56abe3;
  border-radius: 6px;
  color: white;
  text-decoration: none;
  font-size: 18px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-container .quiz-index {
  display: flex;
  /* grid-template-columns: 1fr 1fr 1fr 1fr; */
  overflow: scroll;
  /* margin: 0; */
}
.category-container .quiz-index .quiz-per-a {
  margin: 0 10px;
  width: 280px;
}
.category-container .quiz-per {
  margin: 0;
  padding: 0;
}
.category-container .quiz-per-img {
  width: 280px;
}
.column-top {
  overflow: hidden;
  padding: 10px;
  min-height: 130px;
  background: #e7eefe;
}
.column-top a {
  text-decoration: none;
  color: #333333;
}

.column-container .tag-list-container a,
.search-show-container .tag-list-container a {
  text-decoration: none;
  color: #333333;
}
.column-breadcrumb {
}

.breadcrumb-ul {
  display: flex;
}

.breadcrumb-segment {
  margin: 10px;
}

.breadcrumb-ul li {
  list-style: none;
  margin: 10px;
}

.column-main {
  /* min-height: 700px; */
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.column-container {
  background: #f4f7ff;
}

.column-container .tag-list-container {
  margin-top: 10px;
}

.column-main .quiz-list {
  display: block;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: 10px;
}

.column-main .quiz-per {
  margin: 10px;
}
.column-main .quiz-per-a {
  height: min-content;
  float: left;
}
.column-change {
  display: flex;
}
.column-change div {
  margin: 10px;
  padding: 10px;
  height: 40px;
  background: #ffffff;
  border-radius: 6px;
  box-sizing: border-box;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column-change .current-column {
  color: white;
  height: 40px;
  background: #56abe3;
  border-radius: 6px;
}

.today-main-container {
  width: 100%;
  background: url("/public_html/assets/img/todaybg.png") no-repeat center center;
  position: relative;
  overflow: hidden;
  height: 590px;
  margin-bottom: 10px;
}

.today-main {
  position: relative;
  height: 100%;
  padding: 50px;
  box-sizing: border-box;
}

.today-main-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  user-select: none;
  pointer-events: none;
}

.today-left,
.today-right {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background: blue; */
  width: 500px;
  height: 400px;
  top: 120px;
}

.today-left {
  left: 50px;
  top: 110px;
  width: 450px;
}

.today-right {
  right: 80px;
}

.today-left .today-title {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 60px;
  color: white;
}

.today-left .today-date {
  position: absolute;
  left: 0;
  top: 140px;
  font-size: 30px;
  color: #48cfe5;
  font-weight: bold;
  /* width: min-content; */
  text-align: left;
}

.today-right .today-quiz-title {
  font-weight: bold;
  font-size: 32px;
  color: #333333;
}

.m-today .today-right .today-quiz-title {
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  margin-top: 20px;
}

.today-right .today-form {
  width: 100%;
}

.m-today .m-today-quiz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 400px;
  width: 90vw;
  height: auto;
  right: auto;
  top: auto;
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1/1;
}

.m-today .today-title {
  width: 330px;
  height: 70px;
  background-size: cover;
  font-weight: bold;
  font-size: 36px;
  color: #ffffff;
  line-height: 60px;
  z-index: 3;
}

.m-today .today-date {
  font-weight: bold;
  font-size: 18px;
  color: #48cfe5;
  line-height: 38px;
  margin-bottom: -45px;
  z-index: 3;
}

.today-right .today-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}

.m-today .today-right .today-quiz-options {
  margin: 0;
  width: 90%;
}

.today-right .today-quiz-option {
  width: 100%;
  text-align: left;
  font-weight: 400;
  font-size: 24px;
  color: #333333;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: start;
}

.m-today-form {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.m-today .today-right .today-quiz-option {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
.today-right .today-quiz-option input[type="radio"] {
  width: 30px;
  height: 30px;
  background: #ffffff;
  border-radius: 17px;
  border: 2px solid #6ddb84;
  margin-right: 20px;
  cursor: pointer;
}

.today-right .today-quiz-option label {
  cursor: pointer;
}

.m-today .today-right .today-quiz-option input[type="radio"] {
  width: 20px;
  height: 30px;
}

.today-quiz-btn input {
  width: 143px;
  height: 50px;
  background: #6ddb84;
  border: none;
  border-radius: 6px;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
  line-height: 29px;
  cursor: pointer;
}

/* label {
  position: relative;
}
input[type="radio"][name="options"] {
  opacity: 1;
  margin-right: 15px;
} */

/* input[type="radio"][name="options"] {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  position: absolute;
  box-sizing: border-box;
  left: 0;
}
input[type="radio"][name="options"]:checked {
  width: 20px;
  height: 20px;
  border: 1px solid #ff0000;
  position: absolute;
  box-sizing: border-box;
} */
/* 
input[type="radio"][name="options"] + span {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  position: absolute;
  box-sizing: border-box;
  left: 0;
}
input[type="radio"][name="options"]:checked + span {
  width: 20px;
  height: 20px;
  border: 1px solid #ff0000;
  position: absolute;
  box-sizing: border-box;
} */

.no-result-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* height: 100%;
  width: 100%; */
  margin: 50px 0;
  text-align: center;
}

.no-result-img {
  width: 300px;
  margin: 0 auto;
}

.no-result-title {
  font-weight: 400;
  font-size: 30px;
  color: #333333;
  line-height: 80px;
}

.no-result-text {
  font-weight: 400;
  font-size: 24px;
  color: #9ca2a9;
  line-height: 30px;
  width: 500px;
}

.user-index {
  background: #f4f7ff;
  overflow: hidden;
}

.user-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.user-top-container {
  background: #e7eefe;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-top-container img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.user-img-a {
  position: relative;
}

.user-img-svg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
}

.user-quizs {
  margin-top: 10px;
}

.user-main {
  display: flex;
  margin: 20px auto;
  overflow: hidden;
}

.user-main a {
  text-decoration: none;
  color: #333333;
}
.user-left-ad {
  width: 160px;
  height: 600px;
  background: tan;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-main-right {
  background: white;
  padding: 20px;
  position: relative;
  min-width: 930px;
}

.user-width .user-main-right {
  width: 980px;
}

.user-main .user-main-right .list-quiz-per {
  height: 147px;
  background: #f4f7ff;
  width: 980px;
}

.user-main .user-main-right .tag-list-container {
  position: absolute;
  top: 0;
  left: 0;
}
.user-main .user-main-right .list-quiz-per .quiz-per-img {
  width: 220px;
}
.user-main .user-main-right .list-quiz-per .quiz-per-img img {
  width: 170px;
  height: 126px;
  border-radius: 6px;
}

.user-main .user-main-right .list-container {
  margin-top: 35px;
}

.user-main .user-main-right .tag-div {
  margin: 0;
  padding: 30px;
  background: #ffffff;
  border-radius: 0;
  border-top: 4px solid #c9cfdd;
  color: #9ca2a9;
  user-select: none;
  cursor: pointer;
}

.user-main .user-main-right .current-tag {
  border-color: #54b282;
  color: #333333;
}

/* #later-list {
  display: none;
} */

.user-main-left {
  background: white;
  margin-right: 10px;
}

.user-setting-container {
}

.user-left-setting {
  width: 220px;
  height: 600px;
  position: relative;
}

.setting-text {
  font-size: 30px;
  border-left: 4px solid #54b282;
  line-height: 40px;
  height: 40px;
  padding-left: 20px;
  margin: 20px 0;
}

.setting-home {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  user-select: none;
  font-weight: 400;
  font-size: 20px;
  color: #9ca2a9;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e7eefe;
  padding: 10px 0;
}

.setting-home-a {
  font-weight: 400;
  font-size: 20px;
  color: #9ca2a9 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.setting-home-a svg {
  margin-right: 10px;
}
.setting-item-text {
  font-size: 20px;
  color: #9ca2a9;
  margin: 25px;
}

.user-setting-container .user-main-right {
  width: 960px;
}

.user-mobile-container {
  display: none;
  flex-direction: column;
  max-width: 90vw;
  color: #333333;
  margin-bottom: 20px;
}
.user-mobile-container a {
  text-decoration: none;
  color: #333333;
}

.user-mobile-container .right-setting-item {
  margin-left: 0 !important;
  width: 100%;
}

.user-mobile-container .user-mobile-setting .right-setting-item {
  max-width: 400px;
}
.user-mobile-container .right-setting-input input {
  width: 60vw;
  height: 34px;
  font-size: 16px;
}
.down-arrow {
  margin-right: 7px;
}

.user-mobile-container .user-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  border-bottom: 2px solid #e7eefe;
  font-size: 20px;
}
.user-mobile-container .user-photo-circle {
  width: 100px;
  height: 100px;
}

.user-mobile-container .user-right-title {
  font-size: 16px;
}

.user-mobile-container .user-photo-text,
.user-mobile-container .right-setting-text {
  font-size: 14px;
}
.user-mobile-container .right-setting-text {
  min-width: 150px;
}
.mobile-setting-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-mobile-container .user-mobile-setting .right-setting-text {
  font-size: 18px;
}
.user-right-title {
  font-size: 30px;
  color: #333333;
}
.user-mobile-container .interest-right-title {
  display: block;
}
.user-mobile-container .user-right-title-sub {
  font-size: 12px;
}

.user-mobile-container .user-interest-container {
  padding: 0;
  min-height: auto;
}

.user-mobile-container .interest-submit {
  width: 120px;
  height: 40px;
  font-size: 18px;
}

.interest-right-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-right-title-text {
}

.user-right-title-sub {
  font-size: 20px;
  color: #333333;
}

.user-right-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.right-setting-item {
  font-size: 20px;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: right;
  margin: 20px;
  margin-left: -50px;
  width: 330px;
  text-align: right;
}

.pwd-container .right-setting-item,
.profile-container .right-setting-item {
  margin-left: -170px;
  width: 600px;
}

.right-setting-text {
  margin-right: 30px;
}

.right-setting-input input {
  width: 392px;
  height: 52px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #c9cfdd;
  font-weight: 400;
  font-size: 20px;
  color: #9ca2a9;
  outline-color: #54b182;
}

.switch {
  /* 定义position为relative，子元素的absolute在这里作参照 */
  position: relative;
  display: inline-block;
  width: 98px;
  height: 40px;
}

.switch input {
  /* 隐藏input的显示 */
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  /* 撑满外层的div标签 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e7eefe;
  /* 设置显示时候的动画 */
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
/* 设置子div前面的元素 */

.slider:before {
  position: absolute;
  /* before的内容为空白 */
  content: "";
  height: 32px;
  width: 32px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  /* 设置按钮点击的时候的动画效果 */
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
/* 两个属性同时存在的时候的css样式 */

input:checked + .slider {
  background-color: #54b282;
}

input:focus + .slider {
  box-shadow: 0 0 1px #54b282;
}
/* 设置before元素的平移动画 */

input:checked + .slider:before {
  -webkit-transform: translateX(58px);
  -ms-transform: translateX(58px);
  transform: translateX(58px);
}
/* 设置下面一组按钮的圆角 */

.slider.round {
  border-radius: 40px;
}

.slider.round:before {
  border-radius: 50%;
}

.user-photo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.user-photo-circle {
  width: 150px;
  height: 150px;
  /* background: aqua; */
  border-radius: 50%;
  margin-bottom: 10px;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.user-photo-circle img {
  width: 100%;
  height: 100%;
}

.user-photo-camera {
  /* display: none; */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 35px;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-photo-circle:hover .user-photo-camera {
  /* display: flex; */
}
.user-photo-text {
  font-size: 20px;
  color: #333333;
}

#user-photo-input {
  display: none;
}

#time-list .quiz-per-text,
#later-list .quiz-per-text {
  padding: 0;
}
#time-list .quiz-per-text .quiz-per-content,
#later-list .quiz-per-text .quiz-per-content {
  width: 100%;
  margin: 0;
}

.time-line-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  width: 100%;
}

#time-list .quiz-per-img:hover img,
#later-list .quiz-per-img:hover img,
.mobile-user-list .quiz-per-img:hover img {
  scale: inherit;
  filter: none;
}

#later-list .quiz-per-img {
  height: auto;
}
.time-line-text .green-text {
  cursor: auto;
  margin: 0 10px;
}

.time-line-text svg {
  margin-right: 5px;
}

.time-line-text-left,
.time-line-text-right {
  display: flex;
  align-items: center;
}
.time-line-text-right {
  margin-right: 100px;
}

#later-list {
  overflow: visible;
  margin-top: 50px;
}

.later-container .top-list {
  overflow: visible;
}

#later-list .list-quiz-per {
  position: relative;
  overflow: visible;
}

#later-list .option-div {
  position: absolute;
  right: 10px;
  bottom: 20px;
}

.option-div .inhover {
  display: none;
}

.option-div:hover .nohover {
  display: none;
}
.option-div:hover .inhover {
  display: block;
}

.option-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: -50px;
  right: 0;
  width: 264px;
  height: 48px;
  background: #9da8c1;
  border-radius: 6px;
  border: 2px solid #9da8c1;
  font-size: 18px;
  color: #ffffff;
  z-index: 3;
  cursor: pointer;
  user-select: none;
}

.option-div:hover .option-btn {
  display: flex;
}

.user-interest-container {
  width: 919px;
  min-height: 495px;
  background: #f4f7ff;
  border-radius: 6px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.back-button {
  position: fixed;
  right: 5px;
  bottom: 60px;
  z-index: 12;
  cursor: pointer;
  scale: 0.6;
  /* background: blue; */
  width: 75px;
  height: 75px;
}

.back-button-svg circle {
  fill: #54b282;
}

.back-button-svg path {
  fill: #ffffff;
}

.back-button:hover .back-button-svg circle {
  /* fill: #e7eefe; */
}

.back-button:hover .back-button-svg path {
  fill: #acddc4;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.showButton {
  animation: fadeIn 1s;
  opacity: 1;
}

.hideButton {
  animation: fadeOut 1s;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .quiz-per-title:hover,
  .info-text:hover,
  .p-margin:hover,
  .top-quiz-title:hover {
    color: black !important;
  }
}

::highlight(search-results) {
  /* background-color: #f06; */
  color: red;
}

mark {
  background: none;
  color: red;
}
/* 不同分辨率显示适配 */

/* .top-left .top-menu {
  display: none;
}


.top-left .top-menu:nth-child(-n+3) {
  display: block;
}
 */
@media only screen and (min-width: 1200px) {
  .banner-quiz-info .banner-quiz-img {
    width: 400px;
    height: 260px;
  }
  .quiz-left {
    height: 300px;
    top: 65px;
  }
  .quiz-left .quiz-left-img {
    width: 500px;
    height: 360px;
  }
  .no-result-img {
    width: 400px;
  }
}

@media only screen and (max-width: 1199px) {
  .search-list .top-quiz-description,
  .search-list .quiz-author,
  .search-list .update-time,
  .top-list-page .top-quiz-description,
  .top-list-page .quiz-author,
  .top-list-page .update-time,
  .user-left-ad {
    display: none;
  }
  .time-line-text-right {
    margin-right: 20px;
  }
  .user-index .user-main {
    /* width: auto; */
  }
  .pwd-container .right-setting-item,
  .profile-container .right-setting-item {
    margin-left: 0;
  }
  .user-interest-container {
    width: auto;
  }
  .user-main-right {
    min-width: 600px;
    margin: 0 auto;
    min-height: 400px;
  }

  .bottom-list-ul {
    width: 50%;
    display: ruby;
  }
  .page-right {
    display: none;
  }
  .user-main .user-main-right .list-quiz-per {
    width: auto;
  }
  #top-menu3 {
    margin: 0;
  }
}

@media only screen and (max-width: 1199px) and (min-width: 900px) {
  body {
    min-width: auto;
  }
  .center {
    width: 900px;
  }

  /* .top-left .top-menu:nth-child(-n+3) {
    display: none;
  }

  .top-left .top-menu:nth-child(2){
    display: block;
  }
   */
  .top-nav2 .column-item-full {
    margin-right: 45px;
  }
  .banner-quiz-info {
    width: 900px;
  }

  .banner-quiz-left {
    width: 500px;
  }
  .interest-center .interest-quiz-item:nth-child(n + 4) {
    display: none;
  }
  .today-main-img {
    width: 100%;
  }
  .today-left {
    left: 15px;
    top: 140px;
    width: 400px;
    height: 300px;
  }
  .today-right {
    right: 35px;
    top: 180px;
    width: 400px;
    height: 300px;
  }

  .quiz-left,
  .quiz-right {
    scale: 0.85;
  }

  .quiz-left {
    top: 90px;
    left: -20px;
  }
  .quiz-right {
    top: 70px;
    right: -45px;
  }
  .channel-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-bottom: 20px;
  }

  .big-fr {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  }
  .big-fr .quiz-per .quiz-per-img img {
    height: 200px !important;
  }
}

@media only screen and (max-width: 899px) {
  .top,
  #top-nav {
    display: none;
  }

  .mobile-top {
    display: flex;
  }

  .bottom {
    display: none;
  }
  .mobile-bottom {
    display: flex;
  }
  .mt85 {
    margin-top: 0px;
  }

  #min-height-container {
    margin-top: 50px;
  }
  .carousel-container,
  .carousel-container .screen,
  .carousel-container .screen ul li {
    height: 280px;
  }
  .carousel-container .arrow {
    display: flex;
    width: 98%;
    max-width: 670px;
    transform: translate(0px, -155px);
  }
  .carousel-container .arrow span {
    background: none;
  }
  .banner-quiz-btn {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .banner-a {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #333333;
  }

  .banner-quiz-img-container {
    border-radius: 8px;
    overflow: hidden;
  }
  .banner-bg-img {
    display: none;
  }

  .banner-quiz-info {
    /* width: calc(100% - 70px); */
    width: 600px;
    top: 150px;
    height: 280px;
  }
  .banner-quiz-left {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
  }
  .banner-quiz-info .banner-quiz-title {
    font-size: 20px;
    text-align: center;
    width: 80%;
    height: calc(100% - 75px);
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-shadow: 1px 1px 5px white;
  }
  .banner-quiz-btn {
    width: 100%;
    background: #54b282;
  }
  .banner-quiz-category {
    display: none;
  }
  .banner-quiz-right {
    width: 100%;
  }
  .banner-quiz-info .banner-quiz-img {
    width: 100%;
    height: 240px;
    scale: 1.1;
    /* filter: blur(3px) brightness(1.1); */
    object-fit: cover;
  }
  .banner-mobile-title {
    display: flex;
  }
  .banner-pc-title,
  .banner-pc-btn {
    display: none !important;
  }
  .shadow1 {
    width: calc(100% - 20px);
    right: 10px;
  }
  .shadow2 {
    width: calc(100% - 40px);
    right: 20px;
  }

  .shadow3 {
    display: none;
    width: calc(100% - 60px);
    right: 30px;
  }

  .user-width .user-main-right {
    width: 640px;
  }

  .mobile-interest-title {
    display: flex;
  }

  .interest-space-item {
    display: none !important;
  }
  .interest-container {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 20px 0;
  }

  .interest-container .quiz-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .interest-container .interest-center .interest-quiz-item:nth-child(5) {
    display: flex;
  }

  .interest-container .interest-center .interest-quiz-item:nth-child(n + 6) {
    display: none;
  }
  .pc-interest-title {
    display: none;
  }
  .mobile-quiz-index {
    display: flex;
  }

  .interest-quiz-item {
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-bottom: 10px;
  }
  .scroll-container .quiz-index:nth-child(1) .quiz-per-a:nth-child(2n) {
    display: none;
  }

  .scroll-container .quiz-index:nth-child(2) .quiz-per-a:nth-child(2n + 1) {
    display: none;
  }

  .quiz-per .quiz-per-content {
    width: 100%;
  }
  .quiz-per .quiz-per-content .quiz-category {
    background: rgba(0, 0, 0, 0.5) !important;
    width: 100%;
    color: white;
    top: -21px;
    left: auto;
    transform: inherit;
  }

  .exam-top-border {
    width: auto;
  }

  .search-list,
  .pc-top-list {
    display: none;
  }

  .mobile-search-list,
  .mobile-top-list {
    display: block;
  }

  .interest-modal {
    width: 600px;
  }
  .interest-choose {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .pc-today {
    display: none !important;
  }
  .m-today {
    display: flex;
  }
  /* .pc-title {
    display: none !important;
  }

  .m-title {
    display: flex !important;
  } */
  .today-container {
    background: none;
  }
  .channel-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-bottom: 20px;
  }
  .big-fr .quiz-per .quiz-per-img img {
    height: 200px !important;
  }

  .pc-channel-banner {
    display: none !important;
  }

  .channer-banner2,
  .channel-banner-container {
    background: none;
  }
  .m-channel-banner {
    display: flex;
  }
  .channel-banner-container {
    height: 300px;
  }
  .exam-container .exam-info,
  .exam-container .exam-start-button,
  .exam-container .ad-left {
    width: 100%;
  }
  .exam-container .exam-img-div {
    padding: 20px 0;
  }
  .exam-container .author-seg,
  .exam-container .author-intro {
    display: none;
  }
  .streak-num-container {
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
  }

  .ad-left-quiz {
    display: none;
  }

  .mobile-detail-ad,
  .mobile-result-ad {
    display: block;
  }

  .quiz-container {
    display: block;
    padding: 10px;
  }
  .quiz-question {
    height: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 5px;
  }

  .quiz-content-image,
  #question-like {
    position: relative;
    right: auto;
    top: auto;
    left: auto;
    bottom: auto;
  }
  .quiz-options {
    grid-template-columns: 1fr;
    padding-top: 0;
    margin-top: 0;
  }
  .column {
    padding: 5px;
  }
  .result-info-flag {
    left: 0;
  }
  .result-info-ad {
    display: none;
  }
  .mobile-result-title {
    display: block;
    margin: 10px 0 !important;
  }
  .result-main .quiz-container {
    margin-top: 0;
  }
  .result-main-container {
    display: block;
  }
  .anchor-container {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
  .result-main-info {
    width: auto;
  }
  .anchor-container-div {
    width: 100%;
  }
  .quiz-anchor {
    margin: 2px;
  }
  .result-question-bottom {
    display: block;
  }
  .result-img {
    width: 100%;
    max-width: 370px;
    display: block;
    margin: 0 auto;
  }
  .anchor-container-div a {
    width: 100%;
  }
  .answer-button-div {
    width: 90%;
    max-width: 390px;
    font-size: 20px;
    height: 46px;
  }
  .pc-explanation {
    display: none;
  }
  .mobile-explanation {
    display: block;
  }
  .question-container {
    font-size: 16px;
    margin: 10px 0;
  }
  .option-label {
    height: 46px;
    font-size: 18px;
    padding: 0 60px;
  }
  .exam-next-button {
    width: 80% !important;
    margin: 10px auto;
    font-size: 20px;
    height: 46px;
  }

  .user-setting-container {
    display: none;
  }
  .user-mobile-container {
    display: flex;
  }

  .page-container {
    display: block;
  }
  .page-left-ad {
    display: none;
  }
  .page-list {
    margin: -20px 10px -10px 10px;
  }
  .page-list-ul {
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .mobile-user-list .user-main {
    width: auto !important;
  }
  .mobile-user-list .quiz-per-img {
    overflow: visible;
  }
  #later-list {
    display: none;
  }
  .interest-top {
    margin: 10px auto;
  }
  .quiz-index {
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 899px) and (min-width: 600px) {
  body {
    min-width: auto;
  }
  .center {
    width: 600px;
  }
  /* .top-left .top-menu{
    display: none;
  }
  .top-left .top-menu:nth-child(-n+3) {
    display: none;
  } */

  /* .banner-quiz-info {
    width: 600px;
  } */

  /* .banner-quiz-left {
    width: 200px;
  } */
  /* .interest-center .interest-quiz-item:nth-child(n + 3) {
    display: none;
  } */
  .interest-top {
    padding: 0 5px;
  }
  .quiz-top .quiz-channel-ul {
    display: none;
  }
  .quiz-index-container .quiz-index .quiz-per-a {
    margin: 0 5px;
    width: 290px;
  }

  .quiz-index-container .quiz-per-img {
    width: 290px;
  }
  .user-mobile-container .right-setting-input input {
    max-width: 400px;
  }
  .fix-ipad .user-right-content {
    margin-left: 20px;
    width: fit-content;
  }
  .fix-ipad .right-setting-item {
    justify-content: space-between;
  }

  /* .column-main .quiz-list {
    display: grid;
    grid-template-columns:1fr 1fr;
  } */
}
@media only screen and (max-width: 599px) {
  .center {
    width: auto;
  }
  .quiz-top .quiz-channel-ul {
    display: none;
  }
  .banner-quiz-info {
    width: calc(100% - 70px);
  }
  .interest-top {
    padding: 0;
  }
  .interest-container {
    padding: 0 10px;
    width: 100vw;
    box-sizing: border-box;
  }

  .interest-quiz-item {
    width: calc(100% - 8px);
    margin-left: 5px;
  }

  .test-container {
    padding: 0 10px;
  }
  .scroll-container {
    margin-left: -5px;
  }

  .interest-modal {
    width: 500px;
  }
  .interest-choose {
    max-height: 400px;
    overflow: scroll;
  }
  .quiz-index-container .quiz-index .quiz-per-a {
    margin: 0 5px;
    width: 47vw;
    aspect-ratio: 1 / 1;
  }
  .quiz-index-container .quiz-per-img {
    width: 47vw;
  }

  .search-page-container {
    background: #f4f7ff;
  }
  .search-top {
    padding: 0 15px;
    height: 120px;
    background: #e7eefe;
  }
  .search-page-input {
    height: 40px;
  }
  .search-page-input input {
    font-size: 18px;
    line-height: 40px;
  }
  .search-page-input span {
    top: -5px;
    right: 5px;
  }
  .search-icon {
    width: 40px;
  }

  .no-result-container {
  }
  .no-result-img {
    width: 200px;
  }
  .no-result-title {
    font-size: 24px;
    line-height: 60px;
  }
  .no-result-text {
    font-size: 14px;
    line-height: 24px;
    width: 300px;
  }

  .related-quiz-list .quiz-per {
    max-width: none;
  }

  /* .column-main .quiz-list {
    display: grid;
    grid-template-columns: 1fr;
  } */

  .m-channel-banner .channel-title {
    font-weight: 400;
    font-size: 24px;
    color: #ffffff;
  }

  .m-channel-banner .quiz-title {
    font-size: 16px;
  }
  .m-channel-banner .quiz-per-info {
    scale: none;
  }

  .m-channel-banner .quiz-right .play-btn {
    width: 180px;
    height: 44px;
    font-size: 24px;
  }
  .channel-banner-container {
    height: 240px;
  }

  .pc-channel-title {
    display: none !important;
  }
  .m-channel-title {
    display: flex;
  }
  .category-top-conainer {
    height: 120px;
  }
  .category-top .category-title {
    height: 40px;
    line-height: 40px;
  }
  .category-top .div-space {
    height: 20px;
  }
  .category-top .space-title,
  .category-top .space-title2 {
    font-size: 20px;
  }
  .category-intro {
    font-size: 12px;
    padding: 0 10px;
  }
  .category-container .quiz-index .quiz-per-a {
    width: 96vw;
  }
  .category-show1-title {
    font-size: 16px;
  }
  .category-container .quiz-per-img {
    width: 96vw;
  }
  .category-show1-container {
    position: relative;
  }
  .category-show1-btns .btn-text {
    color: #ffffff;
  }
  .category-show1-btn {
    position: absolute;
    top: 50%;
    z-index: 3;
    background: none;
  }

  .btn-text {
    display: none !important;
  }
  .btn-svg {
    display: block;
  }
  .show1-btn1 {
    left: 5px;
  }
  .show1-btn2 {
    right: -5px;
  }
  .breadcrumb-ul {
    font-size: 16px;
  }
  .column-change {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .column-change div {
    font-size: 14px;
    margin: 5px;
  }
  .column-change .current-column {
    color: #333333;
  }
  .tag-div {
    font-size: 16px;
    height: 34px;
  }
  .column-top {
    min-height: 100px;
  }

  .related-quiz-list {
    display: grid;
    grid-template-columns: 1fr;
  }
  .related-quiz-list .quiz-per {
    margin: 5px 10px !important;
  }

  .exam-container-main {
    width: 96vw;
  }
  .exam-tag-container {
    display: block;
    max-width: 95%;
  }

  .exam-container .exam-img-div img {
    width: 100%;
    height: 200px;
  }
  .exam-container .exam-img-div {
    display: block;
    padding: 10px 0;
  }

  .exam-container .exam-info {
    position: relative;
    display: block;
    background: none;
    height: auto;
    color: #333333;
  }

  .exam-info-right .quiz-like {
    background: #e7eefe;
    font-size: 14px;
    margin-left: -10px;
    margin-bottom: -20px;
    scale: 0.8;
  }

  .exam-top-num {
    font-size: 12px;
  }

  .exam-container .author-seg,
  .exam-container .author-intro {
    display: block;
  }

  .exam-container .exam-info .author-img {
    width: 40px;
    height: 40px;
  }

  .exam-info-author .info-text {
    padding: 0;
    margin-left: 5px;
  }

  .author-name {
    font-size: 12px;
    font-weight: bold;
  }
  .small-font {
    font-size: 12px;
  }
  .exam-container .exam-title {
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
  }
  .exam-tag-text {
    font-size: 14px;
  }
  .exam-tag-div {
    font-size: 14px;
    height: 30px;
  }

  .exam-start-button {
    width: 80% !important;
    margin: 10px auto;
    font-size: 20px;
    height: 46px;
  }

  .pc-start-btn {
    display: none;
  }

  .mobile-start-btn {
    display: block;
  }

  .info-container .ad-left {
    display: none;
  }

  .mobile-info-ad {
    display: block;
  }
  .result-main .result-main-info .answer-info,
  .result-main .HQResultData__title,
  .result-main .subscription,
  .mobile-explanation {
    font-size: 12px;
  }

  .result-main .right-svg {
    width: 25px;
    height: 25px;
  }
  .result-main .wrong-svg {
    width: 23px;
    height: 23px;
  }
  .result-main .evaluate-text,
  .result-main .HQResultData__number {
    font-size: 24px;
  }
  .result-main .like-and-save {
    margin-bottom: 0;
  }
  .result-main .like-and-save .quiz-like {
    font-size: 14px;
    padding: 0 20px;
  }
  .result-main .HQResultScore__result {
    margin-bottom: 15px;
  }
  .result-main .evaluate-container {
    margin: 10px 0;
  }
  .question-bottom-img {
    margin: 0 auto;
  }
  .question-bottom-options {
    overflow: hidden;
    margin-bottom: 10px;
  }
  .result-option-container {
    height: 44px;
  }
  .result-main .anchor-text {
    font-size: 12px;
    margin: 10px auto;
    text-align: center;
  }

  .result-main .result-title,
  .result-main .result-answer-text,
  .result-main .option-precentage,
  .result-main .result-question-title {
    font-size: 14px;
  }
  .result-main .question-order-num {
    font-size: 16px;
  }

  .user-index .user-main-left {
    margin: 0;
  }
  .user-index .user-main-right {
    padding: 0;
    min-width: 100vw;
    min-height: 400px;
  }

  .user-right-list .mobile-search-list,
  #later-list {
    margin-top: 0 !important;
  }
  /* #later-list {
    display: flex;
    flex-direction: column;
  } */
  .fav-tag-div {
    margin: 0 auto;
  }
  .user-main .user-main-right .tag-list-container {
    width: 95vw;
    position: static;
    display: flex;
    justify-content: center;
    border-top: 4px solid #c9cfdd;
    margin: 0 auto;
  }
  .user-main .user-main-right .tag-div {
    margin-top: -4px;
  }
  #login-modal {
    width: 90vw;
    padding: 20px;
    min-height: 400px;
  }
  .login-modal input {
    width: 80vw;
    box-sizing: border-box;
  }
  .interest-modal-title {
    font-size: 20px;
    margin-bottom: 0;
  }
  .interest-modal-subtitle {
    margin: 10px;
  }

  .mobile-user-list .user-main-right,
  .mobile-user-list .user-main .user-main-right .tag-div {
    background: none;
  }

  .tag-detail .quiz-per-a,
  .column-container .quiz-per-a {
    max-width: 100%;
  }
  #fav-tag-container {
    text-align: center;
  }

  #fav-tag-list {
    width: 95vw;
    text-align: left;
    margin-top: 0;
  }
}

@media only screen and (max-width: 499px) {
  .interest-center .quiz-per {
    aspect-ratio: inherit;
  }
  .interest-container .quiz-index {
    display: grid;
    grid-template-columns: 1fr;
  }
  .mobile-interest-title .interest-title {
    font-size: 20px;
  }

  .quiz-index-container .quiz-index .quiz-per-a {
    margin: 0 5px;
    width: 97vw;
    aspect-ratio: inherit;
  }
  .quiz-index-container .quiz-per-img {
    width: 97vw;
  }
  .interest-modal {
    width: 90vw;
  }
  .detail-main .option-label {
    padding: 0 60px;
    font-size: 16px;
    height: auto;
    min-height: 36px;
    max-height: 60px;
  }
  .op-right-svg,
  .op-wrong-svg {
    left: 20px;
  }
  .op-right .option-text,
  .op-wrong .option-text {
    /* margin-left: 40px; */
  }
  .user-mobile-container .right-setting-input input {
    width: 40vw;
  }
  .mobile-bottom-list-ul {
    display: grid;
  }
  .today-container {
    min-height: 550px !important;
  }
  .result-info-flag {
    scale: 0.7;
    transform: translateX(-22%);
  }
}

@keyframes showMenu {
  0% {
    left: -150px;
  }

  100% {
    left: 0;
  }
}

@keyframes hideMenu {
  0% {
    left: 0;
  }

  100% {
    left: -150px;
  }
}

.top-menu-container {
  /* width: 100%; */
  overflow: scroll;
  background: #f4f7ff;
  z-index: 15;
  position: fixed;
  top: 50px;
  left: -150px;
  width: 220px;
  height: 100%;
  transition: all 0.2s;
  animation: hideMenu 0.2s linear;
  opacity: 0;
  pointer-events: none;
}

.top-menu-container::-webkit-scrollbar {
  width: 0;
  display: none;
}

.hideMenuDiv {
  cursor: pointer;
  height: 60px;
  padding-left: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.showMenu {
  left: 0;
  animation: showMenu 0.2s linear;
  opacity: 1;
  pointer-events: all;
}

#PopMenuDiv {
  text-align: left;
  width: 100%;
}

#PopMeneUL {
  display: flex;
  flex-direction: column;
}

#PopMeneUL li {
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  overflow: hidden;
  /* background: var(--top-menu-bg-color); */
  /* color: var(--all-text-color); */
  box-sizing: border-box;
}

#PopMeneUL li.selected {
  /* background: var(--highlight-color) !important; */
}

#PopMeneUL li.selected a {
  /* color: var(--all-text-color); */
}

#PopMeneUL li a {
  text-decoration: none;
  /* color: var(--all-text-color); */
  user-select: none;
  width: 100%;
  display: block;
  padding-left: 30px;
  box-sizing: border-box;
  color: #9ca2a9;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 18px;
  font-weight: bold;
}

@media (hover: hover) {
  #PopMeneUL li:hover {
    background-color: #fd613b1a;
  }
}

#PopMeneUL li img {
  padding: 0 5px 0 0;
}

.menu-mask-div {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #00000066;
  top: 50px;
  left: 0;
  z-index: 13;
  display: none;
}
.mobile-menu-share {
  position: absolute;
  bottom: 120px;
  left: 10px;
}
.mobile-share-text {
  color: #adadad;
  font-size: 14px;
  padding-left: 5px;
}
.mobile-menu-svg {
  width: 25px;
  height: 25px;
  fill: #9ca2a9;
  margin-right: 10px;
}

.mobile-menu-svg path {
  fill: #9ca2a9;
}
.mSelected {
  padding-left: 26px !important;
  color: #54b282 !important;
  border-left: 4px solid #54b282;
}

.mSelected svg path {
  fill: #54b282 !important;
}

.right-setting-input {
  position: relative;
}
.show-hide-password {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.user-mobile-main .show-hide-password {
  top: 7px;
  right: 7px;
}

.show-hide-password svg {
  pointer-events: none;
  user-select: none;
  fill: #9ca2a9;
}

.show-password .eye-off {
  display: none;
}

.hide-password .eye-on {
  display: none;
}

/* 隐藏广告区域 */

.page-left-ad {
  display: none !important;
}

.ad-left {
  display: none !important;
}

.ad-right .ad-right-top2 {
  display: none !important;
}

.quiz-options {
  padding-top: 0 !important;
}

.ad-left-quiz {
  display: none !important;
}

.mobile-info-ad,
.mobile-detail-ad,
.mobile-result-ad {
  display: none !important;
}

.result-info-ad {
  display: none !important;
}

.result-info-left {
  width: auto;
}

.user-main {
  /* align-items: center; */
  justify-content: center;
}
.user-left-ad {
  display: none !important;
}