.banner-box { width: 100%; position: relative; overflow: hidden; } .banner-box .m-banner-block { width: 100%; } .swiper-banner { position: relative; } .swiper-banner .list .banner-text { position: absolute; bottom: 80px; font-size: 40px; font-weight: 600; color: #fff; z-index: 99; } .swiper-banner .list .banner-text span { color: #fff; position: absolute; bottom: 20px; right: 42px; font-size: 18px; font-weight: 600; font-family: 'facile sans'; } .swiper-banner .list .banner-text a { font-family: "facile sans"; color: #fff; letter-spacing: 2px; text-shadow: 3px 3px 3px #3c3c3c; } .swiper-banner .swiper-pagination { text-align: right; bottom: 80px; } .swiper-banner .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 5px; opacity: 1; background-color: white; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .swiper-banner>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0 0 10px; } .swiper-banner .swiper-pagination-bullet-active { opacity: 1; width: 60px; background-color: #ffc600 !important; } .banner-box .m-index-banner-block .list img { display: block; width: 100%; } .swiper-banner .swiper-button-next, .swiper-banner .swiper-button-prev { position: absolute; top: 50%; width: 84px; height: 84px; margin-top: -42px; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; } .swiper-banner .swiper-button-next { background: no-repeat 0 0; } .swiper-banner .swiper-button-prev { background: no-repeat 0 0; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: ''; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: ''; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 0; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0; left: auto; } /************ ********* 内容 ********* ***********/ .content-box { position: relative; display: block; } /* news */ .news-block { width: 100%; padding: 60px 0; background: repeat left top; } .news-block .contain { width: 1600px; margin: 0 auto; } .news-block .contain h3 { font-family: "roboto condensed-bold"; text-align: center; font-size: 60px; font-weight: 600; color: #003f88; margin-bottom: 30px; } .news-block .contain ul.news-ul { position: relative; width: 100%; } .news-block .contain ul.news-ul li { position: relative; float: left; width: 440px; margin-right: 40px; padding-bottom: 50px; } .news-block .contain ul.news-ul li:last-child { margin-right: 0; } .news-block .contain ul.news-ul li .picimg { width: 100%; } .news-block .contain ul.news-ul li .picimg img { display: block; width: 100%; height:364px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .news-block .contain ul.news-ul li .picimg:hover img { filter: alpha(opacity=80); -moz-opacity: .8; opacity: .8; -khtml-opacity: .8; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; -ms-transition: all .1s linear; -o-transition: all .1s linear; transition: all .1s linear; } .news-block .contain ul.news-ul li .newstext { font-family: "roboto condensed-bold"; position: absolute; left: 0; bottom: 0; width: 90%; background-color: #fff; } .news-block .contain ul.news-ul li .newstext a { display: block; padding: 15px; font-family: 'roboto condensed-bold'; font-size: 16px; font-weight: 600; line-height: 32px; color: #333; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; position: relative; z-index: 2; } .news-block .contain ul.news-ul li .newstext::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; z-index:1; background-color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .news-block .contain ul.news-ul li .newstext h2{ padding: 15px; font-size: 16px; position: relative; z-index: 2; font-family: 'roboto-regular'; } .news-block .contain ul.news-ul li .newstext:hover a { color: #fff !important; } .news-block .contain ul.news-ul li .newstext:hover h2 { color: #fff !important; } .news-block .contain ul.news-ul li .newstext:hover::after{ height: 100%; } .news-block .contain ul.news-ul li .newstext:hover a { color: #003f88; } .news-block .contain ul.news-ul:after { content: ""; display: block; clear: both; } /* event */ .event-block { width: 100%; background: no-repeat center; background-size: cover; padding: 60px 0; } .event-block .contain { width: 1600px; margin: 0 auto; } .event-block .contain .ft { width: 750px; } .event-block .contain .ft .picimg { width: 100%; } .event-block .contain .ft .picimg img { display: block; width: 100%; } .event-block .contain .ft .view-more { text-align: right; padding-right: 60px; } .event-block .contain .ft .view-more a { float: right; display: block; width: 194px; height: 90px; line-height: 90px; color: #fff; text-transform: uppercase; font-size: 22px; font-weight: 600; text-align: center; margin-right: 130px; background-color: rgba(0, 109, 187, .5); } .event-block .contain .rt { position: relative; width: calc(100% - 750px); height: 620px; padding-left: 60px; } .event-block .contain .rt h2 { font-family: "roboto condensed-bold"; text-align: center; font-size: 60px; font-weight: 600; color: #ffffff; text-align: left; padding-top: 20px; } .event-block .contain .rt ul.event-ul { position: absolute; right: 0; bottom: 0; width: 840px; height: auto; background-color: #fff; z-index: 10; } .event-block .contain .rt ul.event-ul li.items { padding: 20px; } ul.event-ul li.items .calendar { width: 82px; height: 83px; margin-right: 25px; background: no-repeat left top; } ul.event-ul li.items .calendar .day { width: 100%; text-align: center; height: 43px; line-height: 42px; font-size: 24px; font-weight: 600; color: #003f88; } ul.event-ul li.items .calendar .mouth { width: 100%; text-align: center; height: 40px; line-height: 40px; font-size: 16px; font-weight: 600; color: #ffffff; } ul.event-ul li.items .event-text { width: calc(100% - 110px); } ul.event-ul li.items .event-text h3 { font-family: "roboto condensed-bold"; font-size: 22px; line-height: 32px; font-weight: 600; color: #333; margin-bottom: 15px; } ul.event-ul li.items .event-text h3 a { font-family: 'roboto condensed-bold'; font-size: 22px; line-height: 32px; font-weight: 600; color: #333; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } ul.event-ul li.items .event-text h3:hover a { color: #003f88; } ul.event-ul li.items .event-text .infos span { font-size: 16px; font-style: oblique; color: #999999; margin-right: 20px; font-family: 'roboto-regular'; } /* research */ .research-block { position: relative; width: 100%; height: auto; padding: 60px 0; background: no-repeat left top; background-color: #f5f5f5; } .research-block .contain { width: 1600px; margin: 0 auto; } .research-block .contain .title { width: 100%; } .research-block .contain h3 { font-family: "roboto condensed-bold"; text-align: center; font-size: 60px; font-weight: 600; color: #003f88; margin-bottom: 30px; } .research-block .contain ul.research-ul { width: 100%; } .swiper-rese{ float: left; width: 700px; overflow: hidden; position: relative; } .research-block .contain ul.research-ul li .picimg { width: 100%; } .research-block .contain ul.research-ul li .picimg img { display: block; width: 100%; } .research-block .contain ul.research-ul li .research-text { float: left; width: 700px; height: 386px; padding: 45px 50px; margin-top: 48px; background-color: #fff; } ul.research-ul li .research-text h3 { font-family: "roboto condensed-bold"; font-size: 28px; font-weight: 600; color: #333; margin-bottom: 40px; text-align: left; } ul.research-ul li .research-text h3 a { display: block; font-size: 28px; font-weight: 600; color: #333; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } ul.research-ul li .research-text h3:hover a { color: #003f88; } ul.research-ul li .research-text .line { width: 130px; height: 8px; border-radius: 4px; background-color: #003f88; margin-bottom: 30px; } ul.research-ul li .research-text p { font-family: "roboto-regular"; font-size: 16px; line-height: 36px; color: #666; margin-bottom: 35px; } ul.research-ul li .research-text a.view-more-2 { display: block; width: 120px; height: 44px; line-height: 38px; text-align: center; font-size: 18px; color: #003f88; border: solid 3px #003f88; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } ul.research-ul li .research-text a.view-more-2:hover { color: #fff; background-color: #003f88; border: solid 3px #003f88; } /* affiliated */ .affiliated-block { position: relative; height: auto; min-height: 600px; padding: 60px 0 0; background: no-repeat left top; background-size: cover; } .affiliated-block .contain { width: 1600px; margin: 0 auto; } .affiliated-block .contain .title { margin-bottom: 30px; } .affiliated-block .contain .title h3 { font-family: "roboto condensed-bold"; text-align: left; font-size: 60px; font-weight: 600; color: #fff; margin-bottom: 30px; } .affiliated-box { float: right; width: 1280px; background-color: #fff; } .affiliated-box .swiper-affiliated { position: relative; padding-bottom: 120px; } .affiliated-box .swiper-container-horizontal>.swiper-pagination-progressbar { width: 80%; height: 8px; left: 3%; top: auto; border-radius: 4px; overflow: hidden; bottom: 56px !important; } .affiliated-box .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { border-radius: 4px !important; } .affiliated-box .swiper-affiliated .swiper-slide img { display: block; width: 100%; } .swiper-button-next-affiliated, .swiper-button-prev-affiliated { position: absolute; top: auto; bottom: 35px !important; width: 50px; height: 50px; z-index: 10; cursor: pointer; } .swiper-button-next-affiliated { right: 3%; background: no-repeat left top; } .swiper-button-prev-affiliated { left: auto; right: 8% !important; background: no-repeat left top; } /* special column */ .special-blcok { position: relative; width: 100%; padding: 60px 0; background-color: #fff; } .special-blcok .contain { width: 1600px; margin: 0 auto; } .special-blcok .contain .ft, .special-blcok .contain .rt { float: left; width: 50%; } .special-blcok .contain .ft .items { position: relative; width: 100%; } .special-blcok .contain .ft .items .picimg { width: 100%; } .special-blcok .contain .ft .items .picimg img { display: block; width: 100%; } .special-blcok .contain .ft .items .special-text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 50px; background-color: rgba(0, 63, 136, .8); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .special-blcok .contain .ft .items h3 { font-family: "roboto condensed-bold"; font-size: 40px; font-weight: 600; color: #fff; margin-bottom: 150px; } .special-blcok .contain .ft .items a.view-more-2 { display: block; width: 120px; height: 44px; line-height: 38px; text-align: center; font-size: 18px; color: #fff; border: solid 3px #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .special-blcok .contain .ft .items a.view-more-2:hover { color: #003f88; background-color: #fff; border: solid 3px #fff; } .special-blcok .contain .rt ul.special-ul { position: relative; width: 100%; } .special-blcok .contain .rt ul.special-ul li { position: relative; float: left; width: 50%; overflow: hidden; } .special-blcok .contain .rt ul.special-ul li .picimg { width: 100%; } .special-blcok .contain .rt ul.special-ul li .picimg img { display: block; width: 100%; height:354px; object-fit: cover; } .special-blcok .contain .rt ul.special-ul li .special-text { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; padding: 50px; background-color: rgba(0, 63, 136, .8); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .special-blcok .contain .rt ul.special-ul li:hover .special-text { top: 0; } .special-blcok .contain .rt ul.special-ul li .special-text h3 { font-family: "roboto condensed-bold"; font-size: 30px; font-weight: 600; color: #fff; margin-bottom: 150px; } .special-blcok .contain .rt ul.special-ul li .special-text a.view-more-3 { display: block; width: 50px; height: 50px; line-height: 46px; text-align: center; font-size: 16px; color: #fff; background-color: transparent; border-radius: 25px; border: solid 2px #fff; } .special-blcok .contain .rt ul.special-ul:after { content: ""; display: block; clear: both; } /* 设备分辨瞇 */ @media only screen and (min-width: 1601px) and (max-width: 1920px) { .swiper-banner .list .banner-text { left: 160px; } .swiper-banner .swiper-pagination { padding: 0 160px; } /* news */ .news-block .contain { width: 1400px; } /* event */ .event-block .contain { width: 1400px; } /* research */ .research-block .contain { width: 1400px; } /* affiliated */ .affiliated-block .contain { width: 1400px; } /* special column */ .special-blcok .contain { width: 1400px; } } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .special-blcok .contain .rt ul.special-ul li .picimg img { height: 304px; } .news-block .contain ul.news-ul li .picimg img{ height:264px; } .event-block .contain .ft .view-more a{ margin-right:0; } .swiper-banner .list .banner-text { left: 120px; } .swiper-banner .swiper-pagination { padding: 0 120px; } /* news */ .news-block .contain { width: 1200px; } .news-block .contain h3 { font-size: 48px; } .news-block .contain ul.news-ul li { width: 385px; margin-right: 20px; } /* event */ .event-block .contain { width: 1200px; } .event-block .contain .rt h2 { font-size: 48px; } .event-block .contain .ft { width: 635px; } .event-block .contain .rt { width: calc(100% - 635px); height: 492px; } .event-block .contain .rt ul.event-ul { width: 635px; } .event-block .contain .rt ul.event-ul li.items:last-child { display: none; } ul.event-ul li.items .event-text .infos span { font-size: 14px; } /* research */ .research-block .contain { width: 1200px; } .research-block .contain h3 { font-size: 48px; } .research-block .contain ul.research-ul li .picimg { width: 600px; } .research-block .contain ul.research-ul li .research-text { width: 600px; height: 372px; padding: 30px; margin-top: 0; } .swiper-rese { width: 600px; } /* affiliated */ .affiliated-block .contain { width: 1200px; } .affiliated-block .contain .title h3 { font-size: 48px; } .affiliated-box { width: 1059px; } .affiliated-box .swiper-affiliated { padding-bottom: 80px; } .affiliated-box .swiper-container-horizontal>.swiper-pagination-progressbar { bottom: 36px !important; } .swiper-button-next-affiliated, .swiper-button-prev-affiliated { bottom: 15px !important; } /* special column */ .special-blcok .contain { width: 1200px; } .special-blcok .contain .ft .items h3 { font-size: 32px; margin-bottom: 115px; } .special-blcok .contain .rt ul.special-ul li .special-text { padding: 50px 30px; } .special-blcok .contain .rt ul.special-ul li .special-text h3 { font-size: 28px; margin-bottom: 120px; } }