.modal {
  position: fixed;
  z-index: 1000;
}
.modal a {
  text-decoration: none;
  font-size: 14px;
  color: #666666;
}
.modal a.main {
  text-decoration: none;
  font-size: 16px;
  color: #333;
}
.modal.visible {
  animation: visible 0.5s 1  alternate forwards;
  animation-timing-function: ease-in;
}
.modal .modal-content.show {
  animation: show 0.3s 1  alternate forwards;
  animation-timing-function: ease-out;
  animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
}
.modal .modal-mask.fade {
  animation: fade 0.3s 1  alternate forwards;
  animation-timing-function: ease-in;
}
.modal .modal-mask.fadeIn {
  animation: fadeIn 0.3s 1  alternate forwards;
  animation-timing-function: ease-in;
}
.out {
  animation: out 0.3s 1  alternate forwards;
  animation-timing-function: ease-in;
}
@keyframes show
{
    0%   { right: -6.66667rem;}
    /* 25%  { right:-6.66667rem;}
    50%  { right:-6.66667rem;}
    75%  { right:0px; } */
    100% { right:0;display: none }
}
@keyframes out
{
    0% { right:0; }
    100% { right: -6.66667rem;display: none}
   
}
@keyframes fade
{
    0%   { opacity: 0.3;}
    /* 25%  { right:-6.66667rem;}
    50%  { right:-6.66667rem;}
    75%  { right:0px; } */
    100% { opacity:0;display: none }
}
@keyframes fadeIn
{
    0%   { opacity: 0;}
    /* 25%  { right:-6.66667rem;}
    50%  { right:-6.66667rem;}
    75%  { right:0px; } */
    100% { opacity:0.3; }
}
@keyframes visible
{
    0%   {  visibility: visible;}
    100% {  visibility: hidden;}
}
.modal.hide {
  display: none;
}
.modal .modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  height: 100%;
  opacity: .3;
  background-color: rgba(0,0,0,0.65);
  -webkit-transition: none;
  transition: none;
}
.modal .modal-content {
  -webkit-box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    right: 0;
    top:0;
    position: fixed;
    height: 100%;
    width: 7.66667rem;
    z-index: 10000;
    background: #fff;
    overflow: scroll;

}
/* .modal >*{
  -webkit-transition: -webkit-transform .3s cubic-bezier(.9, 0, .3, .7),-webkit-box-shadow .3s cubic-bezier(.9, 0, .3, .7);
  transition: -webkit-transform .3s cubic-bezier(.9, 0, .3, .7),-webkit-box-shadow .3s cubic-bezier(.9, 0, .3, .7);
  transition: transform .3s cubic-bezier(.9, 0, .3, .7),box-shadow .3s cubic-bezier(.9, 0, .3, .7);
  transition: transform .3s cubic-bezier(.9, 0, .3, .7),box-shadow .3s cubic-bezier(.9, 0, .3, .7),-webkit-transform .3s cubic-bezier(.9, 0, .3, .7),-webkit-box-shadow .3s cubic-bezier(.9, 0, .3, .7);
} */
.modal .modal-header {
  display: inline-block;
  width: 100%;
  height: 0.85rem;
  position: relative;
  margin-top: .4rem;
  vertical-align: top;
}
.modal .modal-header .icon-close {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  position: absolute;
  right: 0.4rem;
  top: 0;
  background-image: url(../imgs/close.png);
  background-size: cover;
}
.modal .modal-content .title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin: .6rem 0 0 .4rem;
}
.modal .modal-content .title:first-child {
  margin-top: 0;
}
.modal .modal-content ul{
  padding-inline-start: 30px;
}
.modal .modal-content ul.title {
  margin: 0;
}
.modal .modal-content ul li {
  font-size: 14px;
  color: #666666;
  line-height: 1.5em;
  height: 1em;
  /* line-height: 5em;
  height: 5em; */
  margin: 0.54rem 0;
  position: relative;
  list-style-type: none;
}
.modal .modal-content ul li:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #666;
  position: absolute;
  /* left: 50%; */
  left: -14px;
  top: 8.5px;
  border-radius: 100%;
}
.modal .modal-content ul li a {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

* { touch-action: pan-y; }