.banner { width: 1300px; height: 440px; /*.margin-top: 20px;*/ overflow: hidden; position: relative;} .banner .ban_img { width: 500%; height: 100%; position: absolute; left: 0; top: 0;} .banner .ban_img li { float: left; width: 20%; height: 100%;} .banner .ban_img img { width: 100%; height: 100%;} .banner .swiper-pagination-bullet-active { background: #003f8b !important;} .banner .page { width: 1200px; height: 36px; margin: 0 auto; position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); z-index: 8;} .banner .pagination span{ display: inline-block; width: 25px; height: 25px; border-radius: 50%; background: #555; margin: 0 4px; opacity: 0.8; color: #fff; font-size: 12px; font-weight: bolder; line-height: 25px; text-align: center; /* border: 1px solid #fff; */ cursor: pointer; } .pagination { position: absolute; z-index: 20; bottom: 10px; width: 100%; text-align: right;} .swiper-pagination-switch { display: inline-block; width: 36px; height: 36px; border-radius: 50%; background: #555; margin: 0 5px; opacity: 0.8; color: #fff; font-size: 16px; font-weight: bolder; line-height: 36px; text-align: center; /* border: 1px solid #fff; */ cursor: pointer;} .paganation .swiper-pagination-bullet-active{background-color: rgba(0, 63, 139, 0.6) !important;} .swiper-active-switch {background:#003f8b;} /* ============================================================== Main CSS ============================================================== */ /*left*/ /*left*/ .introduction_main{width: 100%; /*height: 697px; background: url(../images/body_back2.jpg)no-repeat left 0; background-size: 100% 100%; */margin-top: 40px;} .introduction_main>.content{height: 100%;} .introduction_main>.content>div{float: left;} .introduction_main>.content>.left{width: 212px; height: 536px; color: #444;} .introduction_main>.content>.right{width: 970px; float: right; position: relative;} .introduction_main .left li{width: 100%; height: 40px; line-height: 40px;letter-spacing: 1px;border-top: none; border-bottom: none; cursor: pointer; transition: .3s;} .introduction_main .left li>a,.introduction_main .left li div{color:#003f8b;display: block; width: 100%; height: 100%; border-bottom: 1px solid #cccccc; line-height: 49px; font-size: 18px; text-align: center;} .intro_active{border-right: none !important; border-left-color: #ff9501 !important; color: #ff9501;} .introduction_main .left .item .yanse:hover{color:#ff9501;} /*right*/ /*/*.content0,*//*.content1,.content2,.content3,.content4,.content5,.content6,.content7,.leader_detail,.heart_detail{display: none;}*/ .content6{opacity: 0; position: absolute; left: -3000px; top: -1000px;} /*------------------学 院 简 介------------------*/ .introduction_main .content0>p{width:auto !important;height:auto !important; margin-bottom: 28px;} #home{width: 25px; height: 25px; float: left; margin-top: -5px; margin-right: 12px;} .address a:nth-child(2):hover{color: #ff9501 !important;} .introduction_main .right .address{color: #9F9F9F; font-size: 18px; line-height: 1; margin-bottom: 26px; margin-top: 25px;} .introduction_main .right>.title{font-size: 18px; color: #003E8B; text-align: left; border-bottom: 1px solid #cccccc; height: 50px; width: 100%; line-height: 49px; letter-spacing: 1px; margin-bottom: 22px;} .introduction_main .right .tit{width: 100%; line-height: 1; text-align: center; font-size: 22px; color: #000; letter-spacing: 1px; margin-bottom: 40px;} .introduction_main .content0>p,.heart_detail>p{width: 960px; height: 45px; text-indent: 2em; font-size: 16px; color: #444444; line-height: 45px; position: relative;} .introduction_main .content0>img,.heart_detail>img{width: 650px; height: 400px; display: block; margin: 0 auto 40px;} .introduction_main .up_time{clear: both;} .introduction_main .up_time>div{font-size: 12px; float: right; margin-left: 16px; margin-bottom: 49px;} .introduction_main .up_time>div:first-child{color: #5c5c5e;} .introduction_main .up_time>div:last-child{color: #999;} /*------------------学 院 校 训------------------*/ .content1>div{width: 300px; height: 280px; margin-right: 30px; float: left; background: #f3f5f4; cursor: pointer;} .content1>div:hover img{opacity: .8;} .content1>div:nth-child(3n){margin-right: 0px;} .content1>div>a>img{width: 100%; height: 160px; transition: .3s;} .content1>div>a>div{width: 100%; height: 120px; line-height: 1; padding: 0 30px;} .content1>div>a>div>div:first-child{font-size: 18px; color: #333; margin: 30px 0 21px;} .content1>div>a>div>div:last-child{font-size: 12px; color: #999;} .college_song{display: none; position: relative;} .music_pic{position: absolute; left: 30px; top: 50px;} .college_song audio{width: 645px; height: 67px; /*background-color: #6613ad;*/ display: block; margin: 0 auto;} .college_song .lyric{width: 580px; height: 840px; border: 1px solid #eaeaea; display: block; margin: 28px auto 36px; box-shadow: 2px 4px 5px #ccc;} .college_talk_{display: none;} .college_talk_ .tit_con{text-align: center; line-height: 1; color: #444444; font-size: 14px; margin-bottom: 47px;} .college_talk_ img{width: 789px; height: 592px; display: block; margin: 0 auto;} /*------------------现 任 领 导------------------*/ .content2 ul{float: left; width: 430px; height: 350px; border-right: 1px solid #e6e8e7;} .content2 ul li{border-bottom: 1px solid #e6e8e7; font-size: 18px; color: #ff9501; clear: both;} .content2 ul li div:first-child{width: 145px; text-indent: 20px; color: #333;} .content2 ul li p{margin-left: 145px; clear: both; line-height: 42px;} .content2 ul li:first-child div{height: 100%; line-height: 50px;} .content2 ul li:first-child{background: #f3f5f4; height: 51px;} .content2 ul li div{float: left; line-height: 42px;} .content2 ul li:nth-child(2){height: 129px;} .content2 ul li:nth-child(3){height: 170px;} .content2 ul:last-child{border-right: none;} .leader{cursor: pointer; transition: .3s;} .leader:hover{color: #6510ad;} .content2_wrap{width: 960px; margin: 0 auto;} .leader_detail{width: 830px; height: 460px; position: relative; z-index: 10000; background-color: #FFF; border: 1px solid #6510ad; position: absolute; left: 0; top: 0; padding: 40px 46px; display: none;} .leader_detail_left{width: 521px; /*height: 365px;*/ float: left;} .leader_detail_right{width: 108px; height: 140px; float: right; border: 1px solid #ccc; padding: 2px 2px; /*background-image: url(../images/gyh.jpg);*/ background-position: center center; background-size: 166px 232px; background-repeat: no-repeat;} .leader_name{/*line-height: 60px;*/ height: 60px; color: #003E8B; font-size: 20px; border-bottom: 1px solid #ccc; font-weight: bold; position:absolute; background-color:#fff; width: 504.2px;} .leader_name span{font-size: 14px; color: #666; font-weight: normal;} .leader_intro{color: #444; font-size: 16px; line-height: 24px; margin-top: 60px;} .leader_intro>div{margin-top: 22px; text-indent: 2em;} .detail_close{/*width: 15px; height: 15px;*/ width: 25px; height: 25px; animation:remove 3s infinite; background: url(../images/leader_close.jpg)no-repeat; background-size: 100% 100%; position: absolute; right: 18px; top: 18px; cursor: pointer;} .gray_wrap{width: 100%; height:100%; background: rgba(255,255,255,.9); position: absolute; top: 184px; left: 0; z-index: 999; display: none;} /*.detail_close:hover{background: url(../images/zhuan.png)no-repeat;}*/ .detail_close:hover{animation: mymove;} /*------------------领 导 关 怀------------------*/ .content3,.content5,.content7{width: 100%;} .content3 li,.content5 li,.content7 li{width: 222px; height: 310px; background-color: #f3f5f4; margin-right: 23px; float: left; padding: 15px 30px; margin-bottom: 23px; transition: .3s; cursor: pointer;} .content5 li:nth-child(4n),.content7 li:nth-child(4n){width: 220px; height: 310px; background-color: #f3f5f4; margin-right: 0px;} .heart_tit{color: #444; width: 163px; height: 120px; font-size: 18px; line-height: 30px; transition: .3s;} .heart_con{color: #9f9f9f; font-size: 12px; width: 163px; height: 80px; line-height: 16px; margin: 22px 0 26px;} .heart_upload{height: 13px; width: 100%;} .heart_upload>div:first-child{float: left; text-indent: 2em; color: #444; background: url(../images/clock.jpg)no-repeat left center; background-size: 13px 13px;} .heart_upload>div:nth-child(2){float: right; text-indent: 2em; color: #444; background: url(../images/eye.jpg)no-repeat left center; background-size: 17px 13px;} .content3 li:last-child,.content5 li:last-child,.content7 li:last-child{margin-bottom: 50px;} .content3 a:last-child li{margin-right: 0;} .content3 li:hover .heart_tit,.content5 li:hover .heart_tit,.content7 li:hover .heart_tit{color: #FF9501;} .content3 li:hover,.content5 li:hover,.content7 li:hover{box-shadow: 3px 3px 3px #ccc;} .content3 a:nth-child(4n) li{margin-right: 0;} /*------------------领 导 关 怀 详 情------------------*/ .heart_detail>p>span{color: #000; font-weight: bold;} .heart_pic_tit{font-size: 13px; color: #666; text-align: center; letter-spacing: 1px; line-height: 1; margin-bottom: 20px;} .heart_detail>img{margin-bottom: 20px;} .heart_detail .author{float: right; clear: both; line-height: 54px;} /*------------------学 院 动 态------------------*/ .content4{padding: 0 40px;} .content4 li{height: 130px; border-bottom: 1px solid #ccc; overflow: hidden; padding-top: 20px;} .content4_time{width: 60px; height: 60px; background: url(../images/content4_time.jpg); margin-right: 20px; float: left;} .content4_time>div:first-child{font-size: 22px; color: #fff; line-height: 40px; font-weight: bold; text-align: center;} .content4_time>div:last-child{font-size: 12px; color: #fff; line-height: 1; text-align: center;} .content4_con{width: 792px; height: 100%; float: right;} .content4_tit{color: #000; font-size: 18px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 12px;} .content4_content{line-height: 21px; color: #999; font-size: 14px;} .content4_con>div:last-child{text-indent: 2em; background: url(../images/eye_.jpg)no-repeat left center; background-size: 17px 13px; color: #9f9f9f; line-height: 18px; float: right;} .content4__btn_wrap a,.content4__btn_wrap span,.content7__btn_wrap a,.content7__btn_wrap span{display: block; float: left; width: 30px; height: 35px; border: 1px solid #d3d3d3; margin-right: 8px; text-align: center; line-height: 35px; border-radius: 3px;} .content4__btn_wrap span,.content7__btn_wrap span{background-color: #003E8B; color: #fff; border: none;} .content4_list_btn,.content7_list_btn{clear:both; display: table; text-align: center; width: 510px; margin: 35px auto 120px;} .prev,.next{width: 42px !important;} .content4 .jump-ipt,.content7 .jump-ipt{width: 30px; height: 35px;float: left; border: none; border-bottom: 1px solid #ccc; margin-right: 8px; margin-left: 20px; text-align: center;} .content4 .jump-btn,.content7 .jump-btn{border: none !important;} /*------------------魅 力 职 院------------------*/ .content6{padding: 15px 14px; width: 100%; max-width: 960px;} .sjs-default{position:relative;margin:0;opacity:0;transition:height .2s ease-out,opacity .2s ease-out .2s;}[data-sjsel]{opacity:0; cursor: pointer; background: #eeeeee; padding:15px 15px 0; position:absolute; top:0; left:0; transition:-webkit-transform .2s ease-out; transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;} /*[data-sjsel]:hover .card__title{color: #FF9501;}*/ .content6 img{max-width: 100%;} b,strong{font-weight: 600;} hr{background: #111; box-shadow: none; border: none; height: 1px; width: 100%; margin: 10px 0;} .content6 .container{width: 100%; max-width: 960px; margin: 0 auto;padding: 0 10px;} .content6 .wrapper{padding: 0 0 40px;} .card{display: flex; flex-direction: column; transition: box-shadow .2s ease-in-out;} .card__picture{display: block; width: 100%; height: auto; border-top-left-radius: 6px; border-top-right-radius: 6px;} .card-infos{border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;} .card__title{font-weight: 500; font-size: 18px; /*color: #444;*/ color:#003E8B; height: 38px; line-height: 38px; border-bottom: 1px solid #ccc; transition: .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .card__text{font-size: 14px; font-weight: 300; color: #9f9f9f; margin-top: 4px; line-height: 28px; height: 30px;} .card__text--high{font-weight: 600;} .content6 .header{background: var(--main-bg-color); height: 160px; display: flex;} .header__title{margin: auto; font-weight: 300; font-size: 3.2rem; color: #fff;} .header__title--high{font-weight: 600;} .sortable__nav{display: flex; justify-content: center; margin-bottom: 20px;} .nav__link{padding: 0 20px 4px; color: #fff; font-size: 1.4rem; font-weight: 300; display: block; border-bottom: 2px solid transparent;} .nav__link.is-active{border-color: var(--main-bg-color);} .footer__list.list{display: flex; justify-content: space-between; align-items: center;} .list__item.item{display: flex;} .item__link.link{margin: 0;} .item__link.link:not(:first-child){margin-left: 20px;} .link__icon{height: 2rem; width: 2rem;} .cool_upload{height: 13px; width: 100%; margin-bottom: 12px;} .cool_upload>div{color: #9f9f9f; font-size: 12px; text-indent: 2em; display: block;} .cool_upload>div:first-child{float: left; background: url(../images/clock_.jpg)no-repeat left center; background-size: 13px 13px;} .cool_upload>div:last-child{float: right; background: url(../images/eye_.jpg)no-repeat left center; background-size: 17px 13px;} .cool_pic_wrap{/*width: 600px; */position: fixed; top: 60%; left: 50%; transform: translate(-50%,-50%); z-index: 999; display: none; box-shadow: 0px 0px 40px #000;} /*#cool_big_pic{width: 600px; height: 400px; max-height: 500px;}*/ .cool_close_btn{width: 40px; height: 40px; position: absolute; right: -20px; top: -20px; cursor: pointer;} /*------------------影 像 资 料------------------*/ .content7 li{padding: 17px 13px; position: relative;} .content7 .heart_tit{font-size: 14px; line-height: 24px; margin-top: 10px; width: 197px; height: 48px;} .content7 .heart_con{margin: 22px 0 17px; width: 197px; height: 32px;} .content7 .video_state{width: 53px; height: 53px; position: absolute; top: 50.5px; left: 85px;} .video_pic{width: 196px; height: 128px;} #content7_wrap>li>img:first-child{width: 196px; height: 128px;} /* ============================================================== Footer CSS ============================================================== */ @media (min-width: 1300px) and (max-width: 1500px){ /*#cool_big_pic{width: 600px; width: 600px; height: auto; max-height: 300px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);}*/ /*.cool_close_btn{width: 40px; height: 40px; position: absolute; right: 130px; top: -165px;}*/ } @media (min-width: 1501px) and (max-width: 1600px){ /*#cool_big_pic{width: 700px; width: 700px; height: auto; max-height: 400px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);}*/ /*.cool_close_btn{width: 40px; height: 40px; position: absolute; right: 77px; top: -216px;}*/ } .content__btn_wrap a,.content__btn_wrap span{display: block; float: left; width: 30px; color: #003E8B; height: 35px; border: 1px solid #d3d3d3; margin-right: 8px; text-align: center; line-height: 35px; border-radius: 3px;} .content__btn_wrap span{background-color: #003E8B; color: #fff; border: none;} .content_list_btn{clear:both; display: table; text-align: center; width: 510px; margin: 35px auto 120px;} .prev,.next{width: 42px !important;} .content .jump-ipt{width: 30px; height: 35px;float: left; border: none; border-bottom: 1px solid #ccc; margin-right: 8px; margin-left: 20px; text-align: center;} .content .jump-btn{border: none !important;} @media (min-width: 1366px) and (max-width: 1600px){ .banner{width:1300px; height:440px;margin-top:25px;} }