/*banner鍐呭*/ .banner { width: 100%; height: 600px; margin: 80px auto 0; } .bannerswiper { width: 100%; height: 100%; margin: 0 auto; overflow: hidden; position: relative; } .banner-bg { position: relative; width: 100%; height: 100%; background-image: url(../images/banner.jpg); background-size: cover; background-position: center; } .banner-bg2 { position: relative; width: 100%; height: 100%; background-image: url(../images/banner2.jpg); background-size: cover; background-position: center; } .banner-bg3 { position: relative; width: 100%; height: 100%; background-image: url(../images/banner3.jpg); background-size: cover; background-position: center; } .banner-c { width: 1400px; margin: 0 auto; height: 100%; } .banner-txt { width: 100%; position: relative; left: 0; top: 50%; transform: translateY(-50%); } .banner-t1 { width: 100%; font-size: 60px; color: #fff; } .banner-t2 { width: 58.4%; font-size: 20px; color: #fff; line-height: 1.75em; margin-top: 2%; } .banner-btn { width: 160px; height: 50px; background-color: #8A0780; border-radius: 25px; margin-top: 3%; font-size: 18px; text-align: center; line-height: 50px; } .banner-btn a { width: 100%; height: 100%; display: block; color: #fff; } .banner-btn img { width: 7px; display: inline-block; margin-left: 5px; vertical-align: middle; } .bannerswiperLeft { width: 27px; position: absolute; left: 8%; top: 50%; transform: translateY(-50%); z-index: 30; cursor: pointer; } .bannerswiperRight { width: 27px; position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(180deg); z-index: 30; cursor: pointer; } .banner-por span { width: 58px; height: 3px; background: rgba(255, 255, 255, 0.6); border-radius: 0; margin: 0 10px; } .banner-por span.swiper-pagination-bullet-active { background: rgba(255, 255, 255, 1); } /*banner鍐呭缁撴潫*/ /*妯″潡浠g爜*/ .content { width: 100%; margin: 0 auto; overflow: hidden; padding: 60px 0; } .main { width: 1400px; margin: 0 auto; } .de-title { width: 100%; text-align: center; font-size: 40px; color: #333; font-weight: 600; margin-bottom: 35px; } /*妯″潡浠g爜缁撴潫*/ /*鏂伴椈涓庢椿鍔?/ .p0-ul { width: 100%; margin: 0 auto 0; } .p0-ul::after { content: ''; display: block; clear: both; } .p0-ul li { width: 31.7%; float: left; margin-left: 2.3%; } .p0-ul li:hover{ cursor: pointer; } .p0-ul li:first-child { margin-left: 0; cursor: pointer; } .p0-img { width: 100%; overflow: hidden; max-height: 200px; } #set_7_button2 { stroke-width: 3px; fill: transparent; stroke: #8A0780; stroke-dasharray: 72 400; stroke-dashoffset: -116; transition: 1s all ease; } .p0-btn:hover #set_7_button2 { stroke-dasharray: 50 0; stroke-width: 3px; stroke-dashoffset: 0; stroke: #8A0780; fill: #8A0780; } .p0-btn:hover p a { color: #fff; } .p0-btn { width: 78px; margin-top: 5%; margin-left: 80%; } .p0-btn p { display: block; color: #8A0780; font-size: 16px; margin-top: -37px; text-align: center; width: 100%; text-align: center; padding: 3px 0 5px; } .p0-btn a { color: #8A0780; } .p0-bottom { width: 100%; background-color: #FAFAFA; padding: 7% 0 7%; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 0 2px 5px rgb(0, 0, 0, 0.1); } .p0-time { font-size: 16px; color: #808080; margin-left: 7%; } .p0-title { width: 90%; margin-left: 7%; font-size: 20px; margin-top: 3%; line-height: 1.7em; color: #333; } .p0-more-btn { width: 140px; margin: 3% auto 0; height: 36px; box-sizing: border-box; text-align: center; font-size: 14px; color: #333; border: 1px solid #B2B2B2; line-height: 36px; border-radius: 25px; } .p0-more-btn a { color: #333; display: flex; justify-content: center; align-items: center; } .p0-more-btn img { width: 5px; display: inline-block; margin-left: 5px; vertical-align: middle; } .p0-more-btn .img-hover { display: none; } .p0-more-btn:hover img:first-child { display: none; } .p0-more-btn:hover .img-hover { display: inline-block; } .p0-more-btn:hover a { color: #fff; } .p0-more-btn:hover { background-color: #8A0780; border: 1px solid #8A0780; color: #fff; } /*鏂伴椈涓庢椿鍔ㄧ粨鏉?/ /*浜у搧涓庢妧鏈?/ .content.m2 { background-image: url(../images/bg2.jpg); background-size: cover; } .p1-list { width: 100%; text-align: center; } .p1-nav { display: inline-block; margin: 0 40px; padding-bottom: 15px; border-bottom: 3px solid rgba(138, 7, 128, 0); cursor: pointer; } .p1-nav.active { border-bottom: 3px solid rgba(138, 7, 128, 1); color: #8A0780; } .p1-line { width: 100%; height: 1px; margin-top: -1.5px; background-color: rgba(0, 0, 0, 0.2); } .p1-main { width: 100%; overflow: hidden; margin: 3% auto 0; display: none; } .p1-main.active { display: block; } .p1-left1 { width: 61.7%; float: left; } .p1-hover { overflow: hidden; } .p1-hover .p1-txt { transition: 0.5s; padding: 10px 20px; box-sizing: border-box; } .p1-hover:hover .p1-txt { bottom: 3px; background: rgba(62,89 , 155, 0.5); } .p1-part1 { position: relative; width: 100%; } .p1-txt { width: 100%; position: absolute; left: 0px; padding: 0 20px; bottom: -110px; } .p1-t1 { font-size: 24px; color: #fff; margin-bottom: 20px; /* 澧炲姞涓嬫柟闂磋窛 */ } .p1-t2 { font-size: 14px; color: #fff; line-height: 1.75em; margin-top: 3%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .p0-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 68px; } #set_7_button3 { stroke-width: 3px; fill: transparent; stroke: #fff; stroke-dasharray: 72 400; stroke-dashoffset: -116; transition: 1s all ease; } .p1-btn:hover #set_7_button3 { stroke-dasharray: 50 0; stroke-width: 3px; stroke-dashoffset: 0; stroke: #fff; fill: #fff; } .p1-btn:hover p a { color: #8A0780; } .p1-btn { width: 78px; margin-top: 3%; } .p1-btn p { display: block; color: #8A0780; font-size: 16px; margin-top: -37px; text-align: center; width: 100%; text-align: center; padding: 3px 0 5px; } .p1-btn a { color: #fff; } .p1-bottom { width: 100%; margin: 1.6% auto 0; overflow: hidden; } .p1-part2 { position: relative; width: 48.8%; float: left; } .p1-part3 { position: relative; width: 48.8%; float: right; } .p1-right { width: 37%; float: right; } .p1-part4 { position: relative; width: 100%; float: right; margin-bottom: 2.8%; } .p1-part5 { position: relative; width: 100%; float: right; } .p1-left2 { width: 32.4%; float: left; } .p1-part6 { width: 100%; position: relative; } .p1-part7 { position: relative; width: 48.9%; float: left; margin-right: 2.3%; } .p1-right2 { width: 66.2%; float: right; overflow: hidden; } .p1-part8 { position: relative; width: 48.8%; float: left; } .p2-main { width: 100%; overflow: hidden; margin: 0 auto; } .p2-main li { width: 15.5%; float: left; margin-left: 1.4%; height: 170px; background-color: #F7F7F7; box-sizing: border-box; border-bottom: 1px solid #8A0780; margin-bottom: 3%; } .p2-main li:first-child, .p2-main li:nth-child(7) { margin-left: 0; } .p2-ic { width: 100%; } .img-hide { display: none; } .p2-main li:hover .img-hide { display: block; } .p2-main li:hover .img-show { display: none; } .p2-main li:hover { background-color: #8A0780; } .p2-main li:hover .p2-t1 { color: #fff; } .p2-t1 { width: 100%; text-align: center; font-size: 24px; color: #333333; } .clear-box { overflow: hidden; } .p1-part-box{ display: flex; flex-wrap: wrap; gap: 20px 20px; } .p1-part{ position: relative; width: calc((100% - 60px) /4); } @media(max-width:1600px) { .bannerswiperLeft { left: 2%; } .bannerswiperRight { right: 2%; } } @media(max-width:1400px) { .main { width: 1200px; } .p0-btn { margin-left: 75%; } .p1-txt { width: 100%; left: 0; } .banner-c { width: 1200px; } .banner{ height: 480px; } .banner-bg3{ background-size:auto; } .bannerswiperLeft { left: 2%; } .bannerswiperRight { right: 2%; } } @media(max-width:1200px) { .main { width: 1200px; } .p0-btn { margin-left: 75%; } .p1-txt { width: 100%; left: 0; } .banner-c { width: 1200px; } .bannerswiperLeft { left: 2%; } .bannerswiperRight { right: 2%; } }