.mask{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000000;
}
.modal{
  width: 100vw;
  height: 123vw;
  background-color: #FFF;
  position: absolute;
  bottom: -123vw;
  left: 0;
  right: 0;
  border-radius: 3.2vw 3.2vw 0 0;
  display: flex;
  flex-direction: column;
  transition: all .5s ease-in-out;
}
.modalshow{
  bottom: 0;
}
.header{
  display: flex;
  padding: 6.4vw 4.8vw;
  height: 6vw;
}
.title{
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  font-family: PingFangSC-Medium;
  font-size: 4.267vw;
  color: #333;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.closeicon{
  color: #333;
  padding: 0 2.4vw;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.closeicon:after{
  content: "";
  width: 5.867vw;
  height: 5.867vw;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhBAMAAAClyt9cAAAABGdBTUEAALGPC/xhBQAAABhQTFRFxMnRv8TN/Pz99fb31tnf1djeur/J\/\/\/\/pKTEngAAAHJJREFUKM9jKEcDBQz0FlGGcIrVYSJFYu5gETchmEhxWipIoDQtGa7LLS0cSIalucNFSkGKSiEqoXaFARWFgRXCRIDyUCVw94SlsUGUwEVK06BKEG5mS2MvJ6AGwxxMuzDcg+lmDH9h+h0zfDDDcODiFACJb/ifLWW9oQAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.content{
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 5.067vw;
  font-family: PingFangSC-Regular;
  font-size: 3.733vw;
  color: #62636c;
}
a {
  color:inherit;
  text-decoration: none;
}
/*正常的未被访问过的链接*/
a:link {
   color:inherit;
  text-decoration: none;
}
/*已经访问过的链接*/
a:visited {
   color:inherit;
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
a:hover {
   color:inherit;
  text-decoration: none;
}
/* 正在点击的链接，鼠标在元素上按下还没有松开*/
a:active {
   color:inherit;
  text-decoration: none;
}
/* 获得焦点的时候 鼠标松开时显示的颜色*/
a:focus {
   color:inherit;
  text-decoration: none;
}