* {

    padding: 0;



    margin: 0;

}

li {

    list-style: none;

}



a {

    text-decoration: none;

 

}

.fx {
    display: flex;
}


img {

    border: none;

}



.clearfix:after {

    /*伪元素是行内元素 正常浏览器清除浮动方法*/

    content: "";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}



.clearfix {

    *zoom: 1;

    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

@font-face {



    font-family:BARLOWCONDENSED-REGULAR;

    src: url(../fonts/BARLOWCONDENSED-REGULAR.TTF);



}
@font-face {



    font-family: BARLOWCONDENSED-BOLD;

    src: url(../fonts/BARLOWCONDENSED-BOLD.TTF);



}
@font-face {



    font-family:BARLOW-BOLD;

    src: url(../fonts/BARLOW-BOLD.TTF);



}
@font-face {



    font-family:DIN-REGULAR-2;

    src: url(../fonts/DIN-REGULAR-2.OTF);



}
.modal , .modals {



    display: none;
  
  
  
    width: 100%;
  
  
  
    height: 100%;
  
  
  
    position: fixed;
  
  
  
    left: 0;
  
  
  
    top: 0;
  
  
  
    z-index: 10000;
  
  
  
    background-color: rgba(0, 0, 0, 0.7);
  
  
    align-items: center;
  
    justify-content: center;
  }
  
  
  
  
  #modal .fx {
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
  
  
  .modal-content {

    max-width: 46.25rem;

    width: 100%;
  
    
  
    -webkit-animation: zoom 0.6s;


  
    animation: zoom 0.6s;
  
  
  
    overflow: auto;
  
  
    position: relative;
  
    border-radius: 6px;
  
    display: flex;
    align-items: center;
  
    justify-content: center;

    background: #fff;
  
  }
  
  
  
  @-webkit-keyframes zoom {
  
  
  
    from {
      -webkit-transform: scale(0)
    }
  
  
  
    to {
      -webkit-transform: scale(1)
    }
  
  
  
  }
  
  
  
  @keyframes zoom {
  
  
  
    from {
      transform: scale(0)
    }
  
  
  
    to {
      transform: scale(1)
    }
  
  
  
  }
  
  
  
  
  
  .close {
  
    position: absolute;
    right: 3%;
    top: 3.5%;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    z-index: 99;
  
  }
  

  
  
  .modal-body {
  
    width: 100%;


    height: 100%;

  }

  .modal-body .modal-con {
    
  
    box-sizing: border-box;
  
    position: relative;

    padding: 2.25rem 3.75rem 4.0625rem;
  }
  
  
  .modal-con img {
    display: block;
  }
  
  .modal-con ul {
    display: grid;
    gap: 1rem;
  }
  

  
  .modal-con i {
    display: block;
    font-size: 1.125rem;
    line-height: 2.25rem;
    color: #ff0000;
    margin-right: 5px;
  }
  .modal-con ul li .tou {
    display: flex;
    align-items: flex-start;
    color: #1f1f1f;
    font-size: 1.125rem;
    line-height: 2.25rem;
    font-weight: bold;
    margin-bottom: 10px;
    padding-left: 1.25rem;
  }

  .modal-tit {
    background: #1c509c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.375rem;
    height: 5.375rem;
  }


  .modal-con .input {
    height: 3.625rem;
    font-size: .875rem;
    color: #1f1f1f;
    background: #f0f3f5;
    border-radius: 6px;
    width: 100%;
    padding: 0 1rem;
}

.modal-con input[type=text]::placeholder , 
.modal-con textarea::-webkit-input-placeholder  {

    color: #1f1f1f;
}

.modal-con .textarea {
    height: 6.25rem;
    font-size: .875rem;
    line-height: 2.25rem;
    color: #575757;
    background: #f0f3f5;
    border-radius: 6px;
    padding: 1rem;
    width: 100%;
}

.modal-con .yzmbox {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    flex-grow: 1;
}

.modal-con .yzm {
    position: absolute;
    right: 1rem;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.modal-con button {
    background: #1c509c;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.375rem;
    max-width: 22.8125rem;
    height: 3.625rem;
    width: 100%;
    margin: 3rem auto 0;
}