.px ul li { width: 16.67%; text-align: center; } .px ul { background: url(../image/ks-bg.png)repeat-x; height: 100px; } .px ul li a { display: block; text-align: center; overflow: hidden; height: 100px; line-height: 100px; } .px ul li a div { display: inline-block; vertical-align: -20px; width: 53px; height: 53px; border-radius: 50%; border: 2px dotted #f7f9f9; position: relative; z-index: 1; } .px ul li a div:after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 32px; height: 32px; background: rgba(150, 193, 250, 0.3); border-radius: 50%; z-index: -1; } .px ul li a div img { max-height: 26px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .px ul li a span { font-size: 20px; color: #ffffff; margin-left: 20px; } #px { margin-top: -100px; } .px ul li:hover { background-color: #196eaf; } .section1 { padding: 50px 0; background: url("../image/new-bg.png") no-repeat center center; background-size: cover; } .title { text-align: center; margin-bottom: 20px; } .title>h2 { font-size: 30px; line-height: 61px; color: #000000; background: url("../image/dot-bg.png") no-repeat bottom center; display: inline-block; } .title>p { font-size: 18px; color: #bccce1; line-height: 40px; } .text1 { overflow: hidden; } .text-l { float: left; width: 35.71%; width: 500px; height: 322px; } .text-l img { width: 100%; } .text-l div>a { padding-top: 64.45%; overflow: hidden; display: block; position: relative; } .text-l div>a>img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .text-l p { font-size: 18px; line-height: 55px; color: #ffffff; position: absolute; bottom: 0px; left: 0px; right: 0; padding-left: 4%; padding-right: 26%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-l>.slick-dots { width: auto; right: 23px; bottom: 20px; } .text-l>.slick-dots>li { width: 10px; height: 10px; border-radius: 50%; border: 1px dotted #ffffff; margin: 0 10px; } .text-l>.slick-dots>.slick-active { background-color: #ffffff; } .text-r { overflow: hidden; } .text-r>ul { overflow: hidden; margin-top: -23px; } .text-r>ul>li { width: 47.78%; border: solid 1px #e5e5e5; float: left; margin-top: 23px; margin-left: 1.5%; } .text-r>ul>li>a { display: block; overflow: hidden; padding: 16px 20px; background: #fff; } .time { float: left; background: url("../image/time-bg.png") no-repeat center center; text-align: center; width: 58px; height: 58px; } .time>h2 { font-size: 26px; line-height: 40px; color: #ffffff; } .time>p { font-size: 14px; line-height: 8px; color: #ffffff; } .con1 { overflow: hidden; padding-left: 20px; } .con1>p { font-size: 18px; line-height: 28px; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; height: 56px; } .more { text-align: center; margin-top: 60px; height: 40px; } .more h2 { font-size: 14px; line-height: 28px; color: #00266b; display: inline-block; border-bottom: 1px solid #0a3678; position: relative; transition: all .5s; } .section2 { padding: 50px 0; background: url("../image/zs-bg.png") no-repeat center center; background-size: cover; } .sect2 { overflow: hidden; } .zs { width: 31.42%; float: left; } .more1 { overflow: hidden; padding-bottom: 30px; } .more1>h2 { font-size: 28px; line-height: 52px; color: #ffffff; float: left; } .more1>a { font-size: 14px; color: #f9f9f9; float: right; padding-top: 20px; transition: all 0.5s; } .zs>ul { padding: 25px 0; background-color: rgba(10, 54, 120, 0.4); border: solid 1px rgba(47,116,194,0.4); border-top: 2px solid rgba(255,255,255,0.28); } .zs>ul>li>a { display: block; padding: 15px 0; margin: 0 30px; border-bottom: 1px dotted rgba(254,253,253,0.34); } .zs>ul>li>a>p { font-size: 16px; line-height: 33px; color: #fefdfd; } .zs>ul>li>a>span { display: inline-block; height: 44px; font-size: 16px; line-height: 22px; color: #fefdfd; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .zs:nth-child(2) { margin: 0 2.87%; } .zs>ul>li:hover { background-color: #2797d6; } .section3 { padding: 50px 0; } .sect3-t { overflow: hidden; } .sect3-t>ul { overflow: hidden; } .sect3-t>ul>li { width: 30.71%; float: left; } .sect3-t>ul>li>a { display: block; position: relative; } .tz-text { position: absolute; bottom: -1px; left: 0; right: 0; padding-left: 7%; } .tz-text>p { font-size: 28px; font-weight: bold; line-height: 57px; color: #fdfdfd; } .xttz { background: url("../image/xttz-bg.png") no-repeat left center; background-size: auto 100%; } .zsgz { background: url("../image/zsgz-bg.png") no-repeat left center; background-size: auto 100%; } .fxljy { background: url("../image/fxljy-bg.png") no-repeat left center; background-size: auto 100%; } .sect3-t>ul>li:nth-child(2) { margin: 0 3.93%; } .sect3-t { padding-bottom: 50px; } .title1>h2 { font-size: 30px; line-height: 61px; color: #000000; position: relative; border-bottom: 1px solid #cbdde9; text-align: center; } .title1>h2::after { content: ""; width: 70px; height: 5px; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); background: url("../image/dot.png") no-repeat bottom center; } .title1>p { font-size: 18px; color: #bccce1; line-height: 40px; text-align: center; } .sect3-b ul { padding-top: 62px; padding-bottom: 42px; border-bottom: 1px solid #cbdde9; border-left: 1px solid #cbdde9; border-right: 1px solid #cbdde9; margin-top: -40px; } .sect3-b ul li { width: 17.5%; text-align: center; border-radius: 30px; background-color: #e1eaf0; margin: 0 0.27%; } .sect3-b ul li a { display: block; font-size: 16px; line-height: 37px; color: #333333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 5px; } .sect3-b ul li:hover { background-color: #196eaf; } .sect3-b ul li:hover a { color: #ffffff; } .tz>img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .tz { overflow: hidden; position: relative; padding-top: 63.63%; } .tz>img { transition: all 1s; } .tz:hover img { transform: scale(1.2); } .more1>a:hover { margin-top: -2px; } .text-r>ul>li:hover .con1>p { font-weight: bold; } .more h2:hover { margin-top: -5px; } @media screen and (max-width: 1400px) { #px .px1400 { padding-left: 0; padding-right: 0; margin-left:0 ; margin-right:0 ; } .px ul li a span{ font-size: 18px; } } @media screen and (max-width: 1024px) { .px ul li a div { width: 40px; height: 40px; vertical-align: -15px; } .px ul li a span { font-size: 16px; } .px ul { height: 80px; } .px ul li a { height: 80px; line-height: 80px; } .px ul li a div:after { width: 22px; height: 22px; } .text-r>ul { margin-top: 0; } .text-r>ul>li { margin-top: 1%; margin-left: 0; width: 48.78%; } .text-r>ul>li:nth-child(odd) { float: left; } .text-r>ul>li:nth-child(even) { float: right; } #px { margin-top: 0; } .section1 { padding: 0; padding-bottom: 20px; } .section2 { padding: 10px 0; } .section3 { padding: 20px 0; } .text-l { float: none; width: auto; margin: auto; height: auto; } .title>p { font-size: 16px; } .con1>p { font-size: 16px; } .text-r { float: none; width: auto; } .text-r { padding-top: 10px; } .more { margin-top: 20px; } .more1 { padding-bottom: 10px; } .more1>h2 { font-size: 23px; } .tz-text>p { font-size: 26px; } .zs>ul>li>a { padding: 10px; } .zs>ul { padding: 15px 0; } .sect3-t { padding-bottom: 20px; } .title1>h2 { font-size: 26px; } .title>h2 { font-size: 26px; } .sect3-b ul li a { font-size: 14px; } .title1>p { font-size: 16px; } .sect3-b ul { padding-top: 42px; padding-bottom: 30px; } } @media screen and (max-width: 768px) { .zs { float: none; width: auto; margin: 10px 0 !important; } .zs>ul>li>a>p { line-height: 20px; } .text-l { float: none; width: auto; margin: auto; } .time>h2 { font-size: 22px; } .time>p { font-size: 12px; } .tz-text>p { font-size: 16px; line-height: 35px; } .text-l>.slick-dots { right: 15px; } .text-l>.slick-dots>li { margin-left: 7px; } .text-r>ul>li>a { padding: 7px 10px; } } @media screen and (max-width: 600px) { .text-r>ul>li { float: none !important; width: auto; } .zs>ul>li>a { margin: 0 15px; } }