/*=======reset css========*/
*,
*::before,
*::after{
    /*所有的标签，和伪元素都选中*/
    margin: 0;
    padding: 0;
    /*移动端常用布局是非固定像素*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮效果的清除*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
    background-color: #f8f9fc;
    position: relative;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
input,textarea{
    border: none;
    outline: none;
    /*不允许改变尺寸*/
    resize: none;
    /*元素的外观  none没有任何样式*/
    -webkit-appearance: none;
}
/*=======common css========*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.clearFix::before,
.clearFix::after{
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
}


html {
    font-size: calc(100vw/3.75);

}

.body-wrapper {
    min-width: 320px;
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
}
.banner-wrapper {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.banner-wrapper img{
    display: block;
    width: 100%;
}
.header {
    position: relative;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    background-color: #fff;
    top: -20px;
    width: 100%;
    height: 100%;
}

.title{
    color: #242a33;
    padding:0.175rem 0.15rem;
    font-size: 0.2rem;
    font-weight: bold;
}
.header-info{
    margin: 0 0.15rem 0.175rem 0.15rem;
}
.time{
    padding-bottom: 0.09rem;
}
.time-icon {
    width: 0.125rem;
    height: 0.125rem;
    background: url("../image/time.png") no-repeat;
    background-size: 0.125rem;
    display: inline-block;
    margin-right: 0.05rem;

}
.title-info{
    /*font-weight: 300;*/
    color: #707070;
    font-size: 0.14rem;
}

.address-icon{
    width: 0.10rem;
    height: 0.13rem;
    background: url("../image/address.png") no-repeat;
    background-size: 0.10rem 0.13rem;
    display: inline-block;
    margin-right: 0.05rem;
}
.live-wrapper{
    width: 100%;
    background-color: #fff;
    margin-bottom:  0.135rem ;
}
.activity-header {
    padding: 0.2rem 0.33rem;
    color: #2b313c;
    font-size: 0.18rem;
    font-weight: 500;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
/*.activity-header::before {*/
    /*content: " ";*/
    /*position: absolute;*/
    /*width: 0.045rem;*/
    /*height: 0.18rem;*/
    /*background-color: #4b7eff;*/
    /*left: 0.2rem;*/
    /*top: 0.24rem;*/
/*}*/
.activity-wrapper {
    margin: 0 0.15rem 0 0.25rem;
}
.activity-title-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
    margin-bottom: 0.175rem;
}
.activity-title{
    color: #707070;
    font-size: 0.16rem;
    font-weight: 400;
}
.activity-enter a{
    color: #4b7eff;
    font-size: 0.13rem;
    font-weight: 400;
}
.activity-enter i {
    width: 0.06rem;
    height: 0.11rem;
    display: inline-block;
    background: url("../image/right.png") no-repeat;
    position: relative;
    left: 0.025rem;
    background-size: contain;
}
/*.activity-container{*/
    /*overflow: hidden;*/
    /*width: 100%;*/
    /*margin-bottom: 0.3rem;*/
/*}*/
/*.activity-container ul {*/

/*}*/
/*.activity-container li{*/
    /*float: left;*/
    /*position: relative;*/
    /*display: block;*/
   /*padding-right: 0.075rem;*/

/*}*/
.swiper-container  img{
    width: 0.74rem;
    height: 0.74rem;
}

.play-icon::before {
    background: url("../image/py-bg.png") no-repeat;
    width: 0.45rem;
    height: 0.45rem;
    content: " ";
    position: absolute;
    left: 0.18rem;
    top: 0.18rem;
    background-size: contain;
}

.video-play-icon::before {
    background: url("../image/py-bg.png") no-repeat;
    width: 0.45rem;
    height: 0.45rem;
    content: " ";
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    background-size: contain;
}


.play-icon::after{
    background: url("../image/play.png") no-repeat;
    width: 0.14rem;
    height: 0.16rem;
    content: " ";
    position: absolute;
    left: 0.35rem;
    top: 0.32rem;
    background-size: contain;
}
.video-play-icon::after{
    background: url("../image/play.png") no-repeat;
    width: 0.14rem;
    height: 0.16rem;
    content: " ";
    position: absolute;
    left: 0.46rem;
    top: 0.44rem;
    background-size: contain;
}
.about-container{
    line-height: 0.24rem;
}
.sponsor-container,
.about-container
{
    color: #707070;
    font-size: 0.14rem;
    margin: 0   0.25rem;
    text-align: justify;
}
.sponsor-wrapper, .about-wrapper {
    background: #ffffff;
    padding-bottom: 0.225rem;
    margin-bottom: 0.135rem;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 0.81rem;
    height: 0.81rem;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-wrapper{
    padding-bottom: 0.3rem;
}

.video-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: calc(100% - 0.4rem);

}

.video-wrapper div{
    width: 1.05rem;
    height: 1.05rem;
    margin-bottom: 0.1rem;
    position: relative;
}
.mr{
    margin-right: 0.1rem;
}
.video:last-child{
    margin-right: 0;
}
.video img{
    width: 1.05rem;
    height: 1.05rem;
}
.video-page {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    flex-direction: column;
    margin-top: 0.1rem;

}
.video-js{
    width: 3.75rem;
}
.blockMsg {
    width: 100% !important;
    left: 0 !important;
}
.flex-center{

    display: flex;
    justify-content: center;
    align-items: center;
}
.video-js{
    width: 100%;
    height: 100%;
}

.line {
    background: url("../image/line.png") no-repeat;
    width: 0.04rem;
    height: 0.175rem;
    background-size: 0.045rem 0.175rem;
    display: inline-block;
    position: relative;
    left: -0.1rem;
}