.main{
    background-color: #ECE9E5;
    margin: 0;
    width: 100%;
}
@media screen and (min-width:500px){
/*start of activity*/    
    .panel_active{
        position: relative;
        width: 80%;
        margin: 30px auto;
        height: 300px;
        background-color: white;
    }
    .panel_active:hover{
        position: relative;
        width: 80%;
        margin: 30px auto;
        height: 300px;
        background-color: white;
        -webkit-box-shadow: 8px 8px 16px hsla(0, 0%, 0%, 0.2);
        -o-box-shadow: 8px 8px 16px hsla(0, 0%, 0%, 0.2);
        -moz-box-shadow: 8px 8px 16px hsla(0, 0%, 0%, 0.2);
        -ms-box-shadow: 8px 8px 16px hsla(0, 0%, 0%, 0.2);
        box-shadow: 8px 8px 16px hsla(0, 0%, 0%, 0.2);
    }
    .panel_left{
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 65.5%;
    }
    .act_img{
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
    }
    .panel_right{
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        width: 34.5%;
    }
    .panel_status{
        float:left;
        width: 15.5%;
        height: 40px;
        position : relative;
       background-color: #ff393a;
       z-index: 1;
       color: white;
       font-size: larger;
    }
    .unfinished{
        background-color: #0dc67a;
    }
    .active_title{
        height: 60px;
        position : relative;
        background-color: #f9f9f9;
        border-bottom: 1px solid #e8e8e8;
        font-size: 23px;
        font-weight: 500;
        color: #343434;

    }
    .active_des1{
        height: 60px;
        margin: 10px 10px 10px 20px;
        position : relative;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: 500;
        color: #343434;
        line-height: 20px;
        text-indent: 2em;
        word-wrap: break-word;

    }
    .active_des2{
        height: 64px;
        margin-left: 10px;
        font-size: 1em;
        color: #aaaaaa;
        line-height: 200%;
    }
    .bigger{
        font-size: larger;
    }
    .hide{
        visibility: hidden;
    }
    .active_look{
        height: 37px;
        width: 85%;
        position: relative;
        margin: 40px auto;
        background-color: #ff393e;
        color: white;
        font-size: large;
        border-radius: 4px;
        cursor: pointer;
    }
    .click_act{

    }
    .text_center{
        position : absolute;
        width: 100%;
        top : 50%;
        -webkit-transform : translate(-0%,-50%);
        -o-transform : translate(-0%,-50%);
        -moz-transform : translate(-0%,-50%);
        -ms-transform : translate(-0%,-50%);
        transform : translate(-0%,-50%);
        text-align: center;
    }
    /*end of activity*/
    /*start of activity detail*/
    .acti_pic{
        margin-bottom: 20px;
        width: 800px;
        height: 300px;
    }
    .award{
         font-weight: 500;
         width: 816px;
         margin: auto;
    }
    .award_header1{
        text-align: center;
        font-weight: 600;
        font-size: 1.2em;
        margin-bottom: 44px;
        background-color: #0dc67a;
        width: 288px;
        margin-left: auto;
        margin-right: auto;
        color: white;
        height: 32px;
    }
    .award_header2{
        text-align: center;
        font-weight: 600;
        font-size: 1.2em;
        margin-bottom: 44px;
        background-color: #ffda06;
        width: 288px;
        margin-left: auto;
        margin-right: auto;
        color: white;
        height: 32px;
    }
    .award_header3{
        text-align: center;
        font-weight: 600;
        font-size: 1.2em;
        margin-bottom: 44px;
        background-color: #f75449;
        width: 288px;
        margin-left: auto;
        margin-right: auto;
        color: white;
        height: 32px;
    }
    .award_body{
       
    }
    .clearfix:after{
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }
    .first_award{
      width: 250px;
      margin: auto;
      margin-top: 10px;
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
    }
    .second_award,.third_award{
        position: relative;
      width: 250px;
      float: left;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 10px;
      margin-bottom: 30px;
      overflow: hidden;
    }
    .award_des{
        position: absolute;
        top : 50%;
        -webkit-transform : translate(-0%,-50%);
        -o-transform : translate(-0%,-50%);
        -moz-transform : translate(-0%,-50%);
        -ms-transform : translate(-0%,-50%);
        transform : translate(-0%,-50%);
        width: 100%;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        background-color: rgba(230, 168, 168, 0);
        color: rgba(255, 255, 255, 0);
        padding-top: 50%;
        padding-bottom: 50%;
    }  
    .award_des:hover{
        background-color: rgba(33, 29, 29, 0.59);
        color: rgba(255, 255, 255, 0.68);
        font-weight: 900;
        font-size: large;
        padding-top: 50%;
        padding-bottom: 50%;
        -webkit-transition-property:background-color,color;
        -o-transition-property:background-color,color;
        -moz-transition-property:background-color,color;
        -ms-transition-property:background-color,color;
        transition-property:background-color,color;
        -webkit-transition-duration:500ms;
        -o-transition-duration:500ms;
        -moz-transition-duration:500ms;
        -ms-transition-duration:500ms;
        transition-duration:500ms;
    }
    .award_author{
        position: relative;
        height: 24px;
        overflow: hidden;
        text-align: center;
        padding: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: -39px;
        margin-left: auto;
        margin-right: auto;
        width: 100px;
        background-color: rgba(243,247,247,0.52);
    }
    .acti_pic1{
        height: 200px;
        width: 100%;
        vertical-align: bottom;
        box-shadow: 0 0 10px #0E0101;
    }
    .clearall{
    clear: both;
    }
    .panel_header1{
        height: 50px;
        text-align: left;
        font-size:1.5em;
        line-height: 2em;
        margin: 5px 0;
        font-weight: 700;
    }
    .more{
       position: relative;
        height: 200px;
        width: 250px;
        float: left;
        margin-left: 10px;
       margin-right: 10px;
       margin-top: 10px;
       margin-bottom: 10px;

    }
    .more>img{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform : translate(-50%,-50%);
        -o-transform : translate(-50%,-50%);
        -moz-transform : translate(-50%,-50%);
        -ms-transform : translate(-50%,-50%);
        transform : translate(-50%,-50%);
    }
    /*end of activity detail*/
}
@media screen and (max-width: 500px) {
    /*start of activity*/
    .panel_active{
        width: 96%;
        margin-left: 2%;
        margin-top: 30px;
        background-color: white;
    }
    .panel_status{
        height: 35px;
        text-align: center;
        position: relative;
        background-color: #ff393a;
        color: white;
        font-size: larger;

    }
    .panel_status_end{
        height: 35px;
        text-align: center;
        position: relative;
        background-color: #ff393a;
        color: white;
        font-size: larger;

    }
    .text_center{
        position : absolute;
        width: 100%;
        top : 50%;
        -webkit-transform : translate(-0%,-50%);
        -o-transform : translate(-0%,-50%);
        -moz-transform : translate(-0%,-50%);
        -ms-transform : translate(-0%,-50%);
        transform : translate(-0%,-50%);
        padding-left: 5px;
    }
    .panel_left {
        height: 200px;
    }
    .act_img{
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
    }
    .panel_right{

    }
    .font_title{
         font-weight: 900;
         font-family: Microsoft YaHei;
         font-size: larger
    }
    .active_title{
        height: 40px;
        position: relative;
    }
    .active_des1{
        position: relative;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .active_des2{
        line-height: 2em;
        margin-left: -1px;
        margin-right: -1px;
        margin-bottom: -1px;

        }
    .active_look{
        position: relative;
        visibility: hidden;
    }
    .unfinished{
        background-color: #0dc67a;
    }
    /*end of activity*/
     /*start of activity detail*/
    .acti_pic{
        margin-bottom: 20px;
        height: 220px;
        width: 100%;
    }
    .award{
         font-weight: 500;
         margin: auto;
    }
    .award_header1{
        text-align: center;
        font-weight: 600;
        font-size: 1.2em;
        margin-bottom: 44px;
        background-color: #0dc67a;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        color: white;
        height: 32px;
    }
    .award_header2{
        text-align: center;
        font-weight: 600;
        font-size: 1.2em;
        margin-bottom: 44px;
        background-color: #ffda06;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        color: white;
        height: 32px;
    }
    .award_header3{
        text-align: center;
        font-weight: 600;
        font-size: 1.2em;
        margin-bottom: 44px;
        background-color: #f75449;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        color: white;
        height: 32px;
    }
    .award_body{
    }
    .first_award{
      margin: 20px 20px 20px 20px;
    }
    .second_award,.third_award{
      margin: 20px 20px 20px 20px;
    }
    .award_des{
        position: relative;
        border: 1px solid rgba(0, 0, 0, 0.38);
        text-align: center;
        overflow: hidden;
        text-align: center;
        padding: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .award_author{
        position: relative;
        height: 24px;
        overflow: hidden;
        text-align: center;
        padding: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: -39px;
        margin-left: auto;
        margin-right: auto;
        width: 100px;
        background-color: rgba(243,247,247,0.52);
    }
    .acti_pic1{
        height: 200px;
        width: 100%;
        vertical-align: bottom;
        box-shadow: 0 0 10px #0E0101;

    }
    .clearall{
    clear: both;
    }
    .panel_header1{
        height: 50px;
        text-align: left;
        font-size:1.5em;
        line-height: 2em;
        margin: 5px 0;
        font-weight: 700;
    }
    .more{
        height: 20px;
        margin: 20px 20px 20px 20px;
        position: relative;
        text-align: center;
    }
    /*end of activity detail*/
}