@media only screen and (min-width: 320px){
    .programOutline{
        min-height:100px;
        position:relative;
        width:100%;
        padding-bottom:1px;
    }
    .programOutline .zu41Img{
        position:absolute;
        height:200px;
        right:0;
        top:50%;
        transform: translate(0,-50%);
    }
    .programOutline .titleProgram{
        display:flex;
        width:95%;
        margin:0 auto;
        justify-content: space-between;
        position:relative;
        z-index:500;
    }
    .programOutline .titleProgram .leftBox{
        height:60px;
    }
    .programOutline .titleProgram .leftBox>img{
        height:60px;
    }
    .programOutline .titleProgram .rightBox{
        height:60px;
        margin-right:5%;
    }
    .programOutline .titleProgram .rightBox>img{
        height:30px;
        margin-top:30px; 
    }
    .programOutline .timeTabProgram{
        width:95%;
        margin:40px auto;
        position:relative;
        z-index:500;
    }
    .programOutline .timeTabProgram>div{
        width:100%;
        margin:0 auto;
        display: flex;
    }
    .programOutline .timeTabProgram>div>a{
        min-height:40px;
        flex:1;
        background-repeat: no-repeat;
        background-size:100% 40px;                
        font-size:14px;
        text-align: center;
        line-height: 40px;
        font-weight: 600;
    }
    .programOutline .timeTabProgram>div>a:first-child{
        margin-right:2%;
    }
    .programOutline .timeTabProgram>div>a.no_active_a{
        background-image: url('../image/biankuang.png');
        color:#00d4b8;
    }
    .programOutline .timeTabProgram>div>a.active_a{
        color:#fff;
        background-image: url('../image/xuanzhong.png');
    }
    .programOutline .programListBox{
        width:95%;
        margin:0 auto 20px auto;
        min-height:200px;
        position:relative;
        z-index:500; 
    }
    .programOutline .programListBox .programUlBox{
        width:100%;
        margin:0 auto;
    }
    .programUlBox li{
        margin-bottom:20px;
    }
    .programUlBox li .programTitleBox{
        width:100%;
        display: flex;
        min-height:60px;
        background-repeat: no-repeat;
        background-size:100% 100%;
        cursor: pointer;
        background-image: url('../image/zu27.png');
    }
    .programUlBox li .active_programTitleBox{
        width:100%;
        background-image: url('../image/zu26.png');
        display: flex;
        min-height:60px;
        background-repeat: no-repeat;
        background-size:100% 100%;
        cursor: pointer;
    }
    .programTitleBox b,
    .active_programTitleBox b{
        line-height:60px;
        font-weight: bold;
        font-size:14px;
        min-width:80px;
        text-align: center;
        padding:0 20px;
    }
    .programTitleBox b{
        color:#00d4b8;
    }
    .active_programTitleBox b{
        color:#fff;
    }
    .programTitleBox h3,
    .active_programTitleBox h3{
        line-height:60px;
        font-weight: bold;
        font-size:14px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        max-width:60%;
    }
    .programTitleBox h3{
        color:#000;
    }
    .active_programTitleBox h3{
        color:#fff;
    }
    .programOlBox{
        min-height:50px;
        margin-top:10px;
    }
    .hiddenProgram{
        display: none;
    }
    .programOlBox li.firstTimeli{
        display:flex;
        height:50px;
        background: linear-gradient(to right,#00d0bb,#91f7a7);
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.firstTimeli .timePointDiv{
        height:50px;
        line-height:50px;
        color:#fff;
        min-width:100px;
        font-size:14px;
        border-right: 1px solid #fff;
        text-align: center;
    }
    .programOlBox li.firstTimeli .timeContentDiv{
        height:50px;
        line-height:50px;
        color:#fff;
        font-size:14px;
        flex:1;
        margin-left:10px;
    }
    .programOlBox li.even{
        background-color:#89f4ce ;
        min-height:50px;
        display: flex;
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.odd{
        background-color:#eafde8;
        min-height:50px;
        display: flex;
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.even .timePointDiv,
    .programOlBox li.odd .timePointDiv{
        display: flex;
        justify-content: center;
        align-items: center;
        color:#000;
        font-size:14px;
        min-width:100px;
    }
    .programOlBox li.even .timePointDiv h3,
    .programOlBox li.odd .timePointDiv h3{
        text-align: center;
    }
    .programOlBox li.even .timeContentDiv,
    .programOlBox li.odd .timeContentDiv{
        flex:1;
        padding:0 10px;
        border-left:1px solid #fff;
    }
    .programOlBox li.even .timeContentDiv h3,
    .programOlBox li.odd .timeContentDiv h3{
        font-size:14px;
        font-weight: bold;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height:50px;
    }
    .programOlBox li.even .timeContentDiv p,
    .programOlBox li.odd .timeContentDiv p{
        font-size:12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom:10px;
    }
}
@media only screen and (min-width: 768px){
    .programOutline{
        min-height:100px;
        position:relative;
        width:100%;
        padding-bottom:1px;
    }
    .programOutline .zu41Img{
        position:absolute;
        height:200px;
        right:0;
        top:50%;
        transform: translate(0,-50%);
    }
    .programOutline .titleProgram{
        display:flex;
        width:90%;
        margin:0 auto;
        justify-content: space-between;
        position:relative;
        z-index:500;
    }
    .programOutline .titleProgram .leftBox{
        height:100px;
    }
    .programOutline .titleProgram .leftBox>img{
        height:100px;
    }
    .programOutline .titleProgram .rightBox{
        height:50px;
        margin-right:5%;
    }
    .programOutline .titleProgram .rightBox>img{
        height:50px;
        margin-top:25px; 
    }
    .programOutline .timeTabProgram{
        width:90%;
        margin:40px auto;
        position:relative;
        z-index:500;
    }
    .programOutline .timeTabProgram>div{
        width:100%;
        margin:0 auto;
        display: flex;
    }
    .programOutline .timeTabProgram>div>a{
        min-height:50px;
        flex:1;
        background-repeat: no-repeat;
        background-size:100% 50px;                
        font-size:16px;
        text-align: center;
        line-height: 50px;
        font-weight: 600;
    }
    .programOutline .timeTabProgram>div>a:first-child{
        margin-right:2%;
    }
    .programOutline .timeTabProgram>div>a.no_active_a{
        background-image: url('../image/biankuang.png');
        color:#00d4b8;
    }
    .programOutline .timeTabProgram>div>a.active_a{
        color:#fff;
        background-image: url('../image/xuanzhong.png');
    }
    .programOutline .programListBox{
        width:100%;
        margin:0 auto 20px auto;
        min-height:400px;
        position:relative;
        z-index:500; 
    }
    .programOutline .programListBox .programUlBox{
        width:90%;
        margin:0 auto;
    }
    .programUlBox li{
        margin-bottom:20px;
    }
    .programUlBox li .programTitleBox{
        width:100%;
        display: flex;
        min-height:100px;
        background-repeat: no-repeat;
        background-size:100% 100%;
        cursor: pointer;
        background-image: url('../image/zu27.png');
    }
    .programUlBox li .active_programTitleBox{
        width:100%;
        background-image: url('../image/zu26.png');
        display: flex;
        min-height:100px;
        background-repeat: no-repeat;
        background-size:100% 100%;
        cursor: pointer;
    }
    .programTitleBox b,
    .active_programTitleBox b{
        line-height:100px;
        font-weight: bold;
        font-size:20px;
        min-width:80px;
        text-align: center;
        padding:0 20px;
    }
    .programTitleBox b{
        color:#00d4b8;
    }
    .active_programTitleBox b{
        color:#fff;
    }
    .programTitleBox h3,
    .active_programTitleBox h3{
        line-height:100px;
        font-weight: bold;
        font-size:20px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        max-width:70%;
    }
    .programTitleBox h3{
        color:#000;
    }
    .active_programTitleBox h3{
        color:#fff;
    }
    .programOlBox{
        min-height:50px;
        margin-top:10px;
    }
    .hiddenProgram{
        display: none;
    }
    .programOlBox li.firstTimeli{
        display:flex;
        height:50px;
        background: linear-gradient(to right,#00d0bb,#91f7a7);
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.firstTimeli .timePointDiv{
        height:50px;
        line-height:50px;
        color:#fff;
        min-width:100px;
        font-size:16px;
        border-right: 1px solid #fff;
        text-align: center;        
    }
    .programOlBox li.firstTimeli .timeContentDiv{
        height:50px;
        line-height:50px;
        color:#fff;
        font-size:16px;
        flex:1;
        margin-left:10px;
    }
    .programOlBox li.even{
        background-color:#89f4ce ;
        min-height:50px;
        display: flex;
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.odd{
        background-color:#eafde8;
        min-height:50px;
        display: flex;
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.even .timePointDiv,
    .programOlBox li.odd .timePointDiv{
        display: flex;
        justify-content: center;
        align-items: center;
        color:#000;
        font-size:16px;
        min-width:100px;
    }
    .programOlBox li.even .timePointDiv h3,
    .programOlBox li.odd .timePointDiv h3{
        text-align: center;
    }
    .programOlBox li.even .timeContentDiv,
    .programOlBox li.odd .timeContentDiv{
        flex:1;
        padding:0 10px;
        border-left:1px solid #fff;
    }
    .programOlBox li.even .timeContentDiv h3,
    .programOlBox li.odd .timeContentDiv h3{
        font-size:16px;
        font-weight: bold;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height:50px;
    }
    .programOlBox li.even .timeContentDiv p,
    .programOlBox li.odd .timeContentDiv p{
        font-size:14px;
        display:flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom:10px;
    }
}
@media only screen and (min-width: 1024px){
    .programOutline{
        min-height:500px;
        position:relative;
        width:100%;
        padding-bottom:1px;
    }
    .programOutline .zu41Img{
        position:absolute;
        height:600px;
        right:0;
        top:50%;
        transform: translate(0,-50%);
    }
    .programOutline .titleProgram{
        display:flex;
        width:80%;
        margin:0 auto;
        justify-content: space-between;
        position:relative;
        z-index:500;
    }
    .programOutline .titleProgram .leftBox{
        height:120px;
    }
    .programOutline .titleProgram .leftBox>img{
        height:120px;
    }
    .programOutline .titleProgram .rightBox{
        height:60px;
        margin-right:5%;
    }
    .programOutline .titleProgram .rightBox>img{
        height:60px;
        margin-top:60px; 
    }
    .programOutline .timeTabProgram{
        width:80%;
        margin:40px auto;
        position:relative;
        z-index:500;
    }
    .programOutline .timeTabProgram>div{
        width:90%;
        margin:0 auto;
        display: flex;
    }
    .programOutline .timeTabProgram>div>a{
        min-height:50px;
        flex:1;
        background-repeat: no-repeat;
        background-size:100% 50px;                
        font-size:24px;
        text-align: center;
        line-height: 50px;
        font-weight: 600;
    }
    .programOutline .timeTabProgram>div>a:first-child{
        margin-right:2%;
    }
    .programOutline .timeTabProgram>div>a.no_active_a{
        background-image: url('../image/biankuang.png');
        color:#00d4b8;
    }
    .programOutline .timeTabProgram>div>a.active_a{
        color:#fff;
        background-image: url('../image/xuanzhong.png');
    }
    .programOutline .programListBox{
        width:80%;
        margin:0 auto 20px auto;
        min-height:400px;
        position:relative;
        z-index:500; 
    }
    .programOutline .programListBox .programUlBox{
        width:90%;
        margin:0 auto;
    }
    .programUlBox li{
        margin-bottom:20px;
    }
    .programUlBox li .programTitleBox{
        width:100%;
        display: flex;
        min-height:100px;
        background-repeat: no-repeat;
        background-size:100% 100%;
        cursor: pointer;
        background-image: url('../image/zu27.png');
    }
    .programUlBox li .active_programTitleBox{
        width:100%;
        background-image: url('../image/zu26.png');
        display: flex;
        min-height:100px;
        background-repeat: no-repeat;
        background-size:100% 100%;
        cursor: pointer;
    }
    .programTitleBox b,
    .active_programTitleBox b{
        line-height:100px;
        font-weight: bold;
        font-size:20px;
        min-width:80px;
        text-align: center;
        padding:0 20px;
    }
    .programTitleBox b{
        color:#00d4b8;
    }
    .active_programTitleBox b{
        color:#fff;
    }
    .programTitleBox h3,
    .active_programTitleBox h3{
        line-height:100px;
        font-weight: bold;
        font-size:20px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        max-width:70%;
    }
    .programTitleBox h3{
        color:#000;
    }
    .active_programTitleBox h3{
        color:#fff;
    }
    .programOlBox{
        min-height:50px;
        margin-top:10px;
    }
    .hiddenProgram{
        display: none;
    }
    .programOlBox li.firstTimeli{
        display:flex;
        height:50px;
        background: linear-gradient(to right,#00d0bb,#91f7a7);
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.firstTimeli .timePointDiv{
        height:50px;
        line-height:50px;
        color:#fff;
        min-width:100px;
        font-size:16px;
        border-right: 1px solid #fff;
        text-align: center;
    }
    .programOlBox li.firstTimeli .timeContentDiv{
        height:50px;
        line-height:50px;
        color:#fff;
        font-size:16px;
        flex:1;
        margin-left:10px;
    }
    .programOlBox li.even{
        background-color:#89f4ce ;
        min-height:50px;
        display: flex;
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.odd{
        background-color:#eafde8;
        min-height:50px;
        display: flex;
        width:100%;
        margin-bottom:0;
    }
    .programOlBox li.even .timePointDiv,
    .programOlBox li.odd .timePointDiv{
        display: flex;
        justify-content: center;
        align-items: center;
        color:#000;
        font-size:16px;
        min-width:100px;
    }
    .programOlBox li.even .timePointDiv h3,
    .programOlBox li.odd .timePointDiv h3{
        text-align: center;
    }
    .programOlBox li.even .timeContentDiv,
    .programOlBox li.odd .timeContentDiv{
        flex:1;
        padding:0 10px;
        border-left:1px solid #fff;
    }
    .programOlBox li.even .timeContentDiv h3,
    .programOlBox li.odd .timeContentDiv h3{
        font-size:16px;
        font-weight: bold;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height:50px;
    }
    .programOlBox li.even .timeContentDiv p,
    .programOlBox li.odd .timeContentDiv p{
        font-size:14px;
        display:flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom:10px;
    }
    
}