* {
         padding: 0;
         margin: 0;
         outline: none;
       }
       
@font-face {
    font-family: 'SansationRegular';
    src: url('Sansation_Regular-webfont.eot');
    src: url('Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Sansation_Regular-webfont.woff') format('woff'),
         url('Sansation_Regular-webfont.ttf') format('truetype'),
         url('Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
p {
    font-family: 'SansationRegular';
}

       input {outline:none;}
       a {
         color: #333;
         text-decoration: none;
       }
       a:focus {
         outline:none;
         -moz-outline:none;
       }
       body {
         width: 100%;
         max-width: 480px;
         margin: 0 auto;
         background-color: #eee;
       }
       header {
            width: 100%;
            height: 40px;
            background-color: #f6e8f2;
       }
       .head-bg {
            width: 100%;
            height: 300px;
       }
       .head-bg img {
            width: 100%;
            height: 100%;
       }

       .main-top {
            position: relative;
            width: 94%;
            /*height: 300px;*/           
            margin: 10px auto;
            border-radius: 8px;
            padding: 20px 0 30px;
            background-color: rgba(255,255,255,1);
            backdrop-filter: blur(10px);
            /*display: flex;
            flex-wrap:  wrap;
            align-items: center;*/
       }
       .main-top .top-bg {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          z-index: -1
       }
       .main-top .top-bg img {
            width: 100%;
       }
       .title-text {
            width: 100%;
            text-align: center;
       }
       .title-text h2,h4 {
            color: #333;
       }
       .form-group {
            width: 60%;
            margin: 20px auto;
       }
       .form-group .input-tiem {
            width: 100%;
            height: 36px;
            margin: 0 auto;
       }
       .input-tiem input {
            width: 100%;
            height: 100%;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.6);
            border: none;
            border-bottom: 1px solid #57BE5A;
            text-indent: 15px;
       }
       .form-type {
            display: flex;
            justify-content: space-between;
            /*align-items: center;*/
            width: 70%;            
            margin: 15px auto;
       }
       .form-type a {
             background-color: rgba(0,0,0,0.0);
            color: #fff;
            font-size: 12px;
            padding: 4px 8px 2px;
            border-radius: 4px;     
            border: 1px solid #eee;  
            color: #eee;
            margin: 0 -10px;
       }
       .form-type .active {
            background-color: rgba(0,0,0,0.0);
            color: #FFFFFF;
            border: 1px solid #57BE5A;
       }
       .btn-box button{
            display: block;
            width: 100%;
            height: 34px;
            margin: 0 auto;
            border: none;
            border-radius: 4px;
            background-color: #57BE5A;
            color: #fff;
       }


       /*展示数据部分css*/
       .list-box {
            width: 94%;
            margin: 0 auto 80px;
            background-color: rgba(255,255,255,1);
            backdrop-filter: blur(10px);
            position: relative;
            padding: 15px 0;
            border-radius: 8px;          
            
       }
       .list-tiem {
            display: flex;
            position: relative;
            width: 85%;
            margin: 0 auto;
            padding: 10px 10px;
            border-radius: 4px;
            box-shadow: 0px 1px 4px 1px #eee;
            margin-bottom: 8px; 
            background-color: rgba(255,255,255,0.0);
            backdrop-filter: blur(0px);
            overflow: hidden;
            align-items: center;
       }
       .list-tiem .list-img {
            display: inline-block;         
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 8px;
       }
       .list-tiem .list-img img {          
            width: 100%;
            height: 100%;
            border-radius: 8px;
            text-align: ;
       }
       .list-tiem .list-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            display: inline-block;
            height: ;
            line-height: ;
            font-size: 13px;
            margin-top: px;
       }
       .list-tiem .types {
          position: absolute;
          top: 0;
          right: 0;
          background-color: #FA8072;
          background-image: linear-gradient(to right, #46D2FF, #5ED73B);
          padding: 6px 8px;
          border-radius: 0 0 0 8px;
          color: #FFFFFF;
          font-size: 12px;
       }
       .list-tiem .dates {
          position: absolute;
          bottom: 2px;
          right: 15px;
          color: #666666;
          font-size: 12px;
       }
       .pagers {
            display: flex;
            justify-content: center;
            /*align-items: center;*/
            width: 70%;           
            margin: 15px auto;
       }
       .pagers a {
            background-color: rgba(0,0,0,0.3);
            color: #fff;
            font-size: 12px;
            height: 20px;
            width:20px;
            line-height: 20px;
            text-align: center;
            border-radius: 12px;
            /*border: 1px solid #0035d7;*/
            /*border: 1px solid #ccc;*/         
            color: #eee;
            margin: 0 2px;
       }
       .pagers .active {
            background-color: #57BE5A ;
            color: #FFFFFF;

      }