@charset "utf-8"; .banner { position: relative; overflow: hidden; } .banner img { display: block; width: 100%; } .banner a { display: block; } .banner .slick { position: relative; z-index: 9; } .banner .slick-slide a { display: block; position: relative; } .banner .slick-dots li button { display: none; } .banner .slick-dots { bottom: 5%; } .banner .slick-dots li { width: 38px; height: 4px; background-color: #ffffff; } .banner .slick-dots .slick-active { background-color: #007a80; } .banner .slick-slide a::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/uploads/image/limages/banner-zzc2.png) repeat-x; background-position: center bottom; z-index: 9; } /* index */ .s1 { background: url(/uploads/image/limages/s1-bj.jpg) no-repeat; background-size: 100% 70%; padding-top: 20px; padding-bottom: 56px; } .tit h3 { position: relative; padding-bottom: 18px; } .tit h3 span { font-size: 24px; line-height: 30px; color: #ffffff; opacity: 0.1; position: absolute; bottom: 0; left: 0; } .tit h3 b { font-size: 36px; line-height: 30px; color: #ffffff; font-weight: normal; } .s1-top .tit { float: left; } .s1-link { float: none; font-size: 0; text-align: center; } .s1-link ul li { display: inline-block; vertical-align: top; text-align: center; width: 16.6%; padding-bottom: 20px; border-bottom: 6px solid #ffe38d; } .s1-link ul li:nth-child(2) { border-color: #f8a15b; } .s1-link ul li:nth-child(3) { border-color: #8dd7f7; } .s1-link ul li:nth-child(4) { border-color: #00aeef; } .s1-link ul li:nth-child(5) { border-color: #d2e287; } .s1-link ul li:nth-child(6) { border-color: #01b2c2; } .s1-link ul li a p { font-size: 18px; line-height: 25px; height: 50px; color: #fefefe; } .s1-link ul li a .icon { height: 40px; position: relative; margin-bottom: 20px; } .s1-link ul li a .icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .s1-link ul li a:hover .icon { animation: icon-yh 0.5s; } .s1-banner a{ display:block; } .s1-banner a img{ display:block; width:100%; } .s1-banner .pic { height: 430px; padding-top: 0; } .s1-banner .slick-dots{ font-size:0; bottom:20px; } .s1-banner .slick-dots button{ display:none; } .s1-banner .slick-dots li{ width:12px; height:12px; border:1px solid #fff; border-radius:50%; } .s1-banner .slick-dots li.slick-active{ background:#fff } .s1-tx { overflow: hidden; padding: 60px 50px; } .s1-tx p { font-size: 18px; line-height: 32px; height: 192px; overflow: hidden; text-overflow: ellipsis; color: #666666; } .s1-c { background-color: #ffffff; box-shadow: 0px 5px 20px 0px rgba(0, 122, 128, 0.1); max-width: 1400px; margin: 0 auto; } .tit2 h3 b { color: #00757c; } .tit h3 span { font-size: 24px; color: #cccccc; opacity: 0.3; } .s1-bot { max-width: 1920px; margin: 0 auto; background: url(/uploads/image/limages/s1-bj1.jpg) no-repeat; background-size: 50% 100%; background-position: right top; } .s1-arrow { margin-top: 30px; height: 11px; background: url(/uploads/image/limages/s1-arrow.png) no-repeat; background-size: 63px 11px; background-position: 96% center; transition: all 0.3s; } .s1-c a:hover .s1-arrow { background-position: right center; } .tit2 { position: relative; margin-bottom: 30px; } .s1-tx .tit2 { margin-bottom: 10px; } .tit a { font-size: 18px; line-height: 28px; color: #666666; position: absolute; top: 50%; right: 0; transform: translatey(-50%); } .tit a:hover { color: #00767c; } /* s2 */ .s2 { padding-bottom: 108px; } .s2-l { width: 64%; float: left; margin-right: 3.5%; } .s2-top { font-size: 0; } .s2-top a:first-child { margin-right: 4%; } .s2-top a { width: 48%; background-color: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0, 122, 128, 0.25); display: inline-block; vertical-align: top; } .s2-top a .pic { height: 240px; padding-top: 0; } .s2-info { padding: 15px 25px; } .s2-info p { font-size: 18px; line-height: 24px; height: 48px; color: #333333; overflow: hidden; text-overflow: ellipsis; } .s2-date { background-color: #007a80; position: absolute; bottom: 0; left: 18px; z-index: 2; text-align: center; padding: 8px 12px; } .s2-date b { font-size: 24px; line-height: 24px; color: #ffffff; display: block; } .s2-date span { font-size: 12px; line-height: 24px; color: #ffffff; display: block; } .s2-list ul li a span { display: block; font-size: 16px; color: #007a80; display: block; background: url(/uploads/image/limages/s2-date.png) no-repeat; padding-left: 20px; background-position: left center; } .s2-list ul li a p { font-size: 18px; color: #333333; margin: 15px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2-list ul li a { border-bottom: 1px solid #ddd; position: relative; } .s2-list ul li { float: left; width: 48%; margin-top: 25px; } .s2-list ul li:nth-child(odd) { margin-right: 4%; } .s2-list ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background-color: #007a80; transition: all 0.3s; } .s2-list ul li a:hover:after { width: 100%; } .s2-list ul li a:hover p { font-weight: 600; color: #007a80; } .s2-r { overflow: hidden; /* padding-left: 10px; */ } .s2-time b { display: block; font-size: 24px; line-height: 37px; color: #ffffff; background-color: #007a80; } .s2-time span { font-size: 12px; line-height: 18px; color: #007a80; display: block; background-color: #fff; margin: 0 8px; } .s2-time { float: left; text-align: center; box-shadow: 0px 0px 10px 0px rgba(0, 122, 128, 0.25); margin-right: 25px; } .s2-r ul li { padding: 15px 0; border-bottom: 1px dashed #ccc; } .s2-tx p { font-size: 18px; line-height: 24px; height: 48px; overflow: hidden; text-overflow: ellipsis; color: #333333; } /* s3 */ .s3 { padding-top: 60px; padding-bottom: 70px; background: url(/uploads/image/limages/s1-bj.jpg) no-repeat; background-size: 100% 70%; font-size: 0; } .s3 .tit { text-align: center; margin-bottom: 60px; } .s3 .tit h3 span { position: absolute; left: 50%; bottom: 0; transform: translatex(-50%); } .s3-item { width: 16%; height: 174px; position: relative; display: inline-block; } .s3-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .s3-info p { font-size: 20px; line-height: 30px; color: #ffffff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s3-c a:hover .icon { animation: jello 1s; } .s3-row{ max-width: 1400px; margin: 0 auto; } .s3-row4 a:first-child { margin-left: 16%; } .s3-row { background: url(/uploads/image/limages/s3-pic.jpg) no-repeat; background-position: right top; background-size: 84% 100%; } .s3-bot { padding-top: 70px; } .s3-zj .pic { padding-top: 142%; } .s3-zj a { position: relative; margin: 0 14px; } .s3-tx { position: absolute; bottom: 0; left: 0; width: 100%; padding: 38px 18px 20px 18px; background: url(/uploads/image/limages/s4-txbj2.png) no-repeat; background-size: 100% 100%; transition: all 0.3s; height: 120px; } .s3-tx h3 { font-size: 18px; color: #ffffff; margin-bottom: 10px; font-weight: 600; } .s3-p span { float: left; font-size: 14px; line-height: 28px; color: #ffffff; } .s3-p p { overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 28px; white-space: nowrap; color: #ffffff; } .s3-zj a:hover p { white-space: normal; height: 84px; } .s3-zj a:hover .s3-tx { height: 176px; } .s3-c{ background: url(/uploads/image/limages/s3-bj.jpg) no-repeat; background-position: left center; } /* s4 */ .s4 { padding-bottom: 90px; } .s4 .tit { text-align: center; margin-bottom: 60px; } .s4 .tit h3 span { position: absolute; left: 50%; bottom: 0; transform: translatex(-50%); } .s4-list ul li a { margin: 0 17px; position: relative; } .s4-list ul li a::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/uploads/image/limages/s5-zzc.png) repeat-x; background-position: center bottom; z-index: 1; } .s4-list ul li a p { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; font-size: 16px; color: #ffffff; text-align: center; padding: 15px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s4-list ul li a:hover img { transform: scale(1.1); } .s4-list .slick-prev { width: 55px; height: 55px; background: url(/uploads/image/limages/s5-l.png) no-repeat; background-size: cover; left: -80px; } .s4-list .slick-next { width: 55px; height: 55px; background: url(/uploads/image/limages/s5-r.png) no-repeat; background-size: cover; right: -80px; } .s4-list .slick-slider { padding-bottom: 40px; } .s4-list .slick-dots li { width: 10px; height: 10px; border: solid 1px #00686d; border-radius: 50%; } .s4-list .slick-dots li.slick-active { background-color: #007a80; } /* s5 */ .s5 { background: url(/uploads/image/limages/s6-bj.jpg) no-repeat; background-size: 100% 78%; background-position: center bottom; padding-bottom: 90px; font-size: 0; } .s5>.px1400{ display: flex; justify-content: space-between; flex-wrap: wrap; } .s5-item { width: 31%; padding-right: 17px; overflow: hidden; border-radius: 30px; } .s5-tit h3 { font-size: 28px; color: #ffffff; } .s5-tit h3 img { vertical-align: middle; margin-right: 5px; } .s5-tit { position: relative; padding: 30px; } .s5-tit a:hover { opacity: 0.7; } .s5-tit a { font-size: 18px; color: #ffffff; position: absolute; top: 50%; right: 30px; transform: translatey(-50%); } .s5-list { background-color: #fff; border-radius: 0px 20px 20px 20px; padding: 0 30px; padding-bottom: 20px; } .s5-list ul li a span { font-size: 14px; display: block; color: #999999; margin-bottom: 5px; } .s5-list ul li a p { font-size: 18px; color: #333333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s5-list ul li a { border-top: 1px dashed #ccc; padding: 20px 0; } .s5-list ul li:first-child a { border-top: none; } .s5-list ul li a:hover p { color: #00686d; } @media screen and (max-width:1600px) { .s4-list .slick-arrow{ display: none !important; } } @media screen and (max-width:1400px) { .tit h3 b{ font-size: 30px; } .s1-link ul li{ width: 16.6%; } } @media screen and (max-width:1200px) { .s1-top .tit{ float: none; width: auto; margin-right: 0; } .s1{ padding: 10px 0 50px 0; } .s1-link{ float: none; width: auto; text-align: center; } .s1-link ul li{ width: 16.66%; margin-top: 20px; } .s1-link ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .s1-tx{ padding: 50px 40px; } .s3-item{ height: 150px; } .s3-info p{ font-size: 18px; } .s5-tit h3{ font-size: 24px; } } @media screen and (max-width:1024px) { .s1,.s3{ padding: 10px 0 50px 0; } .s2,.s4,.s5{ padding-bottom: 50px; } .s3-bot{ padding-top: 50px; } .tit h3 b{ font-size: 26px; } .tit h3 span{ font-size: 20px; } .s1-link ul li{ border-bottom: 4px solid #ffe38d; } .s1-link ul li a p{ font-size: 16px; } .s1-tx{ padding: 40px 30px; } .s1-banner { float: none; width: auto; } .s1-banner .pic{ padding-top: 63%; height: auto; } .s2-l{ float: none; width: auto; margin-right: 0; margin-bottom: 30px; } .tit2{ margin-bottom: 20px; } .s2-top a .pic{ height: auto; padding-top: 57%; } .tit a{ font-size: 16px; } .s2-r ul li:first-child{ padding-top: 0; } .s2-time b{ font-size: 18px; } .s3-item{ width: 130px; height: 120px; } .s3-row4 a:first-child{ margin-left: 130px; } .s3-info img{ height: 40px; } .s3-info p{ font-size: 16px; } .s3-row{ background-size: cover; } .s3 .tit,.s4 .tit{ margin-bottom: 30px; } .s3-zj a{ margin: 0 10px; } .s4-list ul li a{ margin: 0 10px; } .s5-item{ width: 100%; margin-bottom: 20px; } .s5-tit{ padding: 20px; } } @media screen and (max-width:768px) { .s1,.s3{ padding: 10px 0 40px 0; } .s2,.s4,.s5{ padding-bottom: 40px; } .s3 .tit,.s4 .tit{ margin-bottom: 20px; } .s3-bot{ padding-top: 40px; } .s2-tx p{ font-size: 16px; } .s2-time b{ font-size: 16px; } .banner .slick-dots li{ width: 25px; height: 3px; } .tit h3 b{ font-size: 24px; } .tit h3 span{ font-size: 16px; } .s1-tx{ padding: 30px 20px; } .s1-tx .tit2{ margin-bottom: 0; } .s1-tx p{ font-size: 16px; } .s2-date b{ font-size: 20px; } .s2-info p{ font-size: 16px; } .s2-list ul li a p{ font-size: 16px; } .s2-list ul li a span{ font-size: 14px; } .tit a{ font-size: 14px; } .tit2{ margin-bottom: 10px; } .s2-list ul li{ margin-top: 10px; } .s3-zj a{ margin: 0 5px; } .s3-tx h3{ font-size: 16px; } .s4-list ul li a{ margin: 0 5px; } .s5-list ul li a p{ font-size: 16px; } .s5-list ul li a{ padding: 15px 0; } .s5-tit h3{ font-size: 22px; } .s5-tit a{ font-size: 16px; } } @media screen and (max-width:640px){ .s1-link ul li a p{ font-size: 15px; line-height: 22px; height: 44px; } .s1-link ul li{ width: 33.33%; } .s1-link ul li{ border-bottom: 2px solid #ffe38d; } .s1-tx{ padding: 20px 15px; } .s1-arrow{ background-size: 40px; } .s2-top a{ float: none; width: auto; margin-right: 0 !important; margin-bottom: 20px; width: 100%; } .s2-date b{ font-size: 18px; } .s3-row4 a:first-child{ margin-left: 0; } .s3-item{ width: 120px; height: 100px; } .s3-info p{ font-size: 14px; } .s4-list ul li a p{ font-size: 14px; } } @media screen and (max-width:480px) { .s1,.s3{ padding: 10px 0 30px 0; } .s2,.s4,.s5{ padding-bottom: 30px; } .s3-bot{ padding-top: 30px; } .s3 .tit,.s4 .tit{ margin-bottom: 10px; } .s1-link ul li{ padding-bottom: 10px; } .s5-tit{ padding: 15px 10px; } }