*{
        padding: 0;
        margin: 0;
      }
      body {
        position:relative;
        background-color: #eee;
        background-size: 100%;
        max-width: 580px;
        margin: 0 auto;
        background-image: linear-gradient(95deg,#cbe8ff, #fff8eb); 
      }
      a {
        text-decoration: none;
      }
      header {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #fff;
        font-weight: 400;
         background-image: linear-gradient(95deg,#cbe8ff, #fff8eb); 
      }
      header h3 {
        font-weight: 400;
      }
      .img-box {
        width: 100%;
        height:360px;
        position: relative;       
        margin: 0 0 2px; 
        background-image: url(../images/img.jpg);
        background-size: 100%
      }
      .img-box>img {
         position: absolute;
         width: 100%;
         height: 100% ;
         top: 0;
         right: 0:
      }
      .box {
        width: 80%;
        height: 180px;
        border-radius: 14px;
        background-color: rgba(255,255,255,0.3);
        margin: 0 auto;
        position: relative;
        top: 56%;        
        transform: translateY(-50%);
        box-shadow: 0 2px 5px 1px #ddd;
      }
      .imgs {
        position: absolute;
        width: 108px;
        height: 108px;        
        top: -46px;
        right: 20px;
        background-color: #fff;
        box-shadow: 0 2px 5px 3px #bbb;
        transition: 0.5s;
        overflow: hidden;
        border-radius: 4px;
      }
      .imgs:hover {
        transform:rotate(360deg);
-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
      }
      .imgs img {
        width: 100%;
        height: 108px;
      }
      .box .dss {
        position: absolute;
        top: 10px;
        left: 20px;
        color: rgba(255,255,255,0.9);
      }
      .left {
        position: absolute;
        display: flex;
        height: 50px;
        top: 45px;
        left: 20px;
      }
      .logos {
        margin-right: 10px;
        width: 50px;
        height: 50px;        
        top: 0px;
        left: 20px;
        background-color: #fff;
        border-radius: 4px;
      }
      #wxName {
        color: rgba(255,255,255,0.9);
      }   
      .ids {
        color: rgba(255,255,255,0.9);
        font-size: 13px;
        margin-top: 8px;
      }
      .ewms {
        position: absolute;
        top: 80px;
        width: 80px;
        right: -12px;
      }
      .ewms span {
        display: inline-block;
        margin-left: 10px;
        color: rgba(255,255,255,0.9);
      }
      .status {
        position: absolute;
        top: 110px;
        left: 80px;
        padding: 2px 8px;
        border: 1px solid rgba(255,255,255,0.9);;
        font-size: 13px;
        color: rgba(255,255,255,0.9);
        border-radius: 10px;
      }
      .cks {
        position: absolute;
        top: 140px;
        right: 0px;
        padding: 2px 8px;
        border: 1px solid #ccc;
        font-size: 13px;
        color: rgba(255,255,255,0.9);
        border-radius: 10px 0 0 10px;
      }
      .alerts {        
        display: none;
        position: absolute;
        width: 80%;
        top: 80%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 8px;           
      }
      .alerts img {        
        width: 100%;
        height:100%;
        border-radius: 8px;
        z-index: 8;
      }
      .alerts #close {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 18px;
        text-align: center;
        background-color: #fff;
        border-radius: 50%;
        z-index: 9
      }
      .input-box {
        width: 100%;
         background-image: linear-gradient(95deg,#cbe8ff, #fff8eb); 
        padding: 20px 0 30px;
      }
      .input-tiem {
        width: 80%;        
        height: 40px;        
        line-height: 40px;
        display: flex;
        items-align: center;   
        justify-content: space-between;     
        margin: 0px auto 20px;
        border: 1px solid #fff;
        
        border-radius: 4px;
        overflow: hidden
      }
      
      .button-tiem {
        width: 80%;        
        height: 42px;        
        line-height: 42px;
        display: flex;
        items-align: center;   
        justify-content: space-between;     
        margin: 0px auto 20px;
        border: 0px solid #ccc;
        border-radius: 4px;
        overflow: hidden
      }
      .button-tiem button:nth-child(1) {
        width: 50%;
        border: none;
         background-image: linear-gradient(95deg,#90e5ff, #74bfff); 
        color: #fff;
      }
       .button-tiem button:nth-child(2) {
        width: 50%;
        border: none;
         background-image: linear-gradient(95deg,#ee8eff, #ff8ec1); 
        color: #fff;
      }
      .input-tiem label {
        width: 38%;
        text-align: center;
        color: #333;
        background-color: ;
        border-right: 1px solid #fff;
      }
      .input-tiem input {
        width: 100%;
        line-height: 40px;
        color: #888;
        border: none;
        border-bottom: 0px solid #ccc;     
        text-indent: 15px;  
        background-color: transparent;
      }
      .btn-upload {
         background-color: transparent
       }
      .input-tiem button {
        width: 100%;
        line-height: 40px;
        border: none;
        background-color: transparent;
      }