.pull-left { float: left; } .pull-right { float: right; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size: 0; } .clearfix { *zoom: 1; } .banner .but > div { background: none; font-size: 40px; height: 60px; width: 60px; line-height: 60px; margin-top: -30px; text-align: center; color: #fff; display: none; } .banner .but .swiper-button-prev { left: 20x; } .banner .but .swiper-button-next { right: 20px; } .banner .swiper-pagination { bottom: 35px !important; text-align: center; width: 100%; } .banner .swiper-pagination-bullet { width: 12px; height: 12px; background: none; opacity: 1; margin: 0 5px !important; position: relative; } .banner .swiper-pagination-bullet b { display: block; width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; } .banner .swiper-pagination-bullet.swiper-pagination-bullet-active b { width: 12px; height: 12px; } .banner { position: relative; overflow: hidden; } .banner video { position: absolute; width: 100%; height: 100%; left: 0px; top: 0; object-fit: cover; } .banner a { display: block; } .banner_text { z-index: 3; color: #fff; width: 100%; position: absolute; left: 0; top: 18.8%; } .banner_text h3 { font-size: 64px; line-height: 80px; max-height: 160px; margin-bottom: 20px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .banner_text h4 { font-size: 16px; line-height: 24px; max-height: 48px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .banner_text { width: 100%; opacity: 0; visibility: hidden; transition: all 4s; -webkit-transition: all 4s; -moz-transition: all 4s; -o-transition: all 4s; -ms-transition: all 4s; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } .banner li.swiper-slide-active .banner_text { visibility: visible; opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } @media only screen and (max-width: 1440px) { .banner_text h3 { font-size: 50px; line-height: 60px; max-height: 120px; } } @media only screen and (max-width: 1024px) { .banner .swiper-pagination { bottom: 10px !important; text-align: center; } .banner .swiper-pagination-bullet.swiper-pagination-bullet-active b { width: 14px; height: 14px; } .banner_text h3 { font-size: 24px; line-height: 30px; max-height: 60px; margin-bottom: 10px; } .banner .swiper-pagination-bullet.swiper-pagination-bullet-active b { width: 10px; height: 10px; } } @media only screen and (max-width: 767px) { .banner_p { width: 100%; } .banner .but > div { background: none; width: 30px; } .banner .but > div i { font-size: 30px; font-weight: bold; } .banner .but .swiper-button-prev { left: 5x; } .banner .but .swiper-button-next { right: 5px; } .banner_text { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } .banner_text h3 { font-size: 18px; line-height: 24px; max-height: 48px; margin-bottom: 5px; } .banner li img { display: none; } .banner li { height: 200px !important; } } .title { text-align: center; } .title h2 { line-height: 1; color: #2b2b2b; } .index_01 { background-repeat: repeat !important; padding-bottom: 2%; } .index_01 .title{padding-top: 40px;} .index_01 .title .title_P{ margin-top: 4%; } .index_01 .tapul { width: 932px; margin: 70px auto 20px; max-width: 67.56%; /*background: url(../upload/20230303/tap.png) center center no-repeat;*/ /*background-size: 100% , 100%;*/ background: #e5e5e5;border-radius: 30px; text-align: center; } .index_01 .tapul li { cursor: pointer; float: left; color: #848484; text-align: center; line-height: 50px; width: 25%; display: inline-block; } .index_01 .tapul li.on { /*background: url(../upload/20230303/tapbgon.png) center center no-repeat;*/ /*background-size: 100% , 100%;*/ background: #1b6652; color: #fff!important; border-radius: 30px; } .index_01 .topa { text-align: center; } .index_01 .topa a { margin: 0 10px; display: inline-block; color: #848484; } .index_01 .swiperwrap { margin: 50px 0; } .index_01 .swiperwrap .swiper-container{padding:30px;box-sizing: border-box;box-shadow: 0 0 10px rgba(0,0,0,0.1);} .index_01 .swiperwrap .swiper-slide img { width: 100%;height: 100%; } .index_01 .swiperwrap .swiper-slide h2 { text-align: center; margin-top: 30px; } .index_01 .swiperwrap .swiper-pagination { margin-top: 50px; margin-bottom: 50px; position: static; } .index_01 .swiperwrap .swiper-pagination .swiper-pagination-bullet { height: 2px; width: 100px; margin: 0; border-radius: 0; background: #919191; } .index_01 .swiperwrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { /*background-image: url(../upload/20230303/index_2swipertap_03.jpg);*/ background: #1b6652; } .index_02{ background: #f2f2f2; padding-top: 4%; } .index_02 .title_P{color: #333;margin-top: 3%;margin-bottom: 4%;} .index_02 .slide { width: 33.33%; position: relative; } .index_02 .slide img { width: 100%; } .index_02 .slide .fixl { transition: all 0.3s; z-index: 2; text-align: center; position: absolute; color: #fff; width: 100%; top: 50%; transform: translateY(-50%); height: auto; } .index_02 .slide .fixl p { display: none; margin: 25px 0 50px; } .index_02 .slide .fixl .btn_ldj { display: inline-block; width: 170px; height: 40px; text-align: center; background: #fff; color: #000; line-height: 40px; border-radius: 20px; display: none; } .index_02 .slide::after { content: ''; position: absolute; width: 100%; top: 0; left: 0; height: 100%; background: rgba(0, 0, 0, 0.3); display: none; } .index_02 .slide:hover p { display: block; } .index_02 .slide:hover .btn_ldj { display: inline-block; } .index_03 { text-align: center; padding: 5% 0 5%; } .index_03 .p { margin-top: 4%; text-align: center; } .index_03 .btn { display: inline-block; width: 170px; margin-top: 3%; height: 40px; text-align: center; /*background: url(../upload/20230303/tapbgon.png) center center no-repeat;*/ /*background-size: 100% , 100%;*/ background: #1b6652; border-radius: 30px; color: #fff!important; line-height: 40px; border-radius: 20px; } .index_03 ul { margin-top: 5%; } .index_03 ul li { transition: all 0.3s; text-align: center; width: 33.33%; } .index_03 ul li img { width: 100%; } .index_03 ul li h2 { margin-top: 30px; color: #2b2b2b; } .index_03 ul li p { color: #2b2b2b; opacity: 0; } .index_03 ul li:hover { transform: scale(1.2); } .index_03 ul li:hover p { opacity: 1; } @media only screen and (min-width: 1025px) { .index_01 .tapul li:hover{color: #1b6652;} .index_03 .btn:hover{opacity: .8;} } @media only screen and (max-width: 767px) { .index_01 .tapul { margin: 10px auto 10px; max-width: 100%; } .index_01 .tapul li { line-height: normal; } .index_01 { background-size: 500%; } .index_01 .swiperwrap { margin: 12px 0; } .index_01 .swiperwrap .swiper-slide h2 { text-align: center; margin-top: 10px; } .index_01 .swiperwrap .swiper-pagination { margin: 0; } .index_01 .swiperwrap .swiper-pagination .swiper-pagination-bullet{width: 30px;} .index_01 .title{padding-top: 0;padding-bottom: 10px;} .index_01 .tapul li{padding: 4px 0;} .index_02{padding-top: 30px;} .index_02 .slide { display: block; width: 90%; margin: 0 auto; position: relative; float: none; margin-bottom: 8px; } .index_02 .slide .fixl p { display: block; } .index_02 .slide .fixl .btn_ldj { display: inline-block; } .index_03 ul li { transition: all 0.3s; text-align: center; width: 100%; } .index_03 ul li:hover { transform: scale(1); } .index_03 ul li h2 { margin-top: 10px; } .index_03 ul li p { opacity: 1; margin-bottom: 10px; } }