@charset "utf-8";
/* CSS Document */

.banner{ width: 100%; height: 420px; background: url(../images/course/banner.jpg)no-repeat center top; background-size: 100% auto; position: relative; align-items: center; display: flex; margin-top: 66px;}
.banner .text{ position: absolute; left: 15%;}
.banner .text h1{ font-size: 36px; color: #fff; font-weight: bold;}
.banner .text i{ width: 30px;height: 4px; background: #f86d22; display: inline-block; margin-top: 20px; margin-bottom: 30px;}


.course{ background: #f3f6f8; width: 100%; padding: 50px 0;}
#video{ width: 70%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;} 
#video li{ width: calc(33.3% - 20px); background: #fff; margin: 20px 0 20px; max-width: 474px;}
#video li p{ text-align: center; font-size: 16px; font-weight: 600; line-height: 60px; display: none;}
#video li .play_box{ width: calc(100% - 20px); position: relative; padding: 10px; margin: 0 auto;}
#video li .play_box .play_img{ position: absolute; bottom: 20px; right: 20px;}
#video li .play_box .course_img{width: 100%; height: auto; max-width: 454px;}
#video_play{ position: fixed; top:0; left: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); text-align: center; display: none;}
.course_video{ width: 100%; height: 100%; display: none; align-items: center;}
 .course_video video{ width: auto; height: 60%; margin: 0 auto; margin-top: 20px;}
.course_video .ico_close{ position: absolute; top: 15%; right: 20%; cursor: pointer;}


@media(max-width:1920px)
{
    .banner{ background-size: auto 100%;}
}
@media(max-width:1669px)
{
    #video{ justify-content: space-between; width: 84%;}
    .banner .text{ position: absolute; left:8%;}

}
@media(max-width:1500px)
{
    #video{ justify-content: space-between; width: 84%;}
}
@media(max-width:1366px)
{
    #video{ justify-content: space-between; width: 84%;}
}
@media(max-width:960px)
{
    .banner{ height: 180px;}
    .banner .text h1{ font-size: 24px; width: 220px;}
    .banner .text i{ width: 20px; height: 3px; margin-bottom: 0;}
    #video{ justify-content: space-between; width: calc(100% - 30px);}
    #video li{ width: calc(50% - 5px); margin: 0 0 10px;}
    #video li .play_box .play_img img{width: 20px; height: 20px;}
    .course{ padding: 30px 0;}
    .course_video video{ width: 100%; height: auto;}
    .course_video .ico_close{ width: 24px; bottom: 10%; top: auto; right: calc(50% - 12px);}
    .course_video .ico_close img{width: 24px ; height: auto;}


}