@charset "utf-8"; html, body, .banner, .banner .slick, .banner .slick div, .banner .slick-slide a, .banner .slick-slide a img { width: 100%; height: auto; } html{ overflow-x: hidden; } body { overflow-x: hidden; } .tit { overflow: hidden; line-height: 40px; padding: 20px 0 30px 0; } .tit h3 { float: left; font-size: 28px; padding-left: 20px; position: relative; } .tit h3:after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 6px; height: 30px; background: #2c4780; } .more a { display: block; background: url(../images/more1.png) no-repeat right center; width: 26px; height: 26px; } .more a:hover { background: url(../images/more2.png) no-repeat right center; } .section1 { padding: 88px 0 0 0; } .s1-l { float: left; width: 550px; height: 346px; margin-right: 54px; } .s1-l ul li a { display: block; position: relative; } .s1-l ul li a .pic { padding-top: 0; width: 100%; height: 346px; } .s1-linfo { overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; background: url(../images/jdt-bg.png) repeat-x; width: 100%; height: 0; transition: all 0.3s; } .s1-l .slick-prev, .s1-l .slick-next { width: 32px; height: 40px; z-index: 9; } .s1-l .slick-prev { background: rgba(255, 255, 255, 0.4) url() no-repeat; background-position: center center; } .s1-l .slick-next { background: rgba(255, 255, 255, 0.64) url() no-repeat; background-position: center center; } .s1-linfo p { font-size: 16px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 56px; padding-left: 15px; position: absolute; left: 0; right: 0; bottom: 0; } .s1-l ul li a:hover .s1-linfo { height: 200px; } .s1-l ul li a:hover .pic img { transform: scale(1.1); } .s1-l .slick-dots { bottom: 32px; right: 15px; } .s1-l .slick-dots li { margin: 0 6px; } .s1-l .slick-dots li button { width: 12px; height: 12px; background: rgba(255, 255, 255, 0.5); border: 0; } .s1-l .slick-dots li.slick-active button { width: 12px; height: 12px; background: rgba(255, 255, 255, 1); } .s1-r { overflow: hidden; } .s1-tit ul { overflow: hidden; padding: 0 0 25px 0; border-bottom: 1px solid #dadada; } .s1-tit ul li { float: left; width: 30%; } .s1-tit ul li a { display: block; font-size: 28px; color: rgba(0, 0, 0, 0.4); position: relative; } .s1-tit ul li a::after { content: ""; position: absolute; left: 0; bottom: -26px; background: url(../images/hx.png) no-repeat left center; width: 116px; height: 10px; display: none; } .s1-tit ul li.on a { color: #000; font-weight: 600; } .s1-tit ul li.on a::before { display: block; } .s1-tit ul li.on a::after { display: block; } .s1-bd { margin-top: 10px; } .s1-bd>ul { display: none; position: relative; } .s1-bd>ul:first-child { display: block; } .s1-bd>ul li { overflow: hidden; line-height: 48px; text-align: justify;} .s1-bd>ul li:first-child { padding-top: 0; } .s1-bd>ul li span { float: right; font-size: 16px; color: rgba(0, 0, 0, 0.6); padding-left: 10px; text-align: center;} .s1-bd>ul li a { display: block; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .s1-bd>ul li a:hover { color: #2c4780; } .s1-bd>ul .more { position: absolute; right: 0; top: -65px; } .section2 { padding: 30px 0 40px 0; } .section2 .tit { padding-bottom: 0; } .s2-c ul li { float: left; width: 33.333%; margin-top: 30px; } .s2-c ul { margin-left: -42px; margin-right: -42px; } .s2-c ul li a { display: block; padding: 0 42px; } .s2-c ul li p { width: 129px; height: 25px; line-height: 25px; background: url(../images/hx2.png) no-repeat; text-align: center; font-size: 15px; color: #fff; } .s2-c ul li h3 { font-size: 18px; line-height: 30px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin-top: 10px; } .s2-c ul li a:hover h3 { color: #2c4780; } .s2-c ul li h3 img { padding-left: 10px; vertical-align: middle; } .section3 {} .section3 .s3-bg { background: url(../images/section3-bg.jpg) no-repeat center top; background-size: cover; } .s3-l { width: 44.8%; position: relative; } .s3-l a { display: block; } .s3-l .pic { padding-top: 69.5%; } .s3-l .s3-info { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(../images/pic-yy.png) repeat-x center bottom; } .s3-l .s3-info>div { position: absolute; bottom: 0; left: 0; right: 0; padding: 25px 35px; color: #fff; } .s3-l .s3-info>div h3 { font-size: 20px; } .s3-l .s3-info>div p { font-size: 14px; line-height: 22px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin-top: 15px; } .s3-l .s3-info>div .gd { width: 21px; height: 21px; margin-top: 40px; } .s3-l .s3-info>div .gd img { display: block; width: 100%; height: 100%; transition: all 0.5s; } .s3-l a:hover .pic img { transform: scale(1.1); } .s3-l a:hover .s3-info>div .gd img { transform: rotate(360deg); } .s3-r { overflow: hidden; } .s3-r ul li { float: left; width: 50%; position: relative; } .s3-r ul li a { display: block; } .s3-r ul li .pic { padding-top: 56.25%; } .s3-r ul li .s3-info { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(../images/pic-yy2.png) repeat-x center bottom; } .s3-r ul li .s3-info>div { position: absolute; bottom: 0; left: 0; right: 0; padding: 25px 35px; color: #fff; } .s3-r ul li .s3-info>div p { font-size: 14px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .s3-r ul li a:hover .pic img { transform: scale(1.1); } .s3-r ul li:nth-child(4) { background: #2c4780; } .s3-r ul li:nth-child(4) .s3-info { background: none; } .s3-r ul li:nth-child(4) .s3-info>div { top: 50%; transform: translateY(-50%); text-align: center; bottom: auto; } .s3-r ul li:nth-child(4) .s3-info>div h3 { font-size: 32px; margin-bottom: 25px; } .s3-r ul li:nth-child(4) a:hover .s3-info>div h3 { text-decoration: underline; } .s3-r ul li:nth-child(4) .s3-info>div .gd { display: inline-block; width: 35px; height: 35px; transition: all 0.5s; } .s3-r ul li:nth-child(4) .s3-info>div .gd img{ width: 100%; height: 100%; } .s3-r ul li:nth-child(4) a:hover .s3-info>div .gd { transform: rotate(360deg); } .section4 { padding: 40px 0; } .s4-c { position: relative; } .s4-c>div { overflow: hidden; padding: 0 0 30px 0; } .s4-c ul { margin-left: -10px; margin-right: -10px; } .s4-c ul li a { display: block; background: #fff; margin: 0 10px; padding-bottom: 78px; position: relative; } .s4-c ul li a .pic { padding-top: 56.25%; } .s4-c ul li a .s4-info { position: absolute; left: 0; right: 0; bottom: 0; height: 78px; background: #f3f3f6; transition: all 0.3s; } .s4-c ul li a p { font-size: 16px; font-weight: 600; line-height: 78px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 10px; color: #000; } .s4-c ul li a:hover .s4-info { height: 118px; background: #2c4780; } .s4-c ul li a:hover p { line-height: 118px; color: #fff; } .s4-c .slick-prev, .s4-c .slick-next { display: none !important; } .s4-btn { font-size: 24px; font-family: 宋体; font-weight: 600; color: #0e599d; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; cursor: pointer; padding: 0 !important; } .s4-prev { left: 15px; } .s4-next { right: 15px; } @media screen and (max-width: 1120px) {} @media screen and (max-width: 1024px) { html, body, .banner, .banner .slick, .banner .slick div, .banner .slick-slide a, .banner .slick-slide a img { height: auto !important; } .s1-l, .s1-r{ width: 100%; } .s1-l{ height: auto; } .s1-l ul li a .pic{ height: auto; padding-top: 63%; } .s1-r{ float: left; margin-top: 30px; } } @media screen and (max-width: 768px) { .section1{ padding: 30px 0 0 0; } .s1-tit ul li a{ font-size: 24px; } .s1-tit ul li a::after{ background-size: 100px auto; } .section2{ padding: 20px 0; } .s2-c ul li{ width: 50%; } .s2-c ul{ margin-left: -15px; margin-right: -15px; } .s2-c ul li a{ padding: 0 15px; } .s3-l{ width: 100%; } .s3-r{ float: left; width: 100%; } .section4{ padding: 20px 0; } .s4-c>div{ padding: 0 0 45px 0; } .s1-bd>ul li a{ font-size: 16px; } .s1-bd>ul li span{ font-size: 14px; } .tit h3{ font-size: 24px; } .s2-c ul li p{ font-size: 13px; } .s2-c ul li h3{ font-size: 16px; } .s3-r ul li:nth-child(4) .s3-info>div h3{ font-size: 24px; } .s3-r ul li:nth-child(4) .s3-info>div .gd{ width: 30px; height: 30px; } .s2-c ul li p{ width: 100px; height: 20px; line-height: 20px; background-size: 100px auto; } .s2-c ul li h3{ margin-top: 5px; } .s4-c ul li a{ padding-bottom: 56px; } .s4-c ul li a .s4-info{ height: 56px; } .s4-c ul li a p{ line-height: 56px; } } @media screen and (max-width: 480px) { .s1-tit ul li{ width: 36%; } .more a{ width: 22px; height: 22px; background-size: 22px 22px; margin-top: 9px; } .s2-c ul li{ width: 100%; margin-top: 20px; } .s3-r ul li{ width: 100%; } } @media screen and (max-width: 375px) { .s1-tit ul li a{ font-size: 22px; } .tit h3{ font-size: 22px; } .s3-r ul li:nth-child(4) .s3-info>div h3{ font-size: 22px; } .s3-r ul li:nth-child(4) .s3-info>div .gd{ width: 20px; height: 20px; } } @media screen and (max-width: 320px) {}