p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    width: 100%;
    margin: 0;
    background-color: #cbf0ff;
    min-height: 100vh;
    font-family: sans-serif;
    color: #3E3E3E;
    position: relative;
}

::-webkit-scrollbar {
    display: none;
}

[v-cloak] {
    opacity: 0;
}

.font-title {
    font-size: 4vw;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.font-source {
    font-size: 3.2vw;
    color: #1BA9E2;
}

.font-source::before {
    content: " ";
    background: url(images/icon-card.svg) center center no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 4vw;
    height: 4.5vw;
    margin-right: 1vw;
    vertical-align: bottom;
}

.font-summary {
    font-size: 3.2vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    opacity: 0.7;
}

.font-source:empty,
.font-summary:empty {
    display: none;
}

#app {
    width: 100vw;
    min-height: calc(100vh - 40vw);
    position: relative;
}

img {
    display: block;
    width: 100%;
}

section {
    display: block;
    width: 92vw;
    margin: 3vw 4vw;
    font-size: 4vw;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 导航条 */
/* 第一版纯文字导航 */
.daohang {
    overflow-x: scroll;
    background-color: #1BA9E2a0;
    border-radius: 2vw;
    width: 88vw;
    border: transparent solid 2vw;
    margin-top: 0;
}

.daohang ul {
    display: flex;
    flex-flow: row nowrap;
}

.daohang li {
    white-space: nowrap;
    padding: 1vw 1vw;
    margin: 0 1vw;
    color: white;
    border-radius: 1vw;
    font-size: 3.5vw;
}

/* 第二版图标导航 */
.daohang2 {
    background: url(images/icons-nav.png) top center no-repeat;
    background-size: 100%;
    width: 100vw;
    margin: 3vw 0;
}

.daohang2 ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-content: stretch;
    height: 37vw;
}

.daohang2 li {
    width: 18vw;
    height: 16vw;
}

.daohang2 li a {
    display: block;
    width: 100%;
    height: 100%;
}

.headline {
    background: url(images/icon-headline.png) top center no-repeat;
    background-size: 100%;
    margin: -2vw 4vw -1vw;
}

.headline marquee {
    font-size: 3.3vw;
    line-height: 5.5vw;
    margin-left: 8vw;
}

.lunbo2 {
    overflow-x: scroll;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 2vw;
    width: 91vw;
    color: #3E3E3E;
    border: white solid .5vw;
    margin-bottom: 5vw;
    white-space: nowrap;
    font-size: 0;
}

.lunbo ul {
    display: flex;
    flex-flow: row nowrap;
} 

.lunbo ul::after {
    content: "0";
    width: 0;
    color: transparent;
    height: 100%;
    background-color: transparent;
}

.lunbo li {
    border: white solid .5vw;
    margin: 2vw;
    border-radius: 1vw;
    overflow: hidden;
    width: 86vw;
    flex-shrink: 0;
}

.lunbo-zhishi {
    color: white;
    position: relative;
    margin-top: -15vw;
}

.lunbo-zhishi ul {
    display: flex;
    flex-flow: row nowrap;
    color: white;
    justify-content: center;
    padding-bottom: 6vw;
}

.lunbo-zhishi li {
    text-shadow: 0 0 2vw black;
    margin: 0 1vw;
}

/* 每个板块的小标题 */
.xiaobiaoti {
    color: #3E3E3E;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 5vw 4vw 0vw;
    width: 92vw;
}

.xiaobiaoti p {
    font-size: 5vw;
    font-weight: bold;
    position: relative;
    /* text-decoration: underline 1.2vw #96D9F1; */
}

.xiaobiaoti p::after {
    content: "";
    position: absolute;
    width: calc(100% - 7.5vw);
    height: 1vw;
    background: #96D9F1;
    bottom: 0;
    left: 7.5vw;
    border-radius: 10vw;
}

.xiaobiaoti p::before {
    content: " ";
    background: url(images/icon-title-1.png) center center no-repeat;
    background-size: 140%;
    display: inline-block;
    width: 7vw;
    height: 7vw;
    margin-right: 1vw;
    vertical-align: middle;
}

.xiaobiaoti.class2 p::before {
    background-image: url(images/icon-title-2.png);
    background-size: 120%;
}

.xiaobiaoti a {
    color: #3E3E3E;
    font-size: 3.5vw;
    opacity: 0.6;
}


/* 轮播图下面的按钮组 */
.anniuzu {
    overflow-x: scroll;
    margin-bottom: 5vw;
}

.anniuzu ul {
    display: flex;
    flex-flow: row nowrap;
}

.anniuzu li {
    flex-shrink: 0;
}

.anniuzu a {
    width: 20vw;
    text-align: center;
    font-size: 3vw;
    display: block;
    color: #3E3E3E;
}

.anniuzu p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.anniuzu img {
    width: 15vw;
    height: 15vw;
    margin: 1vw auto;
    border-radius: 10vw;
}

/* 左右结构的图文列表 */
.tuwen-zuoyou ul {
    background: white;
    border-radius: 2vw;
    overflow: hidden;
    border: 3vw solid transparent;
    border-width: 0 3vw;
}

.tuwen-zuoyou ul a {
    display: flex;
    flex-flow: row nowrap;
    width: 86vw;
    border: 3vw solid transparent;
    border-width: 3vw 0;
}

.tuwen-zuoyou a img {
    width: 30vw;
    height: 22.5vw;
    margin-right: 3vw;
    border-radius: 1vw;
}

.tuwen-zuoyou a div {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.tuwen-zuoyou li:not(:last-of-type) {
    border-bottom: 1px solid #f2f2f2;
}

.tuwen-zuoyou a[superscript]::before,
.tuwen-zuoyou a[subscript]::after,
.tuwen-zuoyou .font-summary {
    display: none;
}

/* 角标和图标 */
a[superscript],
a[subscript] {
    display: block;
    position: relative;
}

a[superscript]::before {
    content: "活动";
    position: absolute;
    top: 0;
    right: 0;
    background: orange;
    font-size: 3vw;
    color: white;
    padding: 1vw 2vw;
    border-radius: 0 1vw;
}

a[subscript]::after {
    content: " ";
    position: absolute;
    width: 8vw;
    height: 8vw;
    top: 31vw;
    right: 2vw;
    border-radius: 10vw;
    background: url(images/icon-audio.svg) center center no-repeat;
    background-size: 65%;
    background-color: rgba(0, 0, 0, 0.5);
}

a[superscript=音频]::before {
    content: "音频";
}

a[subscript=音频]::after {
    background-image: url(images/icon-audio.svg);
}

a[superscript=节目号]::before {
    content: "节目号";
}

a[subscript=节目号]::after {
    background-image: url(images/icon-headphone.svg);
}

a[superscript=活动]::before {
    content: "活动";
}

a[superscript=视频]::before {
    content: "视频";
}

a[subscript=视频]::after {
    background-image: url(images/icon-video.svg);
}

a[superscript=视频专辑]::before {
    content: "视频专辑";
    background-color: rgb(28 102 222);
}

a[superscript=视频专辑][subscript=视频]::after {
    background-image: url(images/icon-video.svg);
    top: 8vw;
    left: 17vw;
}

a[subscript=音频节目]::after {
    background-image: url(images/icon-video.svg);
    top: 31vw;
    left: 2vw;
}

a[superscript=空]::before,
a[subscript=空]::after {
    display: none;
}


/* 特别推荐位 */
.tuijian ul {
    background: #1BA9E2;
    border-radius: 2vw;
    overflow: hidden;
}

.tuijian ul a {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
}

.tuijian a img {
    width: 34.66vw;
    height: 21vw;
    margin-right: 1vw;
}

.tuijian .font-title {
    height: 11vw;
}

.tuijian a::before {
    content: "特别推荐";
    position: absolute;
    background: #de0000;
    font-size: 2.5vw;
    color: white;
    padding: .5vw 5vw;
    transform: rotate(-45deg) translate(-5.5vw, -3vw);
}

.tuijian .font-summary {
    color: #ffffffc0;
    line-height: 5vw;
    margin: 0;
}

.tuijian p:nth-of-type(3) {
    text-align: right;
    margin: 0;
}

.tuijian span {
    display: inline-block;
    font-size: 3vw;
    padding: .5vw 2vw;
    margin-right: 2vw;
    border-radius: 5vw;
    background-color: rgba(255, 255, 255, .3);
}

.tuijian a div {
    color: white;
    display: flex;
    border: 2vw solid transparent;
    flex-flow: column;
    justify-content: space-between;
    flex-grow: 1;
}

.tuijian .font-source {
    color: white;
}

.tuijian p {
    margin: 0;
}

/* 带大图的图文列表 */
.tuwen-datu ul {
    background: white;
    border-radius: 2vw;
    overflow: hidden;
    border: 3vw solid transparent;
    border-width: 0 3vw;
}

.tuwen-datu ul a {
    display: block;
    width: 86vw;
    border: 3vw solid transparent;
    border-width: 3vw 0;
    border-radius: 1vw;
}

.tuwen-datu a img {
    width: 100%;
    height: 30vw;
    border-radius: 1vw;
}

.tuwen-datu li:not(:last-of-type) {
    border-bottom: 1px solid #f2f2f2;
}

/* 方格的图文列表 */
.tuwen-fangge ul {
    background: white;
    border-radius: 2vw;
    overflow: hidden;
    border: 3vw solid transparent;
    border-width: 0 3vw;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.tuwen-fangge ul a {
    display: block;
    width: 41.5vw;
    border: 3vw solid transparent;
    border-width: 3vw 0;
    border-radius: 1vw;
}

.tuwen-fangge a img {
    width: 41.5vw;
    height: 41.5vw;
    border-radius: 1vw;
    margin-bottom: 2vw;
}

/* 基于图文方格的视频方格 */
.shipin-fangge ul a img {
    height: calc(41.5vw * 0.5625);
}

/* 基于图文方格的音频方格 */
.yinpin-fangge ul a img {
    width: 27vw;
    height: 27vw;
}

.yinpin-fangge ul a {
    width: 27vw;
}

.yinpin-fangge a:before,
.yinpin-fangge a:after,
.yinpin-fangge .font-summary,
.yinpin-fangge .font-source {
    display: none;
}

.yinpin-fangge .font-title {
    font-size: 3.5vw;
}

.yinpin-fangge li:nth-of-type(7) {
    display: none;
}

/* 滑动左右列表 */
.huadong-zuoyou {
    overflow-x: scroll;
}

.huadong-zuoyou ul {
    display: flex;
    flex-flow: row nowrap;
}

.huadong-zuoyou ul li:last-of-type a {
    margin-right: 0;
}

.huadong-zuoyou ul a {
    display: block;
    width: 35vw;
    border-radius: 2vw;
    /* background-color: rgb(70 191 239 / 70%); */
    background-color: #1BA9E2;
    color: white;
    overflow: hidden;
    margin: 0 3vw 0 0;
    height: 100%;
}

.huadong-zuoyou a img {
    width: 35vw;
    height: 35vw;
}

.huadong-zuoyou .font-title {
    margin: 3vw 3vw 1vw;
    font-size: 3.6vw;
}

.huadong-zuoyou .font-summary {
    margin: 0vw 3vw 3vw 3vw;
    /* color: rgba(255, 255, 255, 0.7); */

}

/* 小条*/
.xiaotiao img {
    border-radius: 2vw;
}

/* 合作基地 */
/* .hezuojidi {}

.hezuojidi ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.hezuojidi li {}

.hezuojidi a {
    width: 38.5vw;
    margin-bottom: 3vw;
    border-radius: 2vw;
    display: flex;
    flex-flow: row nowrap;
    background: white;
    border: 3vw solid white;
    align-items: center;
}

.hezuojidi img {
    width: 12vw;
    height: 12vw;
    margin-right: 2vw;
    border-radius: 15vw;
}

.hezuojidi p {
    font-size: 3.8vw;
} */

/* 表格 */
.biaoge {}

.biaoge table {
    background-color: #B5E5F4;
    border-radius: 2vw;
    border: 1vw solid transparent;
}

.biaoge a {}

.biaoge img {
    width: 27vw;
    border-radius: 1vw;
    height: 27vw;
}

.biaoge td {
    border: 1vw solid transparent;
}

.lunbo2-li {
    border: 2vw #ffffff20 solid;
    border-radius: 2vw;
    width: 87vw;
    display: inline-block;
}

.lunbo2-li img {
    width: 87vw;
    height: calc(87vw / 800 * 313);
    border-radius: 1vw;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.slick-dots {
    bottom: 3vw;
}

.slick-slide>div {
    font-size: 0;
}

.slick-dots li button:before {
    font-size: 3vw;
}

a p {
    margin: 1vw 0;
}

.totop,
.tohome {
    display: block;
    width: 10vw;
    height: 10vw;
    background: url(images/to-top.svg) center center no-repeat;
    background-size: 70%;
    background-color: #000000a0;
    border-radius: 50vw;
    position: fixed;
    right: 10vw;
    bottom: 10vw;
    z-index: 100;
}

.tohome {
    top: 4vw;
    left: 4vw;
    background-image: url(images/to-left.svg);
    background-position: 30% center;
    background-color: #1BA9E2;
    background-size: 80%;
    position: absolute;
}