@font-face { font-family: 'sysong'; src: format('woff'); font-weight: normal; font-style: normal; } .title { position: relative; text-align: center; } .title h2 { position: relative; display: inline-block; text-align: center; font-size: 27px; color: #333; font-weight: normal; } .title h2::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: #e5f0f8; left: 20px; bottom: 0px; z-index: -1; } .title h2 img { vertical-align: -6px; margin-right: 10px; } .title a { position: absolute; right: 0; top: 50%; transform: translatey(-50%); text-transform: uppercase; font-size: 16px; color: #999; } .title a:hover { color: #006cb7; } .section1 { padding-top: 70px; padding-bottom: 145px; background: url(/uploads/image/nimages/sect1-bg.jpg) no-repeat center bottom; background-size: 100% auto; } .sect1-top { margin-top: 35px; background: url(/uploads/image/nimages/sect1-r.jpg) no-repeat right bottom; background-size: 50% 100%; overflow: hidden; } .sect1-l { float: left; width: 48%; } .sect1-l a { display: block; position: relative; } .sect1-l a .pic { padding-top: 62%; } .sect1-l a .text { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 99; padding-left: 30px; width: 70%; } .sect1-l a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(/uploads/image/nimages/sect1-l-tc.png) no-repeat center bottom; background-size: 100% auto; } .sect1-l a .text .date { display: inline-block; width: 120px; height: 30px; line-height: 30px; background-color: #e1b64f; border-top-right-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; text-align: center; } .sect1-l a .text .date span { padding-left: 20px; font-size: 14px; color: #fff; background: url(/uploads/image/nimages/time.png) no-repeat left center; } .sect1-l a .text h2 { margin: 15px 0; font-size: 18px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect1-l a .text p { font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect1-l .slick-dots { width: auto; right: 70px; bottom: 30px; } .sect1-l .slick-dots li { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; margin: 0 8px; } .sect1-l .slick-dots li.slick-active { background-color: #fff; } .sect1-r { overflow: hidden; padding: 30px 40px; } .sect1-r a { display: block; } .sect1-r a .date { padding-bottom: 20px; border-bottom: 1px solid #66a7d4; font-family: 'sysong'; } .sect1-r a .date p { width: 75px; display: inline-block; text-align: center; border-right: 1px solid #368bc6; vertical-align: middle; } .sect1-r a .date p span { display: inline-block; font-size: 22px; color: #fff; width: 60px; line-height: 22px; } .sect1-r a .date p span.two { background-color: #e1b64f; font-size: 12px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; } .sect1-r a .date i { display: inline-block; font-size: 34px; color: #fff; vertical-align: middle; padding-left: 10px; } .sect1-r a h2 { margin: 20px 0; font-size: 18px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect1-r>a>p { line-height: 24px; font-size: 16px; color: #fff; opacity: .8; height: 48px; overflow: hidden; } .sect1-r a .more { margin-top: 20px; margin-bottom: 45px; text-align: right; } .sect1-r a .pic { padding-top: 57.8%; } .sect1-down>ul>li { float: left; width: 33.333%; padding: 30px 0; box-sizing: border-box; transition: all .3s; } .sect1-down>ul>li a { display: block; border-left: 1px solid #ebebec; padding-left: 15px; padding-right: 15px; } .sect1-down>ul>li a .date { position: relative; padding-bottom: 15px; border-bottom: 1px dashed #e7e7e7; color: #0272be; } .sect1-down>ul>li a .date span { font-size: 28px; font-weight: bold; padding-right: 10px; } .sect1-down>ul>li a .date i { font-size: 14px; padding-left: 10px; } .sect1-down>ul>li a .date::after { content: ""; position: absolute; left: 45px; top: 7px; width: 1px; height: 26px; transform: rotatez(21deg); background-color: #0272be; } .sect1-down>ul>li a h2 { margin-top: 10px; margin-bottom: 15px; font-size: 18px; color: #333; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect1-down>ul>li a p { line-height: 22px; font-size: 14px; color: #333; height: 44px; overflow: hidden;overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .sect1-down>ul>li a .more { margin-top: 15px; text-align: right; } .sect1-down>ul>li:hover { background-color: #fff; box-shadow: 0 0 20px #c2c2c2; } .sect1-down>ul>li:hover li a { border-left: 1px solid transparent; } .sect1-down>ul>li:hover a h2 { font-weight: bold; color: #006cb7; } .sect1-down>ul>li:hover a p { color: #006cb7; } .section2 { position: relative; } .section2::before { content: ""; position: absolute; left: 0; top: -80px; bottom: 0; right: 240px; background-color: #006cb7; } .section2::after { content: ""; position: absolute; left: 135px; top: 0; bottom: 0; background-color: #fff; width: 105px; z-index: 1; } .sect2 { position: relative; padding-top: 45px; background-color: #fff; z-index: 2; } .notice { position: relative; } .notice>ul { margin-left: -35px; margin-right: -35px; padding-top: 55px; padding-bottom: 60px; } .notice>ul li { margin: 0 35px; } .notice>ul li a { display: block; } .notice>ul li a .date { float: left; width: 75px; border-right: 1px solid #9ac6e5; } .notice>ul li a .date p { font-size: 48px; color: #0371bd; line-height: 48px; font-family: 'sysong'; } .notice>ul li a .date span { display: block; width: 60px; line-height: 22px; font-size: 12px; color: #fff; background-color: #e1b64f; border-top-right-radius: 10px; border-bottom-left-radius: 10px; text-align: center; margin-top: 5px; } .notice>ul li a .text { padding-left: 15px; overflow: hidden; } .notice>ul li a .text h2 { font-size: 18px; color: #333; font-weight: normal; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notice>ul li:hover a .text h2 { font-weight: bold; color: #006cb7; } .notice>ul li a .text p { line-height: 18px; font-size: 14px; color: #333333; opacity: .8; height: 36px; overflow: hidden; } .notice>ul li:hover a .text p { color: #006cb7; } .notice .slick-prev { width: 30px; height: 15px; left: 30px; top: auto; bottom: -5px; background: url(/uploads/image/nimages/notice-l.png) no-repeat center center; } .notice .slick-next { width: 30px; height: 15px; right: 30px; top: auto; bottom: -5px; background: url(/uploads/image/nimages/notice-r.png) no-repeat center center; } .s3-state { position: absolute; left: 20px; right: 20px; bottom: 9px } .s3-state div { height: 1px; background-color: #eaeaea; border-radius: 3px; position: relative; } .s3-state span { position: absolute; left: 0; top: -1px; bottom: -1px; width: 0; background: #006cb7; border-radius: 3px; transition: all 0.3s; } .section3 { padding-top: 10px; padding-bottom: 20px; background: url(/uploads/image/nimages/sect4-bg.jpg) no-repeat center bottom; background-size: 100% auto; } .sect3-l { float: left; width: 48%; } .sect3-r { float: right; width: 48%; } .sect3 .title { text-align: left; margin-top: 10px; margin-bottom: 10px; } .sect3 .title h2::after { left: -5px; top: 5px; } .s3l-top { position: relative;display:none; } .s3l-top .pic { padding-top: 38.4%; } .s3l-top .text { position: absolute; left: 0; right: 0; top: 50%; transform: translatey(-50%); text-align: center; font-family: 'sysong'; color: #fff; } .s3l-top .text p { font-size: 36px; font-weight: bold; } .list>li { position: relative; padding-left: 15px; padding-right: 60px; background: url(/uploads/image/nimages/list.jpg) no-repeat left center; border-bottom: 1px dashed #e5e5e5; transition: all .3s; } .list>li a { padding: 15px 0; display: block; font-size: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list>li span { position: absolute; right: 0; top: 50%; transform: translatey(-50%); font-size: 15px; color: #999; padding-left: 5px; } .list>li:hover a p { color: #006cb7; text-decoration: underline; font-weight: bold; } .s3r-top { padding: 35px 25px; padding: 35px 25px; background-position: 0 100%; background-size: 1% 100%; background-repeat: no-repeat; background-image: linear-gradient(#006cb7, #006cb7); transition: background-size .3s; } .s3r-top a { display: block; } .s3r-top h2 { margin-bottom: 20px; font-size: 18px; color: #333333; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s3r-top p { line-height: 24px; font-size: 14px; color: #666; height: 48px; overflow: hidden;overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .s3r-top:hover { background-size: 100% 100%; } .s3r-top:hover h2 { color: #fff; } .s3r-top:hover p { color: #fff; } .s3r-down ul li { margin-top: 10px; line-height: 60px; background: #fff; border-bottom: none; } .s3r-down ul li:hover { background: #006cb7; } .s3r-down ul li a { padding: 0; } .s3r-down .list>li span { right: 10px; } .s3r-down ul li:hover a { color: #fff; font-weight: bold; } .s3r-down ul li:hover span { color: #fff; } .s3r-down .list>li { padding-right: 110px; } @media screen and (max-width:1560px) { .notice>ul { margin-left: 0; margin-right: 0; } } @media screen and (max-width:1440px) { .sect1-r a .more { margin-bottom: 15px; } .s3-state { left: 50px; right: 50px; } } @media screen and (max-width:1200px) { .sect1-r { padding: 15px; } .sect1-r a h2 { margin: 10px 0; } .sect1-r a .more { margin-top: 5px; margin-bottom: 5px; } .sect1-l .slick-dots { right: 15px; } .notice>ul li { margin: 0 15px; } .s3r-down ul li { line-height: 62px; } .section3 { padding-bottom: 30px; } .section1 { padding-bottom: 65px; } } @media screen and (max-width:1000px) { .section1 { padding-top: 30px; padding-bottom: 30px; background-size: 100% 100%; } .sect1-l { float: none; width: 100%; } .sect1-top { background-size: 100% 100%; } .section2::before { top: -30px; } .s3r-top { padding: 15px 25px; } .list>li { padding-left: 15px; } .title h2 { font-size: 19px; } .title h2 img { height: 20px; } .title a { font-size: 14px; } .sect1-top { margin-top: 15px; } .sect1-l a .text { padding-left: 10px; width: 80%; bottom: 40px; } .sect1-l a .text h2 { margin: 5px 0; } .sect1-l .slick-dots { bottom: 15px; } } @media screen and (max-width:700px) { .sect1-down>ul>li { float: none; width: 100%; margin-top: 10px; background-color: #fff; padding: 10px 0; } .notice>ul { padding: 20px 0; } .section3 { padding-top: 15px; padding-bottom: 15px; } .sect3-l { float: none; width: 100%; } .sect3-r { float: none; width: 100%; margin-top: 15px; } .list>li a { padding: 10px 0; font-size: 16px; } .s3r-top h2 { margin-bottom: 5px; } .sect2 { padding-top: 15px; } .s3l-top .text p { font-size: 24px; } .sect1-r a .date i { font-size: 24px; } .notice>ul li a .date p { font-size: 32px; text-align: center; } }