.view{
  height: 100%;
  height: 100vh;
  background: #fff;
}
.banner{
  height: 2.96rem;
}
.content{
  height: 91%;
  height: calc(100vh - 1.3rem);
  overflow-y: auto;
}
.video-playbox{
  margin: .32rem;
}
.title{
  padding-left: .32rem;
  position: relative;
  margin: .32rem 0 .08rem;
}
.title h3{
  font-size: .4rem;
  color:rgba(51,51,51,1);
  line-height: .56rem;
  font-weight: bold;
}
.title:before{
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: .08rem;
  height: .56rem;
  background:linear-gradient(135deg,rgba(78,198,255,1) 0%,rgba(35,130,255,1) 100%);
  border-radius:0px .2rem .2rem 0px;
}
.btn{
  margin: auto;
  width: 6.86rem;
  height: .88rem;
  background: linear-gradient(135deg,rgba(78,198,255,1) 0%,rgba(35,130,255,1) 100%);
  border-radius: .16rem;
  font-size: .36rem;
  font-weight: bold;
  color:#fff;
  line-height: .88rem;
  text-align: center;
}
.test-box{
  padding: 0 .32rem;
}
.test-box h4{
  margin: .32rem 0;
  font-size: .32rem;
  color:rgba(51,51,51,1);
  line-height: .44rem;
}
.test-box li{
  margin-bottom: .16rem;
  padding: .22rem .48rem;
  width: 100%;
  min-height: .88rem;
  font-size: .32rem;
  color:rgba(51,51,51,1);
  line-height: .44rem;
  background:rgba(255,255,255,1);
  border-radius: .44rem;
  border: .02rem solid rgba(230,230,230,1);
  box-sizing: border-box;
}
.test-box li.active{
  color:rgba(51,156,255,1);
  background:rgba(51,156,255,0.2);
  border-color:rgba(51,156,255,1);
}
.btn-grooup{
  justify-content: flex-end;
  margin: .32rem -.15rem;
}
.btn-grooup .btn{
  margin: 0 .15rem;
  /* width: 3.28rem; */
  border-radius: .44rem;
}
.table-box{
  padding: 0 .32rem;
}
.table-box .table-title{
  font-size: .32rem;
  color:rgba(51,51,51,1);
  line-height: .44rem;
  text-align: center;
}
.table-box .tip{
  margin: .04rem 0 .12rem;
  display: block;
  font-size: .20rem;
  color:rgba(147,147,147,1);
  line-height: .28rem;
  text-align: right;
}
.table-box .table{
  width: 100%;
  text-align: center;
  line-height: .66rem;
  font-size: .24rem;
  color:rgba(51,51,51,1);
  border: solid .02rem #C8DCEE;
  border-right: 0;
}
.table-box .table .header{
  background: rgba(51,156,255,0.2);
}
.table-box .table th{
  border-right: solid .02rem #C8DCEE;
}
.table-box .table td{
  border-top: solid .02rem #C8DCEE;
  border-right: solid .02rem #C8DCEE;
}
.table-box .table .finish{
  color: #10C56D;
}
.table-box .table .no-finish{
  color: #FF6F55;
}
.footer{
  max-width: 750px;
  position: fixed;
  bottom: 0;
  width: 100%;
  align-items: center;
  background: #fff;
  text-align: center;
  justify-content: space-between;
  border-top: solid 1px #e6e6e6;
  padding: .2rem .32rem;
}
.footer a{
  display: block;
  width: 3.28rem;
  color:#40A2FF;
  font-size: .28rem;
  line-height: .72rem;
  border-radius: .08rem;
  border: 1px solid rgba(51,156,255,1);
}
.footer em{
  display: inline-block;
  width: .4rem;
  height: .4rem;
  vertical-align: middle;
}
.footer .left em{
  background: url(../image/BottomBar-Icon-back@2x.png) no-repeat left center;
  background-size: 100%; 
}
.footer .right em{
  background: url(../image/BottomBar-Icon-go@2x.png) no-repeat left center;
  background-size: 100%;
}
.finish-steptwo{
  position: absolute;
  top: -.7rem;
  right: .32rem;
  width: 4rem;
  height: .58rem;
  background: url(../image/Popover-yellow@2x.png) no-repeat left center;
  background-size: 100%;
}
.medal {
  width: 3.06rem;
  height: 2.3rem;
  border-radius: .12rem;
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -1.15rem 0 0 -1.53rem;
  background: rgba(51,51,51,0.94);
  z-index: 10;
}
.medal em, .empower-medal em {
  margin: .54rem auto .16rem;
  display: block;
  width: .8rem;
  height: .8rem;
  background: url(../image/Toast-Icon-Success@2x.png) no-repeat center center;
  background-size: 100%;
}
.medal p{
  font-size: .28rem;
  color: rgba(255,255,255,1);
  line-height: .40rem;
  text-align: center;
}
.download{
  background: url(../image/download.gif) no-repeat center center;
  background-size: 100%; 
}
.download .btn-download{
  width: 5rem;
  height: 1.3rem;
  position: fixed;
  bottom: 3.4rem;
  left: 1.2rem;
}