@charset "utf-8"; .section1 { padding-top: 45px; padding-bottom: 60px; background: url(/uploads/image/images/sect1-bg.jpg) no-repeat center center; background-size: cover; } .sect1 { background: #fff; padding: 20px 30px; } .title { position: relative; overflow: hidden; padding-bottom: 10px; border-bottom: 1px solid #e9e4e4; } .title h2 { position: relative; float: left; padding-left: 50px; text-align: left; } .title h2 .icon { position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 47px; height: 47px; border-radius: 50%; background: url(/uploads/image/images/tit-bg.png) no-repeat center center; background-size: cover; } .title h2 .icon img { position: absolute; left: 28%; top: 26%; } .title h2 span { font-size: 28px; color: #067cc4; } .title h2 p { position: relative; padding-left: 20px; font-size: 16px; color: #b1b9bd; text-transform: uppercase; font-weight: normal; } .title h2 p::after { content: ""; position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 14px; height: 2px; background: #067cc4; } .title .more { position: absolute; right: 0; top: 50%; transform: translatey(-50%); } .title .more a { display: block; font-size: 14px; color: #067bc4; } .title .more a:hover { text-decoration: underline; } .sect1 .title { text-align: center; } .s1 { margin-top: 28px; overflow: hidden; } .s1-l { float: left; width: 660px; } .s1-l a { display: block; position: relative; } .s1-l a img { display: block; width: 100%; } .s1-l a p { position: absolute; left: 0; right: 0; bottom: 0; line-height: 50px; padding-left: 25px; padding-right: 185px; background: rgba(5, 96, 169, .67); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; color: #fff; font-weight: bold; } .s1-l .slick-dots { width: auto; right: 10px; bottom: 17px; } .s1-l .slick-dots li { width: 11px; height: 11px; border-radius: 50%; background: #7599b5; margin: 0 10px; } .s1-l .slick-dots li.slick-active { background: #fff; } .s1-r { float: right; width: calc(100% - 700px); } .s1-r ul li:hover { transition: all .3s; } .s1-r ul li a { display: block; } .s1-r ul li a .text { line-height: 48px; padding-left: 15px; padding-right: 100px; position: relative; transition: all .3s; } .s1-r ul li a .text::before { content: ""; position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 5px; height: 5px; background: #000000; border-radius: 50%; } .s1-r ul li.on a .text { display: none; } .s2-r ul li:last-child a .text { border-bottom: 1px dashed transparent; } .s1-r ul li a .text p { font-size: 18px; color: #323232; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s1-r ul li a .text span { position: absolute; right: 0; top: 0; font-size: 16px; color: #999; } .s1-r ul li a .text-date { padding-top: 20px; border-bottom: 1px solid #bae5ff; overflow: hidden; transition: all .3s; display: none; } .s1-r ul li.on a .text-date { display: block; margin-bottom: 40px; } .s1-r ul li a .text-date .date { position: relative; float: left; width: 87px; height: 87px; background: url(/uploads/image/images/date-bg.png) no-repeat center center; text-align: center; color: #05629b; } .s1-r ul li a .text-date .date::after { content: ""; position: absolute; left: 43%; top: 52%; width: 15px; height: 1px; background: #1283c8; transform: translatey(-50%) rotate(-20deg); } .s1-r ul li a .text-date .date p { padding-top: 10px; font-size: 28px; } .s1-r ul li a .text-date .date span { font-size: 16px; } .s1-r ul li a .nr { position: relative; overflow: hidden; padding-bottom: 25px; padding-left: 10px; } .s1-r ul li a .nr h2 { font-size: 18px; color: #067cc4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s1-r ul li a .nr p { margin-top: 10px; line-height: 23px; font-size: 14px; color: #888; height: 69px; overflow: hidden; } .s1-r ul li a .nr .more { position: absolute; right: 15px; bottom: 5px; width: 23px; height: 23px; background: url(/uploads/image/images/s2-r-jtt.png) no-repeat center center; } /* .s1-top ul li, .s1-down ul li { float: left; width: 32%; margin-left: 2%; margin-top: 40px; } .s1-top ul li:first-child, .s1-down ul li:first-child { margin-left: 0; } .s1-top ul li a { position: relative; display: block; } .s1-top ul li:hover a img { transform: scale(1.1); } .s1-top ul li a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(/uploads/image/images/s1-top-tc.png) repeat-x center bottom; } .s1-top ul li a .pic { padding-top: 60.1%; } .s1-top ul li a p { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 30px; line-height: 50px; font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 99; } .s1-top ul li a span { position: absolute; left: 25px; top: 20px; width: 50px; height: 20px; line-height: 20px; text-align: center; border-radius: 20px; background: #e6212d; z-index: 3; font-size: 16px; color: #fff; font-weight: bold; } .s1-down ul li a { position: relative; display: block; background: #f2f9fe; padding: 30px; } .s1-down ul li a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 99%; background: #067bc4; transition: all .3s; } .s1-down ul li:hover a::after { bottom: 0; } .s1-down ul li a h2 { line-height: 24px; font-size: 16px; color: #000; font-weight: normal; max-height: 48px; } .s1-down ul li a p { margin-top: 20px; line-height: 24px; font-size: 16px; color: #5084a5; text-indent: 2em; max-height: 72px; } .s1-down ul li a span { display: block; padding-top: 20px; font-size: 18px; color: #5084a5; font-family: "georgia"; } .s1-down ul li:hover a h2, .s1-down ul li:hover a p, .s1-down ul li:hover a span { position: relative; z-index: 3; color: #fff; } */ .section2 { padding-top: 50px; padding-bottom: 65px; background: url(/uploads/image/images/sect2-bg.jpg) no-repeat center center; background-size: cover; } .sect2-l { float: left; width: 48.5%; } .sect2-l ul li { transition: all .3s; } .sect2-l ul li a { display: block; padding: 16px 0; border-top: 1px dashed #dddddd; transition: all .3s; } .sect2-l ul li:last-child a { border-bottom: 1px dashed #dddddd; } .s2l-top { position: relative; padding-right: 230px; min-height: 135px; display: none; } .s2l-top .text span { font-size: 18px; color: #067bc4; font-family: "georgia"; } .s2l-top .text h2 { margin-top: 10px; margin-bottom: 10px; font-size: 18px; color: #067bc4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2l-top .text p { font-size: 14px; line-height: 17px; color: #999999; height: 51px; overflow: hidden; text-indent: 2em; } .s2l-top .tpp { position: absolute; right: 0; top: 0; width: 200px; box-shadow: 0px 5px 16px 0px rgba(48, 104, 96, 0.75); } .s2l-top .tpp .pic { padding-top: 68.7%; } .s2l-down { position: relative; padding-left: 125px; font-size: 16px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2l-down span { position: absolute; left: 0; top: 50%; transform: translatey(-50%); padding-left: 10px; padding-right: 10px; border-right: 1px solid #acc3bf; font-size: 18px; color: #067bc4; font-family: "georgia"; } .sect2-l ul li.on .s2l-top { display: block; } .sect2-l ul li.on .s2l-down { display: none; } .sect2-l ul li.on a { padding: 20px 0; } .sect2-l ul { margin-top: 30px; } .sect2-r { float: right; width: 47%; } .sect2 .title { border-bottom: none; padding-bottom: 0; } .sect2-r .title h2 { float: none; display: inline-block; cursor: pointer; padding-left: 0; margin-right: 40px; } .sect2-r .title h2 span { font-size: 24px; color: #999; font-weight: normal; } .sect2-r .title h2::after { content: ""; position: absolute; width: 1px; left: -20px; top: 10%; height: 25px; background: #999999; } .sect2-r .title h2:first-child:after { display: none; } .sect2 .title h2.on { padding-left: 50px; } .sect2-r .title h2.on::after { display: none; } .sect2-r .title h2 .icon { opacity: 0; } .sect2-r .title h2.on .icon { opacity: 1; } .sect2-r .title h2.on span { font-size: 28px; font-weight: bold; color: #067cc4; } .sect2-r .title h2 p { opacity: 0; } .sect2-r .title h2.on p { opacity: 1; } .sect2-r .title .more { top: 30%; } .sect2-r .title .more a { display: none; } .sect2-r .title .more a.on { display: block; } .s2-lb { margin-top: 30px; background: #fff; box-shadow: 0px 0px 16px 0px rgba(192, 197, 195, 0.3); } .s2-lb ul { display: none; font-size: 0; } .s2-lb ul.on { display: block; } .s2-lb ul li { display: inline-block; width: 33.333%; border-top: 1px dashed #d0d6da; border-left: 1px dashed #d0d6da; } .s2-lb ul li:nth-child(1), .s2-lb ul li:nth-child(2), .s2-lb ul li:nth-child(3) { border-top: 1px dashed transparent; } .s2-lb ul li:nth-child(3n-2) { border-left: none; } .s2-lb ul li a { position: relative; display: block; padding: 20px; transition: all .3s; } .s2-lb ul li a .date { width: 120px; text-align: left; color: #000; font-family: "georgia"; } .s2-lb ul li a .date p { font-size: 30px; } .s2-lb ul li a .date span { font-size: 16px; } .s2-lb ul li a h2 { margin-top: 10px; line-height: 24px; font-size: 16px; color: #000; max-height: 72px; height: 72px; text-align: justify; font-weight: normal; } .s2-lb ul li a .more { margin-top: 15px; text-align: right; } .s2-lb ul li a .news { position: absolute; right: 20px; top: 40px; width: 50px; height: 20px; line-height: 18px; text-align: center; border: 1px solid #e21b1b; border-radius: 10px; font-size: 16px; color: #e21b1b; font-family: "georgia"; } .s2-lb ul li:hover a { background: url(/uploads/image/images/s2-r-bg.jpg) no-repeat center center; background-size: cover; box-shadow: 0px 7px 35px rgb(6 96 168); } .s2-lb ul li:hover a .date { color: #fff; } .s2-lb ul li:hover a .news { border: 1px solid #fff; color: #fff; } .s2-lb ul li:hover a h2 { color: #fff; } .section3 { padding-top: 40px; padding-bottom: 75px; background: url(/uploads/image/images/sect3-bg.jpg) no-repeat center center; background-size: cover; } .sect3-l { float: left; width: 48.57%; } .sect3-r { float: right; width: 47%; } .s3-ll { margin-top: 50px; } .s3-ll-l { float: left; width: 295px; } .s3-ll-l ul li { margin-top: 35px; } .s3-ll-l ul li:first-child { margin-top: 0; } .s3-ll-l ul li a { display: block; position: relative; } .s3-ll-l ul li:hover a img { transform: scale(1.1); } .s3-ll-l ul li a .pic { padding-top: 60.8%; } .s3-ll-l ul li a .text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 99; padding: 10px 5px; z-index: 99; } .s3-ll-l ul li a .text p { font-size: 16px; color: #fff; } .s3-ll-l ul li a .text p:first-child { font-size: 14px; } .s3-ll-l ul li a .text p span { font-size: 18px; color: #fff; font-family: "georgia"; } .s3-ll-l ul li a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(/uploads/image/images/s3-l-tc.png) repeat-x center bottom; } .s3-ll-r { overflow: hidden; padding-left: 25px; } .s3-ll-r ul li a { display: block; padding: 15px 0; border-bottom: 1px dashed #c6cfd8; } .s3-ll-r ul li a span { font-size: 16px; color: #cd1821; } .s3-ll-r ul li a p { line-height: 24px; font-size: 16px; color: #333; max-height: 48px; } .s3-ll-r ul li:hover a p { text-decoration: underline; } .s3-rr { margin-top: 60px; } .s3-rr a { position: relative; display: block; } .s3-rr a:hover .pic img { transform: scale(1.1); } .s3-rr a .pic { padding-top: 60%; } .s3-rr a .bf { position: absolute; width: 57px; height: 57px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; } .s3-rr a .text { position: absolute; left: 0; right: 0; bottom: 0; padding-left: 15px; padding-right: 120px; z-index: 99; } .s3-rr a::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/uploads/image/images/s1-top-tc.png) repeat-x center bottom; } .s3-rr a .text p { font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s3-rr a .text span { display: inline-block; line-height: 55px; border-bottom: 5px solid #188e0c; margin-right: 30px; } .s3-rr a .text span img { display: inline-block; vertical-align: middle; padding-right: 5px; } .s3-rr .slick-prev { width: 60px; height: 60px; top: auto; transform: none; bottom: 0; left: auto; right: 60px; background: #bcc4cb url(/uploads/image/images/s3r-l.png) no-repeat center center; } .s3-rr .slick-next { width: 60px; height: 60px; top: auto; bottom: 0; right: 0; transform: none; background: #0560a9 url(/uploads/image/images/s3r-r.png) no-repeat center center; } .section4 { padding-top: 40px; padding-bottom: 60px; } .sect4 .title { text-align: center; } .s4 { margin-top: 45px; } .s4 ul { margin: 0 -19px; } .s4 ul li { margin: 0 19px; } .s4 ul li a { display: block; } .s4 ul li a .pic { padding-top: 56.49%; } .s4 .slick-prev { left: 20px; width: 34px; height: 34px; border-radius: 50%; background: url(/uploads/image/images/zt-l.png) no-repeat center center; } .s4 .slick-next { right: 20px; width: 34px; height: 34px; background: url(/uploads/image/images/zt-r.png) no-repeat center center; border-radius: 50%; } .section5 { padding: 50px 0; } .sect5 .title { text-align: center; } .sect5 ul { margin-top: 60px; } .sect5 ul li { float: left; width: 14.28%; } .sect5 ul li a { display: block; text-align: center; } .sect5 ul li a .icon { height: 71px; } .sect5 ul li a .icon img { display: inline-block; vertical-align: middle; } .sect5 ul li a p { margin-top: 10px; font-size: 18px; color: #000000; } .sect5 ul li:hover a p { color: #0560a9; } .sect5 ul li a .icon:hover img { animation: icon-yh 0.6s linear; } @keyframes icon-yh { 0% { transform: rotatez(0); } 10% { transform: rotatez(10deg); } 20% { transform: rotatez(0); } 30% { transform: rotatez(-10deg); } 40% { transform: rotatez(0); } 50% { transform: rotatez(10deg); } 60% { transform: rotatez(0); } 70% { transform: rotatez(-10deg); } 80% { transform: rotatez(0); } 90% { transform: rotatez(10deg); } 100% { transform: rotatez(0); } } @media screen and (max-width:1600px) { .s4 .slick-prev { left: 0; } .s4 .slick-next { right: 0; } } @media screen and (max-width:1460px) { .s4 ul { margin: 0; } } @media screen and (max-width:1200px) { .s3-ll-l { width: 210px; } .s3-ll-r ul li a { padding: 8px 0; } .s1-l { width: 500px; } .s1-r { width: calc(100% - 520px); } .s1-r ul li a .text-date { padding-top: 15px; } .s1-r ul li.on a .text-date { margin-bottom: 15px; } .s1-r ul li a .text { line-height: 37px; } } @media screen and (max-width:1000px) { .sect2-l, .sect3-l { float: none; width: 100%; } .sect2-r, .sect3-r { float: none; width: 100%; margin-top: 15px; } .s1-l { float: none; width: 100%; } .s1-r { float: none; width: 100%; margin-top: 15px; } } @media screen and (max-width:700px) { .section1, .section2, .section3, .section4, .section5 { padding: 15px 0; } .title h2 span { font-size: 18px; } .s1-top ul li, .s1-down ul li { margin-top: 15px; float: none; width: 100%; margin-left: 0; } .s1-down ul li a { padding: 15px; } .s1-down ul li a p { margin-top: 10px; } .s1-down ul li a span { padding-top: 10px; } .sect2-l ul { margin-top: 15px; } .s2l-top { padding-right: 0; } .s2l-top .tpp { position: static; width: 100%; margin-top: 15px; } .sect2-r .title h2 span.on { font-size: 20px; } .sect2-r .title h2 span { font-size: 16px; padding: 0 5px; } .s2-lb ul li { width: 50%; border-left: none; border-right: 1px dashed #d0d6da; } .s2-lb ul li:nth-child(2n) { border-right: none; } .s2-lb ul li:nth-child(3) { border-top: 1px dashed #d0d6da; } .s2-lb ul li a { padding: 15px; } .s2-lb ul li a .date p { font-size: 24px; } .s3-ll { margin-top: 15px; } .s3-ll-l { float: none; width: 100%; } .s3-ll-l ul li { margin-top: 15px; } .s3-ll-r { padding-left: 0; margin-top: 15px; } .s3-rr { margin-top: 15px; } .s3-rr a .bf { width: 35px; height: 35px; } .s3-rr .slick-prev, .s3-rr .slick-next { width: 35px; height: 35px; } .s3-rr .slick-prev { right: 35px; } .s3-rr a .text { padding-right: 70px; } .s3-rr a .text span { margin-right: 5px; } .s4 { margin-top: 15px; } .sect5 ul li { width: 33.333%; margin-bottom: 10px; } .sect5 ul li a .icon { height: 40px; } .sect5 ul li a .icon img { height: 40px; } .sect5 ul li a p { font-size: 15px; } .sect5 ul { margin-top: 15px; } .s1-l .slick-dots li { margin: 0 2px; } .s1-l a p { padding-left: 15px; padding-right: 100px; font-size: 14px; } .sect1 { padding: 15px; } .s1-r ul li a .text p { font-size: 15px; } .s1-r ul li a .text-date .date { margin-top: 20px; width: 60px; height: 60px; background-size: 100% 100%; } .s1-r ul li a .text-date .date p { font-size: 16px; } .s1-r ul li a .text-date .date span { font-size: 12px; } .s1-r ul li a .nr h2 { font-size: 17px; } .sect2-r .title h2.on span { font-size: 16px; } .title h2 .icon { width: 35px; height: 35px; } .title h2 .icon img { height: 20px; } .title h2 { padding-left: 38px; } .title h2 p { font-size: 12px; } .sect2-r .title h2 { margin-right: 0; } .sect2-r .title h2::after { left: -4px; top: 24%; height: 15px; } }