@charset "utf-8";
.container{ width: 100%; overflow: hidden; background: #f8f8f8;}

.container .banner{ position: relative; display: flex; width: 100%; height: 40vw; background: #f8f8f8;}

.container .banner .cover{ position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden;}
.container .banner .cover img{ width: 100%; height: 100%; object-fit: cover;}

.container .banner .location{ position: absolute; right: 6.25vw; bottom: 1.25vw; z-index: 1; display: flex; align-items: center; justify-content: flex-end;}
.container .banner .location::before{ content: '当前位置：'; color: white;}
.container .banner .location a{ font-size: 1rem; line-height: 2; color: white;}
.container .banner .location a:not(:last-child):after{ content: '>'; padding: 0 .5em; color: #eee;}

.container .banner .theme{ position: absolute; bottom: -1.5vw; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-around; gap: 1.5rem; padding: 1.25vw 2.5vw; background: white;}
.container .banner .theme img:nth-child(1){ height: 5rem;}
.container .banner .theme img:nth-child(2){ height: 3.5rem;}
.container .banner .theme img:nth-child(3){ height: 3.5rem;}

.container .banner.space{ height: 12rem;}
.container .banner.space .location{ left: 6.25vw; right: auto;}
.container .banner.space .location::before{ color: #333;}
.container .banner.space .location a{ color: #222;}
.container .banner.space .location a:not(:last-child):after{ color: #333;}

.container .row{ display: grid; grid-gap: 2.5vw; width: 100%; padding: 3.125vw 6.25vw; overflow: hidden;}

.container .row .title{ display: flex; align-items: center; justify-content: space-between;}
.container .row .title .caption{ display: flex; align-items: center;}
.container .row .title .caption h1{ font-size: 1.875rem; line-height: 1.25; color: #222;}
.container .row .title .sort{ display: flex; align-items: center; justify-content: center;}
.container .row .title .sort a{ font-size: 1.25rem; color: #333;}
.container .row .title .sort i{ padding: 0 1em; font-size: 1rem; color: #ccc;}
.container .row .title .order{ display: flex; align-items: center; justify-content: center; padding: 0 1.5rem; border: 2px solid #333; border-radius: var(--rounded);}
.container .row .title .order a{ font-size: 1.125rem; line-height: 2; color: #333;}
.container .row .title .order i{ padding: 0 1em; font-size: 1rem; color: #ccc;}

.container .row .content{ display: grid; grid-gap: 3.125vw; width: 100%;}

.list-information{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1.25vw;}
.list-information .item{ position: relative; display: grid; grid-gap: .75rem; justify-items: start; padding: 2rem 3rem; box-shadow: 0 2px 18px rgba(0, 0, 0, .1); background: url('/img/item-information.webp') left center no-repeat; background-size: cover;}
.list-information .item .tit{ font-size: 1.5rem; color: #222;}
.list-information .item .desc{ font-size: 1rem; color: #666;}
.list-information .item .date::before{ content: ''; color: #333; background: url('/img/ico-date.webp') left center no-repeat; background-size: .875rem; padding-left: 1.25em; font-size: 1rem;}
.list-information .item .details{ font-size: 1rem; line-height: 2; padding: 0 1em; border: 2px solid #c6af8e; border-radius: var(--rounded); color: #c6af8e;}

.list-video{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2vw; width: 100%;}
.list-video .item{ position: relative; top: 0;}
.list-video .item .cover{ position: relative; z-index: 0; width: 100%; height: 0; padding-bottom: calc(100% / 4 * 3); overflow: hidden;}
.list-video .item .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
.list-video .item .date{ position: absolute; z-index: 1; left: 1rem; padding: .25em .5em; background: #6759a9; color: white; transform: translateY(-70%);}
.list-video .item .tit{ position: relative; z-index: 0; width: 100%; padding: 1.5rem 1rem .5rem; background: white; font-size: 1.125rem; color: #222;}
.list-video .item .details{ width: 100%; padding: .25rem 1rem 1rem; background: white; text-align: right; color: #544696;}

.list-recommend{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw;}
.list-recommend .item{ position: relative; top: 0;}
.list-recommend .item .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 2); overflow: hidden;}
.list-recommend .item .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
.list-recommend .item .info{ position: absolute; bottom: 0; left: 0; display: grid; width: 100%; padding: .5rem 1rem; background: rgba(0, 0, 0, .5); color: white;}
.list-recommend .item .info span{ width: 100%;}
.list-recommend .item .info b{ font-size: 0.875rem; font-weight: normal;}

.list-team{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw;}
.list-team .item{ position: relative; top: 0;}
.list-team .item .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 2); overflow: hidden;}
.list-team .item .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
.list-team .item .info{ position: absolute; bottom: 0; left: 0; display: grid; width: 100%; padding: .5rem 1rem; background: rgba(0, 0, 0, .5); color: white;}
.list-team .item .info span{ width: 100%;}
.list-team .item .info b{ font-size: 0.875rem; font-weight: normal;}

.list-stage{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw;}
.list-stage .item{ position: relative; top: 0;}
.list-stage .item .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 2); overflow: hidden;}
.list-stage .item .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
.list-stage .item .info{ position: absolute; bottom: 0; left: 0; display: grid; width: 100%; padding: .5rem 1rem; background: rgba(0, 0, 0, .5); color: white;}
.list-stage .item .info span{ width: 100%;}
.list-stage .item .info b{ font-size: 0.875rem; font-weight: normal;}


.pagination{ display: flex; align-items: center; justify-content: center; gap: 1rem;}
.pagination a{ padding: 0 .75em; border: 1px solid #ccc; background: white; font-size: 1rem; line-height: 2;}

.container .column{ display: grid; grid-gap: 1.25vw; width: 100%; padding: 0 6.25vw 3.125vw; overflow: hidden;}
.container .column .line{ width: 100%; height: 1px; background: #d6d6d6;}

.article{ display: grid; grid-gap: 1.25vw; padding-top: 1.25vw; border-top: 1px solid #d6d6d6;}

.article .article-info{ display: flex; gap: 2rem;}
.article .article-info span{ display: flex; align-items: center; gap: .5rem; font-size: 1.125rem;}
.article .article-info span::before{ content: ''; width: 2.5rem; height: 2.5rem; border: 1px solid #ccc; border-radius: 50%;}
.article .article-info span:nth-child(1)::before{ background: url('/img/article-info-1.webp') center center no-repeat;}
.article .article-info span:nth-child(2)::before{ background: url('/img/article-info-2.webp') center center no-repeat;}
.article .article-info span:nth-child(3)::before{ background: url('/img/article-info-3.webp') center center no-repeat;}

.article .article-tit h1{ font-size: 1.5rem;}

.article .article-con p{ font-size: 1.125rem; line-height: 1.75; text-align: justify;}
.article .article-con img{ max-width: 100%!important;}

.article .article-arrow{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw; margin-top: 5vw;}
.article .article-arrow a{ position: relative; display: grid; justify-items: start; padding: 1.5rem; border: 1px solid #d6d6d6; border-radius: 5px; background: white; font-size: 1.125rem; color: #222;}
.article .article-arrow a::before{ border-radius: 2px; font-size: 0.75rem; line-height: 1.75; padding: 0 .5em; margin-bottom: 0.5em; background: #d6b97c; color: white;}
.article .article-arrow a::after{ content: ''; position: absolute; top: 0; right: 1.25vw; bottom: 0; width: 2rem; height: 2rem; margin: auto; background: url('/img/arrow.webp') center center no-repeat; background-size: auto 100%;}
.article .article-arrow a.prev::before{ content: '上一条';}
.article .article-arrow a.next::before{ content: '下一条';}
.article .article-arrow a i{ font-size: 0.875rem; color: #666; font-style: normal;}

.player{ display: grid; grid-template-columns: 67.5vw 1fr; padding: 12rem 6.25vw 6rem; background: #6759a9;}

.player .player-box{ width: 100%; height: calc(67.5vw / 16 * 9); background: #000;}
.player .review-box{ display: grid; grid-template-rows: 6rem 1fr; width: 100%; height: 100%; background: #1d1d1d;}

.review-tab-swiper{ padding: 2rem; width: 100%; height: 6rem; overflow: hidden;}
.review-tab-swiper .swiper-slide{ display: flex; align-items: center; width: auto; padding-right: 2em; font-size: 1.5rem; color: #6a6969; cursor: pointer;}
.review-tab-swiper .swiper-slide span{ position: relative;}
.review-tab-swiper .swiper-slide span::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: white;}
.review-tab-swiper .swiper-slide i{ font-style: normal; font-size: 1rem;}
.review-tab-swiper .swiper-slide.swiper-slide-thumb-active{ color: white;}
.review-tab-swiper .swiper-slide.swiper-slide-thumb-active span::after{ width: 100%;}

.review-con-swiper{ width: 100%; height: 100%; overflow: hidden;}
.review-con-swiper .swiper-slide{ display: grid; grid-gap: 2rem; align-content: start; padding: 1rem 2rem 2rem; color: white;}
.review-con-swiper .swiper-slide .tit{ font-size: 1.5rem;}
.review-con-swiper .swiper-slide .line{ width: 100%; height: 1px; background: #525252;}
.review-con-swiper .swiper-slide .desc{ font-size: 1rem; color: #adadad;}
.review-con-swiper .swiper-slide .date{ font-size: 0.875rem; color: #adadad; background: url('/img/ico-time-f.webp') left center no-repeat; text-indent: 2em;}
.review-con-swiper .swiper-slide .data{ position: absolute; right: 2rem; bottom: 2rem; display: grid; grid-template-columns: repeat(3,1fr); width: calc(100% - 4rem); text-align: center;}
.review-con-swiper .swiper-slide .data span{ padding-top: 2.5rem;}
.review-con-swiper .swiper-slide .data span:nth-child(1){ background: url('/img/ico-count.webp') top center no-repeat; background-size: 2rem;}
.review-con-swiper .swiper-slide .data span:nth-child(2){ background: url('/img/ico-comment.webp') top center no-repeat; background-size: 2rem;}
.review-con-swiper .swiper-slide .data span:nth-child(4){ background: url('/img/ico-like.webp') top center no-repeat; background-size: 2rem;}
.review-con-swiper .swiper-slide .data span:nth-child(3){ background: url('/img/ico-forward.webp') top center no-repeat; background-size: 2rem;}

.team-box{ display: grid; grid-gap: 1.25vw;}
.team-box .title{ position: relative; display: flex; align-items: center;}
.team-box .title h1{ font-size: 1.5rem; padding-left: 2rem;}
.team-box .title h1::before{ content: '>'; position: absolute; top: 0; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; margin: auto; border-radius: 50%; font-size: 1rem; font-weight: normal; color: white; background: #d6b97c;}
.team-box .title a{ position: absolute; right: 0; font-size: 1rem; line-height: 2; padding: 0 1.5em; border: 1px solid #a07c49; border-radius: var(--rounded); color: #a07c49;}

.time-swiper{ position: relative; width: 100%; margin: 1.25vw 0; overflow: hidden;}
.time-swiper .swiper-slide .item{ position: relative; display: grid; grid-template-rows: repeat(3,1fr); justify-items: center;}
.time-swiper .swiper-slide .item::before{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; width: 1rem; height: 1rem; margin: auto; border: 1px solid #fff; outline: 1px solid #d6b97c; border-radius: 50%; background: #d6b97c;}
.time-swiper .swiper-slide .item::after{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; width: 100%; height: 1px; margin: auto; background: #d6d6d6;}
.time-swiper .swiper-slide .item b{ font-size: 1.125rem; line-height: 2; font-weight: bold;}
.time-swiper .swiper-slide:nth-child(even) .item b{ grid-row: 3 / 4;}
.time-swiper .swiper-slide.swiper-slide-active .item::before{ outline: 1px solid #d80022; border-radius: 50%; background: #d80022;}

.time-swiper .arrow{ position: absolute; top: 0; bottom: 0; z-index: 5; width: 5rem; height: 5rem; margin: auto; cursor: pointer;}
.time-swiper .arrow.prev{ left: 0; background: url('/img/arrow-prev-b.webp') center center no-repeat #f8f8f8; background-size: 100%;}
.time-swiper .arrow.next{ right: 0; background: url('/img/arrow-next-b.webp') center center no-repeat #f8f8f8; background-size: 100%;}

footer{ padding: 5vw 6.25vw; background: url('/img/bg-footer.webp') center center no-repeat #f8f8f8; background-size: cover;}
footer .row{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 8vw 5vw;}

footer .row .foot-logo{ grid-column: span 3; align-self: center; justify-self: center;}

footer .row .foot-contact{ align-self: center;}
footer .row .foot-contact .item{ display: flex; align-items: center; font-size: 1rem; line-height: 2;}
footer .row .foot-contact .item i{ margin-right: 0.5em;}

footer .row .foot-qrcode{ display: flex; justify-content: space-between; align-items: center;}
footer .row .foot-qrcode .item{ display: grid; justify-items: center; gap: .5rem;}
footer .row .foot-qrcode .item span{ text-align: center;}

footer .row .foot-nav{ align-self: center; justify-self: center; display: grid; grid-template-columns: 1fr 3rem 1fr 3rem 1fr; justify-items: center; grid-gap: 1rem 0;}
footer .row .foot-nav i{ color: #ccc;}

footer .row .copyright{ grid-column: span 3; align-self: end; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; border: 1px solid #eee6cf; background: white;}
footer .row .copyright::after{ content: '百航科技：专业网络品牌设计';}