@charset "utf-8";
.modeTitle{ font-weight: bold;}
.modeTitle span{ font-weight: normal; color: #ccc; margin-left: 54px; line-height: 38px; position: relative; text-transform: uppercase;position: relative; z-index: 1;}
.modeTitle span::before{ content: ''; display: block; width: 111px; height: 58px; background: url(../images/mode_icon.png) no-repeat center/cover;
    position: absolute; left: -40px; top: -18px; z-index: -1;}
.modeTil{ margin-bottom: 35px;}
.modeTil .modeMore{ display: inline-block; color: #999; padding-left: 34px; line-height: 38px; position: relative;}
.modeTil .modeMore::before{ content: ''; display: block; width: 23px; height: 15px; background: url(../images/mode_more.png) no-repeat center/cover;
    position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}

/* 新闻动态 */
.news{ padding: 160px 0 80px;}
.news .gp-img-responsive{ padding-bottom: 56.25%;}
.news .left{ width: 53.47%;}
.news .left a{ transition: all 0.35s ease;}
.news .left .title{ font-size: 25px; line-height: 36px; margin-top: 17px;}
.news .date{ margin-top: 10px; color: #999; padding-left: 34px; position: relative;}
.news .date i{ position: absolute; left: 0; top: 50%; height: 1px; width: 20px; background: #032e7b; transform: translateY(-50%); margin-top: -3px;}
.news .date i:last-child{ margin-top: 3px;}
.news .date i:before{ content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; border: 1px solid #032e7b; background: #fff; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); transition: all 0.35s ease;}
.news .date i:last-child:before{ left: auto; right: 4px;}
.news a:hover .date i:before{ left: 12px;}
.news a:hover .date i:last-child::before{ left: auto; right: 12px;}
.news .right{ width: 43.75%;}
.news .right ul{ flex-wrap: wrap; margin: 0 -15px;}
.news .right li{ width: 50%; margin-bottom: 27px;}
.news .right li a{ display: block; margin: 0 15px; transition: all 0.35s ease;}
.news .right li a:hover{ transform: translateY(-12px);}
.news .right .title{ line-height: 26px; margin-top: 8px;}

/* 通知公告 */
.notice{ background: url(../images/notice_bg.png) no-repeat center top; padding: 0 0 80px;}
.notice .modeTil a{ display: block; max-width: 480px; margin: 0 auto; text-align: center; position: relative; z-index: 1;}
.notice .modeTil:last-of-type{ text-align: center; margin: 33px 0 0;}
.notice .modeTil:last-of-type a{ display: inline-block;}
.notice .modeTil:last-of-type .modeMore{ line-height: 1; }
.notice .modeCon{ padding-top: 50px;}
.notice .modeCon ul{ margin: 0 -15px;}
.notice .modeCon li{ margin-top: 30px;}
.notice .modeCon a{ align-items: center; padding: 30px 38px 30px 28px; background: #fff; margin: 0 15px; transition: all 0.35s ease; position: relative;}
/* .notice .modeCon a:hover{ transform: translateY(-12px);} */
.notice .modeCon a::before{ content: ''; display: block; width: 0%; height: 100%; background: #1744a0; position: absolute; top: 0; left: 0; transition: all 0.35s ease;}
.notice .modeCon a:hover::before{ width: 100%;}
.notice .date{ width: 54px; flex-shrink: 0; line-height: 30px; position: relative;}
.notice .date div{ color: #1744a0; transform: all 0.35s ease;}
.notice a:hover .date div{ color: #fff;}
.notice .year{ letter-spacing: -1px;}
.notice .title{ height: 140px; width: calc(100% - 100px); position: relative;}
.notice .title span{ -webkit-line-clamp: 3; line-height: 30px; color: #333; position: absolute; top: 50%; transform: translateY(-50%); transition: all 0.35s ease;}
.notice a:hover .title span{ color: #fff;}
.notice .title i{ position: absolute; top: 0; left: -24px; width: 1px; height: 100%; background: #e5e5e5;}
.notice .title i::before,
.notice .title i::after{ content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #e5e5e5; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); z-index: 1;}
.notice .title i::before{ width: 3px; height: 20px; background: #fff; z-index: 0;}

/* 学术活动 */
.academic{ padding: 108px 0 130px; background: url(../images/academic_bg.png) no-repeat center bottom/cover; position: relative;}
.academic::before{ content: ''; display: block; width: 100%; height: 120px; background: url(../images/academic_bg2.png) no-repeat center bottom/cover; position: absolute; left: 0; top: 100%;}
.academic .modeTitle{ color: #fff;}
.academic .modeTitle span{ color: rgba(255, 255, 255, 0.3);}
.academic .modeTitle span::before{ width: 110px; height: 64px; background: url(../images/mode_icon2.png) no-repeat center/cover; opacity: 0.5;}
.academic .modeMore{ color: rgba(255, 255, 255, 0.8);}
.academic .modeCon{ margin-top: 48px; overflow: hidden;}
.academic .left{ width: 440px; flex-shrink: 0; position: relative;}
.academic .gp-img-responsive{ padding-bottom: 131.82%;}
.academic .infoBox{ position: absolute; width: 100%; left: 0; bottom: 0; z-index: 1; box-shadow: 0px -6px 10px 0px rgba(38, 17, 0, 0.1);
    background: rgba(255, 255, 255, 0.9); padding: 25px 53px 38px 30px; box-sizing: border-box; transition: all 0.35s ease;}
.academic a:hover .infoBox{ box-shadow: 0px -6px 10px 0px rgba(38, 17, 0, 0.2);}
.academic .infoBox::before{ content: ''; display: block; width: 100%; height: 100%; background: #1744a0; opacity: 0.7;
    position: absolute; bottom: 0; left: 0; transform: translateY(100%); transition: all 0.35s ease;}
.academic a:hover .infoBox::before{ transform: translateY(0%);}
.academic .infoBox > *{ position: relative; z-index: 1;}
.academic a:hover .gp-img-responsive img{ transform: scale(1.03); opacity: 0.85;}
.academic .left{ position: relative; z-index: 1;}
.academic .left .title{ line-height: 30px; color: #31a621; transition: all 0.35s ease;}
.academic .left a:hover .title{ color: #fff;}
.academic .left .spell, .academic .left .speaker, .academic .left .addr{ color: #666; line-height: 1; margin-top: 13px; transition: all 0.35s ease;}
.academic .left a:hover .spell, .academic .left a:hover .speaker, .academic .left a:hover .addr{ color: rgba(255, 255, 255, 0.8);}
.academic .right{ width: calc(100% - 470px); position: relative; z-index: 0;}
.academic .right li{ background: rgba(255, 255, 255, 0.15); padding: 30px 40px 34px; box-sizing: border-box; margin-bottom: 30px; transition: all 0.35s ease; position: relative;}
.academic .right li::before{ content: ''; display: block; width: 0%; height: 10%; background: rgba(255, 255, 255, 0.8); position: absolute; left: 0; top: 0; filter: blur(10px); transform: skewX(80deg) translateX(-50%); opacity: 0; transition: all 0.35s ease; z-index: -1;}
.academic .right li:hover::before{ width: 100%; height: 100%; transform: skew(0) translateX(0); opacity: 1;}
.academic .right li:hover{ transform: translateX(12px);}
.academic .right li:last-child{ margin-bottom: 0px;}
.academic .right li a{ display: block; padding-left: 30px; box-sizing: border-box; border-left: 1px dashed rgba(255, 255, 255, 0.1); position: relative;}
.academic .right li a::before{ content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: #31a621; position: absolute; left: 0; top: 0; transform: translateX(-50%);}
.academic .right .title{ color: #fff; line-height: 1;}
.academic .right .spell, .academic .right .speaker, .academic .right .addr{ color: rgba(255, 255, 255, 0.6); line-height: 1; margin-top: 14px;}
.academic .right li:hover .title, .academic .right li:hover .spell, .academic .right li:hover .speaker, .academic .right li:hover .addr{
    transition: all 0.35s ease; color: rgba(0, 0, 0, 0.9);
}
.academic .right li:hover .spell, .academic .right li:hover .speaker, .academic .right li:hover .addr{ opacity: 0.6;}

/* 名师介绍 */
.teacher{ position: relative; z-index: 1; background: url(../images/notice_bg.png) no-repeat center top; overflow: hidden;}
.teacher::before{ content: ''; display: block; width: 100%; height: 100%; background: #e4eff7; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); z-index: -1;}
.teacher .modeTil{ text-align: center;}
.teacher .modeTitle{ color: #fff;}
.teacher .modeTitle span::before{ width: 110px; height: 64px; background: url(../images/mode_icon2.png) no-repeat center/cover; opacity: 0.5;}
.teacher .modeTitle span{ color: rgba(255, 255, 255, 0.3);}
.teacher .modeCon{ margin-top: 100px; padding-bottom: 100px; overflow: hidden;}
.teacher .swiper-slide{ padding-right: 15px; transition: padding 1s cubic-bezier(0.380, 0.580, 0.785, 0.540);}
.teacher .swiper-slide:nth-of-type(even){ padding-top: 60px;}
.teacher .name{ line-height: 1; margin-bottom: 20px; color: #000;}
.teacher .imgBox{ border: 1px solid #829fcf; margin-bottom: 40px;}
.teacher .gp-img-responsive{ padding-bottom: 129.46%; transform: translate3d(15px,20px,0);}
.swiperTeacher .post{ color: #666; line-height: 22px; height: 44px; margin-top: 16px;}
.swiperTeacher .detail{ color: #3baa2d; padding-left: 34px; margin-top: 20px; position: relative;}
.swiperTeacher .detail .moreIcon{ position: absolute; left: 0px; top: 50%;
    transform: translateY(-50%); width: 23px; height: 15px; background: url(../images/mode_more.png) no-repeat center/cover;}
.teacherDots{ margin-top: 80px; background: rgba(49, 166, 33, 0.2);}
.swiper-scrollbar-drag{ height: 1px; position: relative;}
.swiper-scrollbar-drag::before{ content: ''; display: block; width: 40px; height: 40px; background: url(../images/scrollbar_icon.png) no-repeat center/cover;
    position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);}







/* 响应式样式 */
@media screen and (max-width:1500px) {
    .banner_btns{ bottom: 45px;}
    .bb{ bottom: 15px;}
}

@media screen and (max-width:1280px) {
    .notice .modeCon ul{ margin: 0 -10px;}
    .notice .modeCon li{ margin-top: 20px;}
    .notice .modeCon a{ margin: 0 10px;}
    .teacher{ background: url(../images/notice_bg.png) no-repeat center top;}
    
}

@media screen and (max-width:1200px) {
    .news{ padding: 150px 0 50px;}
    .news .right{ width: 44.75%;}
    .news .right ul{ margin: 0 -8px;}
    .news .right li a{ margin: 0 8px;}
    .notice .modeCon{ padding-top: 0px;}
    .notice{ padding: 0 0 50px;}
    .modeTitle{ font-size: 28px;}
    .modeTitle span{ font-size: 24px;}
    .news .left .title{ font-size: 22px; line-height: 32px;}
    .academic{ padding: 50px 0 80px;}
    .teacher .modeCon{ padding-bottom: 60px;}
    .teacherDots{ margin-top: 50px;}
    .academic .right{ width: calc(100% - 460px);}
    .notice .modeCon a{ padding: 25px;}
}

@media screen and (max-width: 996px) {
    .body_b{ position: relative; overflow-x: hidden; overflow-y: auto;}
    .modeTil{ margin-bottom: 25px;}
    .news{ padding: 40px 0;}
    .news .mode > .flex{ flex-direction: column;}
    .news .left{ width: 100%;}
    .news .right{ width: 100%; margin-top: 20px;}
    .news .right li{ margin-bottom: 20px;}
    .bb{ display: none;}
    .banner{ height: auto;}
    .banner_btns{ bottom: 15px;}
    .banner_btns .swiper-pagination{ line-height: 28px;}
    .banner .slick-img{ padding-bottom: 56.25%; height: 0;}
    .academic{ padding: 40px 0;}
    .academic .modeCon{ flex-direction: column;}
    .academic .left{ margin: 0 auto; width: 100%; max-width: 430px;}
    .academic .right{ width: 100%; margin-top: 20px;}
    .academic .right li{ margin-bottom: 20px;}
    .academic .infoBox{ padding: 20px;}
    .academic .left .title{ font-size: 18px; line-height: 24px;}
    .academic .left .spell, .academic .left .speaker, .academic .left .addr{ margin-top: 8px;}
    .academic .infoBox::before{ display: none;}
}

@media screen and (max-width:767px) {
    .notice{ position: relative;}
    .notice::before{ content: ''; display: block; width: 100%; height: calc(100% - 70px); background: #e4eff7; position: absolute; bottom: 0; left: 0; z-index: -1;}
    .notice .title{ width: calc(100% - 80px);}
    .notice .title i{ left: -18px;}
    .academic .left{ max-width: 340px;}
}

@media screen and (max-width:680px) {
    
}

@media screen and (max-width:540px) {
    .modeTil{ margin-bottom: 15px;}
    .modeTitle{ font-size: 22px;}
    .modeTitle span{ margin-left: 46px; font-size: 16px;}
    .modeTitle span::before{ width: 100px; height: 52px;}
    .banner_btns{ bottom: 10px;}
    .banner_btns .swiper-pagination{ line-height: 22px; min-width: unset; padding: 0 10px;}
    .teacher .swiper-slide:nth-of-type(even){ padding-top: 0;}
    .news, .academic{ padding: 30px 0;}
    .news .left .title{ font-size: 20px; line-height: 28px; margin-top: 10px;}
    .notice{ padding: 0 0 30px;}
    .notice .modeCon li{ width: 100%;}
    .notice .modeCon a{ padding: 15px 20px;}
    .notice .title{ height: 100px;}
    .academic .modeCon{ margin-top: 30px;}
    .academic .right li{ padding: 20px 25px;}
    .academic .right li a{ padding-left: 20px;}
}

@media screen and (max-width:479px) {
    .teacher .name{ font-size: 18px;}
    .teacher .modeCon{ margin-top: 60px;}
    .notice::before{ height: calc(100% - 50px);}
}

@media screen and (max-width:414px) {
    
}

@media screen and (max-width:380px) {
  
}