@charset "utf-8"; .section1 { overflow: hidden; padding-bottom: 45px; } .sect1-r { float: right; width: 48%; } .sect1-r .title{background: url(/uploads/image/images/xw.png) no-repeat left center;background-size: 30px;} .sect1-l { float: left; width: 48%; position: relative; } .title { line-height: 36px; overflow: hidden; margin-bottom: 20px; } .title h2 { font-size: 24px; float: left; padding-left:45px; color: #010000; font-weight:normal; } .title a { float: right; font-size:14px; color:#999999; } .sect1-l>ul li a { position: relative; display: block; } .sect1-l>ul li a img { display: block; width: 100%; max-height: 421px; object-fit: cover; } .sect1-l>ul li a>.tit { position: absolute; width: calc(100% - 86px); left: 0; bottom: 0px; padding: 15px 20px 10px 20px; background: no-repeat left bottom; box-sizing: border-box; } .sect1-l>ul li a>.tit p{ font-size: 18px; color: #fff; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 120px); } .sect1-l>ul li a>.tit span{ box-sizing: border-box; font-size: 14px; color: #fff; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; } .sect1-l .slick-dots { right: 113px; bottom: 48px; width: auto; } .sect1-l .slick-dots li { width: 12px; height: 12px; border-radius: 50%; margin: 0 5px; background: transparent; border: 1px solid #fff; } .sect1-l .slick-dots li.slick-active { background-color: #fff; } .sect1-l .slick-prev, .sect1-l .slick-next { width: 43px; height: 46px; z-index: 9; } .sect1-l .slick-prev { left: calc(100% - 86px); top: calc(100% - 23px); background: url(/uploads/image/images/leftbtn.png) no-repeat center center #808c95; z-index: 2; } .sect1-l .slick-next { left: calc(100% - 43px); top: calc(100% - 23px); background: url(/uploads/image/images/rightbtn.png) no-repeat center center #808c95; z-index: 2; } .sect1-l .slick-prev:hover{ background: url(/uploads/image/images/leftbtn.png) no-repeat center center #ec9a1a; } .sect1-l .slick-next:hover{ background: url(/uploads/image/images/rightbtn.png) no-repeat center center #ec9a1a; } .sect1-r>ul>li { position: relative; line-height: 24px; border-bottom: 1px dashed #ccc; padding-bottom: 15px; margin-bottom: 15px; } .sect1-r>ul>li:last-child{ border-bottom:0px; margin-bottom: 0; padding-bottom: 0; } .sect1-r>ul>li i{ color: #2f5691; font-size: 17px; width: 110px; float: left; } .sect1-r>ul>li a { font-size: 18px; color: #333; white-space: pre-wrap; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; width: calc(100% - 224px); float: left; } .sect1-r>ul>li span { font-size: 16px; color: #a5acb2; float: right; } .sect1-r>ul>li:hover>a { color: #2f5691; } .section2{ padding-bottom: 55px; } .sel2-c{ /* padding: 20px 0 15px 0; */ } .sel2-c li a{ display: block; text-align: center; } .sel2-c li a div{ line-height: 40px; font-size: 0; height: 184px; position: relative; padding: 40px 0 30px 0; box-sizing: border-box; background: no-repeat center center; border-left: 1px dashed #ded4d4; } .sel2-c li a div img{ display: block; vertical-align: middle; margin: 0 auto; } .sel2-c li a div img.hover{ display: none; } .sel2-c li a p{ color: #333; font-size: 18px; margin-top: 10px; padding: 0 23px; line-height:24px; margin-top: 11px; } .sel2-c li:hover div{ background: no-repeat center center; height: 184px; vertical-align: middle; position: relative; } .sel2-c li a:hover img{ display: none; } .sel2-c li:hover p{ color: #fff; } .sel2-c li a:hover .hover{ display: block; vertical-align: middle; margin: 0 auto; } .section3 { overflow: hidden; padding-bottom: 45px; } .sect3-l{ width: 48%; float: left; } .sect3-r{ width: 48%; float: right; } .sect3-l .title{ background:url(/uploads/image/images/icon_sel3t1.png) no-repeat left center; } .sect3-r .title{ background:url(/uploads/image/images/icon_sel3t2.png) no-repeat left center; } .title .more{ float: right; } .section3 ul li{ border-bottom: 1px dashed #bdc6d2; } .section3 ul li span{ width: 56px; height: 26px; border:1px solid #90a4bc; border-radius: 6px; display: inline-block; float: left; margin-top: 20px; margin-right: 20px; text-align: center; font-size: 18px; color: #333333; box-sizing: border-box; } .section3 ul li p{ line-height: 66px; font-size: 18px; color: #333333; width: calc(100% - 76px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .section3 ul li:hover span{ color: #fff; border: 0px; background: #2f5691; } .section3 ul li:hover p{ color: #2f5691; } .section4{ padding-bottom: 45px; display: none; } .section4 ul{ } .section4 ul li{ position: relative; float: left; height: 98px; width: 48%; border-radius: 4px; } .section4 ul li.sel-1{ background:url(/uploads/image/images/sel4_lbg.png) no-repeat center center;; } .section4 ul li.sel-2{ margin-left: 4%; background:url(/uploads/image/images/sel4_rbg.png) no-repeat center center;; } .section4 ul li a p{ line-height: 98px; padding-left: 38px; box-sizing: border-box; position: relative; } .section4 ul li a p span{ font-size: 24px; color: #fff; } .section4 ul li a p span::after{ position: absolute; bottom: 25px; left: 38px; content: ''; width: 49px; height: 1px; background: #ffffff; } .section4 ul li img{ position: absolute; top: 50%; right: 38px; transform: translatey(-50%); } .section5{ background: #eef2f7; box-sizing: border-box; } .section5 .links{ line-height: 55px; } .section5 .links h4{ font-size: 18px; color: #000000; float: left; margin-left: 25px; } .section5 .links li{ float: left; } .section5 .links a{ font-size: 18px; color: #344b5c; margin: 0 38px; } .section5 .links li span{ /* margin: 0 38px; */ color: #a7c5db; } @media screen and (max-width: 1240px) { .sect1-r>ul>li{ padding-bottom: 12px; margin-bottom: 12px; } .sect3>ul { margin-left: 0; margin-right: 0; } .main { padding-left: 10px; padding-right: 10px; background: #fff; } } @media screen and (max-width: 1100px) { .title { margin-bottom: 10px; } .sect1-r>ul>li{ padding-bottom: 10px; margin-bottom: 10px; } } @media screen and (max-width: 1024px) { .sect1-l{ width:100%; } .sect1-r{ width: 100%; margin-top: 45px; } } @media screen and (max-width: 850px) { .title { line-height: 25px; margin-bottom: 0; } .title h2 { font-size: 20px; } .title h2 span { font-size: 12px; } .sect1-l>ul li a>.tit{ width: 100%; background-size: cover; padding: 15px 10px; } .sect1-l .slick-prev{ left: 0; top: 50%; transform: translatey(-50%); } .sect1-l .slick-next{ right: 0; top: 50%; transform: translatey(-50%); } .sect1-l .slick-dots{ bottom: 20px; right: 20px; } .sect1-r>ul>li { line-height: 29px; } .sect1-r>ul>li a { font-size: 14px; } .title a { height: 35px; background-size: 25px auto; } .section1 { /* padding: 15px 0; */ } .set3_con ul li{ width:48%; } } @media screen and (max-width: 768px) { .sect1-l>ul li a img{min-height: 222px;} .sect3-l{ width: 100%; } .sect3-r{ width: 100%; margin-top: 45px; } .sel2-c li a p{ padding: 0 10px; } } @media screen and (max-width: 640px) { .title{ line-height: 36px;} .section5 .links a{ font-size: 15px; margin: 0 5px;} .section4 .sel-1{ width: 100%; } .section4 ul li.sel-2{ width: 100%; margin-top: 20px; margin-left: 0; } } @media screen and (max-width: 480px) { .sect1-l>ul li a>.tit{ padding-top: 10px; padding-bottom: 25px; } .sect1-l>ul li a>.tit p{ padding-right: 0; width: 100%; } .sect1-l>ul li a>.tit span{ display: none; } .sect1-l .slick-dots li{ width: 8px; height: 8px; } .sect1-l .slick-dots{ bottom: 10px; left: 50%; transform: translatex(-50%); } .set3_con ul li{ width:100%; } }