#main { background-color: #ededed; padding-top: 53px; padding-bottom: 60px; } .main { background-color: #f7f7f7; padding: 0 40px; box-sizing: border-box; } .section1 { overflow: hidden; } .section1>h2 { text-align: center; font-size: 30px; color: #123c77; margin: 30px 0; } .sect1-l { float: left; width: 48%; } .sect1-l a { height: 390px; position: relative; display: block; } .sect1-l a img { display: block; width: 100%; } .sect1-l a p { position: absolute; left: 0; right: 0; bottom: 0; line-height: 44px; padding-left: 10px; padding-right: 100px; font-size: 18px; color: #fff; background-color: rgba(0, 0, 0, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect1-l .slick-dots { width: auto; bottom: 17px; right: 10px; } .sect1-l .slick-dots li { width: 8px; height: 8px; border-radius: 50%; background-color: #fff; } .sect1-l .slick-dots li.slick-active { background-color: #ff0006; } .sect1-r { float: right; width: 50%; } .title { border-bottom: 1px solid #c7cbd1; } .title h2 { position: relative; float: left; font-size: 22px; color: #fff; padding: 0 25px; line-height: 43px; background-color: #123b77; } .title h2:after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background-color: #123b77; bottom: -1px; } .title .more { float: right; line-height: 40px; } .title .more a { font-size: 14px; color: #999999; vertical-align: middle; } .title .more:hover a { color: #123b77; } .sect1r-text>ul>li { position: relative; padding-left: 20px; padding-right: 100px; line-height: 18px; background: url(../images/list.png) no-repeat left center; margin-top: 30px; } .sect1r-text>ul>li:hover a { color: #cc1a1a; } .sect1r-text>ul>li>a { display: block; font-size: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect1r-text>ul>li span { position: absolute; right: 0; top: 0; font-size: 14px; color: #0f3366; } .section2 { padding-top: 48px; overflow: hidden; } .sect2-l { float: left; width: 48%; } .sect2-l .title h2 { background-color: transparent; padding: 0; color: #123b77; } .sect2-r { float: right; width: 50%; } .section2 ul li { margin-top: 23px; } .fr{ float: right; width: 50%;} .yd{ width: 48%; float: left;} .section3 { padding-top: 40px; overflow: hidden; padding-bottom: 70px; } .section3 .title h2 { background-color: transparent; padding: 0; color: #123b77; overflow: hidden; } .sect3>ul { margin-left: -23px; margin-right: -23px; padding-top: 28px; } .sect3>ul li { margin: 0 23px; } .sect3>ul li a { display: block; } .sect3>ul li a p { margin-top: 15px; line-height: 26px; font-size: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .pic3 { overflow: hidden; } .pic3 img { display: block; width: 100%; } @media screen and (max-width: 1400px) { #main { padding-left: 10px; padding-right: 10px; } .main { padding: 0 20px; } .sect1r-text>ul>li { margin-top: 24px; } } @media screen and (max-width: 1200px) { .sect1r-text>ul>li { margin-top: 16px; } } @media screen and (max-width: 1024px) { .sect1-l a{height:280px;} .sect1-l a img { display: block; height: 100%; width: 100%; } .sect1r-text>ul>li { margin-top: 6px; } .section2 { padding-top: 15px; } .section3 { padding-top: 15px; padding-bottom: 20px; } #main { padding-bottom: 20px; } } @media screen and (max-width: 768px) { .banner .slick-prev { left: 10px !important; width: 20px !important; height: 20px !important; background-size: 6px auto !important; } .banner .slick-next { right: 10px !important; width: 20px !important; height: 20px !important; background-size: 6px auto !important; } .section1>h2 { font-size: 18px; margin: 15px 0; } .sect1-l { float: none; width: auto; } .sect1-l a p { font-size: 14px; } .sect1-r { float: none; width: auto; margin-top: 20px; } .title h2 { font-size: 18px; } .sect1r-text>ul>li { margin-top: 10px; } .sect2-l { float: none; width: auto; } .sect2-r { float: none; width: auto; margin-top: 20px; } } @media screen and (max-width:375px) { .sect1-l a { height: 210px; } .main { padding: 0 10px; } .sect1-l .slick-dots li { margin: 0 3px; } .sect1-l .slick-dots { right: 0; } .sect1-l a p { padding-right: 70px; } .sect1r-text>ul>li { padding-left: 10px; padding-right: 70px; } .sect1r-text>ul>li>a { font-size: 14px; } .sect1r-text>ul>li span { font-size: 12px; } .sect3>ul li a p { font-size: 14px; } }