@charset "UTF-8"; /*!****** lib.css *******/ /*!-----------------[初始化]--------------*/ *,:after,:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0!important; -webkit-tap-highlight-color: rgba(255,255,255,0); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased } table { border-collapse: collapse; border-spacing: 0 } ol,ul { list-style: none } q:after,q:before { content: '' } fieldset,img { border: 0 } abbr,acronym { border: 0 } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0 } .col-c,.col-l,.col_c,.col_l,.l { float: left } .col-r,.col_r,.r { float: right } .c { clear: both } .fix { zoom:1} .fix:after,.fix:before { display: block; content: "clear"; height: 0; clear: both; overflow: hidden; visibility: hidden } em { font-weight: 400; font-style: normal } body { color: #333; font-size: 14px; line-height: 1.5; font-family: 'Microsoft Yahei',"PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif } img { max-width: 100%; border: none } input,select,textarea { font-size: 14px; color: #333; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; font-family: 'Microsoft Yahei',"PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif } input[type=button],input[type=reset],input[type=submit] { cursor: pointer } ::-webkit-input-placeholder { color: rgba(254,254,254,.6) } ::-moz-placeholder { color: rgba(254,254,254,.6) } ::-ms-input-placeholder { color: rgba(254,254,254,.6) } select::-ms-expand { display: none } a { color: #333; text-decoration: none } /*!-----------------[初始化结束]--------------*/ .wp { width: 95%; max-width: 1500px; margin: 0 auto } /*!****************************** -------[=头部]------- ********************************/ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 20 } .hd-top { overflow: hidden; background-color: #076ecb } .nav .rr { display: none } .hd-top .rr,.nav .rr { float: right; height: 40px; line-height: 40px; font-size: 0 } .hd-top .rr a,.nav .rr a { font-size: 14px; color: #fff; line-height: 1.5em; overflow: hidden; display: inline-block; vertical-align: middle; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .hd-top .rr a:hover,.nav .rr a:hover { opacity: .7 } .hd-top .rr em,.nav .rr em { display: inline-block; vertical-align: middle; font-size: 14px; line-height: 1.5em; color: #fff; margin: 0 22px } .header .head { position: relative } .header .head .bg { overflow: hidden; position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 128px; max-width: 1652px; margin: 0 auto; z-index: -1; background: url(../images/hd-bg.png) center center no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -ms-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100% } .header .head .logo { float: left; width: 230px; height: auto; margin-top: 0px; margin-left: 52px; } .header .head .logo a { display: block; width: 100%; height: 100% } .header .head .logo img { display: block; /* width:100%; */ /* height:100%; */ object-fit: cover } .nav { float: right } .nav ul { float: left } .nav li { float: left; margin-left: 65px; position: relative } .nav .v1 { display: block; height: 115px; line-height: 115px; font-size: 18px; color: #0c0c0c; position: relative } .nav .v1:after { content: ""; position: absolute; left: 50%; margin-left: -28px; bottom: 15px; width: 56px; height: 28px; background: url(../images/iconl2.png) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; display: none } .nav .ok .v1::after,.nav .v1:hover:after,.nav li.on .v1:after { display: block } .nav .dropIcon { width: 9px; height: 9px; background: url() no-repeat center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; margin-left: 8px; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s } .nav .ok .dropIcon { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } .nav .sub { position: absolute; top: 80%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); min-width: 160px; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); display: none; border-top: 2px solid #076ecb } .nav .sub .v2 { text-align: center; display: block; font-size: 14px; padding: 5px; background: #fff; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; line-height: 30px } .nav .sub .v2:hover { background: rgba(7,110,203,.8); color: #fff } .header .icon.m { display: none } .header .icon { float: left; width: 28px; height: 28px; overflow: hidden; margin: 42px 36px 0 50px } .header .icon a,.header .icon img { display: block; width: 100%; height: 100%; object-fit: cover } /*!****************************** -------[=导航]------- ********************************/ .menuBtn { display: none; position: fixed; top: 12px; right: 12px; width: 30px; height: 30px; cursor: pointer; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s } .menuBtn b { display: block; height: 4px; background-color: #0b70cc; margin: 4px 0; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s } .menuBtn.open b { display: none; margin: 0; position: absolute; left: 0; top: 50%; margin-top: -5px; width: 30px } .menuBtn.open b:first-child { display: block; transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg) } .menuBtn.open b:last-child { display: block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg) } /*!****************************** -------[=底部]------- ********************************/ .footer { overflow: hidden; background: url(../images/fd-bg.jpg) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover } .footer .fd-l { float: left; width: 85.6%; overflow: hidden } .footer .fd-l .link { overflow: hidden; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 31px 0 24px; border-bottom: 1px solid rgba(255,255,255,.17) } .footer .fd-l .link .icon { width: 16px; height: 16px; overflow: hidden; background: url(../images/iconl3.png) center top no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; margin-right: 9px } .footer .fd-l .link a,.footer .fd-l .link em,.footer .fd-l .link span { font-size: 14px; line-height: 1.5em; color: #fff; display: block; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .footer .fd-l .link a:hover { opacity: .7 } .footer .fd-l .link em { margin: 0 21px 0 25px } .fd-foot { overflow: hidden; padding: 25px 0 24px } .fd-foot .txt { overflow: hidden; float: left; font-size: 14px; line-height: 2.2em; overflow: hidden; color: #fff; padding-top: 7px } .fd-foot .txt .box { overflow: hidden } .fd-foot .txt .info { display: inline-block; vertical-align: middle; margin-right: 18px } .fd-foot .txt .box .info:last-child { margin-right: 0 } .fd-logo { float: right; width: 37.5389%; height: auto; overflow: hidden } .fd-logo img { display: block; width: 60%; float: right; object-fit: cover; } .footer .qr { float: right; width: 120px; height: auto; overflow: hidden; margin-top: 41px } .footer .qr img { display: block; width: 100%; height: 100%; object-fit: cover } /*!****************************** -------[=公用]------- ********************************/ @media only screen and (max-width: 1440px) { .header .head .bg { height:100px } .header .head .logo { width: 180px; } .nav li { margin-left: 38px; } .nav .v1 { height: 90px; line-height: 90px } .nav .v1:after { margin-left: -15px; width: 30px; height: 16px } .header .icon { margin-top: 30px } } @media only screen and (max-width: 1199px) { body { padding-top:70px } .wp { width: auto; max-width: none; padding: 0 15px } .hd-top { display: none } .header .head .bg { display: none } .header { background-color: #fff; border-bottom: 2px solid #0b70cc } .header .head .logo { width: auto; margin: 0; height: 68px; line-height: 68px } .header .head .logo img { display: inline-block; vertical-align: middle; height: 50px; width: auto } .menuBtn { top: 20px; display: block } .nav { position: fixed; top: 70px; width: 100%; left: 0; bottom: 0; padding-top: 10px; background-color: #fff; display: none } .nav ul { float: none } .nav li { float: none; margin: 0 } .nav .v1 { height: auto; line-height: 2em; padding-bottom: 20px; text-align: center; font-size: 16px } .nav .v1:after { bottom: 5px } .header .icon { display: none } .header .icon.m { display: block; float: right; margin: 20px 0 0 } .nav .rr { display: block; float: none; text-align: center } .nav .rr a,.nav .rr em { color: #0b70cc } .footer .fd-l { width: auto; float: none } .footer .fd-l .link { padding: 15px 0; -webkit-justify-content: center; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: center } .fd-foot { padding: 15px 0 } .fd-foot .txt { width: auto; float: none; text-align: center; line-height: 1.5em } .fd-logo { float: none; margin: 0 auto 10px; width: 300px } .footer .qr { display: none } .footer .fd-l .link { display: block; font-size: 0; text-align: center } .footer .fd-l .link .icon,.footer .fd-l .link a,.footer .fd-l .link em,.footer .fd-l .link span { display: inline-block; vertical-align: middle } .nav .dropIcon { position: absolute; top: 20px; right: 10px } .nav .sub { position: static; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; width: auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 0; border-top: none } .nav .sub .v2 { border-bottom: 1px solid #eee } } @media only screen and (max-width: 768px) { body { padding-top:50px } .nav { top: 50px } .header .head .logo { height: 70px; line-height: 70px; } .header .head .logo img { height: 55px; } .menuBtn { top: 24px; } .fd-logo { width: 280px; } .footer .fd-l .link em { margin: 0 5px } } /*!****** lib.css end *******/ /*!****** bl *******/ .banner { overflow: hidden; position: relative } .banner .con { height: 41.98vw; min-height: 200px; overflow: hidden; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover } .banner .swiper-pagination-bullet { width: 40px; height: 55px; line-height: 55px; text-align: center; background-color: transparent; font-size: 24px; color: rgba(248,248,248,.6); font-family: Impact; margin: 0; position: relative; opacity: 1 } .banner .swiper-pagination-bullet:after { content: ""; position: absolute; bottom: 0; width: 25px; height: 3px; left: 50%; margin-left: -12px; background-color: #fff; display: none } .banner .swiper-pagination-bullet-active { color: #f8f8f8 } .banner .swiper-pagination-bullet-active:after { display: block } .banner.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction { bottom: 82px } .m-searchl { overflow: hidden; width: 84%; background: url(../images/so-bg.png) center center no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -ms-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; margin: -49px auto 0; position: relative; z-index: 4; padding: 0 108px } .m-searchl .form { height: 99px; overflow: hidden; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .m-searchl .form .inp { width: 91.954%; overflow: hidden; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.2) } .m-searchl .form .inp input { display: block; width: 100%; height: 30px; line-height: 30px; color: #fefefe; background-color: transparent; font-size: 20px } .m-searchl .form .btn { overflow: hidden } .m-searchl .form .btn input { display: block; width: 54px; height: 54px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background: #ff8c47 url(../images/so.png) center center no-repeat; -webkit-background-size: 23px auto; -moz-background-size: 23px auto; -ms-background-size: 23px auto; -o-background-size: 23px auto; background-size: 23px auto; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .m-searchl .form .btn input:hover { opacity: .7 } .m-newsl { overflow: hidden; padding-top: 66px } .g-titl1 { overflow: hidden; text-align: center; font-size: 0; position: relative } .g-titl1.styl1 { text-align: left; padding-left: 30px } .g-titl1.styl1 .more { position: static; margin: 4px 0 0 50px } .g-titl1 .more { position: absolute; top: 50%; right: 0 } .g-titl1 .more a { font-size: 16px; color: #0b70cc; line-height: 1.5em; overflow: hidden; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .g-titl1 .more i { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin: -2px 0 0 6px; background: url(../images/iconl9.png) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover } .g-titl1 .more a:hover { opacity: .7 } .g-titl1 .title { display: inline-block; vertical-align: middle; overflow: hidden; padding: 0 50px; position: relative } .g-titl1 .title:after { content: ""; position: absolute; top: 1px; left: 0; width: 46px; height: 46px; background: url(../images/iconl4.png) center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover } .g-titl1 .title:before { content: ""; position: absolute; right: 16px; width: 21px; height: 21px; bottom: 3px; background: url(../images/iconl5.png) center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover } .g-titl1 .title .en { font-size: 16px; color: #999; line-height: 1.4em; text-align: right; margin-right: -14px; text-transform: uppercase } .g-titl1 .title .tit { font-size: 30px; color: #333; line-height: 1.5em; overflow: hidden; font-weight: 700 } .g-titl1.fff .title .en,.g-titl1.fff .title .tit { color: #fff } .g-titl1.fff .title:after { background-image: url(../images/iconl4-1.png) } .m-newsl .newsl { overflow: hidden; padding: 55px 0 52px } .m-newsl .newsl .col-l { width: 40% } .m-newsl .newsl .col-r { width: 54.6666% } .m-trendsl { overflow: hidden; position: relative } .m-trendsl .con { display: block; width: 100%; overflow: hidden } .m-trendsl .con .pic { padding-top: 65%; overflow: hidden; height: 0; position: relative; margin-bottom: 14px } .m-trendsl .con .pic img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .m-trendsl .con:hover .pic img { transform: scale(1.08,1.08); -webkit-transform: scale(1.08,1.08); -moz-transform: scale(1.08,1.08); -ms-transform: scale(1.08,1.08); -o-transform: scale(1.08,1.08) } .m-trendsl .con .txt { overflow: hidden } .m-trendsl .con .txt .date { float: left; width: 80px; overflow: hidden; position: relative; margin-right: 22px } .m-trendsl .con .txt .date:after { content: ""; position: absolute; bottom: 15px; right: 19px; width: 28px; height: 28px; background: url(../images/iconl6.png) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover } .m-trendsl .con .date .day { font-size: 34px; color: #0b70cc; line-height: 1.45em; overflow: hidden; padding-left: 11px; font-weight: 700 } .m-trendsl .con .date .month { font-size: 18px; color: #999; line-height: 1.5em; overflow: hidden; text-align: right; padding-right: 10px } .m-trendsl .con .tit { overflow: hidden; font-size: 18px; line-height: 1.555em; height: 3.11em; color: #333; display: -webkit-box; box-orient: vertical; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; margin-top: 12px } .m-trendsl .swiper-button-next,.m-trendsl .swiper-button-prev { width: 30px; height: 40px; margin: 0; bottom: 90px; top: auto; right: 32px; left: auto; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .m-trendsl .swiper-button-next:before,.m-trendsl .swiper-button-prev:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/iconl7.png) center center no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto } .m-trendsl .swiper-button-prev { right: 108px; z-index: 2 } .m-trendsl .swiper-button-next:before { background-image: url(../images/iconl8.png) } .m-trendsl .swiper-button-next:after,.m-trendsl .swiper-button-prev:after { content: ""; position: absolute; width: 94px; height: 50px; bottom: 0; left: 50%; margin-left: -47px; background: url(../images/iconl7-bg.png) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -1 } .m-trendsl .swiper-button-next:after { background-image: url(../images/iconl8-bg.png) } .m-trendsl .swiper-button-next:hover,.m-trendsl .swiper-button-prev:hover { opacity: .8 } .ul-listl1 { overflow: hidden; margin: 0 -29px } .ul-listl1 li { width: 50%; float: left; padding: 0 29px; overflow: hidden; margin-bottom: 57px } .ul-listl1 .con { width: 100%; overflow: hidden; display: block } .ul-listl1 .con .date { width: 77px; float: left; margin-right: 25px; border: 1px solid #ddd; padding: 0 10px; overflow: hidden; text-align: center; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl1 .con .date .day { color: #0b70cc; font-size: 32px; line-height: 1.4em; overflow: hidden; font-weight: 700; border-bottom: 1px solid #ddd; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl1 .con .date .year { font-size: 13px; color: #9dabbb; line-height: 1.5em; overflow: hidden; padding: 3px 0 10px; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl1 .con .txt { overflow: hidden; font-size: 16px; color: #333; line-height: 1.75em; display: -webkit-box; box-orient: vertical; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; padding-top: 9px } .ul-listl1 .con:hover .date { background-color: #0c70cc; border-color: #0c70cc } .ul-listl1 .con:hover .date .day { color: #fff; border-bottom: 1px solid rgba(255,255,255,.3) } .ul-listl1 .con:hover .date .year { color: rgba(255,255,255,.5) } .m-researchl { background-position: center top; background-repeat: no-repeat; -webkit-background-size: auto 474px; -moz-background-size: auto 474px; -ms-background-size: auto 474px; -o-background-size: auto 474px; background-size: auto 474px; position: relative; margin-bottom: 59px } .m-researchl:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 67.3958vw; height: 67.3958vw; background: url(../images/bgl2.png) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%) } .m-researchl .researchl { padding-top: 87px; overflow: hidden; position: relative } .ul-listl2 { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100% } .ul-listl2 li { position: absolute; top: 110px; left: 30px; overflow: hidden; z-index: 3 } .ul-listl2 .li2 { top: 180px; left: 285px } .ul-listl2 .li3 { top: 379px; left: 110px } .ul-listl2 .li4 { top: 110px; right: 30px; left: auto } .ul-listl2 .li5 { top: 180px; right: 285px; left: auto } .ul-listl2 .li6 { top: 379px; right: 110px; left: auto } .ul-listl2 .con { display: block; overflow: hidden } .ul-listl2 .box { overflow: hidden; padding: 20px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; position: relative; margin-bottom: 4px; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl2 .box:after { content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border: 1px dashed #fff; display: none; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl2 .box .pic { width: 120px; height: 120px; overflow: hidden; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; position: relative } .ul-listl2 .box .pic:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl2 .box .pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl2 .con .txt { overflow: hidden; font-size: 18px; color: #fefefe; line-height: 1.5em; text-align: center; overflow: hidden; width: 160px; } .ul-listl2 .con:hover .box,.ul-listl2 li.on .con .box { background-color: rgba(255,255,255,.08) } .ul-listl2 .con:hover .box:after,.ul-listl2 li.on .con .box:after { display: block } .ul-listl2 li.on .con .box .pic:after { display: none } .m-teaml { overflow: hidden; padding: 107px 0 43px; width: 61.3333%; margin: 0 auto; position: relative; z-index: 2 } .m-teaml .pic { width: 316px; height: 316px; overflow: hidden; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; margin: 0 auto 37px; border: 8px solid #fff; -webkit-box-shadow: 6px 0 16px rgba(15,27,84,.2); -moz-box-shadow: 6px 0 16px rgba(15,27,84,.2); -ms-box-shadow: 6px 0 16px rgba(15,27,84,.2); -o-box-shadow: 6px 0 16px rgba(15,27,84,.2); box-shadow: 6px 0 16px rgba(15,27,84,.2) } .m-teaml .pic img { display: block; width: 100%; height: 100%; object-fit: cover } .m-teaml .txt { overflow: hidden; text-align: center } .m-teaml .txt .tit { font-size: 26px; font-weight: 700; color: #fff; line-height: 1.5em; overflow: hidden; margin-bottom: 40px } .m-teaml .txt .tit em,.m-teaml .txt .tit span { color: #fff; font-size: 18px; line-height: 1.5em; overflow: hidden; margin: 0 23px 0 32px; font-weight: 400 } .m-teaml .txt .tit span { margin: 0 } .m-teaml .txt .desc { font-size: 16px; line-height: 1.875em; color: #fff; display: -webkit-box; box-orient: vertical; -webkit-box-orient: vertical; line-clamp: 3; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 39px } .m-teaml .txt .more { display: block; width: 160px; height: 54px; line-height: 54px; overflow: hidden; background: url(../images/bgl3.jpg) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; margin: 0 auto; font-size: 16px; color: #fff; overflow: hidden; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .m-teaml .txt .more i { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin: -2px 0 0 6px; background: url(../images/iconl9-1.png) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover } .m-teaml .txt .more:hover { opacity: .7 } .m-thesis-progect { overflow: hidden } .m-thesis-progect .thesis-progect { margin: 0 -70px } .m-thesis-progect .item { overflow: hidden; width: 50%; float: left; padding: 0 70px } .m-thesis { margin-bottom: 84px } .m-thesis .top { overflow: hidden; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; padding: 44px 0 41px; margin-bottom: 29px } .ul-listl3 { overflow: hidden; margin: 0 -30px } .ul-listl3 .con { display: block; width: 100%; overflow: hidden; padding: 0 30px; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl3 .con .date { overflow: hidden; float: left; text-align: center; padding: 20px 30px 0 0 } .ul-listl3 .con .date .day { font-size: 36px; color: #2d7bcf; font-weight: 700; line-height: 1.1em; overflow: hidden } .ul-listl3 .con .date .year { overflow: hidden; font-size: 14px; color: #999; line-height: 1.5em } .ul-listl3 .con .box { position: relative; overflow: hidden; padding: 22px 0 28px 47px } .ul-listl3 .con .box:after { content: ""; position: absolute; height: 50%; top: 0; left: 12px; width: 1px; background-color: #eee; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl3 .con .box:before { content: ""; position: absolute; height: 50%; top: 50%; left: 12px; width: 1px; background-color: #eee; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl3 li:first-child .con .box:after { display: none } .ul-listl3 li:last-child .con .box:before { display: none } .ul-listl3 .con .icon { position: absolute; top: 50%; left: 0; margin-top: -13px; display: block; width: 26px; height: 26px; overflow: hidden; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; z-index: 1; transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl3 .con .icon .dian { position: absolute; top: 50%; left: 50%; display: block; width: 8px; height: 8px; background-color: #bbb; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s; -o-transition: .6s } .ul-listl3 .con .txt { overflow: hidden; font-size: 16px; color: #333; line-height: 1.75em; display: -webkit-box; box-orient: vertical; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; word-break: break-all; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto } .ul-listl3 .con:hover,.ul-listl3 li.on .con { background-color: #f1f9ff } .ul-listl3 .con:hover .icon,.ul-listl3 li.on .con .icon { background-color: rgba(7,109,201,.2) } .ul-listl3 .con:hover .icon .dian,.ul-listl3 li.on .con .icon .dian { width: 10px; height: 10px; background-color: #076dc9 } .ul-listl3 .con:hover .box:after,.ul-listl3 li.on .con .box:after { background-color: #daebf9 } .ul-listl3 .con:hover .box:before,.ul-listl3 li.on .con .box:before { background-color: #daebf9 } .m-thesis.progect .top { overflow: hidden; margin-bottom: 0; margin-top: 29px } @media only screen and (max-width: 1680px) { .banner .swiper-pagination-bullet { font-size:20px } .m-searchl .form .inp input { font-size: 18px } .g-titl1 .title .tit { font-size: 26px } .ul-listl1 .con .date .day { font-size: 28px } .m-trendsl .con .date .day { font-size: 30px } .m-teaml .txt .tit { font-size: 22px } .ul-listl3 .con .date .day { font-size: 32px } .m-newsl,.m-researchl .researchl { padding-top: 40px } .m-newsl .newsl { padding: 40px 0 } .m-researchl { margin-bottom: 40px } .m-thesis { margin-bottom: 40px } .m-newsl .newsl .col-r { width: 56% } .ul-listl1 .con .date { margin-right: 20px } .ul-listl1 li { padding: 0 15px; margin-bottom: 30px } .ul-listl1 { margin: 0 -15px } .m-trendsl .con .tit { font-size: 16px } .m-trendsl .swiper-button-next,.m-trendsl .swiper-button-prev { bottom: 84px } .m-thesis-progect .thesis-progect { margin: 0 -40px } .m-thesis-progect .item { padding: 0 40px } } @media only screen and (max-width: 1440px) { .ul-listl2 .li2 { left:240px } .ul-listl2 .li5 { right: 240px } } @media only screen and (max-width: 1199px) { .ul-listl2 { position:static } .ul-listl2 li { position: static; width: 16.66%; float: left; padding: 0 10px } .ul-listl2 { margin: 0 -10px } .ul-listl2 li.black .con .txt { color: #fff } .ul-listl2 .box .pic { padding-top: 100%; width: auto; height: 0; position: relative; overflow: hidden } .ul-listl2 .box .pic img { position: absolute; top: 0; left: 0 } .m-teaml { padding: 30px 0 } .m-teaml .pic { width: 200px; height: 200px; margin-bottom: 10px } .m-teaml .txt .tit { font-size: 18px } .banner .swiper-pagination-bullet { font-size: 16px } .m-searchl .form .inp input { font-size: 14px } .g-titl1 .title .tit { font-size: 18px } .ul-listl1 .con .date .day { font-size: 20px } .m-trendsl .con .date .day { font-size: 20px } .m-teaml .txt .tit { font-size: 20px; margin-bottom: 15px } .ul-listl3 .con .date .day { font-size: 20px } .g-titl1 .more a,.g-titl1 .title .en,.m-teaml .txt .desc,.ul-listl1 .con .txt,.ul-listl2 .con .txt { font-size: 14px } .m-teaml .txt .desc { margin-bottom: 15px } .m-teaml .txt .more { height: 40px; line-height: 40px; font-size: 14px } .ul-listl3 { margin: 0 -15px } .ul-listl3 .con { padding: 0 15px } .ul-listl3 .con .date { padding-right: 15px } .m-thesis .top { padding: 20px 0 } .m-searchl { width: auto; padding: 0 60px; margin-top: -30px } .m-searchl .form { height: 60px } .m-searchl .form .inp { padding-bottom: 0 } .m-searchl .form .btn input { width: 36px; height: 36px; -webkit-background-size: 18px auto; -moz-background-size: 18px auto; -ms-background-size: 18px auto; -o-background-size: 18px auto; background-size: 18px auto } .m-newsl,.m-researchl .researchl { padding-top: 30px } .m-newsl .newsl { padding: 30px 0 } .m-researchl { margin-bottom: 30px } .m-thesis { margin-bottom: 30px } .m-trendsl .con .date .month { font-size: 16px } .m-trendsl .swiper-button-next,.m-trendsl .swiper-button-prev { bottom: 67px } .m-newsl .newsl .col-r { width: 58% } .ul-listl1 { margin: 0 -10px } .ul-listl1 li { padding: 0 10px; margin-bottom: 10px } .ul-listl1 .con .date { margin-right: 10px } .ul-listl1 .con .date .year,.ul-listl3 .con .date .year { font-size: 12px } .ul-listl3 .con .txt { font-size: 14px } .ul-listl3 .con .icon { width: 20px; height: 20px } .ul-listl3 .con:hover .icon .dian,.ul-listl3 li.on .con .icon .dian { width: 8px; height: 8px } .ul-listl3 .con .icon .dian { width: 6px; height: 6px } .ul-listl3 .con .box:after,.ul-listl3 .con .box:before { left: 10px } .m-thesis .top { margin-bottom: 15px } .m-thesis.progect .top { margin-top: 15px } .m-teaml { padding-bottom: 0 } .m-researchl:after { display: none } .banner.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction { bottom: 40px } .banner .swiper-pagination-bullet { height: 40px; line-height: 40px } .m-trendsl .con .tit { margin-top: 0 } } @media only screen and (max-width: 959px) { .m-searchl .form .inp { width:85% } .m-newsl .newsl .col-l,.m-newsl .newsl .col-r { width: auto; float: none; margin-bottom: 20px } .m-newsl .newsl .col-r { margin-bottom: 0 } .ul-listl2 li { padding: 0 5px } .ul-listl2 { margin: 15px -5px 0 } .ul-listl2 .box { padding: 10px } .ul-listl2 .box:after { left: 5px; top: 5px; right: 5px; bottom: 5px } .m-teaml { width: auto } .m-teaml .txt .tit em,.m-teaml .txt .tit span { margin: 0 5px } .m-thesis-progect .item { width: auto; float: none } .m-researchl { -webkit-background-size: auto 70%; -moz-background-size: auto 70%; -ms-background-size: auto 70%; -o-background-size: auto 70%; background-size: auto 70% } } @media only screen and (max-width: 480px) { .ul-listl1 li { width:auto; float: none } .ul-listl2 li { width: 33.33% } .m-teaml .pic { width: 160px; height: 160px } .ul-listl3 .con .box { padding: 15px 0 15px 30px } .m-searchl { padding: 0 30px } } /*!****** bl end *******/