*{
    margin: 0;
    padding: 0;
    list-style:none;
    box-sizing: border-box;
}

.g-page{
    background-color: #e7f1ff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    min-height: 100%;
    padding-bottom: 5rem;
    bottom: 4.7rem;
    background-image:url(../../../../../images/drawable-xxhdpi/插图.png);
    background-size: 40rem;
    background-position:center  calc(100% - 4.7rem) ;
    background-repeat:no-repeat;
}

.g-page::before{
    z-index: -1;
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, #7096fe, #23c5fb);
    clip-path: circle(37rem at 50% -13rem);
}

.g-page::after{
    /* position:absolute; */
    content:"";
    width:100%;
    bottom:4.7rem;
    background:#e7f1ff url(../../../../../images/drawable-xxhdpi/插图.png) bottom center no-repeat;
    height: 9rem;
    background-size: 36rem;
}

.g-page .m-element{
    display:flex;
    font-size: 1.5rem;
    flex-direction: row;
    justify-content: space-around;
    color: #ffffff;
    height: 4.7rem;
}
.g-page .m-element li{
    line-height:5.5rem;
    height:100%;
    overflow:hidden;
    position:relative;
    cursor:pointer;
}
.g-page .m-element li.select{
    color:#fff600;
    font-weight:bold;
}
.g-page .m-element li.select::after{
    position:absolute;
    content:"";
    width:2em;
    height: 0.2rem;
    background:#fff600;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 0.1rem;
}
.g-page .m-area,.g-page .m-cloud{
    display:flex;
    font-size: 1.4rem;
    flex-direction: row;
    /* justify-content: space-around; */
    color: #ffffff;
    height: 4.5rem;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    width: 100vw;
}
.g-page .m-area li,.g-page .m-cloud li{
    line-height:1.25rem;
    position:relative;
    cursor:pointer;
    text-align: center;
    min-width: 16vw;
    flex: 1;
    padding: 0 0.7rem;
}
.g-page .m-area li:first-child,
.g-page .m-cloud li:first-child{
    margin-left:1rem;
}
.g-page .m-area li:last-child,
.g-page .m-cloud li:last-child{
    margin-right:1rem;
}
.g-page .m-area li:not(:last-child),
.g-page .m-cloud li:not(:last-child){
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.g-page .m-area li.select,
.g-page .m-cloud li.select{
    color:#fff600;
    font-weight:bold;
}
.m-panel{
    margin:0 1rem 1rem;
    border-radius:0.5rem;
    background:#fff;
    overflow:hidden;
    box-shadow: 0 0 3px rgba(142, 198, 255, 0.19);
    position: unset;
    z-index: 1;
}
.m-panel .m-title h4{
    text-align:center;
    font-size: 1.5rem;
    color: #323232;
    line-height: 2rem;
    margin-top: 1rem;
}
.m-panel .m-title h5{
    text-align:center;
    color: #666666;
    line-height: 2rem;
    font-size: 1.2rem;
}
.m-panel .m-image{
    width:100%;
    overflow: hidden;
}

.m-panel .m-image img{
    width: calc(100% - 2rem);
    margin: 1rem;
    display: block;
}
.m-time-list {
    margin: 0 1rem 1rem;
    line-height:2.9rem;
    display:flex;
    font-size: 1.4rem;
    text-align: center;
    flex-wrap: wrap;
    justify-content: space-around;
}
.m-time-list li{
    width: 18%;
    color: #1494fe;
    border: 1px dashed #1494fe;
    border-radius: 0.4rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    background: #cde4ff;
}
.m-time-list li.select{
    border: 1px solid #1494fe;
    background: #1494fe;
    color: #fff;
}
.m-btns{
    position: absolute;
    bottom: 0;
    height: 4.7rem;
    background: #e7f1ff;
    border-top: 1px solid rgba(70, 153, 255, 0.3);
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#iframe{
    display: none;
    height: calc(100vh - 4.7rem);
    width: 100%;
}

.m-btns ul{display: flex;height: 2rem;flex: 1 0;justify-content: space-around;}
.m-btns ul:not(:last-child){
    border-right:1px solid #baddff;
}
.m-btns li{min-width: 5.5rem;background-position: center center;background-repeat: no-repeat;background-size: 2.8rem;cursor: pointer;}

.m-btns .m-last{background-image: url(../../../../../images/drawable-xxhdpi/上一个.png);}
.m-btns .m-left{background-image: url(../../../../../images/drawable-xxhdpi/左.png);}
.m-btns .m-play{background-image: url(../../../../../images/drawable-xxhdpi/播放.png);}

.m-btns .m-play.stop{background-image: linear-gradient(#449aff, #449aff),linear-gradient(#449aff, #449aff);background-size: 0.5rem,0.5rem;background-position: 40% 0, 60% 0;}
.m-btns .m-right{background-image: url(../../../../../images/drawable-xxhdpi/右.png);}
.m-btns .m-next{background-image: url(../../../../../images/drawable-xxhdpi/下一个.png);}
.m-btns .m-refresh{background-image: url(../../../../../images/drawable-xxhdpi/刷新.png);background-position: 0rem center;padding-left: 3rem;font-size: 1.4rem;color: #449aff;}