body { margin: 0; background-color: #f6f6f6; } .admission-officer { min-height: 100vh; background-color: #f6f6f6; min-width: 1200px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .admission-officer * { padding: 0; margin: 0; box-sizing: border-box; scroll-behavior: smooth; } .admission-officer .flexflex { display: flex; } .admission-officer .flexcenter { display: flex; justify-content: center; align-items: center; } .admission-officer .flexacenter { display: flex; align-items: center; } .admission-officer .flex1 { flex: 1; } .admission-officer img { object-fit: cover; } .admission-officer a { text-decoration: none; } .admission-officer a:hover { text-decoration: underline; } .admission-officer .one-line-display { word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admission-officer .admission-head { width: 100%; height: 144px; background-color: #3c7de9; position: relative; margin-top: -50px; } .admission-officer .admission-head .admission-head-logo { width: 223px; height: 50px; position: absolute; top: 60px; left: calc((100vw - 1200px) / 2); z-index: 1; } @media screen and (max-width: 1200px) { .admission-officer .admission-head .admission-head-logo { left: 0; } } .admission-officer .admission-head .admission-head-box { min-width: 1200px; height: 216px; position: relative; top: 0; left: 50%; transform: translateX(-50%); overflow: hidden; } .admission-officer .admission-head .admission-head-1 { position: absolute; top: 0; left: 50%; transform: translateX(-50%); min-width: 1920px; height: 216px; width: 100%; } .admission-officer .admission-body { width: 1200px; margin: 0 auto; padding-top: 54px; position: relative; } .admission-officer .admission-body .interview-box { width: 100%; height: 435px; margin: 0 auto; position: relative; z-index: 1; } .admission-officer .admission-body .interview-box .bj { width: 100%; height: 435px; position: absolute; top: 0; left: 0; z-index: -1; } .admission-officer .admission-body .interview-box .left { padding-top: 14px; padding-left: 20px; margin-right: 20px; } .admission-officer .admission-body .interview-box .left .head { margin-bottom: 11px; } .admission-officer .admission-body .interview-box .left .head .icon { width: 38px; margin-right: 1px; } .admission-officer .admission-body .interview-box .left .head .name { width: 125px; } .admission-officer .admission-body .interview-box .left .content { width: 592px; height: 333px; position: relative; border-radius: 10px; overflow: hidden; } .admission-officer .admission-body .interview-box .left .content::after { content: ""; width: 100%; height: 19px; background-color: #000000; border-radius: 10px 10px 0 0; display: block; position: absolute; top: 0; left: 0; } .admission-officer .admission-body .interview-box .left .content::before { content: ""; width: 100%; height: 19px; background-color: #000000; border-radius: 0 0 10px 10px; display: block; position: absolute; bottom: 0; left: 0; } .admission-officer .admission-body .interview-box .left .content .img { width: 592px; height: 333px; } .admission-officer .admission-body .interview-box .left .content .play-btn { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } .admission-officer .admission-body .interview-box .left .content .bottom { position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%); padding: 17px 22px 13px; transition: all 0.3s; } .admission-officer .admission-body .interview-box .left .content .bottom .title { font-weight: 650; font-style: normal; font-size: 16px; color: #ffffff; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; margin-bottom: 5px; } .admission-officer .admission-body .interview-box .left .content .bottom .subtitle { font-size: 13px; color: #ffffff; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .admission-officer .admission-body .interview-box .focus-box { width: 552px; height: 293px; background-color: #fbfbfb; border-radius: 10px; margin-top: 115px; position: relative; } .admission-officer .admission-body .interview-box .focus-box .ok { width: 101px; height: 127px; position: absolute; top: -122px; right: 45px; z-index: -1; } .admission-officer .admission-body .interview-box .focus-box .head { width: 100%; height: 36px; background-color: #dceed5; border-radius: 10px 10px 0 0; } .admission-officer .admission-body .interview-box .focus-box .head .arrows { width: 24px; height: 24px; } .admission-officer .admission-body .interview-box .focus-box .head .name { width: 79px; height: 27px; margin: 0 31px; } .admission-officer .admission-body .interview-box .focus-box .content { height: 257px; } .admission-officer .admission-body .interview-box .focus-box .content .info { border-right: 1px solid #ebebeb; width: 193px; padding: 25px 24px; } .admission-officer .admission-body .interview-box .focus-box .content .info .label { position: relative; z-index: 1; width: 72px; height: 21px; font-weight: 650; font-style: normal; font-size: 15px; color: #ffffff; margin-bottom: 20px; } .admission-officer .admission-body .interview-box .focus-box .content .info .label .icon { position: absolute; z-index: -1; width: 72px; height: 21px; } .admission-officer .admission-body .interview-box .focus-box .content .info .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; margin-bottom: 11px; } .admission-officer .admission-body .interview-box .focus-box .content .info .name .professional { font-size: 14px; color: #555555; display: flex; align-items: flex-end; font-weight: 400; margin-left: 6px; } .admission-officer .admission-body .interview-box .focus-box .content .info .subheading { font-size: 14px; color: #555555; margin-bottom: 11px; } .admission-officer .admission-body .interview-box .focus-box .content .introduce-box { flex-direction: column; justify-content: space-between; padding-bottom: 20px; padding-top: 13px; } .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list { margin-left: 49px; } .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item { width: 291px; font-size: 14px; line-height: 52px; color: #333333; position: relative; white-space: pre-line; } .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item::after { content: ""; width: 6px; height: 6px; background-color: #000000; border-radius: 50%; position: absolute; top: 24px; left: -16px; } .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item:not(:last-child) { border-bottom: 1px dotted #d7d7d7; } .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn { width: 126px; height: 34px; background-color: #d35110; border-radius: 86px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #ffffff; margin-left: auto; cursor: pointer; user-select: none; } .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn .icon { width: 20px; height: 20px; margin-left: 6px; } .admission-officer .admission-body .preach-box { width: 100%; height: 435px; margin: 0 auto; position: relative; z-index: 1; } .admission-officer .admission-body .preach-box .bj { width: 100%; height: 435px; position: absolute; top: 0; left: 0; z-index: -1; } .admission-officer .admission-body .preach-box .left { padding-top: 14px; padding-left: 20px; margin-right: 20px; } .admission-officer .admission-body .preach-box .left .head { margin-bottom: 17px; } .admission-officer .admission-body .preach-box .left .head .icon { width: 38px; height: 50px; margin-right: 10px; } .admission-officer .admission-body .preach-box .left .head .name { width: 125px; } .admission-officer .admission-body .preach-box .left .box { width: 444px; height: 327px; background-color: #f6f6f6; border-radius: 10px; } .admission-officer .admission-body .preach-box .left .box .indicators { padding-top: 12px; padding-bottom: 16px; } .admission-officer .admission-body .preach-box .left .box .indicators .item { width: 6px; height: 6px; background-color: #d7d7d7; border-radius: 67px; margin: 0 2px; transition: all 0.3s; cursor: pointer; } .admission-officer .admission-body .preach-box .left .box .indicators .item.pitch { margin: 0 3px; width: 20px; background-color: #d35110; } .admission-officer .admission-body .preach-box .left .box .list { width: 404px; margin: 0 auto; overflow: auto; height: 280px; scrollbar-width: none; -ms-overflow-style: none; overflow-y: auto; } .admission-officer .admission-body .preach-box .left .box .list::-webkit-scrollbar { display: none; } .admission-officer .admission-body .preach-box .left .box .list .item { height: 70px; padding-left: 18px; padding-right: 20px; cursor: pointer; } .admission-officer .admission-body .preach-box .left .box .list .item.pitch-last { border-bottom: 1px dotted transparent !important; } .admission-officer .admission-body .preach-box .left .box .list .item.pitch { background-color: #76c45e; border-radius: 10px; border-bottom: 1px dotted #76c45e !important; } .admission-officer .admission-body .preach-box .left .box .list .item.pitch .info .name { color: #fff; } .admission-officer .admission-body .preach-box .left .box .list .item.pitch .info .time { color: #fff; } .admission-officer .admission-body .preach-box .left .box .list .item.pitch .icon { display: block; } .admission-officer .admission-body .preach-box .left .box .list .item:not(:last-of-type) { border-bottom: 1px dotted #d7d7d7; } .admission-officer .admission-body .preach-box .left .box .list .item .info .name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-size: 15px; color: #000000; margin-bottom: 4px; width: 355px; } .admission-officer .admission-body .preach-box .left .box .list .item .info .time { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; color: #555555; font-size: 13px; } .admission-officer .admission-body .preach-box .left .box .list .item .icon { display: none; width: 16px; height: 16px; } .admission-officer .admission-body .preach-box .right { width: 690px; height: 293px; background-color: #fbfbfb; border-radius: 10px; margin-top: 115px; position: relative; } .admission-officer .admission-body .preach-box .right .ok { width: 101px; height: 127px; position: absolute; top: -122px; right: 45px; z-index: -1; } .admission-officer .admission-body .preach-box .right .img-box { width: 690px; height: 293px; overflow: hidden; } .admission-officer .admission-body .preach-box .right .img-box .video-img { position: relative; width: 690px; height: 293px; } .admission-officer .admission-body .preach-box .right .img-box .video-img::after { content: ""; width: 100%; height: 19px; background-color: #000000; border-radius: 10px 10px 0 0; display: block; position: absolute; top: 0; left: 0; } .admission-officer .admission-body .preach-box .right .img-box .video-img::before { content: ""; width: 100%; height: 19px; background-color: #000000; border-radius: 0 0 10px 10px; display: block; position: absolute; bottom: 0; left: 0; } .admission-officer .admission-body .preach-box .right .img-box .video-img .play-btn { width: 50px; height: 50px; position: absolute; top: 50%; left: 241px; transform: translateY(-50%); cursor: pointer; } .admission-officer .admission-body .preach-box .right .img-box .video-img .img { width: 521px; height: 293px; border-radius: 10px; } .admission-officer .admission-body .preach-box .right .img-box .video-img .bottom { position: absolute; left: 0; bottom: 0; width: 521px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%); padding: 17px 22px 13px; border-radius: 0 0 10px 10px; } .admission-officer .admission-body .preach-box .right .img-box .video-img .bottom .title { font-weight: 650; font-style: normal; font-size: 16px; color: #ffffff; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; margin-bottom: 5px; } .admission-officer .admission-body .preach-box .right .img-box .video-img .bottom .subtitle { font-size: 13px; color: #ffffff; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info { width: 169px; height: 293px; z-index: 1; position: relative; flex-direction: column; justify-content: center; padding-left: 13px; } .admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-side-bj { position: absolute; top: 0; right: 0; width: 198px; height: 293px; z-index: -1; } .admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 15px; color: #ffffff; text-align: center; position: relative; width: 140px; height: 21px; margin-bottom: 20px; } .admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-title .interview-title-icon { width: 140px; height: 21px; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #ffffff; margin-bottom: 10px; align-items: flex-end; } .admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-name .interview-professional { color: #ffffff; font-size: 13px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; margin-left: 12px; } .admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .margin-b-10 { margin-bottom: 10px; } .admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-subheading { font-size: 13px; color: #ffffff; } .admission-officer .admission-body .preach-box .right .img-box .item { width: 690px; height: 293px; } .admission-officer .admission-body .preach-box .right .img-box .img { width: 690px; height: 293px; border-radius: 10px; } .admission-officer .admission-body .interview-more { margin-top: 22px; } .admission-officer .admission-body .interview-more .case { width: 139px; height: 200px; background-color: #76c45e; border-radius: 10px; flex-direction: column; margin-right: 10px; } .admission-officer .admission-body .interview-more .case.preach { background-color: #3c7de9; } .admission-officer .admission-body .interview-more .case .name { font-weight: 650; font-style: normal; font-size: 20px; color: #ffffff; margin-bottom: 9px; } .admission-officer .admission-body .interview-more .case .english { font-size: 14px; color: #ffffff; text-align: center; } .admission-officer .admission-body .interview-more .swiper-box { position: relative; } .admission-officer .admission-body .interview-more .swiper-box .btn { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.8); position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; border-radius: 50%; cursor: pointer; user-select: none; } .admission-officer .admission-body .interview-more .swiper-box .btn.left { left: 10px; } .admission-officer .admission-body .interview-more .swiper-box .btn.right { right: 10px; transform: translateY(-50%) rotate(180deg); } .admission-officer .admission-body .interview-more .swiper-box .btn .arrows { width: 13px; height: 20px; } .admission-officer .admission-body .interview-more .swiper-box .swiper { width: 1052px; overflow: hidden; } .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item { width: 356px; height: 200px; position: relative; border-radius: 10px; cursor: pointer; } .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item::after { content: ""; width: 100%; height: 12px; background-color: #000000; border-radius: 10px 10px 0 0; display: block; position: absolute; top: 0; left: 0; } .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item::before { content: ""; width: 100%; height: 12px; background-color: #000000; border-radius: 0 0 10px 10px; display: block; position: absolute; bottom: 0; left: 0; } .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item:not(:last-child) { margin-right: 10px; } .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .img { width: 356px; height: 200px; border-radius: 10px; } .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom { position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%); padding: 17px 22px 13px; border-radius: 0 0 10px 10px; } .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom .title { font-weight: 650; font-style: normal; font-size: 16px; color: #ffffff; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; margin-bottom: 5px; } .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom .subtitle { font-size: 13px; color: #ffffff; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .admission-officer .admission-body .school-list { margin-top: 102px; margin-bottom: 90px; } .admission-officer .admission-body .school-list .school-item:not(:last-child) { margin-bottom: 102px; } .admission-officer .admission-body .school-list .school-item .left { position: relative; margin-right: 45px; z-index: 3; width: 505px; } .admission-officer .admission-body .school-list .school-item .left .abbreviation { width: 100px; height: 32px; line-height: 32px; background-color: #7d2882; border-radius: 86px; font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-style: normal; color: #ffffff; font-size: 13px; display: inline-flex; position: absolute; top: 0; left: 0; z-index: 2; text-align: center; } .admission-officer .admission-body .school-list .school-item .left .icon { width: 130px; height: 62px; position: absolute; top: 0; left: 0; z-index: 1; } .admission-officer .admission-body .school-list .school-item .left .img { width: 505px; border-radius: 20px; } .admission-officer .admission-body .school-list .school-item .right { width: 651px; z-index: 2; } .admission-officer .admission-body .school-list .school-item .right .info { padding-bottom: 24px; border-bottom: 1px dotted #d7d7d7; } .admission-officer .admission-body .school-list .school-item .right .info .img { height: 47px; margin-right: 10px; cursor: pointer; } .admission-officer .admission-body .school-list .school-item .right .info .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; margin-bottom: 6px; cursor: pointer; } .admission-officer .admission-body .school-list .school-item .right .info .name .arrows { width: 12px; height: 12px; margin-left: 10px; } .admission-officer .admission-body .school-list .school-item .right .info .english { color: #555555; font-size: 13px; font-family: "ArialMT", "Arial", sans-serif; cursor: pointer; } .admission-officer .admission-body .school-list .school-item .right .introduce { font-size: 14px; color: #555555; margin-top: 19px; margin-bottom: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .admission-officer .admission-body .school-list .school-item .right .content { padding-top: 27px; padding-right: 20px; padding-bottom: 31px; position: relative; z-index: 1; } .admission-officer .admission-body .school-list .school-item .right .content::after { content: ""; width: 1051px; height: 100%; background: -webkit-linear-gradient(0deg, #d6e5e5 0%, #f6f2ea 100%); background: -moz-linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%); background: linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%); border-radius: 20px; display: block; position: absolute; top: 0; right: 0; z-index: -1; } .admission-officer .admission-body .school-list .school-item .right .content .year { margin-bottom: 24px; } .admission-officer .admission-body .school-list .school-item .right .content .year .item { width: 100px; height: 28px; line-height: 28px; position: relative; font-size: 14px; color: #333333; text-align: center; z-index: 1; cursor: pointer; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .svg { width: 100px; height: 28px; position: absolute; top: 0; left: 0; z-index: -1; fill: #fff; } .admission-officer .admission-body .school-list .school-item .right .content .year .item.unfold .svg { fill: #7d2882; } .admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch { color: #ffffff; font-weight: 650; } .admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch .svg { fill: #7d2882; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows { transform: translateY(-50%); width: 9px; height: 5px; margin-left: 5px; vertical-align: middle; transition: all 0.3s; } .admission-officer .admission-body .school-list .school-item .right .content .year .item.more.pitch .arrows { fill: #fff; } .admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold { color: #fff; } .admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .arrows { fill: #fff; transform: translateY(-50%) rotate(180deg); } .admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .more-mask { display: block; } .admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .more-box { display: block; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: auto; display: none; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box { display: none; background: #fff; position: absolute; top: 28px; left: 0; width: 92px; background-color: #7d2882; border-radius: 0 0 10px 10px; padding-top: 6px; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box::after { content: ""; width: 100%; height: 10px; display: block; top: 0; position: absolute; transform: translateY(-100%); z-index: -1; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item { height: 32px; line-height: 32px; font-size: 14px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item:hover { text-decoration: underline; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item { padding: 12px 10px 10px 20px; background-color: #ffffff; border-radius: 10px; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item:not(:last-child) { margin-bottom: 10px; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .icon { width: 28px; height: 28px; background-color: #f3f4f8; border-radius: 50%; margin-right: 10px; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .icon .img { width: 20px; height: 20px; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name { font-size: 16px; color: #333333; margin-bottom: 8px; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .text { line-height: 28px; display: inline; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .label { height: 26px; line-height: 26px; background-color: #3c7de9; border-radius: 3px; position: relative; color: #ffffff; font-size: 13px; font-family: "ArialMT", "Arial", sans-serif; padding: 0 6px; margin-left: 12px; display: inline-flex; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .label .arrows { position: absolute; width: 9px; height: 16px; top: 50%; transform: translateY(-50%) rotate(180deg); left: -4px; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom { justify-content: space-between; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .time { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 14px; color: #000000; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .btn { width: 100px; height: 32px; line-height: 32px; background-color: #7d2882; border-radius: 86px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #ffffff; cursor: pointer; } .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .btn .arrows { width: 12px; height: 12px; margin-left: 7px; } .admission-officer .admission-body .retrospect { padding-bottom: 108px; } .admission-officer .admission-body .retrospect .more-icon { width: 112px; height: 40px; margin-bottom: 30px; } .admission-officer .admission-body .retrospect .list { flex-wrap: wrap; margin-bottom: 29px; } .admission-officer .admission-body .retrospect .list .item { width: 392px; height: 180px; border-radius: 15px; align-items: flex-start; padding: 20px; margin-right: 12px; cursor: pointer; position: relative; z-index: 1; } .admission-officer .admission-body .retrospect .list .item:not(:nth-last-child(-n + 3)) { margin-bottom: 12px; } .admission-officer .admission-body .retrospect .list .item::after { content: ""; background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.9686) 100%); border: 1px solid #f2f2f2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; border-radius: 15px; z-index: -1; } .admission-officer .admission-body .retrospect .list .item:nth-child(3n) { margin-right: 0; } .admission-officer .admission-body .retrospect .list .item .bg { position: absolute; top: 10px; right: 1px; height: 160px; display: block; z-index: -2; } .admission-officer .admission-body .retrospect .list .item .img { width: 47px; margin-right: 10px; } .admission-officer .admission-body .retrospect .list .item .right .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; margin-bottom: 2px; } .admission-officer .admission-body .retrospect .list .item .right .english { color: #555555; font-size: 13px; margin-bottom: 22px; } .admission-officer .admission-body .retrospect .list .item .right .year { flex-wrap: wrap; } .admission-officer .admission-body .retrospect .list .item .right .year .year-item { width: 80px; height: 24px; line-height: 24px; position: relative; font-size: 14px; color: #333333; text-align: center; z-index: 1; cursor: pointer; margin-bottom: 10px; } .admission-officer .admission-body .retrospect .list .item .right .year .year-item .svg { width: 80px; height: 24px; position: absolute; top: 0; left: 0; z-index: -1; } .admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows { transform: translateY(-50%); width: 9px; height: 5px; margin-left: 5px; vertical-align: middle; } .admission-officer .admission-body .retrospect .pages .arrows { width: 7px; height: 12px; margin: 0 24px; cursor: pointer; } .admission-officer .admission-body .retrospect .pages .arrows.rotate180 { transform: rotate(180deg); } .admission-officer .admission-body .retrospect .pages .item { width: 24px; height: 24px; line-height: 24px; border-radius: 50%; font-size: 14px; color: #555555; margin: 0 2px; cursor: pointer; } .admission-officer .admission-body .retrospect .pages .item.pitch { background-color: #3c7de9; color: #fff; } .admission-officer .admission-body .more-school-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.2); z-index: 10000; } .admission-officer .admission-body .more-school-mask .more-school { width: 706px; overflow: hidden; background: #fff; border-radius: 20px; position: relative; } .admission-officer .admission-body .more-school-mask .more-school .close { width: 12px; height: 12px; position: absolute; top: 20px; right: 20px; cursor: pointer; } .admission-officer .admission-body .more-school-mask .more-school .head { width: 100%; height: 100px; padding-left: 36px; background-color: #ffffff; border-bottom: 1px dotted #d7d7d7; } .admission-officer .admission-body .more-school-mask .more-school .head .img { height: 47px; margin-right: 10px; } .admission-officer .admission-body .more-school-mask .more-school .head .info .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; margin-bottom: 4px; } .admission-officer .admission-body .more-school-mask .more-school .head .info .name .icon { width: 12px; height: 12px; margin-left: 10px; } .admission-officer .admission-body .more-school-mask .more-school .head .info .english { color: #555555; font-size: 13px; } .admission-officer .admission-body .more-school-mask .more-school .content { padding: 29px 13px 31px 36px; } .admission-officer .admission-body .more-school-mask .more-school .content .year { margin-bottom: 24px; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item { width: 100px; height: 28px; line-height: 28px; position: relative; font-size: 14px; color: #333333; text-align: center; z-index: 1; cursor: pointer; user-select: none; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item .svg { width: 100px; height: 28px; position: absolute; top: 0; left: 0; z-index: -1; fill: #ebebeb; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch { color: #ffffff; font-weight: 650; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch .svg { fill: #3c7de9; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows { transform: translateY(-50%); width: 9px; height: 5px; margin-left: 5px; vertical-align: middle; transition: all 0.3s; margin-top: 3px; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.pitch .arrows { fill: #fff; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold { color: #fff; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .svg { fill: #76c45e; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .arrows { fill: #fff; transform: translateY(-50%) rotate(180deg); } .admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .more-mask { display: block; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .more-box { display: block; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: auto; display: none; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box { display: none; background: #fff; position: absolute; top: 28px; left: 0; width: 92px; background-color: #76c45e; border-radius: 0 0 10px 10px; padding-top: 6px; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box::after { content: ""; width: 100%; height: 10px; display: block; top: 0; position: absolute; transform: translateY(-100%); z-index: -1; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box .more-item { height: 32px; line-height: 32px; font-size: 14px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box .more-item:hover { text-decoration: underline; } .admission-officer .admission-body .more-school-mask .more-school .content .list { max-height: 448px; min-height: 138px; overflow: auto; padding-right: 20px; } .admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar { width: 7px; } .admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-track { background: transparent; } .admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-thumb { background: #d7d7d7; border-radius: 3.5px; } .admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-thumb:hover { background: #c4c4c4; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item { padding: 12px 10px 10px 20px; background-color: #f6f6f6; border-radius: 10px; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item:not(:last-child) { margin-bottom: 10px; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .icon { width: 28px; height: 28px; background-color: #f3f4f8; border-radius: 50%; margin-right: 10px; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .icon .img { width: 20px; height: 20px; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .name { font-size: 16px; color: #333333; margin-bottom: 8px; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .name .label { width: 120px; height: 26px; line-height: 26px; background-color: #3c7de9; border-radius: 3px; position: relative; color: #ffffff; font-size: 13px; font-family: "ArialMT", "Arial", sans-serif; padding: 0 6px; margin-left: 12px; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .name .label .arrows { position: absolute; width: 9px; height: 16px; top: 50%; transform: translateY(-50%) rotate(180deg); left: -4px; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom { justify-content: space-between; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom .time { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 14px; color: #000000; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom .btn { width: 100px; height: 32px; line-height: 32px; background-color: #76c45e; border-radius: 86px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #ffffff; cursor: pointer; } .admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom .btn .arrows { width: 12px; height: 12px; margin-left: 7px; } .admission-officer .admission-body .paly-box-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); z-index: 10000; } .admission-officer .admission-body .paly-box-mask .paly-box { position: relative; } .admission-officer .admission-body .paly-box-mask .paly-box .close { position: absolute; top: -20px; right: -20px; width: 20px; height: 20px; cursor: pointer; } .admission-officer .admission-body .paly-box-mask .paly-box .paly-video { width: 800px; height: 600px; background-color: #000000; border-radius: 10px; } .admission-officer .admission-body .paly-box-mask .paly-box .paly-video .art-video-player, .admission-officer .admission-body .paly-box-mask .paly-box .paly-video video { border-radius: 10px; overflow: hidden; }