﻿@charset "utf-8";

/* 公共 */
#content { padding: 0.625rem 0 0; overflow: hidden; background: none; }
#content .row { --bs-gutter-x: 3.75rem; --bs-gutter-y: 2.5rem; }
.row-group { padding: 2rem .625rem; }

/* 轮播大图 */
#banner { position: relative; }
#banner .swiper-slide .pic img { display: block; width: 100%; height: auto; min-height: 52.08vw; object-fit: cover; }
#banner .swiper-slide .bg { height: 100vh; transition: all linear 4s 0.4s; background-color: #fff; background-position: center center; background-size: cover; }
#banner .swiper-slide .link { position: absolute; left: 0; right: 0; top: 0; display: block; height: 100%; overflow: hidden; }
#banner .swiper-slide video { display: block; width: 100%; min-height: 52.08vw; height: 100%; object-fit: cover; }
#banner .swiper-slide .con { display: none; }
#banner .swiper-panel { position: absolute; z-index: 1; left: 0; bottom: 7%; right: 0; display: flex; justify-content: center; align-items: center; gap: 1.25rem; }
#banner .swiper-pagination { position: relative; left: 0; top: 0; bottom: 0; text-align: right; width: auto; display: flex; justify-content: center; align-items: center; gap: 1.25rem; }
#banner .swiper-pagination-bullet { width: auto; height: auto; margin: 0; color: #fff; line-height: 1; background: none; opacity: 1; cursor: pointer; transition: all ease 0.6s; }
#banner .swiper-pagination-bullet::before { display: block; content: '\e68f'; font-family: "iconfont"; font-size: 1.9rem; opacity: 0.8; transition: all ease 0.6s; }
#banner .swiper-pagination-bullet:nth-child(2)::before { content: '\e68b'; }
#banner .swiper-pagination-bullet:nth-child(3)::before { content: '\e689'; }
#banner .swiper-pagination-bullet:nth-child(4)::before { content: '\e68a'; }
#banner .swiper-pagination-bullet:nth-child(5)::before { content: '\e686'; }
#banner .swiper-pagination-bullet-active::before { opacity: 1; color: var(--pe-theme-color); }

#banner .swiper-prev,
#banner .swiper-next { display: block; font-size: 3.625rem; color: #fff; height: 1.9rem; line-height: 1.9rem; overflow: hidden; cursor: pointer; transition: all ease 0.5s; }
#banner .swiper-prev { transform-origin: right center; }
#banner .swiper-next { transform-origin: left center; }
#banner .swiper-prev:hover { transform: translateX(-10px); }
#banner .swiper-next:hover { transform: translateX(10px); }

/* 背景 */
.bg-01 { background: #fff url(../img/bg-01.png) no-repeat -3% center; background-size: auto 65%; }
.bg-02 { background: #fff url(../img/bg-03.jpg) no-repeat center center; background-size: cover; }
.bg-03 { background: #f5f9ff; }

/* box-index */
.box-index > .hd { position: relative; display: flex; align-items: center; }
.box-index > .hd ul { display: flex; align-items: center; gap: 2.75rem; }
.box-index > .hd li,
.box-index > .hd h3 { position: relative; font-size: 1.625em; line-height: 1.53em; height: 1.53em; color: #666; letter-spacing: .125rem; }
.box-index > .hd li a,
.box-index > .hd h3 a { display: block; height: 100%; color: inherit; text-decoration: none; overflow: hidden; }
.box-index > .hd li.on,
.box-index > .hd h3 { padding-left: 1.6em; font-weight: bold; color: var(--pe-theme-color); background: var(--pe-theme-bg-icons-ind-box) no-repeat left 0; background-size: 3.9em auto; transition: font ease 0.6s; }
.box-index > .hd li::before { position: absolute; right: 100%; top: 50%; content: ''; margin-right: 1.375rem; width: 1px; height: 2.1875rem; background: #D9D9D9; transform: translateY(-50%) rotate(21deg); }
.box-index > .hd li:first-child::before { display: none; }
.box-index > .hd .more { margin-left: auto; font-size: 1em; height: 2em; overflow: hidden; line-height: 2em; color: #666; }
.box-index > .hd .more::after { display: inline-block; vertical-align: top; margin-left: .4rem; content: '\e68d'; font-family: "iconfont"; color: #ccc; font-size: 1.2em; }
.box-index > .hd .more,
.box-index > .hd .more::after { transition: all ease 0.6s; }
.box-index > .hd .more:hover { transform: translateX(.5rem); color: var(--pe-theme-color); }
.box-index > .hd .more:hover::after { color: var(--pe-theme-color); }
.box-index > .bd { padding-top: 2rem; }

#row-news .container{ position: relative; }
#row-news .container::after{ position: absolute; display: block; content: ''; left: 100%; top: -5rem; width: 10rem; margin-left: 1.25rem; height: 56.9375rem; background: url(../../base/img/bg-01.png) no-repeat center center; background-size: contain; }

/* 广艺要闻 */
#news { position: relative; }
#swiper-news { position: relative; }
#swiper-news .swiper-slide { position: relative; }
#swiper-news .swiper-slide .pic a { position: relative; display: block; height: 0; padding-bottom: 60%; overflow: hidden; background: #eee; }
#swiper-news .swiper-slide .pic img { position: absolute; left: 0; top: 0; }
#swiper-news .swiper-slide .con { position: absolute; display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; left: 0; right: 0; bottom: 0; padding: 2.375rem 1.875rem calc(4.03% + 2rem); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); color: #fff; }
#swiper-news .swiper-slide .title { order: 1; font-size: 1.25em; line-height: 1.4em; height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#swiper-news .swiper-slide .title a { color: inherit; }
#swiper-news .swiper-slide .intro { display: none; }
#swiper-news .swiper-slide .others { font-size: .875em; line-height: 1.4em; color: #fff; }

#news .swiper-panel { position: relative; z-index: 1; display: flex; align-items: flex-end; margin-top: calc(-4.03% - .1875rem); }
#news .swiper-panel .swiper-prev,
#news .swiper-panel .swiper-next { display: block; margin: 0 0 .25rem 1.25rem; font-size: calc(0.5em + .625rem); color: #ddd; width: 1.75em; height: 1.75em; line-height: 1.75em; text-align: center; overflow: hidden; cursor: pointer; background: #fff; border: 1px solid #ddd; box-sizing: content-box; border-radius: 50%; transition: all ease 0.5s; }
#news .swiper-panel .swiper-prev .iconfont,
#news .swiper-panel .swiper-next .iconfont { display: inline-block; vertical-align: top; }
#news .swiper-panel .swiper-prev:hover,
#news .swiper-panel .swiper-next:hover { border-color: var(--pe-theme-color); color: var(--pe-theme-color); }

#swiper-news-thumbs { min-width: 0; flex: 1 0 0%; margin-left: 1.625rem; padding: .1875rem 0; background: #fff; }
#swiper-news-thumbs .swiper-slide { width: 16.6666%; margin-left: .1875rem; }
#swiper-news-thumbs .swiper-slide .pic a { position: relative; display: block; height: 0; padding-bottom: 56.4814%; overflow: hidden; background: #000; }
#swiper-news-thumbs .swiper-slide .pic img { position: absolute; left: 0; top: 0; opacity: 0.6; transition: all ease 0.4s; }
#swiper-news-thumbs .swiper-slide-thumb-active .pic img { opacity: 1; }
#swiper-news-thumbs .swiper-slide .con { display: none; }

#news .list { margin: -0.9%; padding-top: 2.5rem; }
#news .list li { position: relative; z-index: 1; flex: 1 0 calc(100% - 1.8%); margin: 0.9%; padding: 1rem .625rem; }
#news .list li::before { position: absolute; z-index: -1; content: ''; left: 0; right: 0; bottom: 0; height: 1px; background: var(--pe-theme-color) url(../../base/img/bg-list-01.png) no-repeat right 4.31% bottom 12.67%; background-size: auto 41.8%; }
#news .list li > a { display: block; font-size: 1.125em; line-height: 1.66em; max-height: 3.33em; overflow: hidden; }
#news .list .dateRight { display: block; margin-top: 0.625rem; font-size: .875em; line-height: 1.4em; color: #999; }

#news .list li::before,
#news .list li > a,
#news .list .dateRight { transition: all ease 0.5s; }

#news .list li:hover::before { height: 100%; }
#news .list li:hover > a { color: #fff; }
#news .list li:hover .dateRight { color: rgba(217, 179, 24, 0.6); }

/* 通知公告 */
#notice > .hd h3 { padding-left: 1.6em; background-position: 0 -1.77em; }
.list-notice li { position: relative; margin-top: 1rem; display: flex; align-items: center; z-index: 1; background: #F3F5F4; padding: .8rem 1.25rem; }
.list-notice li:first-child { margin-top: 0; }
.list-notice li::before { position: absolute; z-index: -1; content: ''; left: 0; right: 0; bottom: 0; top: 0; background: var(--pe-theme-color) url(../../base/img/bg-list-02.png) no-repeat right bottom; background-size: auto 110%; visibility: hidden; transform: scaleX(0); transform-origin: left center; }
.list-notice li > a { flex: 1 0 0%; font-size: 1.125em; line-height: 1.66em; max-height: 3.33em; overflow: hidden; }
.list-notice .date { text-align: center; margin-right: 1.125rem; padding: 0.25rem 1.125rem 0.25rem 0; line-height: 1; border-right: 1px solid rgba(var(--pe-theme-color-rgb), 0.2); }
.list-notice .date .dd { display: block; font-size: 2em; }
.list-notice .date .ym { display: block; margin-top: .3rem; font-size: .875em; color: #999; }

.list-notice li,
.list-notice li::before,
.list-notice li > a,
.list-notice .date,
.list-notice .date .dd,
.list-notice .date .ym { transition: all ease 0.5s; }

.list-notice li:hover::before { visibility: visible; transform: scaleX(1); }
.list-notice li:hover .date { border-right-color: rgba(255, 255, 255, 0.2); }
.list-notice li:hover > a,
.list-notice li:hover .date .dd { color: #fff; }
.list-notice li:hover .date .ym { color: rgba(255, 255, 255, 0.5); }


/* 院系动态 */
#yxdt { margin-top: 2.125rem; }
#yxdt > .hd li.on,
#yxdt > .hd h3 { padding-left: 1.65em; background-position: 0 -3.35em; }
#yxdt .list li { position: relative; }
#yxdt .list .t { margin-bottom: 1.5rem; }
#yxdt .list .t .pic a { position: relative; height: 0; padding-bottom: 56%; overflow: hidden; }
#yxdt .list .t .pic img { position: absolute; left: 0; top: 0; }
#yxdt .list .t.noPic::before { display: block; content: ''; height: 0; padding-bottom: 56%; background: #ededed url(/content/_common/base/img/nopic.gif) no-repeat center center; background-size: contain; }
#yxdt .list .t .con { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); }
#yxdt .list .t .date { background: #D9B318; color: #fff; line-height: 1; text-align: center; padding: .8125rem .5rem; }
#yxdt .list .t .date .dd { display: block; font-size: 1.5em; font-weight: bold; }
#yxdt .list .t .date .ym { display: block; margin-top: .3rem; font-size: .875em; }
#yxdt .list .t .title { display: flex; align-items: center; }
#yxdt .list .t .title a { flex: 1 0 0%; padding: 0 1.25rem; font-size: 1.125em; line-height: 1.33em; max-height: 2.66em; overflow: hidden; color: #fff; }
#yxdt .list .n { margin-top: 0.75rem; padding-bottom: .75rem; line-height: 1.4; }
#yxdt .list .n::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #d9d9d9; visibility: hidden; transform: scaleX(0); transform-origin: left center; }
#yxdt .list .n .date { display: block; margin-bottom: 0.5rem; font-size: .875em; color: #999; }
#yxdt .list .n > a { display: block; font-size: 1.125em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#yxdt .list .n::before{ transition: all ease 0.5s; }
#yxdt .list .n:hover::before { visibility: visible; transform: scaleX(1); }

#yxdt .list-info li { padding: 0 0 calc(0.4rem + 0.65em); margin-bottom: calc(0.4rem + 0.65em); line-height: 1.4; }
#yxdt .list-info li:last-child { margin-bottom: 0; }
#yxdt .list-info li::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--pe-theme-color); visibility: hidden; transform: scaleX(0); transform-origin: left center; }
#yxdt .list-info li .date { float: none; display: block; margin-bottom: 0.5rem; margin-left: 2em; font-size: .875em; color: #999; }
#yxdt .list-info li::before{ transition: all ease 0.5s; }
#yxdt .list-info li:hover::before { visibility: visible; transform: scaleX(1); }


#row-kyxx { padding-top: 7.2%; background: var(--pe-theme-bg-03) no-repeat center top; background-size: contain; }

/* 科研信息 */
#kyxx > .hd h3 { padding-left: 2.6em; background-position: 0 -5.05em; }
#kyxx .list-menu { gap: 2px; }
#kyxx .list-menu li { flex: 1 0 calc(50% - 2px); }
#kyxx .list-menu li a { display: block; position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; z-index: 1; height: 100%; min-height: 13.75rem; padding: 1.5rem 1.25rem 1.25rem; font-size: 1.125em; line-height: 1.33em; text-align: center; background: #fff; }
#kyxx .list-menu li a::before { display: block; content: '\e832'; font-family: "iconfont"; font-size: 2em; margin: 0 auto 1rem; width: 3.125em; height: 3.125em; line-height: 3.125em; color: var(--pe-theme-color); background: var(--pe-theme-bg-02) no-repeat center center; background-size: contain; }
#kyxx .list-menu li a::after { display: block; content: ''; position: absolute; z-index: -1; left: 0;top: 0; width: 100%; height: 100%; background: var(--pe-theme-color); transform: scaleY(0); visibility: hidden; transform-origin: center bottom; }

#kyxx .list-menu li:nth-child(2) a::before { content: '\e68e'; }
#kyxx .list-menu li:nth-child(3) a::before { content: '\e61c'; }
#kyxx .list-menu li:nth-child(4) a::before { content: '\e75f'; }

#kyxx .list-menu li a,
#kyxx .list-menu li a::before,
#kyxx .list-menu li a::after { transition: all ease 0.5s; }

#kyxx .list-menu li a:hover { color: #fff; }
#kyxx .list-menu li a:hover::before { background-image: url(../../base/img/bg-02-hover.png); color: #fff; }
#kyxx .list-menu li a:hover::after { transform: scaleY(1); visibility: visible; opacity: 1; }

#kyxx .box-kyxx { margin-top: 1.875rem; border: none; padding: 1.25rem; }
#kyxx .box-kyxx > .bd { padding-top: 0.875rem; }

/* 展演资讯 */
#zyzx > .hd h3 { padding-left: 1.9em; background-position: 0 -6.85em; }
#swiper-zyzx { padding: 30.6% 0 0 25.4%; }
#swiper-zyzx .swiper-slide { position: relative; width: 23.95%; }
#swiper-zyzx .swiper-slide .pic { transform-origin: right bottom; }
#swiper-zyzx .swiper-slide .pic a { position: relative; display: block; height: 0; padding-bottom: 120%; overflow: hidden; background: #eee; }
#swiper-zyzx .swiper-slide .pic img { position: absolute; left: 0; top: 0; }
#swiper-zyzx .swiper-slide .con { position: absolute; left: 100%; top: -110%; margin-left: 1.25rem; width: 200%; visibility: hidden; opacity: 0; }
#swiper-zyzx .swiper-slide .title { font-size: 1.25em; font-weight: bold; line-height: 1.5em; max-height: 3em; overflow: hidden; }
#swiper-zyzx .swiper-slide .title a { color: inherit; }

#swiper-zyzx .swiper-slide,
#swiper-zyzx .swiper-slide .pic,
#swiper-zyzx .swiper-slide .con { transition: all ease 0.6s; }

#swiper-zyzx .swiper-slide-prev .pic { transform: translateX(-106%); }
#swiper-zyzx .swiper-slide-active .pic { transform: scale(2.1); }
#swiper-zyzx .swiper-slide-active .con { visibility: visible; opacity: 1; }

#swiper-zyzx .swiper-panel { position: absolute; left: 51.5%; right: 0; bottom: 50.5%; z-index: -1; display: flex; align-items: center; }
#swiper-zyzx .swiper-panel .swiper-pagination { margin-right: 1.5rem; position: static; width: auto; line-height: 1; font-size: .875em; color: #999; }
#swiper-zyzx .swiper-panel .swiper-pagination-current { font-size: 2em; color: var(--pe-theme-color); }
#swiper-zyzx .swiper-panel .swiper-prev,
#swiper-zyzx .swiper-panel .swiper-next { display: block; margin: 0 .625rem 0 0; font-size: calc(0.5em + 0.5rem); color: #d9d9d9; width: 1.75em; height: 1.75em; line-height: 1.75em; text-align: center; overflow: hidden; cursor: pointer; border: 1px solid #d9d9d9; box-sizing: content-box; border-radius: 50%; transition: all ease 0.5s; }
#swiper-zyzx .swiper-panel .swiper-prev .iconfont,
#swiper-zyzx .swiper-panel .swiper-next .iconfont { display: inline-block; vertical-align: top; }
#swiper-zyzx .swiper-panel .swiper-prev:hover,
#swiper-zyzx .swiper-panel .swiper-next:hover { border-color: var(--pe-theme-color); color: var(--pe-theme-color); }

#zyzx .list { padding-top: .625rem; }
#zyzx .list li { position: relative; margin-top: 1.125rem; padding-bottom: 1.125rem; line-height: 1.4; border-bottom: 1px solid #ededed; }
#zyzx .list li::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--pe-theme-color); visibility: hidden; transform: scaleX(0); transform-origin: left center; }
#zyzx .list li .date { display: block; margin-bottom: 0.5rem; font-size: .875em; color: #999; }
#zyzx .list li > a { display: block; font-size: 1.125em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#zyzx .list li::before{ transition: all ease 0.5s; }
#zyzx .list li:hover::before { visibility: visible; transform: scaleX(1); }

/* 媒体广艺 */
#row-media { position: relative; z-index: 1; }
#row-media::before { position: absolute; z-index: -1; left: 0; top: 21.5rem; right: 0; bottom: 0; content: ''; background: rgba(var(--pe-theme-color-rgb), 0.1); }
#media > .hd h3 { padding-left: 3.7em; background-position: 0 -8.5em; }

/* 快速链接 */
#row-quick { padding-bottom: 2.5rem; background: rgba(var(--pe-theme-color-rgb), 0.1); }
#quick > .hd h3 { padding-left: 1em; background-position: 0 -10.15em; }
#quick .list-menu { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: space-between; gap: 1.5rem; }
#quick .list-menu li a { display: block; position: relative; z-index: 1; height: 100%; font-size: 1.125em; line-height: 1.33em; text-align: center; }
#quick .list-menu li a::before { display: block; content: ''; margin: 0 auto 1rem; width: 5.55em; height: 5.55em; background: var(--pe-theme-bg-04) no-repeat center center; background-size: contain; }
#quick .list-menu li a::after { position: absolute; z-index: -1; left: 0; top: 0; right: 0; margin: 0 auto; content: '\e624'; font-family: "iconfont"; font-size: 2.55em; width: 2.18em; height: 2.18em; line-height: 2.18em; color: var(--pe-theme-color); }

#quick .list-menu li:nth-child(1) a::after { content: '\e64f'; }
#quick .list-menu li:nth-child(2) a::after { content: '\e67e'; }
#quick .list-menu li:nth-child(3) a::after { content: '\e64e'; }
#quick .list-menu li:nth-child(4) a::after { content: '\e648'; }
#quick .list-menu li:nth-child(5) a::after { content: '\e834'; }
#quick .list-menu li:nth-child(6) a::after { content: '\e600'; }
#quick .list-menu li:nth-child(7) a::after { content: '\e766'; }
#quick .list-menu li:nth-child(8) a::after { content: '\e601'; }
#quick .list-menu li:nth-child(9) a::after { content: '\e685'; }

#quick .list-menu li a,
#quick .list-menu li a::before,
#quick .list-menu li a::after { transition: all ease 0.5s; }

#quick .list-menu li a:hover::before { animation: rotate 5s linear infinite; }
#quick .list-menu li a:hover::after { transform: scale(1.1); }


/* 专题专栏 */
#swiper-special { margin-top: 3.75rem; }

/* 媒体查询 */
@media (min-width:420px) {
    #news .list li { flex-basis: calc(50% - 1.8%); }

    #swiper-zyzx .swiper-slide .title { height: 4.5em; }

    #quick .list-menu { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width:768px) {
    #content { padding: 2.5rem 0 0; }
    .row-group { padding: 2rem 0; }

    .box-index > .hd li.on,
    .box-index > .hd h3 { font-size: 2em; }

    #swiper-news .swiper-slide .title { font-size: 1.5em; }

    #news .list li { flex-basis: calc(33.3333% - 1.8%); }


    #kyxx .list-menu li { flex-basis: calc(25% - 2px); }

    #row-media { padding-top: 1rem; }

    #row-quick { padding: 2.5rem 0 6.25rem; }

    #quick .list-menu { grid-template-columns: repeat(5, 1fr); }
    #quick .list-menu li a::before { width: 6.66em; height: 6.66em; }
    #quick .list-menu li a::after { font-size: 3.05em; }


}
@media (min-width:992px) {
    #news::after { content: ''; position: absolute; top: 5.4425rem; right: calc(var(--bs-gutter-x) * -0.5); bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.07); }
    #swiper-news .swiper-slide .pic a { padding-bottom: 65%; }

    .box-index > .hd li.on,
    .box-index > .hd h3 { font-size: 2.25em; }

    #yxdt .list-info li:last-child { display: none; }

    #yxdt > .hd .more { display: none; }

    #kyxx .list-menu li a::before { font-size: 1.6em; }

    #quick .list-menu { grid-template-columns: repeat(9, 1fr); }
}
@media (min-width:1200px) {
    #yxdt { margin-top: 1.5rem; }

    #yxdt .list-info li:last-child { display: block; }

    #kyxx .list-menu li a::before { font-size: 2em; }

}
@media (min-width:1500px) {
    .row-group { padding: 3.75rem 0; }

    #yxdt { margin-top: 3.75rem; }

    #kyxx .list-menu li a { padding-top: 2rem; }
}
@media (min-width:1700px) {
    #swiper-news .swiper-slide .pic a { padding-bottom: 60%; }

    #yxdt > .hd .more { display: block; }

    #kyxx .list-menu li a { padding-top: 2.5rem; }
}