#banner { width: 100%; height: 350px; margin-bottom: 40px; } h3.title span { width: 108px; height: 36px; line-height: 36px; display: inline-block; font-size: 16px; } h3.title>a { font-size: 12px; color: #4c4c4c; float: right; line-height: 36px; } h3.title span a, h3.title>a:hover { color: #04654d; font-weight: bold; } h3.title span.active { color: #04654d } h3.title.news span { background: url(/uploads/image/tdimages/tns1.png) no-repeat; text-align: center; cursor: pointer; margin-right: 8px; position: relative; } h3.title.news span.active, h3.title.news span:hover { background: url(/uploads/image/tdimages/tns2.png) no-repeat; color: #04654d; font-weight: bold; } h3.title.news span.active:after, h3.title.news span:hover:after { content: ''; display: block; width: 100%; position: absolute; bottom: -1px; left: 0; height: 1px; background: #f6f7f6; } .top_c { margin-left: 15px; width: 437px; position: relative; top: -12px } .top_c li { height: 33px; line-height: 33px; } .top_news h3.title { border-bottom: 1px solid #ccc; } .top_news li { height: 35px; border-bottom: 1px dotted #acacac; line-height: 35px; } .top_news li span.time { float: right; } .top_news li a { color: #4c4c4c } .top_news li a:hover { color: #04654d } .top_news li i, .swiper-container3 .swiper-slide i { width: 3px; height: 3px; background: #ea3e3c; display: inline-block; vertical-align: middle; margin-right: 3px; } .top_r { margin-left: 15px; width: 330px; position: relative; top: -5px; } .top_r h3.title { border: none; } .top_r>.fr p { width: 130px; line-height: 20px; } .top_r>.fr a { margin-top: 24px; display: block; color: #808080 } .top_news.cent { margin-top: 30px; } .top_news.cent .top_l, .top_news.cent .top_c, .top_news.cent .top_r { width: 382px } .top_news.cent .top_c { margin-left: 30px; top: 0; } .top_news.cent .top_r { margin-left: 20px; top: 0 } .top_news li a span:first-child, .top_news.cent li a span:first-child { width: 365px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: top; } .top_news.cent li a span:first-child { width: 300px } .top_news.cent .top_r h3 { border: none; } .cent .box { border: 1px solid #e6e6e6; } .cent .box .title span { width: 50%; display: inline-block; float: left; box-sizing: border-box; height: 37px; background: #f0f0f0; background: url(/uploads/image/tdimages/star.png) no-repeat 35px center; line-height: 37px; text-indent: 65px; cursor: pointer; border-bottom: 1px solid #f6f7f6 } .cent .box .title span.active { background: #f0f0f0; background: url(/uploads/image/tdimages/star2.png) no-repeat 35px center; color: #04654d } .cent .box .title span:first-child { background: url(/uploads/image/tdimages/kg.png) no-repeat 35px center; border-right: 1px solid #c3c3c3; } .cent .box .title span:first-child.active { background: url(/uploads/image/tdimages/kg2.png) no-repeat 35px center; } .banner2 { margin-top: 30px; width: 1200px; height: 137px; overflow: hidden; } .banner2 img { transition: 600ms; } .banner2:hover img { transform: scale(1.05); } .bt_list { margin: 20px 0 30px; } .bt_list img { display: block; margin: 0 auto; width: 360px; height: 200px; } .iconfont { transition: 500ms; } .bt_l, .bt_c, .bt_r { width: 384px; height: 291px; background: #fff; box-sizing: border-box; padding: 0 12px 12px 12px; margin-left: 22px; overflow: hidden; } .bt_l { margin-left: 0; } .bt_l p { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bt_list i { font-size: 35px; color: #04654d; position: relative; top: 3px } .bt_list p { font-size: 16px; color: #808080; margin-top: 8px; } .bt_c p { font-size: 14px; margin-top: 0; text-align: center; } .ul_paging { display: none; } .ul_paging.show { display: block; } .swiper-container { position: relative; height: 350px; width: 100%; } .swiper-slide { width: 100%; height: 350px; position: relative; overflow: hidden; } .swiper-slide img { position: absolute; transition: 600ms; } .swiper-slide img:hover { transform: scale(1.1); } .swiper-container .swiper-slide img:hover { transform: scale(1); } .swiper-pagination { position: absolute; bottom: 10px; z-index: 99; left: 0; width: 100%; text-align: center; } .swiper-pagination span, .flex-control-paging li a { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #04654d; margin: 0 5px; cursor: pointer; } .swiper-pagination span.swiper-active-switch, .flex-control-paging li a.flex-active { width: 38px; background: #fff; border-radius: 10px; } .swiper-container .swiper-pagination span.swiper-active-switch { width: 38px; height: 12px; border-radius: 5px; background: #fff; border: 0; } .swiper-container .swiper-slide img { /*opacity:0*/ } .swiper-container .swiper-slide-active img { opacity: 1 } .swiper-product-prev2, .swiper-product-next2, .swiper-product-prev4, .swiper-product-next4 { width: 25px; height: 40px; display: inline-block; background-repeat: no-repeat; background-position: center; background-image: url(/uploads/image/tdimages/prev1.png); background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 45%; cursor: pointer; left: 10px } .swiper-product-next2, .swiper-product-next4 { background-image: url(/uploads/image/tdimages/next1.png); background-color: rgba(0, 0, 0, 0.5); right: 10px; left: inherit; background-repeat: no-repeat; background-position: center; } .swiper-container2 { width: 403px; height: 270px; overflow: hidden; position: relative; } .slide-title { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; z-index: 99; width: 64%; height: 36px; line-height: 36px; background: rgba(0, 0, 0, .4); } .slide-title p { color: #fff; width: 224px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 15px; } .swiper-pagination2 { text-align: right; left: -15px } .swiper-pagination2 span { width: 8px; height: 8px; margin: 0 1px; } .swiper-pagination span.swiper-active-switch { width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; background: #04654d; } .swiper-container2 img { width: 403px; height: 270px } .swiper-container3 { height: 144px; overflow: hidden; position: relative; } .swiper-container3 .swiper-slide { line-height: 36px; } .swiper-container3 .swiper-slide i { margin: 0 13px 0 10px; } .swiper-container3 .swiper-slide a { width: 340px; display: block; border-bottom: 1px dotted #ccc; height: 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .swiper-product-prev3, .swiper-product-next3 { width: 22px; height: 21px; display: block; position: absolute; cursor: pointer; right: 7px; } .swiper-product-prev3 { background: url(/uploads/image/tdimages/prev2.png) no-repeat; top: 10px } .swiper-product-prev3:hover { background-position: 0 -21px; } .swiper-product-next3 { background: url(/uploads/image/tdimages/next2.png) no-repeat; bottom: 10px; height: 22px } .swiper-product-next3:hover { background-position: 0 -22px; } .swiper-container4 { width: 347px; height: 238px; overflow: hidden; position: relative; } .swiper-container4 p { padding-left: 0; } .swiper-container4 a { width: 347px; height: 238px; display: inline-flex; justify-content: center; align-items: center; } .swiper-container4 img { /* width: 347px; */ width: 224px; height: 238px } /*动画*/ /*第一个*/ .swiper-slide-1.swiper-slide .img-1-1 { left: 20%; top: 20%; } .swiper-slide-1.flex-active-slide .img-1-1 { animation: saani11 2s; /*left: 20%;*/ /*top: 20%;*/ } @keyframes saani11 { from { opacity: 0; transform: translate(-300%, 0); } to { opacity: 1; transform: translate(0, 0); } } .swiper-slide-1.flex-active-slide .img-1-2 { animation: saani12 2s; /*left: 60%;*/ /*top: 20%;*/ } .swiper-slide-1.swiper-slide .img-1-2 { left: 60%; top: 20%; } @keyframes saani12 { from { opacity: 0; transform: translate(300%, 0); } to { opacity: 1; transform: translate(0, 0); } } @keyframes saani13 { from { opacity: 0; transform: translate(-300%, 0); } to { opacity: 1; transform: translate(0, 0); } } /*第二个*/ .swiper-slide-2.flex-active-slide .img-1-1 { animation: saani21 2s; left: 53.8%; top: 31.5%; } @keyframes saani21 { from { opacity: 0; transform: translate(-300%, 0); } to { opacity: 1; transform: translate(0, 0); } } .swiper-slide-2.flex-active-slide .img-1-2 { animation: saani22 2s; left: 54%; top: 49%; } @keyframes saani22 { from { opacity: 0; transform: translate(300%, 0); } to { opacity: 1; transform: translate(0, 0); } } @keyframes saani23 { from { opacity: 0; transform: translate(-300%, 0); } to { opacity: 1; transform: translate(0, 0); } } /*第三个*/ .swiper-slide-3.flex-active-slide .img-1-1 { left: 46.8%; top: 31.5%; animation: saani31 3s cubic-bezier(0.215, 0.61, 0.455, 1); } @keyframes saani31 { from { opacity: 0; transform: translate(-300%, 0); } to { opacity: 1; transform: translate(0, 0); } } .swiper-slide-3.flex-active-slide .img-1-2 { top: 47%; left: 46.4%; animation: saani32 3s cubic-bezier(0.215, 0.61, 0.455, 1); } @keyframes saani32 { from { opacity: 0; transform: translate(300%, 0); } to { opacity: 1; transform: translate(0, 0); } } @keyframes saani33 { from { opacity: 0; transform: translate(-300%, 0); } to { opacity: 1; transform: translate(0, 0); } } /*第四个*/ .swiper-slide-4.flex-active-slide .img-1-1 { animation: saani41 3s cubic-bezier(0.215, 0.61, 0.355, 1); left: 46.8%; top: 32%; } @keyframes saani41 { from { opacity: 0; transform: translate(-300%, 0); } to { opacity: 1; transform: translate(0, 0); } } .swiper-slide-4.flex-active-slide .img-1-2 { animation: saani42 3s cubic-bezier(0.215, 0.61, 0.355, 1); left: 45.4%; top: 51%; } @keyframes saani42 { from { opacity: 0; transform: translate(300%, 0); } to { opacity: 1; transform: translate(0, 0); } } .swiper-slide-4.flex-active-slide .img-1-3 { animation: saani43 3s cubic-bezier(0.215, 0.61, 0.355, 1); left: 70.8%; top: 46%; } @keyframes saani43 { from { opacity: 0; transform: scale(0, 0); } to { opacity: 1; transform: scale(1, 1); } }