/* Created by kong 20210513 */

/* reset */
html, body, div, span, p, a, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, cite, code, em, del, font, img, ins, small, strong, b, i, center, form, label, input, textarea, button, select, th, td { padding:0; margin:0;}
ol, ul, li, dl, dt, dd { list-style:none;}
h1, h2, h3, h4, h5, h6 { font-size:1em;}
em, i, cite { font-weight:normal; font-style:normal;}
img, iframe { border:none; vertical-align:top;}
table { border-collapse:collapse; border-spacing:0;}
input, textarea, button, select { border:none; outline:none; font-family:Microsoft Yahei;}
body { font-size: 14px; line-height: 24px; font-family: Microsoft Yahei; color: #999;}
a { text-decoration: none; color: #333; transition: all 0.25s; }
a:hover { text-decoration: underline; color: #ff752e; }

/* common */
.wrap { width: 1200px; margin: 0 auto; overflow: hidden;}
.clear {clear:both; height: 0; line-height: 0; font-size: 0}
.tab .tabnav em {cursor: pointer;}
.tab .tabnav em a:hover { text-decoration: none;}
.tab .tabsingle { display:none;}
.tab .tabsingle:first-child { display:block;}

.search { margin-top: 40px; height: 40px; color:#999; font-size: 14px; line-height: 40px; overflow: hidden;}
.search a { color:#999;}
.search a:hover { color: #ff752e;}
.search input { float:left; width:596px; padding-left:18px; height:38px; line-height:38px; border:#d8d8d8 1px solid; border-right:0; border-radius:5px 0 0 5px;}
.search button { float:left; width:44px; height:40px; border:#d8d8d8 1px solid; border-left:0; border-radius:0 5px 5px 0; background:url(../images/icon_search.png) center center no-repeat; cursor:pointer;}

.header {height:80px; line-height: 80px; box-shadow: 5px 0 7px 0 rgb(0,0,0,0.1);}
.header .wrap { height: 100%;}
.header .logo { float: left; width: 358px; height: 100%; background: url("../images/logo2.png") left center no-repeat;}
.header .logo a { display: block; height: 100%;}
.header .search { float:right; margin-top: 20px;}
.header .search form { float: right; margin-left: 40px;}
.header .search input { width:236px;}

.banner { height: 400px; min-width: 1200px; background: url("../images/banner.jpg") center top no-repeat;}

.side { width:120px; float:left; margin-right: 40px;}
.main { width:660px; float:left;}
.secondary { width: 340px; float: right;}

.nav { font-size: 18px; line-height: 52px; text-align: center; color: black; margin-top: 40px;}
.nav li a { display: block; border-radius: 5px;}
.nav li a.current, .nav li a:hover { background: #ff752e; color: white; text-decoration: none;}

.title { font-size: 24px; line-height: 24px; color: black; margin-top: 40px;}
.title span {font-size: 18px; float: right;}
.title span.refresh { padding-left: 24px; background: url("../images/icon_refresh.png") left center no-repeat; cursor: pointer;}
.title span.refresh:hover { text-decoration: underline; color: #ff752e; }

.item-data { float: left; font-size: 14px; line-height: 16px; color: #999; margin-right: 20px; padding-left: 27px; background: url("../images/icon_readed.png") left center no-repeat;}
.item-data.heard { padding-left: 22px; background-image: url("../images/icon_heard.png");}
.item-data.liked { padding-left: 24px; background-image: url("../images/icon_liked.png");}
.item-data.readed { padding-left: 27px; background-image: url("../images/icon_readed.png");}
.item-data.watched { padding-left: 29px; background-image: url("../images/icon_watched.png");}

.item-broadcast { margin-top: 40px; height: 144px; padding: 38px 40px; background: url("../images/bg_broadcast.jpg") no-repeat; position: relative;}
.item-broadcast img { float: left; margin-right: 30px; width: 230px; height: 100%; border-radius: 5px;}
.item-broadcast strong { display: block; font-size: 18px; line-height: 30px; font-weight: normal; margin-top: 5px; height: 60px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.item-broadcast p { font-size: 18px; line-height: 18px; color: #333; margin-top: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.item-broadcast p b {font-size: 14px; font-weight: normal; margin-left: 10px;}
.item-broadcast i { display: block; font-size: 16px; line-height: 16px; color: #999; margin-top: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.item-broadcast .item-data { margin-top: 50px;}
.item-broadcast span { position: absolute; right: 0; top: 141px; width: 125px; height: 43px; font-size: 18px; line-height: 40px; color: white; text-indent: 42px; background: url("../images/bg_online.png") no-repeat;}
.item-broadcast span a { display: block; color: white;}
.item-broadcast sup { position: absolute; left: 40px; top: 0; width: 110px; height: 28px; background: url("../images/icon_replay.png") no-repeat;}

.item-video { margin-top: 40px;}
.item-video .cover { display: block; width: 100%; height: 370px; border-radius: 5px; overflow: hidden; position: relative;}
.item-video .cover::after { content:""; position:absolute; width:100%; height:100%; background: rgba(0,0,0,0.2) url(../images/icon_play.png) center center no-repeat; top:0; left:0;}
.item-video img {width: 100%; height: 100%;}
.item-video strong { display: block; font-size: 18px; line-height: 18px; font-weight: normal; margin-top: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.item-video .item-data { float: right; margin: 21px 0 0 20px;}

.artlist { margin-top: 20px;}
.item-art { height: 100px; padding: 20px 0; border-bottom: #eee 1px solid; overflow: hidden;}
.item-art img { float: left; width: 160px; height: 100%; border-radius: 5px; margin-right: 25px;}
.item-art strong { display: block; font-size: 18px; line-height: 24px; font-weight: normal; margin-top: 7px; height: 48px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.item-art strong b { color: #e2011f; font-weight: normal;}
.item-art i { display: block; margin-top: 17px; font-size: 14px; line-height: 14px; color: #999;}
.item-art .item-data { margin-top: 18px;}
.searchlist { margin-top: 30px;}
.searchlist .item-art { height: auto; padding: 10px 0 20px;}
.searchlist .item-art strong {height: auto; max-height: 48px;}
.item-art.large { margin-top: 50px; height: 174px; padding: 0; border: none;}
.item-art.large img { width: 280px; margin-right: 30px;}
.item-art.large strong { line-height: 30px; margin-top: 5px; height: 60px;}
.item-art.large p { font-size: 14px; line-height: 24px; margin-top: 6px; height: 72px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.item-art.large .item-data { margin-top: 15px;}

.audiolist { display:flex; justify-content: space-between; flex-wrap: wrap;}
.item-audio { width: 150px; margin-top: 20px;}
.item-audio .cover { display: block; width: 150px; height: 150px; border-radius: 5px; background: url("../images/bg_nothumb.png") no-repeat; overflow: hidden; position: relative;}
.item-audio .cover::before { content:""; position:absolute; width:100%; height:100%; background: rgba(0,0,0,0.2) url(../images/icon_play.png) center center no-repeat; background-size: 42px; top:0; left:0;}
.item-audio .cover.ablum::after { content:"\4e13\8f91"; position:absolute; width:42px; height:22px; font-size: 14px; line-height: 22px; text-align: center; color: white; background: rgba(0,0,0,0.2); border-radius: 0 5px 0 0; left:0; bottom: 0;}
.item-audio .cover .heard { position: absolute; left: 10px; bottom: 8px; color: white; background-image: url("../images/icon_heard_white.png");}
.item-audio img { width: 100%; height: 100%;}
.item-audio strong { display: block; font-size: 16px; line-height: 24px; font-weight: normal; margin-top: 7px; height: 48px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.item-audio.large { width: 305px; margin-top: 40px; padding-right: 15px; background: #f8f8f8; border-radius: 5px;}
.item-audio.large .cover { float: left; margin-right: 20px;}
.item-audio.large strong { font-size: 18px; margin-top: 24px;}
.item-audio.large .item-data { margin-top: 35px; margin-right: 14px;}
.item-audio.large .item-data:last-child {margin-right: 0;}

.item-course { margin-top: 40px; height: 156px; color: white; padding: 30px 35px 30px 60px; background: url("../images/bg_course.png") no-repeat;}
.item-course a { color: white;}
.item-course img { float: left; width: 130px; height: 100%; margin-right: 35px;}
.item-course strong { display: block; font-size: 18px; line-height: 18px; font-weight: normal; margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.item-course p { font-size: 18px; line-height: 18px; margin-top: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.item-course p b {font-size: 16px; font-weight: normal; margin-left: 10px;}
.item-course span { display: block; font-size: 14px; line-height: 40px; text-indent: 20px; margin-top: 48px;}
.item-course span a { float: right; margin-right: 24px; font-size: 16px;}

.index .item-broadcast { margin-top: 20px;}
.index .item-video { margin-top: 50px;}
.index .item-video { margin-top: 50px;}

.recommend { display: flex; justify-content: space-between; flex-wrap: wrap;}
.recommend dd { width: 250px; padding: 30px 40px 30px 30px; margin-top: 20px; background: #f8f8f8 url("../images/bg_recommend_green.png") center top no-repeat; border-radius: 5px;}
.recommend dd:nth-child(2n) {background-image: url("../images/bg_recommend_blue.png");}
.recommend img { float: right; width: 100px; height: 120px; margin-left: 20px;}
.recommend strong { display: block; color: white; font-size: 20px; line-height: 20px; margin-bottom: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.recommend strong a {color: white;}
.recommend p { font-size: 18px; line-height: 30px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.recommend p a {color: white;}
.recommend p b { font-size: 14px; font-weight: normal; margin-left: 5px;}
.recommend ul { font-size: 16px; line-height: 36px; color: #333; margin-top: 40px; clear: both;}
.recommend li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.recommend li a { margin-left: 15px;}
.recommend span { display: block; font-size: 16px; line-height: 16px; color: #999; margin-top: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.recommend span a { color: #999;}
.recommend span a:hover { color: #ff752e;}

.secondary .title { font-size: 20px; line-height: 20px; margin-top: 35px;}

.hot { margin-top: 40px; background: #f8f8f8 url("../images/icon_hot.png") right 28px top no-repeat; border-radius: 5px; padding: 0 30px 40px; overflow: hidden;}
.hot .item-art { height: 75px; padding: 30px 0 0; border: none;}
.hot .item-art img {width: 120px; margin-right: 12px;}
.hot .item-art strong { font-size: 14px; margin-top: 0px;}
.hot .item-art .item-data { margin-top: 7px;}

.brand { margin-top: 30px; background: #f8f8f8; border-radius: 5px; padding: 0 30px 25px; overflow: hidden;}
.brand dl { margin-top: 25px; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.brand dd { width: 50%; font-size: 16px; line-height: 36px; color: black; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.brand dd a { color: black;}
.brand dd a:hover { color: #ff752e;}

.sidebar {position: fixed; right: 20px; top:520px; z-index: 999;}
.sidebar div { width: 40px; height: 40px; margin-bottom: 2px; border-radius: 5px; background: #f7f7f7 url("../images/icon_link.png") center center no-repeat; cursor: pointer; transition: background-color 0.25s;}
.sidebar div:hover { background-color: #f2f2f2;}
.sidebar div a {display: block; width: 100%; height: 100%;}
.sidebar div.wechat {background-image: url("../images/icon_wechat.png");}
.sidebar div.weibo {background-image: url("../images/icon_weibo.png");}
.sidebar div.qzone {background-image: url("../images/icon_qzone.png");}
.sidebar div.link {background-image: url("../images/icon_link.png");}
.sidebar div.gototop {background-image: url("../images/icon_gototop.png");}
.sidebar em { display: none; position: absolute; top: 0; left: -133px; width: 100px; height: 100px; padding: 10px 18px 32px 11px; background: url("../images/bg_qrcode.png") no-repeat}

.footer { margin-top: 50px; height: 105px; padding-top: 33px; font-size: 14px; line-height: 24px; color: white; text-align: right; background:url("../images/bg_footer.png") center top no-repeat;}
.footer .wrap { background: url("../images/logo.png") left center no-repeat;}
.footer a { color: white;}

.loadmore { margin-top: 50px; font-size: 16px; line-height: 16px; text-align: center; color: #666;}
.loadmore span { padding-right: 20px; background: url("../images/icon_load.png") right center no-repeat; cursor: pointer;}
.loadmore span:hover {color: #ff752e;}

.pageno { padding-top:40px; text-align:center;}
.pageno span, .pageno b, .pageno a, .pageno i { display:inline-block; width: 36px; height:36px; line-height:36px; border-radius: 5px; text-align:center; font-size: 16px; color: #666; vertical-align: top; overflow:hidden;}
.pageno b { background:#ff752e; color:white; font-weight: normal;}
.pageno>a:hover {background:#ff752e; color:white; text-decoration:none;}
.pageno span { background: url(../images/slide_41.jpg) center center no-repeat; margin: 0 10px;}
.pageno span:last-child { background-image: url(../images/slide_42.jpg);}
.pageno span a { background: url(../images/slide_31.jpg) center center no-repeat;}
.pageno span:last-child a { background-image:url(../images/slide_32.jpg);}

.article { margin-top:40px;}
.article h1 { font-size:30px; line-height:36px; color:#333; font-weight:normal;}
.article .date { display:block; margin-top: 22px; font-size:14px; line-height:16px; color: #999;}
.article .date .item-data { float: right; margin: 0 0 0 20px;}
.article .content { color:#333; font-size:16px; line-height:28px; margin-top: 28px;}
.article .content p { padding-bottom:20px;}
.article .content img { max-width:100%; margin:0 auto; display:block;}

.audioplayer { margin-top: 40px; height: 385px; padding: 50px 50px 45px; background: url("../images/bg_player.png") right top no-repeat;}
.audioinfo { overflow: hidden;}
.audioinfo img {float: right; margin-left: 65px; width: 220px; height: 220px; border-radius: 10px;}
.audioinfo strong { display: block; margin-top: 25px; font-size: 18px; line-height: 30px; font-weight: normal; color: #333; height: 120px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}
.audioinfo .item-data {margin-top: 38px; color: #cfa972;}
.audioinfo .item-data.heard {background-image: url("../images/icon_heard_brown.png");}
.audioinfo .item-data.liked {background-image: url("../images/icon_liked_brown.png");}

.likebutton { cursor: pointer; background-image: url("../images/icon_liked_red.png");}
.likebutton.dislike {background-image: url("../images/icon_liked.png");}
.articlelike { margin-top: 20px; text-align: center;}
.articlelike .likebutton { display: inline-block; font-size: 14px; line-height: 44px; color: #999; border:#b6b6b6 1px solid; border-radius: 44px; padding: 0 28px 0 50px; background-position: 27px center; background-repeat: no-repeat; vertical-align: top;}
.audioinfo .likebutton.liked { background-image: url("../images/icon_liked_red.png");}
.audioinfo .likebutton.dislike { background-image: url("../images/icon_liked_brown.png");}

.audiojs { margin-top: 48px; height: 120px; overflow: hidden; position: relative;}
.audiojs .play-pause { width: 42px; height: 48px; position: absolute; margin-left: -21px; left: 50%; bottom:0;}
.audiojs p { display: none; width: 100%; height: 100%; cursor: pointer; background:url("../images/icon_player_play.png") center center no-repeat;}
.audiojs .play { display: block;}
.audiojs .pause { background-image:url("../images/icon_player_pause.png");}
.audiojs .scrubber { position: relative; margin-top: 28px; background: #f8f8f8; height: 3px; overflow: hidden; cursor: pointer;}
.audiojs .progress { position: absolute; top: 0px; left: 0px; height: 100%; width: 0px; background: #cfa972; z-index: 1;}
.audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 100%; width: 0px; background: white;}
.audiojs .time { width: 100%; font-size: 16px; line-height: 16px; color: #fcf1d7; position: absolute; left: 0; top: 0;}
.audiojs .time em { float: left; color: #999;}
.audiojs .time strong { float: right; color: #999; font-weight: normal;}
.audiojs .error-message { display: none; font-size: 14px; line-height: 36px; color: #cfa972; text-align: center; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;}
.audiojs .error-message a { color: #cfa972;}
.audiojs .error-message a:hover { color: #c0975d;}
.playing .play, .playing .loading, .playing .error { display: none;}
.playing .pause { display: block;}
.loading .play, .loading .pause, .loading .error { display: none;}
.loading .loading { display: block;}
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none;}
.error .error { display: block;}
.error .play-pause p { cursor: auto;}
.error .error-message { display: block;}

.tab { margin-top: 40px;}
.tabnav { font-size: 24px; line-height: 24px; text-align: left; border-bottom: #f3f4f5 1px solid;}
.tabnav em { display: inline-block; color: #999; min-width: 50px; padding-bottom:15px; margin: 0 35px 0 0; vertical-align: top;}
.tabnav em.current, .tabnav em:hover { color: #333; background: url("../images/bg_current_brown.png") center bottom no-repeat;}
.green .tabnav em.current, .green .tabnav em:hover { background-image: url("../images/bg_current_green.png");}

.tab.relative { margin-top: 30px;}
.tab.relative .tabnav { text-align: center;}
.tab.relative .tabnav em { margin: 0 35px;}
.item-relative { height: 50px; padding: 30px 0; border-bottom: #f8f8f8 1px solid; overflow: hidden;}
.item-relative i { float: left; width: 65px; height: 50px; font-size: 18px; line-height: 50px; color: #333; text-align: center;}
.item-relative strong { display: block; font-size: 16px; line-height: 16px; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.item-relative .item-data { margin-top: 18px;}
.intro { color:#333; font-size:16px; line-height:28px; margin-top: 24px;}
.intro p { padding-bottom:20px;}
.intro img { max-width:100%; margin:0 auto; display:block;}

.noresult { margin-top: 110px; height: 138px; background: url("../images/bg_noresult.png") center center no-repeat;}

.tags { overflow: hidden; margin-top: 40px;}
.tags a { display: inline-block; vertical-align: top; padding: 0 28px; margin: 10px 10px 0 0; font-size: 18px; line-height: 50px; color: #333; border-radius: 5px; background: #f8f8f8;}
.tags a:hover { text-decoration: none; color: white; background: #ff752e;}