body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.pc .container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-image: url("../images/back.png");
    background-size: 100% 100%;
}

.pc .content {
    margin: 4.1vw 20vw;
    display: flex;
    flex-direction: column;
}

.pc .top {
    display: flex;
}

.pc .logo {
    width: 30.98vw;
    height: 5.26vw;
}

.pc .download {
    width: 20vw;
    height: 4.1vw;
    margin-left: 7.56vw;
    margin-top: 0.56vw;
    cursor: pointer;
}

.pc .download:active {
    width: 20vw;
    height: 4.1vw;
    margin-left: 7.56vw;
    margin-top: 0.56vw;
    background-image: url("../images/downloadActive.png");
    background-size: 100% 100%;
}

.pc .title {
    width: 60.93vw;
    height: 25.31vw;
    margin-top: 2.7vw;
}

.pc .intro_title {
    width: 58.39vw;
    height: 9.84vw;
    margin-top: 7.29vw;
}

.pc .introduction {
    width: 59.43vw;
    height: 42.5vw;
    margin-top: 1vw;
    background-image: url("../images/introduction.png");
    background-size: 100% 100%;
}

.pc .introduction_text {
    width: 50.9vw;
    height: 20.8vw;
    padding-top: 5.8vw;
    padding-left: 3.8vw;
    font-size: 2vw;
    line-height: 3.75vw;
    color: #fff;
    text-indent: 2em;
}

.pc .video_title {
    width: 58.39vw;
    height: 9.84vw;
    margin-top: 1vw;
}

.pc .videos {
    display: flex;
    flex-flow: row wrap;
    width: 61vw;
    margin-top: 0.78vw;
}

.pc .video {
    width: 30.16vw;
    height: 28.59vw;
    background-image: url("../images/video_bk.png");
    background-size: 100% 100%;
}

.pc .video_top {
    display: flex;
}

.pc .video_num {
    width: 5.78vw;
    height: 5.8vw;
    background-image: url("../images/num.png");
    background-size: 100% 100%;
    color: #fff;
    font-size: 2vw;
    margin-top: 0.73vw;
    margin-left: 0.94vw;
}

.pc .num {
    margin-top: 0.4vw;
    margin-left: 0.9vw;
}

.pc .video_pro {
    width: 12.81vw;
    height: 2.4vw;
    background-image: url("../images/video_pro.png");
    background-size: 100% 100%;
    color: #fff;
    font-size: 1.56vw;
    margin-top: 0.73vw;
    margin-right: 0.95vw;
    margin-left: 9.56vw;
}

.pc .pro {
    padding-top: 0.22vw;
    padding-left: 1.46vw;
}

.pc .video_name {
    color: #fff;
    font-size: 1.56vw;
}

.pc .name {
    margin-left: 2.19vw;
    margin-top: 4vw;
    width: 25.42vw;
    height: 3.70vw;
}

.pc .video_content {
    position: relative;
}

.pc .imgCover {
    width: 21vw;
    height: 15.6vw;
    margin-top: -3.1vw;
    margin-left: 4.5vw;
    -webkit-mask: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.pc .imgCover:hover {
    -webkit-mask: -webkit-linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
}

.pc .play {
    width: 4.9vw;
    height: 4.9vw;
    position: absolute;
    top: 5vw;
    left:  12.6vw;
    z-index: 1;
    cursor: pointer;

}

.pc .play:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

.pc .modal_volume {
    position: fixed;
    text-align: center;
    width: 100%;
    height: 100%;
    top: 5%;
    z-index: 10;
    display: none;
}

.pc .modal {
    position: relative;
}

.pc .xlzm {
    width: 56.15vw;
    height: 40vw;
    margin-left: 22.5vw;
}

.pc .download1 {
    width: 20vw;
    height: 4.1vw;
    position: absolute;
    top: 40vw;
    left: 40vw;
    cursor: pointer;
}

.pc .download1:active {
    width: 20vw;
    height: 4.1vw;
    background-image: url("../images/downloadActive.png");
    background-size: 100% 100%;
}

.pc .course-video {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    background-image: url("../images/back.png");
    background-size: cover;
}

.pc .video_header {
    display: flex;
    justify-content: space-between;
    margin: 1vw 20vw;
}

.pc .logo1 {
    font-size: 1.56vw;
    padding-top: 1vw;
    font-family: Microsoft YaHei;
    color: #fff;
}

.pc .return {
    width: 14.5vw;
    height: 3.5vw;
    cursor: pointer;
    color: #fff;
    font-size: 2vw;
    padding-top: 0.8vw;
    padding-left: 6vw;
    background-image: url("../images/backbtn.png");
    background-size: 100% 100%;
}

.pc .return:active {
    width: 14.5vw;
    height: 3.5vw;
    color: #fff;
    background-image: url("../images/backActive.png");
    background-size: 100% 100%;
}

.pc .progress {
    width: 100%;
    height: 13px;
    position: relative;
    border-radius: 20px;
    background-color: #e2e2e2;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: block;
    margin-top: 3px;
}

.pc .progress_bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    max-width: 100%;
    height: 13px;
    border-radius: 20px;
    text-align: right;
    background-color: #5FB878;
    transition: all .3s;
    -webkit-transition: all .3s;
}

.pc .progress_text {
    text-align: right;
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
}

.mobile .container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-image: url("../images/back.png");
    background-size: 100% 100%;
}

.mobile .back {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -1;
}

.mobile .content {
    z-index: 0;
    margin: 4.1vw 5vw;
    display: flex;
    flex-direction: column;
}

.mobile .top {
    display: flex;
}

.mobile .logo {
    width: 30.98vw;
    height: 5.26vw;
}

.mobile .download {
    width: 20vw;
    height: 4.1vw;
    margin-left: 40vw;
    margin-top: 0.56vw;
}

.mobile .download:active {
    width: 20vw;
    height: 4.1vw;
    margin-left: 40vw;
    margin-top: 0.56vw;
    background-image: url("../images/downloadActive.png");
    background-size: 100% 100%;
}

.mobile .title {
    width: 90vw;
    height: 35.31vw;
    margin-top: 2.7vw;
}

.mobile .intro_title {
    width: 90vw;
    height: 15vw;
    margin-top: 7.29vw;
}

.mobile .introduction {
    width: 90vw;
    height: 58.5vw;
    margin-top: 1vw;
    background-image: url("../images/introduction.png");
    background-size: 100% 100%;
}

.mobile .introduction_text {
    width: 81vw;
    height: 20.8vw;
    padding-top: 8.8vw;
    padding-left: 3.8vw;
    font-size:3.5vw;
    line-height: 4.57vw;
    color: #fff;
    text-indent: 2em;
}

.mobile .video_title {
    width: 90vw;
    height: 15vw;
    margin-top: 1vw;
}

.mobile .videos {
    display: flex;
    flex-flow: row wrap;
    margin-top: 0.78vw;
}

.mobile .video {
    width: 90vw;
    height: 75vw;
    background-image: url("../images/video_bk.png");
    background-size: 100% 100%;
}

.mobile .video_top {
    display: flex;
}

.mobile .video_num {
    width: 10vw;
    height: 10.5vw;
    background-image: url("../images/num.png");
    background-size: 100% 100%;
    color: #fff;
    font-size: 3vw;
    margin-top: 2.4vw;
    margin-left: 3.2vw;
}

.mobile .num {
    margin-top: 1vw;
    margin-left: 1.5vw;
}

.mobile .video_pro {
    width: 28vw;
    height: 5vw;
    background-image: url("../images/video_pro.png");
    background-size: 100% 100%;
    color: #fff;
    font-size: 3vw;
    margin-top: 2.3vw;
    margin-right: 0.95vw;
    margin-left: 45.56vw;
}

.mobile .pro {
    padding-top: 0.42vw;
    padding-left: 4.5vw;
}

.mobile .video_name {
    color: #fff;
    font-size: 3.5vw;
}

.mobile .name {
    width: 88vw;
    height: 10vw;
    margin-left: 10vw;
    margin-top: 10vw;
}

.mobile .video_content {
    position: relative;
}

.mobile .imgCover {
    width: 62vw;
    height: 40.5vw;
    margin-top: -3.6vw;
    margin-left: 14.3vw;
    -webkit-mask: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mobile .play {
    width: 10vw;
    height: 10vw;
    position: absolute;
    top: 15vw;
    left: 40vw;
    z-index: 1;
    cursor: pointer;

}

.mobile .play:active {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}
.mobile .modal {
    position: relative;
    left: 5vw;
}

.mobile .xlzm {
    width: 80vw;
    height: 65vw;
}
.mobile .zm{
    width: 90vw;
    height: 65vw;
}

.mobile .download1 {
    width: 30vw;
    height: 7.1vw;
    position: absolute;
    top: 70vw;
    left: 30vw;
    cursor: pointer;
}

.mobile .download1:active {
    width: 30vw;
    height: 7.1vw;
    background-image: url("../images/downloadActive.png");
    background-size: 100% 100%;
}
.mobile .course-video {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    background-image: url("../images/back.png");
    background-size: cover;
}

.mobile .video_header {
    display: flex;
    justify-content: space-between;
    margin: 4vw 19vw;
}

.mobile .logo1 {
    font-size: 3vw;
    padding-top: 1vw;
    font-family: Microsoft YaHei;
    color: #fff;
}

.mobile .return {
    font-size: 3vw;
    margin-top: 1vw;
    z-index: 1;
    width: 20vw;
    height: 4.1vw;
    cursor: pointer;
    color: #fff;
    padding-left:7vw;
    padding-top: 0.5vw;
    background-image: url("../images/backbtn.png");
    background-size: 100% 100%;
}

.mobile .return:active {
    width: 20vw;
    height: 4.1vw;
    background-image: url("../images/backActive.png");
    background-size: 100% 100%;
}


.mobile .progress {
    width: 100%;
    height: 3vw;
    position: relative;
    border-radius: 20px;
    background-color: #e2e2e2;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: block;
    /*margin-left: 10px;*/
    margin-top: 4px;
}

.mobile .progress_bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    max-width: 100%;
    height: 3vw;
    border-radius: 20px;
    text-align: right;
    background-color: #5FB878;
    transition: all .3s;
    -webkit-transition: all .3s;
}

.mobile .progress_text {
    text-align: right;
    padding: 0 10px;
    color: #fff;
    font-size: 0.4vw;
    line-height: 3vw;
}

.tologin {
    margin-top: 20vw;
    text-align: center;
    font-size: 2.5vw;
    color: #909399;
}

.pc .video_box{
    margin: 0px auto;
}

.mobile .video_box{
    margin: 0px auto;
}

.vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}