@charset "utf-8";

/* 框架 */
#content { width: auto; margin: 0; padding: 0; }
.rowGroup { padding: 90px 0; }
.row { margin-bottom: 30px; }
.row:last-of-type { margin-bottom: 0; }
.column-4 { float: left; width: 340px; margin-right: 30px; }
.column-6 { float: left; width: 680px; margin-right: 40px; }
.column-8 { float: left; width: 1030px; margin-right: 30px; }
.column-4:last-of-type,
.column-6:last-of-type,
.column-8:last-of-type { margin-right: 0; }

/* 轮播大图 */
#banner { position: relative; height: 100vh; }
#banner .swiper-slide { height: 100%; }
#banner .swiper-slide .bg { height: 100%; transform: scale(1.042); transition: all linear 4s 0.4s; background-color: #fff; background-position: center center; background-size: cover; }
#banner .swiper-slide-active .bg { transform: scale(1); }
#banner .swiper-slide .link { position: absolute; left: 0; right: 0; top: 0; display: block; height: 100%; overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%); }
#banner .swiper-slide video { display: block; width: 100%; height: 100%; object-fit: cover; }
#banner .swiper-slide .con { display: none; }

#banner .swiper-pagination { position: absolute; left: auto; bottom: 50px; text-align: center; line-height: 1; font-size: 0; }
#banner .swiper-pagination-bullet { position: relative; width: auto; height: auto; color: #fff; line-height: 1; background: none; opacity: 1; cursor: pointer; margin: 0; }
#banner .swiper-pagination-bullet::before,
#banner .swiper-pagination-bullet::after { position: absolute; content: ''; left: 1px; right: 50%; top: 50%; margin: -1px 14px 0 0; border-top: 2px dotted rgba(255, 255, 255, 0.8); height: 0; }
#banner .swiper-pagination-bullet::after { left: 50%; right: 1px; margin-right: 0; margin-left: 14px; }
#banner .swiper-pagination-bullet:first-of-type::before { display: none; }
#banner .swiper-pagination-bullet:last-of-type::after { display: none; }
#banner .swiper-pagination-bullet .iconfont { display: block; font-size: 60px; opacity: 1; visibility: hidden; transform: scale(0); }
#banner .swiper-pagination-bullet .dot { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; content: ''; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
#banner .swiper-pagination-bullet,
#banner .swiper-pagination-bullet::before,
#banner .swiper-pagination-bullet::after,
#banner .swiper-pagination-bullet .iconfont,
#banner .swiper-pagination-bullet .dot { transition: all ease 0.5s; }
#banner .swiper-pagination-bullet-active { padding: 0 20px; }
#banner .swiper-pagination-bullet-active::before { margin-right: 37px; }
#banner .swiper-pagination-bullet-active::after { margin-left: 37px; }
#banner .swiper-pagination-bullet-active .iconfont { visibility: visible; transform: scale(1); }
#banner .swiper-pagination-bullet-active .dot { visibility: hidden; transform: scale(0); }

#banner .swiper-prev,
#banner .swiper-next { display: inline-block; vertical-align: top; font-size: 24px; color: #fff; height: 30px; line-height: 30px; 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: #FAF9F2; }
.bg-02 { position: relative; z-index: 1; background: #FAF9F2; }
.bg-02::before { position: absolute; z-index: -1; left: 0; right: 160px; top: 0; bottom: 0; content: ''; background: linear-gradient(113.34deg, #2FA64C 34.53%, #EDB74C 113.96%); }
.bg-03 { background: url(../../base/img/bg-02.png) no-repeat top center / 100% auto, url(../../base/img/bg-03.jpg) no-repeat bottom center / 100% auto; }

/* groupBox */
.groupBox > .hd { position: relative; display: flex; align-items: center; gap: 20px; }
.groupBox > .hd a { color: inherit; text-decoration: none; }
.groupBox > .hd .con { text-align: center; }
.groupBox > .hd h3 { font-size: 46px; line-height: 1; letter-spacing: 2px; color: #333; font-family: "SourceHanSerifCN"; font-weight: 700; }
.groupBox > .hd h4 { margin-bottom: 10px; font-size: 14px; line-height: 20px; color: #999; }
.groupBox > .hd h4 span { position: relative; display: inline-block; vertical-align: top; padding: 0 5px; }
.groupBox > .hd h4 span::before,
.groupBox > .hd h4 span::after { position: absolute; content: ''; right: 100%; top: 50%; width: 15px; height: 1px; background: #ccc; }
.groupBox > .hd h4 span::after { left: 100%; right: auto; }
.groupBox > .hd .more { position: relative; z-index: 1; margin-left: auto; font-size: 14px; line-height: 28px; color: #ccc; }
.groupBox > .hd .more::before { position: relative; z-index: -1; margin-right: -6px; vertical-align: top; display: inline-block; width: 28px; height: 28px; text-align: center; border-radius: 50%; line-height: 28px; font-family: "iconfont"; content: '\e643'; font-size: 10px; color: rgba(237, 183, 76, 0.5); font-weight: bold; background: rgba(237, 183, 76, 0.05); transition: all ease 0.6s; }
.groupBox > .hd .more:hover { color: #2FA64C; text-decoration: none; }
.groupBox > .hd .more:hover::before { transform: translateX(-12px); background: #EDB74C; color: #fff; animation: more 2s ease infinite; content: '\e606'; }
.groupBox > .bd { padding-top: 45px; }

/* groupBox - 浅色的 */
.groupBox.light > .hd h4 { color: rgba(255, 255, 255, 0.5); }
.groupBox.light > .hd h3,
.groupBox.light > .hd .more { color: #fff; }
.groupBox.light > .hd h4 span::before,
.groupBox.light > .hd h4 span::after { background: rgba(255, 255, 255, 0.3); }
.groupBox.light > .hd .more::before { background: rgba(255, 255, 255, 0.1); color: #fff; }
.groupBox.light > .hd .more:hover::before { background: #EDB74C; }

/* groupBox - 居中的 */
.groupBox.flexCenter > .hd { justify-content: center; }
.groupBox.flexCenter > .hd .more { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/* 学院新闻 */
#news > .bd { display: flex; gap: 30px; }
#news .list { flex: 1 0 0%; }
#news .list li { position: relative; z-index: 1; margin-top: 10px; display: flex; align-items: center; gap: 30px; background: #fff; padding: 20px 30px; border-radius: 20px 0 20px 0; overflow: hidden; }
#news .list li::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(108.07deg, #2FA64C 51.61%, #EDB74C 124.74%); opacity: 0; transform: scaleY(0); transform-origin: left bottom; visibility: hidden; }
#news .list li:first-child { margin-top: 0; }
#news .list li > a { flex: 1 0 0%; font-size: 18px; line-height: 30px; max-height: 60px; overflow: hidden; }
#news .list .date { text-align: center; font-family: "SourceHanSerifCN"; font-weight: 500; line-height: 1; font-size: 14px; color: #999; }
#news .list .date .dd { display: block; font-size: 30px; color: #EDB74C; font-weight: 700; }
#news .list .date .ym { display: block; margin-top: 7px; }
#news .list .date .ym::before { display: block; margin-bottom: 7px; content: '/'; }

#news .list li::before,
#news .list li > a,
#news .list .date,
#news .list .date .dd { transition: all ease 0.5s; }

#news .list li:hover::before { opacity: 1; transform: scaleY(1); visibility: visible; }
#news .list li:hover > a,
#news .list li:hover .date,
#news .list li:hover .date .dd { color: #fff; }

/* 通知公告 */
.noticeList { background: #fff; padding: 20px 30px; border-radius: 20px 0 20px 0; }
.noticeList li { position: relative; z-index: 1; border-bottom: 1px dashed #ddd; display: flex; align-items: center; gap: 15px; padding: 25px 0 26px; }
.noticeList li:last-child { border-bottom: 0; }
.noticeList li > a { flex: 1 0 0%; font-size: 18px; line-height: 30px; max-height: 60px; overflow: hidden; }
.noticeList .date { text-align: center; font-family: "SourceHanSerifCN"; font-weight: 500; line-height: 1; font-size: 14px; color: #999; }
.noticeList .date .dd { display: block; font-size: 30px; color: #EDB74C; font-weight: 700; }
.noticeList .date .ym { display: block; margin-top: 12px; }

.noticeList li > a,
.noticeList .date,
.noticeList .date .dd { transition: all ease 0.5s; }

.noticeList li:hover .date { transform: translateX(-10px); }
.noticeList li:hover > a { transform: translateX(-10px); font-weight: bold; color: #2FA64C; }


/* 党团建设 */
#rowParty { padding: 60px 0 70px; }
#rowParty .column-6 { width: 650px; margin-right: 50px; }
#rowParty .column-6:last-child { width: 700px; margin-right: 0; }

#dtjs .list { position: relative; }
#dtjs .list li { position: relative; display: flex; align-items: center; gap: 70px; margin-top: 20px; }
#dtjs .list li:first-child { margin-top: 0; }
#dtjs .list li::before { position: absolute; content: ''; left: 85px; top: -10px; bottom: -10px; width: 0; border-left: 1px dashed rgba(255, 255, 255, 0.3); }
#dtjs .list li:first-child::before { top: 0; }
#dtjs .list li:last-child::before { bottom: 0; }
#dtjs .list li::after { position: absolute; left: 78px; top: 50%; transform: translateY(-50%); content: ''; width: 10px; height: 10px; background: #fff; border: 2px solid #2FA64C; border-radius: 50%; }
#dtjs .list li > a { position: relative; z-index: 1; display: block; padding: 15px 40px; flex: 1 0 0%; font-size: 18px; max-height: 60px; line-height: 30px; color: #fff; overflow: hidden; border-radius: 20px 0 20px 0; }
#dtjs .list li > a::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.1); visibility: hidden; transform: scaleX(0); transform-origin: left bottom; }
#dtjs .list .date { font-family: "SourceHanSerifCN"; font-weight: 500; line-height: 1; font-size: 14px; color: #fff; text-align: center; }
#dtjs .list .date .dd { display: block; font-size: 30px; font-weight: 700; }
#dtjs .list .date .ym { display: block; margin-top: 15px; }

#dtjs .list li::before,
#dtjs .list li::after,
#dtjs .list li > a::before { transition: all ease 0.5s; }

#dtjs .list li:hover::before { border-left-color: #EDB74C; }
#dtjs .list li:hover::after { background: #EDB74C; outline: 2px solid rgba(0, 0, 0, .1); }
#dtjs .list li:hover > a::before { visibility: visible; transform: scaleX(1); }

/* 媒体看学院 */
#mtkxy { position: relative; z-index: 1; height: 592px; padding: 60px 0 0 50px; }
#mtkxy::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; right: -2000px; bottom: -70px; background: #FAF9F2; border-radius: 40px 0 0 0; }
#mtkxy > .hd .panel { margin-left: auto; display: flex; gap: 10px;  }
#mtkxy > .hd .panel a { width: 38px; height: 38px; line-height: 38px; text-align: center; border: 1px solid #ccc; border-radius: 50%; font-size: 18px; color: #ccc; transition: all ease 0.5s; }
#mtkxy > .hd .panel a:hover { border-color: #2FA64C; color: #2FA64C; }
#mtkxy > .bd { margin-right: -236px; }
#mtkxy > .bd .in { overflow: hidden; }
#mtkxy > .bd .tempWrap { width: auto !important; margin: 0 -25px; }

.mediaList li { width: 50%; margin: 0 25px; border-radius: 10px; overflow: hidden; }
.mediaList .pic a { display: block; }
.mediaList .pic img { height: 280px; object-fit: cover; }
.mediaList .con { position: relative; z-index: 1; padding: 24px 30px 24px 80px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; background: #fff; }
.mediaList .con::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; bottom: 0; right: 0; background: #2FA64C; visibility: hidden; transform: scaleY(0); transform-origin: left bottom; }
.mediaList .title { height: 60px; line-height: 30px; font-size: 18px; overflow: hidden; }
.mediaList .title a { color: inherit; }
.mediaList .intro { font-size: 14px; color: #999; line-height: 24px; height: 48px; overflow: hidden; }
.mediaList .others { position: relative; order: -1; display: flex; gap: 15px; font-size: 14px; color: #999; }
.mediaList .date { font-family: "SourceHanSerifCN"; font-weight: 500; line-height: 1; font-size: 14px; line-height: 1; }
.mediaList .date .dd { font-size: 30px; font-weight: 700; color: #EDB74C; }
.mediaList .date .ym { margin-left: 5px; vertical-align: bottom; font-size: 14px; }
.mediaList .date .ym::before { content: "/"; margin-right: 5px; }

.mediaList .others::before { position: absolute; right: 100%; bottom: 0; content: ''; margin-right: 24px; width: 36px; height: 36px; background: linear-gradient(180deg, rgba(237, 183, 76, 0.3) 0%, rgba(237, 183, 76, 0) 100%); border-radius: 50%; }
.mediaList .others::after { position: absolute; right: 100%; bottom: 18px; margin-right: 41px; width: 2px; content: ''; height: 60px; background: #2FA64C; }

.mediaList .con::before,
.mediaList .title,
.mediaList .intro,
.mediaList .others,
.mediaList .date .dd,
.mediaList .others::before,
.mediaList .others::after { transition: all ease 0.5s; }

.mediaList li:hover .title { color: #fff; font-weight: bold; }
.mediaList li:hover .intro,
.mediaList li:hover .others,
.mediaList li:hover .date .dd { color: #fff; }
.mediaList li:hover .con::before { visibility: visible; transform: scaleY(1); }
.mediaList li:hover .others::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%); }
.mediaList li:hover .others::after { background: #fff; }

/* 牧院视界 */
#rowCampus { padding-bottom: 45px; }
#rowCampus::after { display: table; content: ''; clear: both; }
#campus .list { margin: -6px; }
#campus .list li { float: left; width: 17%; padding: 6px; box-sizing: border-box; }
#campus .list li > a { display: block; position: relative; color: #fff; transition: all ease 0.5s; }
#campus .list li .pic { display: block; position: relative; height: 0; overflow: hidden; padding-bottom: 77%; }
#campus .list li .pic img { position: absolute; left: 0; top: 0; transition: all ease 0.5s; }
#campus .list li > a:hover .pic img { transform: scale(1.08); }
#campus .list li .pic::after { position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); }
#campus .list li .title { position: absolute; left: 20px; bottom: 0; line-height: 24px; font-size: 16px; font-weight: bold; padding: 14px 10px; border-bottom: 3px solid #EDB74C; font-weight: bold; }
#campus .list li .con { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 32px 26px; }
#campus .list li .name img { width: 100%; height: auto; }
#campus .list li .intro { margin-top: 16px; text-indent: 2em; font-size: 12px; line-height: 22px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; word-break: break-word; text-overflow: ellipsis; }
@media (max-width: 1800px) {
  #campus .list li .intro { -webkit-line-clamp: 5; }
}
@media (max-width: 1700px) {
  #campus .list li .intro { -webkit-line-clamp: 4; }
}
@media (max-width: 1500px) {
  #campus .list li .intro { -webkit-line-clamp: 3; }
}
#campus .list li:nth-child(1) { width: 27%; }
#campus .list li:nth-child(1) .pic { padding-bottom: 98%; }
#campus .list li:nth-child(2) { width: 39%; }
#campus .list li:nth-child(2) .pic { padding-bottom: 67.3%; }
#campus .list li:nth-child(5) > a { position: relative; height: 0; padding-bottom: 77%; overflow: hidden; background: linear-gradient(113.34deg, #2FA64C 0%, #2FA64C 34.53%, #EDB74C 200%) no-repeat 0 0 / 200% 100%; }
#campus .list li:nth-child(5) > a:hover { background-position: 100% 0; }

/* 专题专栏 */
#rowSpecial { padding-top: 45px; }
#special > .bd { padding-top: 80px; }
.specialList { display: flex; gap: 40px; align-items: flex-start; }
.specialList li { flex: 1 0 calc(25% - 40px); }
.specialList li:nth-child(even) { margin-top: 40px; }
.specialList li > a { display: block; position: relative; z-index: 1; padding: 30px; height: 500px; box-sizing: border-box; overflow: hidden; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.05); }
.specialList li > a::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; right: 0; bottom: 0; background: url(../../base/img/bg-01.jpg) no-repeat 0 0 / auto 100%; }
.specialList .title { writing-mode: vertical-lr; font-family: "SourceHanSerifCN"; font-weight: 900; font-size: 24px; line-height: 34px; letter-spacing: 6px; color: #fff; text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); word-wrap: break-word; white-space: pre-wrap; }
.specialList .more { position: absolute; padding-bottom: 2px; right: 40px; bottom: 55px; font-size: 14px; writing-mode: vertical-lr; color: #fff; letter-spacing: 4px; }
.specialList .more::after { position: absolute; content: ''; left: 50%; top: 100%; width: 1px; height: 55px; background: #fff; }

.specialList li:nth-child(2) > a::before { background-position: 33.3333% 0; }
.specialList li:nth-child(3) > a::before { background-position: 66.6666% 0; }
.specialList li:nth-child(4) > a::before { background-position: 99.9999% 0; }

.specialList li > a,
.specialList li > a::before { transition: all ease 0.5s; }

.specialList li:hover > a { transform: translateY(-20px); }
.specialList li:hover > a::before { transform: scale(1.1); }


/* 近期关注 */
#recent .swiper { padding-top: 20px; }
#recent .swiper-slide { position: relative; z-index: 1; display: flex; align-items: center; padding-left: 20px; width: 33.33%; box-sizing: border-box; border-radius: 500px; }
#recent .swiper-slide::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; right: 50%; bottom: 0; border: 1px solid #2FA64C; border-right: none; border-radius: 500px 0 0 500px; }
#recent .swiper-slide .date { position: relative; margin-right: -30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 90px; height: 90px; font-family: "SourceHanSerifCN"; font-weight: 500; line-height: 1; font-size: 14px; color: #999; text-align: center; background: linear-gradient(270deg, #FFFFFF 0%, #FAF9F2 100%); border-radius: 50%; }
#recent .swiper-slide .date .dd { display: block; font-size: 30px; font-weight: 700; color: #2FA64C; }
#recent .swiper-slide .date .ym { display: block; line-height: 1.5; }
#recent .swiper-slide .con { flex: 1 0 0%; height: 150px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; border: 1px solid #2FA64C; border-radius: 500px; background: linear-gradient(90deg, rgba(47, 166, 76, 0.1) 0%, rgba(47, 166, 76, 0) 100%); }
#recent .swiper-slide .title { padding: 45px 30px 45px 50px; font-size: 18px; line-height: 30px; }
#recent .swiper-slide .title a { display: block; max-height: 60px; overflow: hidden; color: inherit; }

#recent .swiper-slide,
#recent .swiper-slide::before,
#recent .swiper-slide .date,
#recent .swiper-slide .date .dd,
#recent .swiper-slide .con { transition: all ease 0.5s; }

#recent .swiper-slide:hover { transform: translateY(-10px); }
#recent .swiper-slide:hover::before { border-color: #EDB74C; border-right: none; }
#recent .swiper-slide:hover .date { animation: icon 1.4s ease 1; box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); }
#recent .swiper-slide:hover .date .dd { color: #EDB74C; }
#recent .swiper-slide:hover .con { border-color: #EDB74C; background: linear-gradient(90deg, rgba(237, 183, 76, 0.1) 0%, rgba(237, 183, 76, 0) 100%); }

#recent .swiper-pagination { position: static; justify-content: center; margin-top: 70px; display: flex; width: auto; gap: 10px; }
#recent .swiper-pagination-bullet { width: 30px; height: 30px; margin: 0; border-radius: 50%; text-align: center; line-height: 30px; font-size: 16px; color: #2FA64C; font-family: "SourceHanSerifCN"; font-weight: 700; background: transparent; opacity: 1; transition: all ease 0.5s; }
#recent .swiper-pagination-bullet-active { background: #EDB74C; color: #fff; }


/* 快速链接 */
.quickList { position: relative; z-index: 1; display: flex; justify-content: space-between; }
.quickList::before { position: absolute; margin-top: 8px; content: ''; z-index: -1; left: -2000px; top: 50%; right: -2000px; height: 0; border-bottom: 1px dashed #2FA64C; }
.quickList li { position: relative; z-index: 1; width: 160px; }
.quickList li::before { position: absolute; z-index: -1; margin-top: 8px; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border: 2px dotted #EDB74C; border-radius: 50%; background: #fff; }
.quickList li a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 56px; height: 160px; font-size: 18px; line-height: 1.4; padding: 22px 10px; box-sizing: border-box; border-radius: 50%; }
.quickList li a::before { font-family: "iconfont"; font-size: 40px; line-height: 1; content: "\e68c"; color: #2FA64C;
    background: #2FA64C;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.quickList li a::after { position: absolute; z-index: -1; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: linear-gradient(152.23deg, #2FA64C 51.48%, #EDB74C 123.34%); visibility: hidden; opacity: 0; transform: scale(0); }

.quickList li:nth-child(1) a::before { content: '\e615'; }
.quickList li:nth-child(2) a::before { content: '\e6be'; }
.quickList li:nth-child(3) a::before { content: '\e63d'; }
.quickList li:nth-child(4) a::before { content: '\e604'; }
.quickList li:nth-child(5) a::before { content: '\e605'; }
.quickList li:nth-child(6) a::before { content: '\e67f'; }

.quickList li::before,
.quickList li a,
.quickList li a::before,
.quickList li a::after { transition: all ease 0.5s; }

.quickList li:hover a { gap: 14px; font-size: 20px; line-height: 1.8; font-weight: bold; color: #fff; }
.quickList li:hover a::before { font-weight: normal; font-size: 50px; color: #fff; background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%); animation: icon 1.4s ease 1 0.8s; }
.quickList li:hover a::after { visibility: visible; opacity: 1; transform: scale(1); }

#rowAbout { padding-bottom: 19.6%; }
#about > .hd ul { position: absolute; right: 0; top: -90px; display: flex; gap: 15px; }
#about > .hd li a { position: relative; z-index: 1; display: block; padding: 30px 38px; height: 190px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%); font-size: 24px; line-height: 1; letter-spacing: 8px; color: #fff; writing-mode: vertical-lr; text-align: left; overflow: hidden; }
#about > .hd li a::before { position: absolute; z-index: -1; font-family: "iconfont"; content: '\e689'; font-size: 100px; left: 0; top: 0; right: 0; bottom: 0; line-height: 390px; color: rgba(255, 255, 255, 0.15); background: linear-gradient(180deg, #2FA64C 0%, #EDB74C 132.2%); writing-mode: horizontal-tb; visibility: hidden; transform: translateY(-100%); }
#about > .hd li a,
#about > .hd li a::before { transition: all ease 0.6s; }
#about > .hd li.on a,
#about > .hd li a:hover { font-weight: bold; }
#about > .hd li.on a::before,
#about > .hd li a:hover::before { font-weight: normal; visibility: visible; transform: translateY(0); }
#about > .bd { padding-top: 130px; }

#about .picList { display: flex; flex-wrap: wrap; }
#about .picList li { position: relative; width: 23.6%; margin: 0.7%;}
#about .picList .pic a { position: relative; display: block; position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; border-radius: 10px; }
#about .picList .pic a::before { position: absolute; z-index: 1; content: ''; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; }
#about .picList .pic a::after { position: absolute; z-index: 1; font-family: "iconfont"; content: '\e624'; left: 50%; top: 50%; transform: translate(-50%, 140%); font-size: 28px; color: #fff; line-height: 1; visibility: hidden; opacity: 0; }
#about .picList .pic a img { position: absolute; left: 0; top: 0; }
#about .picList .title { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#about .picList .title a { display: block; min-width: 100px; padding: 4px 18px; line-height: 24px; font-size: 16px; color: #fff; text-align: center; background: #EDB74C; box-sizing: border-box; border-radius: 10px 0 10px 0; }

#about .picList li:nth-child(3) { margin-right: 25.7%; }
#about .picList li:nth-child(4) { margin-left: 25.7%; }

#about .picList .pic a::before,
#about .picList .pic a::after,
#about .picList .title a { transition: all ease 0.6s; }

#about .picList li:hover .pic a::before { visibility: visible; opacity: 1; }
#about .picList li:hover .pic a::after { transform: translate(-50%, 70%); visibility: visible; opacity: 1; }
#about .picList li:hover .title a { transform: translateY(-62%); font-weight: bold; background: none; font-size: 24px; }






/* 动画 */
@keyframes down{
    0%{
        transform: translateY(0);
        opacity: 0;
    }
    20%{
        transform: translateY(3px);
        opacity: 1;
    }
    80%{
        transform: translateY(10px);
        opacity: 1;
    }
    90%{
        transform: translateY(10px);
        opacity: 0;
    }
    100%{
          transform: translateY(10px);
        opacity: 0;
    }
}