/* 频道页大标题 */
.channel-hd { margin-bottom: 7%; display: flex; align-items: flex-end; overflow: hidden; }
.channel-hd h3 { width: 2.04em; line-height: 1; color: #00a8ff; font-size: 4rem; font-family: "zihundujiaoshouti"; transform: scaleX(0.9); letter-spacing: 0.02em; transform-origin: left center; }
.channel-hd h4 { margin-right: -10.5%; flex: 1 0 0%; line-height: 1; color: #ff0055; font-size: 4rem; font-family: "zihundujiaoshouti"; transform: scaleX(0.9); letter-spacing: 0.21em; transform-origin: left center; opacity: 0.2; text-align: justify; text-align-last: justify; overflow: hidden; }

/* 学校沿革 */
.box-history > .hd { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 1px solid #333; }
.box-history > .hd .title { flex: 1 0 0%; }
.box-history > .hd h3 { font-weight: bold; font-size: 2.375rem; color: #00a8ff; line-height: 1.3; }
.box-history > .hd h4 { margin-top: 1.2rem; line-height: 1; color: #ff0055; font-size: 2.8125rem; font-family: "Geometric 415"; transform: scaleX(0.9); transform-origin: left center; letter-spacing: 0.1em; }
.box-history > .hd h3 a
.box-history > .hd h4 a { text-decoration: none; color: inherit; }
.box-history > .hd .intro { font-size: 1.3em; line-height: 1.85; color: #00a8ff; font-weight: bold; text-align: justify; text-align-last: justify; }
.box-history > .bd { padding-top: 5.5%; }

#slide-history ul { padding: calc(5% + 0.75rem) 0.75rem; }
#slide-history li { position: relative; width: 25%; box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.25); transition: all ease 1.2s; transform: scale(0.75); }
#slide-history li .titleBg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); transition: all ease 1.2s; }
#slide-history .pic a { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 56%; }
#slide-history .pic img { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; }
#slide-history .date,
#slide-history .title { display: none; }

#slide-history .swiper-slide-active,
#slide-history .swiper-slide-duplicate-active { transform: scale(1.5); }
#slide-history .swiper-slide-active .titleBg,
#slide-history .swiper-slide-duplicate-active .titleBg { opacity: 0; }

#slide-history .swiper-slide-prev { transform-origin: left center; }
#slide-history .swiper-slide-next { transform-origin: right center; }

.history-panel { margin-top: 3%; display: flex; align-items: center; justify-content: center; }
.history-panel .con { flex: 1 0 0%; text-align: center; margin: 0 2rem; overflow: hidden; }
.history-panel .date { display: block; font-weight: bold; font-size: 1.3em; line-height: 1.5em; color: #ff0055; }
.history-panel .title,
.history-panel .tit { font-size: 1.1em; line-height: 1.5em; text-align: center; overflow: hidden; }
.history-panel .prev,
.history-panel .next { display: flex; align-items: center; justify-content: center; width: 2.81rem; height: 2.81rem; border: 0.15rem solid #ccc; border-radius: 50%; }
.history-panel .prev::before,
.history-panel .next::before { content: ""; width: 0; height: 0; border-top: .65rem solid transparent; border-bottom: .65rem solid transparent;  }
.history-panel .prev::before { margin-right: 0.15rem; border-right: 0.9rem solid #aaa; }
.history-panel .next::before { margin-left: 0.15rem; border-left: 0.9rem solid #aaa; }
.history-panel .prev:hover,
.history-panel .next:hover { border-color: #ff0055; }
.history-panel .prev:hover::before { border-right-color: #ff0055; }
.history-panel .next:hover::before { border-left-color: #ff0055; }

/* 现任领导 */
.list-leader { display: flex; flex-wrap: wrap; margin: -1.5% -2.9%; }
.list-leader li { width: 94.2%; margin: 1.5% 2.9%; background: #fff url(../../base/img/bg-08.png) no-repeat right bottom; background-size: 37.7% auto; }
.list-leader li .title { background: #00a8ff; color: #fff; font-size: 1.3em; font-weight: bold; text-align: center; line-height: 1.4em; padding: 0.5rem 1em; }
.list-leader li .con { text-align: center; padding: 2.5rem 2em; font-size: 1.25em; white-space: pre-wrap; line-height: 2; }

/* 学校标识 */
#badge {  }
#badge .color { display: flex; flex-direction: column; justify-content: center; align-items: center; }
#badge .color .pic { width: 15rem; height: 15rem; background: url(../../base/img/badge.png) no-repeat center center; background-size: 100% 100%; }
#badge .color .title { margin-top: 2.2rem; line-height: 1.3em; font-size: 1.3em; font-weight: bold; color: #00aaff; letter-spacing: 0.1em; }
#badge .color .title::after { display: inline-block; vertical-align: top; content: '00aaff'; background: #00aaff; color: #fff; margin-left: 0.4em; padding: 0 0.5em; }
#badge .name .pic,
#badge .color .pic,
#badge .color .title,
#badge .color .title::after { transition: all ease 0.4s; }
#badge .color:hover .pic { background-image: url(../../base/img/badge-hover.png); }
#badge .color:hover .title { color: #ff0000; }
#badge .color:hover .title::after { content: 'ff0000'; background: #ff0000; }

#badge .name { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#badge .name .title { position: relative; margin-bottom: 3.75rem; font-size: 1.3em; border-bottom: 2px solid #333; letter-spacing: 0.1em; }
#badge .name .title::before { position: absolute; left: 50%; top: 100%; content: ''; width: 2px; background: #333; height: 3.75rem; margin-left: -1px; }
#badge .name .pic { width: 100%; height: 6.25rem; background: url(../../base/img/logo-blue.png) no-repeat center center; background-size: auto 100%; }
#badge .name .intro { font-size: 1.3em; letter-spacing: 0.1em; margin-top: 1.25rem; }
#badge .name:hover .pic { background-image: url(../../base/img/logo-red.png); }

.list-motto { display: flex; flex-wrap: wrap; }
.list-motto li { width: 45.4%; margin: 2.3%; display: flex; flex-direction: column; align-items: stretch; }
.list-motto li .title { position: relative; width: 65%; padding-bottom: 65%; height: 0; margin: 0 auto 1rem; background: url(../../base/img/bg-09.png) no-repeat center center; background-size: 100% 100%; font-size: 0; line-height: 999px; }
.list-motto li .title::before { position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; width: 61.1%; height: 0; padding-bottom: 25.6%; margin: auto; background: url(../../base/img/motto.png) no-repeat -0.8% 0; background-size: auto 100%; }
.list-motto li:nth-child(1) .title::before { background-position: -0.8% 0; }
.list-motto li:nth-child(2) .title::before { background-position: 33.4% 0; }
.list-motto li:nth-child(3) .title::before { background-position: 67.3% 0; }
.list-motto li:nth-child(4) .title::before { background-position: 101% 0; }
.list-motto li .intro { flex: 1 0 0%; padding: 1rem 1rem 40%; font-size: 1em; line-height: 1.6em; text-indent: 2em; border: 0.25rem solid rgba(0, 174, 255, .35); background: url(../../base/img/bg-10.png) no-repeat center bottom; background-size: 100% auto; }

.list-motto li .title::before,
.list-motto li .intro,
.list-motto li .title { transition: all ease 0.4s; }

.list-motto li:hover .title { background-image: url(../../base/img/bg-09-hover.png); }
.list-motto li:hover .title::before { background-image: url(../../base/img/motto-hover.png); }
.list-motto li:hover .intro { background-image: url(../../base/img/bg-10-hover.png); border-color: rgba(255, 0, 0, .35); }

#song .title { margin-bottom: 3.125rem; font-size: 2.375rem; color: #ff0055; text-align: center; font-weight: bold; }
.phonograph { position: relative; }
.phonograph::before { position: absolute; content: ''; left: 10%; top: 50%; width: 40%; padding-bottom: 40%; height: 0; margin-top: -20%; background: url(../../base/img/bg-12.png) no-repeat center center; background-size: 100% 100%; }
.song-score { position: relative; margin-left: 30%; width: 70%; padding: 1.25rem; box-shadow: -0.3125rem 0 .625rem rgba(0, 0, 0, 0.7); background: linear-gradient(90deg, #c81822 0%, #c81822 49.9999%, #8a1017 50%, #c81822 100%); }
.song-score img { width: 100%; height: auto; }
.paddle { position: absolute; left: 0; top: 0; margin-top: -8.5%; width: 17%; padding-bottom: 17%; height: 0; cursor: pointer; outline: none; }
.paddle::before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: url(../../base/img/bg-11.png) no-repeat center center; background-size: 100% 100%; }
.paddle::after { position: absolute; content: ''; left: 50%; top: 50%; width: 100%; padding-bottom: 74.25%; height: 0; background: url(../../base/img/bg-13.png) no-repeat center center; background-size: 100% 100%; transform: rotate(-26deg); transform-origin: left top; transition: all ease 0.8s; }
.paddle .btn-play { position: absolute; z-index: 1; left: 52%; top: 52%; transform: translate(-50%, -50%); background: #c81818; width: 4rem; height: 4rem; border-radius: 50%; border: 0.7rem solid #000; box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0.35) }
.paddle .btn-play::before { position: absolute; left: 48%; top: 50%; transform: translate(-50%, -50%); content: ""; width: 0; height: 0; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; border-right: 0.8rem solid #fff; }
.paddle .btn-play::after { display: none; position: absolute; left: 51%; top: 50%; transform: translate(-50%, -50%); content: ""; width: 1rem; height: 0.9rem; border-left: 0.35rem solid #fff; border-right: 0.35rem solid #fff; }

#audio-song { display: none; }

/* 播放中 */
.phonograph.on::before { animation: rotate 10s linear infinite; }
.phonograph.on .paddle::before { animation: rotate 10s linear infinite reverse; }
.phonograph.on .paddle::after { transform: rotate(0deg); }
.phonograph.on .paddle .btn-play::before { display: none; }
.phonograph.on .paddle .btn-play::after { display: block; }

/* 导览地图 */
.full720 { margin-bottom: 6.4%; }
.full720 a { display: block; line-height: 999; font-size: 0; height: 0; padding-bottom: 21.0714%; overflow: hidden; background: url(../../base/img/bg-14.jpg) no-repeat center center; background-size: 100% 100%; border-radius: 1.1rem;  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); transition: all ease 0.4s; }
.full720 a:hover { background-image: url(../../base/img/bg-14-hover.jpg); }
.map-pic { margin: 1rem 0; }
.map-pic img { width: 100%; height: auto; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); }

/* 宣传片视频播放 */
.video-player { margin-bottom: 2%; position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; height: 0; }
.video-player video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.video-player .btn-play { position: absolute; left: 50%; top: 50%; padding: 2rem; cursor: pointer; line-height: 1; color: #fff; font-size: 5.5rem; text-shadow: 0 0 1rem rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%); }
.video-player .btn-play:hover { color: #ff0054; }
.video-player .btn-pause { position: absolute; display: none; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; }


@media (max-width:430px) {
    .box-history > .hd .title { text-align: center; }
    .box-history > .hd h4 { transform-origin: center; }
}

@media (min-width:768px) {
    .channel-hd h3 { font-size: 6.25rem; }
    .channel-hd h4 { font-size: 6.25rem; }

    .history-panel .con { flex: 0 0 33rem; }

    .list-leader li { width: 44.2%; }
}

@media (min-width:992px) {
    .list-motto li { width: 20.4%; }
}

/* 动画 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}