@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

html {
  font-size: 46.875px;
  height: 100%;
  background: #f5f5f5;
}

body {
  height: 100%;
  font-family: Helvetica, PingFangSC-Regular, "Droid Sans", Arial, sans-serif;
  font-size: 0.3413333333rem;
  line-height: 1;
  color: #232326;
  overflow-x: hidden;
}

ul, li {
  list-style: none;
}

a {
  color: #232326;
  text-decoration: none;
  vertical-align: middle;
}

i, em {
  font-style: normal;
}

span, img {
  vertical-align: middle;
}

.clear {
  clear: both;
}

.p:before, .p:after {
  content: "";
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

#app {
  height: 100%;
}

#app .tip {
  display: none;
  position: absolute;
  bottom: -3.2rem;
  width: 100%;
}
#app .tip em {
  display: block;
  font-size: 0.5973333333rem;
  color: #fff;
  width: 8.448rem;
  height: 1.3653333333rem;
  line-height: 1.3653333333rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.128rem;
  margin: 0 auto;
  text-align: center;
}

.login {
  background: #fff;
  height: 100%;
  position: relative;
}
.login .login-header {
  font-size: 1.024rem;
  color: #000;
  padding: 1.5786666667rem 0 0.8533333333rem;
  text-align: center;
}
.login .login-img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.login .login-body {
  width: 14.72rem;
  margin: 0 auto;
}
.login .login-body > div {
  background: #fff;
  -webkit-border-radius: 0.1706666667rem;
  -moz-border-radius: 0.1706666667rem;
  border-radius: 0.384rem;
  overflow: hidden;
  padding: 0 0.768rem;
  border: 1px solid #ddd;
}
.login .login-body > div p {
  height: 2.0906666667rem;
  line-height: 2.0906666667rem;
  border-bottom: 1px solid #eee;
  position: relative;
}
.login .login-body > div p:last-child {
  border-bottom: none;
}
.login .login-body > div p img {
  width: 0.8533333333rem;
}
.login .login-body > div p img.fr {
  margin-right: 0.2133333333rem;
  width: 3.328rem;
}
.login .login-body > div p input {
  border: none;
  color: #333;
  line-height: 2.048rem;
  background: transparent;
  font-size: 0.5973333333rem;
  outline: none;
  margin-left: 0.64rem;
}
.login .login-body > div p input::-webkit-input-placeholder {
  color: #bbb;
}
.login .login-body > div p .getCode {
  color: #12c8bb;
  border: 1px solid #12c8bb;
  width: 3.328rem;
  height: 1.1093333333rem;
  line-height: 1.1093333333rem;
  border-radius: 1.1093333333rem;
  text-align: center;
  font-size: 0.512rem;
  margin-top: 0.4693333333rem;
}
.login .login-body .submit {
  display: block;
  width: 100%;
  font-size: 0.5973333333rem;
  text-align: center;
  background: #12c8bb;
  color: #fff;
  height: 1.7066666667rem;
  line-height: 1.7066666667rem;
  border-radius: 1.7066666667rem;
  margin-top: 0.64rem;
}
.login .newPwd {
  display: none;
}
.login .not_login {
  width: 14.72rem;
  margin: 0.4266666667rem auto;
}
.login .not_login a {
  font-size: 0.512rem;
  float: right;
}
.login .verify {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
}
.login .verify .verifyBox {
  width: 10.24rem;
  height: 7.2533333333rem;
  margin: 8.5333333333rem auto;
  background: #fff;
  -webkit-border-radius: 0.2133333333rem;
  -moz-border-radius: 0.2133333333rem;
  border-radius: 0.2133333333rem;
  text-align: center;
}
.login .verify .verifyBox h1 {
  font-size: 0.6826666667rem;
  line-height: 2.1333333333rem;
}
.login .verify .verifyBox input {
  width: 4.6933333333rem;
  height: 1.408rem;
  line-height: 1.408rem;
  border-radius: 0.2133333333rem;
  border: 0.0213333333rem solid #ddd;
  padding-left: 0.2133333333rem;
  float: left;
  margin-left: 1.024rem;
  outline: none;
  margin-bottom: 0.64rem;
}
.login .verify .verifyBox input::-webkit-input-placeholder {
  color: #bbb;
}
.login .verify .verifyBox img {
  float: right;
  height: 1.3226666667rem;
  margin-right: 1.024rem;
  margin-top: 1px;
}
.login .verify .verifyBox hr {
  border: none;
  height: 0.0213333333rem;
  width: 90%;
  background: #ddd;
  margin: 0 auto;
}
.login .verify .verifyBox .btn {
  width: 8.5333333333rem;
  height: 1.4933333333rem;
  margin: 0.64rem auto;
}
.login .verify .verifyBox .btn a {
  display: inline-block;
  font-size: 0.64rem;
  color: #999;
  text-align: center;
  width: 3.84rem;
  height: 1.4933333333rem;
  line-height: 1.4933333333rem;
  border-radius: 0.2133333333rem;
  border: 1px solid #999;
}
.login .verify .verifyBox .btn a.fr {
  background: #12c8bb;
  color: #fff;
  border: none;
}

.main {
  height: 100%;
  background: #f5f5f5;
  display: none;
}
.main .header {
  height: 1.8773333333rem;
  line-height: 1.8773333333rem;
  text-align: center;
  color: #333;
  font-size: 0.6826666667rem;
  background: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.main .header .back {
  position: absolute;
  left: 0;
  height: 0.8533333333rem;
  margin: 0.512rem 0.768rem;
}
.main .body {
  width: 14.72rem;
  margin: 0 auto;
  padding-top: 1.8773333333rem;
  padding-bottom: 2.7733333333rem;
}

.teachMode a:nth-child(odd), .testMode a:nth-child(odd) {
  float: left;
  margin-right: 0.64rem;
}
.teachMode p, .testMode p {
  width: 7.04rem;
  margin-top: 0.64rem;
  position: relative;
  border-radius: 0.2133333333rem;
  overflow: hidden;
}
.teachMode p img, .testMode p img {
  width: 100%;
  height: 5.9733333333rem;
}
.teachMode p span, .testMode p span {
  width: 100%;
  line-height: 0.64rem;
  height: 0.64rem;
  text-align: left;
  font-size: 0.64rem;
  color: #000;
  display: block;
  margin: 0.4266666667rem 0 0.2133333333rem;
}

.userMode .top {
  width: 100%;
  height: 6.9973333333rem;
  background: url("../img/user.jpg") 50% 50% no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.userMode .top .head {
  position: absolute;
  bottom: 1.6rem;
  left: 0.8533333333rem;
}
.userMode .top .head p {
  width: 2.1333333333rem;
  height: 2.1333333333rem;
  -webkit-border-radius: 1.92rem;
  -moz-border-radius: 1.92rem;
  border-radius: 1.92rem;
  display: inline-block;
  vertical-align: middle;
}
.userMode .top .head p img {
  width: 100%;
}
.userMode .top .head div {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  font-size: 0.64rem;
  margin-left: 0.64rem;
}
.userMode .top .head div a {
  color: #fff;
  display: block;
  line-height: 0.8533333333rem;
}
.userMode .top .head div span {
  font-size: 0.512rem;
  margin-top: 0.4266666667rem;
  display: inline-block;
}
.userMode .body {
  width: 100%;
  padding: 0;
}
.userMode .body li.userMode {
  width: 100%;
  height: 2.0906666667rem;
  line-height: 2.0906666667rem;
  border-bottom: 1px solid #eee;
  background: #fff;
  padding: 0 0.7253333333rem;
  color: #333;
  font-size: 0.5973333333rem;
}
.userMode .body li.userMode a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.userMode .body li.userMode a img {
  width: 0.8533333333rem;
  height: 0.8533333333rem;
  margin-right: 0.5973333333rem;
}
.userMode .body li.userMode:last-child {
  border: none;
}
.userMode .body .logOut {
  margin-top: 0.4266666667rem;
}

.marquee {
  position: absolute;
  overflow: hidden;
  height: 1.4506666667rem;
  line-height: 1.4506666667rem;
  width: 100%;
  white-space: nowrap;
  z-index: 800;
  color: white;
  text-align: right;
  padding-right: 0.4266666667rem;
  letter-spacing: 1px;
  font-family: 黑体;
  font-size: 0.64rem;
  background: rgba(0, 0, 0, 0.3);
}

.main.select {
  display: block;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 2.1333333333rem;
  background: #fff;
  z-index: 9;
  padding: 0 0.64rem;
}
.footer dl {
  float: left;
  width: 25%;
  text-align: center;
  font-size: 0.5973333333rem;
  color: #666;
}
.footer dl dt {
  height: 0.8533333333rem;
  margin-top: 0.2133333333rem;
  margin-bottom: 0.1493333333rem;
}
.footer dl dt img {
  height: 0.8533333333rem;
}
.footer dl dt img.selected {
  display: none;
}
.footer dl dt img.unselected {
  display: inline-block;
}
.footer dl.selected {
  color: #12c8bb;
}
.footer dl.selected img.selected {
  display: inline-block;
}
.footer dl.selected img.unselected {
  display: none;
}

.swipslider {
  position: relative;
  overflow: hidden;
  display: block;
  user-select: none;
  height: 8.5333333333rem;
  margin-top: 0.64rem;
  padding-top: 0 !important;
  border-radius: 0.2133333333rem;
}
.swipslider .sw-slides {
  display: block;
  list-style: none;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  font-size: 0;
  transform: translateX(0);
  position: absolute;
  bottom: 0;
}
.swipslider .sw-slide {
  width: 100%;
  height: 7.68rem;
  margin: auto;
  display: inline-block;
  position: relative;
  border-radius: 0.2133333333rem;
  overflow: hidden;
}
.swipslider .sw-slide > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 7.68rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  user-select: none;
  border-radius: 0.2133333333rem;
}
.swipslider .sw-slide > div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.5973333333rem;
  padding: 0.4266666667rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}
.swipslider .sw-slide > div span {
  display: block;
  white-space: normal;
  line-height: 0.8533333333rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.swipslider .sw-slide .sw-content {
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  font-size: 0.5973333333rem;
}

.sw-bullet {
  position: absolute;
  bottom: 2%;
  list-style: none;
  display: block;
  width: 100%;
  text-align: center;
  margin: 0;
}
.sw-bullet li {
  width: 0.2133333333rem;
  height: 0.2133333333rem;
  background-color: rgba(28, 157, 211, 0.2);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.sw-bullet li.active {
  background-color: #12c8bb;
  box-shadow: 0 0 2px rgba(28, 157, 211, 0.2);
}
.sw-bullet li:not(:last-child) {
  margin-right: 0.5973333333rem;
}

.query {
  display: block;
}
.query .btnClose {
  height: 2.56rem;
}
.query .queryList {
  overflow: hidden;
}
.query .queryList p {
  background: #12c8bb;
  height: 1.92rem;
  line-height: 1.92rem;
  border-radius: 0.2133333333rem;
  color: #fff;
  margin-top: 0.64rem;
  font-size: 0.5973333333rem;
  padding: 0 0.8106666667rem;
}
.query .queryList p span {
  float: right;
}
.query .queryList p span em {
  display: inline-block;
  width: 0px;
  height: 0.2133333333rem;
  vertical-align: middle;
  border: 0.2133333333rem solid;
  border-color: #fff transparent transparent transparent;
  margin-left: 0.4693333333rem;
}
.query li {
  width: 14.464rem;
  height: 1.664rem;
  line-height: 1.664rem;
  border-radius: 0.0853333333rem;
  margin: 0.0426666667rem auto 0;
  background: rgba(18, 200, 187, 0.1);
  color: #666;
  font-size: 0.5546666667rem;
  padding: 0 0.7253333333rem;
}
.query li span {
  float: right;
}

.detailTeach {
  display: block;
  overflow: hidden;
}
.detailTeach .body {
  width: 100%;
  padding-bottom: 0;
}
.detailTeach .body .vrImg {
  width: 100%;
}
.detailTeach .body .viewQ {
  position: absolute;
  right: 1.7066666667rem;
  top: 16rem;
  width: 1.7066666667rem;
  height: 1.7066666667rem;
}
@media screen and (min-width: 768px) {
  .detailTeach .body .viewQ {
    top: 19.2rem;
    right: 2.56rem;
  }
}
.detailTeach .body .rightIcon {
  position: fixed;
  top: 2.6453333333rem;
  right: 0.768rem;
}
.detailTeach .body .rightIcon img {
  width: 1.024rem;
  margin-top: 1.024rem;
}
.detailTeach .body .vrList {
  position: fixed;
  top: 1.8773333333rem;
  left: 0;
  width: 3.584rem;
  height: 23.0826666667rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.1706666667rem 0.256rem;
}
.detailTeach .body .vrList ul {
  width: 100%;
  max-height: 21.76rem;
  overflow-y: scroll;
}
.detailTeach .body .vrList ul::-webkit-scrollbar {
  display: none;
}
.detailTeach .body .vrList ul li {
  margin-top: 0.2133333333rem;
  overflow: hidden;
  position: relative;
  border: 0.0426666667rem solid #fff;
}
.detailTeach .body .vrList ul li img {
  width: 2.9866666667rem;
}
.detailTeach .body .vrList ul li span {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0.8533333333rem;
  line-height: 0.8533333333rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detailTeach .body .vrList ul li span.score {
  top: 0;
  width: auto;
  right: 0;
  padding: 0 0.2133333333rem;
  background: #ffd11b;
}
.detailTeach .body .vrList ul li.select {
  border-color: #ebbd1c;
}
.detailTeach .body .vrList img.toDown {
  width: 0.8533333333rem;
  position: absolute;
  bottom: 0.128rem;
  left: 1.3653333333rem;
}
.detailTeach .body .iconList {
  position: fixed;
  bottom: 0.8533333333rem;
  left: 1.2373333333rem;
}
.detailTeach .body .iconList li {
  float: left;
  margin-right: 1.28rem;
  color: #fff;
  text-align: center;
}
.detailTeach .body .iconList li img {
  width: 1.024rem;
}
.detailTeach .body .iconList li dt {
  position: relative;
}
.detailTeach .body .iconList li dt .floatFlower {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.28rem;
}
.detailTeach .body .detail {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
}
.detailTeach .body .detail .close {
  position: absolute;
  right: 0.768rem;
  top: 2.56rem;
}
.detailTeach .body .detail .close img {
  width: 0.8533333333rem;
}
.detailTeach .body .detail .detailBox {
  width: 14.6346666667rem;
  margin: 3.968rem auto 0;
  overflow: scroll;
  height: 22.0586666667rem;
}
.detailTeach .body .detail .detailBox p.img {
  width: 100%;
  height: 8.5333333333rem;
  background: #12c8bb;
  border-radius: 0.2133333333rem;
  overflow: hidden;
}
.detailTeach .body .detail .detailBox p.img img {
  width: 100%;
}
.detailTeach .body .detail .detailBox .bad {
  display: block;
  margin-top: 0.8533333333rem;
  color: #fff;
  font-size: 0.5973333333rem;
  line-height: 1.024rem;
  text-indent: 1.3653333333rem;
  padding: 0.4266666667rem;
  background: #f5f5f5;
}
.detailTeach .body .detail .detailBox .bad img, .detailTeach .body .detail .detailBox .bad video {
  display: block;
  max-width: 100%;
}

.detailTest .title {
  color: #fff;
  font-size: 0.64rem;
  margin-bottom: 0.8533333333rem;
}
.detailTest .title p {
  font-size: 0.5546666667rem;
  margin-top: 0.64rem;
}
.detailTest .answer p.select, .detailTest .correct p.selected {
  border-color: #12c8bb;
  color: #12c8bb;
}
.detailTest .answer p, .detailTest .correct p {
  position: relative;
  width: 13.0133333333rem;
  height: 1.28rem;
  line-height: 1.28rem;
  background: transparent;
  border: 0.0426666667rem solid #fff;
  color: #fff;
  padding-left: 0.64rem;
  border-radius: 0.2133333333rem;
  margin-top: 0.64rem;
  font-size: 0.5546666667rem;
}
.detailTest .answer p i, .detailTest .correct p i {
  position: absolute;
  right: -0.8533333333rem;
  vertical-align: middle;
}
.detailTest .answer p i img, .detailTest .correct p i img {
  width: 0.64rem;
}
.detailTest .answer a, .detailTest .correct a {
  display: block;
  width: 13.0133333333rem;
  height: 1.536rem;
  line-height: 1.536rem;
  background: #12c8bb;
  color: #fff;
  text-align: center;
  margin-top: 9.1733333333rem;
  font-size: 0.5546666667rem;
  border-radius: 0.2133333333rem;
}
.detailTest .answer .continue, .detailTest .correct .continue {
  display: none;
}
.detailTest .answer p.yes, .detailTest .correct p.yes {
  border-color: #12c8bb;
  color: #12c8bb;
}
.detailTest .answer p.no, .detailTest .correct p.no {
  border-color: #ff4444;
  color: #ff4444;
}
.detailTest .correct {
  display: none;
}
.detailTest .correct p {
  line-height: 0.768rem;
  height: auto;
  padding: 0.3413333333rem 0.64rem;
}
.detailTest .correct a {
  margin-top: 1.4506666667rem;
}
.detailTest #scroll_div {
  position: fixed;
  top: 1.8773333333rem;
  background: rgba(0, 0, 0, 0.7);
  height: 1.28rem;
  line-height: 1.28rem;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 0.5973333333rem;
  z-index: 10;
}
.detailTest #scroll_div #scroll_begin, .detailTest #scroll_div #scroll_end {
  display: inline;
}
.detailTest .checkout {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
}
.detailTest .checkout .checkbox {
  width: 10.24rem;
  height: 6.72rem;
  margin: 8.5333333333rem auto;
  background: #fff;
  -webkit-border-radius: 0.2133333333rem;
  -moz-border-radius: 0.2133333333rem;
  border-radius: 0.2133333333rem;
  padding-top: 1.28rem;
  text-align: center;
}
.detailTest .checkout .checkbox .title {
  font-size: 0.64rem;
  color: #333;
}
.detailTest .checkout .checkbox .title span {
  display: block;
  color: #999;
  font-size: 0.512rem;
  margin: 0.512rem 0 1.024rem;
}
.detailTest .checkout .checkbox hr {
  border: none;
  height: 0.0213333333rem;
  width: 90%;
  background: #ddd;
  margin: 0 auto;
}
.detailTest .checkout .checkbox .btn {
  width: 8.5333333333rem;
  height: 1.4933333333rem;
  margin: 0.64rem auto;
}
.detailTest .checkout .checkbox .btn a {
  display: inline-block;
  font-size: 0.64rem;
  color: #999;
  text-align: center;
  width: 3.84rem;
  height: 1.4933333333rem;
  line-height: 1.4933333333rem;
  border-radius: 0.2133333333rem;
  border: 1px solid #999;
}
.detailTest .checkout .checkbox .btn a.fr {
  background: #12c8bb;
  color: #fff;
  border: none;
}
.detailTest .testOver .checkbox {
  height: 8.5333333333rem;
}
.detailTest .testOver .checkbox .title .result {
  width: 80%;
  margin: 0.3413333333rem auto 0;
  line-height: 0.8533333333rem;
  text-align: left;
}
.detailTest .testOver .checkbox .btn a {
  width: 90%;
  margin: 0 auto;
  background: #12c8bb;
  color: #fff;
  border: none;
}

.layer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.layer .layerbox {
  width: 11.9466666667rem;
  height: 8.5333333333rem;
  background: #fff;
  margin: 50% auto;
  border-radius: 0.2133333333rem;
  text-align: center;
  padding: 1.28rem;
}
.layer .layerbox p {
  font-size: 0;
  margin-bottom: 0.8533333333rem;
}
.layer .layerbox p span {
  display: inline-block;
  width: 2.1333333333rem;
  text-align: left;
  font-size: 0.5973333333rem;
}
.layer .layerbox p input, .layer .layerbox p select {
  width: 7.2533333333rem;
  height: 1.3653333333rem;
  line-height: 1.3653333333rem;
  border-radius: 0.1706666667rem;
  border: 1px solid #ccc;
  background: transparent;
  font-size: 0.5973333333rem;
  vertical-align: middle;
  outline: none;
  padding: 0 5%;
}
.layer .layerbox a {
  display: block;
  height: 1.3653333333rem;
  line-height: 1.3653333333rem;
  background: #12c8bb;
  color: #fff;
  width: 7.2533333333rem;
  margin: 0 auto;
  text-align: center;
  border-radius: 0.1706666667rem;
}

.progress {
  display: block;
}
.progress .progressList {
  margin-top: 0.64rem;
  width: 100%;
  height: 4.8213333333rem;
  background: #fff;
  -webkit-border-radius: 0.2133333333rem;
  -moz-border-radius: 0.2133333333rem;
  border-radius: 0.2133333333rem;
  padding: 0.64rem 0;
  position: relative;
}
.progress .progressList p, .progress .progressList span {
  margin: 0 1.1946666667rem 0.4266666667rem;
  font-size: 0.5973333333rem;
  color: #333;
}
.progress .progressList em {
  display: block;
  width: 13.0133333333rem;
  height: 0.4266666667rem;
  margin: 0 auto 1.024rem;
  -webkit-border-radius: 0.4266666667rem;
  -moz-border-radius: 0.4266666667rem;
  border-radius: 0.4266666667rem;
  position: relative;
  overflow: hidden;
}
.progress .progressList em i {
  position: absolute;
  height: 100%;
  border-radius: 0.4266666667rem;
  background: rgba(18, 200, 187, 0.5);
}
.progress .progressList em.unfinished {
  background: rgba(18, 200, 187, 0.1);
}
.progress .progressList em.finished {
  background: #15af73;
}
.progress .progressList span {
  margin: 0 0 0 1.1946666667rem;
}
.progress .progressList a {
  position: absolute;
  right: 0.8533333333rem;
  bottom: 0.64rem;
  width: 4.2666666667rem;
  height: 1.408rem;
  line-height: 1.408rem;
  -webkit-border-radius: 1.408rem;
  -moz-border-radius: 66px;
  border-radius: 66px;
  color: #f5f5f5;
  font-size: 0.5973333333rem;
  background: #12c8bb;
  text-align: center;
}
.progress .progressList a.finished {
  background: #15af73;
}

.upOrDown {
  position: fixed;
  top: 2.304rem;
  right: 0.64rem;
  background: #12c8bb;
  width: 2.56rem;
  height: 0.9386666667rem;
  line-height: 0.9386666667rem;
  text-align: center;
  -webkit-border-radius: 0.896rem;
  -moz-border-radius: 0.896rem;
  border-radius: 0.896rem;
}
.upOrDown img {
  width: 0.4693333333rem;
}

.rankTable {
  background: #fff;
  border-radius: 0.2133333333rem;
  margin: 1.7493333333rem 0 0;
  width: 100%;
  font-size: 0.512rem;
  padding: 0 0.768rem 3.84rem;
  text-align: center;
  height: 21.9733333333rem;
  overflow: scroll;
}
.rankTable hr {
  border: none;
  background: #ddd;
  height: 1px;
  width: 13.8666666667rem;
  margin-left: -0.3413333333rem;
}
.rankTable li {
  float: left;
  line-height: 1.4506666667rem;
  font-weight: normal;
  width: 24.7%;
  margin-top: 0.1493333333rem;
}
.rankTable li.wall {
  width: 1px;
  background: #ddd;
  height: 0.768rem;
  position: relative;
  top: 0.2986666667rem;
}
.rankTable table {
  width: 100%;
}
.rankTable table th:first-child {
  border-left: none;
}
.rankTable table td {
  width: 25%;
  line-height: 1.28rem;
  border-bottom: 0.0213333333rem solid #ddd;
}
.rankTable table tr.detail {
  display: none;
}
.rankTable table tr.detail td {
  height: 1.4506666667rem;
  line-height: 1.4506666667rem;
  background: #ddd;
  padding: 0 1.1093333333rem;
}
.rankTable table tr.detail td span {
  margin-left: 1.7066666667rem;
}
@media screen and (max-width: 320px) {
  .rankTable table tr.detail td {
    padding: 0 0.5973333333rem;
  }
  .rankTable table tr.detail td span {
    margin-left: 0.8533333333rem;
  }
}

.collect {
  display: block;
}
.collect .body {
  width: 15.0613333333rem;
}
.collect .body .collectList > div {
  width: 100%;
  height: 5.12rem;
  background: #fff;
  border-radius: 0.1706666667rem;
  margin-top: 0.512rem;
}
.collect .body .collectList > div .img {
  float: left;
  width: 3.84rem;
  height: 3.84rem;
  margin: 0.64rem;
  background: #0c93e9;
}
.collect .body .collectList > div .detail {
  margin-left: 5.12rem;
  height: 100%;
  padding: 0.64rem 0.64rem 0.64rem 0.256rem;
}
.collect .body .collectList > div .detail .title {
  color: #333;
  font-size: 0.64rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.collect .body .collectList > div .detail .icon {
  margin: 0.5973333333rem 0 0.8106666667rem;
}
.collect .body .collectList > div .detail .icon img {
  width: 0.5546666667rem;
}
.collect .body .collectList > div .detail .icon span {
  font-size: 0.512rem;
  color: #999;
}
.collect .body .collectList > div .detail .icon span.left {
  margin-right: 0.896rem;
}
.collect .body .collectList > div .detail .button > a {
  display: inline-block;
  width: 3.328rem;
  height: 1.152rem;
  line-height: 1.152rem;
  color: #12c8bb;
  text-align: center;
  border: 1px solid #12c8bb;
  -webkit-border-radius: 1.152rem;
  -moz-border-radius: 1.152rem;
  border-radius: 1.152rem;
}
.collect .body .collectList > div .detail .button > a.cancel {
  color: #999;
  border-color: #999;
  margin-left: 1.28rem;
}

.longPic img {
  width: 100%;
}
.longPic p {
  position: relative;
}
.longPic p a {
  position: absolute;
  width: 6.4rem;
  height: 7.68rem;
  top: 5.9733333333rem;
  right: 0;
}

.bottomIcon {
  position: fixed;
  bottom: 0.8533333333rem;
  right: 20%;
  color: #991010;
}
.bottomIcon dl {
  display: inline-block;
  text-align: center;
  margin-right: 0.8533333333rem;
  font-size: 0.512rem;
}
.bottomIcon dl img {
  width: 1.28rem;
}
.bottomIcon dl:last-child {
  margin-right: 0;
}
.bottomIcon .floatFlower {
  position: absolute;
  bottom: 0.64rem;
  left: 0.64rem;
  width: 1.28rem;
}

.comment {
  background-color: rgba(0, 0, 0, 0.95);
  width: 100%;
  height: 21.3333333333rem;
  position: fixed;
  bottom: -1200px;
  border-radius: 10px;
  z-index: 2;
}
.comment > a > img {
  width: 0.64rem;
  position: absolute;
  right: 0.4266666667rem;
  top: 0.4266666667rem;
}
.comment p.title {
  color: #fff;
  text-align: center;
  line-height: 1.7066666667rem;
  font-size: 0.5973333333rem;
}
.comment .commentContnt {
  padding: 5%;
  color: #fff;
  max-height: 15.7866666667rem;
  overflow-y: scroll;
}
.comment .commentContnt li {
  position: relative;
  margin-bottom: 0.8533333333rem;
}
.comment .commentContnt li img.head {
  width: 1.7066666667rem;
  height: 1.7066666667rem;
  border-radius: 50%;
  float: left;
}
.comment .commentContnt li span.name {
  font-size: 0.512rem;
  float: left;
  margin: 0.2133333333rem;
  opacity: 0.7;
  width: 80%;
}
.comment .commentContnt li > div.box {
  width: 80%;
  float: left;
}
.comment .commentContnt li > div.box p.word {
  float: left;
  margin: 0.2133333333rem;
  font-size: 0.5973333333rem;
}
.comment .commentContnt li > div.box span.time {
  float: left;
  margin: 0.2133333333rem;
  font-size: 0.512rem;
  opacity: 0.7;
  line-height: 0.6826666667rem;
}
.comment .commentContnt li dl {
  position: absolute;
  right: 0;
  top: 0.2133333333rem;
  text-align: center;
}
.comment .commentContnt li dl img.heart {
  width: 0.8533333333rem;
}
.comment .commentContnt li dl.good {
  color: #ef2e2e;
}
.comment .commentInput {
  position: absolute;
  bottom: 0.4266666667rem;
  background: #000;
  height: 1.7066666667rem;
  width: 100%;
}
.comment .commentInput input {
  font-size: 0.5973333333rem;
  border: none;
  outline: none;
  background: transparent;
  height: 1.7066666667rem;
  line-height: 1.7066666667rem;
  width: 80%;
  color: #fff;
  padding: 0 0.64rem;
}
.comment .commentInput a {
  background: #991010;
  color: #fff;
  padding: 0.2986666667rem 0.64rem;
  border-radius: 0.2133333333rem;
}

.sharePoster {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 3;
}
.sharePoster img.pic {
  width: 80%;
  margin: 20% 10% 10%;
}
.sharePoster img.close {
  position: absolute;
  top: 0.8533333333rem;
  right: 0.8533333333rem;
  width: 0.8533333333rem;
}
.sharePoster a {
  display: block;
  background: #991010;
  color: #fff;
  height: 1.7066666667rem;
  line-height: 1.7066666667rem;
  border-radius: 1.7066666667rem;
  text-align: center;
  width: 60%;
  margin: 0 auto;
  font-size: 0.5973333333rem;
}

/*# sourceMappingURL=style.css.map */