@charset "UTF-8";
/*
 * OFweek直播 首页样式
*/

/* layout-banner */
.layout-banner{ position: relative; width: 1200px; height: 280px; margin: 0 auto; }
.banner-tab-item{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.banner-tab-item { width: 740px; background-color: #fff; animation-duration: 1s; animation-fill-mode: both; }
.banner-active{ z-index: 3; }
.banner-tab-item a{ position: relative; display: block; width: 100%; height: 100%; }
.banner-tab-item a img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; animation-duration: 1s; animation-fill-mode: both; }
.banner-tab-item a img.active { z-index: 3; opacity: 1; }
.banner-content{ position: absolute; top: 0; left: 80px; padding: 70px 0 0; }
.banner-content .title{ margin: 15px 0 65px; font-size: 28px; color: #fff; }
.banner-content .title h2{ display: inline; font-size: 28px; font-weight: normal; }
.banner-content .button{ float: left; width: 135px; height: 38px; margin: 0 0 0; text-align: center; line-height: 38px; border-radius: 2px; }
.banner-content .button:link, .banner-content .button:visited{ color: #fff; background: #108EE9; }
.banner-content .button:hover{ background: #0480d8; text-decoration: none; }
.banner-content .button img{ margin: 9px 5px 0 0; }
.banner-tab-tags{ position: absolute; top: 0; right: 0; z-index: 9; width: 460px; height: 100%; color: #fff; background: url(../img/banner_line.png) 30px 30px no-repeat #EEEEEE; }
.banner-tab-tags ul{ box-sizing: border-box; height: 100%; padding: 16px 0 0; font-size: 14px; }
.banner-tab-tags li{ position: relative; line-height: 41px; border-left: 3px solid transparent; }
.banner-tab-tags li:after{ display: inline-block; width: 0; height: 100%; content: ' '; vertical-align: middle; }
.banner-tab-tags li.active{ border-color: #0076FF; background: #fff; }
.banner-tab-tags a{ position: absolute; right: 0; top: 0; box-sizing: border-box; overflow: hidden; display: inline-block; width: 100%; padding: 0 0 0 115px; height: 100%; color: #353B42; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.banner-tab-tags a:link, .banner-tab-tags a:visited{ color: #353B42; text-decoration: none; }
.banner-tab-tags .btt-underway:link, .banner-tab-tags .btt-underway:visited{ color: #0076FF; }
.btt-tag{ position: relative; display: inline-block; margin-left: 40px; vertical-align: middle; font-size: 12px; line-height: 1.5; }
.btt-status{ padding: 0 5px; background: #565656; }
.btt-replay{ color: #868686; background: none; }
.btt-time{ color: #868686; text-align: center; }
.btt-icon{ position: absolute; left: -22px; width: 18px; text-align: center; background-color: #EEEEEE; transition: all 0.25s; }
.btt-icon img{ vertical-align: middle; }
.banner-tab-tags li.active .btt-icon{ background-color: #fff; }

/* layout-column */
.layout-column{ padding-bottom: 30px; }
.column-hd{ padding: 35px 0 25px; }
.column-title{ float: left; padding: 0 0 0 10px; margin-right: 40px; font-weight: normal; font-size: 24px; line-height: 1.2; border-left: 4px solid #353B42; }
.column-title-sub{ padding: 8px 0 0; line-height: 20px; }
.column-title-sub a:link, .column-title-sub a:visited{ margin-right: 10px; color: #333; }
.column-title-sub a:hover{ color: #cc0000; text-decoration: none; }
.column-more{ float: right; margin: 6px 0 0; line-height: 1; }
.column-more img{ height: 12px; margin: 1px 0 0 2px; }
.column-more:link, .column-more:visited{ color: #0076FF; }
.column-more:hover{ opacity: .7; text-decoration: none; }

/* layout-slide */
.layout-slide{ position: relative; }
.layout-slide .prev, .layout-slide .next{ position: absolute; top: 47px; width: 45px; height: 75px; cursor: pointer; }
.layout-slide .prev img, .layout-slide .next img{ position: absolute; left: 12px; top: 20px; height: 35px; }
.layout-slide .prev .active, .layout-slide .next .active{ opacity: 0 }
.layout-slide .prev:hover, .layout-slide .next:hover{ box-shadow: 0 1px 3px 0 #ccc; }
.layout-slide .prev:hover .active, .layout-slide .next:hover .active{ opacity: 1; z-index: 1; }
.layout-slide .prev{ display: none; left: -57px; }
.layout-slide .next{ display: none; right: -57px; }
.layout-slide .wrap{ overflow: hidden; position: relative; width: 100%; height: 270px; }
.layout-slide .wrap ul{ overflow: hidden; float: left; width: 200%; }
.layout-slide .live-item{ float: left; height: 270px; margin-right: 48px; }
.layout-slide .live-item .bd{ height: 44px; margin-top: 9px; font-weight: bold; font-size: 15px; }

/* to-all */
.to-all{ padding-bottom: 45px; }
.to-all .btn{ display: block; width: 470px; height: 43px; margin: 0 auto; text-align: center; line-height: 43px; border-radius: 2px; }
.to-all .btn:link, .to-all .btn:visited{ color: #0076FF; border: 1px solid #0076FF; background-color: #fff; }
.to-all .btn:hover{ color: #fff; background: #0076FF; text-decoration: none; }

/* fixed-live-item */
.fixed-live-item { overflow: hidden; }
.fixed-live-item ul{ overflow: hidden; width: 1270px; max-height: 485px; }
.fixed-live-item .live-item{ float: left; margin: 0 48px 30px 0; }
.fixed-live-item .live-item .bd{ height: 44px; margin-top: 9px; font-weight: bold; font-size: 15px; }