html,body{
    width:100%;
    height:100%;
    overflow-y: auto;
}
body{
    background: #2C2C2C;
}
.page{
    min-width:1200px;
    min-height:863px;
    position: relative;
}
.container{
    width:1200px;
    margin:0 auto;
}
.page-header{
    height:76px;
    background:rgba(0,0,0,0.8);
}
.page-header .logo{
    float: left;
    height:32px;
    padding:22px 0;
}
.page-header .logo img{
    height:100%;
}
.page-header nav{
    float: right;
    height:76px;
    position: relative;
    z-index: 50;
}
.page-header nav .first-level{
    float: left;
    height:76px;
    position: relative;
}
.page-header nav .first-level .menu-title,.page-header nav .first-level .link{
    color:#fff;
    display: block;
    line-height: 76px;
    padding:0 17px;
    font-size: 18px;
    cursor: pointer;
}
.page-header nav .first-level .menu-title{
    position: relative;
    z-index: 50;
}
.page-header nav .first-level.menu .drop-menu{
    position: absolute;
    left: -28px;
    top: 76px;
    width: 166px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 2px;
    text-align: center;
    z-index: 20;
    overflow: hidden;
    display: none;
}
.page-header nav .first-level.menu:hover .drop-menu{
    display: block;
}
.page-header nav .second-level a{
    height: 40px;
    line-height: 40px;
    display: block;
    color:#fff;
    font-size: 18px;
}
.page-header nav .first-level .link:hover,
.page-header nav .second-level a:hover,
.page-header nav .first-level:hover .menu-title{
    color:#FF6D1D;
}
.page-body{
    height:580px;
    background: #242424;
    color:#fff;
    overflow:hidden;
}
.page-body .webinar-title{
    font-size: 20px;
    margin-top:38px;
}
.page-body .date{
    color:#9c9c9c;
    line-height:36px;
}
.data-container{
    height:580px;
}
.data-container .webinar-cover{
    width:800px;
    height:450px;
    float: left;
    position: relative;
    overflow-y: hidden;
}
.data-container .webinar-cover img{
    width:800px;
    height:450px;
}
.data-container .shade{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background:rgba(43,43,43,0.3);
    display: none;
}
.data-container .shade a{
    display: block;
    width:70px;
    height:70px;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-35px;
    margin-top:-50px;
}
.data-container .webinar-cover:hover .shade{
    display: block;
}
.data-container .shade a img{
    width:100%;
    height:100%;
}
.data-container .shade a span{
    color:#fff;
    display: block;
    line-height: 30px;
    font-size: 16px;
}
.data-content{
    width:365px;
    height:440px;
    padding:10px 10px 0 10px;
    background: #141414;
    float: right;
}
.data-content .user-info{
    height:50px;
    margin:0;
}
.data-content .user-info img{
    float: left;
    border-radius: 50%;
    width:50px;
    height:50px;
}
.data-content .user-info figcaption{
    margin-left:60px;
}
.data-content .user-info h3{
    color:#fff;
    line-height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
}
.data-content .user-info p{
    color:#B7B7B7;
    line-height: 25px;
    font-size: 16px;
}
.data-content article{
    margin-top:20px;
    height:360px;
    overflow-y: auto;
    padding-bottom:10px;
}
.data-content article h4{
    height:28px;
    font-size:20px;
    color:#fff;
    line-height:28px;
}
.data-content article p{
    font-size:16px;
    color:#DBDBDB;
    line-height:24px;
    margin-bottom:10px;
    margin-top:5px;
}
.page-footer{
    width:100%;
    height:134px;
    background: #2C2C2C;
    text-align: center;
    color:#979797;
    overflow: hidden;
    position: absolute;
    left:0;
    bottom:0;
}
.page-footer .foot-link{
    margin-top:40px;
}
.page-footer .foot-link li{
    display: inline-block;
}
.page-footer .foot-link li a{
    color:#979797;
    margin:0 10px;
    font-size: 16px;
}
.page-footer p{
    font-size:14px;
    margin-top:10px;
}