/******************************************************************
 * mDialog 默认的动画效果
 */
/**
 * 淡入效果
 */
 @keyframes mDialogFadeIn {
    from {
      opacity: 0; }
    to {
      opacity: 1; } }
  
  .mDialogFadeIn {
    animation-name: mDialogFadeIn; }
  
  /**
   * 淡出效果
   */
  @keyframes mDialogFadeOut {
    from {
      opacity: 1; }
    to {
      opacity: 0; } }
  
  .mDialogFadeOut {
    animation-name: mDialogFadeOut; }
  
  /**
   * 类似zoomIn
   */
  @keyframes mDialogZoomIn {
    from {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3); }
    50% {
      opacity: 1; } }
  
  .mDialogZoomIn {
    animation-name: mDialogZoomIn; }
  
  /**
   * 类似zoomOut
   */
  @keyframes mDialogZoomOut {
    from {
      opacity: 1; }
    50% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3); }
    to {
      opacity: 0; } }
  
  .mDialogZoomOut {
    animation-name: mDialogZoomOut; }
  
  /**
   * 类似苹果确认提示框效果，也是comfirm的默认的效果
   */
  @keyframes mDialogBigIn {
    0% {
      opacity: 0;
      transform: scale(1.2, 1.2); }
    100% {
      opacity: 1;
      transform: scale(1, 1); } }
  
  .mDialogBigIn {
    animation-name: mDialogBigIn; }
  
  /**
   * 类似苹果确认提示框效果，也是comfirm的默认的效果
   */
  @keyframes mDialogBigOut {
    0% {
      opacity: 1; }
    100% {
      opacity: 0;
      transform: scale(1.2, 1.2); } }
  
  .mDialogBigOut {
    animation-name: mDialogBigOut; }
  
  /******************************************************************
   * mDialog container 容器
   */
  .mDialog-layer-container {
    visibility: hidden;
    position: fixed;
    animation-timing-function: ease-out;
    box-sizing: border-box; }
    .mDialog-layer-container * {
      box-sizing: border-box; }
    .mDialog-layer-container.mDialog-layer-container-full > .mDialog-layer-title {
      border-radius: 0; }
    .mDialog-layer-container.mDialog-layer-container-full > .mDialog-layer-main {
      border-radius: 0; }
    .mDialog-layer-container.mDialog-layer-container-full > .mDialog-layer-btns {
      border-radius: 0; }
  
  /******************************************************************
   * mDialog title 标题
   */
  .mDialog-layer-title {
    border-radius: 2.6667vw 2.6667vw 0 0;
    background: #F5f5f5;
    clear: both;
    border-bottom: 1px solid #d5d5d5;
    padding: 2.6667vw;
    overflow: hidden;
    font-size: 4.8vw; }
  
  /******************************************************************
   * mDialog main 主题内容
   */
  .mDialog-layer-main {
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 4.2667vw; }
    .mDialog-layer-main:after {
      content: "";
      display: table;
      clear: both; }
    .mDialog-layer-main.mDialog-layer-main-full > div {
      height: 100%;
      overflow: hidden; }
    .mDialog-layer-main > div {
      position: relative; }
  
  /******************************************************************
   * mDialog btns 底部按钮集
   */
  .mDialog-layer-btns {
    clear: both;
    border-top: 1px solid #e8e8e8;
    background: #fff;
    border-radius: 0 0 2.6667vw 2.6667vw;
    display: flex; }
    .mDialog-layer-btns > .mDialog-btn {
      flex: 1;
      display: block;
      text-align: center;
      position: relative;
      color: #007aff;
      font-size: 4.8vw;
      padding: 2.6667vw 0; }
      .mDialog-layer-btns > .mDialog-btn:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        border-left: 1px solid #d5d5d5;
        color: #d5d5d5; }
      .mDialog-layer-btns > .mDialog-btn:active {
        background-color: rgba(0, 0, 0, 0.05); }
      .mDialog-layer-btns > .mDialog-btn:first-child:after {
        border-left: 0; }
  
  /******************************************************************
   * mDialog close 关闭按钮
   */
  .mDialog-close {
    position: absolute;
    width: 8.667vw;
    height: 8.667vw;
    overflow: hidden;
    right: 0;
    top: 0;
    margin-top: -4.3333vw;
    margin-right: -4.3333vw;
    border-radius: 100%;
    background-color: black; }
    .mDialog-close:before {
      transform: rotate(45deg);
      content: '';
      position: absolute;
      top: 50%;
      left: 1.3333vw;
      right: 1.3333vw;
      background: #fff;
      height: 0.8vw;
      margin-top: -0.4vw;
      border-radius: 1.0667vw; }
    .mDialog-close:after {
      transform: rotate(-45deg);
      content: '';
      position: absolute;
      top: 50%;
      left: 1.3333vw;
      right: 1.3333vw;
      background: #fff;
      height: 0.8vw;
      margin-top: -0.4vw;
      border-radius: 1.0667vw; }
  
  /******************************************************************
   * mDialog 遮罩层
   */
  .mDialog-shade {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    animation-fill-mode: both;
    animation-timing-function: ease-out; }
    .mDialog-shade.in {
      animation-name: mDialogFadeIn; }
    .mDialog-shade.out {
      animation-name: mDialogFadeOut; }
  
  /******************************************************************
   * mDialog open方法 content是内容
   */
  .mDialog-default-section {
    background: #fff;
    font-size: 4.2667vw;
    padding: 2.6667vw; }
  
  /******************************************************************
   * mDialog msg 信息提示框
   */
  .mDialog-msg-section {
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 2.6667vw;
    padding: 4vw;
    color: #fff; }
  
  /******************************************************************
   * mDialog 加载提示框 
   */
  
  @keyframes line-spin-fade-loader {
    50% {
      opacity: 0.3; }
    100% {
      opacity: 1; } }
  
  .mDialog-loading-section {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 2vw;
    padding: 4vw 8vw;
    overflow: hidden; }
    .mDialog-loading-section .loading-txt {
      font-size: 4.2667vw;
      color: #fff;
      text-align: center;
      margin-top: 2.6667vw;
      white-space: nowrap; }
    .mDialog-loading-section .loading-icon {
      position: relative;
      width: 16.533vw;
      height: 16.533vw;
      margin: 0 auto; }
      .mDialog-loading-section .loading-icon > div {
        background-color: #fff;
        border-radius: 0.5333vw;
        animation-fill-mode: both;
        position: absolute;
        width: 1.0667vw;
        height: 4.8vw;
        margin-left: -0.5333vw; }
        .mDialog-loading-section .loading-icon > div:nth-child(1) {
          top: 11.733vw;
          left: 50%;
          animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; }
        .mDialog-loading-section .loading-icon > div:nth-child(2) {
          top: 10.7173vw;
          left: 10.7173vw;
          transform: rotate(-45deg);
          transform-origin: top center;
          animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; }
        .mDialog-loading-section .loading-icon > div:nth-child(3) {
          top: 8.533vw;
          left: 11.733vw;
          transform-origin: top center;
          transform: rotate(-90deg);
          animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; }
        .mDialog-loading-section .loading-icon > div:nth-child(4) {
          top: 5.816vw;
          left: 11.733vw;
          transform: rotate(-135deg);
          transform-origin: top center;
          animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; }
        .mDialog-loading-section .loading-icon > div:nth-child(5) {
          top: 0px;
          left: 50%;
          animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; }
        .mDialog-loading-section .loading-icon > div:nth-child(6) {
          top: 5.816vw;
          left: 5.816vw;
          transform-origin: top center;
          transform: rotate(135deg);
          animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; }
        .mDialog-loading-section .loading-icon > div:nth-child(7) {
          top: 8.2667vw;
          left: 4.8vw;
          margin-left: -0.5333vw;
          transform: rotate(90deg);
          transform-origin: top center;
          animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; }
        .mDialog-loading-section .loading-icon > div:nth-child(8) {
          top: 10.7173vw;
          left: 5.816vw;
          margin-left: -0.5333vw;
          transform: rotate(45deg);
          transform-origin: top center;
          animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; }
    .mDialog-loading-section.loading-notext {
      padding: 8vw; }
  
  /******************************************************************
   * mDialog confirm 确认框 
   */
  .mDialog-confirm-section {
    background: #fff;
    padding: 5.333vw 4vw;
    border-radius: 2.6667vw 2.6667vw 0 0; }